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

【问题标题】：NameSpace Issue in JointJS version 3JointJS 版本 3 中的命名空间问题
【发布时间】：2019-11-30 18:41:52
【问题描述】：

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

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

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

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

”

谁能提供额外的帮助？对JointJS了解不够，无法解决这个问题，也不是很懂sn-p的代码。

【问题讨论】：

标签： javascript namespaces jointjs

【解决方案1】：

如果全局环境中没有 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与像webpack这样的构建环境一起使用时，这不是很明显并且很常见的问题。

【解决方案2】：

我今天在使用 Jointjs 和 Vue 时遇到了一个类似的错误，说“需要标记”。我按照代码发现它假设“关节”存在于全球环境中。所以我在我的代码中添加了以下行，错误就消失了：

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

希望这会有所帮助。

【讨论】：