Quantcast
Channel: GoJS - Northwoods Software
Viewing all 6965 articles
Browse latest View live

Custom Diagram Event


Override default copy, paste, undo and redo behaviour

$
0
0

@kishangajjar wrote:

I have some additional data added on the Node without using the transaction manager.
This is the temporary data which i dont want gojs to remember. i mean when user is doing undo or redo or copy/paste gojs should not use such temporary data.

so lets say on the node i have added 1 property called as Roles. If user does undo and does redo again, then it should add the node without Roles property.

How can i achieve this ?

Posts: 1

Participants: 1

Read full topic

Conditionally change link color?

$
0
0

@vertice wrote:

I am attempting to change link colors in my GoJS tree depending on a key / value pair in my model data (color, in this case). I am attempting to call my method to change the link color by doing the following:

  myDiagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
      $(go.Shape, { strokeWidth: 2, stroke: colors["gray"] },
      new go.Binding("geometry", "color", setLinkColor))); // the link shape and color

However, my setLinkColor method is never called. Here it is for reference:

  function setLinkColor(color) {

    console.log("value of color: ", color);

    switch(color) {

      case "critical":
        link = go.Shape.stroke(colors["orange"]);
        break;
      
        
      default:
        link = go.Shape.stroke(colors["white"]);

    } 
    return link;   
  }

How can I conditionally color my Links depending on the value of color?

Posts: 2

Participants: 2

Read full topic

TreeLayout - set initial position of a node when it was dragged and dropped from a palette?

$
0
0

@peterma wrote:

Hi, there. I’m using TreeLayout. When A node is dragged from a palette, it will be dropped to the end of the tree. How can it be positioned just where it’s dropped and when it is linked to a node in the tree, it will still be re-arranged automatically?

Here is my code:
const { Diagram, GraphObject, TreeLayout, Spot } = go
const = GraphObject.make; const treeLayout = (
TreeLayout,
{
angle: 90,
arrangement: TreeLayout.ArrangementVertical,
treeStyle: TreeLayout.StyleLayered,
arrangementSpacing: new Size(0, 35),
},
)

const myDiagram = $(
Diagram,
diagramId,
{
layout: treeLayout,
isReadOnly: false,
allowHorizontalScroll: true,
allowVerticalScroll: true,
allowZoom: true,
allowSelect: true,
contentAlignment: Spot.TopCenter,
minScale: 0.5,
maxScale: 1,
initialScale: 0.85,
“undoManager.isEnabled”: true, // enable undo & redo
},
);

return myDiagram;

Thanks in advance.

Posts: 2

Participants: 2

Read full topic

I want to draw a ring chart

$
0
0

@zwf wrote:

I’d like to draw a ring statistical chart. This ring has different color configurations. How can I locate the node template?
1

Posts: 1

Participants: 1

Read full topic

Drag canvas but the canvas not moving

$
0
0

@peterma wrote:

Hi, Walter.
I run into another issue. I suppose the default behavior is that when a user drags the canvas, it should be move as the cursor move.
But my code doesn’t have this expected behavior.

const { Diagram, GraphObject, TreeLayout, Spot } = go
const = GraphObject.make; const treeLayout = (
TreeLayout,
{
angle: 90,
arrangement: TreeLayout.ArrangementVertical,
treeStyle: TreeLayout.StyleLayered,
arrangementSpacing: new Size(0, 35),
},
)

const myDiagram = $(
Diagram,
diagramId,
{
layout: treeLayout,
isReadOnly: false,
allowHorizontalScroll: false,
allowVerticalScroll: false,
allowZoom: true,
allowSelect: true,
contentAlignment: Spot.TopCenter,
minScale: 0.5,
maxScale: 1,
initialScale: 0.85,
“undoManager.isEnabled”: true, // enable undo & redo
},
)

Pls give me some hints. Thank u.

Posts: 1

Participants: 1

Read full topic

Special diagram node layout

$
0
0

@uriel wrote:

How can I create the layout as in the picture?

Capture

Icons in the top section are fixed- top left corner and top right corner.

Laundry line- draft icon and clock icon- are fixed in this position.

The text in the middle is the name of the shape. It is wrapped and should appear in the center- of the red box (the top of the box is in the bottom of the draft and clock icons).

The shape should be resized using the 9 small blue boxes.

When hovering the shape, the 4 spots to create the links should appear (see the numbers in the picture above) inside the shape.

Posts: 2

Participants: 2

Read full topic

Floor planner can't update color after new floor plan

$
0
0

@dlee wrote:

https://gojs.net/latest/projects/floorplanner/FloorPlanner.html#

I’m trying to use the floor planner and in the sample, when I go File -> New to load a blank floor plan, I drag a palette onto the diagram and try to change the color and it fails with error “Please enter a valid number”. I think it’s something to do with the NaN values for the units. I try changing them manually but still get same error. Any idea?

Posts: 1

Participants: 1

Read full topic


I need a ring chart

GoJS 2.1 Released: New Animations and React integration

$
0
0

@simon wrote:

GoJS 2.1

New Animation Capabilities

GoJS 2.1 contains a number of new features to animate different components of your Diagram.

See the Intro page on Animation and the Custom Animation extension for more details and examples.

Improved Support For Data Synchronization

GoJS 2.1 contains some new methods to ease integration of GoJS diagrams in applications that maintain their own data, particularly React apps.

See the Intro page on using GoJS with React and the gojs-react example project for details and examples. Also see gojs-react, a package containing React Components for GoJS Diagrams, Palettes, and Overviews.

Other Changes for 2.1.0:

For previous releases, see: GoJS version 2.0.18

Posts: 2

Participants: 1

Read full topic

Adornment & Databinding Question

$
0
0

@JJR wrote:

Hi,

I was wondering if there is some limitation with data binding realtime updates within adornments templates…

What i am trying to achieve is select a node and have a selectionAdornmentTemplate show an overlay textbox next to the node to display data that’s updating in realtime (every second), databound to a property in the model.modelData.

It looks like it only does the databind when first selected, but doesn’t trigger afterwards. I can take that same textbox & binding and move it up into the node template and the data updates in realtime.

Is this the intended behavior of the Adornments…that the bindings only get evaluated when first triggered/displayed?

Note: What i really like is the overlay that the tooltip and selection adornments have so the textbox doesn’t affect the formatting/size of the nodes/groups under/around them. Unless there’s a better method to achieve the same effect?

Posts: 1

Participants: 1

Read full topic

Gojs how to makeSvg with click event

$
0
0

@acccong wrote:

I creat Picture with click event,and makeSvg,show in new window,but the svg without click event.I need click event.
I creat Picture with click event,and makeSvg,show in new window,but the svg without click event.I need click event.

Posts: 1

Participants: 1

Read full topic

Right click to expand or hide?

$
0
0

@luocong2016 wrote:

I would like to right-click on the expansion map.
9ab94e6e
Expand details near the original node.
8c147704
I hope the connecting line is not blocked.

Posts: 1

Participants: 1

Read full topic

Link break always in gojs

Diagram.nodes contains phantom nodes when adding a link

$
0
0

@Dominic.Lerbs wrote:

Hi,
I have a ModelChangedListener to execute some logic when a link is added:
(e.change === go.ChangedEvent.Insert && e.propertyName === "linkDataArray")

Within this listener, the diagram.nodes array contains 4 elements, even though my model and nodeDataArray only contains two nodes. The diagram.parts also contains only 2 elements.

I tried to find out what the two additional nodes are, but they have no name, no size and no data.

Do you know what these two phantom-nodes could be and has this changed since goJS 1? I get an error now because I am accessing node.data which is undefined for the phantom nodes. The same code has worked before but I am not sure if this is related to the goJS upgrade or some side effect of my other code.

Posts: 2

Participants: 2

Read full topic


Floor planner round table is not an ellipse

$
0
0

@dlee wrote:

https://gojs.net/latest/projects/floorplanner/FloorPlanner.html#

The 2nd square in the palette should be a round table but it’s square.

I checked the constants where round table is defined and its set to be the shape Ellipse but it doesn’t seem to be working right. Sounds like a simple fix but not sure why its not working. I’m still new and learning as I go.

{
	key: "roundTable",
	color: "#ffffff",
	stroke: '#000000',
	caption: "Round Table",
	type: "Round Table",
	shape: "Ellipse",
	width: 61,
	height: 61,
	notes: ""
},

Thanks

Posts: 1

Participants: 1

Read full topic

Browser default contextmenu also appears on contextclicked event

$
0
0

@QooQooDaas wrote:

I’m trying to prevent the default contextmenu of the browser when right clicking on the diagram. Otherwise, the context template I implemented would show up along with the browser default contextmenu when I right-click the mouse.

Interestingly, the browser default contextmenu does only show up along when I right click in certain environments. I’m going to list-up the certain environments:

Windows

  • Whale(2.6.88.13) // latest
  • Chrome(78.0.x) // latest
  • Firefox(70.0.1) // latest

Mac

  • Whale(2.6.88.11) // latest

In other words, when I run my app in chrome, Mac os, the browser default contextmenu doesn’t show up along. I don’t know what’s going on here :/

I’ve even tried like:

this.diagram.addDiagramListener('BackgroundContextClicked', (event: go.DiagramEvent) => {
  event.diagram.lastInput.event.preventDefault();

but it didn’t work.

Posts: 1

Participants: 1

Read full topic

Different Layer Colours

$
0
0

@sibisasvin wrote:

Hi, I need to color nodes differently based on their position in the layer. (i.e) If a node placed in the first layer it should have green color, if it placed in second layer it should have red color ,for nodes in third layer a different color. Is there any way to achieve it. Thanks on advance

Posts: 2

Participants: 2

Read full topic

GoJS FloorPlanner Z-index problem

Select ports with DragselectingTool

Viewing all 6965 articles
Browse latest View live