Bug: Svelvet canvas "teleporting" on initial pan and edges are displaced

[noahstreller]

Description

In Svelvet 10.0.2, I am unable to pan on the canvas without it changing the position of both the page and the canvas on the first click. Besides, the edges are completely displaced until they get hovered.

Did I implement it incorrectly? I would be very thankful for any assistance.

Screen.Recording.2024-11-20.115439.mp4

Screen.Recording.2024-11-20.115704.mp4

Reproduction

1. Clone or download this branch
2. run npm i and npm run dev
3. Paste the contents of a valid JSON file in the text box. For instance, this JSON example.
4. Click apply and observe the results in the graph

System information

System:
    OS: Windows 11 10.0.22635
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 1.79 GB / 15.80 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.14.1 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.33 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.15)
    Internet Explorer: 11.0.22621.3566
  npmPackages:
    @sentry/browser: ^8.37.1 => 8.37.1
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1
    @sveltejs/adapter-node: ^5.2.9 => 5.2.9
    @sveltejs/kit: ^2.0.0 => 2.8.0
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0
    @tailwindcss/aspect-ratio: ^0.4.2 => 0.4.2
    @tailwindcss/container-queries: ^0.1.1 => 0.1.1
    @tailwindcss/forms: ^0.5.9 => 0.5.9
    @tailwindcss/typography: ^0.5.15 => 0.5.15
    @types/eslint: ^9.6.0 => 9.6.1
    autoprefixer: ^10.4.20 => 10.4.20
    better-npm-audit: ^3.11.0 => 3.11.0
    bits-ui: ^1.0.0-next.46 => 1.0.0-next.46
    clsx: ^2.1.1 => 2.1.1
    eslint: ^9.7.0 => 9.14.0
    eslint-config-prettier: ^9.1.0 => 9.1.0
    eslint-plugin-svelte: ^2.36.0 => 2.46.0
    formsnap: ^2.0.0-next.1 => 2.0.0-next.1
    globals: ^15.0.0 => 15.12.0
    lucide-svelte: ^0.454.0 => 0.454.0
    mode-watcher: ^0.4.1 => 0.4.1
    paneforge: ^1.0.0-next.1 => 1.0.0-next.1
    prettier: ^3.3.2 => 3.3.3
    prettier-plugin-svelte: ^3.2.6 => 3.2.7
    prettier-plugin-tailwindcss: ^0.6.5 => 0.6.8
    svelte: ^5.0.0 => 5.1.12
    svelte-check: ^4.0.0 => 4.0.5
    svelte-codemirror-editor: ^1.4.1 => 1.4.1
    svelte-sonner: ^0.3.28 => 0.3.28
    sveltekit-superforms: ^2.20.0 => 2.20.0
    svelvet: ^10.0.2 => 10.0.2
    tailwind-merge: ^2.5.4 => 2.5.4
    tailwind-variants: ^0.2.1 => 0.2.1
    tailwindcss: ^3.4.9 => 3.4.14
    tailwindcss-animate: ^1.0.7 => 1.0.7
    typescript: ^5.0.0 => 5.6.3
    typescript-eslint: ^8.0.0 => 8.13.0
    uuid: ^11.0.3 => 11.0.3
    vite: ^5.0.3 => 5.4.10
    vitest: ^2.0.4 => 2.1.4
    zod: ^3.23.8 => 3.23.8

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

[Sean-Shmulevich]

I am also having a teleporting issue mine is a bit different. My project is essentially purely Svelvet on the front end.

I am dragging nodes from a menu and creating them on the canvas dynamically. (they are logic gates)
If I set cursor='drop' on the node, the first node will always be dropped far outside the current view (GIVEN I have not clicked or interacted with the canvas in any way prior to dropping) (teleport node)

If I click the .svelvet-wrapper canvas before placing any nodes, the first node dropped will be dropped according to the current cursor position with no problem. (everything works as expected)

If I DRAG the '.svelvet-wrapper' before placing any nodes, the view on the canvas will jump to the same place that the first node goes when you do not interact with the canvas prior to interacting with a node. (teleport view)

I suspect it might have something to do with the CSS I have applied to the svelvet-wrapper. but that may not be the right idea.

    :global(
        .svelvet-wrapper,
        .svelvet-wrapper:focus-visible,
        .svelvet-wrapper:active,
        .svelvet-wrapper:focus
    ) {
        /* border-radius: 20px; */
        outline: none !important;
        border: none !important;
        box-shadow: unset !important;
    }
    :global(.svelvet-wrapper) {
        /* max-height: calc(100% - 3.5vh); */
        flex: 1;
    }

[Sean-Shmulevich]

I discovered a temporary fix for the teleport on the initial panning

    document.addEventListener('DOMContentLoaded', () => {
        const canvas = document.querySelector('.svelvet-wrapper')
        if (canvas) {
            // Create a MouseEvent with additional options
            const event = new MouseEvent('mousedown', {
                bubbles: true,
                cancelable: true,
            })

            // Dispatch the event on the canvas
            canvas.dispatchEvent(event)
            const eventUp = new MouseEvent('mouseup', {
                bubbles: true,
                cancelable: true,
            })
            canvas.dispatchEvent(eventUp)
        }
    })

Update: The edge displacement can be temporarily fixed with this

        const hoverAnchor = new MouseEvent('mouseenter', {
            bubbles: true,
            cancelable: true,
        })
        const allAnchors: NodeListOf<HTMLElement> =
            document.querySelectorAll('.anchor-wrapper')

        allAnchors.forEach((anc: HTMLElement) => {
            anc.dispatchEvent(hoverAnchor)
        })

However I did not have the edge displacement bug in the application build only on localhost did I have this issue, I am using "vite": "^6.1.0".

[rudolfbyker]

I'm experiencing the same thing with svelvet 11.0.5:

svelvet.mp4

[the-sumeet]

Experiencing the same. I'm using it with SvelteKit.

The edges are not shown or not connected properly to nodes. When I click on nodes, one by one, the edges are properly rendered.

Has anyone found a solution?