JointJS版本3中的NameSpace问题 [英] NameSpace Issue in JointJS version 3

问题描述

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

I am trying to convert a legacy app from JointJS v2.2.1 to v3.0.2. I’m hitting an error others have found:

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

Uncaught Error: dia.ElementView: markup required. (joint.min.js:8)

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

A helpful person said: "Please note you need to be careful with the cellViewNamespace for the dia.Paper and cellNamespace option for the dia.Graph in this setup. Running this snippet is a quick check you've set up the namespaces correctly:

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

"

任何人都可以提供其他帮助吗?我对JointJS的了解不足，无法解决此问题，并且我不太了解代码段.

Can anyone offer additional help? I don’t know enough about JointJS to resolve this issue and I don’t really understand the code snippet.

推荐答案

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

If there is no joint variable in the global environment, you need to pass the shapes namespace explicitly to the graph (for models) and the paper (for views).

如果您不介意为window对象添加joint引用，请参见@duanbw 答案.

If you do not mind adding joint reference to the window object see @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 });

自定义形状

如果您定义自己的形状，请不要忘记将其也添加到名称空间中((这也适用于自定义视图).

If you define your own shapes do not forget to add it to the namespace as well (this also apply for the custom views).

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问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！