diff --git a/src/editor/Editor.js b/src/editor/Editor.js index 7bfd6d78..7196c504 100644 --- a/src/editor/Editor.js +++ b/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); } } diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js index 7715d4fe..52e18f7b 100644 --- a/src/editor/components/seButton.js +++ b/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'); } } /** diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index c0a5fcb6..6e36ce6f 100644 --- a/src/editor/panels/TopPanel.js +++ b/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 {
- +
diff --git a/src/svgcanvas/event.js b/src/svgcanvas/event.js index 0b973c3e..5283a9d8 100644 --- a/src/svgcanvas/event.js +++ b/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 diff --git a/src/svgcanvas/selected-elem.js b/src/svgcanvas/selected-elem.js index 0fe11266..9b5014dd 100644 --- a/src/svgcanvas/selected-elem.js +++ b/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) { diff --git a/src/svgcanvas/svg-exec.js b/src/svgcanvas/svg-exec.js index 3052deb3..3d75c42c 100644 --- a/src/svgcanvas/svg-exec.js +++ b/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 { + if (value > 1) { + const nodes = content.querySelectorAll('[id="'+key+'"]'); + for(let i=1; i