JointJS 2.0.0及2.0.1版本PetriNet插件库所令牌不渲染问题咨询

刚踩过这个坑！确认从JointJS 2.0.0版本开始（包括2.0.1），PetriNet插件的库所（Place）组件完全没法正常渲染令牌（Tokens）——我试过用官网的演示Demo代码切换到最新版本，结果一样看不到令牌；但切回JointJS 1.1.1版本，令牌就能立刻正常显示出来。

举个实际例子，下面这段代码本应创建一个带有1个令牌的ready库所，但在2.0.x版本中运行时，令牌完全不会被渲染：

var pReady = new pn.Place({ 
  position: {x: 140, y: 50}, 
  attrs: { 
    '.label': {text: 'ready', fill: '#7c68fc'}, 
    '.root': {stroke: '#9586fd', 'stroke-width': 2} 
  },
  tokens: 1 // 该配置在2.0.x版本完全失效
});

问题原因分析 #

翻了JointJS 2.0的版本变更记录后发现，这个版本对PetriNet插件的DOM结构和渲染逻辑做了调整，原来绑定tokens属性的渲染节点被移除，或者对应的选择器发生了变化，导致插件无法识别并渲染令牌。

临时解决办法 #

目前可以通过两种方式绕过这个问题：

1. 手动添加令牌元素

如果只是单个库所需要处理，创建Place实例后，手动向库所的主体容器中添加令牌的SVG元素即可：

// 创建库所实例
var pReady = new pn.Place({ 
  position: {x: 140, y: 50}, 
  attrs: { 
    '.label': {text: 'ready', fill: '#7c68fc'}, 
    '.root': {stroke: '#9586fd', 'stroke-width': 2} 
  },
  tokens: 1
});

// 手动添加单个令牌（位置可根据库所尺寸调整）
var token = V('circle', {
  r: 8,
  fill: '#7c68fc',
  cx: 20,
  cy: 20
});
pReady.find('.place-body').append(token);

2. 重写Place视图的渲染逻辑

如果需要批量处理多个库所，可以重写PetriNet插件中Place视图的render方法，确保令牌被正确渲染：

// 重写Place的视图渲染逻辑
pn.PlaceView = joint.dia.ElementView.extend({
  render: function() {
    // 先执行父类的基础渲染逻辑
    joint.dia.ElementView.prototype.render.apply(this, arguments);
    
    // 获取令牌数量，默认设为0
    var tokenCount = this.model.get('tokens') || 0;
    var bodyContainer = this.$el.find('.place-body');
    bodyContainer.empty(); // 清空原有令牌避免重复渲染
    
    // 用简单网格布局循环创建令牌（可按需调整排列逻辑）
    for (var i = 0; i < tokenCount; i++) {
      var token = V('circle', { r: 8, fill: '#7c68fc' });
      var col = i % 3;
      var row = Math.floor(i / 3);
      token.attr({ 
        cx: 20 + col * 15, 
        cy: 20 + row * 15 
      });
      bodyContainer.append(token);
    }
    
    return this;
  }
});

后续建议 #

建议关注JointJS官方的更新动态，看是否会在后续版本中修复这个问题；同时可以检查官方文档，确认2.0版本是否引入了新的令牌配置API（可能文档更新滞后于代码变更）。

内容的提问来源于stack exchange，提问作者Josch