Custom Connection

Developers
1

I need to create a custom connection, this connection should have a similar appearance to a pipe or at least be thicker, I also need this connection to have some attributes that represent the length and width of the pipe, is it possible to create something like that? Is there any starting code for creating a custom connection? This connection should be displayed in my custom components palette along with the default connection. Thanks.

2

This is my code:

// tubo-connection.js

import inherits from 'inherits';
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
import { assign } from 'min-dash';

export default function TuboConnection(eventBus) {
  CommandInterceptor.call(this, eventBus);

  this.preExecute(["connection.create"], function(context) {
    var connection = context.connection;

    if (connection.type === 'custom:TuboConnection') {
      assign(connection, {
        businessObject: {
          $type: 'custom:TuboConnection'
        }
      });
    }
  }, true);
}

inherits(TuboConnection, CommandInterceptor);

TuboConnection.$inject = ['eventBus'];

Renderer:

import inherits from 'inherits';
import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import { is } from 'bpmn-js/lib/util/ModelUtil';
import { createLine } from 'diagram-js/lib/util/RenderUtil';

const HIGH_PRIORITY = 2000;

export default function CustomTuboRenderer(eventBus, bpmnRenderer) {
  BaseRenderer.call(this, eventBus, HIGH_PRIORITY);

  this.bpmnRenderer = bpmnRenderer;
}

inherits(CustomTuboRenderer, BaseRenderer);

CustomTuboRenderer.prototype.canRender = function(element) {
  return is(element, 'tubo:TuboConnection');
};

CustomTuboRenderer.prototype.drawConnection = function(visuals, element) {
  if (!element.waypoints || element.waypoints.length === 0) {
    // Defina waypoints padrão se não estiverem definidos
    element.waypoints = [
      { x: element.x, y: element.y },
      { x: element.x + 100, y: element.y + 100 }
    ];
  }

  const pathData = createLine(element.waypoints);
  const attrs = {
    stroke: '#00ff00', // Cor da linha
    strokeWidth: 5, // Espessura da linha
    strokeDasharray: '5,5' // Estilo tracejado (opcional)
  };
  return visuals.path(pathData).attr(attrs);
};

CustomTuboRenderer.prototype.getConnectionPath = function(connection) {
  return this.bpmnRenderer.getConnectionPath(connection);
};

CustomTuboRenderer.prototype.drawShape = function(p, element) {
  if (this.canRender(element)) {
    return this.drawConnection(p, element);
  }
  return this.bpmnRenderer.drawShape(p, element);
};

CustomTuboRenderer.$inject = ['eventBus', 'bpmnRenderer'];

moddle:


{
  "name": "Tubo",
  "uri": "http://tubo",
  "prefix": "tubo",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "TuboConnection",
      "superClass": [
        "bpmn:SequenceFlow"
      ],
      "properties": [
        {
          "name": "diameter",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "length",
          "isAttr": true,
          "type": "String"
        }
      ]
    }
  ]
}

snippet palette:

 function createCustomConnection(event) {
      const businessObject = moddle.create('tubo:TuboConnection', {
        diameter: '10mm',
        length: '100m'
      });
  
      const customConnection = elementFactory.createConnection({
        type: 'tubo:TuboConnection',
        businessObject,
       
      });
  
      create.start(event, customConnection);
    }
  
  'create-custom-connection': {
          group: 'model',
          className: 'bpmn-icon-connection',
          title: 'Create a custom tube connection',
          action: {
            dragstart: createCustomConnection,
            click: createCustomConnection
          }
        },

...
 additionalModules: [
            CustomTuboRenderer,


 moddleExtensions: {
        tubo: tuboExtension

...

I’ve been trying to implement this component for days now, with each step a new problem arises, at this point I get the error below:

Any help is welcome, thanks in advance.

saneng.mjs:380 Ocorreu um erro:  
TypeError: visuals.path is not a function
    at CustomTuboRenderer.drawConnection (CustomTuboRenderer.js:35:18)
    at CustomTuboRenderer.drawShape (CustomTuboRenderer.js:44:17)
    at BaseRenderer.js:30:21
    at invokeFunction (EventBus.js:614:13)
    at EventBus._invokeListener (EventBus.js:457:19)
    at EventBus._invokeListeners (EventBus.js:431:24)
    at EventBus.fire (EventBus.js:379:24)
    at GraphicsFactory.drawShape (GraphicsFactory.js:212:19)
    at CreatePreview.js:61:25
    at Array.forEach (<anonymous>)
3

I made several modifications, created a custom rules, nothing works, the closest I got to a positive result was that the system’s default sequenceFlow changed color and thickness, but the connection The custom one I created called tuboConnection never works, Create a new connection like I’m trying to do with tubo:tubo Connection is it really possible ?