Merge pull request #15 from pocka/feature/events Custom Events

Changes

5 changed files (+122/-2)

• packages/components/src/FigspecViewer/index.stories.js
  • @@ -1,3 +1,5 @@
    + import { action } from "@storybook/addon-actions"; + import { html } from "lit-html"; import demoJson from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json";
  • @@ -51,3 +53,25 @@
    export const WithoutRequiredValues = Template.bind({}); WithoutRequiredValues.args = {}; + + export const Events = (args) => html` + <figspec-viewer + style=" + min-width: 100%; + min-height: 100vh; + font-family: sans-serif; + " + .nodes=${args.nodes} + rendered-image=${args.renderedImage || ""} + .panSpeed=${args.panSpeed || 500} + .zoomSpeed=${args.zoomSpeed || 500} + zoom-margin=${args.zoomMargin || 50} + @scalechange=${action("scalechange")} + @positionchange=${action("positionchange")} + @nodeselect=${action("nodeselect")} + ></figspec-viewer> + `; + Events.args = { + nodes: demoJson, + renderedImage: demoImage, + };
• packages/components/src/FigspecViewer/index.ts
  • @@ -478,6 +478,49 @@ // Since above properties aren't "attribute", their changes does not
    // trigger an update. We need to manually request an update. this.requestUpdate(); } + + // Dispatch "scalechange" event. + if (changedProperties.has("scale")) { + /** + * When a user zoom-in or zoom-out the preview. + */ + this.dispatchEvent( + new CustomEvent<{ scale: number }>("scalechange", { + detail: { + scale: this.scale, + }, + }) + ); + } + + // Dispatch "positionchange" event. + if (changedProperties.has("panX") || changedProperties.has("panY")) { + /** + * When a user panned the preview. + */ + this.dispatchEvent( + new CustomEvent<{ x: number; y: number }>("positionchange", { + detail: { + x: this.panX, + y: this.panY, + }, + }) + ); + } + + // Dispatch "nodeselect" event. + if (changedProperties.has("selectedNode")) { + /** + * When a user selected / unselected a node. + */ + this.dispatchEvent( + new CustomEvent<{ selectedNode: Figma.Node | null }>("nodeselect", { + detail: { + selectedNode: this.selectedNode, + }, + }) + ); + } } #handleNodeClick = (node: SizedNode) => (ev: MouseEvent) => {
• 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