Place image changes

src/index.html

@@ -418,11 +418,13 @@
   </div>
 
   <!-- formerly gsvg_panel -->
-  <div id="container_panel" class="context_panel clearfix">
+  <div id="svg_panel" class="context_panel clearfix">
+    <h4>SVG</h4>
   </div>
   
   <div id="use_panel" class="context_panel clearfix">
-    <div class="button" id="tool_unlink_use" data-title="Break link">Break link reference</div>
+    <h4>Use</h4>
+    <div class="button full" id="tool_unlink_use" data-title="Break link">Break use ref</div>
   </div>
   
   <div id="g_panel" class="context_panel clearfix">
@@ -500,7 +502,7 @@
     </div>
     
     <div id="align_tools">
-      <h4>Align</h4>
+      <h4>Align to canvas</h4>
       <div class="toolset align_buttons" id="tool_position">
           <label>
             <div class="col last clear" id="position_opts">

src/js/Import.js

@@ -26,11 +26,9 @@ MD.Import = function(){
       var reader = new FileReader();
       reader.onloadend = function(e) {
         svgCanvas.importSvgString(e.target.result, true);
-        svgCanvas.ungroupSelectedElement()
+        //svgCanvas.ungroupSelectedElement();
-        svgCanvas.ungroupSelectedElement()
+        svgCanvas.alignSelectedElements("m", "page");
-        svgCanvas.groupSelectedElements()
+        svgCanvas.alignSelectedElements("c", "page");
-        svgCanvas.alignSelectedElements("m", "page")
-        svgCanvas.alignSelectedElements("c", "page")
       };
       reader.readAsText(file);
     }
@@ -74,7 +72,7 @@ MD.Import = function(){
       reader.readAsDataURL(file)
     }
     
-    
+    //editor.saveCanvas();
   }
 
   function loadSvgString(str, callback) {
@@ -83,6 +81,7 @@ MD.Import = function(){
     callback = callback || $.noop;
     if(success) {
       callback(true);
+      editor.saveCanvas();
     } else {
       $.alert("Error: Unable to load SVG data", function() {
         callback(false);

src/js/Panel.js

@@ -82,7 +82,11 @@ MD.Panel = function(){
       svgCanvas.pathActions.opencloseSubPath();
     });
 
-    // Text Path
+    // Use
+    $("#tool_unlink_use").on("click", function(){
+      svgCanvas.ungroupSelectedElement();
+    });
+    
 
     function show(elem) {
       $('.context_panel').hide();
@@ -243,7 +247,8 @@ MD.Panel = function(){
          line: ['x1','y1','x2','y2'], 
          text: ['x', 'y'],
          'use': [],
-         path : []
+         path : [],
+         svg : [],
        };
        
        var el_name = elem.tagName;

src/js/svgcanvas.js

@@ -5492,7 +5492,6 @@ var uniquifyElems = this.uniquifyElems = function(g) {
       }
       // remap all href attributes
       var hreffers = ids[oldid]["hrefs"];
-      console.log(hreffers)
       var k = hreffers.length;
       while (k--) {
         var hreffer = hreffers[k];
@@ -6002,101 +6001,87 @@ this.getPaint = function(color, opac, type) {
 // was obtained
 // * import should happen in top-left of current zoomed viewport  
 this.importSvgString = function(xmlString) {
-
   try {
-    // Get unique ID
-    var uid = svgedit.utilities.encode64(xmlString.length + xmlString).substr(0,32);
-    
-    var useExisting = false;
-
-    // Look for symbol and make sure symbol exists in image
-    if(import_ids[uid]) {
-      if( $(import_ids[uid].symbol).parents('#svgroot').length ) {
-        useExisting = true;
-      }
-    }
-    
     var batchCmd = new BatchCommand("Import SVG");
-  
+    // convert string into XML document
-    if(useExisting) {
+    var newDoc = svgedit.utilities.text2xml(xmlString);
-      var symbol = import_ids[uid].symbol;
-      var ts = import_ids[uid].xform;
-    } else {
-      // convert string into XML document
-      var newDoc = svgedit.utilities.text2xml(xmlString);
-  
-      this.prepareSvg(newDoc);
-  
-      // import new svg document into our document
-      var svg;
-      // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
-      if(svgdoc.adoptNode) {
-        svg = svgdoc.adoptNode(newDoc.documentElement);
-      }
-      else {
-        svg = svgdoc.importNode(newDoc.documentElement, true);
-      }
-      
-      uniquifyElems(svg);
-      
-      var innerw = convertToNum('width', svg.getAttribute("width")),
-        innerh = convertToNum('height', svg.getAttribute("height")),
-        innervb = svg.getAttribute("viewBox"),
-        // if no explicit viewbox, create one out of the width and height
-        vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh];
-      for (var j = 0; j < 4; ++j)
-        vb[j] = +(vb[j]);
-  
-      // TODO: properly handle preserveAspectRatio
-      var canvasw = +svgcontent.getAttribute("width"),
-        canvash = +svgcontent.getAttribute("height");
-      // imported content should be 1/3 of the canvas on its largest dimension
 
-      
+    this.prepareSvg(newDoc);
-      // Hack to make recalculateDimensions understand how to scale
-      var ts = "translate(0)";
-      
-      var symbol = svgdoc.createElementNS(svgns, "symbol");
-      var defs = findDefs();
 
-      while (svg.firstChild) {
+    // import new svg document into our document
-        var first = svg.firstChild;
+    var svg = svgdoc.adoptNode(newDoc.documentElement);
-        symbol.appendChild(first);
+
+    uniquifyElems(svg);
+
+    // Put all paint elems in defs
+    
+    $(svg).find('linearGradient, radialGradient, pattern').appendTo(findDefs());
+
+    svg.querySelectorAll('textPath').forEach(function(el){
+      const href = svgCanvas.getHref(el);
+      if (!href) return;
+      const path = svgcontent.querySelector(href);
+      $(path).appendTo(findDefs());
+      const offset = el.getAttribute("startOffset");
+      // 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))
       }
-      var attrs = svg.attributes;
+      const tspan = el.querySelector("tspan");
-      for(var i=0; i < attrs.length; i++) {
+      const text = el.closest("text");
-        var attr = attrs[i];
+      text.setAttributeNS(xmlns, "xml:space", "default");
-        symbol.setAttribute(attr.nodeName, attr.nodeValue);
+      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 && attr !== "id" && !attr.includes(":")) {
+            tspan.removeAttribute(attr);
+            text.setAttribute(attr, value);
+          }
+        });
+        tspan.setAttributeNS(xmlns, "xml:space", "preserve");
       }
-      symbol.id = getNextId();
+    })
-      
+    
-      // Store data
+    // Set ref element for <use> elements
-      import_ids[uid] = {
+    
-        symbol: symbol,
+    // TODO: This should also be done if the object is re-added through "redo"
-        xform: ts
+    setUseData(svg);
-      }
+    
-      
+    convertGradients(svg);
-      findDefs().appendChild(symbol);
+    
-      batchCmd.addSubCommand(new InsertElementCommand(symbol));
+    // recalculate dimensions on the top-level children so that unnecessary transforms
+    // are removed
+    svgedit.utilities.walkTreePost(svgcontent, function(n){try{recalculateDimensions(n)}catch(e){console.log(e)}});
+    
+    
+    var innerw = convertToNum('width', svg.getAttribute("width")),
+      innerh = convertToNum('height', svg.getAttribute("height")),
+      innervb = svg.getAttribute("viewBox"),
+      // if no explicit viewbox, create one out of the width and height
+      vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh];
+    for (var j = 0; j < 4; ++j)
+      vb[j] = +(vb[j]);
+
+    // TODO: properly handle preserveAspectRatio
+    var canvasw = +svgcontent.getAttribute("width"),
+      canvash = +svgcontent.getAttribute("height");
+
+    // Hack to make recalculateDimensions understand how to scale
+    
+    const layer = (current_group || getCurrentDrawing().getCurrentLayer());
+    const g = svgdoc.createElementNS(svgns, "g");
+    while (svg.firstChild) {
+      g.appendChild(svg.firstChild);
     }
+    layer.appendChild(g);
+    batchCmd.addSubCommand(new InsertElementCommand(g));
     
-    
-    var use_el = svgdoc.createElementNS(svgns, "use");
-    use_el.id = getNextId();
-    setHref(use_el, "#" + symbol.id);
-    
-    (current_group || getCurrentDrawing().getCurrentLayer()).appendChild(use_el);
-    batchCmd.addSubCommand(new InsertElementCommand(use_el));
     clearSelection();
-    
+    addToSelection([g]);
-    use_el.setAttribute("transform", ts);
-    recalculateDimensions(use_el);
-    $(use_el).data('symbol', symbol).data('ref', symbol);
-    addToSelection([use_el]);
-    
-    // TODO: Find way to add this in a recalculateDimensions-parsable way
-//        if (vb[0] != 0 || vb[1] != 0)
-//          ts = "translate(" + (-vb[0]) + "," + (-vb[1]) + ") " + ts;
     addCommandToHistory(batchCmd);
     call("changed", [svgcontent]);