playground: some anchor hooks fix

src/react-component/Anchor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { CSSProperties, useEffect, useMemo, useRef } from "react";
 import { computed } from "@preact/signals-core";
 import { TAnchor } from "../components/canvas/anchors";
 import { Graph } from "../graph";
@@ -22,28 +22,12 @@ export function GraphBlockAnchor({
   className?: string;
   children?: React.ReactNode | ((anchorState: AnchorState) => React.ReactNode);
 }) {
-  const container = useRef<HTMLDivElement>(null);
 
   const anchorState = useBlockAnchorState(graph, anchor);
 
-  useBlockAnchorPosition(anchorState, (position) => {
-    if (position) {
-      setCssProps(container.current, {
-        "--graph-block-anchor-x": `${position.x}px`,
-        "--graph-block-anchor-y": `${position.y}px`,
-      });
-    } else {
-      removeCssProps(container.current, ["--graph-block-anchor-x", "--graph-block-anchor-y"]);
-    }
-  })
+  const coords = useBlockAnchorPosition(anchorState)
 
-  const selectedSignal = useMemo(() => {
-    return computed(() => {
-      return anchorState?.$selected.value;
-    });
-  }, [anchorState]);
-
-  const selected = useSignal(selectedSignal);
+  const selected = useSignal(anchorState?.$selected);
 
   const render = typeof children === "function" ? children : () => children;
   const classNames = useMemo(() => {
@@ -53,7 +37,13 @@ export function GraphBlockAnchor({
   }, [anchor, position, className, selected]);
 
   return (
-    <div ref={container} className={classNames}>
+    <div 
+      style={{
+        "--graph-block-anchor-x": `${coords.x}px`,
+        "--graph-block-anchor-y": `${coords.y}px`,
+      } as CSSProperties}
+      className={classNames}
+    >
       {render(anchorState)}
     </div>
   );

src/react-component/hooks/useBlockAnchorState.ts

@@ -4,7 +4,7 @@ import { useSignal } from "./useSignal";
 import { useBlockState } from "./useBlockState";
 import { AnchorState } from "../../store/anchor/Anchor";
 import { computed } from "@preact/signals-core";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import debounce from "lodash/debounce";
 
 export function useBlockAnchorState(graph: Graph, anchor: TAnchor): AnchorState | undefined {
@@ -15,18 +15,19 @@ export function useBlockAnchorState(graph: Graph, anchor: TAnchor): AnchorState
   return useSignal(signal);
 }
 
-export function useBlockAnchorPosition(state: AnchorState | undefined, onUpdate: (position: {x: number, y: number}) => void) {
-  const fnRef = useRef(onUpdate);
-  fnRef.current = onUpdate;
+export function useBlockAnchorPosition(state: AnchorState | undefined) {
+  const [pos, setPos] = useState<{ x: number, y: number }>(state.block ? state.block.getViewComponent().getAnchorPosition(state.state)  : {x: 0, y: 0});
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if(!state) {
       return;
     }
     return state.block.$geometry.subscribe(debounce(() => {
       const position = state.block.getViewComponent().getAnchorPosition(state.state);
-      fnRef.current(position);
+      setPos(position);
     }, 16))
-  }, [state.block])
+  }, [state.block]);
+
+  return pos;
 }