fix: fix creating connections via ConnectionLayer (#218)

fix(ConnectionLayer): fix creating connection after preventDefault() 
fix(CursorLayer): Add debounce to set cursor
fix(Anchor): fix calculation hitbox of achor on hover

Author: draedful

src/components/canvas/anchors/index.ts

@@ -4,7 +4,6 @@ import { AnchorState, EAnchorType } from "../../../store/anchor/Anchor";
 import { TBlockId } from "../../../store/block/Block";
 import { selectBlockAnchor } from "../../../store/block/selectors";
 import { PortState } from "../../../store/connection/port/Port";
-import { TPoint } from "../../../utils/types/shapes";
 import { GraphComponent, TGraphComponentProps } from "../GraphComponent";
 import { GraphLayer } from "../layers/graphLayer/GraphLayer";
 
@@ -33,14 +32,17 @@ type TAnchorState = {
 export class Anchor<T extends TAnchorProps = TAnchorProps> extends GraphComponent<T, TAnchorState> {
   public readonly cursor = "pointer";
 
+  public static CANVAS_HOVER_FACTOR = 1.8;
+  public static DETAILED_HOVER_FACTOR = 1.2;
+
   public get zIndex() {
     // @ts-ignore this.__comp.parent instanceOf Block
     return this.__comp.parent.zIndex + 1;
   }
 
   public connectedState: AnchorState;
 
-  private shift: number;
+  private shift = 0;
 
   constructor(props: T, parent: GraphLayer) {
     super(props, parent);
@@ -55,7 +57,29 @@ export class Anchor<T extends TAnchorProps = TAnchorProps> extends GraphComponen
     this.addEventListener("mouseleave", this);
 
     this.computeRenderSize(this.props.size, this.state.raised);
-    this.shift = this.props.size / 2 + props.lineWidth;
+  }
+
+  public getHoverFactor() {
+    if (this.context.camera.getCameraBlockScaleLevel() === ECameraScaleLevel.Detailed) {
+      return Anchor.DETAILED_HOVER_FACTOR;
+    }
+    return Anchor.CANVAS_HOVER_FACTOR;
+  }
+
+  protected stateChanged(_nextState: TAnchorState): void {
+    if (this.state.size !== _nextState.size) {
+      this.computeShift(_nextState, this.props);
+      this.onPositionChanged();
+    }
+    super.stateChanged(_nextState);
+  }
+
+  protected propsChanged(_nextProps: T): void {
+    if (this.props.lineWidth !== _nextProps.lineWidth) {
+      this.computeShift(this.state, _nextProps);
+      this.onPositionChanged();
+    }
+    super.propsChanged(_nextProps);
   }
 
   protected willMount(): void {
@@ -64,10 +88,18 @@ export class Anchor<T extends TAnchorProps = TAnchorProps> extends GraphComponen
       this.setState({ selected });
     });
     this.subscribeSignal(this.props.port.$point, this.onPositionChanged);
+    this.computeShift(this.state, this.props);
+    this.onPositionChanged();
+    super.willMount();
   }
 
-  protected onPositionChanged = (point: TPoint) => {
-    this.setHitBox(point.x - this.shift, point.y - this.shift, point.x + this.shift, point.y + this.shift);
+  protected computeShift(state = this.state, props = this.props) {
+    this.shift = state.size / 2 + props.lineWidth;
+  }
+
+  protected onPositionChanged = () => {
+    const { x, y } = this.getPosition();
+    this.setHitBox(x - this.shift, y - this.shift, x + this.shift, y + this.shift);
   };
 
   public getPosition() {
@@ -139,7 +171,7 @@ export class Anchor<T extends TAnchorProps = TAnchorProps> extends GraphComponen
 
   private computeRenderSize(size: number, raised: boolean) {
     if (raised) {
-      this.setState({ size: size * 1.8 });
+      this.setState({ size: size * this.getHoverFactor() });
     } else {
       this.setState({ size });
     }

src/components/canvas/connections/BaseConnection.ts

@@ -1,7 +1,8 @@
-import { Component } from "../../../lib";
+import { Component, ESchedulerPriority } from "../../../lib";
 import { TComponentState } from "../../../lib/Component";
 import { ConnectionState, TConnection, TConnectionId } from "../../../store/connection/ConnectionState";
 import { selectConnectionById } from "../../../store/connection/selectors";
+import { debounce } from "../../../utils/functions";
 import { TPoint } from "../../../utils/types/shapes";
 import { GraphComponent, GraphComponentContext } from "../GraphComponent";
 import { TAnchor } from "../anchors";
@@ -168,14 +169,32 @@ export class BaseConnection<
 
     switch (event.type) {
       case "mouseenter":
-        this.setState({ hovered: true });
+        this.debounceHover(true);
         break;
       case "mouseleave":
-        this.setState({ hovered: false });
+        this.debounceHover(false);
         break;
     }
   }
 
+  protected onHoverChange(hoverState: boolean) {
+    if (hoverState === this.state.hovered) {
+      return;
+    }
+    this.setState({ hovered: hoverState });
+  }
+
+  protected debounceHover = debounce(
+    (hovered: boolean) => {
+      this.onHoverChange(hovered);
+    },
+    {
+      priority: ESchedulerPriority.LOWEST,
+      frameInterval: 3,
+      frameTimeout: 0,
+    }
+  );
+
   protected override unmount(): void {
     this.connectedState.$sourcePortState.value.removeObserver(this);
     this.connectedState.$targetPortState.value.removeObserver(this);

src/components/canvas/layers/connectionLayer/ConnectionLayer.ts

@@ -295,6 +295,13 @@ export class ConnectionLayer extends Layer<
     if (!sourceComponent) {
       return;
     }
+    this.sourceComponent = sourceComponent.connectedState;
+    if (sourceComponent instanceof Block) {
+      this.startState = new Point(worldCoords.x, worldCoords.y);
+    } else if (sourceComponent instanceof Anchor) {
+      const point = sourceComponent.getPosition();
+      this.startState = new Point(point.x, point.y);
+    }
 
     this.context.graph.executеDefaultEventAction(
       "connection-create-start",
@@ -306,17 +313,11 @@ export class ConnectionLayer extends Layer<
         anchorId: sourceComponent instanceof Anchor ? sourceComponent.connectedState.id : undefined,
       },
       () => {
-        this.sourceComponent = sourceComponent.connectedState;
         if (sourceComponent instanceof Block) {
           this.context.graph.api.selectBlocks([this.sourceComponent.id], true, ESelectionStrategy.REPLACE);
-          this.startState = new Point(worldCoords.x, worldCoords.y);
         } else if (sourceComponent instanceof Anchor) {
-          const point = sourceComponent.getPosition();
-          this.startState = new Point(point.x, point.y);
           this.context.graph.api.setAnchorSelection(sourceComponent.props.blockId, sourceComponent.props.id, true);
         }
-
-        // Use world coordinates from point instead of screen coordinates
       }
     );
 

src/components/canvas/layers/cursorLayer/CursorLayer.ts

@@ -1,5 +1,7 @@
 import { Graph } from "../../../../graph";
+import { ESchedulerPriority } from "../../../../lib";
 import { Layer, LayerContext, LayerProps } from "../../../../services/Layer";
+import { debounce } from "../../../../utils/functions";
 import { EventedComponent } from "../../EventedComponent/EventedComponent";
 import { GraphComponent } from "../../GraphComponent";
 
@@ -110,6 +112,9 @@ export class CursorLayer extends Layer<TCursorLayerProps, TCursorLayerContext> {
   /** Component currently under the mouse cursor */
   private currentTarget?: GraphComponent;
 
+  /** Debounced cursor update function to prevent flickering on large scales */
+  private debouncedUpdateCursor: ReturnType<typeof debounce<(target?: EventedComponent) => void>>;
+
   /**
    * Creates a new CursorLayer instance.
    *
@@ -120,6 +125,17 @@ export class CursorLayer extends Layer<TCursorLayerProps, TCursorLayerContext> {
       // No HTML element needed - we'll apply cursor to the root element
       ...props,
     });
+
+    // Create debounced version with 10 frames delay to prevent cursor flickering
+    this.debouncedUpdateCursor = debounce(
+      (target?: EventedComponent) => {
+        this.updateCursorForTarget(target);
+      },
+      {
+        frameInterval: 3,
+        priority: ESchedulerPriority.LOW,
+      }
+    );
   }
 
   /**
@@ -152,11 +168,15 @@ export class CursorLayer extends Layer<TCursorLayerProps, TCursorLayerContext> {
 
       // Apply cursor only in automatic mode
       if (this.mode === "auto") {
-        this.updateCursorForTarget(target);
+        // Use debounced version to prevent cursor flickering on large scales
+        this.debouncedUpdateCursor(target);
       }
     });
 
     this.onGraphEvent("mouseleave", () => {
+      // Cancel any scheduled cursor updates from mouseenter
+      this.debouncedUpdateCursor.cancel();
+
       // Always track that mouse left the element
       this.currentTarget = undefined;
 
@@ -195,6 +215,9 @@ export class CursorLayer extends Layer<TCursorLayerProps, TCursorLayerContext> {
   }
 
   protected unmountLayer(): void {
+    // Cancel any pending cursor updates
+    this.debouncedUpdateCursor.cancel();
+
     super.unmountLayer();
     const rootElement = this.props.graph.layers.$root;
     if (rootElement) {

src/react-components/Anchor.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 
 import { TAnchor } from "../components/canvas/anchors";
 import { Graph } from "../graph";
@@ -36,6 +36,15 @@ export function GraphBlockAnchor({
     } ${selected ? "graph-block-anchor-selected" : ""}`;
   }, [anchor, position, className, selected]);
 
+  useEffect(() => {
+    if (anchorContainerRef.current) {
+      const hoverScale = anchorState.getViewComponent().getHoverFactor();
+      if (hoverScale !== undefined) {
+        anchorContainerRef.current.style.setProperty("--graph-block-anchor-hover-scale", hoverScale.toString());
+      }
+    }
+  }, [anchorState?.$selected.value]);
+
   if (!anchorState) return null;
 
   return (