Jointjs petri-net 图标记不呈现!我能做什么?
Jointjs petri-net graph tokens do not render! What can i do?
目前我正在尝试将 Petrinet 生成器设置为 jupyter 小部件。因此,我正在使用 cookiecutter-ts-widget 模板,这意味着我正在用打字稿实现前端逻辑。我对进展感到满意,一切正常,除了我的地方的令牌没有呈现。
以下是我在 joint.dia.Paper
上创建示例的方式:
PetriView.graph = new joint.dia.Graph();
PetriView.pn = joint.shapes.pn;
PetriView.paper = new joint.dia.Paper({
el: document.createElement("div"),
width: this.width,
height: this.height,
gridSize: PetriView.gridSize,
defaultAnchor: { name: 'perpendicular' },
defaultConnectionPoint: { name: 'boundary' },
model: PetriView.graph,
linkPinning: false, // prevent dangling links
interactive: function() { return true }, // make cells draggable
});
private firstExample() {
this.clearAll();
// Define Places
var pReady = new PetriView.pn.Place({
position: { x: 140, y: 50 },
attrs: {
'.label': {
'text': 'ready',
'fill': '#7c68fc' },
'.root': {
'stroke': '#7c68fc',
'stroke-width': 3,
},
'.alot > text': {
'fill': '#fe854c',
'font-family': 'Courier New',
'font-size': 20,
'font-weight': 'bold',
'ref-x': 0.5,
'ref-y': 0.5,
'y-alignment': -0.5,
'transform': null as any
},
'.tokens > circle': {
'fill': '#7a7e9b'
}
},
'tokens': 1,
});
var pIdle = pReady.clone()
.attr('.label/text', 'idle')
.position(140, 260)
.set('tokens', 2);
*[...]*
// Define Transitions
var tProduce = new PetriView.pn.Transition({
size: { width: 30, height: 40 },
position: { x: 50, y: 160 },
attrs: {
'.label': {
'text': 'produce',
'fill': '#fe854f'
},
'.root': {
'fill': '#9586fd',
'stroke': '#7c68fc'
},
'rect': {
width: 12,
height: 50,
fill: '#000000',
stroke: '#000000',
"stroke-width": 3,
},
}
});
var tSend = tProduce.clone()
.attr('.label/text', 'send')
.position(270, 160);
*[...]*
// add cells to graph and create links
PetriView.graph.addCell([pReady, pIdle, buffer, cAccepted, cReady, tProduce, tSend, tAccept, tConsume]);
PetriView.graph.addCell([
PetriView.link(tProduce, pReady), PetriView.link(pReady, tSend), PetriView.link(tSend, pIdle), PetriView.link(pIdle, tProduce),
PetriView.link(tSend, buffer), PetriView.link(buffer, tAccept), PetriView.link(tAccept, cAccepted),
PetriView.link(cAccepted, tConsume), PetriView.link(tConsume, cReady), PetriView.link(cReady, tAccept)
]);
return PetriView.graph
}
通过控制台日志记录,您可以看到标记在各自的单元格中(例如标记:1),但即使整个图形呈现得非常好,也不会呈现。
此外,我注意到 pn.Place
单元格仅包含以下标志:
{PORTS: 16, RENDER: 64, RESIZE: 8, ROTATE: 32, TOOLS: 4, TRANSLATE: 2, UPDATE: 1}
根据我的理解,还应该有一个 TOKENS
标志,它会被选中,最后以动态 HTML.
的形式在后台添加令牌
包含标记的 Cell 的正确示例:
<circle class="root" id="v-8" r="25" fill="#ffffff" stroke="#7c68fc" transform="translate(25, 25)" stroke-width="3"></circle>
<g class="tokens two">
<circle id="v-10" fill="#7a7e9b" r="5" transform="translate(19, 25)"></circle>
<circle id="v-11" fill="#7a7e9b" r="5" transform="translate(31, 25)"></circle>
</g>
与我的单元格(包含未呈现的标记)相比:
<circle class="root" id="v-7" r="25" fill="#ffffff" stroke="red" transform="translate(25, 25)" stroke-width="3"></circle>
<g class="tokens"></g>
有没有人知道如何获取新 Place(即 new pn.Place()
)的初始值设定项以在内部添加 TOKENS
标志?
或者你知道我如何自己添加这个标志吗?
感谢任何帮助!
实际上,在他们的 GitHub 上发布这个问题后,我收到了一个答案,结果证明是解决方案。您需要为图形指定 cellNamespace 并为纸张对象指定 cellViewNamespace。
看这里:https://github.com/clientIO/joint/issues/1579
const namespace = joint.shapes; // e.g. { standard: { Rectangle: RectangleElementClass }}
const graph = new joint.dia.Graph({ /* attributes of the graph */ }, { cellNamespace: namespace });
const paper = new joint.dia.Paper({ cellViewNamespace: namespace });
正如 kumilingus 所指出的,这应该通过强制命名空间在 jointjs v4 的发布中得到解决。
目前我正在尝试将 Petrinet 生成器设置为 jupyter 小部件。因此,我正在使用 cookiecutter-ts-widget 模板,这意味着我正在用打字稿实现前端逻辑。我对进展感到满意,一切正常,除了我的地方的令牌没有呈现。
以下是我在 joint.dia.Paper
上创建示例的方式:
PetriView.graph = new joint.dia.Graph();
PetriView.pn = joint.shapes.pn;
PetriView.paper = new joint.dia.Paper({
el: document.createElement("div"),
width: this.width,
height: this.height,
gridSize: PetriView.gridSize,
defaultAnchor: { name: 'perpendicular' },
defaultConnectionPoint: { name: 'boundary' },
model: PetriView.graph,
linkPinning: false, // prevent dangling links
interactive: function() { return true }, // make cells draggable
});
private firstExample() {
this.clearAll();
// Define Places
var pReady = new PetriView.pn.Place({
position: { x: 140, y: 50 },
attrs: {
'.label': {
'text': 'ready',
'fill': '#7c68fc' },
'.root': {
'stroke': '#7c68fc',
'stroke-width': 3,
},
'.alot > text': {
'fill': '#fe854c',
'font-family': 'Courier New',
'font-size': 20,
'font-weight': 'bold',
'ref-x': 0.5,
'ref-y': 0.5,
'y-alignment': -0.5,
'transform': null as any
},
'.tokens > circle': {
'fill': '#7a7e9b'
}
},
'tokens': 1,
});
var pIdle = pReady.clone()
.attr('.label/text', 'idle')
.position(140, 260)
.set('tokens', 2);
*[...]*
// Define Transitions
var tProduce = new PetriView.pn.Transition({
size: { width: 30, height: 40 },
position: { x: 50, y: 160 },
attrs: {
'.label': {
'text': 'produce',
'fill': '#fe854f'
},
'.root': {
'fill': '#9586fd',
'stroke': '#7c68fc'
},
'rect': {
width: 12,
height: 50,
fill: '#000000',
stroke: '#000000',
"stroke-width": 3,
},
}
});
var tSend = tProduce.clone()
.attr('.label/text', 'send')
.position(270, 160);
*[...]*
// add cells to graph and create links
PetriView.graph.addCell([pReady, pIdle, buffer, cAccepted, cReady, tProduce, tSend, tAccept, tConsume]);
PetriView.graph.addCell([
PetriView.link(tProduce, pReady), PetriView.link(pReady, tSend), PetriView.link(tSend, pIdle), PetriView.link(pIdle, tProduce),
PetriView.link(tSend, buffer), PetriView.link(buffer, tAccept), PetriView.link(tAccept, cAccepted),
PetriView.link(cAccepted, tConsume), PetriView.link(tConsume, cReady), PetriView.link(cReady, tAccept)
]);
return PetriView.graph
}
通过控制台日志记录,您可以看到标记在各自的单元格中(例如标记:1),但即使整个图形呈现得非常好,也不会呈现。
此外,我注意到 pn.Place
单元格仅包含以下标志:
{PORTS: 16, RENDER: 64, RESIZE: 8, ROTATE: 32, TOOLS: 4, TRANSLATE: 2, UPDATE: 1}
根据我的理解,还应该有一个 TOKENS
标志,它会被选中,最后以动态 HTML.
包含标记的 Cell 的正确示例:
<circle class="root" id="v-8" r="25" fill="#ffffff" stroke="#7c68fc" transform="translate(25, 25)" stroke-width="3"></circle>
<g class="tokens two">
<circle id="v-10" fill="#7a7e9b" r="5" transform="translate(19, 25)"></circle>
<circle id="v-11" fill="#7a7e9b" r="5" transform="translate(31, 25)"></circle>
</g>
与我的单元格(包含未呈现的标记)相比:
<circle class="root" id="v-7" r="25" fill="#ffffff" stroke="red" transform="translate(25, 25)" stroke-width="3"></circle>
<g class="tokens"></g>
有没有人知道如何获取新 Place(即 new pn.Place()
)的初始值设定项以在内部添加 TOKENS
标志?
或者你知道我如何自己添加这个标志吗?
感谢任何帮助!
实际上,在他们的 GitHub 上发布这个问题后,我收到了一个答案,结果证明是解决方案。您需要为图形指定 cellNamespace 并为纸张对象指定 cellViewNamespace。
看这里:https://github.com/clientIO/joint/issues/1579
const namespace = joint.shapes; // e.g. { standard: { Rectangle: RectangleElementClass }}
const graph = new joint.dia.Graph({ /* attributes of the graph */ }, { cellNamespace: namespace });
const paper = new joint.dia.Paper({ cellViewNamespace: namespace });
正如 kumilingus 所指出的,这应该通过强制命名空间在 jointjs v4 的发布中得到解决。