SVG Rendering Order

[johnegnatis]

Is there any way to enforce the order in which the repaintCanvas() paints the elements (links and nodes)? I am using two link factories, one is the default link factory and one I have extended. What I want to do it ensure that the extended link factory's elements are painted first, then the node factory's element, and finally the default link element. This way I can create a sudo-z-index, having the extended link elements painted under the nodes, and the default link elements painted over the nodes. What is the default behavior of repaint canvas?

[Flowwl]

@johnegnatis I succeeded to do this by creating a new layer and filtering the nodes in the right layer. You can do the same with link layers

Here what you can do :

• Create your own LinkLayer by extending LinkLayerModel

• Override the DiagramModel.ts class

  https://github.com/projectstorm/react-diagrams/blob/2a810ca2d3bc9e632ad52eeee6487006ac70ffd7/packages/react-diagrams-core/src/models/DiagramModel.ts#L51-L56

  so that it keeps your custom layer

  • In addLink you differentiate your link type and add it to the right layer https://github.com/projectstorm/react-diagrams/blob/2a810ca2d3bc9e632ad52eeee6487006ac70ffd7/packages/react-diagrams-core/src/models/DiagramModel.ts#L116

  Here what I did for nodes :

  addNode(node: LibNodeModel): LibNodeModel {
  if (node.getType() === NODE_TYPES.GROUP_NODE) {
    this.getActiveBackNodeLayer().addModel(node);
  } else {
    this.getActiveFrontNodeLayer().addModel(node);
  }
  
  this.fireEvent({ node, isCreated: true }, "nodesUpdated");
  return node;
  }

  You overwrite :

CanvasWidget.tsx so you can call your own TransformLayerWidget

https://github.com/projectstorm/react-diagrams/blob/2a810ca2d3bc9e632ad52eeee6487006ac70ffd7/packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx#L61-L65

And add the z-index depending on the layer.getType()

and that's it

Hope it helps

[johnegnatis]

This did work! Thank you so much for taking the time and figuring this out!