diff --git a/src/components/canvas/anchors/index.ts b/src/components/canvas/anchors/index.ts index ee7100dd..d7b1bb27 100644 --- a/src/components/canvas/anchors/index.ts +++ b/src/components/canvas/anchors/index.ts @@ -171,6 +171,7 @@ export class Anchor extends GraphComponen protected unmount() { this.props.port.removeOwner(); + this.connectedState.unsetViewComponent(); super.unmount(); } diff --git a/src/react-components/hooks/useBlockAnchorState.ts b/src/react-components/hooks/useBlockAnchorState.ts index e8646121..0fa135fa 100644 --- a/src/react-components/hooks/useBlockAnchorState.ts +++ b/src/react-components/hooks/useBlockAnchorState.ts @@ -24,7 +24,20 @@ export function useBlockAnchorPosition( return; } - const position = state.getViewComponent()?.getPosition(); + if (!state.$viewComponentReady.value) { + return; + } + + const viewComponent = state.getViewComponent(); + if (!viewComponent) { + return; + } + + const position = viewComponent.getPosition(); + if (!position) { + return; + } + const blockGeometry = state.block.$geometry.value; anchorContainerRef.current.style.setProperty("--graph-block-anchor-x", `${position.x - blockGeometry.x}px`); anchorContainerRef.current.style.setProperty("--graph-block-anchor-y", `${position.y - blockGeometry.y}px`); diff --git a/src/store/anchor/Anchor.ts b/src/store/anchor/Anchor.ts index 3f0d8640..c41e87b6 100644 --- a/src/store/anchor/Anchor.ts +++ b/src/store/anchor/Anchor.ts @@ -13,6 +13,8 @@ export class AnchorState { public $selected = computed(() => this.block.store.anchorSelectionBucket.isSelected(this.id)); + public $viewComponentReady = signal(false); + private anchorView: Anchor; public get id() { @@ -43,6 +45,12 @@ export class AnchorState { public setViewComponent(anchorComponent: Anchor) { this.anchorView = anchorComponent; + this.$viewComponentReady.value = true; + } + + public unsetViewComponent() { + this.anchorView = undefined; + this.$viewComponentReady.value = false; } public getViewComponent() {