How to implement edges creation?

[matheusccastroo]

Hello!

I'm using the node-json-vscode template to start with my project. This template already implements resizing, a type of node and node position. However, it doesn't implement linking the nodes (creating edges between the nodes).
Upon reading the documentation and watching some presentations about the GSLP I saw that I need to implement a OperationHandler for CreateEdgeOperation - which I did. There I edit the source model (the tasks default one) and added a property of linkedTo, which holds the targetElementId from the operation (all of that inside the execute method of the handler).

Following that, I updated the GModelFactory to create the edges when the task have the field I just added.

createModel():void {
   ...
   const edges = taskList.tasks.map(task => task.linkedTo && this.createEdge(task)).filter(Boolean);
   const newRoot = GGraph.builder().id(taskList.id).addChildren(childNodes).addChildren(edges).build();
   ...
}

createEdge(task: Task): GEdge {
      return GEdge.builder().sourceId(task.id).targetId(task.linkedTo).build()
}

But when I start both the client and server it doesn't seem to work. On the palette I get the Edges menu (was there already), but there's nothing to click there. What am I missing?

I think I need to create the trigger on the client side, but I have no idea how to do this. I checked the code from the workflow template but wasn't able to figure it out too.

[CamilleLetavernier]

Hey,

Did you add a list of edgeTypeHints in your Diagram Configuration? This looks like this (Copied from the Workflow example):

get edgeTypeHints(): EdgeTypeHint[] {
    return [
        createDefaultEdgeTypeHint(DefaultTypes.EDGE),
        {
            elementTypeId: types.WEIGHTED_EDGE,
            repositionable: true,
            deletable: true,
            routable: true,
            sourceElementTypeIds: [types.DECISION_NODE],
            targetElementTypeIds: [types.MANUAL_TASK, types.AUTOMATED_TASK, types.FORK_NODE, types.JOIN_NODE]
        }
    ];
}

Type hints are used to indicate what can be created (or reparented/reconnected/...) where (Parent/Child relationship for nodes, source/target relationship for edges). The palette content is derived from these hints.

[planger]

But when I start both the client and server it doesn't seem to work. On the palette I get the Edges menu (was there already), but there's nothing to click there. What am I missing?

If the palette entry for your edge type is missing, you also need to add the palette entry. This can either be done

1. by using the default palette item provider, which creates an entry for all CreateNodeOperationHandler and CreateEdgeOperationHander that are registered in the model and create&bind an CreateEdgeOperationHandler subclass for the edge, similar to how it is done in the workflow example, see also https://github.com/eclipse-glsp/glsp-server-node/blob/main/examples/workflow-server/src/common/workflow-diagram-module.ts#L84
2. or binding an explicit ToolPaletteItemProvider by overwriting bindToolPaletteItemProvider