feat(react): Add event bindings

Changes

3 changed files (+55/-2)

• packages/react/README.md
  • @@ -24,5 +24,14 @@
    ```jsx import { FigspecViewer } from "@figspec/react"; - <FigspecViewer nodes={nodes} renderedImage={renderedImage} zoomMargin={200} />; + const logSelectedNode = (ev) => { + console.log(ev.detail.selectedNode); + }; + + <FigspecViewer + nodes={nodes} + renderedImage={renderedImage} + zoomMargin={200} + onNodeSelect={logSelectedNode} + />; ```
• packages/react/src/index.stories.jsx
  • @@ -1,3 +1,5 @@
    + import { action } from "@storybook/addon-actions"; + import { FigspecViewer } from "."; import demoJson from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json";
  • @@ -15,6 +17,9 @@ style={{
    width: 500, height: 500, }} + onNodeSelect={action("onNodeSelect")} + onPositionChange={action("onPositionChange")} + onScaleChange={action("onScaleChange")} /> );
• packages/react/src/index.tsx
  • @@ -25,10 +25,28 @@ | "panSpeed"
    | "zoomMargin" >; - export interface FigspecViewerProps extends ElementProps {} + export interface FigspecViewerProps extends ElementProps { + onScaleChange?(ev: CustomEvent<{ scale: number }>): void; + onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; + onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; + } type Ref = FigspecViewerElement | null | undefined; + const bindEvent = ( + element: HTMLElement, + event: string, + cb: (ev: CustomEvent) => void + ) => { + const listener = ((ev: CustomEvent) => { + cb(ev); + }) as EventListener; + + element.addEventListener(event, listener); + + return () => element.removeEventListener(event, listener); + }; + export const FigspecViewer = forwardRef< FigspecViewerElement, FigspecViewerProps
  • @@ -41,6 +59,9 @@ className,
    panSpeed, zoomMargin, zoomSpeed, + onNodeSelect, + onPositionChange, + onScaleChange, ...rest }, ref
  • @@ -64,6 +85,24 @@
    refNode.nodes = nodes; refNode.renderedImage = renderedImage; }, [refNode, nodes, renderedImage]); + + useEffect(() => { + if (!refNode || !onNodeSelect) return; + + return bindEvent(refNode, "nodeselect", onNodeSelect); + }, [refNode, onNodeSelect]); + + useEffect(() => { + if (!refNode || !onPositionChange) return; + + return bindEvent(refNode, "positionchange", onPositionChange); + }, [refNode, onPositionChange]); + + useEffect(() => { + if (!refNode || !onScaleChange) return; + + return bindEvent(refNode, "scalechange", onScaleChange); + }, [refNode, onScaleChange]); return ( <figspec-viewer