From 6b4f580dc1dce46dbebc7bb8eb114adcafec9db5 Mon Sep 17 00:00:00 2001 From: draedful Date: Mon, 2 Feb 2026 18:23:08 +0300 Subject: [PATCH 1/2] fix: prevent preventing default behaviour on click on blur. --- .../layers/connectionLayer/ConnectionLayer.ts | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/components/canvas/layers/connectionLayer/ConnectionLayer.ts b/src/components/canvas/layers/connectionLayer/ConnectionLayer.ts index 8c60514..318d604 100644 --- a/src/components/canvas/layers/connectionLayer/ConnectionLayer.ts +++ b/src/components/canvas/layers/connectionLayer/ConnectionLayer.ts @@ -1,4 +1,4 @@ -import { GraphMouseEvent, extractNativeGraphMouseEvent } from "../../../../graphEvents"; +import { GraphMouseEvent, extractNativeGraphMouseEvent, isGraphEvent } from "../../../../graphEvents"; import { Layer, LayerContext, LayerProps } from "../../../../services/Layer"; import { ESelectionStrategy } from "../../../../services/selection/types"; import { AnchorState } from "../../../../store/anchor/Anchor"; @@ -9,6 +9,7 @@ import { renderSVG } from "../../../../utils/renderers/svgPath"; import { Point, TPoint } from "../../../../utils/types/shapes"; import { Anchor } from "../../../canvas/anchors"; import { Block } from "../../../canvas/blocks/Block"; +import { GraphComponent } from "../../GraphComponent"; type TIcon = { path: string; @@ -157,9 +158,7 @@ export class ConnectionLayer extends Layer< */ protected afterInit(): void { // Register event listeners with the graphOn wrapper method for automatic cleanup when unmounted - this.onGraphEvent("mousedown", this.handleMouseDown, { - capture: true, - }); + this.onGraphEvent("mousedown", this.handleMouseDown); // Call parent afterInit to ensure proper initialization super.afterInit(); @@ -173,6 +172,19 @@ export class ConnectionLayer extends Layer< this.enabled = false; }; + protected checkIsShouldStartCreationConnection(target: GraphComponent, initEvent: MouseEvent) { + if (!this.enabled) { + return false; + } + if (this.context.graph.rootStore.settings.getConfigFlag("useBlocksAnchors")) { + return target instanceof Anchor; + } + if (isShiftKeyEvent(initEvent) && isBlock(target)) { + return true; + } + return false; + } + protected handleMouseDown = (nativeEvent: GraphMouseEvent) => { const target = nativeEvent.detail.target; const initEvent = extractNativeGraphMouseEvent(nativeEvent); @@ -181,9 +193,8 @@ export class ConnectionLayer extends Layer< } if ( - this.enabled && - ((this.context.graph.rootStore.settings.getConfigFlag("useBlocksAnchors") && target instanceof Anchor) || - (isShiftKeyEvent(initEvent) && isBlock(target))) + this.checkIsShouldStartCreationConnection(target as GraphComponent, initEvent) && + (isBlock(target) || target instanceof Anchor) ) { // Get the source component state const sourceComponent = target.connectedState; @@ -193,8 +204,9 @@ export class ConnectionLayer extends Layer< return; } - nativeEvent.preventDefault(); - nativeEvent.stopPropagation(); + if (isGraphEvent(nativeEvent)) { + nativeEvent.stopGraphEventPropagation(); + } this.context.graph.dragService.startDrag( { onStart: (_event, coords) => this.onStartConnection(target, new Point(coords[0], coords[1])), From 3e4acaaa01534a7b2d9efedf1dacf4cfa907b548 Mon Sep 17 00:00:00 2001 From: draedful Date: Tue, 3 Feb 2026 12:53:03 +0300 Subject: [PATCH 2/2] fix: the same fix for NewBlockLayer and SelectionLayer --- .../canvas/layers/newBlockLayer/NewBlockLayer.ts | 9 ++++++--- .../canvas/layers/selectionLayer/SelectionLayer.ts | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/canvas/layers/newBlockLayer/NewBlockLayer.ts b/src/components/canvas/layers/newBlockLayer/NewBlockLayer.ts index 8baed17..5ba4142 100644 --- a/src/components/canvas/layers/newBlockLayer/NewBlockLayer.ts +++ b/src/components/canvas/layers/newBlockLayer/NewBlockLayer.ts @@ -1,4 +1,4 @@ -import { GraphMouseEvent, extractNativeGraphMouseEvent } from "../../../../graphEvents"; +import { GraphMouseEvent, extractNativeGraphMouseEvent, isGraphEvent } from "../../../../graphEvents"; import { Layer, LayerContext, LayerProps } from "../../../../services/Layer"; import { ESelectionStrategy } from "../../../../services/selection/types"; import { BlockState } from "../../../../store/block/Block"; @@ -106,8 +106,11 @@ export class NewBlockLayer extends Layer< return; } - nativeEvent.preventDefault(); - nativeEvent.stopPropagation(); + // nativeEvent.preventDefault(); + // nativeEvent.stopPropagation(); + if (isGraphEvent(nativeEvent)) { + nativeEvent.stopGraphEventPropagation(); + } // Capture target in closure for onStart callback const blockTarget = target; this.context.graph.dragService.startDrag( diff --git a/src/components/canvas/layers/selectionLayer/SelectionLayer.ts b/src/components/canvas/layers/selectionLayer/SelectionLayer.ts index 933aea5..1bf2449 100644 --- a/src/components/canvas/layers/selectionLayer/SelectionLayer.ts +++ b/src/components/canvas/layers/selectionLayer/SelectionLayer.ts @@ -1,4 +1,4 @@ -import { GraphMouseEvent, extractNativeGraphMouseEvent } from "../../../../graphEvents"; +import { GraphMouseEvent, extractNativeGraphMouseEvent, isGraphEvent } from "../../../../graphEvents"; import { Layer, LayerContext, LayerProps } from "../../../../services/Layer"; import { Camera } from "../../../../services/camera/Camera"; import { ESelectionStrategy } from "../../../../services/selection"; @@ -99,8 +99,11 @@ export class SelectionLayer extends Layer< } if (event && isMetaKeyEvent(event)) { - nativeEvent.preventDefault(); - nativeEvent.stopPropagation(); + // nativeEvent.preventDefault(); + // nativeEvent.stopPropagation(); + if (isGraphEvent(nativeEvent)) { + nativeEvent.stopGraphEventPropagation(); + } this.context.graph.dragService.startDrag({ onStart: this.startSelectionRender, onUpdate: this.updateSelectionRender,