Svelte中panzoom无法禁用？pause/dispose方法失效求助

你每次调用setActive函数时，都会重新调用panzoom(document.getElementById("editor"))创建一个全新的panzoom实例，而不是操作之前已经绑定到元素上的那个实例。这就导致你调用dispose()或pause()的是刚创建的新实例，原本生效的旧实例完全没被处理，所以禁用/销毁操作毫无效果。

把panzoom实例存储为组件的持久化变量，只初始化一次，后续操作都复用同一个实例：

修改Toolbar.svelte的代码：

<script>
    import panzoom from "panzoom";
    import { onMount } from "svelte";

    // 存储panzoom实例，保持引用持久化
    let panzoomInstance = null;

    onMount(() => {
        // 组件挂载后初始化一次panzoom实例
        const editorEl = document.getElementById("editor");
        if (editorEl) {
            panzoomInstance = panzoom(editorEl);
        }
    });

    function setActive(toolId) {
        if (!panzoomInstance) return; // 实例未初始化时直接返回

        if (toolId === "choose-color") {
            panzoomInstance.resume();
        } else {
            panzoomInstance.dispose();
            // 如果后续还需要重新启用，不要销毁实例，改用pause：
            // panzoomInstance.pause();
        }
    }
</script>

• 如果你的场景中需要多次销毁后重新初始化，记得在dispose()后将panzoomInstance重置为null，下次需要时重新创建。
• 优先用pause()代替dispose()来临时禁用缩放平移，因为dispose()会彻底销毁实例，后续需要重新初始化才能恢复功能，而pause()只是暂时禁用事件监听，调用resume()就能快速恢复。

内容的提问来源于stack exchange，提问作者i_am_learning