spytial-core 1.4.20 → 1.4.21

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

@@ -91364,6 +91364,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.
@@ -91689,6 +91699,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 +91735,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,16 +91756,24 @@ 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();
         }
         /**
@@ -91899,6 +91922,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 +92154,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;
@@ -93688,36 +93716,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 +94316,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
       #zoom-controls {
         display: flex;
         flex-direction: row;
-        gap: 4px;
+        gap: 8px;
         align-items: center;
       }