cmmnjs的前端实践：6、节点的移动和隐藏

在前端开发中，cmmnjs模型和bpmnjs模型有许多类似可参照的地方，本文聚焦于cmmnjs的使用，与bpmn中类似的点将不做赘述。主要说明cmmn和bpmn的不同之处和节点的相关操作。

示例：项目地址 ，基于vue实现，但cmmnjs相关逻辑与框架无关，可直接迁移至其它框架。

代码中涉及到功能模块的部分，将直接以对应模块名称代替，实际开发时需要通过cmmnModeler.get('模块名')获取。

一、移动节点

当需要移动节点位置时，可通过modeling.moveShape和modeling.moveElements方法来移动单个/多个节点

// 参数中的xy指与原位置的偏移
// 移动单个元素，参数为目标元素、位置偏移、新位置的双亲元素，其附属的条件元素不会跟随移动
modeling.moveShape(shape, { x: 20, y: 20 }, shape.parent);

// 移动多个元素位置，参数为元素数组、位置偏移，在元素存在附属时，可用此方法同步移动
modeling.moveElements([shape, ...shape.attachers], { x: 20, y: 20 });

需要注意的是，监听command相关事件时，也可以直接更改shape.x、shpae.y来移动节点的位置，但只会改变页面上显示的位置，实际位置不会被保存进xml文件的画布标签中。

二、隐藏节点

当需要隐藏节点时，如果仅更改自定义渲染方式/更改元素样式，此时元素虽然不在画布上显示，但还是可以被选中。

要完全隐藏元素，可以将元素的hidden属性设置为true。创建时可使用elementFactory.create方法可直接指定，可参考前文创建节点的相关代码。

如果不想在创建时一一指定，可以监听对应的command事件，在命令执行阶段设置hidden属性。

    // 元素与连线的创建命令事件，3000为优先级，默认优先级1000，监听后再创建元素会被隐藏
    eventBus.on('commandStack.shape.create.postExecute', 3000, function (e) {
        e.context.shape.hidden = true;
    });
    eventBus.on('commandStack.connection.create.postExecute', 3000, function (e) {
        e.context.connection.hidden = true;
    });

如果是节点创建后再隐藏，可以设置属性后通过graphicsFactory.update方法更新画布。

  // 获取所有元素
  const allElements = elementRegistry.getAll();
  allElements.forEach((element) => {
    element.hidden = true;
    // 更新元素表示
    const gfx = elementRegistry.getGraphics(element, false);
    // 参数，shape/connetion、目标节点、对应表示
    graphicsFactory.update("shape", element, gfx);
  });

需要注意的是，hidden属性本身不会被保存进xml文件中，所以导入xml文件时，节点仍然会处于显示状态。