spytial-core 1.4.21 → 1.4.23

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
           /**
@@ -91383,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,
@@ -91405,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();
         }
         /**
@@ -91507,6 +91522,21 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
             }
           });
         }
+        /**
+         * Gets the current zoom scale factor
+         * @returns Current zoom scale (k value from transform)
+         */
+        getCurrentZoomScale() {
+          if (this.svg && this.svg.node()) {
+            try {
+              const transform = d32.zoomTransform(this.svg.node());
+              return transform.k;
+            } catch (e) {
+              return 1;
+            }
+          }
+          return 1;
+        }
         isErrorGroup(group) {
           const overlappingGroups = this.currentLayout.overlappingGroups;
           if (!overlappingGroups) {
@@ -91780,21 +91810,27 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
          * 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
@@ -92984,7 +93020,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
               return `${lineHeight}px`;
             });
           }).raise();
-          this.svgLinkGroups.select(".link").attr("d", (d) => {
+          this.svgLinkGroups.select("path").attr("d", (d) => {
             let source = d.source;
             let target = d.target;
             if (d.id?.startsWith("_g_")) {
@@ -92996,35 +93032,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)";
@@ -93038,6 +93056,11 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           }).attr("y", (d) => {
             const pathElement = this.shadowRoot?.querySelector(`path[data-link-id="${d.id}"]`);
             return pathElement ? this.calculateNewPosition(pathElement, "y") : (d.source.y + d.target.y) / 2;
+          }).style("font-size", () => {
+            const zoomScale = this.getCurrentZoomScale();
+            const baseFontSize = 12;
+            const adjustedSize = zoomScale < 1 ? baseFontSize / Math.sqrt(zoomScale) : baseFontSize;
+            return `${Math.min(adjustedSize, 16)}px`;
           }).raise();
           this.updateEdgeEndpointMarkers();
           this.svgGroupLabels.attr("x", (d) => {
@@ -93660,6 +93683,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.
          * 
@@ -94215,12 +94315,14 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
         text-anchor: middle;
         dominant-baseline: middle;
         font-size: 12px;
-        fill: #161616ff;
+        font-weight: 500;
+        fill: #1a1a1a;
         pointer-events: none;
-        font-family: system-ui;
-        stroke: white; /* Add white shadow */
-        stroke-width: 0.2px; /* Reduced thickness of the shadow */
-        stroke-opacity: 0.7; /* Added opacity to make the shadow less intense */
+        font-family: system-ui, -apple-system, sans-serif;
+        stroke: white;
+        stroke-width: 3px;
+        stroke-linejoin: round;
+        paint-order: stroke fill;
       }
       
       .mostSpecificTypeLabel {
@@ -94720,6 +94822,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);
@@ -95534,7 +95637,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 = "";