JointJS 版本 3 中的命名空间问题

Question

我正在尝试将遗留应用程序从 JointJS v2.2.1 转换为 v3.0.2。我遇到了其他人发现的错误：

未捕获的错误：dia.ElementView：需要标记。(joint.min.js:8)

一位乐于助人的人说：“请注意，在此设置中，您需要小心 dia.Paper 的 cellViewNamespace 和 dia.Graph 的 cellNamespace 选项。运行此代码段可以快速检查您是否正确设置了命名空间：

const cells = JSON.stringify(graph.toJSON());
graph.clear();
graph.fromJSON(JSON.parse(cells));

”

任何人都可以提供额外的帮助吗？我对 JointJS 的了解不足以解决这个问题，我也不太了解代码片段。

Answer 1

今天在 Vue 中使用 jointjs 时，我遇到了类似的错误，提示“需要标记”。我遵循代码，发现它假设“联合”存在于全局环境中。因此，我在代码中添加以下行，错误就消失了：

import * as joint from 'jointjs'
window.joint = joint

希望这有帮助。

Answer 2

如果joint全局环境中没有变量，则需要将shapes命名空间显式传递给图形（对于模型）和纸（对于视图）。

如果您不介意添加joint对window对象的引用，请参阅 @duanbw答案。

内置形状

import { shapes, dia } from 'jointjs'

const graph = new dia.Graph({ /* attributes of the graph */ }, { cellNamespace: shapes });
const paper = new dia.Paper({ cellViewNamespace: shapes });

自定义形状

如果您定义自己的形状，请不要忘记将其添加到命名空间（这也适用于自定义视图）。

const { standard, devs } = shapes;

// Custom Element Model
const MyRectangle = standard.Rectangle.define('myNamespace.Rectangle', {
  size: { width: 100, height: 100 },
  attrs: { body: { fill: 'red' }}
});

const graph = new dia.Graph({}, {
  cellNamespace: {
    // Optionally, cherry-pick namespaces/shapes you will use in your application
    standard,
    devs,
    myNamespace: { Rectangle: MyRectangle }
  }
});

const myRectangle = new MyRectangle();
myRectangle.addTo(graph);
const circle = new standard.Circle();
circle.addTo(graph);