Jointjs petri-net 图令牌不渲染！我能做些什么？答案

【问题标题】：Jointjs petri-net graph tokens do not render! What can i do?Jointjs petri-net 图令牌不渲染！我能做些什么？
【发布时间】：2021-11-22 16:56:54
【问题描述】：

目前我正在尝试将 Petrinet 生成器设置为 jupyter 小部件。因此，我使用的是 cookiecutter-ts-widget 模板，这意味着我正在 typescript 中实现前端逻辑。我对进展感到满意，一切正常，除了我的地点的令牌没有呈现。

这是我在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>

有没有人知道如何让新地方的初始化程序（即new pn.Place()）在内部添加TOKENS-标志？或者你知道我如何自己添加这个标志吗？

感谢任何帮助！

【问题讨论】：

标签： typescript token render jointjs petri-net

【解决方案1】：

实际上，在他们的 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 所指出的，这应该通过强制命名空间来解决。

【讨论】：