spytial-core 1.4.20 → 1.4.22

package/dist/browser/spytial-core-complete.global.js

@@ -91338,9 +91338,6 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
     const bbox2 = hasgetBBox(element2) ? element2.getBBox() : { x: 0, y: 0, width: 0, height: 0 };
     return !(bbox2.x > bbox1.x + bbox1.width || bbox2.x + bbox2.width < bbox1.x || bbox2.y > bbox1.y + bbox1.height || bbox2.y + bbox2.height < bbox1.y);
   }
-  function hasInnerBounds(target) {
-    return target && typeof target === "object" && "innerBounds" in target;
-  }
   var d32, cola, DEFAULT_SCALE_FACTOR, _WebColaCnDGraph, WebColaCnDGraph;
   var init_webcola_cnd_graph = __esm({
     "src/translators/webcola/webcola-cnd-graph.ts"() {
@@ -91350,7 +91347,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
       cola = window.cola;
       DEFAULT_SCALE_FACTOR = 5;
       _WebColaCnDGraph = class _WebColaCnDGraph extends HTMLElement {
-        constructor() {
+        constructor(isInputAllowed = false) {
           super();
           // Reduced from 5 for performance, but kept at 1 for alignment
           /**
@@ -91364,6 +91361,16 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
             edgesBetweenNodes: /* @__PURE__ */ new Map(),
             alignmentEdges: /* @__PURE__ */ new Set()
           };
+          /**
+           * Tracks whether the user has manually interacted with zoom/pan.
+           * When true, we don't auto-fit the viewport to preserve user's view.
+           */
+          this.userHasManuallyZoomed = false;
+          /**
+           * Tracks whether this is the initial render (first layout).
+           * We always fit viewport on initial render.
+           */
+          this.isInitialRender = true;
           /**
            * Stores the starting coordinates when a node begins dragging so
            * drag end events can report both the previous and new positions.
@@ -91373,6 +91380,23 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
            * Input mode state management for edge creation and modification
            */
           this.isInputModeActive = false;
+          this.inputModeEnabled = true;
+          this.inputModeListenersAttached = false;
+          this.handleInputModeKeydown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && !this.isInputModeActive) {
+              this.activateInputMode();
+            }
+          };
+          this.handleInputModeKeyup = (event) => {
+            if (!event.metaKey && !event.ctrlKey && this.isInputModeActive) {
+              this.deactivateInputMode();
+            }
+          };
+          this.handleInputModeBlur = () => {
+            if (this.isInputModeActive) {
+              this.deactivateInputMode();
+            }
+          };
           this.edgeCreationState = {
             isCreating: false,
             sourceNode: null,
@@ -91395,6 +91419,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           this.initializeDOM();
           this.initializeD3();
           this.lineFunction = d32.line().x((d) => d.x).y((d) => d.y).curve(d32.curveBasis);
+          this.inputModeEnabled = isInputAllowed;
           this.initializeInputModeHandlers();
         }
         /**
@@ -91689,6 +91714,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
         <div id="zoom-controls">
           <button id="zoom-in" title="Zoom In" aria-label="Zoom in">+</button>
           <button id="zoom-out" title="Zoom Out" aria-label="Zoom out">\u2212</button>
+          <button id="zoom-fit" title="Fit to View" aria-label="Fit graph to view">\u2922</button>
         </div>
       </div>
       <div id="svg-container">
@@ -91724,7 +91750,11 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           this.svg = d32.select(this.shadowRoot.querySelector("#svg"));
           this.container = this.svg.select(".zoomable");
           if (d32.zoom) {
-            this.zoomBehavior = d32.zoom().scaleExtent([0.01, 20]).on("zoom", () => {
+            this.zoomBehavior = d32.zoom().scaleExtent([0.01, 20]).on("start", () => {
+              if (d32.event.sourceEvent) {
+                this.userHasManuallyZoomed = true;
+              }
+            }).on("zoom", () => {
               this.container.attr("transform", d32.event.transform);
               this.updateZoomControlStates();
               this.updateSmallNodeClasses();
@@ -91741,37 +91771,51 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
         initializeZoomControls() {
           const zoomInButton = this.shadowRoot.querySelector("#zoom-in");
           const zoomOutButton = this.shadowRoot.querySelector("#zoom-out");
+          const zoomFitButton = this.shadowRoot.querySelector("#zoom-fit");
           if (zoomInButton) {
             zoomInButton.addEventListener("click", () => {
+              this.userHasManuallyZoomed = true;
               this.zoomIn();
             });
           }
           if (zoomOutButton) {
             zoomOutButton.addEventListener("click", () => {
+              this.userHasManuallyZoomed = true;
               this.zoomOut();
             });
           }
+          if (zoomFitButton) {
+            zoomFitButton.addEventListener("click", () => {
+              this.resetViewToFitContent();
+            });
+          }
           this.updateZoomControlStates();
         }
         /**
          * Initialize keyboard event handlers for input mode activation
          */
         initializeInputModeHandlers() {
-          document.addEventListener("keydown", (event) => {
-            if ((event.metaKey || event.ctrlKey) && !this.isInputModeActive) {
-              this.activateInputMode();
-            }
-          });
-          document.addEventListener("keyup", (event) => {
-            if (!event.metaKey && !event.ctrlKey && this.isInputModeActive) {
-              this.deactivateInputMode();
-            }
-          });
-          window.addEventListener("blur", () => {
-            if (this.isInputModeActive) {
-              this.deactivateInputMode();
-            }
-          });
+          if (this.inputModeEnabled) {
+            this.attachInputModeListeners();
+          }
+        }
+        attachInputModeListeners() {
+          if (this.inputModeListenersAttached) {
+            return;
+          }
+          document.addEventListener("keydown", this.handleInputModeKeydown);
+          document.addEventListener("keyup", this.handleInputModeKeyup);
+          window.addEventListener("blur", this.handleInputModeBlur);
+          this.inputModeListenersAttached = true;
+        }
+        detachInputModeListeners() {
+          if (!this.inputModeListenersAttached) {
+            return;
+          }
+          document.removeEventListener("keydown", this.handleInputModeKeydown);
+          document.removeEventListener("keyup", this.handleInputModeKeyup);
+          window.removeEventListener("blur", this.handleInputModeBlur);
+          this.inputModeListenersAttached = false;
         }
         /**
          * Activate input mode for edge creation and modification
@@ -91899,6 +91943,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
          */
         setupNodeDragHandlers(nodeDrag) {
           nodeDrag.on("start.cnd", (d) => {
+            this.userHasManuallyZoomed = true;
             const start = { x: d.x, y: d.y };
             this.dragStartPositions.set(d.id, start);
             this.dispatchEvent(
@@ -92130,6 +92175,10 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           if (!isInstanceLayout(instanceLayout)) {
             throw new Error("Invalid instance layout provided. Expected an InstanceLayout instance.");
           }
+          if (!options?.priorPositions) {
+            this.isInitialRender = true;
+            this.userHasManuallyZoomed = false;
+          }
           if (this.svg && this.zoomBehavior && d32) {
             try {
               const identity = d32.zoomIdentity;
@@ -92968,35 +93017,17 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
                 const targetGroup = potentialGroups.find((group) => group.keyNode === this.getNodeIndex(source));
                 if (targetGroup) {
                   target = targetGroup;
-                  if (hasInnerBounds(target)) {
-                    target.innerBounds = targetGroup.bounds?.inflate(-1 * (targetGroup.padding || 10));
-                  }
-                } else {
-                  console.log("Target group not found", potentialGroups, this.getNodeIndex(target));
                 }
               } else if (addSourceToGroup) {
                 const potentialGroups = this.getContainingGroups(this.currentLayout?.groups || [], source);
                 const sourceGroup = potentialGroups.find((group) => group.keyNode === this.getNodeIndex(target));
                 if (sourceGroup) {
                   source = sourceGroup;
-                  if (hasInnerBounds(source)) {
-                    source.innerBounds = sourceGroup.bounds?.inflate(-1 * (sourceGroup.padding || 10));
-                  }
-                } else {
-                  console.log("Source group not found", potentialGroups, this.getNodeIndex(source));
                 }
-              } else {
-                console.log("This is a group edge (on tick), but neither source nor target is a group.", d);
               }
             }
-            if (typeof cola.makeEdgeBetween === "function" && hasInnerBounds(source) && hasInnerBounds(target) && source.innerBounds && target.innerBounds) {
-              const route = cola.makeEdgeBetween(source.innerBounds, target.innerBounds, 5);
-              return this.lineFunction([route.sourceIntersection, route.arrowStart]);
-            }
-            return this.lineFunction([
-              { x: source.x || 0, y: source.y || 0 },
-              { x: target.x || 0, y: target.y || 0 }
-            ]);
+            const route = this.getStableEdgePath(source, target);
+            return this.lineFunction(route);
           }).attr("marker-end", (d) => {
             if (this.isAlignmentEdge(d)) return "none";
             return "url(#end-arrow)";
@@ -93632,6 +93663,83 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           const closestY = Math.max(y, Math.min(point.y, Y));
           return { x: closestX, y: closestY };
         }
+        /**
+         * Calculates a stable anchor point on a rectangle's perimeter for edge drawing.
+         * This method produces consistent, jitter-free anchor points by using the
+         * center of the rectangle edge that faces the target point.
+         * 
+         * Unlike intersection-based approaches that can jump erratically as rectangles
+         * move, this method selects one of four edge centers (top, bottom, left, right)
+         * based on the dominant direction to the target, producing smooth transitions.
+         * 
+         * @param bounds - Rectangle bounds with x, y, X, Y properties (or cx(), cy(), width(), height() methods)
+         * @param targetPoint - The point the edge is connecting to
+         * @returns Stable anchor point on the rectangle's perimeter
+         */
+        getStableEdgeAnchor(bounds, targetPoint) {
+          if (!bounds) return targetPoint;
+          let cx, cy, halfWidth, halfHeight;
+          if (typeof bounds.cx === "function") {
+            cx = bounds.cx();
+            cy = bounds.cy();
+            halfWidth = bounds.width() / 2;
+            halfHeight = bounds.height() / 2;
+          } else if (bounds.x !== void 0 && bounds.X !== void 0) {
+            cx = (bounds.x + bounds.X) / 2;
+            cy = (bounds.y + bounds.Y) / 2;
+            halfWidth = (bounds.X - bounds.x) / 2;
+            halfHeight = (bounds.Y - bounds.y) / 2;
+          } else {
+            return targetPoint;
+          }
+          const dx = targetPoint.x - cx;
+          const dy = targetPoint.y - cy;
+          const normalizedDx = Math.abs(dx) / halfWidth;
+          const normalizedDy = Math.abs(dy) / halfHeight;
+          if (normalizedDx > normalizedDy) {
+            if (dx > 0) {
+              return { x: cx + halfWidth, y: cy };
+            } else {
+              return { x: cx - halfWidth, y: cy };
+            }
+          } else {
+            if (dy > 0) {
+              return { x: cx, y: cy + halfHeight };
+            } else {
+              return { x: cx, y: cy - halfHeight };
+            }
+          }
+        }
+        /**
+         * Calculates stable edge path points for drawing during tick/drag operations.
+         * This method avoids jitter by using stable anchor points instead of
+         * dynamic intersection calculations.
+         * 
+         * @param source - Source node or group with bounds
+         * @param target - Target node or group with bounds
+         * @returns Array of two points for a simple line path
+         */
+        getStableEdgePath(source, target) {
+          let targetCenter;
+          if (target.bounds && typeof target.bounds.cx === "function") {
+            targetCenter = { x: target.bounds.cx(), y: target.bounds.cy() };
+          } else if (target.bounds) {
+            targetCenter = { x: (target.bounds.x + target.bounds.X) / 2, y: (target.bounds.y + target.bounds.Y) / 2 };
+          } else {
+            targetCenter = { x: target.x || 0, y: target.y || 0 };
+          }
+          let sourceCenter;
+          if (source.bounds && typeof source.bounds.cx === "function") {
+            sourceCenter = { x: source.bounds.cx(), y: source.bounds.cy() };
+          } else if (source.bounds) {
+            sourceCenter = { x: (source.bounds.x + source.bounds.X) / 2, y: (source.bounds.y + source.bounds.Y) / 2 };
+          } else {
+            sourceCenter = { x: source.x || 0, y: source.y || 0 };
+          }
+          const sourceAnchor = source.bounds || source.innerBounds ? this.getStableEdgeAnchor(source.bounds || source.innerBounds, targetCenter) : sourceCenter;
+          const targetAnchor = target.bounds || target.innerBounds ? this.getStableEdgeAnchor(target.bounds || target.innerBounds, sourceCenter) : targetCenter;
+          return [sourceAnchor, targetAnchor];
+        }
         /**
          * Adjusts a point to lie on the perimeter of a rectangle.
          * 
@@ -93688,36 +93796,51 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
         minimizeOverlap(currentLabel, overlappingLabels) {
         }
         /**
-         * Fits the viewport to show all content with padding.
-         * Uses manual calculation of bounds from all nodes and edges to ensure complete coverage.
+         * Fits the viewport to show all content with appropriate zoom and pan.
+         * Uses D3 zoom transform for smooth, consistent behavior.
+         * Only performs fit if:
+         * - This is the initial render, OR
+         * - User has not manually zoomed/panned, OR
+         * - Force parameter is true (e.g., from reset button)
+         * 
+         * @param force - If true, fit regardless of user interaction state
+         */
+        fitViewportToContent(force = false) {
+          const svgElement = this.svg?.node();
+          if (!svgElement || !this.zoomBehavior) return;
+          if (this.userHasManuallyZoomed && !this.isInitialRender && !force) {
+            return;
+          }
+          const bounds = this.calculateContentBounds();
+          if (!bounds) return;
+          const containerWidth = svgElement.clientWidth || svgElement.parentElement?.clientWidth || 800;
+          const containerHeight = svgElement.clientHeight || svgElement.parentElement?.clientHeight || 600;
+          const padding = _WebColaCnDGraph.VIEWBOX_PADDING * 4;
+          const scaleX = (containerWidth - padding * 2) / bounds.width;
+          const scaleY = (containerHeight - padding * 2) / bounds.height;
+          const scale = Math.min(scaleX, scaleY, 1);
+          const [minScale, maxScale] = this.zoomBehavior.scaleExtent();
+          const clampedScale = Math.max(minScale, Math.min(maxScale, scale));
+          const contentCenterX = bounds.x + bounds.width / 2;
+          const contentCenterY = bounds.y + bounds.height / 2;
+          const translateX = containerWidth / 2 - contentCenterX * clampedScale;
+          const translateY = containerHeight / 2 - contentCenterY * clampedScale;
+          const transform = d32.zoomIdentity.translate(translateX, translateY).scale(clampedScale);
+          if (this.isInitialRender) {
+            this.svg.call(this.zoomBehavior.transform, transform);
+            this.isInitialRender = false;
+          } else {
+            this.svg.transition().duration(300).ease(d32.easeCubicOut).call(this.zoomBehavior.transform, transform);
+          }
+          this.updateZoomControlStates();
+        }
+        /**
+         * Resets the view to fit all content, clearing user zoom state.
+         * Called when user clicks the reset/fit button.
          */
-        fitViewportToContent() {
-          const svgElement = this.svg.node();
-          if (!svgElement) return;
-          const manualBounds = this.calculateContentBounds();
-          const bbox = manualBounds || svgElement.getBBox();
-          const padding = _WebColaCnDGraph.VIEWBOX_PADDING;
-          let extraBottomPadding = 50;
-          if (this.currentLayout?.nodes) {
-            const bottomNode = this.currentLayout.nodes.reduce((bottom, node) => {
-              if (typeof node.x === "number" && typeof node.y === "number") {
-                const nodeBottom = node.y + (node.height || 0);
-                const currentBottom = bottom ? bottom.y + (bottom.height || 0) : -Infinity;
-                return nodeBottom > currentBottom ? node : bottom;
-              }
-              return bottom;
-            }, null);
-            if (bottomNode && bottomNode.height) {
-              extraBottomPadding = Math.min(50, bottomNode.height / 1.5);
-            }
-          }
-          const viewBox = [
-            bbox.x - padding,
-            bbox.y - padding,
-            bbox.width + 2 * padding,
-            bbox.height + 2 * padding + extraBottomPadding
-          ].join(" ");
-          this.svg.attr("viewBox", viewBox);
+        resetViewToFitContent() {
+          this.userHasManuallyZoomed = false;
+          this.fitViewportToContent(true);
         }
         /**
          * Manually calculates the bounding box of all content to ensure accurate viewport fitting.
@@ -94273,7 +94396,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
       #zoom-controls {
         display: flex;
         flex-direction: row;
-        gap: 4px;
+        gap: 8px;
         align-items: center;
       }
 
@@ -94677,6 +94800,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
          * - Temporary UI elements (modals, overlays)
          */
         dispose() {
+          this.detachInputModeListeners();
           this.deactivateInputMode();
           if (this.svg) {
             this.svg.on(".zoom", null);
@@ -95491,7 +95615,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
       init_layoutspec();
       exports.StructuredInputGraph = class extends WebColaCnDGraph {
         constructor(dataInstance) {
-          super();
+          super(true);
           this.evaluator = null;
           this.layoutInstance = null;
           this.cndSpecString = "";