diff --git a/static/cmap/controller/cmap-interaction-controller.js b/static/cmap/controller/cmap-interaction-controller.js index 43e5edc..6759a51 100644 --- a/static/cmap/controller/cmap-interaction-controller.js +++ b/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]; diff --git a/static/cmap/view/cmap-item-decorator.js b/static/cmap/view/cmap-item-decorator.js index dba59e1..040434a 100644 --- a/static/cmap/view/cmap-item-decorator.js +++ b/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); diff --git a/static/index.html b/static/index.html index 8bfe559..97d8ccc 100644 --- a/static/index.html +++ b/static/index.html @@ -147,7 +147,7 @@