Title

src/css/draginput.css

@@ -130,7 +130,7 @@
   z-index: 2;
 }
 
-.draginput input::selection { background: var(--accent4); }
+.draginput input::selection { background: var(--accent9); }
 
 .draginput.text-input input, 
 .draginput.text-input input:hover, 
@@ -140,10 +140,10 @@
 
 .draginput.text-input input {
   text-align: left;
-  text-indent: 8px;
+  text-indent: var(--x2);
 }
 
-.draginput.textcontent {
+.draginput.textcontent.hidden {
   position: absolute;
   opacity: 0;
   z-index: 0;

src/css/loading.css

@@ -20,7 +20,7 @@
 
 .loading #svgcanvas:after {
   position: absolute;
-  content: 'Loading';
+  content: attr(title);
   font-size:  13px;
   font-weight: 600;
   line-height: var(--x6);

src/index.html

@@ -159,6 +159,13 @@
 
     <div class="draginputs">
 
+
+      <label class="draginput twocol textcontent" data-title="Change Content">
+        <input id="canvas_title" type="text" />
+        <span>Title</span>
+      </label>
+
+
       <label data-title="Change canvas width" class="draginput">
         <input id="canvas_width" type="text" pattern="[0-9]*" value="800" />
         <span class="icon_label">Width</span>
@@ -384,7 +391,7 @@
 
     <h4>Text</h4>
     <div class="draginputs">
-      <label class="draginput twocol textcontent" data-title="Change Content">
+      <label class="draginput twocol" data-title="Change Content">
         <input id="text" type="text"/>
         <span>Content</span>
       </label>
@@ -808,6 +815,7 @@
   <script type="text/javascript" src="js/Palette.js"></script>
   <script type="text/javascript" src="js/Zoom.js"></script>
   <script type="text/javascript" src="js/Modal.js"></script>
+  <script type="text/javascript" src="js/Title.js"></script>
   <script type="text/javascript" src="js/Darkmode.js"></script>
   <script type="text/javascript" src="js/ContextMenu.js"></script>
   <script type="text/javascript" src="js/Shapelib.js"></script>

src/js/Canvas.js

@@ -144,7 +144,14 @@ MD.Canvas = function(){
     workarea.scroll();
   }
 
+  function rename(str) {
+    if (str.length) {
+      svgCanvas.setDocumentTitle(str);
+    }
+  }
+
   this.resize = resize;
   this.update = update;
+  this.rename = rename;
   this.changeSize = changeSize;
 }

src/js/Panel.js

@@ -87,6 +87,10 @@ MD.Panel = function(){
       svgCanvas.ungroupSelectedElement();
     });
 
+    $("#canvas_title").on("click", function(){
+      $(this).focus();
+    });
+
     $('#button_group').on("click", editor.groupSelected);
     $('#button_ungroup').on("click", editor.ungroupSelected);
     

src/js/Title.js

@@ -0,0 +1,26 @@
+MD.Title = function(){
+  
+  $('#canvas_title')
+    .val(state.get("canvasTitle"))
+    .keydown(function(e){
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        this.blur();
+      }
+      if (e.key === "Enter") {
+        this.blur();
+      }
+    })
+    .keyup(function(e){
+      e.stopPropagation();
+      svgCanvas.setDocumentTitle(this.value);
+    })
+    .click(function(e) {
+      this.focus();
+      this.select();
+    })
+    .blur(function(e){
+      state.set("canvasTitle", this.value);
+    });
+
+}

src/js/dao.js

@@ -15,7 +15,7 @@ const dao = [
     name: "canvasTitle",
     label: "Canvas Title",
     type: "string",
-    default: "",
+    default: "Drawing",
     private: false,
     save: true
   },

src/js/loading.js

@@ -1,12 +1,14 @@
 (function(){
   const canvasContent = localStorage.getItem("md-canvasContent");
   const isDark = localStorage.getItem("md-darkmode");
-  console.log(isDark)
   if (!isDark && isDark !== null) document.body.classList.add("inverted");
   if (!canvasContent) return;
   const parser = new DOMParser();
   const doc = parser.parseFromString(canvasContent, "image/svg+xml");
-  const workarea = document.getElementById("workarea")
+  const workarea = document.getElementById("workarea");
   workarea.appendChild(doc.documentElement);
+  const svgCanvas = document.getElementById("svgcanvas");
+  const canvasTitle = localStorage.getItem("md-canvasTitle");
+  svgCanvas.setAttribute("title", canvasTitle ? "Loading " + canvasTitle  : "Loading Drawing");
   const svg = workarea.querySelector("svg");
 })();

src/js/start.js

@@ -103,6 +103,7 @@ editor.pan = new MD.Pan();
 editor.import = new MD.Import();
 editor.contextMenu = new MD.ContextMenu();
 editor.darkmode = new MD.Darkmode();
+editor.title = new MD.Title();
 
 // bind the selected event to our function that handles updates to the UI
 svgCanvas.bind("selected", editor.selectedChanged);
@@ -121,4 +122,5 @@ svgCanvas.setSvgString(state.get("canvasContent"));
 //editor.paintBox.fill.setPaint(state.get("canvasFill"));
 //editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
 //editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
-document.body.classList.remove("loading");
+document.body.classList.remove("loading");
+document.getElementById("workarea").removeAttribute("title");

src/js/state.js

@@ -25,6 +25,7 @@ function State(){
   // canvas data
   this.canvasId = (id)      => {/* noop */}
   this.canvasMode = (mode)  => { editor.toolbar.setMode(mode) }
+  this.canvasTitle = (str)  => { editor.canvas.rename(str) }
   this.canvasSize = (size)  => { editor.canvas.resize(...size) }
   this.canvasContent = (svgString)  => { /* noop */ }
   this.canvasRulers = (bool)  => { /* noop */ }

src/js/svgcanvas.js

@@ -2740,14 +2740,19 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
           ty = snapToGrid(ty);
         }
 
-        translateOrigin.setTranslate(-(left+tx),-(top+ty));
+        
+
+        else {
+          translateOrigin.setTranslate(-(left+tx),-(top+ty));
+        }
+
         if(evt.shiftKey) {
           if(sx == 1) sx = sy
           else sy = sx;
         }
         scale.setScale(sx,sy);
-        
         translateBack.setTranslate(left+tx,top+ty);
+
         if(hasMatrix) {
           var diff = angle?1:0;
           tlist.replaceItem(translateOrigin, 2+diff);
@@ -3317,7 +3322,6 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
   var dblClick = function(evt) {
     var isNested = (evt.target.tagName === "tspan" || evt.target.tagName === "textPath");
     var evt_target = isNested ? evt.target.closest("text") : evt.target;
-    console.log(evt_target)
     var parent = evt_target.parentNode;
     var mouse_target = getMouseTarget(evt);
     var tagName = mouse_target.tagName;
@@ -5340,11 +5344,14 @@ this.save = function() {
   
   // no need for doctype, see http://jwatt.org/svg/authoring/#doctype-declaration
   var str = this.svgCanvasToString();
-  if (str.includes(" href=")) str = str.replace(" href=", " xlink:href=");
+  var illutratorCompat = true;
-  console.log(str)
+  if (illutratorCompat && str.includes(" href=")) str = str.replace(" href=", " xlink:href=");
   var blob = new Blob([ str ], {type: "image/svg+xml;charset=utf-8"});
   var dropAutoBOM = true;
-  saveAs(blob, "FVE-image.svg", dropAutoBOM);
+  var title = state.get("canvasTitle");
+  var filename = title.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+  var extension = "svg";
+  saveAs(blob, `${filename}.${extension}`, dropAutoBOM);
 };
 
 // Function: rasterExport