From 82571da2c4cab90eb651bdfe23f7fc504a57aee2 Mon Sep 17 00:00:00 2001 From: Tom Date: Mon, 14 Oct 2024 15:31:57 +0200 Subject: [PATCH] Border update --- src/ElementEditor.js | 79 +++++++++++++++++++++++++++++--------------- 1 file changed, 53 insertions(+), 26 deletions(-) diff --git a/src/ElementEditor.js b/src/ElementEditor.js index 78bde8f..fa4c6c4 100644 --- a/src/ElementEditor.js +++ b/src/ElementEditor.js @@ -116,31 +116,6 @@ export default class ElementEditor { const svgGroup = corshape.parentNode; svgGroup.classList.add('selected'); - // Ofcourse, we dont have to do it if there already are resize handlers - if (svgGroup.querySelector('.resize-handle, .line-modify-handle')) { - return; - } - - // Connector line special case - if (selElement.name == 'ConnectionLine') { - const pathpoints = corshape.getPathData(); - - for (let i = 0; i < pathpoints.length; i++) { - const conhandle = Util.makeSVGElement('circle'); - conhandle.dataset.pathIndex = i; - if (i == pathpoints.length - 1) { - conhandle.dataset.pathIsLast = true; - } - conhandle.setAttribute('class', 'line-modify-handle'); - conhandle.setAttribute('cx', pathpoints[i].values[0]); - conhandle.setAttribute('cy', pathpoints[i].values[1]); - conhandle.setAttribute('r', 5); - svgGroup.appendChild(conhandle); - } - - return; - } - const boundingBox = corshape.getBBox(); // Make selection borders and corners const handles = [ @@ -178,6 +153,58 @@ export default class ElementEditor { } ]; + // Ofcourse, we dont have to do it if there already are resize handlers + if (svgGroup.querySelector('.resize-handle, .line-modify-handle')) { + // Update handles + const resizeHandleEdges = svgGroup.querySelectorAll('.resize-handle.edge'); + const resizeHandleCorners = svgGroup.querySelectorAll('.resize-handle.corner'); + const connectors = svgGroup.querySelectorAll('.connector'); + const connectorSuggestions = svgGroup.querySelectorAll('.connection-suggestion'); + + for (let i = 0; i < handles.length; i++) { + if (!resizeHandleEdges[i]) { + continue; + } + const x2 = handles[(i + 1) % handles.length].x; + const y2 = handles[(i + 1) % handles.length].y; + resizeHandleEdges[i].setAttribute('x1', handles[i].x); + resizeHandleEdges[i].setAttribute('y1', handles[i].y); + resizeHandleEdges[i].setAttribute('x2', x2); + resizeHandleEdges[i].setAttribute('y2', y2); + + connectors[i].setAttribute('cx', handles[i].cx); + connectors[i].setAttribute('cy', handles[i].cy); + + connectorSuggestions[i].setAttribute('cx', handles[i].closecx); + connectorSuggestions[i].setAttribute('cy', handles[i].closecy); + + resizeHandleCorners[i].setAttribute('cx', handles[i].x); + resizeHandleCorners[i].setAttribute('cy', handles[i].y); + } + + return; + } + + // Connector line special case + if (selElement.name == 'ConnectionLine') { + const pathpoints = corshape.getPathData(); + + for (let i = 0; i < pathpoints.length; i++) { + const conhandle = Util.makeSVGElement('circle'); + conhandle.dataset.pathIndex = i; + if (i == pathpoints.length - 1) { + conhandle.dataset.pathIsLast = true; + } + conhandle.setAttribute('class', 'line-modify-handle'); + conhandle.setAttribute('cx', pathpoints[i].values[0]); + conhandle.setAttribute('cy', pathpoints[i].values[1]); + conhandle.setAttribute('r', 5); + svgGroup.appendChild(conhandle); + } + + return; + } + // Resize borders around object, also put connector handles in the middle for (let i = 0; i < handles.length; i++) { const border = Util.makeSVGElement('line'); @@ -654,7 +681,7 @@ export default class ElementEditor { } const previousSuggestion = this.editor.svgElement.querySelectorAll( - '.connection-suggest:not(#' + target.id + ')'); + '.connection-suggest:not([id="' + target.id + '"])'); for (const suggestion of previousSuggestion) { suggestion.classList.remove('connection-suggest'); }