fixed dragging lines with arrows to display arrowhead

2 files changed, 18 insertions, 2 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 421e4c6bb..6fde4b06e 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -365,6 +365,22 @@ export namespace DragManager {
         const dragElements = eles.map(ele => {
             if (!ele.parentNode) dragDiv.appendChild(ele);
             const dragElement = ele.parentNode === dragDiv ? ele : ele.cloneNode(true) as HTMLElement;
+            let children = Array.from(dragElement.children);
+            while (children.length) { // need to replace all the maker node reference ids with new unique ids. otherwise, the clone nodes will reference the original nodes which are all hidden during the drag
+                const next = children.pop();
+                next && children.push(...Array.from(next.children));
+                if (next) {
+                    if (next.localName.startsWith("path") && (next.attributes as any)["marker-start"]) {
+                        next.setAttribute("marker-start", (next.attributes as any)["marker-start"].value.replace("#", "#X"));
+                    }
+                    if (next.localName.startsWith("path") && (next.attributes as any)["marker-end"]) {
+                        next.setAttribute("marker-end", (next.attributes as any)["marker-end"].value.replace("#", "#X"));
+                    }
+                    if (next.localName.startsWith("marker")) {
+                        next.id = "X" + next.id;
+                    }
+                }
+            }
             const rect = ele.getBoundingClientRect();
             const scaleX = rect.width / ele.offsetWidth;
             const scaleY = ele.offsetHeight ? rect.height / ele.offsetHeight : scaleX;
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 48fb968cf..a32a8eecc 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -113,11 +113,11 @@ export namespace InteractionUtils {
                     <marker id={`dot${defGuid}`} orient="auto" markerUnits="userSpaceOnUse" refX={0} refY="0" overflow="visible">
                         <circle r={strokeWidth * 1.5} fill="context-stroke" />
                     </marker>}
-                {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) :
+                {arrowStart !== "arrow" ? (null) :
                     <marker id={`arrowStart${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={makerStrokeWidth * 1.5} refY={0} markerWidth="10" markerHeight="7">
                         <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={makerStrokeWidth * 2 / 3} points={`${3 * makerStrokeWidth} ${-makerStrokeWidth * 1.5}, ${makerStrokeWidth * 2} 0, ${3 * makerStrokeWidth} ${makerStrokeWidth * 1.5}, 0 0`} />
                     </marker>}
-                {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) :
+                {arrowEnd !== "arrow" ? (null) :
                     <marker id={`arrowEnd${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={makerStrokeWidth * 1.5} refY={0} markerWidth="10" markerHeight="7">
                         <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={makerStrokeWidth * 2 / 3} points={`0 ${-makerStrokeWidth * 1.5}, ${makerStrokeWidth} 0, 0 ${makerStrokeWidth * 1.5}, ${3 * makerStrokeWidth} 0`} />
                     </marker>}