Svelte组件集成directed-graph-creator库遇阻，求可行方案

直接按下面步骤操作，就能快速把编辑器塞进Svelte的小容器里：

1. 安装依赖 #

终端执行命令：

npm install directed-graph-creator

2. 编写Svelte组件 #

创建单独的组件文件（比如GraphEditor.svelte），代码如下：

<script>
  import { onMount, onDestroy } from 'svelte';
  import DirectedGraphCreator from 'directed-graph-creator';

  let graphContainer;
  let graphInstance;

  onMount(() => {
    // 将编辑器绑定到指定小容器
    graphInstance = new DirectedGraphCreator(graphContainer, {
      // 关闭全屏选项，避免编辑器默认占满整页
      allowFullScreen: false,
      // 按需添加其他配置，比如节点大小、连线颜色等
    });

    // 有初始图形数据的话，用这行加载
    // graphInstance.loadGraph({ nodes: [], edges: [] });
  });

  onDestroy(() => {
    // 组件销毁时清理实例，防止内存泄漏
    graphInstance?.destroy();
  });
</script>

<div class="graph-window" bind:this={graphContainer}>
  <!-- 编辑器会自动挂载到这个容器内 -->
</div>

<style>
  .graph-window {
    width: 600px;
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: auto;
    padding: 8px;
    /* 需要固定位置的话，可添加position: relative */
  }
</style>

核心注意事项 #

• 用bind:this获取容器DOM元素，传给库的构造函数，这是让编辑器不占满整页的关键
• 必须禁用allowFullScreen，否则编辑器会默认触发全屏，覆盖你的小窗口
• 给容器设置固定宽高和overflow: auto，确保呈现小窗口样式，内容超出时可滚动
• 组件销毁时调用destroy()，避免残留的事件监听或DOM节点占用资源

常见调整方案 #

• 若编辑器显示错位，检查容器position是否设为relative（库内部元素多使用绝对定位，需相对容器定位）
• 想自定义编辑器样式，可在初始化配置中添加nodeStyle、edgeStyle等参数
• 小窗口操作不便时，可开启缩放功能，配置里加allowZoom: true即可

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