Adding Link in Model ChangedEvent

@estesbubba wrote:

I have a scenario when adding a node to the diagram where I also need to add a self-looping link to that node. I need to do that when the Model ChangedEvent fires and propertyName is ‘CommittedTransation’. I iterate over the modified nodes and create a link if it’s needed. I’m not sure the best practice to do this?

If I do a setTimeout() it works but seems hokey.
setTimeout(() => model.addLinkData(buildLinkData(transitionData)), 0);

If I use a transaction the Chrome tab locks up maybe in infinite loop?

          model.startTransaction('addLink');
          model.addLinkData(buildLinkData(transitionData));
          model.commitTransaction('addLink');

Here it is in the context of the code

  updateNodes = event => {
    const {
      formArrayPush,
      formArrayRemove,
      formChange,
      form,
      formValues: { nodes }
    } = this.props;
    const { model } = event;
    const changes = JSON.parse(model.toIncrementalJson(event));
    const modified = changes.modifiedNodeData || [];
    const inserted = changes.insertedNodeKeys || [];
    const removed = changes.removedNodeKeys || [];

    modified.forEach(item => {
      if (inserted.includes(item.id)) {
        let data = { ...nodeModel };
        const { transition } = item;
        const idx = Math.abs(item.id);
        const goData = model.findNodeDataForKey(item.id);

        // We are part of an undo/redo
        if (model.modelData._removedNodes[item.id]) {
          data = model.modelData._removedNodes[item.id];
          delete model.modelData._removedNodes[item.id];
        } else {
          data = {
            ...this.setNodeData(item, data, idx),
            id: item.id,
            type: item.category,
            locationX: item.location.x,
            locationY: item.location.y,
            width: item.width,
            height: item.height
          };
        }

        formArrayPush(form, 'nodes', data);
        if (transition) {
          const transitionData = {
            ...transition,
            fromNodeId: data.id,
            toNodeId: data.id
          };

          // Works but maybe bad practice?
          setTimeout(() => model.addLinkData(buildLinkData(transitionData)), 0);

          // Locks up Chrome tab maybe infinite loop?
          model.startTransaction('addLink');
          model.addLinkData(buildLinkData(transitionData));
          model.commitTransaction('addLink');
        }
        Object.assign(goData, buildNodeData(data));
        model.updateTargetBindings(goData);
      }
...

What would be the recommended way to add a link in a Model ChangedEvent?

Posts: 2

Participants: 2

Read full topic