Diagram is null in extensions

GoJS
#1

Hi , I wanna use LinkLabelOnPathDraggingTool in my react-gojs-project but when I try draging linkLabel I get error diagram is null.

I read documentation and code LinkLabelOnPathDraggingTool. It is child of go.Tool. go.Tool has diagram property, but I did not find it definition neither go.Tool nor LinkLabelOnPathDraggingTool.

I use next code

import * as go from 'gojs';
import { LinkLabelOnPathDraggingTool } from 'gojs/extensionsJSM/LinkLabelOnPathDraggingTool';

const $ = go.GraphObject.make;

const MainDiagram = $(
  go.Diagram,
  {
    'undoManager.isEnabled': true,
    contentAlignment: go.Spot.Center,
    model: $(go.GraphLinksModel, { linkKeyProperty: 'key' }),
  },
);

MainDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelOnPathDraggingTool());
#2

The extensionsJSM subdirectory holds code that is compiled to produce ES modules and to import ../release/go-module.js. But your import statement is loading the GoJS library that is a UMD module. Which module system did you want to use?

You cannot load the any library twice because that could cause very subtle errors.

#3

such as

import * as go from 'gojs';
#4

You didn’t answer which module system you wanted to use.

Better yet, copy the extension file into your project and just treat it like any other code in your project, compiled and bundled and imported however you like.

#5

If I copy extension LinkLabelOnPathDraggingTool in my directory, how I can define diagram field for LinkLabelOnPathDraggingTool. I cannot find how to define it

for example:
LinkLabelOnPathDraggingTool has findLabel() method and next code
const diagram = this.diagram;
this.diagram = is not exist, because code this.diagram = ANY_DIAGRAM is lost.

OR I must add new parameter in constructor

#6

The way that you installed the tool:

MainDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelOnPathDraggingTool());

should be sufficient to make sure that the system sets Tool.diagram on your new tool by the time it is used.

Or are you programmatically calling LinkLabelOnPathDraggingTool.findLabel before the diagram has been initialized?

The samples Draggable Link Labels That Stay On Path and Draggable Link Labels That Stay On Path seem to be able to call findLabel without error.

#7

I use only

MainDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelOnPathDraggingTool());

When I try dragging linkLablel debbuger return error.

My diagram code

import * as go from 'gojs';
import { LinkLabelOnPathDraggingTool } from 'gojs/extensionsJSM/LinkLabelOnPathDraggingTool';
import initMainNodeTemplate from '../Node/templates/MainNodeTemplate';
import initMainLinkTemplate from '../Link/templates/MainLinkTemplate';

const $ = go.GraphObject.make;

const MainDiagram = $(
  go.Diagram,
  {
    'undoManager.isEnabled': true,
    contentAlignment: go.Spot.Center,
    model: $(go.GraphLinksModel, { linkKeyProperty: 'key' }),
  },
);

MainDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelOnPathDraggingTool());

export function initDiagram(settings) {

  const mainNodeTemplate = initMainNodeTemplate({ });

  const mainLinkTemplate = initMainLinkTemplate({  });

  MainDiagram.nodeTemplate = mainNodeTemplate;
  MainDiagram.linkTemplate = mainLinkTemplate;

  return MainDiagram;
}


export function getDiagram() {
  return MainDiagram;
}

window.__diagram__ = MainDiagram;

export default MainDiagram;
#8

Why isn’t that line to create the Diagram and install the tool in your initDiagram method???

#9

Do you mean that, why

const MainDiagram = $(
  go.Diagram,
  {
    'undoManager.isEnabled': true,
    contentAlignment: go.Spot.Center,
    model: $(go.GraphLinksModel, { linkKeyProperty: 'key' }),
  },
);

not in initDiagram?

Because I wanna get access to MainDiagram in other modules

#10

That means you can’t have more than one instance of your component. OK.

Did you change the import reference not to use the ES6 module but the UMD module for the extension? As I pointed out earlier, that is a problem. Make sure all of your import statements import exactly the same GoJS library file.

#11

I did not change reference

#12

Changing path is not resolve problem.

#13

OK, you’ll need to debug that then. You already have three samples demonstrating correct usage. The latter two also demonstrate using TypeScript, although it isn’t clear to me whether you are using TypeScript.

But we still recommend that you copy the extension file into your project and update its import statement accordingly.

#14

Thanks for help )) I will try to resolve it))

#15

I resolve problem by updating gojs packages