feat(components): Add custom events https://github.com/pocka/figspec/issues/5 Added `scalechange`, `positionchange` and `nodeselect` events.

Changes

2 changed files (+67/-0)

• 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) => {