changes

src/css/color-tool.css

@@ -4,11 +4,7 @@
   left: 0;
 }
 
-.touch  #color_tools #tool_fill .color_block > div {
-  position: relative;
-}
-
- #color_tools #tool_fill .color_block #fill_bg,  #color_tools #tool_stroke .color_block #stroke_bg {
+#color_tools #tool_fill .color_block #fill_bg,  #color_tools #tool_stroke .color_block #stroke_bg {
   position: absolute;
   top: 1px;
   left: 1px;
@@ -34,7 +30,7 @@
   height: 11px;
   position: absolute;
   top: -5px;
-  right: var(--x3);
+  right: 0;
   cursor: nwse-resize
 }
 
@@ -79,7 +75,7 @@
   margin: 12px 6px 0 6px;
 }
 
-.touch  #color_tools {
+#color_tools {
   width: auto;
   height: auto;
 }

src/css/draginput.css

@@ -146,6 +146,12 @@
   z-index: 0;
 }
 
+.draginput.textcontent input {
+  cursor: text;
+  text-align: left;
+  text-indent:  var(--x2);
+}
+
 .draginput.textcontent input,
 .draginput.textcontent input:hover,
 .draginput.textcontent input:active {

src/css/method-draw.css

@@ -268,10 +268,6 @@ input[type=file] {
   visibility: none;
 }
 
-.touch .shortcut {
-  display: none;
-}
-
 /* For modern browsers */
 .clearfix:before,
 .clearfix:after {

src/js/Keyboard.js

@@ -115,7 +115,7 @@ MD.Keyboard = function(){
       if (key === "arrowdown") key = "↓";
       if (key === " ") key = "SPACEBAR";
       if (key === "shift") key = "⇧";
-      if (key === "cmd") key = svgedit.browser.isMac ? "⌘" : "Ctrl";
+      if (key === "cmd") key = svgedit.browser.isMac() ? "⌘" : "Ctrl";
       shortcutKey.textContent = key;
       shortcutKeys.appendChild(shortcutKey);
       shortcut.appendChild(shortcutKeys);

src/js/Menu.js

@@ -53,7 +53,7 @@ MD.Menu = function(){
   }
 
   // This puts the correct shortcuts in the menus
-  if (!svgedit.browser.isMac) {
+  if (!svgedit.browser.isMac()) {
    $('.shortcut').each(function(){
      var text = $(this).text();
      $(this).text(text.split("⌘").join("Ctrl+"))

src/js/Panel.js

@@ -160,7 +160,6 @@ MD.Panel = function(){
         $("#tool_text_on_path").toggle(canTextPath);
       }
       else {
-        console.log("remove multiselectd")
         $("#panels").removeClass("multiselected");
       }
 
@@ -297,7 +296,7 @@ MD.Panel = function(){
            $(select).find(`option[value='${cleanFontFamily}']`).prop("selected", true);
            $('#font_size').val(elem.getAttribute("font-size"));
            $('#text').val(elem.textContent);
-           $('#preview_font').text(cleanFontFamily).css('font-family', font_family);
+           $('#preview_font').text(cleanFontFamily).css('font-family', cleanFontFamily === "default" ? "sans-serif" : cleanFontFamily);
            const textPath = elem.querySelector("textPath");
            document.getElementById("text_panel").classList.toggle("text-path", textPath);
            $("#textPath_offset").val(textPath ? textPath.getAttribute("startOffset") : 0);

src/js/editor.js

@@ -196,9 +196,11 @@ MD.Editor = function(){
       elems: elems
     });
 
-    if (!svgCanvas.getContext())
+
+    if (!svgCanvas.getContext()) {
         state.set("canvasContent", svgCanvas.getSvgString())
       }
+  }
 
   function changeAttribute(attr, value, completed) {
     if (attr === "opacity") value *= 0.01;

src/js/lib/jquery-draginput.js

@@ -199,7 +199,6 @@ $.fn.dragInput.updateCursor = function(el){
   var scale = parseFloat(el.getAttribute("data-scale"));
   var domain = parseFloat(el.getAttribute("data-domain"));
   var pos = ((value*-1)/scale+domain) + "px";
-  console.log(value, pos)
   var cursor = el.parentNode.lastChild
   if (cursor.className === "draginput_cursor") cursor.style.top = pos;
 }

src/js/method-draw.js

@@ -1573,7 +1573,7 @@ window.methodDraw = function() {
                 keyval = opts.key;
               }
               keyval += '';
-              if (svgedit.browser.isMac && keyval.indexOf("+") != -1) {
+              if (svgedit.browser.isMac() && keyval.indexOf("+") != -1) {
                 var modifier_key =  keyval.split("+")[0];
                 if (modifier_key == "ctrl") keyval.replace("ctrl", "cmd")
               }

src/js/svgcanvas.js

@@ -1474,22 +1474,6 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
 
           var m = transformListToTransform(childTlist).matrix;
         
-          // Convert a matrix to a scale if applicable
-//          if(hasMatrixTransform(childTlist) && childTlist.numberOfItems == 1) {
-//            if(m.b==0 && m.c==0 && m.e==0 && m.f==0) {
-//              childTlist.removeItem(0);
-//              var translateOrigin = svgroot.createSVGTransform(),
-//                scale = svgroot.createSVGTransform(),
-//                translateBack = svgroot.createSVGTransform();
-//              translateOrigin.setTranslate(0, 0);
-//              scale.setScale(m.a, m.d);
-//              translateBack.setTranslate(0, 0);
-//              childTlist.appendItem(translateBack);
-//              childTlist.appendItem(scale);
-//              childTlist.appendItem(translateOrigin);
-//            }
-//          }
-        
           var angle = getRotationAngle(child);
           var old_start_transform = start_transform;
           var childxforms = [];
@@ -3331,7 +3315,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
   };
   
   var dblClick = function(evt) {
-    var evt_target = evt.target;
+    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;
@@ -3339,9 +3325,15 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
     if(parent === current_group) return;
     
     if(tagName === 'text' && current_mode !== 'textedit') {
+      if (evt_target.querySelector("textPath")) {
+        $("#text").focus();
+        $("#text").select();
+      }
+      else {
         var pt = transformPoint( evt.pageX, evt.pageY, root_sctm );
         textActions.select(mouse_target, pt.x, pt.y);
       }
+    }
     
     if((tagName === "g" || tagName === "a") && getRotationAngle(mouse_target)) {
       // TODO: Allow method of in-group editing without having to do 
@@ -5833,6 +5825,19 @@ this.setSvgString = function(xmlString) {
     
     content.find('linearGradient, radialGradient, pattern').appendTo(findDefs());
 
+    svgcontent.querySelectorAll('textPath').forEach(function(el){
+      const href = svgCanvas.getHref(el);
+      if (!href) return;
+      const path = svgcontent.querySelector(href);
+      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))
+      }
+    })
+    
     // Set ref element for <use> elements
     
     // TODO: This should also be done if the object is re-added through "redo"