feat: Initial zoom level https://github.com/pocka/figspec/issues/1 Sets initial zoom level based on element's size. This might not be same as Figma's behavior, but it's convenient.

Changes

2 changed files (+34/-0)

• packages/components/src/FigspecViewer/index.stories.js
  • @@ -22,6 +22,7 @@ .nodes=${args.nodes}
    rendered-image=${args.renderedImage || ""} .panSpeed=${args.panSpeed || 500} .zoomSpeed=${args.zoomSpeed || 500} + zoom-margin=${args.zoomMargin || 50} ></figspec-viewer> `;
  • @@ -30,6 +31,7 @@
    Defaults.args = { nodes: demoJson, renderedImage: demoImage, + zoomMargin: 300, }; export const Slow = Template.bind({});
• packages/components/src/FigspecViewer/index.ts
  • @@ -94,6 +94,16 @@ 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; constructor() {
  • @@ -419,6 +429,12 @@ </div>
    `; } + connectedCallback() { + super.connectedCallback(); + + this.#resetZoom(); + } + disconnectedCallback() { document.removeEventListener("keyup", this.#keyUp); document.removeEventListener("keydown", this.#keyDown);
  • @@ -451,6 +467,22 @@
    #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); + } }; }