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变量，则需要将图形名称空间明确传递给图形（对于模型）和纸张（对于视图）。

如果您不介意向joint对象添加window引用，请参见@duanbw answer。

内置形状

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);

JointJS版本3中的NameSpace问题

2 个答案: