@ironwill1023 wrote:
Hi, Go.js Team!
I’ve found this weird issue.
When I tried to create a link from ‘Generic’ to ‘Search’, clone of highlight box is created and it never disappears unless I refresh browser.
I can send node template code if you want to see.
Regards.
Posts: 8
Participants: 2
@jettyxc wrote:
hi,
I’m using gojs with typescript. my go-module.d.ts version is GoJS v2.1.17
when i tried to add AnimationTrigger into my node template i got Visual Code complaining as the following:No overload matches this call.
The last overload gave the following error.
Argument of type ‘AnimationTrigger’ is not assignable to parameter of type ‘string | GraphObject | EnumValue | Binding | RowColumnDefinition | PanelLayout | HTMLDivElement | (Partial<…> & { …; }) | (string | … 5 more … | (Partial<…> & { …; }))[]’.
Type ‘AnimationTrigger’ is not assignable to type ‘Partial & { [p: string]: any; }’.
Type ‘AnimationTrigger’ is not assignable to type ‘Partial’.
The types returned by ‘copy()’ are incompatible between these types.
Type ‘AnimationTrigger’ is missing the following properties from type ‘Group’: ensureBounds, placeholder, computesBoundsAfterDrag, computesBoundsIncludingLinks, and 276 more.seems like AnimationTrigger class is not added to the GraphObject.make() argument declaration?
Posts: 1
Participants: 1
@ZooMze wrote:
Hi~ here is the problem
I defined the linkTemplate, the normal link goes forward has right color with arrowhead, but the backward arrow doesn’t work in correct color.
I try to delete the Text Panel named ‘LABEL’, but the same result.
![a68c74da463ef0e78ef926d40e28e48]()
also I wrote this to increase the zOrder of ‘LABEL’:selectionChanged: function(link) { if(link.isSelected) { if(link.data.reset == 1) { // make zOrder higher myDiagram.model.setDataProperty(myDiagram.findLinkForKey(link.data.fid), 'zOrder', 30 + (new Date().getTime() / 100000000)) link.findObject('LABEL').visible = true } } else { link.findObject('LABEL').visible = false } },
Posts: 1
Participants: 1
@ahmetgundogdu wrote:
As seen in the picture, the doNoLink event runs when the mouse cursor port is left away from the port.
No problem when left close.
pay attention to the mouse cursorhow do i fix this problem?
Posts: 3
Participants: 2
@ahmetgundogdu wrote:
Can you try the code below locally?
When you move the grid, you will encounter freezing problem. What is the reason of this
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic GoJS Sample</title> <meta name="description" content="Interactive GoJS diagram demonstrating creating new nodes and links, reconnecting links, grouping and ungrouping, and context menus and tooltips for nodes, for links, and for the diagram background." /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Copyright 1998-2020 by Northwoods Software Corporation. --> <script src="go.js"></script> <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make; // for conciseness in defining templates myDiagram = $(go.Diagram, "myDiagramDiv"); myDiagram.grid = $(go.Panel, "Grid", { gridCellSize: new go.Size(8, 8) }, $(go.Shape, "LineH", { stroke: "#eaeaea", strokeDashArray: [1, 1], strokeDashOffset:0.5 }), $(go.Shape, "LineV", { stroke: "#eaeaea", strokeDashArray: [1, 1], strokeDashOffset:0.5 }), $(go.Shape, "LineH", { stroke: "#d7e8fa", interval: 4, strokeDashArray: [1, 1], strokeDashOffset:0.5 }), $(go.Shape, "LineV", { stroke: "#d7e8fa", interval: 4, strokeDashArray: [1, 1], strokeDashOffset:0.5 }) ); myDiagram.nodeTemplate = $(go.Node, "Auto", { locationSpot: go.Spot.Center }, $(go.Shape, "RoundedRectangle", { fill: "white", // the default fill, if there is no data bound value portId: "", cursor: "pointer", // the Shape is the port, not the whole Node // allow all kinds of links from and to this port fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true }, new go.Binding("fill", "color")), $(go.TextBlock, { font: "bold 14px sans-serif", stroke: '#333', margin: 6, // make some extra space for the shape around the text isMultiline: false, // don't allow newlines in text editable: true // allow in-place editing by user }, new go.Binding("text", "text").makeTwoWay()) ); myDiagram.linkTemplate = $(go.Link, { toShortLength: 3, relinkableFrom: true, relinkableTo: true }, // allow the user to relink existing links $(go.Shape, { strokeWidth: 2 }, new go.Binding("stroke", "color")), $(go.Shape, { toArrow: "Standard", stroke: null }, new go.Binding("fill", "color")) ); myDiagram.groupTemplate = $(go.Group, "Vertical", { selectionObjectName: "PANEL", // selection handle goes around shape, not label ungroupable: true // enable Ctrl-Shift-G to ungroup a selected Group }, $(go.TextBlock, { //alignment: go.Spot.Right, font: "bold 19px sans-serif", isMultiline: false, // don't allow newlines in text editable: true // allow in-place editing by user }, new go.Binding("text", "text").makeTwoWay(), new go.Binding("stroke", "color")), $(go.Panel, "Auto", { name: "PANEL" }, $(go.Shape, "Rectangle", // the rectangular shape around the members { fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3, portId: "", cursor: "pointer", // the Shape is the port, not the whole Node // allow all kinds of links from and to this port fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true }), $(go.Placeholder, { margin: 10, background: "transparent" }) // represents where the members are ) ); var nodeDataArray = [ { key: 1, text: "Alpha", color: "lightblue" }, { key: 2, text: "Beta", color: "orange" }, { key: 3, text: "Gamma", color: "lightgreen", group: 5 }, { key: 4, text: "Delta", color: "pink", group: 5 }, { key: 5, text: "Epsilon", color: "green", isGroup: true } ]; var linkDataArray = [ { from: 1, to: 2, color: "blue" }, { from: 2, to: 2 }, { from: 3, to: 4, color: "green" }, { from: 3, to: 1, color: "purple" } ]; myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); } </script> </head> <body onload="init()"> <div id="sample"> <div id="myDiagramDiv" style="border: solid 1px black; width:1800px; height:800px"></div> </div> </body> </html>
Posts: 2
Participants: 2
@sarvesh93 wrote:
Hello,
Since there is no way of saving template data in GOJS, what would be the best way to save a diagram in case of multiple templates, link information and also be able to save the position data of nodes?
Posts: 7
Participants: 2
@kumar1 wrote:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { ApptorCanvasComponent } from './canvas/canvas.component'; import { createCustomElement } from '@angular/elements'; import {GojsAngularModule} from 'gojs-angular'; @NgModule({ declarations: [], imports: [ BrowserModule, GojsAngularModule ], providers: [], entryComponents: [CanvasComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const widget: any = createCustomElement(CanvasComponent, { injector: this.injector }); customElements.define('canvas', widget); } }in canvas-component.ts file
import * as go from 'gojs'; import { DataSyncService, DiagramComponent, PaletteComponent } from 'gojs-angular';npm run build giving error
‘gojs-palette’ is not a known element:
- If ‘gojs-palette’ is an Angular component, then verify that it is part of this module.
- If ‘gojs-palette’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
Posts: 1
Participants: 1
@louis.meckes wrote:
Hi everyone, I am trying to use binding to select dynamically which layout to apply to group nodes depending on node “colSize” property. However it does not seem to work and the layout is not displayed
If I set it statically (commented line), it is displayed correctly, any ideas ?var threeColLayout = t(go.GridLayout,
{
wrappingColumn : 3,
cellSize : new go.Size(50, 10),
isRealtime: true }
);myDiagram.groupTemplate = t(go.Group, "Auto", { resizable: true, resizeObjectName: "PANEL", defaultAlignment: go.Spot.Center, locationSpot: go.Spot.Center, margin: 0, stretch: go.GraphObject.Fill, //layout: threeColLayout }, new go.Binding("layout", "colSize", function(c) { return threeColLayout; }),
Posts: 2
Participants: 2
@walter wrote:
Changes for 2.1.18
- Added the Belts and Rollers sample, showing belts or chains wending around rollers or gears.
- Fixed finding a node by key after undoing a call to Model.setKeyForNodeData.
- Fixed Diagram initialization without DIVs or with delayed initialization, where setting some properties like Diagram.scaleComputation would cause measuring errors.
- Improved handling of numeric large arc flag values when creating SVG arc PathSegments via PathSegment.constructor.
- Fixed the TypeScript declaration for GraphObject.make to handle AnimationTriggers.
For the previous release: GoJS version 2.1.17
Posts: 2
Participants: 1
@Krish wrote:
I am referring to https://gojs.net/latest/intro/linkLabels.html. From the example 2, how can I move the label text (hello) either close to Alpha or Beta.
Posts: 6
Participants: 2
@useche_dev wrote:
Hi, I have a question about how I can update a variable of my Angular component within a click method of the ContextMenu. In the click method I make a diagram.commit and in it I update information of my groups, but I also need to update a variable of the component, and when using this.varible it doesn’t update it or returns undefined, so I can’t update that value in my template. I was checking and implementing a GraphObject.click, but it didn’t work either. Is there any way to get the value change or return the variable out of the diagram context?
Posts: 7
Participants: 2
@jackerman09 wrote:
I am trying to configure my GoJS diagram (using LayeredDiagraphLayout) such that the panels showing a link’s label (in this example it displays a percentage) is always at the foreground, in front of all other items on the diagram. Currently, it is displaying with some link lines in front of the panels (as shown in this image):
My goal:
To ensure that panels displaying percentages are always visible in front of everything else.
What I’ve Tried So Far:
Bringing the links into the Foreground layer (as suggested here):
myDiagram.linkTemplate = $$(go.Link, { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 5, layerName:"Foreground" }, $$(go.Shape, { strokeWidth: 3, stroke: "#555" }), $$(go.Panel, "Auto", // this whole Panel is a link label $$(go.Shape, "RoundedRectangle", { fill: "lightgray", stroke: "gray" }), $$(go.TextBlock, { margin: 3 }, new go.Binding("text", "ownership")) ) );Assigning a zOrder directly to the
go.Panel,go.Shape, andgo.TextBlockitems seen in the code above, however, all gave errors like this:Uncaught Error: Trying to set undefined property "zOrder" on object: Shape(RoundedRectangle). According to the documentation,PartextendsPanel, so I expected that I would be able to assign azOrderto aPanel, but it is giving this error, so apparently my expectations were wrong.How can I configure this diagram such that the Panel on the Link is always at the foreground and therefore always visible in front of everything else? Thank you!
Posts: 11
Participants: 2
@swang92 wrote:
Hello!
I am trying to select a shape once I hover over a node. I am following https://gojs.net/latest/learn/graphobject.html. It is saying that a node is also a panel / graph object. I am able to use the “obj” variable used in mouse over, however it returns null. What am I doing incorrect?
You can see the mouse over on lines 9-12 and the shapes I am trying to select on lines 91 & 123
Thank you!
Posts: 6
Participants: 2
@wuchen9999 wrote:
dont know how to get the picture by node, and has changed background color as below on click node,
code as below
keyResultDiagram.nodes.each(function(n) {
console.log(n.data);if(n.data.status == stage ) { var shape = n.findObject("SHAPE"); var GO = go.GraphObject.make; var color = "#302e2f3d"; if (shape) { shape.fill = GO(go.Brush, "Linear", { 0 : color, 1 : go.Brush.lightenBy(color, 0.05), start : go.Spot.Left, end : go.Spot.Right }); } } }) keyResultViewModel.executeStage(false);if any advice for get picture by node or how to dynamic replace the picture?
how to replace the highlight picture
Posts: 1
Participants: 1
@reshma1 wrote:
I have created context menu. Now i want that first menu button from upper side and last menu button from lower side should have rounded corners. Is it possible to do? What should I use?
Posts: 2
Participants: 2
@kishangajjar wrote:
Hi,
I want to represent Group looking more like a Node when its collapsed and when user click to expand it should look like a collection.
Can you please share some examples/samples around it?
Posts: 1
Participants: 1
@swang92 wrote:
Hello!
I was wondering if gojs is able to “toggle” a link connection rather than having to “click” the port “hold and drag” to other port. To clarify “toggle”, a user would click the port, the linking tool will activate, and when you click another port or the diagram it self it will either link to a port or cancel the linking tool.
Hopefully I explained that correctly.
Thank you!
Posts: 3
Participants: 2
@diego wrote:
I have this setup, trying to get the left side to be same height as the right size, even when the group gets resized. here is the template I’m working with
function getGroupTemplate(panelClick) { return make(gojs.Group, 'Horizontal', make(gojs.Panel, 'Auto', make(gojs.Shape, 'RoundedRectangle', // surrounds the Placeholder { strokeDashArray: [8, 2], parameter1: 14, fill: 'white' }), make(gojs.TextBlock, // group title - name {alignment: gojs.Spot.TopLeft , font: 'normal normal 400 normal 14px Roboto'}, new gojs.Binding('text', 'key')) ), make(gojs.Panel, 'Auto', {click: panelClick}, make(gojs.Shape, 'RoundedRectangle', // surrounds the Placeholder { strokeDashArray: [8, 2], parameter1: 14, fill: 'white' }), make(gojs.Placeholder, // represents the area with all devices inside , {padding: 5}) // some extra padding around devices inside )); }
Posts: 1
Participants: 1
@scholar wrote:
Hello, I have a problem here. I use the
model.setKeyForNodeData(data, data.key)method to update my node data, but it does not take effect. Am I using it wrong?
Correct it, the data has been updated, but the graph has not been updated.
And also, I usemodel.commit((m) => { m.set(m, 'nodeDataArray', nodeDataArray) }, 'flash')this method to initialize the loading data will be very slow, sometimes the browser will crash, if I select all nodes to use this method to follow all the new node data, it will be very slow and sometimes the browser will crash.
Please help me, thanks!
Posts: 1
Participants: 1
@BATU wrote:
when I change the group padding, the space does not change immediately
https://jsfiddle.net/batobolg/bmypcvjk/30/
press the button try it.
Posts: 2
Participants: 2
