@chzh.austin wrote:

I have a trouble to make undo/redo manager happened only in the scope of each layer. For example, I have two layers A and B. They are mutual for each other, which is to say, only one of them is visible. When undoing, I want to make the scope to be in layer A only if layer A is currently visible but not impact whatever in layer B. Is there any guidance on how to achieve this? Thanks.

-Chuan

Posts: 5

Participants: 2

Read full topic

@chzh.austin wrote:

I would like to modify the coordination of Points in a link via adding a offset

                if (part instanceof go.Link) {
                    let points = new go.List<go.Point>(go.Point);
                    part.points.each((point: go.Point) => {
                        points.add(new go.Point(offset.x + point.x, offset.y + point.y));
                    });
                    part.points = points;
                }

However, it seems the number of points is wrong through iteration, it should be 6 but I only get 4. So I get a weird shape of link. The left part is before offset but right is with offset.

I then realize if I drag the node a little bit, the link auto correct itself.

What might be the possible issue here? Thanks.

-Chuan

Posts: 3

Participants: 2

Read full topic

@jjohnsonocs wrote:

I have went through all the samples and I just can't figure this out.

I have got Groups working and I have Nodes working. When I drag a node onto a Group the data shows the node is grouped with my group, but no matter what I do the Group always comes to the foreground and the Node is hidden visually.

Any suggestions would be helpful.

var finishDrop = function(e, grp) {
  var ok = (grp !== null
            ? grp.addMembers(grp.diagram.selection, true)
            : e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
  if (!ok) e.diagram.currentTool.doCancel();
};

var highlightGroup = function(e, grp, show) {
  if (!grp) return;
  e.handled = true;
  if (show) {
    var tool = grp.diagram.toolManager.draggingTool;
    var map = tool.draggedParts || tool.copiedParts;  // this is a Map
    if (grp.canAddMembers(map.toKeySet())) {
      grp.isHighlighted = true;
      return;
    }
  }
  grp.isHighlighted = false;
};

this.goDiagram.groupTemplate =
    this.goJs(go.Group, "Auto", {
          	background: "transparent",
          	mouseDragEnter: function(e, grp, prev) {
            	highlightGroup(e, grp, true);
          	},
          	mouseDragLeave: function(e, grp, next) {
            	highlightGroup(e, grp, false);
          	},
          	computesBoundsAfterDrag: true,
          	mouseDrop: finishDrop,
          	handlesDragDropForMembers: true,
  			locationSpot: go.Spot.Center,
            locationObjectName: "PH",
            resizable: true,
            resizeObjectName: "PH",
            locationSpot: go.Spot.Center,
            isSubGraphExpanded: false
        },
        new go.Binding("itemArray", "boundaryEventArray"),
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
      	this.goJs(go.Panel, "Auto",
        this.goJs(go.Shape, "RoundedRectangle",
            {
              	name: "PH",
 // 			  fill: SubprocessNodeFill,
  			  	fill: "transparent",
              	stroke: SubprocessNodeStroke,
              	minSize: new go.Size(ActivityNodeWidth, ActivityNodeHeight),
              	portId: "",
  				fromLinkable: true,
  				toLinkable: true,
  				cursor: "pointer",
              	fromSpot: go.Spot.RightSide,
  				toSpot: go.Spot.LeftSide
            },
            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
            new go.Binding("strokeWidth", "isCall", function(s) { return s ? ActivityNodeStrokeWidthIsCall : ActivityNodeStrokeWidth; })
           ),
          this.goJs(go.Panel, "Vertical",
            { defaultAlignment: go.Spot.Left },
            this.goJs(go.TextBlock,
              { margin: 3, editable: true },
              new go.Binding("text", "text").makeTwoWay(),
              new go.Binding("alignment", "isSubGraphExpanded", function(s) { return s ? go.Spot.TopLeft : go.Spot.Center; })),
            this.goJs(go.Placeholder,
              { padding: new go.Margin(5, 5) })
          )
        )


    );

TIA

Jeff

Posts: 1

Participants: 1

Read full topic

@aj wrote:

I have a palette from which I can drag a shape(eg roundedrectangle) into my diagram on right side and a tree node present on the left side. As soon as the shape is dragged into myDiagram, shape should be added as a child to the parent node and also Tree should be interacting with the mydiagram panel.

blob.jpg1905x739 45.5 KB

Posts: 3

Participants: 2

Read full topic

@EvilProfesseur wrote:

Hi, I'm trying to give the user the ability to switch between different kinds of views. The diagram shows a tree structure, but I want it to organize itself radially if the user so desires. I adapted the code from this example but while the nodes rearrange themselves, they immediately return to the standard tree view (with some changes, like rotated labels). How can I stop this from happening?

My guess is that TreeLayout forces automatic redraw to place everything according to its specs, so I thought that maybe I have to change the layout (like I'm already doing, when switching between Tree and Grid), but the example given above has no layout initialized.

Posts: 4

Participants: 2

Read full topic

@cardis1 wrote:

Hi,

I would like to know how I can create a link from a node to itself? Here an example of what I want reproduce with GoJS:

Thank you and have a nice day!

Steeve

Posts: 2

Participants: 1

Read full topic

@g.bartoli wrote:

Dear Northwoods Software,
we are evaluating GoJS for a small internal project, I'm a beginner and I would like to ask a small question.

I already understood how to bind simple model properties to nodes and link templates and also how to use conversion functions to translate a text into a color, like in this perfectly working case:

function nodeType2Color(type) {
if (type === "BPOP") return "OrangeRed";
if (type === "BOMP") return "Peru";
return "white";
}

myDiagram.linkTemplate = $(go.Link, $(go.Shape,
new go.Binding("stroke", "cabletype", cableType2Color)));

I'm asking if it's possible to merge more than one property and pass it to a conversion function.
Suppose I have the following data for a node:

{"key":"ABC","label":"foo","type":"bar"}

And this simple merging function:

function mergeTexts(text1, text2) { return text1.concat(text2); };

How can I write a function that binds "label" and "type" to a new text to be used as a label ("foobar", in this case) for the node or the link? The following try is (obviously) not working...

myDiagram.linkTemplate = $(go.Link, $(go.Shape,
new go.Binding("text", "label", "type", mergeTexts)));

I hope I have explained well, English is not my main language.

Thanks in advance,
Guido

Posts: 3

Participants: 2

Read full topic

@g.bartoli wrote:

I've another question for you. I'm not expecting the final solution, but just some guidelines would be great.
I'm experimenting with ForceDirectedLayout and tweaking arrangement options (spring length, electrical charge, etc...), I obtained a good result with my data, i.e. the nodes are correctly placed without overlaps.

However, I realized that nodes are positioned taking into account only the positions of the other nodes and not where the actual links are drawn. You can see this behavior in the following screenshot.

Manually dragging some nodes around, I can obtain the desired results, where nodes and links are not colliding, and labels are visible, too.

I see from the Dynamic Ports sample that using custom connections, node ports, avoidNodes and JumpGap, links can be kept parallel and not colliding, but I was hoping that this overhead could be avoided for a simpler case like mine, where there is no interaction, just an alternative view of data otherwise displayed with a TreeLayout.

Do you have some suggestions on how to automatically get an better initial positioning of nodes taking into account link/node collisions?

Many thanks,
Guido

Posts: 5

Participants: 2

Read full topic

@g.bartoli wrote:

Hi Walter,
I managed to produce a graph with a behavior similar to the Fishbone example where buttons are used to dynamically change the layout (I'm switching between TreeLayout and ForceDirectedLayout).

However, I would like the zoom to be adjusted to fit both graphs when changing them, because at the moment the zoom remains fixed to the initial level I set with initialAutoScale: go.Diagram.Uniform in the Diagram. For the first view it's fine, but it should changed to fit also the second view.

These are my simple switching functions connected to the button callbacks:

function setTreeLayout() {
    myDiagram.startTransaction("tree_layout");
    myDiagram.layout = $(go.TreeLayout,
    {
        nodeSpacing: 40,
        layerSpacing: 180
    });
    myDiagram.commitTransaction("tree_layout");
}

function setDynamicLayout() {
    myDiagram.startTransaction("dynamic_layout");
    myDiagram.layout = $(go.ForceDirectedLayout,
    {
        defaultSpringLength: 30,
        defaultElectricalCharge: 200
    });
    myDiagram.commitTransaction("dynamic_layout");
}

Do you know which is the fastest way to update the zoom level?

Thanks,
Guido

Posts: 4

Participants: 2

Read full topic

@chinenyem wrote:

I have the following:

LinkDrawn: getLinkData

function getLinkData(e) {
console.log(e.subject.fromNode.data, e.subject.toNode.data )
console.log(e.subject.toNode.data)

    }

However it is not showing me the link data array. Am I using the wrong diagram event method or the incorrect property within my named function getLinkData() ?

Posts: 3

Participants: 2

Read full topic

@estesbubba wrote:

Because our legacy UI only stored link midpoints in the database we have to calculate the start and end points for links. This code works but but the link centers on the entire node instead of the port.

        midpoints = change.midpoints;
        if (midpoints.length > 0) {
            points = new go.List(go.Point);
            link = diagram.goDiagram.findLinkForData(e.model.findLinkDataForKey(change.key));
            node = diagram.goDiagram.findNodeForKey(change.from);
            points.add(link.getLinkPointFromPoint(node, node.port, node.actualBounds.center, midpoints[0], true));
            Ext.each(midpoints, function(midpoint)  {
                points.add(new go.Point(midpoint.x, midpoint.y));
            }, me);
            node = diagram.goDiagram.findNodeForKey(change.to);
            points.add(link.getLinkPointFromPoint(node, node.port, node.actualBounds.center, midpoints[midpoints.length - 1], false));
            link.points = points;
        }

Here is what it looks like.

This code above link.getLinkPointFromPoint(node, node.port, node.actualBounds.center, midpoints[0], true) returns this toString "Point(180.09090825612827,119.99986226116681)"

Changing it to link.getLinkPointFromPoint(node, node.port, node.port.actualBounds.center, midpoints[0], true) returns this toString "Point(NaN,NaN)"

Any idea on what I'm doing wrong or suggestions on how to get link to center of port instead of node?

Posts: 5

Participants: 2

Read full topic

@david0 wrote:

When I call the move method on a group, it seems to calculate its rendered position differently than how it was calculated for the initial layout.

As a simple test, I would expect the following to be a no-op:

let loc = go.Point.parse(group.data.loc);
group.move(new go.Point(loc.x, loc.y));

But that causes the rendered position of the group to shift on the canvas.

This is a group deriving from "Spot", and I suspect move is not honoring locationObjectName and instead blindly calculating based on the group bounding box.

Full example here: http://jsfiddle.net/Leca70eg/2/

When you click the button, the group shifts its rendered location, while I would have expected the group to stay put.

Is this expected behavior? Is there a way I can get move to do the same logic as what happens during the initial layout?

Posts: 9

Participants: 2

Read full topic

@ssp wrote:

I start getting this error, the second time I try to update the model with my latest updated data.
...say...agDiagram.model = go.Model.fromJson(agDiagramData);

I used to get this error earlier, that time the reason was that my nodeDataArray had duplicate entries. Currently both my link&nodeDataArrays look good. Also, I don't have any anonymous function.

Do you have any clue on fixing/debugging this issue?

Uncaught RangeError: Maximum call stack size exceeded
at Object.isArray (go_lic.js:17)
at Q.F.replaceJsonObjects.F.Ft (go_lic.js:292)
at Q.F.replaceJsonObjects.F.Ft (go_lic.js:292)
at Q.F.replaceJsonObjects.F.Ft (go_lic.js:292)

Posts: 3

Participants: 3

Read full topic

@chinna wrote:

Hi,
I have a requirement to add one draggable Panel inside group. is it possible to add panel inside group?

Posts: 3

Participants: 2

Read full topic

@chinenyem wrote:

I tried myDiagram.model.removeLinkData(removeLinkObj).

The removeLinkObj object is {from: '-2a', to: '-5a' } .

However it isn't working like its suppose to.

Posts: 3

Participants: 3

Read full topic

@Richard wrote:

generateImages (width:any, height:any) {
console.log(width)
console.log(height)

  // sanitize input
  width = parseInt(width);
  height = parseInt(height);
  if (isNaN(width)) width = 100;
  if (isNaN(height)) height = 100;
  // Give a minimum size of 50x50
  width = Math.max(width, 50);
  height = Math.max(height, 50);
  var imgDiv = document.getElementById('myImages');
  console.log(imgDiv)
  imgDiv.innerHTML = ''; // clear out the old images, if any
  var db = this.myDiagram.documentBounds.copy();
  var boundswidth = db.width;
  var boundsheight = db.height;
  var imgWidth = width;
  var imgHeight = height;
  var p = db.position.copy();
  //making images
  for (var i = 0; i< boundsheight; i += imgHeight) {
    var img:any
    for (var j = 0; j < boundswidth; j += imgWidth) {
       img= this.myDiagram.makeImage({
        scale: 1,
          type: "image/jpeg",
          background: "AntiqueWhite",
        position: new go.Point(p.x + j, p.y + i),
        size: new go.Size(imgWidth, imgHeight)
      });
      // Append the new HTMLImageElement to the #myImages div
     img.className = 'images';
      imgDiv.appendChild(img);
     imgDiv.appendChild(document.createElement('br'));
    }
              this.saveAsFile(img);
  }
}

destroyClickedElement(event:any){
document.body.removeChild(event.target);
}
saveAsFile(val:any)
{
var pdf_image = val
var textToSaveAsBlob = new Blob([pdf_image], {type:"image/jpeg"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
// var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

var downloadLink = document.createElement("a");
downloadLink.download = "richard";
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = this.destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();

}

Posts: 3

Participants: 2

Read full topic

@andrzej.d wrote:

I use stateChart example template and i am puzzled how to make node click area (the inner one to move node) bigger? The linking area is like much bigger and sometimes when i want to move the node i link it by mistake. Same about link click area. I handled double click event on link but its narrow so sometimes i miss it.
I use desired size node property if it matters.

Posts: 2

Participants: 2

Read full topic

@utpal wrote:

Hi all ,

for my project I am using GOJs libary . So far all of my requirements are fulfilled but I am struck in one point regarding validation when creating group to group link. Basically I donot want to allow my user to create a closed loop like this.What will be the logic in this case. I am attaching a screenshot for the scenario for your reference.

Posts: 1

Participants: 1

Read full topic

@g.bartoli wrote:

Hi,
I'm continuing doing experiments with Tree/ForceDirected switching layout and I have a question regarding the link connection point on nodes using irregular shapes like a star.

I read the introduction to connections and in my graph with ForceDirectedLayout everything works as expected, since when I move the star node, the connection correctly stay attached to the closest point on the star.

Conversely, when I switch to TreeLayout, the connection starts from the bounding box of the star, regardless of its position when I drag it.

Is this an intended behavior or is there a way to make it work like in ForceDirectedLayout?

This is my linkTemplate:

myDiagram.linkTemplate = $(go.Link,
    {
        selectable: false,
    },
    $(go.Shape,
        new go.Binding("stroke", "cabletype", cableType2Color),
        new go.Binding("strokeWidth", "cabletype", cableType2Width)
    ),
    $(go.Panel, "Auto",
        $(go.Shape, {
            fill: $(go.Brush, "Radial", {
                0: "rgb(240, 240, 240)",
                0.5: "rgb(240, 240, 240)",
                1: "rgba(240, 240, 240, 0)"
            }),
            stroke: null
        }),
        $(go.TextBlock,
            {
                textAlign: "center",
                font: "13pt helvetica, arial, sans-serif",
                stroke: "black",
                margin: 4
            },
            new go.Binding("text", "", createLinkLabel)
        )
    )
);

Thanks,
Guido

Posts: 1

Participants: 1

Read full topic

@EvilProfesseur wrote:

I've set the diagram up in a way that allows the user to see the nodes in a tree view, and after a button is clicked they can group the nodes based on chosen property, like a score, country, etc (the property becomes the group, layout is changed to Grid, links are hidden). Unfortunately, the operation is not properly reversed. After returning to TreeLayout nodes stay in the same place where they were in the groups.

The change reverses nicely if nodes are not added to groups. Removing this line

diagram.model.setDataProperty(nodeData, "group", currentNodeGroup);

causes the layout to rearrange into a proper tree. I've tried to remove the group property in a similar manner

diagram.model.setDataProperty(nodeData, "group", null);

but it changed nothing, aside from the console logging:

GraphLinksModel.setDataProperty is modifying a GraphObject, "Node#1725(nodeKey)"
Is that really your intent?

how can I get the standard tree layout back?

Posts: 4

Participants: 3

Read full topic