Making minecraft'advancement graph

[EscanorTargaryen]

Hi! I am trying to rewrite my tool (https://escanortargaryen.dev/UltimateAdvancementGenerator/) using maxGraph. The problem is that I haven't found any guides on how best to use your library and so far I am having difficulties. Do you think it is feasible to apply your library to my case?

These are some aspects I need and have not understood how to implement with maxGraph:

• I need total customisation of the vertices:
  • the vertex image can change
  • I need to put an image on top of the vertex and it can change
• change the svg of the edge (although I could actually use a white line with a black border, can this be done? How do I change the thickness?)
• edges cannot be changed by users but they update if I change the vertex position

[tbouffard]

Hi,
The documentation has not be adapted after the mxGraph migration so it is currently incomplete.
You can find more information in this comment: #250 (comment)
In addition, you can read the mxGraph documentation to understand the concepts: https://jgraph.github.io/mxgraph/. Be aware that the mxGraph code must be adapted to work with maxGraph.
The most valuable documentation for you are:

• https://jgraph.github.io/mxgraph/docs/tutorial.html
• https://jgraph.github.io/mxgraph/docs/manual.html

About your particular questions, everything is possible

• "change the svg of the edge":
  • this can be done by setting the style of the edge when inserting it. The properties that can be used are: edgeStyle, strokeColor and strokeWidth. See https://github.com/maxGraph/maxGraph/blob/v0.4.1/packages/core/src/types.ts#L59
  • This is also possible to configure a global "style" for reuse in all edges
• "edges cannot be changed by users but they update if I change the vertex position": should be possible by calling a set method provided by https://github.com/maxGraph/maxGraph/blob/v0.4.1/packages/core/src/view/mixins/EdgeMixin.ts
• "I need total customisation of the vertices" : have a look at ImageShape

[EscanorTargaryen]

Thank you very much for your help, it was very helpful!
Can I also have the html you used to make this https://github.com/maxGraph/maxGraph/blob/development/packages/docs/images/maxgraph_demo.gif ?
Because I have no idea how to do that I can move the whole graph by dragging the background

[tbouffard]

You can have a look at https://github.com/maxGraph/maxGraph/blob/v0.4.1/packages/ts-example/index.html
The code that add the "panning" support is:

graph.setPanning(true); // Use mouse right button for panning

I've got some improvements in mind to make README clearer on this subject.
This has been discussed in #250 (comment).

[EscanorTargaryen]

Reading through various threads here on git I saw that serialisation with xml is not yet ready, if I understand correctly. When will it be more or less available? Also is there any way to add extra info to when exporting, such as a title...?

Otherwise, if I wanted to already proceed with serialisation, I can directly transform the graph variable into json, would that make sense?

[tbouffard]

You are right: the XML import/export is not working. It is something that comes from mxGraph and which doesn't work in maxGraph for various reasons.
Currently, nobody is actively working on this topic, so there is no ETA.

XML serialization is designed to store the graph model, stencils (custom shape definition), editor configuration and much more.
Depending on what you want to serialize, it may be more practical to use your own system (even if the XML serialization function works).
What do you want to serialize?

[EscanorTargaryen]

I think I will eventually do a custom deserialisation because I also need to save other information

[EscanorTargaryen]

How can I change the selection line of a vertex?

[tbouffard]

I have limited knowledge in this area.

The code that manages the rendering of the selections seems to be in the following files:

• for edges:

  maxGraph/packages/core/src/view/handler/EdgeHandler.ts

  Lines 484 to 496 in fe7f1a8

  	createSelectionShape(points: (Point | null)[]) {
  	const c = this.state.shape!.constructor as new () => Shape;
  	const shape = new c();
  	shape.outline = true;
  	shape.apply(this.state);
  	shape.isDashed = this.isSelectionDashed();
  	shape.stroke = this.getSelectionColor();
  	shape.isShadow = false;
  	return shape;
  	}

• for vertices:

  maxGraph/packages/core/src/view/handler/VertexHandler.ts

  Lines 421 to 431 in fe7f1a8

  	createSelectionShape(bounds: Rectangle) {
  	const shape = new RectangleShape(
  	Rectangle.fromRectangle(bounds),
  	NONE,
  	this.getSelectionColor()
  	);
  	shape.strokeWidth = this.getSelectionStrokeWidth();
  	shape.isDashed = this.isSelectionDashed();
  	return shape;
  	}

The code that manages the rendering when moving the cells is in

maxGraph/packages/core/src/view/handler/SelectionHandler.ts

Lines 714 to 716 in fe7f1a8

	createPreviewShape(bounds: Rectangle) {
	const shape = new RectangleShape(bounds, NONE, this.previewColor);
	shape.isDashed = true;

You may have to provide your own implementation and find how to register it.

[EscanorTargaryen]

Ok thanks, how do I apply the changes to my graph?

[tbouffard]

The Graph object provide hooks methods that let you use your own implementation of some handlers. Overriding these methods should do the job:

• createVertexHandler
• createEdgeHandlerInstance: since version 0.6.0 to return your own EdgeHandler implementation, see https://github.com/maxGraph/maxGraph/pull/150/files

SelectionHandler is a plugin, so you can extend it and register your custom plugin instead of registering the default one.

[tbouffard]

cc @EscanorTargaryen so you're more likely to be notified 😸

[EscanorTargaryen]

Thank you!

[EscanorTargaryen]

Question as a complete ingorant 😂😂, what changes if I use graph#batchUpdate() as opposed to doing updates within that method

[tbouffard]

I am not sure to understand. Can you provide an example please?

[EscanorTargaryen]

I apologise for my late reply, but I did not receive notification of your reply. I thank you again for your help. By the way:

          graph.batchUpdate(() => {
              graph.insertEdge({
                parent: p,
                source: parent!.vertex,
                target: this.vertex,
                style: {
                  edgeStyle: 'custom',
                  movable: false,
                  bendable: false,
                },
              });
            })
          //the top and bottom do the same thing, so does graph.batchUpdate() help?
          graph.insertEdge({
            parent: p,
            source: parent!.vertex,
            target: this.vertex,
            style: {
              edgeStyle: 'custom',
              movable: false,
              bendable: false,
            },
          });

[tbouffard]

batchUpdate use a "transaction" so AFAIK, in this case, the model is first updated then the rendering/display is updated.
This is particularly usefull when a lot of changes happen in the model in a short period of time. This limits the number of display computation and repaints in the browser, and so, it is supposed to improve performances.