Thanks to visit codestin.com
Credit goes to github.com

Skip to content

toolpath-desktop: graph-view zoom depends on non-standard CSS zoom #37

@eliothedeman

Description

@eliothedeman

Follow-up from #34 review.

The Graph-view zoom in Preview.svelte applies zoom: {level} to the inner .graph-zoom div. This gives us correct scroll-container bounds (the content actually grows/shrinks in layout), and it works in every current Tauri runtime (WebKit on macOS, Chromium WebView2 on Windows/Linux).

But zoom is non-standard. If we ever render the frontend outside a WebKit/Chromium webview (Firefox for dev testing, the site export, someone running bun run dev and hitting localhost:1420 in a non-Chromium browser), the visual scales but the scroll container sees the unscaled size — scrollbars end up wrong.

Fix

Feature-detect + fall back to transform: scale with manually-set container dimensions:

<div class="graph-zoom" style="--pg-zoom: {zoom}" bind:this={canvasEl}></div>
.graph-zoom {
  zoom: var(--pg-zoom, 1);
}
@supports not (zoom: 2) {
  .graph-zoom {
    transform: scale(var(--pg-zoom, 1));
    transform-origin: 0 0;
    width: calc(100% / var(--pg-zoom, 1));
    height: calc(100% / var(--pg-zoom, 1));
  }
}

Caveat: transform: scale doesn't reflow and the container's reported size stays unscaled — we'd need viz.ts to expose the dagre-computed dims so we can compute scaled width/height explicitly. Fine, just more plumbing.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions