fixes

src/css/app.css

@@ -63,7 +63,8 @@
 #workarea.nw-resize * {cursor: nw-resize !important;}
 #workarea.sw-resize * {cursor: sw-resize !important;}
 
-#workspace.dragging * {
+#workspace.dragging *,
+body.dragging * {
   cursor: url(../images/dragging.png), move;
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;

src/css/draginput.css

@@ -224,6 +224,11 @@
   z-index: 1;
   top: 0;
   left: 0;
+  cursor:  pointer;
+}
+
+.draginput:hover .draginput_cursor {
+  border-color: var(--d6);
 }
 
 .draginput_cursor{
@@ -231,7 +236,6 @@
   top: 50%;
   width: 100%;
   border-top: solid var(--d4) 1px;
-  margin-top: -2px;
   z-index: 0;
 }
 

src/css/loading.css

@@ -39,6 +39,7 @@
   top:  50%;
   left:  50%;
   transform:  translate(-50%, -50%);
+  opacity: 0.7;
 }
 
 

src/css/text.css

@@ -57,6 +57,11 @@
   right: var(--x2);
 }
 
+.draginput:hover #preview_font:after {
+  border-right-color: var(--z3);
+  background: linear-gradient(to right, rgba(0,0,0,0), var(--z3));
+}
+
 #preview_font:after {
   content: '';
   position: absolute;

src/index.html

@@ -372,7 +372,7 @@
           <input id="textPath_offset" class="attr_changer" data-title="Change offset" data-attr="offset" pattern="[0-9]*" />
           <span>Offset</span>
         </label>
-        <div class="draginput draginput-button draginput-button-delete" id="tool_textPath_remove" data-title="Remove path">Remove path</div>
+        <div class="draginput draginput-button draginput-button-delete" id="tool_release_text_on_path" data-title="Remove path">Remove path</div>
       </div>
       
 
@@ -584,6 +584,7 @@
         </div>
     </div>
     <div class="clearfix"></div>
+    <div class="button full" id="tool_text_on_path" title="Place text on path">Place text on path</div>
 
   </div>
   

src/js/Canvas.js

@@ -68,13 +68,13 @@ MD.Canvas = function(){
     if (w === 'fit' || h === 'fit') state.set("canvasSize", res);
     $("#canvas_width").val(w);
     $("#canvas_height").val(h);
-    state.set("canvasContent", svgCanvas.getSvgString());
   }
 
-  function changeSize(){
+  function changeSize(attr, val, completed){
     const w = $("#canvas_width").val();
     const h = $("#canvas_height").val();
     state.set("canvasSize", [w,h]);
+    if (completed) editor.saveCanvas();
   }
 
   function update(center, new_ctr) {

src/js/Import.js

@@ -79,6 +79,7 @@ MD.Import = function(){
 
   function loadSvgString(str, callback) {
     var success = svgCanvas.setSvgString(str) !== false;
+    
     callback = callback || $.noop;
     if(success) {
       callback(true);
@@ -96,6 +97,7 @@ MD.Import = function(){
       var reader = new FileReader();
       reader.onloadend = function(e) {
         loadSvgString(e.target.result);
+        editor.saveCanvas();
         editor.canvas.update(true);
       };
       reader.readAsText(f.files[0]);

src/js/Keyboard.js

@@ -12,12 +12,12 @@ MD.Keyboard = function(){
     "z": { name: "Zoom tool",           cb: ()=> state.set("canvasMode", "zoom")},
     "e": { name: "Eyedropper tool",     cb: ()=> state.set("canvasMode", "eyedropper")},
     "x": { name: "Focus fill/stroke",   cb: ()=> editor.focusPaint()}, 
-    "shift_x": { name: "Switch fill/stroke",  cb: ()=> editor.switchPaint()},  
+"shift_x":   { name: "Switch fill/stroke",  cb: ()=> editor.switchPaint()},  
     "alt":   { name: false,                 cb: ()=> $("#workarea").toggleClass("out", state.get("canvasMode") === "zoom" )},  
     "cmd_s": { name: "Save SVG File",       cb: ()=> editor.save()},
     "cmd_z": { name: "Undo",                cb: ()=> editor.undo()},
     "cmd_y": { name: "Redo",                cb: ()=> editor.redo()},
-    "cmd_shift_z": { name: "Redo",          cb: ()=> editor.redo()},
+"cmd_shift_z": { name: "Redo",              cb: ()=> editor.redo()},
     "cmd_c": { name: "Copy",                cb: ()=> editor.copySelected()},
     "cmd_x": { name: "Cut",                 cb: ()=> editor.cutSelected()},
     "cmd_v": { name: "Paste",               cb: ()=> editor.pasteSelected()},

src/js/Panel.js

@@ -82,6 +82,8 @@ MD.Panel = function(){
       svgCanvas.pathActions.opencloseSubPath();
     });
 
+    // Text Path
+
     function show(elem) {
       $('.context_panel').hide();
       if (elem === "canvas") return $('#canvas_panel').show();

src/js/editor.js

@@ -146,7 +146,7 @@ MD.Editor = function(){
       svgCanvas.leaveContext()
     }
     else
-      state.set("canvasContent", svgCanvas.getSvgString())
+      saveCanvas()
   }
 
   // called when we've selected a different element
@@ -198,7 +198,7 @@ MD.Editor = function(){
 
 
     if (!svgCanvas.getContext()) {
-        state.set("canvasContent", svgCanvas.getSvgString())
+        saveCanvas();
       }
   }
 
@@ -206,7 +206,7 @@ MD.Editor = function(){
     if (attr === "opacity") value *= 0.01;
     if (completed) {
       svgCanvas.changeSelectedAttribute(attr, value);
-      state.set("canvasContent", svgCanvas.getSvgString());
+      saveCanvas();
     }
     else svgCanvas.changeSelectedAttributeNoUndo(attr, value);      
   }
@@ -300,6 +300,11 @@ MD.Editor = function(){
     }});
   };
 
+  function saveCanvas(){
+    console.log("saved")
+    state.set("canvasContent", svgCanvas.getSvgString());
+  }
+
   function toggleWireframe() {
     editor.menu.flash($('#view_menu')); 
     $('#tool_wireframe').toggleClass('push_button_pressed');
@@ -381,6 +386,7 @@ MD.Editor = function(){
   this.shortcuts = shortcuts;
   this.donate = donate;
   this.source = source;
+  this.saveCanvas = saveCanvas;
 
   this.export = function(){ 
     if(window.canvg) {

src/js/eyedropper.js

@@ -108,7 +108,7 @@ MD.Eyedropper = function() {
             changes[attrname] = elem.getAttribute(attrname);
             elem.setAttribute(attrname, newvalue);
           };
-          var batchCmd = new S.BatchCommand();
+          var batchCmd = new svgedit.history.BatchCommand();
           opts.selectedElements.forEach(function(element){
             if (currentStyle.fillPaint)       change(element, "fill", currentStyle.fillPaint);
             if (currentStyle.fillOpacity)     change(element, "fill-opacity", currentStyle.fillOpacity);

src/js/sanitize.js

@@ -128,6 +128,9 @@ $.each(svgWhiteList_, function(elt,atts){
   svgWhiteListNS_[elt] = attNS;
 });
 
+
+svgedit.sanitize.svgWhiteList = function() { return svgWhiteList_; }
+
 // temporarily expose these
 svgedit.sanitize.getNSMap = function() { return nsMap_; }
 

src/js/svgcanvas.js

@@ -5830,12 +5830,25 @@ this.setSvgString = function(xmlString) {
       if (!href) return;
       const path = svgcontent.querySelector(href);
       const offset = el.getAttribute("startOffset");
+      el.setAttribute("xml:space", "default");
       // convert percentage based to absolute
       if (offset.includes("%") && path) {
         const totalLength = path.getTotalLength();
         const pct = parseFloat(offset) * .01;
         el.setAttribute("startOffset", (pct * totalLength).toFixed(0))
       }
+      const tspan = el.querySelector("tspan");
+      const text = el.closest("text");
+      if (tspan && text) {
+        // grab the first tspan and apply it to the text element
+        svgedit.sanitize.svgWhiteList()["text"].forEach(attr => {
+          const value = tspan.getAttribute(attr);
+          if (value) {
+            tspan.removeAttribute(attr);
+            text.setAttribute(attr, value);
+          }
+        });
+      }
     })
     
     // Set ref element for <use> elements
@@ -6044,13 +6057,6 @@ this.importSvgString = function(xmlString) {
       var symbol = svgdoc.createElementNS(svgns, "symbol");
       var defs = findDefs();
 
-      if(svgedit.browser.isGecko()) {
-        // Move all gradients into root for Firefox, workaround for this bug:
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=353575
-        // TODO: Make this properly undo-able.
-        $(svg).find('linearGradient, radialGradient, pattern').appendTo(defs);
-      }
-  
       while (svg.firstChild) {
         var first = svg.firstChild;
         symbol.appendChild(first);
@@ -7511,10 +7517,7 @@ this.setTextContent = function(val) {
 
 this.textPath = function(){
   const text = selectedElements.find(element => element.tagName === "text");
-  var path = selectedElements.find(element => element.tagName === "path" || element.tagName === "ellipse");
-  if (path.tagName === "ellipse") {
-    console.log("ellipse")
-  }
+  var path = selectedElements.find(element => element.tagName === "path");
   if (!text || !path) return false;
   const textPath = svgdoc.createElementNS(svgns, "textPath");
   textPath.textContent = text.textContent;
@@ -7522,6 +7525,7 @@ this.textPath = function(){
   text.setAttribute("text-anchor", "middle");
   text.setAttribute("x", 0);
   text.setAttribute("y", 0);
+  textPath.setAttribute("xml:space", "default");
   textPath.setAttribute("xlink:href", "#" + path.id);
   textPath.setAttribute("href", "#" + path.id);
   const offset = (path.getTotalLength()/2).toFixed(0)

src/js/utils.js

@@ -10,3 +10,16 @@ utils.findGetParameter = function(parameterName) {
     }
     return result;
 }
+
+utils.throttle = function (callback, limit) {
+    var waiting = false;                
+    return function () {                
+      if (!waiting) {                   
+        callback.apply(this, arguments);
+        waiting = true;                 
+        setTimeout(function () {        
+          waiting = false;              
+        }, limit);
+      }
+    }
+  }