如何在JointJS中实现工作区保存功能？已集成KitchenSink示例

嗨，作为JointJS新手能想到扩展保存功能真的很棒！完全可以实现保存工作区的需求，JointJS本身就提供了完善的图形序列化API，下面我给你详细讲具体的实现方法：

JointJS的Graph对象内置了toJSON()方法，可以把整个工作区的所有内容（包括节点、连线、位置、样式、甚至自定义属性）完整序列化成JSON格式。保存这个JSON数据，之后通过fromJSON()方法就能一键恢复整个工作区的状态。

1. 给Kitchensink界面添加保存按钮 #

首先在示例的工具栏区域加个保存按钮，比如：

<button id="save-workspace" style="margin-left: 10px;">保存工作区</button>

如果示例用的是自定义工具栏组件，也可以对应添加一个菜单项或者按钮元素。

2. 实现保存逻辑 #

根据你的需求，可以选择保存到本地浏览器存储（快速测试）或者后端服务器（持久化存储）：

方案一：保存到本地localStorage（适合快速验证） #

// 先获取Kitchensink里的Graph实例，示例里一般是全局或模块内的`graph`变量
const graph = joint.dia.graph;

// 绑定保存按钮的点击事件
document.getElementById('save-workspace').addEventListener('click', () => {
  // 将图形序列化为JSON对象
  const workspaceData = graph.toJSON();
  // 把JSON转成字符串存储到localStorage
  localStorage.setItem('jointjs-kitchensink-workspace', JSON.stringify(workspaceData));
  alert('工作区已成功保存到本地！');
});

方案二：保存到后端服务器（适合实际项目） #

如果需要多设备同步或者持久化到数据库，就通过接口把数据发送给后端：

document.getElementById('save-workspace').addEventListener('click', async () => {
  const workspaceData = graph.toJSON();
  try {
    // 发送POST请求到你的后端接口
    const response = await fetch('/api/save-jointjs-workspace', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 如果有用户认证，这里可以加Token
        'Authorization': 'Bearer ' + yourAuthToken
      },
      body: JSON.stringify({
        workspaceData: workspaceData,
        // 可以额外传递工作区名称、用户ID等标识信息
        workspaceName: '我的流程图',
        userId: 'your-user-id'
      })
    });

    if (response.ok) {
      const result = await response.json();
      alert(`工作区已保存，ID：${result.workspaceId}`);
    } else {
      throw new Error('服务器返回错误');
    }
  } catch (error) {
    console.error('保存失败:', error);
    alert('保存出错，请稍后重试');
  }
});

3. 可选：添加加载工作区的功能 #

配套保存功能，你可以再加个加载按钮来恢复之前的工作区：

<button id="load-workspace" style="margin-left: 10px;">加载工作区</button>

document.getElementById('load-workspace').addEventListener('click', () => {
  // 从localStorage加载（如果是后端存储，就改成请求接口获取数据）
  const savedData = localStorage.getItem('jointjs-kitchensink-workspace');
  if (savedData) {
    // 先清空当前图形，再加载保存的数据
    graph.clear();
    graph.fromJSON(JSON.parse(savedData));
    alert('工作区已成功加载！');
  } else {
    alert('没有找到已保存的工作区');
  }
});

4. 针对Kitchensink示例的注意事项 #

• 确保能正确获取到graph实例：Kitchensink示例里的graph可能封装在模块或者特定作用域中，比如如果是用ES模块引入的，要确保变量能访问到。
• 自定义元素兼容：如果示例里用了自定义形状，只要这些元素已经正确注册到JointJS中，序列化和加载时会自动识别，不需要额外处理。

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