Merge pull request #11 from pocka/feature/initial-zoom-level Initial zoom level

Changes

2 changed files (+45/-0)

• packages/components/src/FigspecViewer/index.stories.js
  • @@ -8,6 +8,10 @@ title: "Components/figspec-viewer",
    component: "figspec-viewer", parameters: { layout: "fullscreen", + docs: { + inlineStories: false, + iframeHeight: 600, + }, }, };
  • @@ -22,6 +26,7 @@ .nodes=${args.nodes}
    rendered-image=${args.renderedImage || ""} .panSpeed=${args.panSpeed || 500} .zoomSpeed=${args.zoomSpeed || 500} + zoom-margin=${args.zoomMargin || 50} ></figspec-viewer> `;
• 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() {
  • @@ -160,6 +170,7 @@
    // 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";
  • @@ -279,6 +290,10 @@ DistanceGuide.styles,
    ]; } + /** + * Readonly. Document node (= root drawable node). + * @readonly + */ get documentNode(): SizedNode | null { if (!this.nodes) { return null;
  • @@ -293,6 +308,9 @@
    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
  • @@ -419,6 +437,12 @@ </div>
    `; } + connectedCallback() { + super.connectedCallback(); + + this.#resetZoom(); + } + disconnectedCallback() { document.removeEventListener("keyup", this.#keyUp); document.removeEventListener("keydown", this.#keyDown);
  • @@ -451,6 +475,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); + } }; }