I'd like to implement template save / paste function

GoJS
1

Hi!
Plz see this video: https://www.useloom.com/share/6c95f845cc0b45c8ada0bba7767a826f
I’d like to implement this function in gojs.
Save current diagram as template and import it wherever I want.
How to do this?
Thanks

2

Have you seen this sample? Graphical Macros via Auto Ungrouping

That sample does not implement adding new items to the Palette’s model, but that is easy enough to do. Maybe we should extend that sample to do that.

3

I’m gonna drag html div element, not visible palette. I showed this in above loom video. It’s a just html img element, not palette.
That div element means group of nodes and links.
And when I drop that on diagram, then I want that group is visible on that position I dropped.
So maybe hidden palette or some other technique would be necessary?
I think we can add group inside of jquery drop function. Then how to programatically drop/add group onto diagram?
Plz teach me in detail how to implement this.

4

Ah, I didn’t realize you were not interested in using a Palette. OK, have you seen this sample? HTML Drag and Drop

5

Yeah, I saw that. So I’m gonna reference that sample.
But my goal is to add group in jquery drop function.
How to add group?
I appreciate if you share temp code or codepen etc for this. :)

6

A Group is just a fancy Node, so it really isn’t any different, except that you will probably want to add all of the group’s member parts too. Just call Model.addNodeData or Model.addNodeDataCollection.

7

I did. I added group node and added all member nodes and links. And I ungrouped because group node is not necessary after that.
But problem is location.
How do I add entire group to location where I dropped?
Can you plz make simple demo for this?

8

Well, if you don’t need the Group afterwards, don’t create it and you won’t need to ungroup it. Just add the node and link data, call Diagram.findPartForData on each one to get the resulting Nodes and Links, select each of those Parts, call Diagram.computePartsBounds on those new Parts to find out where they all are now, and then call Diagram.moveParts to move them all to where you want them to end up.

9

Sorry, I don’t understand your word. Now I have a json array( which includes nodes and links that I’m gonna add.
var template = [ [ {key:“A”, loc: “0 0”}, {key: “B”, loc: “100 0”}, {key: “C”, loc: “200 0”} ], [ {from: “A”, to: “B”}, {from: “A”, to: “C”} ] ]

And I can get dropping point (q) in the document coordinates in the jquery drop function.

So how to move group of nodes and links to q point same as I drop that group into q point?
I tried group.move method which say it moves all its members recursively but it didn’t work.
Can’t you share demo for this? Codepen or jsfiddle etc
Thanks.

10 
  function copyAndMove(subgraphdata, pt) {
    // construct a Model from the original data to be copied
    var tempmodel = myDiagram.model.copy();
    tempmodel.nodeDataArray = subgraphdata[0];
    tempmodel.linkDataArray = subgraphdata[1];

    // construct a Diagram from that model
    var tempdiagram = new go.Diagram();
    tempdiagram.model = tempmodel;

    myDiagram.commit(function(diag) {
      // make a collection of all of the original Nodes and Links
      var originals = new go.Set(tempdiagram.nodes);
      originals.addAll(tempdiagram.links);

      // copy all of the original Nodes and Links to the target Diagram
      var map = diag.copyParts(originals, diag, false);

      // make a collection of all of the newly copied Nodes and Links
      var copies = new go.Set(map.iteratorValues);

      // figure out what area they cover
      var bounds = diag.computePartsBounds(copies);

      // move all of those new Parts so their collective center is at PT
      diag.moveParts(copies, pt.copy().subtract(bounds.center), false);
    }, "add subgraph copy");
  }

  function test() {
    var template =
      [[{ key: "A", loc: "23 45" }, { key: "B", loc: "167 89" }, { key: "C", loc: "101 223" }],
       [{ from: "A", to: "B" }, { from: "A", to: "C" }]];
    // from view coordinates to document coordinates
    var pt = myDiagram.transformViewToDoc(new go.Point(300, 200));
    copyAndMove(template, pt);
  }

I’d expect that your node data should really include location information for each node, so I added a Node.location binding and some “loc” data.

11

Thanks for your kind reply.
I find a issue. After diag.moveParts, location value of nodes are still same.
Why? How to sync location?

12

When I tried the code, the newly copied Nodes and Links were moved to be centered at the given point. If you change the point, whether in document coordinates or in view coordinates (i.e. coordinates within the HTMLDivElement), do the new Parts move where you would expect them to be?

Their placement might cause the document to be scrolled. If you haven’t already, please read GoJS Coordinate Systems-- Northwoods Software.