68ca1f28 - figspec-react

Merge pull request #16 from pocka/feature/figma-file Figma file support

Changes

28 changed files (+3660/-778)

packages/components/.storybook/preview.js
- @@ -2,11 +2,12 @@ import { setCustomElements } from "@storybook/web-components";
  import "../src"; - import FigspecViewer from "../src/FigspecViewer?spec"; + import FigspecFileViewer from "../src/FigspecViewer/FigspecFileViewer?spec"; + import FigspecFrameViewer from "../src/FigspecViewer/FigspecFrameViewer?spec"; // A list of components to parse using web-component-analyzer. // Only components here appear at Docs table. - const components = [FigspecViewer]; + const components = [FigspecFileViewer, FigspecFrameViewer]; const spec = components.reduce( (a, b) => ({ ...a, ...b, tags: [...a.tags, ...b.tags] }),
packages/components/README.md
- @@ -26,7 +26,18 @@ ```
```html <body> - <figspec-viewer nodes="..." rendered-image="..." /> + <figspec-frame-viewer nodes="..." rendered-image="..."></figspec-frame-viewer> + </body> + ``` + + To display an entire Figma File, use `<figspec-file-viewer>` instead. + + ```html + <body> + <figspec-file-viewer + document-node="..." + rendered-images="..." + ></figspec-file-viewer> </body> ```
packages/components/src/FigspecViewer/ErrorMessage.ts (new)
- @@ -0,0 +1,43 @@
  + import { css, html, TemplateResult } from "lit-element"; + + export interface ErrorMessageProps { + title: string; + + children?: string | TemplateResult; + } + + export const ErrorMessage = ({ title, children }: ErrorMessageProps) => html` + <p class="error"> + <span class="error-title">${title}</span> + <span class="error-description">${children}</span> + </p> + `; + + export const styles = css` + .error { + position: absolute; + top: 50%; + left: 50%; + max-width: 80%; + padding: 0.75em 1em; + + background-color: var(--error-bg); + border-radius: 4px; + color: var(--error-fg); + + transform: translate(-50%, -50%); + } + + .error-title { + display: block; + font-size: 0.8em; + + font-weight: bold; + text-transform: capitalize; + } + + .error-description { + display: block; + margin-block-start: 0.5em; + } + `;
packages/components/src/FigspecViewer/FigspecFileViewer.stories.js (new)
- @@ -0,0 +1,51 @@
  + import { action } from "@storybook/addon-actions"; + + import { html } from "lit-html"; + + import demoJson from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/file.json"; + import image2_5 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:5.svg"; + import image2_9 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:9.svg"; + import image2_13 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:13.svg"; + import image64_1 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg"; + import image93_14 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/93:14.svg"; + import image93_32 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/93:32.svg"; + + export default { + title: "Components/figspec-file-viewer", + component: "figspec-file-viewer", + parameters: { + layout: "fullscreen", + docs: { + inlineStories: false, + iframeHeight: 600, + }, + }, + }; + + const Template = (args) => html` + <figspec-file-viewer + style=" + min-width: 100%; + min-height: 100vh; + font-family: sans-serif; + " + .documentNode=${args.documentNode} + .renderedImages=${args.renderedImages || {}} + .panSpeed=${args.panSpeed || 500} + .zoomSpeed=${args.zoomSpeed || 500} + zoom-margin=${args.zoomMargin || 50} + ></figspec-file-viewer> + `; + + export const Defaults = Template.bind({}); + Defaults.args = { + documentNode: demoJson, + renderedImages: { + "2:5": image2_5, + "2:9": image2_9, + "2:13": image2_13, + "64:1": image64_1, + "93:14": image93_14, + "93:32": image93_32, + }, + };
packages/components/src/FigspecViewer/FigspecFileViewer.ts (new)
- @@ -0,0 +1,226 @@
  + import type * as Figma from "figma-js"; + + import { LitElement, css, html, property } from "lit-element"; + + import * as ErrorMessage from "./ErrorMessage"; + + import { ViewerMixin } from "./ViewerMixin"; + + import { extendStyles } from "./utils"; + + // TODO: Move docs for props in mixins (waiting for support at web-component-analyzer) + /** + * A Figma spec viewer. Displays a rendered image alongside sizing guides. + * @element figspec-file-viewer + * + * @property {number} [panX=0] + * Current pan offset in px for X axis. + * This is a "before the scale" value. + * + * @property {number} [panY=0] + * Current pan offset in px for Y axis. + * This is a "before the scale" value. + * + * @property {number} [scale=1] + * Current zoom level, where 1.0 = 100%. + * + * @property {number} [zoomSpeed=500] + * How fast zooming when do ctrl+scroll / pinch gestures. + * Available values: 1 ~ 1000 + * @attr [zoom-speed=500] See docs for `zoomSpeed` property. + * + * @property {number} [panSpeed=500] + * How fast panning when scroll vertically or horizontally. + * This does not affect to dragging with middle button pressed. + * Available values: 1 ~ 1000. + * @attr [pan-speed=500] See docs for `panSpeed` property. + * + * @property {Figma.Node | null} [selectedNode=null] + * Current selected node. + * + * @property {number} [zoomMargin=50] + * The minimum margin for the preview canvas in px. Will be used when the preview + * setting a default zooming scale for the canvas. + * @attr [zoom-margin=50] See docs for `zoomMargin` property. + * + * @fires scalechange When a user zoom-in or zoom-out the preview. + * @fires positionchange When a user panned the preview. + * @fires nodeselect When a user selected / unselected a node. + */ + export class FigspecFileViewer extends ViewerMixin(LitElement) { + /** + * A response of "GET file nodes" API. + * https://www.figma.com/developers/api#get-file-nodes-endpoint + */ + @property({ + type: Object, + attribute: "document-node", + }) + documentNode: Figma.FileResponse | null = null; + + /** + * A record of rendered images, where key is an ID of the node, + * value is an URI of the image. + * https://www.figma.com/developers/api#get-images-endpoint + */ + @property({ + type: Object, + attribute: "rendered-images", + }) + renderedImages: Record<string, string> | null = null; + + /** + * Current selected page (node whose type is "CANVAS"). + */ + selectedPage: Figma.Canvas | null = null; + + /** @private */ + get isMovable(): boolean { + return !!(this.renderedImages && this.documentNode); + } + + /** @private */ + get __images() { + return this.renderedImages || {}; + } + + /** @private */ + get error() { + if (!this.documentNode || !this.renderedImages) { + return ErrorMessage.ErrorMessage({ + title: "Parameter error", + children: html`<span> + Both <code>document-node</code> and <code>rendered-images</code> are + required. + </span>`, + }); + } + + if (super.error) { + return super.error; + } + } + + static get styles() { + return extendStyles(super.styles, [ + css` + :host { + --figspec-control-bg-default: #fcfcfc; + --figspec-control-fg-default: #333; + + --control-bg: var( + --figspec-control-bg, + var(--figspec-control-bg-default) + ); + --control-fg: var( + --figspec-control-bg, + var(--figspec-control-fg-default) + ); + --control-shadow: var( + --figspec-control-shadow, + 0 2px 4px rgba(0, 0, 0, 0.3) + ); + --padding: var(--figspec-control-padding, 8px 16px); + + display: flex; + flex-direction: column; + } + + @media (prefers-color-scheme: dark) { + :host { + --figspec-control-bg-default: #222; + --figspec-control-fg-default: #fff; + } + } + + .controls { + flex-shrink: 0; + padding: var(--padding); + + background-color: var(--control-bg); + box-shadow: var(--control-shadow); + color: var(--control-fg); + } + + .view { + position: relative; + flex-grow: 1; + flex-shrink: 1; + } + `, + ]); + } + + render() { + return html` + <div class="controls"> + <select @change=${this.#handlePageChange}> + ${this.documentNode?.document.children.map( + (c) => html`<option value=${c.id}>${c.name}</option>` + )} + </select> + </div> + + <div class="view">${super.render()}</div> + `; + } + + connectedCallback() { + super.connectedCallback(); + + if (this.documentNode) { + this.#selectFirstPage(); + + if (this.selectedPage) { + this.__updateTree(this.selectedPage); + this.resetZoom(); + } + } + } + + updated(changedProperties: Parameters<LitElement["updated"]>[0]) { + super.updated(changedProperties); + + if (changedProperties.has("documentNode")) { + this.#selectFirstPage(); + + if (this.selectedPage) { + this.__updateTree(this.selectedPage); + this.resetZoom(); + } + } + + if (changedProperties.has("renderedImages")) { + this.__updateEffectMargins(); + } + } + + #selectFirstPage = () => { + if (!this.documentNode) { + this.selectedPage = null; + return; + } + + this.selectedPage = + this.documentNode.document.children.filter( + (c): c is Figma.Canvas => c.type === "CANVAS" + )[0] ?? null; + }; + + #handlePageChange = (ev: Event) => { + const target = ev.currentTarget as HTMLSelectElement; + + this.selectedPage = + (this.documentNode?.document.children.find( + (c) => c.id === target.value + ) as Figma.Canvas) ?? null; + + if (this.selectedPage) { + this.__updateTree(this.selectedPage); + this.resetZoom(); + this.__updateEffectMargins(); + this.panX = 0; + this.panY = 0; + } + }; + }
packages/components/src/FigspecViewer/FigspecFrameViewer.ts (new)
- @@ -0,0 +1,153 @@
  + import type * as Figma from "figma-js"; + + import { LitElement, html, property } from "lit-element"; + + import * as ErrorMessage from "./ErrorMessage"; + + import { ViewerMixin } from "./ViewerMixin"; + + import { SizedNode } from "./utils"; + + // TODO: Move docs for props in mixins (waiting for support at web-component-analyzer) + /** + * A Figma spec viewer. Displays a rendered image alongside sizing guides. + * @element figspec-frame-viewer + * + * @property {number} [panX=0] + * Current pan offset in px for X axis. + * This is a "before the scale" value. + * + * @property {number} [panY=0] + * Current pan offset in px for Y axis. + * This is a "before the scale" value. + * + * @property {number} [scale=1] + * Current zoom level, where 1.0 = 100%. + * + * @property {number} [zoomSpeed=500] + * How fast zooming when do ctrl+scroll / pinch gestures. + * Available values: 1 ~ 1000 + * @attr [zoom-speed=500] See docs for `zoomSpeed` property. + * + * @property {number} [panSpeed=500] + * How fast panning when scroll vertically or horizontally. + * This does not affect to dragging with middle button pressed. + * Available values: 1 ~ 1000. + * @attr [pan-speed=500] See docs for `panSpeed` property. + * + * @property {Figma.Node | null} [selectedNode=null] + * Current selected node. + * + * @property {number} [zoomMargin=50] + * The minimum margin for the preview canvas in px. Will be used when the preview + * setting a default zooming scale for the canvas. + * @attr [zoom-margin=50] See docs for `zoomMargin` property. + * + * @fires scalechange When a user zoom-in or zoom-out the preview. + * @fires positionchange When a user panned the preview. + * @fires nodeselect When a user selected / unselected a node. + */ + export class FigspecFrameViewer extends ViewerMixin(LitElement) { + /** + * A response of "GET file nodes" API. + * https://www.figma.com/developers/api#get-file-nodes-endpoint + */ + @property({ + type: Object, + }) + nodes: Figma.FileNodesResponse | null = null; + + /** + * An image rendered by "GET image" API. + * https://www.figma.com/developers/api#get-images-endpoint + */ + @property({ + type: String, + attribute: "rendered-image", + }) + renderedImage: string | null = null; + + /** @private */ + get isMovable(): boolean { + return !!(this.nodes && this.renderedImage && this.documentNode); + } + + /** + * Readonly. Document node (= root drawable node). + * @readonly + */ + get documentNode(): SizedNode | null { + if (!this.nodes) { + return null; + } + + const documentNode = Object.values(this.nodes.nodes)[0]; + + if (!documentNode || !("absoluteBoundingBox" in documentNode.document)) { + return null; + } + + return documentNode.document; + } + + /** @private */ + get __images() { + if (!this.documentNode || !this.renderedImage) { + return {}; + } + + return { + [this.documentNode.id]: this.renderedImage, + }; + } + + /** @private */ + get error() { + if (!this.nodes || !this.renderedImage) { + return ErrorMessage.ErrorMessage({ + title: "Parameter error", + children: html`<span> + Both <code>nodes</code> and <code>rendered-image</code> are required. + </span>`, + }); + } + + if (!this.documentNode) { + return ErrorMessage.ErrorMessage({ + title: "Parameter Error", + children: html` + <span> Document node is empty or does not have size. </span> + `, + }); + } + + if (super.error) { + return super.error; + } + } + + connectedCallback() { + super.connectedCallback(); + + if (this.documentNode) { + this.__updateTree(this.documentNode); + this.__updateEffectMargins(); + this.resetZoom(); + } + } + + updated(changedProperties: Parameters<LitElement["updated"]>[0]) { + super.updated(changedProperties); + + if (changedProperties.has("nodes")) { + if (!this.documentNode) return; + + this.__updateTree(this.documentNode); + this.resetZoom(); + } + + if (changedProperties.has("renderedImage")) { + this.__updateEffectMargins(); + } + } + }
packages/components/src/FigspecViewer/Node.ts
- @@ -8,11 +8,17 @@ export interface OutlineProps {
  node: Extract<Figma.Node, { absoluteBoundingBox: any }>; computedThickness: number; + selected?: boolean; onClick?(ev: MouseEvent): void; } - export const Outline = ({ node, computedThickness, onClick }: OutlineProps) => { + export const Outline = ({ + node, + selected = false, + computedThickness, + onClick, + }: OutlineProps) => { const { x, y, width, height } = node.absoluteBoundingBox; const radius: {
- @@ -80,6 +86,7 @@ d=${boxPath}
  shape-rendering="geometricPrecision" fill="none" transform="translate(${x}, ${y})" + ?data-selected=${selected} @click=${onClick} /> `;
- @@ -130,7 +137,7 @@ }
  .guide:hover { opacity: 1; } - [data-selected] > .guide { + .guide[data-selected] { opacity: 1; stroke: var(--guide-selected-color); }
packages/components/src/FigspecViewer/NodeSelectableMixin.ts (new)
- @@ -0,0 +1,39 @@
  + import type * as Figma from "figma-js"; + import { LitElement, property } from "lit-element"; + + import type { Constructor, SizedNode } from "./utils"; + + export interface INodeSelectable { + selectedNode: SizedNode | null; + } + + export const NodeSelectableMixin = <T extends Constructor<LitElement>>( + superClass: T + ): T & Constructor<INodeSelectable> => { + class NodeSelectable extends superClass { + @property({ + attribute: false, + }) + selectedNode: SizedNode | null = null; + + constructor(...args: any[]) { + super(...args); + } + + updated(changedProperties: Parameters<LitElement["updated"]>[0]) { + super.updated(changedProperties); + + if (changedProperties.has("selectedNode")) { + this.dispatchEvent( + new CustomEvent<{ selectedNode: Figma.Node | null }>("nodeselect", { + detail: { + selectedNode: this.selectedNode, + }, + }) + ); + } + } + } + + return NodeSelectable; + };
packages/components/src/FigspecViewer/PositionedMixin.ts (new)
- @@ -0,0 +1,199 @@
  + import { LitElement, property } from "lit-element"; + + import type { Constructor } from "./utils"; + + export interface Positioned { + panX: number; + panY: number; + scale: number; + zoomSpeed: number; + panSpeed: number; + + readonly isMovable: boolean; + readonly canvasTransform: readonly string[]; + } + + export const PositionedMixin = <T extends Constructor<LitElement>>( + superClass: T + ): T & Constructor<Positioned> => { + class Positioned extends superClass { + @property({ + attribute: false, + }) + panX: number = 0; + + @property({ + attribute: false, + }) + panY: number = 0; + + @property({ + attribute: false, + }) + scale: number = 1; + + @property({ + type: Number, + attribute: "zoom-speed", + }) + zoomSpeed: number = 500; + + @property({ + type: Number, + attribute: "pan-speed", + }) + panSpeed: number = 500; + + get isMovable() { + return true; + } + + get canvasTransform() { + return [ + `scale(${this.scale})`, + `translate(${this.panX}px, ${this.panY}px)`, + ]; + } + + #isDragModeOn: boolean = false; + + constructor(...args: any[]) { + super(...args); + + this.addEventListener( + "wheel", + (ev) => { + if (!this.isMovable) return; + + ev.preventDefault(); + + if (ev.ctrlKey) { + // Performs zoom when ctrl key is pressed. + let { deltaY } = ev; + + if (ev.deltaMode === 1) { + // Firefox quirk + deltaY *= 15; + } + + const prevScale = this.scale; + + this.scale *= 1 - deltaY / ((1000 - this.zoomSpeed) * 0.5); + + // Performs pan to archive "zoom at the point" behavior (I don't know how to call it). + const offsetX = ev.offsetX - this.offsetWidth / 2; + const offsetY = ev.offsetY - this.offsetHeight / 2; + + this.panX += offsetX / this.scale - offsetX / prevScale; + this.panY += offsetY / this.scale - offsetY / prevScale; + } else { + // Performs pan otherwise (to be close to native behavior) + // Adjusting panSpeed in order to make panSpeed=500 to match to the Figma's one. + const speed = this.panSpeed * 0.002; + + this.panX -= (ev.deltaX * speed) / this.scale; + this.panY -= (ev.deltaY * speed) / this.scale; + } + }, + // This component prevents every native wheel behavior on it. + { passive: false } + ); + + this.addEventListener("pointermove", (ev) => { + // Performs pan only when middle buttons is pressed. + // + // 4 ... Auxiliary button (usually the mouse wheel button or middle button) + // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + if (!(ev.buttons & 4)) return; + + ev.preventDefault(); + + // Moving amount of middle button+pointer move panning should matches to the actual + // pointer travel distance. Since translate goes after scaling, we need to scale + // delta too. + this.#movePanel(ev.movementX, ev.movementY); + }); + + // Listen to keyboard events to enable dragging when Space is pressed, just like in Figma + this.#listenToKeyboardEvents(); + + /** @private */ + this.onmousedown = () => { + if (this.#isDragModeOn) { + document.body.style.cursor = "grabbing"; + + this.onmousemove = ({ movementX, movementY }: MouseEvent) => { + this.#movePanel(movementX, movementY); + }; + + // cleanup unnecessary listeners when user stops dragging + this.onmouseup = () => { + document.body.style.cursor = "grab"; + this.onmousemove = null; + this.onmouseup = null; + }; + } + }; + } + + disconnectedCallback() { + document.removeEventListener("keyup", this.#keyUp); + document.removeEventListener("keydown", this.#keyDown); + super.disconnectedCallback(); + } + + // Dispatch events when the position-related value changes. + updated(changedProperties: Parameters<LitElement["updated"]>[0]) { + super.updated(changedProperties); + + if (changedProperties.has("scale")) { + this.dispatchEvent( + new CustomEvent<{ scale: number }>("scalechange", { + detail: { + scale: this.scale, + }, + }) + ); + } + + if (changedProperties.has("panX") || changedProperties.has("panY")) { + this.dispatchEvent( + new CustomEvent<{ x: number; y: number }>("positionchange", { + detail: { + x: this.panX, + y: this.panY, + }, + }) + ); + } + } + + #movePanel = (shiftX: number, shiftY: number) => { + this.panX += shiftX / this.scale / window.devicePixelRatio; + this.panY += shiftY / this.scale / window.devicePixelRatio; + }; + + // Enable drag mode when holding the spacebar + #keyDown = (event: KeyboardEvent) => { + if (event.code === "Space" && !this.#isDragModeOn) { + this.#isDragModeOn = true; + document.body.style.cursor = "grab"; + } + }; + + // Disable drag mode when space lets the spacebar go + #keyUp = (event: KeyboardEvent) => { + if (event.code === "Space" && this.#isDragModeOn) { + this.#isDragModeOn = false; + document.body.style.cursor = "auto"; + } + }; + + #listenToKeyboardEvents = () => { + document.addEventListener("keyup", this.#keyUp); + document.addEventListener("keydown", this.#keyDown); + }; + } + + return Positioned; + };
packages/components/src/FigspecViewer/ViewerMixin.ts (new)
- @@ -0,0 +1,523 @@
  + import type * as Figma from "figma-js"; + import { + LitElement, + css, + html, + svg, + property, + TemplateResult, + } from "lit-element"; + import { styleMap } from "lit-html/directives/style-map"; + + import { Constructor, extendStyles, SizedNode } from "./utils"; + + import { INodeSelectable, NodeSelectableMixin } from "./NodeSelectableMixin"; + import { Positioned, PositionedMixin } from "./PositionedMixin"; + + import * as DistanceGuide from "./DistanceGuide"; + import * as ErrorMessage from "./ErrorMessage"; + import * as Node from "./Node"; + + interface Margin { + top: number; + right: number; + bottom: number; + left: number; + } + + export interface IViewer { + zoomMargin: number; + + /** + * A record of rendered images. + * Key is an id of the node. + * Value is an URL of the rendered image. + */ + __images: Record<string, string>; + + readonly error?: string | TemplateResult | Error | null; + + __updateTree(node: Figma.Node): void; + __updateEffectMargins(): void; + resetZoom(): void; + } + + export const ViewerMixin = <T extends Constructor<LitElement>>( + superClass: T + ): T & Constructor<IViewer & INodeSelectable & Positioned> => { + class Viewer extends NodeSelectableMixin(PositionedMixin(superClass)) { + @property({ + type: Number, + attribute: "zoom-margin", + }) + zoomMargin: number = 50; + + static get styles() { + // @ts-ignore + const styles = super.styles; + + return extendStyles(styles, [ + css` + :host { + --bg: var(--figspec-viewer-bg, #666); + --z-index: var(--figspec-viewer-z-index, 0); + --error-bg: var(--figspec-viewer-error-bg, #870909); + --error-fg: var(--figspec-viewer-error-fg, white); + + --guide-thickness: var(--figspec-viewer-guide-thickness, 1.5px); + --guide-color: var(--figspec-viewer-guide-color, tomato); + --guide-selected-color: var( + --figspec-viewer-guide-selected-color, + dodgerblue + ); + --guide-tooltip-fg: var(--figspec-viewer-guide-tooltip-fg, white); + --guide-selected-tooltip-fg: var( + --figspec-viewer-guide-selected-tooltip-fg, + white + ); + --guide-tooltip-bg: var( + --figspec-viewer-guide-tooltip-bg, + var(--guide-color) + ); + --guide-selected-tooltip-bg: var( + --figspec-viewer-guide-selected-tooltip-bg, + var(--guide-selected-color) + ); + --guide-tooltip-font-size: var( + --figspec-viewer-guide-tooltip-font-size, + 12px + ); + + position: relative; + display: block; + + background-color: var(--bg); + user-select: none; + overflow: hidden; + z-index: var(--z-index); + } + + .canvas { + position: absolute; + top: 50%; + left: 50%; + } + + .rendered-image { + position: absolute; + top: 0; + left: 0; + } + + .guides { + position: absolute; + + overflow: visible; + stroke: var(--guide-color); + fill: var(--guide-color); + pointer-events: none; + z-index: calc(var(--z-index) + 2); + } + `, + Node.styles, + ErrorMessage.styles, + DistanceGuide.styles, + ]); + } + + get __images(): Record<string, string> { + return {}; + } + + // Cached values + #canvasSize?: Figma.Rect; + #effectMargins?: Record<string, Margin>; + #flattenedNodes?: readonly SizedNode[]; + + constructor(...args: any[]) { + super(...args); + + this.addEventListener("click", () => { + this.selectedNode = null; + }); + } + + get error(): string | Error | null | TemplateResult | undefined { + if (!this.#canvasSize || !this.#flattenedNodes) { + return ErrorMessage.ErrorMessage({ + title: "Error", + children: + "Please call `__updateTree/1` method with a valid parameter.", + }); + } + + return null; + } + + render() { + if (this.error) { + if (this.error instanceof Error) { + return ErrorMessage.ErrorMessage({ + title: this.error.name || "Error", + children: this.error.message, + }); + } + + if (typeof this.error === "string") { + return ErrorMessage.ErrorMessage({ + title: "Error", + children: this.error, + }); + } + + return this.error; + } + + const canvasSize = this.#canvasSize!; + + const reverseScale = 1 / this.scale; + + const guideThickness = `calc(var(--guide-thickness) * ${reverseScale})`; + + const computedGuideThickness = parseFloat( + getComputedStyle(this).getPropertyValue("--guide-thickness") + ); + + const computedGuideTooltipFontSize = parseFloat( + getComputedStyle(this).getPropertyValue("--guide-tooltip-font-size") + ); + + return html` + <div + class="canvas" + style=" + width: ${canvasSize.width}px; + height: ${canvasSize.height}px; + + transform: translate(-50%, -50%) ${this.canvasTransform.join(" ")} + " + > + ${Object.entries(this.__images).map(([nodeId, uri]) => { + const node = this.#getNodeById(nodeId); + + if ( + !node || + !("absoluteBoundingBox" in node) || + !this.#effectMargins?.[node.id] + ) { + return null; + } + + const margin = this.#effectMargins[node.id]; + + return html` + <img class="rendered-image" src="${uri}" + style=${styleMap({ + top: `${node.absoluteBoundingBox.y - canvasSize.y}px`, + left: `${node.absoluteBoundingBox.x - canvasSize.x}px`, + marginTop: `${-margin.top}px`, + marginLeft: `${-margin.left}px`, + width: + node.absoluteBoundingBox.width + + margin.left + + margin.right + + "px", + height: + node.absoluteBoundingBox.height + + margin.top + + margin.bottom + + "px", + })}" + " /> + `; + })} + ${this.selectedNode && + Node.Tooltip({ + nodeSize: this.selectedNode.absoluteBoundingBox, + offsetX: -canvasSize.x, + offsetY: -canvasSize.y, + reverseScale, + })} + ${svg` + <svg + class="guides" + viewBox="0 0 5 5" + width="5" + height="5" + style=${styleMap({ + left: `${-canvasSize.x}px`, + top: `${-canvasSize.y}px`, + strokeWidth: guideThickness, + })} + > + ${ + this.selectedNode && + Node.Outline({ + node: this.selectedNode, + selected: true, + computedThickness: computedGuideThickness * reverseScale, + }) + } + + ${this.#flattenedNodes!.map((node) => { + if (node.id === this.selectedNode?.id) { + return null; + } + + return svg` + <g> + ${Node.Outline({ + node, + computedThickness: computedGuideThickness * reverseScale, + onClick: this.#handleNodeClick(node), + })} + ${ + this.selectedNode && + DistanceGuide.Guides({ + node, + distanceTo: this.selectedNode, + reverseScale, + fontSize: computedGuideTooltipFontSize, + }) + } + </g> + `; + })} + </svg> + `} + </div> + `; + } + + connectedCallback() { + super.connectedCallback(); + + this.resetZoom(); + } + + updated(changedProperties: Parameters<LitElement["updated"]>[0]) { + super.updated(changedProperties); + } + + __updateTree(node: Figma.Node) { + if ( + !( + node.type === "CANVAS" || + node.type === "FRAME" || + node.type === "COMPONENT" + ) + ) { + throw new Error( + "Cannot update node tree: Top level node MUST be one of CANVAS, FRAME, or COMPONENT" + ); + } + + this.#canvasSize = + node.type === "CANVAS" ? getCanvasSize(node) : node.absoluteBoundingBox; + + this.#flattenedNodes = flattenNode(node); + + // Since above properties aren't "attribute", their changes does not + // trigger an update. We need to manually request an update. + this.requestUpdate(); + } + + __updateEffectMargins() { + if (!this.__images) { + return; + } + + const containers = Object.keys(this.__images) + .map(this.#getNodeById) + .filter((n): n is NonNullable<typeof n> => !!n); + + this.#effectMargins = containers.reduce<Record<string, Margin>>( + (margin, node) => { + if (!("absoluteBoundingBox" in node)) { + return margin; + } + + return { + ...margin, + [node.id]: getEffectMargin(node, flattenNode(node)), + }; + }, + {} + ); + + this.requestUpdate(); + } + + resetZoom() { + if (this.#canvasSize) { + // Set initial zoom level based on element size + const { width, height } = this.#canvasSize; + const { + width: elementWidth, + height: elementHeight, + } = this.getBoundingClientRect(); + + const wDiff = elementWidth / (width + this.zoomMargin * 2); + const hDiff = elementHeight / (height + this.zoomMargin * 2); + + this.scale = Math.min(wDiff, hDiff, 1); + } + } + + #handleNodeClick = (node: SizedNode) => (ev: MouseEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + + this.selectedNode = node; + }; + + #getNodeById = (id: string): Figma.Node | null => { + return this.#flattenedNodes?.find((n) => n.id === id) ?? null; + }; + } + + return Viewer; + }; + + function getCanvasSize(node: Figma.Canvas): Figma.Rect { + const left: number[] = []; + const right: number[] = []; + const top: number[] = []; + const bottom: number[] = []; + + for (const child of node.children) { + if (child.type !== "FRAME" && child.type !== "COMPONENT") { + continue; + } + + const { x, y, width, height } = child.absoluteBoundingBox; + + left.push(x); + right.push(x + width); + top.push(y); + bottom.push(y + height); + } + + const minX = Math.min(...left); + const minY = Math.min(...top); + + return { + x: minX, + y: minY, + width: Math.abs(Math.max(...right) - minX), + height: Math.abs(Math.min(...bottom) - minY), + }; + } + + function getEffectMargin( + container: SizedNode, + nodes: readonly SizedNode[] + ): Margin { + const points = nodes.map((node) => { + if (!("effects" in node)) { + return { + top: node.absoluteBoundingBox.y, + right: node.absoluteBoundingBox.x + node.absoluteBoundingBox.width, + bottom: node.absoluteBoundingBox.y + node.absoluteBoundingBox.height, + left: node.absoluteBoundingBox.x, + }; + } + + const blurRadiuses = node.effects + .filter((effect) => effect.visible && effect.type === "LAYER_BLUR") + .map((effect) => effect.radius); + + const shadowMargins = node.effects + .filter( + ( + effect + ): effect is Figma.Effect & { + offset: NonNullable<Figma.Effect["offset"]>; + } => effect.visible && effect.type === "DROP_SHADOW" && !!effect.offset + ) + .map<Margin>((effect) => { + return { + left: effect.radius - effect.offset.x, + top: effect.radius - effect.offset.y, + right: effect.radius + effect.offset.x, + bottom: effect.radius + effect.offset.y, + }; + }); + + const margin: Margin = { + top: Math.max( + 0, + ...blurRadiuses, + ...shadowMargins.map((margin) => margin.top) + ), + right: Math.max( + 0, + ...blurRadiuses, + ...shadowMargins.map((margin) => margin.right) + ), + bottom: Math.max( + 0, + ...blurRadiuses, + ...shadowMargins.map((margin) => margin.bottom) + ), + left: Math.max( + 0, + ...blurRadiuses, + ...shadowMargins.map((margin) => margin.left) + ), + }; + + return { + top: node.absoluteBoundingBox.y - margin.top, + right: + node.absoluteBoundingBox.x + + node.absoluteBoundingBox.width + + margin.right, + bottom: + node.absoluteBoundingBox.y + + node.absoluteBoundingBox.height + + margin.bottom, + left: node.absoluteBoundingBox.x - margin.left, + }; + }); + + const bounds = { + top: Math.min(...points.map((p) => p.top)), + right: Math.max(...points.map((p) => p.right)), + bottom: Math.max(...points.map((p) => p.bottom)), + left: Math.min(...points.map((p) => p.left)), + }; + + return { + top: container.absoluteBoundingBox.y - bounds.top, + right: + bounds.right - + container.absoluteBoundingBox.x - + container.absoluteBoundingBox.width, + bottom: + bounds.bottom - + container.absoluteBoundingBox.y - + container.absoluteBoundingBox.height, + left: container.absoluteBoundingBox.x - bounds.left, + }; + } + + function flattenNode( + node: Figma.Node, + depth: number = 0 + ): readonly (SizedNode & { + depth: number; + })[] { + if (!("absoluteBoundingBox" in node)) { + return node.children.map((child) => flattenNode(child, depth + 1)).flat(); + } + + if (!("children" in node) || node.children.length === 0) { + return [{ ...node, depth }]; + } + + return [ + { ...node, depth }, + ...node.children.map((child) => flattenNode(child, depth + 1)).flat(), + ]; + }
packages/components/src/FigspecViewer/index.stories.js > packages/components/src/FigspecViewer/FigspecFrameViewer.stories.js
- @@ -6,8 +6,8 @@ import demoJson from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json";
  import demoImage from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg"; export default { - title: "Components/figspec-viewer", - component: "figspec-viewer", + title: "Components/figspec-frame-viewer", + component: "figspec-frame-viewer", parameters: { layout: "fullscreen", docs: {
- @@ -18,7 +18,7 @@ },
  }; const Template = (args) => html` - <figspec-viewer + <figspec-frame-viewer style=" min-width: 100%; min-height: 100vh;
- @@ -29,7 +29,7 @@ rendered-image=${args.renderedImage || ""}
  .panSpeed=${args.panSpeed || 500} .zoomSpeed=${args.zoomSpeed || 500} zoom-margin=${args.zoomMargin || 50} - ></figspec-viewer> + ></figspec-frame-viewer> `; export const Defaults = Template.bind({});
- @@ -55,7 +55,7 @@
  WithoutRequiredValues.args = {}; export const Events = (args) => html` - <figspec-viewer + <figspec-frame-viewer style=" min-width: 100%; min-height: 100vh;
- @@ -69,7 +69,7 @@ zoom-margin=${args.zoomMargin || 50}
  @scalechange=${action("scalechange")} @positionchange=${action("positionchange")} @nodeselect=${action("nodeselect")} - ></figspec-viewer> + ></figspec-frame-viewer> `; Events.args = { nodes: demoJson,
packages/components/src/FigspecViewer/index.ts (deleted)
- @@ -1,689 +0,0 @@
  - import type * as Figma from "figma-js"; - - import { - LitElement, - TemplateResult, - css, - html, - property, - svg, - } from "lit-element"; - import { styleMap, StyleInfo } from "lit-html/directives/style-map"; - - import * as DistanceGuide from "./DistanceGuide"; - import * as Node from "./Node"; - - type SizedNode = Extract<Figma.Node, { absoluteBoundingBox: any }>; - - /** - * A Figma spec viewer. Displays a rendered image alongside sizing guides. - * @element figspec-viewer - */ - export class FigspecViewer extends LitElement { - /** - * A response of "GET file nodes" API. - * https://www.figma.com/developers/api#get-file-nodes-endpoint - */ - @property({ - type: Object, - }) - nodes: Figma.FileNodesResponse | null = null; - - /** - * An image rendered by "GET image" API. - * https://www.figma.com/developers/api#get-images-endpoint - */ - @property({ - type: String, - attribute: "rendered-image", - }) - renderedImage: string | null = null; - - /** - * Current selected node. - */ - @property({ - attribute: false, - }) - selectedNode: SizedNode | null = null; - - /** - * Current zoom level, where 1.0 = 100%. - */ - @property({ - attribute: false, - }) - scale: number = 1; - - /** - * Current pan offset in px for X axis. - * This is a "before the scale" value. - */ - @property({ - attribute: false, - }) - panX: number = 0; - - /** - * Current pan offset in px for Y axis. - * This is a "before the scale" value. - */ - @property({ - attribute: false, - }) - panY: number = 0; - - /** - * How fast zooming when do ctrl+scroll / pinch gestures. - * Available values: 1 ~ 1000 - */ - @property({ - type: Number, - attribute: "zoom-speed", - }) - zoomSpeed: number = 500; - - /** - * How fast panning when scroll vertically or horizontally. - * This does not affect to dragging with middle button pressed. - * Available values: 1 ~ 1000. - */ - @property({ - type: Number, - attribute: "pan-speed", - }) - panSpeed: number = 500; - - /** - * The minimum margin for the preview canvas. Will be used when the preview - * setting a default zooming scale for the canvas. - */ - @property({ - type: Number, - attribute: "zoom-margin", - }) - zoomMargin: number = 50; - - #isDragModeOn: boolean = false; - - // Computed values. In order to avoid computing each time scale/pan, we - // compute these values only when the source attributes has changed. - #flattenedNodes?: ReturnType<typeof flattenNode>; - #canvasMargin?: ReturnType<typeof getCanvasMargin>; - - constructor() { - super(); - - this.addEventListener("click", () => { - this.selectedNode = null; - }); - - this.addEventListener( - "wheel", - (ev) => { - if (this.parameterError) return; - - ev.preventDefault(); - - if (ev.ctrlKey) { - // Performs zoom when ctrl key is pressed. - let { deltaY } = ev; - - if (ev.deltaMode === 1) { - // Firefox quirk - deltaY *= 15; - } - - const prevScale = this.scale; - - this.scale *= 1 - deltaY / ((1000 - this.zoomSpeed) * 0.5); - - // Performs pan to archive "zoom at the point" behavior (I don't know how to call it). - const offsetX = ev.offsetX - this.offsetWidth / 2; - const offsetY = ev.offsetY - this.offsetHeight / 2; - - this.panX += offsetX / this.scale - offsetX / prevScale; - this.panY += offsetY / this.scale - offsetY / prevScale; - } else { - // Performs pan otherwise (to be close to native behavior) - // Adjusting panSpeed in order to make panSpeed=500 to match to the Figma's one. - const speed = this.panSpeed * 0.002; - - this.panX -= (ev.deltaX * speed) / this.scale; - this.panY -= (ev.deltaY * speed) / this.scale; - } - }, - // This component prevents every native wheel behavior on it. - { passive: false } - ); - - this.addEventListener("pointermove", (ev) => { - // Performs pan only when middle buttons is pressed. - // - // 4 ... Auxiliary button (usually the mouse wheel button or middle button) - // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons - if (!(ev.buttons & 4)) return; - - ev.preventDefault(); - - // Moving amount of middle button+pointer move panning should matches to the actual - // pointer travel distance. Since translate goes after scaling, we need to scale - // delta too. - this.movePanel(ev.movementX, ev.movementY); - }); - - // Listen to keyboard events to enable dragging when Space is pressed, just like in Figma - this.#listenToKeyboardEvents(); - - /** @private */ - this.onmousedown = () => { - if (this.#isDragModeOn) { - document.body.style.cursor = "grabbing"; - - this.onmousemove = ({ movementX, movementY }: MouseEvent) => { - this.movePanel(movementX, movementY); - }; - - // cleanup unnecessary listeners when user stops dragging - this.onmouseup = () => { - document.body.style.cursor = "grab"; - this.onmousemove = null; - this.onmouseup = null; - }; - } - }; - } - - movePanel(shiftX: number, shiftY: number) { - this.panX += shiftX / this.scale / window.devicePixelRatio; - this.panY += shiftY / this.scale / window.devicePixelRatio; - } - - static get styles() { - return [ - css` - :host { - --bg: var(--figspec-viewer-bg, #666); - --z-index: var(--figspec-viewer-z-index, 0); - --error-bg: var(--figspec-viewer-error-bg, #870909); - --error-fg: var(--figspec-viewer-error-fg, white); - - --guide-thickness: var(--figspec-viewer-guide-thickness, 1.5px); - --guide-color: var(--figspec-viewer-guide-color, tomato); - --guide-selected-color: var( - --figspec-viewer-guide-selected-color, - dodgerblue - ); - --guide-tooltip-fg: var(--figspec-viewer-guide-tooltip-fg, white); - --guide-selected-tooltip-fg: var( - --figspec-viewer-guide-selected-tooltip-fg, - white - ); - --guide-tooltip-bg: var( - --figspec-viewer-guide-tooltip-bg, - var(--guide-color) - ); - --guide-selected-tooltip-bg: var( - --figspec-viewer-guide-selected-tooltip-bg, - var(--guide-selected-color) - ); - --guide-tooltip-font-size: var( - --figspec-viewer-guide-tooltip-font-size, - 12px - ); - - position: relative; - display: block; - - background-color: var(--bg); - user-select: none; - overflow: hidden; - z-index: var(--z-index); - } - - .canvas { - position: absolute; - top: 50%; - left: 50%; - } - - .rendered-image { - position: absolute; - top: 0; - left: 0; - } - - .error { - position: absolute; - top: 50%; - left: 50%; - max-width: 80%; - padding: 0.75em 1em; - - background-color: var(--error-bg); - border-radius: 4px; - color: var(--error-fg); - - transform: translate(-50%, -50%); - } - - .error-title { - display: block; - font-size: 0.8em; - - font-weight: bold; - text-transform: capitalize; - } - - .error-description { - display: block; - margin-block-start: 0.5em; - } - - .guides { - position: absolute; - - overflow: visible; - stroke: var(--guide-color); - fill: var(--guide-color); - pointer-events: none; - z-index: calc(var(--z-index) + 2); - } - `, - Node.styles, - DistanceGuide.styles, - ]; - } - - /** - * Readonly. Document node (= root drawable node). - * @readonly - */ - get documentNode(): SizedNode | null { - if (!this.nodes) { - return null; - } - - const documentNode = Object.values(this.nodes.nodes)[0]; - - if (!documentNode || !("absoluteBoundingBox" in documentNode.document)) { - return null; - } - - return documentNode.document; - } - - /** - * @private - */ - get parameterError(): TemplateResult | null { - if (!this.nodes || !this.renderedImage) { - return html`Both <code>nodes</code> and <code>rendered-image</code> are - required.`; - } - - if (!this.documentNode) { - return html`Document node is empty or does not have size.`; - } - - return null; - } - - render() { - if (this.parameterError) { - return html` - <p class="error"> - <span class="error-title">Parameter error</span> - <span class="error-description">${this.parameterError}</span> - </p> - `; - } - - if (!this.#flattenedNodes || !this.#canvasMargin) { - return html` - <p class="error"> - <span class="error-title">Computation Error</span> - <span class="error-description"> - Failed to calculate based on given inputs. - </span> - </p> - `; - } - - const documentNode = this.documentNode as SizedNode; - const margin = this.#canvasMargin; - - const canvasSize = documentNode.absoluteBoundingBox; - - const { scale, panX, panY } = this; - - const reverseScale = 1 / scale; - - const guideThickness = `calc(var(--guide-thickness) * ${reverseScale})`; - - const computedGuideThickness = parseFloat( - getComputedStyle(this).getPropertyValue("--guide-thickness") - ); - - const computedGuideTooltipFontSize = parseFloat( - getComputedStyle(this).getPropertyValue("--guide-tooltip-font-size") - ); - - return html` - <div - class="canvas" - style=" - width: ${canvasSize.width}px; - height: ${canvasSize.height}px; - - transform: translate(-50%, -50%) scale(${scale}) translate(${panX}px, ${panY}px); - " - > - <img - class="rendered-image" - src="${this.renderedImage}" - style=" - margin-top: ${-margin.top}px; - margin-left: ${-margin.left}px; - width: ${canvasSize.width + margin.left + margin.right}px; - height: ${canvasSize.height + margin.top + margin.bottom}px; - " - /> - - ${this.selectedNode && - Node.Tooltip({ - nodeSize: this.selectedNode.absoluteBoundingBox, - offsetX: -canvasSize.x, - offsetY: -canvasSize.y, - reverseScale, - })} - ${svg` - <svg class="guides" - viewBox="0 0 5 5" - width="5" - height="5" - style=${styleMap({ - left: `${-canvasSize.x}px`, - top: `${-canvasSize.y}px`, - strokeWidth: guideThickness, - })} - > - ${ - this.selectedNode && - svg` - <g data-selected> - ${Node.Outline({ - node: this.selectedNode, - computedThickness: computedGuideThickness * reverseScale, - })} - </g> - ` - } - - ${this.#flattenedNodes.map((node) => { - if (node.id === this.selectedNode?.id) { - return null; - } - - return svg` - <g> - ${Node.Outline({ - node, - computedThickness: computedGuideThickness * reverseScale, - onClick: this.#handleNodeClick(node), - })} - ${ - this.selectedNode && - DistanceGuide.Guides({ - node, - distanceTo: this.selectedNode, - reverseScale, - fontSize: computedGuideTooltipFontSize, - }) - } - </g> - `; - })} - </svg> - `} - </div> - `; - } - - connectedCallback() { - super.connectedCallback(); - - this.#resetZoom(); - } - - disconnectedCallback() { - document.removeEventListener("keyup", this.#keyUp); - document.removeEventListener("keydown", this.#keyDown); - super.disconnectedCallback(); - } - - updated(changedProperties: Parameters<LitElement["updated"]>[0]) { - // Flatten a node tree and calculate outermost boundary rect, - // then save these result. - if (changedProperties.has("nodes")) { - if (!this.documentNode) return; - - this.#flattenedNodes = flattenNode(this.documentNode); - this.#canvasMargin = getCanvasMargin( - this.documentNode, - this.#flattenedNodes - ); - - // 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) => { - ev.preventDefault(); - ev.stopPropagation(); - - this.selectedNode = node; - }; - - // enable drag mode when holding the spacebar - #keyDown = (event: KeyboardEvent) => { - if (event.code === "Space" && !this.#isDragModeOn) { - this.#isDragModeOn = true; - document.body.style.cursor = "grab"; - } - }; - - // disable drag mode when space lets the spacebar go - #keyUp = (event: KeyboardEvent) => { - if (event.code === "Space" && this.#isDragModeOn) { - this.#isDragModeOn = false; - document.body.style.cursor = "auto"; - } - }; - - #listenToKeyboardEvents = () => { - document.addEventListener("keyup", this.#keyUp); - document.addEventListener("keydown", this.#keyDown); - }; - - #resetZoom = () => { - if (this.documentNode) { - // Set initial zoom level based on element size - const { width, height } = this.documentNode.absoluteBoundingBox; - const { - width: elementWidth, - height: elementHeight, - } = this.getBoundingClientRect(); - - const wDiff = elementWidth / (width + this.zoomMargin * 2); - const hDiff = elementHeight / (height + this.zoomMargin * 2); - - this.scale = Math.min(wDiff, hDiff, 1); - } - }; - } - - interface Margin { - top: number; - right: number; - bottom: number; - left: number; - } - - function getCanvasMargin( - documentNode: SizedNode, - nodes: readonly SizedNode[] - ): Margin { - const points = nodes.map((node) => { - if (!("effects" in node)) { - return { - top: node.absoluteBoundingBox.y, - right: node.absoluteBoundingBox.x + node.absoluteBoundingBox.width, - bottom: node.absoluteBoundingBox.y + node.absoluteBoundingBox.height, - left: node.absoluteBoundingBox.x, - }; - } - - const blurRadiuses = node.effects - .filter((effect) => effect.visible && effect.type === "LAYER_BLUR") - .map((effect) => effect.radius); - - const shadowMargins = node.effects - .filter( - ( - effect - ): effect is Figma.Effect & { - offset: NonNullable<Figma.Effect["offset"]>; - } => effect.visible && effect.type === "DROP_SHADOW" && !!effect.offset - ) - .map<Margin>((effect) => { - return { - left: effect.radius - effect.offset.x, - top: effect.radius - effect.offset.y, - right: effect.radius + effect.offset.x, - bottom: effect.radius + effect.offset.y, - }; - }); - - const margin: Margin = { - top: Math.max( - 0, - ...blurRadiuses, - ...shadowMargins.map((margin) => margin.top) - ), - right: Math.max( - 0, - ...blurRadiuses, - ...shadowMargins.map((margin) => margin.right) - ), - bottom: Math.max( - 0, - ...blurRadiuses, - ...shadowMargins.map((margin) => margin.bottom) - ), - left: Math.max( - 0, - ...blurRadiuses, - ...shadowMargins.map((margin) => margin.left) - ), - }; - - return { - top: node.absoluteBoundingBox.y - margin.top, - right: - node.absoluteBoundingBox.x + - node.absoluteBoundingBox.width + - margin.right, - bottom: - node.absoluteBoundingBox.y + - node.absoluteBoundingBox.height + - margin.bottom, - left: node.absoluteBoundingBox.x - margin.left, - }; - }); - - const bounds = { - top: Math.min(...points.map((p) => p.top)), - right: Math.max(...points.map((p) => p.right)), - bottom: Math.max(...points.map((p) => p.bottom)), - left: Math.min(...points.map((p) => p.left)), - }; - - return { - top: documentNode.absoluteBoundingBox.y - bounds.top, - right: - bounds.right - - documentNode.absoluteBoundingBox.x - - documentNode.absoluteBoundingBox.width, - bottom: - bounds.bottom - - documentNode.absoluteBoundingBox.y - - documentNode.absoluteBoundingBox.height, - left: documentNode.absoluteBoundingBox.x - bounds.left, - }; - } - - function flattenNode( - node: Figma.Node, - depth: number = 0 - ): readonly (SizedNode & { - depth: number; - })[] { - if (!("absoluteBoundingBox" in node)) { - return node.children.map((child) => flattenNode(child, depth + 1)).flat(); - } - - if (!("children" in node) || node.children.length === 0) { - return [{ ...node, depth }]; - } - - return [ - { ...node, depth }, - ...node.children.map((child) => flattenNode(child, depth + 1)).flat(), - ]; - }
packages/components/src/FigspecViewer/utils.ts
- @@ -1,4 +1,7 @@
  import * as Figma from "figma-js"; + import { CSSResultArray, LitElement } from "lit-element"; + + export type SizedNode = Extract<Figma.Node, { absoluteBoundingBox: any }>; export interface Point2D { x: number;
- @@ -158,3 +161,31 @@ */
  export function round(n: number) { return Math.round(n * 100) / 100; } + + /** + * Utility type for creating constructor type from an interface. + * @example + * function FooMixin<T extends Constructor<LitElement>>(Base: T): T & Constructor<MixinInterface> { + * // ... + * } + */ + export type Constructor<T> = new (...args: any[]) => T; + + export function extendStyles( + left: typeof LitElement.styles, + right: typeof LitElement.styles + ): CSSResultArray { + return [...stylesToArray(left), ...stylesToArray(right)]; + } + + function stylesToArray(styles: typeof LitElement.styles): CSSResultArray { + if (!styles) { + return []; + } + + if (styles instanceof Array) { + return styles; + } + + return [styles]; + }
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:13.svg (new)
- @@ -0,0 +1,21 @@
  + <svg width="126" height="41" viewBox="0 0 126 41" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g filter="url(#filter0_d)"> + <rect x="1" y="1" width="124" height="38" rx="4" fill="url(#paint0_linear)"/> + <path d="M34.7845 25.45V14.7859H38.2709C39.4281 14.7859 40.2972 15.0252 40.8783 15.5037C41.4642 15.9822 41.7572 16.6902 41.7572 17.6277C41.7572 18.1258 41.6156 18.5677 41.3324 18.9534C41.0492 19.3343 40.6635 19.6297 40.1752 19.8397C40.7513 20.0008 41.2054 20.3084 41.5375 20.7625C41.8744 21.2117 42.0428 21.7488 42.0428 22.3738C42.0428 23.3309 41.7328 24.0828 41.1127 24.6297C40.4926 25.1766 39.6161 25.45 38.4833 25.45H34.7845ZM36.1908 20.4622V24.3001H38.5126C39.1669 24.3001 39.682 24.1317 40.058 23.7947C40.4388 23.4529 40.6293 22.9842 40.6293 22.3885C40.6293 21.1043 39.931 20.4622 38.5345 20.4622H36.1908ZM36.1908 19.3343H38.3148C38.9301 19.3343 39.4208 19.1805 39.787 18.8729C40.1581 18.5652 40.3436 18.1478 40.3436 17.6204C40.3436 17.0345 40.1727 16.6097 39.8309 16.346C39.4891 16.0775 38.9691 15.9432 38.2709 15.9432H36.1908V19.3343ZM51.6376 14.7859V22.0369C51.6327 23.0428 51.3153 23.8655 50.6854 24.5052C50.0604 25.1448 49.2108 25.5037 48.1366 25.5818L47.7631 25.5965C46.5961 25.5965 45.6659 25.2816 44.9725 24.6517C44.2792 24.0218 43.9276 23.1551 43.9178 22.0516V14.7859H45.3094V22.0076C45.3094 22.7791 45.5219 23.3797 45.9467 23.8094C46.3715 24.2342 46.9769 24.4466 47.7631 24.4466C48.559 24.4466 49.1669 24.2342 49.5868 23.8094C50.0116 23.3846 50.224 22.7864 50.224 22.015V14.7859H51.6376ZM61.225 15.9432H57.7972V25.45H56.3983V15.9432H52.9779V14.7859H61.225V15.9432ZM70.2924 15.9432H66.8646V25.45H65.4657V15.9432H62.0453V14.7859H70.2924V15.9432ZM79.8724 20.4622C79.8724 21.5071 79.6967 22.4202 79.3451 23.2015C78.9935 23.9778 78.4955 24.5711 77.851 24.9813C77.2064 25.3914 76.4545 25.5965 75.5951 25.5965C74.7552 25.5965 74.0106 25.3914 73.3612 24.9813C72.7118 24.5662 72.2064 23.9778 71.8451 23.2161C71.4886 22.4495 71.3055 21.5633 71.2958 20.5574V19.7884C71.2958 18.763 71.474 17.8572 71.8304 17.0711C72.1869 16.285 72.6898 15.6844 73.3392 15.2693C73.9935 14.8494 74.7406 14.6395 75.5804 14.6395C76.4349 14.6395 77.1869 14.847 77.8363 15.262C78.4906 15.6722 78.9935 16.2703 79.3451 17.0565C79.6967 17.8377 79.8724 18.7484 79.8724 19.7884V20.4622ZM78.4735 19.7737C78.4735 18.5091 78.2196 17.5399 77.7118 16.866C77.204 16.1873 76.4935 15.848 75.5804 15.848C74.6918 15.848 73.9911 16.1873 73.4784 16.866C72.9706 17.5399 72.7094 18.4774 72.6947 19.6785V20.4622C72.6947 21.6878 72.951 22.6522 73.4637 23.3553C73.9813 24.0535 74.6918 24.4026 75.5951 24.4026C76.5033 24.4026 77.2064 24.0731 77.7045 23.4139C78.2025 22.7498 78.4589 21.8001 78.4735 20.5648V19.7737ZM90.1776 25.45H88.764L83.3954 17.2322V25.45H81.9818V14.7859H83.3954L88.7787 23.0403V14.7859H90.1776V25.45Z" fill="white"/> + </g> + <defs> + <filter id="filter0_d" x="0" y="1" width="126" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> + <feFlood flood-opacity="0" result="BackgroundImageFix"/> + <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> + <feOffset dy="1"/> + <feGaussianBlur stdDeviation="0.5"/> + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> + <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> + <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> + </filter> + <linearGradient id="paint0_linear" x1="125" y1="39" x2="-0.950612" y2="20.9509" gradientUnits="userSpaceOnUse"> + <stop offset="0.325967" stop-color="#51B441"/> + <stop offset="1" stop-color="#61C451"/> + </linearGradient> + </defs> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:5.svg (new)
- @@ -0,0 +1,21 @@
  + <svg width="130" height="44" viewBox="0 0 130 44" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g filter="url(#filter0_d)"> + <rect x="2" y="1" width="126" height="40" rx="4" fill="url(#paint0_linear)"/> + <path d="M35.4453 27V15.625H39.1641C40.3984 15.625 41.3255 15.8802 41.9453 16.3906C42.5703 16.901 42.8828 17.6562 42.8828 18.6562C42.8828 19.1875 42.7318 19.6589 42.4297 20.0703C42.1276 20.4766 41.7161 20.7917 41.1953 21.0156C41.8099 21.1875 42.2943 21.5156 42.6484 22C43.0078 22.4792 43.1875 23.0521 43.1875 23.7188C43.1875 24.7396 42.8568 25.5417 42.1953 26.125C41.5339 26.7083 40.599 27 39.3906 27H35.4453ZM36.9453 21.6797V25.7734H39.4219C40.1198 25.7734 40.6693 25.5938 41.0703 25.2344C41.4766 24.8698 41.6797 24.3698 41.6797 23.7344C41.6797 22.3646 40.9349 21.6797 39.4453 21.6797H36.9453ZM36.9453 20.4766H39.2109C39.8672 20.4766 40.3906 20.3125 40.7812 19.9844C41.1771 19.6562 41.375 19.2109 41.375 18.6484C41.375 18.0234 41.1927 17.5703 40.8281 17.2891C40.4635 17.0026 39.9089 16.8594 39.1641 16.8594H36.9453V20.4766ZM53.4219 15.625V23.3594C53.4167 24.4323 53.0781 25.3099 52.4062 25.9922C51.7396 26.6745 50.8333 27.0573 49.6875 27.1406L49.2891 27.1562C48.0443 27.1562 47.0521 26.8203 46.3125 26.1484C45.5729 25.4766 45.1979 24.5521 45.1875 23.375V15.625H46.6719V23.3281C46.6719 24.151 46.8984 24.7917 47.3516 25.25C47.8047 25.7031 48.4505 25.9297 49.2891 25.9297C50.138 25.9297 50.7865 25.7031 51.2344 25.25C51.6875 24.7969 51.9141 24.1589 51.9141 23.3359V15.625H53.4219ZM63.6484 16.8594H59.9922V27H58.5V16.8594H54.8516V15.625H63.6484V16.8594ZM73.3203 16.8594H69.6641V27H68.1719V16.8594H64.5234V15.625H73.3203V16.8594ZM83.5391 21.6797C83.5391 22.7943 83.3516 23.7682 82.9766 24.6016C82.6016 25.4297 82.0703 26.0625 81.3828 26.5C80.6953 26.9375 79.8932 27.1562 78.9766 27.1562C78.0807 27.1562 77.2865 26.9375 76.5938 26.5C75.901 26.0573 75.362 25.4297 74.9766 24.6172C74.5964 23.7995 74.401 22.8542 74.3906 21.7812V20.9609C74.3906 19.8672 74.5807 18.901 74.9609 18.0625C75.3411 17.224 75.8776 16.5833 76.5703 16.1406C77.2682 15.6927 78.0651 15.4688 78.9609 15.4688C79.8724 15.4688 80.6745 15.6901 81.3672 16.1328C82.0651 16.5703 82.6016 17.2083 82.9766 18.0469C83.3516 18.8802 83.5391 19.8516 83.5391 20.9609V21.6797ZM82.0469 20.9453C82.0469 19.5964 81.776 18.5625 81.2344 17.8438C80.6927 17.1198 79.9349 16.7578 78.9609 16.7578C78.013 16.7578 77.2656 17.1198 76.7188 17.8438C76.1771 18.5625 75.8984 19.5625 75.8828 20.8438V21.6797C75.8828 22.987 76.1562 24.0156 76.7031 24.7656C77.2552 25.5104 78.013 25.8828 78.9766 25.8828C79.9453 25.8828 80.6953 25.5312 81.2266 24.8281C81.7578 24.1198 82.0312 23.1068 82.0469 21.7891V20.9453ZM94.5312 27H93.0234L87.2969 18.2344V27H85.7891V15.625H87.2969L93.0391 24.4297V15.625H94.5312V27Z" fill="white"/> + </g> + <defs> + <filter id="filter0_d" x="0" y="0" width="130" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> + <feFlood flood-opacity="0" result="BackgroundImageFix"/> + <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> + <feOffset dy="1"/> + <feGaussianBlur stdDeviation="1"/> + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/> + <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> + <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> + </filter> + <linearGradient id="paint0_linear" x1="128" y1="41" x2="-0.157829" y2="23.2714" gradientUnits="userSpaceOnUse"> + <stop offset="0.325967" stop-color="#51B441"/> + <stop offset="1" stop-color="#61C451"/> + </linearGradient> + </defs> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:9.svg (new)
- @@ -0,0 +1,21 @@
  + <svg width="130" height="44" viewBox="0 0 130 44" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g filter="url(#filter0_d)"> + <rect x="2" y="1" width="126" height="40" rx="4" fill="url(#paint0_linear)"/> + <path d="M35.4453 27V15.625H39.1641C40.3984 15.625 41.3255 15.8802 41.9453 16.3906C42.5703 16.901 42.8828 17.6562 42.8828 18.6562C42.8828 19.1875 42.7318 19.6589 42.4297 20.0703C42.1276 20.4766 41.7161 20.7917 41.1953 21.0156C41.8099 21.1875 42.2943 21.5156 42.6484 22C43.0078 22.4792 43.1875 23.0521 43.1875 23.7188C43.1875 24.7396 42.8568 25.5417 42.1953 26.125C41.5339 26.7083 40.599 27 39.3906 27H35.4453ZM36.9453 21.6797V25.7734H39.4219C40.1198 25.7734 40.6693 25.5938 41.0703 25.2344C41.4766 24.8698 41.6797 24.3698 41.6797 23.7344C41.6797 22.3646 40.9349 21.6797 39.4453 21.6797H36.9453ZM36.9453 20.4766H39.2109C39.8672 20.4766 40.3906 20.3125 40.7812 19.9844C41.1771 19.6562 41.375 19.2109 41.375 18.6484C41.375 18.0234 41.1927 17.5703 40.8281 17.2891C40.4635 17.0026 39.9089 16.8594 39.1641 16.8594H36.9453V20.4766ZM53.4219 15.625V23.3594C53.4167 24.4323 53.0781 25.3099 52.4062 25.9922C51.7396 26.6745 50.8333 27.0573 49.6875 27.1406L49.2891 27.1562C48.0443 27.1562 47.0521 26.8203 46.3125 26.1484C45.5729 25.4766 45.1979 24.5521 45.1875 23.375V15.625H46.6719V23.3281C46.6719 24.151 46.8984 24.7917 47.3516 25.25C47.8047 25.7031 48.4505 25.9297 49.2891 25.9297C50.138 25.9297 50.7865 25.7031 51.2344 25.25C51.6875 24.7969 51.9141 24.1589 51.9141 23.3359V15.625H53.4219ZM63.6484 16.8594H59.9922V27H58.5V16.8594H54.8516V15.625H63.6484V16.8594ZM73.3203 16.8594H69.6641V27H68.1719V16.8594H64.5234V15.625H73.3203V16.8594ZM83.5391 21.6797C83.5391 22.7943 83.3516 23.7682 82.9766 24.6016C82.6016 25.4297 82.0703 26.0625 81.3828 26.5C80.6953 26.9375 79.8932 27.1562 78.9766 27.1562C78.0807 27.1562 77.2865 26.9375 76.5938 26.5C75.901 26.0573 75.362 25.4297 74.9766 24.6172C74.5964 23.7995 74.401 22.8542 74.3906 21.7812V20.9609C74.3906 19.8672 74.5807 18.901 74.9609 18.0625C75.3411 17.224 75.8776 16.5833 76.5703 16.1406C77.2682 15.6927 78.0651 15.4688 78.9609 15.4688C79.8724 15.4688 80.6745 15.6901 81.3672 16.1328C82.0651 16.5703 82.6016 17.2083 82.9766 18.0469C83.3516 18.8802 83.5391 19.8516 83.5391 20.9609V21.6797ZM82.0469 20.9453C82.0469 19.5964 81.776 18.5625 81.2344 17.8438C80.6927 17.1198 79.9349 16.7578 78.9609 16.7578C78.013 16.7578 77.2656 17.1198 76.7188 17.8438C76.1771 18.5625 75.8984 19.5625 75.8828 20.8438V21.6797C75.8828 22.987 76.1562 24.0156 76.7031 24.7656C77.2552 25.5104 78.013 25.8828 78.9766 25.8828C79.9453 25.8828 80.6953 25.5312 81.2266 24.8281C81.7578 24.1198 82.0312 23.1068 82.0469 21.7891V20.9453ZM94.5312 27H93.0234L87.2969 18.2344V27H85.7891V15.625H87.2969L93.0391 24.4297V15.625H94.5312V27Z" fill="#E0E0E0"/> + </g> + <defs> + <filter id="filter0_d" x="0" y="0" width="130" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> + <feFlood flood-opacity="0" result="BackgroundImageFix"/> + <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> + <feOffset dy="1"/> + <feGaussianBlur stdDeviation="1"/> + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/> + <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> + <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> + </filter> + <linearGradient id="paint0_linear" x1="128" y1="41" x2="-0.157829" y2="23.2714" gradientUnits="userSpaceOnUse"> + <stop offset="0.325967" stop-color="#A6B4A4"/> + <stop offset="1" stop-color="#BDC4BC"/> + </linearGradient> + </defs> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/93:14.svg (new)
- @@ -0,0 +1,4 @@
  + <svg width="456" height="270" viewBox="0 0 456 270" fill="none" xmlns="http://www.w3.org/2000/svg"> + <rect width="456" height="270" fill="white"/> + <path d="M376.418 126.54H380.306C381.226 126.54 381.942 126.772 382.454 127.236C382.966 127.7 383.222 128.348 383.222 129.18C383.222 130.012 382.966 130.66 382.454 131.124C381.942 131.588 381.226 131.82 380.306 131.82H378.29V135H376.418V126.54ZM380.066 130.404C381.002 130.404 381.47 130 381.47 129.192C381.47 128.776 381.354 128.468 381.122 128.268C380.89 128.068 380.538 127.968 380.066 127.968H378.29V130.404H380.066ZM389.183 133.128H385.247L384.443 135H382.559L386.447 126.54H387.947L391.835 135H389.987L389.183 133.128ZM388.571 131.712L387.215 128.544L385.859 131.712H388.571ZM399.581 130.332V134.472C399.173 134.672 398.693 134.828 398.141 134.94C397.589 135.052 397.021 135.108 396.437 135.108C395.541 135.108 394.765 134.936 394.109 134.592C393.453 134.24 392.949 133.74 392.597 133.092C392.245 132.436 392.069 131.66 392.069 130.764C392.069 129.884 392.241 129.12 392.585 128.472C392.937 127.816 393.437 127.312 394.085 126.96C394.733 126.608 395.489 126.432 396.353 126.432C396.961 126.432 397.525 126.516 398.045 126.684C398.573 126.852 399.009 127.084 399.353 127.38L398.765 128.712C398.373 128.432 397.989 128.232 397.613 128.112C397.245 127.984 396.845 127.92 396.413 127.92C394.781 127.92 393.965 128.868 393.965 130.764C393.965 131.74 394.177 132.468 394.601 132.948C395.025 133.428 395.665 133.668 396.521 133.668C396.985 133.668 397.445 133.608 397.901 133.488V131.628H396.245V130.332H399.581ZM401.168 126.54H407V127.992H402.992V129.972H406.76V131.424H402.992V133.548H407V135H401.168V126.54ZM417.405 133.5V135H411.585V133.62L414.405 130.632C414.997 130.008 415.293 129.432 415.293 128.904C415.293 128.232 414.909 127.896 414.141 127.896C413.789 127.896 413.421 127.968 413.037 128.112C412.653 128.248 412.277 128.448 411.909 128.712L411.321 127.38C411.657 127.092 412.089 126.864 412.617 126.696C413.145 126.52 413.685 126.432 414.237 126.432C415.117 126.432 415.817 126.644 416.337 127.068C416.865 127.492 417.129 128.06 417.129 128.772C417.129 129.26 417.025 129.712 416.817 130.128C416.617 130.544 416.277 131.008 415.797 131.52L413.913 133.5H417.405Z" fill="#666666"/> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/93:32.svg (new)
- @@ -0,0 +1,4 @@
  + <svg width="456" height="270" viewBox="0 0 456 270" fill="none" xmlns="http://www.w3.org/2000/svg"> + <rect width="456" height="270" fill="white"/> + <path d="M376.43 126.54H380.318C381.238 126.54 381.954 126.772 382.466 127.236C382.978 127.7 383.234 128.348 383.234 129.18C383.234 130.012 382.978 130.66 382.466 131.124C381.954 131.588 381.238 131.82 380.318 131.82H378.302V135H376.43V126.54ZM380.078 130.404C381.014 130.404 381.482 130 381.482 129.192C381.482 128.776 381.366 128.468 381.134 128.268C380.902 128.068 380.55 127.968 380.078 127.968H378.302V130.404H380.078ZM389.195 133.128H385.259L384.455 135H382.571L386.459 126.54H387.959L391.847 135H389.999L389.195 133.128ZM388.583 131.712L387.227 128.544L385.871 131.712H388.583ZM399.592 130.332V134.472C399.184 134.672 398.704 134.828 398.152 134.94C397.6 135.052 397.032 135.108 396.448 135.108C395.552 135.108 394.776 134.936 394.12 134.592C393.464 134.24 392.96 133.74 392.608 133.092C392.256 132.436 392.08 131.66 392.08 130.764C392.08 129.884 392.252 129.12 392.596 128.472C392.948 127.816 393.448 127.312 394.096 126.96C394.744 126.608 395.5 126.432 396.364 126.432C396.972 126.432 397.536 126.516 398.056 126.684C398.584 126.852 399.02 127.084 399.364 127.38L398.776 128.712C398.384 128.432 398 128.232 397.624 128.112C397.256 127.984 396.856 127.92 396.424 127.92C394.792 127.92 393.976 128.868 393.976 130.764C393.976 131.74 394.188 132.468 394.612 132.948C395.036 133.428 395.676 133.668 396.532 133.668C396.996 133.668 397.456 133.608 397.912 133.488V131.628H396.256V130.332H399.592ZM401.18 126.54H407.012V127.992H403.004V129.972H406.772V131.424H403.004V133.548H407.012V135H401.18V126.54ZM415.809 130.644C416.305 130.788 416.685 131.04 416.949 131.4C417.221 131.752 417.357 132.184 417.357 132.696C417.357 133.44 417.073 134.028 416.505 134.46C415.937 134.884 415.169 135.096 414.201 135.096C413.617 135.096 413.057 135.012 412.521 134.844C411.985 134.676 411.549 134.444 411.213 134.148L411.801 132.816C412.569 133.36 413.341 133.632 414.117 133.632C414.629 133.632 415.001 133.544 415.233 133.368C415.465 133.184 415.581 132.9 415.581 132.516C415.581 132.14 415.465 131.868 415.233 131.7C415.001 131.532 414.629 131.448 414.117 131.448H412.905V129.996H413.913C414.401 129.996 414.761 129.912 414.993 129.744C415.233 129.576 415.353 129.316 415.353 128.964C415.353 128.62 415.249 128.356 415.041 128.172C414.833 127.988 414.533 127.896 414.141 127.896C413.789 127.896 413.421 127.968 413.037 128.112C412.653 128.248 412.281 128.448 411.921 128.712L411.333 127.38C411.669 127.092 412.101 126.864 412.629 126.696C413.165 126.52 413.713 126.432 414.273 126.432C414.849 126.432 415.353 126.528 415.785 126.72C416.217 126.904 416.549 127.168 416.781 127.512C417.021 127.856 417.141 128.256 417.141 128.712C417.141 129.168 417.021 129.568 416.781 129.912C416.549 130.248 416.225 130.492 415.809 130.644Z" fill="#666666"/> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/file.json (new)
- @@ -0,0 +1,2021 @@
  + { + "document": { + "id": "0:0", + "name": "Document", + "type": "DOCUMENT", + "children": [ + { + "id": "0:1", + "name": "Components", + "type": "CANVAS", + "children": [ + { + "id": "2:5", + "name": "Button", + "type": "COMPONENT", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -364, + "y": -338, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.31956079602241516, + "g": 0.7074577212333679, + "b": 0.2564148008823395, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.3817959129810333, + "g": 0.7685589790344238, + "b": 0.31883448362350464, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -332, + "y": -327, + "width": 62, + "height": 19 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 16, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 18.75, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -364, + "y": -338, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "exportSettings": [ + { + "suffix": "", + "format": "PDF", + "constraint": { + "type": "SCALE", + "value": 1 + } + } + ], + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15000000596046448 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2 + } + ], + "transitionNodeID": "2:13", + "transitionDuration": 300, + "transitionEasing": "EASE_IN_AND_OUT" + }, + { + "id": "2:13", + "name": "Button__Active", + "type": "COMPONENT", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "2:10", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I2:10;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -190, + "y": -337, + "width": 124, + "height": 38 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.31956079602241516, + "g": 0.7074577212333679, + "b": 0.2564148008823395, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.3817959129810333, + "g": 0.7685589790344238, + "b": 0.31883448362350464, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I2:10;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -157.5079345703125, + "y": -326.54998779296875, + "width": 58, + "height": 18 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 15, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 17.578125, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -190, + "y": -337, + "width": 124, + "height": 38 + }, + "preserveRatio": true, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.25 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 1 + } + ], + "componentId": "2:5" + } + ], + "absoluteBoundingBox": { + "x": -191, + "y": -338, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "exportSettings": [ + { + "suffix": "", + "format": "PDF", + "constraint": { + "type": "SCALE", + "value": 1 + } + } + ], + "effects": [] + }, + { + "id": "2:9", + "name": "Button__Disabled", + "type": "COMPONENT", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "2:6", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I2:6;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -364, + "y": -259, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.6527005434036255, + "g": 0.7074577212333679, + "b": 0.6437865495681763, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.7421205639839172, + "g": 0.7685589790344238, + "b": 0.7378166317939758, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I2:6;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -332, + "y": -248, + "width": 62, + "height": 19 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.8777292370796204, + "g": 0.8777292370796204, + "b": 0.8777292370796204, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 16, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 18.75, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -364, + "y": -259, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15000000596046448 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2 + } + ], + "transitionNodeID": "2:13", + "transitionDuration": 300, + "transitionEasing": "EASE_IN_AND_OUT", + "componentId": "2:5" + } + ], + "absoluteBoundingBox": { + "x": -364, + "y": -259, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "exportSettings": [ + { + "suffix": "", + "format": "PDF", + "constraint": { + "type": "SCALE", + "value": 1 + } + } + ], + "effects": [] + } + ], + "backgroundColor": { + "r": 0.8980392217636108, + "g": 0.8980392217636108, + "b": 0.8980392217636108, + "a": 1 + }, + "prototypeStartNodeID": "2:5", + "prototypeDevice": { + "type": "NONE", + "rotation": "NONE" + }, + "exportSettings": [] + }, + { + "id": "64:0", + "name": "Sample pages", + "type": "CANVAS", + "children": [ + { + "id": "64:1", + "name": "Components", + "type": "FRAME", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "64:2", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:2;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.31956079602241516, + "g": 0.7074577212333679, + "b": 0.2564148008823395, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.3817959129810333, + "g": 0.7685589790344238, + "b": 0.31883448362350464, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I64:2;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -263, + "y": -262, + "width": 62, + "height": 19 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 16, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 18.75, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -295, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15000000596046448 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2 + } + ], + "componentId": "2:5" + }, + { + "id": "64:5", + "name": "Button__Active", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:5;2:10", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:5;2:10;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -294, + "y": -136, + "width": 124, + "height": 38 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.31956079602241516, + "g": 0.7074577212333679, + "b": 0.2564148008823395, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.3817959129810333, + "g": 0.7685589790344238, + "b": 0.31883448362350464, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I64:5;2:10;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -261.5079345703125, + "y": -125.55000305175781, + "width": 58, + "height": 18 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 15, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 17.578125, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -294, + "y": -136, + "width": 124, + "height": 38 + }, + "preserveRatio": true, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.25 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 1 + } + ], + "componentId": "2:5" + } + ], + "absoluteBoundingBox": { + "x": -295, + "y": -137, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [], + "componentId": "2:13" + }, + { + "id": "64:9", + "name": "Button__Disabled", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:9;2:6", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:9;2:6;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -91, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.6527005434036255, + "g": 0.7074577212333679, + "b": 0.6437865495681763, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.7421205639839172, + "g": 0.7685589790344238, + "b": 0.7378166317939758, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I64:9;2:6;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -59, + "y": -262, + "width": 62, + "height": 19 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.8777292370796204, + "g": 0.8777292370796204, + "b": 0.8777292370796204, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 16, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 18.75, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -91, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15000000596046448 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2 + } + ], + "componentId": "2:5" + } + ], + "absoluteBoundingBox": { + "x": -91, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [], + "componentId": "2:9" + }, + { + "id": "64:13", + "name": "Normal button", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -329, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Normal button", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:14", + "name": "A button. Nothing special.", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -308, + "width": 125, + "height": 30 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "A button. Nothing special.", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-Regular", + "fontWeight": 400, + "fontSize": 10, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "TOP", + "letterSpacing": 0, + "lineHeightPx": 11.71875, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:17", + "name": "Active button", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -193, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Active button", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:18", + "name": "Pressed button.", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -172, + "width": 125, + "height": 30 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Pressed button.", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-Regular", + "fontWeight": 400, + "fontSize": 10, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "TOP", + "letterSpacing": 0, + "lineHeightPx": 11.71875, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:15", + "name": "Disabled button", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -91, + "y": -329, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Disabled button", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:16", + "name": "Inactive button. No hover effects. Not clickable.", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -91, + "y": -308, + "width": 125, + "height": 30 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Inactive button. No hover effects. Not clickable.", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-Regular", + "fontWeight": 400, + "fontSize": 10, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "TOP", + "letterSpacing": 0, + "lineHeightPx": 11.71875, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -358, + "y": -348, + "width": 456, + "height": 270 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": true, + "background": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "exportSettings": [ + { + "suffix": "", + "format": "PNG", + "constraint": { + "type": "SCALE", + "value": 1 + } + } + ], + "effects": [] + }, + { + "id": "93:14", + "name": "Page2", + "type": "FRAME", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "93:18", + "name": "Page 2", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": 431, + "y": -224, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.4000000059604645, + "g": 0.4000000059604645, + "b": 0.4000000059604645, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Page 2", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "RIGHT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": 138, + "y": -348, + "width": 456, + "height": 270 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": true, + "background": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "effects": [] + }, + { + "id": "93:32", + "name": "Page3", + "type": "FRAME", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "93:33", + "name": "Page 3", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": 927, + "y": -224, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.4000000059604645, + "g": 0.4000000059604645, + "b": 0.4000000059604645, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Page 3", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "RIGHT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": 634, + "y": -348, + "width": 456, + "height": 270 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": true, + "background": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "effects": [] + } + ], + "backgroundColor": { + "r": 0.8980392217636108, + "g": 0.8980392217636108, + "b": 0.8980392217636108, + "a": 1 + }, + "prototypeStartNodeID": "64:1", + "prototypeDevice": { + "type": "NONE", + "rotation": "NONE" + } + } + ] + }, + "components": { + "2:5": { + "key": "cb3025cfa73c3757bc3e1bab6e34f9cbf49eb14a", + "name": "Button", + "description": "" + }, + "2:13": { + "key": "1526a8ddee35680a3ca5002e0c00605c0e7095cd", + "name": "Button__Active", + "description": "" + }, + "2:9": { + "key": "01a68bd6ca97410342a7b361aaed70e3f7784655", + "name": "Button__Disabled", + "description": "" + } + }, + "schemaVersion": 0, + "styles": {}, + "name": "storybook-addon-designs-sample", + "lastModified": "2020-10-08T07:37:10.103851Z", + "thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/40585359-6295-4d7d-93d1-9536b4890845?Expires=1604880000&Signature=e90P3U~o-qwGxqB~UQh1mbYpWu9i-K8kai~1rQLPquqDRVWLgkpYvv1iehcAuPothV5UfU5xWJUcvWsmM6kcp6zFPmhddSNBohrtoJcAC-nhJlaF7hIWCjvwCN4Pch7Ft2RB2rSIHCu0zwRcCF45Rfwz54D75ENP-Z~hIMpVgXKVljzetVK7QSP7e8hAr2rLvcgBEb~gewBeOlcypkVlWnbvq~UM6I0tSAbUcownYOO46WZRfWjuIoQ~m1TNSp5Xf~tO7Uwu7b8vNRzWpoCaMtIxQWbn0c0Pr8o4BBRX1glqHggEhdl8OEe8LVIpZ6BRx69zDVWilmHzsICbrgQboQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA", + "version": "504642761", + "role": "owner" + }
packages/components/src/index.ts
- @@ -1,7 +1,13 @@
  - import { FigspecViewer } from "./FigspecViewer"; + import { FigspecFrameViewer } from "./FigspecViewer/FigspecFrameViewer"; + import { FigspecFileViewer } from "./FigspecViewer/FigspecFileViewer"; - if (!customElements.get("figspec-viewer")) { - customElements.define("figspec-viewer", FigspecViewer); + if (!customElements.get("figspec-file-viewer")) { + customElements.define("figspec-file-viewer", FigspecFileViewer); } - export { FigspecViewer } from "./FigspecViewer"; + if (!customElements.get("figspec-frame-viewer")) { + customElements.define("figspec-frame-viewer", FigspecFrameViewer); + } + + export { FigspecFrameViewer }; + export { FigspecFileViewer };
packages/react/README.md
- @@ -28,7 +28,7 @@ const logSelectedNode = (ev) => {
  console.log(ev.detail.selectedNode); }; - <FigspecViewer + <FigspecFrameViewer nodes={nodes} renderedImage={renderedImage} zoomMargin={200}
packages/react/src/index.stories.jsx
- @@ -1,17 +1,17 @@
  import { action } from "@storybook/addon-actions"; - import { FigspecViewer } from "."; + import { FigspecFrameViewer } from "."; import demoJson from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json"; import demoImage from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg"; export default { - title: "FigspecViewer", - component: FigspecViewer, + title: "FigspecFrameViewer", + component: FigspecFrameViewer, }; const Template = (args) => ( - <FigspecViewer + <FigspecFrameViewer {...args} style={{ width: 500,
packages/react/src/index.tsx
- @@ -1,7 +1,10 @@
  import "@figspec/components"; // This line is treated as type-only import even without the `type` keyword. // The keyword is here to indicate the line does not triggers any side-effects. - import type { FigspecViewer as FigspecViewerElement } from "@figspec/components"; + import type { + FigspecFrameViewer as FigspecFrameViewerElement, + FigspecFileViewer as FigspecFileViewerElement, + } from "@figspec/components"; import { forwardRef, useCallback,
- @@ -10,8 +13,24 @@ useImperativeHandle,
  useState, } from "react"; - type ElementProps = Pick< - FigspecViewerElement, + 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); + }; + + // Frame viewer + + type FigspecFrameViewerElementProps = Pick< + FigspecFrameViewerElement, // HTML attributes | "id" | "className"
- @@ -25,31 +44,18 @@ | "panSpeed"
  | "zoomMargin" >; - export interface FigspecViewerProps extends ElementProps { + export interface FigspecFrameViewerProps + extends FigspecFrameViewerElementProps { 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; + type FigspecFrameViewerRef = FigspecFrameViewerElement | 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 + export const FigspecFrameViewer = forwardRef< + FigspecFrameViewerElement, + FigspecFrameViewerProps >( ( {
- @@ -66,11 +72,15 @@ ...rest
  }, ref ) => { - const [refNode, setNode] = useState<FigspecViewerElement | null>(null); + const [refNode, setNode] = useState<FigspecFrameViewerElement | null>(null); - useImperativeHandle<Ref, Ref>(ref, () => refNode, [refNode]); + useImperativeHandle<FigspecFrameViewerRef, FigspecFrameViewerRef>( + ref, + () => refNode, + [refNode] + ); - const refCb = useCallback((node: FigspecViewerElement | null) => { + const refCb = useCallback((node: FigspecFrameViewerElement | null) => { if (node) { setNode(node);
- @@ -105,7 +115,106 @@ return bindEvent(refNode, "scalechange", onScaleChange);
  }, [refNode, onScaleChange]); return ( - <figspec-viewer + <figspec-frame-viewer + ref={refCb} + class={className} + pan-speed={panSpeed} + zoom-margin={zoomMargin} + zoom-speed={zoomSpeed} + {...rest} + /> + ); + } + ); + + // File viewer + + type FigspecFileViewerElementProps = Pick< + FigspecFileViewerElement, + // HTML attributes + | "id" + | "className" + | "style" + // Element props + | "documentNode" + | "renderedImages" + // Element attributes (will be converted to kebab-case) + | "zoomSpeed" + | "panSpeed" + | "zoomMargin" + >; + + export interface FigspecFileViewerProps extends FigspecFileViewerElementProps { + onScaleChange?(ev: CustomEvent<{ scale: number }>): void; + onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; + onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; + } + + type FigspecFileViewerRef = FigspecFileViewerElement | null | undefined; + + export const FigspecFileViewer = forwardRef< + FigspecFileViewerElement, + FigspecFileViewerProps + >( + ( + { + documentNode, + renderedImages, + className, + panSpeed, + zoomMargin, + zoomSpeed, + onNodeSelect, + onPositionChange, + onScaleChange, + ...rest + }, + ref + ) => { + const [refNode, setNode] = useState<FigspecFileViewerElement | null>(null); + + useImperativeHandle<FigspecFileViewerRef, FigspecFileViewerRef>( + ref, + () => refNode, + [refNode] + ); + + const refCb = useCallback((node: FigspecFileViewerElement | null) => { + if (node) { + setNode(node); + + node.documentNode = documentNode; + node.renderedImages = renderedImages; + } + }, []); + + useEffect(() => { + if (!refNode) return; + + refNode.documentNode = documentNode; + refNode.renderedImages = renderedImages; + }, [refNode, documentNode, renderedImages]); + + 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-file-viewer ref={refCb} class={className} pan-speed={panSpeed}
packages/react/src/types.d.ts
- @@ -1,5 +1,6 @@
  declare namespace JSX { interface IntrinsicElements { - "figspec-viewer": any; + "figspec-frame-viewer": any; + "figspec-file-viewer": any; } }
scripts/generateStaticFigmaFile/fetchFile.mjs (new)
- @@ -0,0 +1,41 @@
  + import fetch from "node-fetch"; + + export async function fetchFile(client, fileKey) { + const fileResponse = await client.file(fileKey); + + const frames = listAllFrames(fileResponse.data.document); + + const imageResponse = await client.fileImages(fileKey, { + ids: frames.map((frame) => frame.id), + scale: 1, + format: "svg", + }); + + const images = []; + + for (const [nodeId, image] of Object.entries(imageResponse.data.images)) { + const res = await fetch(image); + + images.push({ + nodeId, + data: await res.buffer(), + }); + } + + return { + response: fileResponse.data, + images, + }; + } + + function listAllFrames(node) { + if ("absoluteBoundingBox" in node) { + return [node]; + } + + if (!node.children || node.children.length === 0) { + return []; + } + + return node.children.map(listAllFrames).flat(); + }
scripts/generateStaticFigmaFile/fetchNode.mjs (new)
- @@ -0,0 +1,42 @@
  + import fetch from "node-fetch"; + + export async function fetchNode(client, fileKey, nodeId) { + const [nodes, imageResponse] = await Promise.all([ + client.fileNodes(fileKey, { ids: [nodeId] }), + client.fileImages(fileKey, { + ids: [nodeId], + scale: 1, + format: "svg", + }), + ]); + + if (imageResponse.data.err) { + throw new Error(`Failed to render nodes: ${imageResponse.data.err}`); + } + + const [image] = await Promise.all( + Object.entries(imageResponse.data.images) + .filter((image) => image[0] === nodeId) + .map(async ([nodeId, image]) => { + if (!image) { + throw new Error(`Failed to render a node (node-id=${nodeId}`); + } + + const res = await fetch(image); + + if (res.status !== 200) { + throw new Error( + `Failed to fetch a rendered image: node-id=${nodeId}, url=${image}` + ); + } + + return res.buffer(); + }) + ); + + if (!image) { + throw new Error("Image not found."); + } + + return { response: nodes.data, image }; + }
scripts/generateStaticFigmaFile/index.mjs
- @@ -1,12 +1,14 @@
  import { program } from "commander"; import * as dotenv from "dotenv"; import * as Figma from "figma-js"; - import fetch from "node-fetch"; import * as fs from "fs/promises"; import * as path from "path"; import { URL, fileURLToPath } from "url"; import pkg from "./package.json"; + + import { fetchFile } from "./fetchFile.mjs"; + import { fetchNode } from "./fetchNode.mjs"; const isFigmaURL = (url) => /https:\/\/([w.-]+.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/.test(
- @@ -43,28 +45,43 @@
  const fileKey = url.pathname.split("/")[2]; const nodeId = url.searchParams.get("node-id") || null; - if (!nodeId) { - console.error("Fetching an entire file is not implemented yet."); - process.exit(1); - } - const figma = Figma.Client({ personalAccessToken: token, }); - const [nodes, images] = await Promise.all([ - figma.fileNodes(fileKey, { ids: [nodeId] }), - figma.fileImages(fileKey, { - ids: [nodeId], - scale: 1, - format: "svg", - }), - ]); + const files = await (async () => { + if (nodeId) { + const node = await fetchNode(figma, fileKey, nodeId); - if (images.data.err) { - console.error(`Failed to render nodes: ${images.data.err}`); - process.exit(1); - } + return [ + { + filename: `${nodeId}.json`, + data: program.pretty + ? JSON.stringify(node.response, null, 2) + : JSON.stringify(node.response), + }, + { + filename: `${nodeId}.svg`, + data: node.image, + }, + ]; + } + + const file = await fetchFile(figma, fileKey); + + return [ + { + filename: "file.json", + data: program.pretty + ? JSON.stringify(file.response, null, 2) + : JSON.stringify(file.response), + }, + ...file.images.map((image) => ({ + filename: `${image.nodeId}.svg`, + data: image.data, + })), + ]; + })(); const outDir = path.resolve( path.isAbsolute(program.outDir)
- @@ -89,31 +106,9 @@ recursive: true,
  }); await Promise.all( - Object.entries(images.data.images).map(async ([nodeId, image]) => { - if (!image) { - throw new Error(`Failed to render a node (node-id=${nodeId}`); - } - - const res = await fetch(image); - - if (res.status !== 200) { - throw new Error( - `Failed to fetch a rendered image: node-id=${nodeId}, url=${image}` - ); - } - - await fs.writeFile( - path.resolve(outDir, nodeId + ".svg"), - await res.buffer() - ); + files.map(async (file) => { + await fs.writeFile(path.resolve(outDir, file.filename), file.data); }) - ); - - await fs.writeFile( - path.resolve(outDir, `${nodeId}.json`), - program.pretty - ? JSON.stringify(nodes.data, null, 2) - : JSON.stringify(nodes.data) ); }
scripts/generateStaticFigmaFile/package.json
- @@ -2,6 +2,7 @@ {
  "name": "@figspec/generate-static-figma-file", "version": "0.1.0", "private": true, + "type": "module", "dependencies": { "commander": "^6.1.0", "figma-js": "^1.13.0",

Authored by: Shota Fuji
Authored at: 2020-11-18 09:43:46 +0900
Committed by: GitHub
Committed at: 2020-11-18 09:43:46 +0900
Signature: View
-----BEGIN PGP SIGNATURE----- wsBcBAABCAAQBQJftG5CCRBK7hj4Ov3rIwAAdHIIAErkTX3bkFSyQlIPVrnz0JVi GMvezdzac0/M00IY5Zd0sjPFwsytz0p9jBGS/s0DYWTbohRFh701tEHGGYsO9MXR WNATH0DItC+bFzH+aFoERKSDxYsrdnuyVdPzmctprJizK61QctylIg0KVbuBN/f/ b2hLCYJG6tAfnrEeuTieofEAfQSdJ1+qzIHuMso7zxHinEBHYfJ6aHtdVtxJEWUW +LkyYQjb8gyGtf4HCMBnjynWfGP5gmC86jsahBhyskSm9WT3q0fizd4s5+83gxqw ya4coKgqmeIn9ar0c/WY9lnete8dui9AsfJLQOIWouT014T1KqT3snKmpMrf+Yk= =thT2 -----END PGP SIGNATURE-----
Object name: 68ca1f28aac46d2e835b9881dcbf466fc76f12c6
Parent: 4c6e54c3
Tab width