NameSpace Issue In JointJS Version 3
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: Uncaught Error: dia.ElementView: markup required. (joint.min.js:8) A
Solution 1:
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).
If you do not mind adding joint
reference to the window
object see @duanbw answer.
Built-in shapes
import { shapes, dia } from 'jointjs'
const graph = new dia.Graph({ /* attributes of the graph */ }, { cellNamespace: shapes });
const paper = new dia.Paper({ cellViewNamespace: shapes });
Custom 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);
Solution 2:
I met a similar error saying 'markup required' just today when using jointjs with Vue. I followed the code and found that it is assuming 'joint' is present in global environment. So I add the following line in my code, and the error is gone:
import * as joint from 'jointjs'
window.joint = joint
Hopefully this helps.
Post a Comment for "NameSpace Issue In JointJS Version 3"