Custom Diagram Event
Override default copy, paste, undo and redo behaviour
@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
Conditionally change link color?
@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
TreeLayout - set initial position of a node when it was dragged and dropped from a palette?
@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
I want to draw a ring chart
@zwf wrote:
I’d like to draw a ring statistical chart. This ring has different color configurations. How can I locate the node template?
Posts: 1
Participants: 1
Drag canvas but the canvas not moving
@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
Special diagram node layout
@uriel wrote:
How can I create the layout as in the picture?
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
Floor planner can't update color after new floor plan
@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
I need a ring chart
@luocong2016 wrote:
Convert data to this image.A circle made up of many fan-shaped rings.
I refer to it. demo: https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/radialPartition.html
But I still don’t understand.
Can you help me. Thank you
Posts: 1
Participants: 1
GoJS 2.1 Released: New Animations and React integration
@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.
- New default GoJS animation “fades up”, instead of animating Node locations. Added AnimationManager.initialAnimationStyle to control this behavior. Here is an example of:
- (top) The new initial animation, the Diagram position animating upwards and Diagram opacity animating from 0 to 1.
- (middle) A custom “zoom in” animation, animating Diagram scale, which is demonstrated in the new State Chart sample,
- (bottom) AnimationManager.initialAnimationStyle set to AnimationManager.AnimateLocations to perform the GoJS 2.0 and previous style of animation. The Data Visualization sample uses this option.
- Added
"InitialAnimationStarting"
DiagramEvent to more easily customize initial animations. See AnimationManager.initialAnimationStyle for details.- New class: AnimationTrigger. These describe how to automatically animate a property on a GraphObject when it changes value.
- New class: Animation. This class lets you declaratively setup custom animations, with options for indefinite animations.
- New AnimationManager options, including the ability to define custom animation effects to animate with AnimationManager.defineAnimationEffect
- New Animation samples and samples modified to use new Animation features:
- Custom Animation - New Extension: Demonstrating a number of Node creation/deletion animations, linking animations, and more.
- Tree Load Animation - New Sample: recursive animation upon model load.
- Flowchart - In the Palette only, initial animation is disabled in favor of a custom fade-in animation.
- State Chart - Initial animation is disabled in favor of a custom zoom fade-in animation.
- Data Visualization - Nodes now move using an AnimationTrigger.
- Kitten Monitor - Kittens now move using an AnimationTrigger.
- Process Flow - An indefinite Animation of the Links’ strokeDashArray.
- Shop Floor Monitor - Link color changes now use an AnimationTrigger.
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.
- New method: Model.toIncrementalData. This method outputs an IncrementalData object containing changes that occurred within a Transaction, similar to the existing method, Model.toIncrementalJson. It can be used to keep outside data synchronized with the GoJS model.
- New methods: Model.mergeNodeDataArray and GraphLinksModel.mergeLinkDataArray. These methods are used to merge outside data changes into the GoJS model.
- New method: Model.cloneDeep. This method can be used to make a deep copy of an object, which may be useful to ensure GoJS doesn’t share references with outside state. It is also used within Model.toIncrementalData to ensure IncrementalData’s list of modified objects won’t contain references to the model’s data objects.
Other Changes for 2.1.0:
- Added DoubleTreeLayout to the extensions and extensionsTS directories. This is now used by both the Double Tree and Double Tree JSON samples.
- Updated the sequencing of “ChangingSelection” and “ChangedSelection” DiagramEvents to be outside of transactions for commands and tools. Exceptions include “ChangingSelection” being called during “Drag” and “Linking” operations when drag-copying or inserting a link. With “ChangedSelection” occuring after a transaction completes, any changes will be complete and can be used in the listener.
- CommandHandler.zoomToFit now animates by default.
- Improved the ContextMenuTool.defaultTouchContextMenu’s “Paste” command to use the ContextMenuTool.mouseDownPoint rather than the Diagram.lastInput’s InputEvent.documentPoint.
- Added new property, Diagram.opacity. This may be useful for fade-in/out animations, or visual indication of a disabled Diagram.
- Added new method, Diagram.findLinkForKey, which will look for a link corresponding to a model’s link data object’s unique key. This will only return a link when using a GraphLinksModel with GraphLinksModel.linkKeyProperty set to a non-empty string.
- Model.applyIncrementalJson now throws an error if model properties (eg. nodeKeyProperty) included in the JSON don’t match the existing model. This check only includes properties included in the output from Model.toIncrementalJson.
- Added new methods, Picture.reload, which reloads a Picture source in case the file on the server has changed, and Picture.redraw which redraws the picture, and can be useful to update the Picture if the source is backed by an HTML Canvas or HTML Video Element.
- Added new samples:
- SVG Data URL - Export SVG with Base64 hrefs instead of the Picture.source URL
For previous releases, see: GoJS version 2.0.18
Posts: 2
Participants: 1
Adornment & Databinding Question
@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
Gojs how to makeSvg with click event
@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
Right click to expand or hide?
@luocong2016 wrote:
I would like to right-click on the expansion map.
Expand details near the original node.
I hope the connecting line is not blocked.
Posts: 1
Participants: 1
Link break always in gojs
@ahmetgundogdu wrote:
When I draw, the line always breaks. I’m having this a lot in link drawings
How to solve this situation?
Posts: 1
Participants: 1
Diagram.nodes contains phantom nodes when adding a link
@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. Thediagram.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
Floor planner round table is not an ellipse
@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
Browser default contextmenu also appears on contextclicked event
@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
Different Layer Colours
@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
GoJS FloorPlanner Z-index problem
@tahsinerkavun wrote:
Hi,
When I was resize a wall with adornment extension, I cant click another html input areas.
anyone have an idea about this bug ?
- ı was tried z-index for solve but this cant solved.
Posts: 2
Participants: 2
Select ports with DragselectingTool
@aroel wrote:
In https://gojs.net/latest/samples/selectablePorts.html, we can click to select the port.
but if there are many ports on the nodes, I want to use DragSelectingTool to select multiple ports at one time. Can I do it ? and How ?
any example to show it?thanks
Posts: 2
Participants: 2