Merge branch 'master' of https://github.com/SVG-Edit/svgedit into issues/374

src/editor/Editor.js

@@ -346,20 +346,16 @@ class Editor extends EditorStartup {
     $id('path_node_panel').style.display = (editmode) ? 'block' : 'none';
     if (editmode) {
       // Change select icon
-      const elements = document.getElementsByClassName("tool_button_current");
-      Array.from(elements).forEach(function (element) {
-        element.classList.add('tool_button_current');
-        element.classList.remove('tool_button');
-      });
-      $id('tool_select').classList.add('tool_button_current');
-      $id('tool_select').classList.remove('tool_button');
+      $id('tool_path').pressed = false;
+      $id('tool_select').pressed = true;
+      $id('tool_select').setAttribute('src', './images/select_node.svg');
       this.multiselected = false;
       if (elems.length) {
         this.selectedElement = elems[0];
       }
     } else {
       setTimeout(() => {
-        // setIcon('#tool_select', 'select');
+        $id('tool_select').setAttribute('src', './images/select.svg');
       }, 1000);
     }
   }

src/editor/components/seButton.js

@@ -87,10 +87,10 @@ export class ToolButton extends HTMLElement {
       this.$img.setAttribute('src', newValue);
       break;
     case 'pressed':
-      if (newValue) {
-        this.$div.classList.add('pressed');
-      } else {
+      if (newValue === null) {
         this.$div.classList.remove('pressed');
+      } else {
+        this.$div.classList.add('pressed');
       }
       break;
     case 'size':
@@ -145,7 +145,7 @@ export class ToolButton extends HTMLElement {
     if (value) {
       this.setAttribute('pressed', 'true');
     } else {
-      this.removeAttribute('pressed', '');
+      this.removeAttribute('pressed');
     }
   }
   /**
@@ -165,7 +165,7 @@ export class ToolButton extends HTMLElement {
     if (value) {
       this.setAttribute('disabled', 'true');
     } else {
-      this.removeAttribute('disabled', '');
+      this.removeAttribute('disabled');
     }
   }
   /**

src/editor/panels/TopPanel.js

@@ -636,8 +636,8 @@ class TopPanel {
    * @returns {void}
    */
   linkControlPoints() {
-    const linked = $id("tool_node_link").pressed;
-    $id("tool_node_link").pressed = !linked;
+    $id("tool_node_link").pressed = ($id("tool_node_link").pressed) ? false : true;
+    const linked = ($id("tool_node_link").pressed) ? true : false;
     this.path.linkControlPoints(linked);
   }
 
@@ -970,7 +970,7 @@ class TopPanel {
        </div> <!-- a_panel -->
        <div id="path_node_panel">
          <div class="tool_sep"></div>
-         <se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="./images/tool_node_link.svg" pressed>
+        <se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="./images/tool_node_link.svg" pressed>
          </se-button>
          <div class="tool_sep"></div>
          <se-spin-input id="path_node_x" data-attr="x" size="4" title="${i18next.t('properties.node_x')}" label="x:">

src/svgcanvas/event.js

@@ -528,6 +528,19 @@ export const mouseMoveEvent = function (evt) {
   });
 }; // mouseMove()
 
+/**
+*
+* @returns {void}
+*/
+export const mouseOutEvent = function () {
+  const svgCanvas = eventContext_.getCanvas();
+  const { $id } = svgCanvas;
+  if(eventContext_.getCurrentMode() !== 'select' && eventContext_.getStarted()) {
+    const event = new Event("mouseup");
+    $id('svgcanvas').dispatchEvent(event);
+  }
+};
+
 // - in create mode, the element's opacity is set properly, we create an InsertElementCommand
 // and store it on the Undo stack
 // - in move/resize mode, the element's attributes which were affected by the move/resize are

src/svgcanvas/selected-elem.js

@@ -571,16 +571,19 @@ export const pushGroupProperty = function (g, undoable) {
           // Clone the group's filter
           gfilter = drawing.copyElem(gfilter);
           findDefs().append(gfilter);
+
+          // const filterElem = getRefElem(gfilter);
+          const blurElem = getFeGaussianBlur(gfilter);
+          // Change this in future for different filters
+          const suffix = (blurElem?.tagName === 'feGaussianBlur') ? 'blur' : 'filter';
+          gfilter.id = elem.id + '_' + suffix;
+          elementContext_.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [ elem ]);
         }
       } else {
         gfilter = getRefElem(elem.getAttribute('filter'));
       }
       // const filterElem = getRefElem(gfilter);
       const blurElem = getFeGaussianBlur(gfilter);
-      // Change this in future for different filters
-      const suffix = (blurElem?.tagName === 'feGaussianBlur') ? 'blur' : 'filter';
-      gfilter.id = elem.id + '_' + suffix;
-      elementContext_.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [ elem ]);
 
       // Update blur value
       if (cblur) {

src/svgcanvas/svg-exec.js

@@ -368,6 +368,28 @@ export const setSvgString = function (xmlString, preventUndo) {
         svgCanvas.embedImage(val);
       }
     });
+    // Duplicate id replace changes
+    const nodes = content.querySelectorAll('[id]');
+    const ids = {};
+    const totalNodes = nodes.length;
+
+    for(let i=0; i<totalNodes; i++) {
+      const currentId = nodes[i].id ? nodes[i].id : "undefined";
+      if(isNaN(ids[currentId])) {
+        ids[currentId] = 0;
+      }
+      ids[currentId]++;
+    }
+
+    Object.entries(ids).forEach(([ key, value ]) => {
+      if (value > 1) {
+        const nodes = content.querySelectorAll('[id="'+key+'"]');
+        for(let i=1; i<nodes.length; i++) {
+          nodes[i].setAttribute('id', svgCanvas.getNextId());
+        }
+      }
+    });
+
 
     // Wrap child SVGs in group elements
     const svgElements = content.querySelectorAll('svg');

src/svgcanvas/svgcanvas.js

@@ -39,7 +39,7 @@ import {
   init as textActionsInit, textActionsMethod
 } from './text-actions.js';
 import {
-  init as eventInit, mouseMoveEvent, mouseUpEvent,
+  init as eventInit, mouseMoveEvent, mouseUpEvent, mouseOutEvent,
   dblClickEvent, mouseDownEvent, DOMMouseScrollEvent
 } from './event.js';
 import { init as jsonInit, getJsonFromSvgElements, addSVGElementsFromJson } from './json.js';
@@ -1313,6 +1313,7 @@ class SvgCanvas {
  * @returns {void}
  */
       const mouseUp = mouseUpEvent;
+      const mouseOut = mouseOutEvent;
 
       const dblClick = dblClickEvent;
 
@@ -1329,6 +1330,7 @@ class SvgCanvas {
       container.addEventListener('click', handleLinkInCanvas);
       container.addEventListener('dblclick', dblClick);
       container.addEventListener('mouseup', mouseUp);
+      container.addEventListener('mouseleave', mouseOut);
 
       // TODO(rafaelcastrocouto): User preference for shift key and zoom factor
       container.addEventListener('mousewheel', DOMMouseScrollEvent);

src/svgcanvas/undo.js

@@ -98,6 +98,24 @@ export const getUndoManager = function () {
           //    // Ok to replace above with this? `sib.before(elem);`
           //  }
           // }
+          if (cmd.elem.tagName === 'text'){
+            const [ dx, dy ] = [ cmd.newValues.x - cmd.oldValues.x,
+              cmd.newValues.y - cmd.oldValues.y ];
+
+            const tspans = cmd.elem.children;
+
+            for (let i = 0; i < tspans.length; i++){
+              let x = +tspans[i].getAttribute('x');
+              let y = +tspans[i].getAttribute('y');
+
+              const unapply = (eventType === EventTypes.AFTER_UNAPPLY);
+              x = unapply? x - dx: x + dx;
+              y = unapply? y - dy: y + dy;
+
+              tspans[i].setAttribute('x', x);
+              tspans[i].setAttribute('y', y);
+            }
+          }
         }
       }
     }