Accessing Node Data to use for Link Label

[jduncanRadBlue]

Does anyone know how to label the link with data that sits inside the node data (node data was attached upon creation of node)? When the node is created, I attach a JSON object to the node for hopes of being able to access later for purposes of posting an API call. When the node event for onDrop is called, I can see the data being logged in the event.dataTrasfer.getData() call, but on the linksUpdated event, I can't find said data?

I can't seem to dig through linksUpdated event to find the node data?

diagramEngine.getModel().registerListener({
              linksUpdated: (event) => {console.log(event)}
            });

Full BodyWidget Code:

import * as React from 'react';
import PropTypes from 'prop-types';
import * as _ from 'lodash';
import '../styles/App.css';
import createEngine, {
  DiagramModel,
  DefaultNodeModel,
  DefaultLinkModel,
} from '@projectstorm/react-diagrams';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import styled from '@emotion/styled';
import TrayWidget from './TrayWidget';

export default function BodyWidget() {
  const diagramEngine = createEngine();
  const activeModel = new DiagramModel();
  diagramEngine.setModel(activeModel);

  const [engine, setEngine] = React.useState(diagramEngine);

  const handleUpdateEngine = (engine) => {
    setEngine(engine);
  };

  const style = {
    Body: {
      flexGrow: 1,
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100%',
    },
    Header: {
      display: 'flex',
      background: 'rgb(30, 30, 30)',
      flexGrow: 0,
      flexShrink: 0,
      color: 'white',
      fontFamily: 'Helvetica, Arial, sans-serif',
      padding: '10px',
      alignItems: 'center',
    },
    Content: {
      display: 'flex',
      flexGrow: 1,
    },
    Layer: {
      position: 'relative',
      flexGrow: 1,
      height: '100vh',
      width: '100%',
      background: 'rgb(30, 30, 30)',
    },
  };

  return (
    <div style={style.Body}>
      <div style={style.Header}>
        <div className="title">DnD demo</div>
      </div>
      <div style={style.Content}>
        <TrayWidget applications={applicationDefinition} />
        <div
          style={style.Layer}
          onDrop={(event) => {
            const data = JSON.parse(
              event.dataTransfer.getData('storm-diagram-node')
            );

            const nodesCount = _.keys(diagramEngine.getModel().getNodes())
              .length;
            let node = null;
            console.log(data);
            if (data.nodeType === 'in') {
              node = new DefaultNodeModel(
                data.name,
                'rgb(192,255,0)'
              );
              node.addInPort('In');
            } else {
              node = new DefaultNodeModel(
                data.name,
                'rgb(0,192,255)'
              );
              node.addOutPort('Out');
            }
            const point = diagramEngine.getRelativeMousePoint(event);
            node.setPosition(point);

            diagramEngine.getModel().addNode(node);
            diagramEngine.getModel().registerListener({
              linksUpdated: (event2) => {console.log(event2)}
            });
            handleUpdateEngine(diagramEngine);
            diagramEngine.repaintCanvas();
          }}
          onDragOver={(event) => {
            console.log(event)
            event.preventDefault();
          }}
        >
          <CanvasWidget className="canvas" engine={engine} />
        </div>
      </div>
    </div>
  );
}

[jduncanRadBlue]

linksUpdated only seems to fire when a link is started. Do you know how to get event information (connected nodes, link, etc) after a link is created?

[oscarkwan]

I have the same question!

[jduncanRadBlue]

@oscarkwan did you find out how to do this?

[dylanvorster]

Hard to explain how to solve this but there are several ways. One way is you can extend the core models and then fire your own custom events which include information about the link/node/entity that changed and then setup these listeners as the graph is mutated.