zijlijn concepten beter geplaatst

static/cmap/controller/cmap-interaction-controller.js

@@ -9,6 +9,7 @@ export class CmapInteractionController {
     this.activeMarqueeCleanup = null;
     this.canvasPanPointerDownHandler = null;
     this.activeCanvasPanCleanup = null;
+    this.boundaryRefreshScheduled = false;
   }
 
   get items() { return this.editor.items; }
@@ -24,9 +25,19 @@ export class CmapInteractionController {
       this.moveSubmapGroup(record, x, y, moveMembership);
       queueMicrotask(() => this.redrawAllConnectors());
     }
+    this.scheduleBoundaryRefresh();
     return { x, y };
   }
 
+  scheduleBoundaryRefresh() {
+    if (this.boundaryRefreshScheduled) return;
+    this.boundaryRefreshScheduled = true;
+    window.requestAnimationFrame(() => {
+      this.boundaryRefreshScheduled = false;
+      if (!this.editor.destroyed) this.editor.refreshBoundaryReferences();
+    });
+  }
+
   beginItemMove(record, includeDescendants = false) {
     if (record.moveMembership) return record.moveMembership;
     let groupItems = [record];

static/cmap/view/cmap-item-decorator.js

@@ -2,6 +2,8 @@
 
 import { debug, elementDescription, selectionStyle, escapeHtml } from "../cmap-utils.js";
 
+const BOUNDARY_LINE_COLOR = "#77838e";
+
 export class CmapItemDecorator {
   constructor(editor) {
     this.editor = editor;
@@ -457,7 +459,7 @@ export class CmapItemDecorator {
     marker.setAttribute("orient", "auto-start-reverse");
     const arrow = document.createElementNS("http://www.w3.org/2000/svg", "path");
     arrow.setAttribute("d", "M 0 0 L 10 5 L 0 10 z");
-    arrow.setAttribute("fill", "#4a5560");
+    arrow.setAttribute("fill", BOUNDARY_LINE_COLOR);
     marker.append(arrow);
     definitions.append(marker);
     svg.append(definitions);
@@ -484,9 +486,7 @@ export class CmapItemDecorator {
         (Number(crossing.insideConcept.node.attr("width")) / 2);
       const insideY = Number(crossing.insideConcept.node.attr("y")) +
         (Number(crossing.insideConcept.node.attr("height")) / 2);
-      const outsideX = Number(crossing.outsideConcept.node.attr("x")) +
-        (Number(crossing.outsideConcept.node.attr("width")) / 2);
-      const side = outsideX < insideX ? "left" : "right";
+      const side = insideX <= viewLeft + (viewWidth / 2) ? "left" : "right";
       const x = side === "left" ? viewLeft + 12 : viewLeft + viewWidth - buttonWidth - 12;
       const y = reserveY(side, insideY - 15);
       const button = document.createElement("button");
@@ -512,7 +512,7 @@ export class CmapItemDecorator {
       const endY = crossing.sourceInside ? boundaryY : insideY;
       path.setAttribute("d", `M ${startX} ${startY} L ${endX} ${endY}`);
       path.setAttribute("fill", "none");
-      path.setAttribute("stroke", crossing.connector.lineColor || "#4a5560");
+      path.setAttribute("stroke", BOUNDARY_LINE_COLOR);
       path.setAttribute("stroke-width", String(crossing.connector.lineWidth || 2));
       if (crossing.connector.hasArrow) path.setAttribute("marker-end", "url(#rw-cmap-boundary-arrow)");
       svg.append(path);