@useche_dev wrote:

Hi, everyone, I have a problem when I implement RoundedRectangle on a Shape. Border is added and I can modify it with the strokeWith, but in the corners, the original rectangular shape persists. I can’t find a way to get rid of that excess and get the corners rounded properly. The Shape is inside a Group. Thanks in advance.

This is my code:

  this.dia.groupTemplateMap.add("OfGroups",
      $(go.Group, "Auto",
        {
          mouseDrop: finishDrop,
          handlesDragDropForMembers: true, 
          mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
          mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
          memberAdded: updateGroupCount,
          memberRemoved: updateGroupCount,
          layout:
            $(go.GridLayout,
              {
                wrappingColumn: 1
              })
        },
        new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
        $(go.Shape, "RoundedRectangle",
          new go.Binding("background", "background"),
          { background: '#E2E2EA', fill: null, stroke: "#E2E2EA", strokeWidth: 1}),
          $(go.Panel, "Vertical",  // title above Placeholder
          $(go.Panel, "Horizontal",  // button next to TextBlock
            { stretch: go.GraphObject.Horizontal, background: "#E2E2EA" },
            new go.Binding("background", "background"),
            new go.Binding("width", "width"),
            new go.Binding("height", "height"),
          
            $(go.TextBlock,
              {
                alignment: go.Spot.Top,
                editable: false,
                margin: 5,
                font: "bold 18px sans-serif",
                opacity: 0.75,
              },
              new go.Binding("stroke", "stroke"),
              new go.Binding("text", "text").makeTwoWay())
          ),
          $(go.Placeholder,
            {padding: 12, alignment: go.Spot.TopLeft }),
         
        ),  // end Vertical Panel
      ));  // end Group and call to add to template Map

Posts: 7

Participants: 2

Read full topic

@swang92 wrote:

Hello,

I was wondering if it is possible to access Key or Name binded variables passed used addNodeData in the call backs of other bindings. For example:

new go.Binding(“fill”, “isHighlighted”, function(h) {
//access binded key/name variables here
}).ofObject())

If it is possible, how would one do so?

Thank you!

Posts: 2

Participants: 2

Read full topic

@useche_dev wrote:

Hi, everybody. I have a problem, I want to avoid dragging one group into another and only the nodes within each individual group can be moved. Try modifying the mouseDragLeave in the definition of the groups, besides having set the movable and the groupable to false. Thanks in advance.

Here I give the definition of my group.

Screenshot_10801×374 19.4 KB

Posts: 3

Participants: 2

Read full topic

@paavum wrote:

Hi,
I am having a bit of an issue with labels on orthogonal connectors, even if the segment where the label is located is very small the label will rotate. For very small segments, this has as a consequence that you’ll see a label perpendicular to the connecting line. How can I prevent the label from rotating if the segment where it is is smaller than 50px or so?

cheers

Posts: 1

Participants: 1

Read full topic

@useche_dev wrote:

Hi, everybody. I have a problem since I have several nodes within a group (which has a placeholder). The thing is that the nodes can be dragged out of the group in any direction except the top of the group. If I try to do this, the whole group is dragged. I don’t know if the placeholder is interfering. Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@Jason11 wrote:

Hi! Following with the solution of this post Hoe to add an empty band to the layeredDiGraph I would like to increase band sizes in order to have parents and sons of the same band at different levels. For example, in the following example, i would like to increase band “Two” to have node “fourB” on the right of “threeD”. How would i do that? Thanks in advance

Posts: 8

Participants: 2

Read full topic

@paavum wrote:

Hi,

I’m sure I’m missing something dumb. But for the love of me, I havent been able to figure it out.

I am using the latest goJS (after a surprisingly uneventful migration from 1.7 to 2.15) and our overly friendly typescript complains about the following:

Property ‘startTransaction’ does not exist on type ‘typeof Diagram’.

So I go and recheck the docs, and this has not gone anywhere, its still there, yet TS inisists otherwise.
My code looks like this:

import * as go from 'gojs/release/go-module';
export const Helper = {
  diagram: go.Diagram,

  /**
   * Starts a Transaction and returns he TxID
   */
  beginTransaction: function (msg: string, baseName = '') {
    if (!Helper.diagram) throw new Error('no diagram found');
    let id = `${baseName}-${this.randomString()}`;
    Helper.diagram.startTransaction(id);
    console.group(`👉 ${id} :: Begin Transaction ${msg}`);
    return id;
  },
//...
}

Posts: 5

Participants: 2

Read full topic

@cbh wrote:

Hi all. I need a little hand holding here. I want to have a function where the user creates an group and all of the constituent parts are locked in place relative to one-another. So when the group or any of its parts are dragged they all move as one. I think the way to do this is to override computeEffectiveCollection in a dragging tool but just wanted to check and make sure I wasn’t missing some property of the group function that would make this easier.
Thanks!

Posts: 6

Participants: 2

Read full topic

@jsotom260298 wrote:

Hi, I’ve made a functional application with gojs using javascript, and now I want to integrate it on an Angular project, but I can’t do it. When I try to run the init() function on angular it throws me the next errors:

image743×378 15.7 KB

What can I do? Thank you.

Posts: 7

Participants: 2

Read full topic

@useche_dev wrote:

Hi, everybody. I have a problem. I’m adding an icon via a Panel in the upper right-hand corner of a group. But it gets cut off and doesn’t come out completely. I tried changing the padding of the Placeholder and the alignment of the Panel, but it still doesn’t work. Thanks in advance.

Here’s the group’s code.

this.dia.groupTemplateMap.add("OfGroups",
      $(go.Group,  "Auto",
        {
          mouseDrop: finishDrop,
          handlesDragDropForMembers: true,
          memberValidation: samePrefix,
          mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
          mouseDragLeave: function(e, grp, next) { 
            highlightGroup(e, grp, false); 
          },
          memberAdded: updateGroupCount,
          memberRemoved: updateGroupCount,
          computesBoundsAfterDrag: true,
          movable: true,
          groupable: false,
          copyable: false,
          layout:  
            $(go.GridLayout,
              {
                wrappingWidth: 1, alignment: go.GridLayout.Position,
                cellSize: new go.Size(1, 1), spacing: new go.Size(12, 12)
              })
        },
        new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "background"),
          new go.Binding("spot1", "spot1"),
          new go.Binding("spot2", "spot2"),
          { stroke: "#E2E2EA", strokeWidth: 1, parameter1: 15}),
          $(go.Panel, "Vertical",  
          $(go.Panel, "Horizontal",  
            new go.Binding("width", "width"),
            new go.Binding("height", "height"),
          
            $(go.TextBlock,
              {
                alignment: go.Spot.Top,
                editable: false,
                margin: 12,
                opacity: 0.75,
              },
              new go.Binding("font", "font"),
              new go.Binding("stroke", "stroke"),
              new go.Binding("text", "text").makeTwoWay())
          ),
          $(go.Placeholder,
            {padding: 10, alignment: go.Spot.Center}),
         
        ),  
        $(go.Panel, "Auto",
          { alignment: new go.Spot(1, 0, -4, -10) },
          $(go.Shape, "Circle", { fill: "#FFFFFF", strokeWidth: 0}),
          $(go.TextBlock, { name: "COUNT" })
        )
      ));

Posts: 3

Participants: 2

Read full topic

@agillespie wrote:

My project utilizes a palette and a standard diagram. The standard diagram is a “view” of some collection nodes in a graph database master model. It is not the entire graph database. It is a subset of a master model. Upon clicking on a given node in the standard diagram, the palette is filled with all links connecting to that node from the master model. The user can then drag nodes from the palette into the diagram to “inflate” those nodes in the standard diagram’s view.

My issue is with the key auto-incrementing when attempting to import a node from the palette if it already exists in the standard diagram.

A small example to better illustrate the problem:

The “full” master model has these connections:

Forgive the link labels, this is made up data.

… in these pictures, the palette is on the left, the standard diagram on the right.

Let’s say a user has only the “Dad owns Child” link in view.

Selecting the dad node, you can see the “is parallel to” link to Mom in the palette:

Selecting the Child node, you can see the “is owned by” connection to both parents.

With the Child node selected, if I drag the Mom node onto the diagram, the “Mom Owns Child” link is displayed.

At this point, I am happy that the “Dad Is Parallel To Mom” link is not displayed. I want it to be possible to have nodes on the diagram with connections in the master model, but not necessarily display all those connections. This is working well thus far.

The problem comes when I try to pull the pre-existing “Dad Is Parallel To Mom” link from the master model. This could be done from either parent, in theory, were it to work.
So, again, selecting the Dad node, you can see the “is parallel to” link to Mom in the palette:

My plan was to enable the user to drag the “Mom” node out, have my code recognize the fact that the Mom node is already in the view, and draw the pre-existing “Is Parallel To” connection between the two nodes already in the view.

What actually happens is the key associated with the Mom node I pull from the Palette auto-increments to be the next available key, and my code freaks out because no Node with this new key exists in the master model.

Clearly GoJS is doing some sort of “does an object with this key already exist” detection. I’d like to have a signal that says “hey, a node with this key already exists” when I try to drop a node from the palette onto the diagram. Then I could easily find the pre-existing node in the diagram and draw the link between the two.

What I cannot figure out is a way to obtain a signal that the node I’m dropping from the palette already exists in the diagram. By the type I drop the node, “event.subject.data.key” has already incremented.

There are some workarounds I could use, but they are not as “clean” as a simple “this key already exists” check would be & it seems like that is something that should be possible. I just don’t know the inner workings of GoJS well enough yet.

Is there a way to determine if a key was auto-incremented upon drop from the palette?

As always, help is appreciated. Thank you. - Aaron

Posts: 2

Participants: 2

Read full topic

@jothibaskaran wrote:

Hi,

I have a palette and diagram model. The text in my palette behaves strangely on scroll when the browser Zoom is changed from the default.

The text appears to change size for a second and then comes back to its intended size on scrolling through the palette.

We could send you a video for better understanding. Could you help?

Posts: 1

Participants: 1

Read full topic

@zamehan wrote:

Hello,

I would like to know if it is possible to make that the shape of groups non rectangular and adapt to the placement of its members. For instance, if some nodes are placed in a L shape, the group would take a L shape if I group the nodes.

for example :

image672×582 1.27 KB

Thank you

Posts: 4

Participants: 3

Read full topic

@useche_dev wrote:

Hi, I’m having a problem connecting some nodes via links. When the connection is made, they overlap over the nodes. How can I avoid this? Thanks in advance.

That’s how it looks.

I need something similar to this.

That’s my linkTemplate code

 this.dia.linkTemplate =
$(go.Link,
  { routing: go.Link.AvoidsNodes,
    corner: 15 },   
  $(go.Shape, { toArrow: "Standard" })
);

 public diagramLinkData: Array<go.ObjectData> = [
{ from: "311", to: "314" },
{ from: "311", to: "315" },
{ from: "311", to: "316" },

];

Posts: 5

Participants: 2

Read full topic

@plusor wrote:

Hello,

Does it support persistent TreeExpanderButton state?

When I quit the application after using collapse/expand, the next time I open it again, I hope to keep the last usage status.

Posts: 1

Participants: 1

Read full topic

@useche_dev wrote:

Hello, everyone. I need to add text in a SubGraphExpander instead of the default icon. I tried the _subGraphExpandedFigure and _button properties of the SubGraphExpanderButton, but it failed to remove the icon and leave the text. I was trying with properties of this documentation, https://gojs.net/latest/intro/buttons.html, but I didn’t find something according to what I need. Thanks in advance.

I have that for the moment.

With this code:

$("SubGraphExpanderButton",
              {
                "_subGraphExpandedFigure": null,
                "_subGraphCollapsedFigure": null,
              },
              { alignment: new go.Spot(0.5, 1), margin: 20 },
                $(go.TextBlock, "collapse")
            ),

The design I need to approach is something like:

Posts: 7

Participants: 2

Read full topic

@JesperWe wrote:

Hello!

I am evaluating GoJS by trying to recreate some in-house stuff using code based on the Dynamic Ports sample, which is the closest to our use case.

Easiest way for me to do this is to put the code into our React app on a separate page, so I’ve done exactly that. I merged the React sample with the Dynamic Ports sample, which required a few adaptions but was straight forward. Migrating our objects into nodeDataArray was very easy using a few new go.Bindings.

But when I got the node ports created I see my sample is not behaving as the Dynamic Ports sample. It looks like it uses the default link instead of the CustomLink in the code. I can drag a new link from one port to another, and it snaps to the ports just fine. But when I release the mouse the created link does not go between the ports I pointed to, it goes go from node center to node center.

There are three pieces of code that are involved AFAICS:

...
myDiagram.linkTemplate = $( CustomLink,  // defined below
	{
		routing: go.Link.AvoidsNodes,
		corner: 4,
		curve: go.Link.JumpGap,
		reshapable: true,
		resegmentable: true,
		relinkableFrom: true,
		relinkableTo: true
	},
	new go.Binding( "points" ).makeTwoWay(),
	$( go.Shape, { stroke: "#2F4F4F", strokeWidth: 2 } )
)
...
function CustomLink() {
	go.Link.call( this )
}

go.Diagram.inherit( CustomLink, go.Link )
...

I have verified that CustomLink() itself gets called when the diagram is created, but then something is missing in the inheritance because findSidePortIndexAndCount is never called when I create links.

Any tips on how to get this hooked up right would be helpful!

(Full code at https://pastebin.com/DNgNpWkU)

Posts: 2

Participants: 1

Read full topic

@useche_dev wrote:

Hi, I have a problem, I want to modify the GridLayout’s wrappingColumn property of a Node meniante a ternary, whose variable is changing in a click method. But it doesn’t seem to take the change. Any ideas? Thanks in advance.

     layout:
            $(go.GridLayout,
              {
                wrappingColumn: changeDirection ? Infinity : 1, alignment: go.GridLayout.Position,
                cellSize: new go.Size(1, 1), spacing: new go.Size(8, 8)
              })

Posts: 13

Participants: 2

Read full topic

@cshotton wrote:

The addition of Picture.reloadSource seems to be what I’ve been looking for in gojs for quite some time, but I can’t find any examples of how it should be used.

Specifically, I have a diagram with a custom picture node that can have its source attribute change on the fly (not necessarily the server-side source image, but the URL in the source attribute on the Picture element which ideally would cause the picture shown in the diagram to change). I can update the model, but it seems like it is necessary to also call reloadSource at some point. Problem is, I can’t determine how to get a reference to the picture element within the node whose data have been updated. Is there an example anywhere of how a node with a dynamically changing picture element should be updated?

Posts: 6

Participants: 2

Read full topic

@Viswanatha wrote:

Hi walter,
we are using HyperlinkText.js for nodes when click on it it goes to some page, but link opens in new tab or window. we want it should open it only in current window or tab. Please help.

Posts: 2

Participants: 2

Read full topic