@Z.Tom wrote:
The DiagramLayout in GoXam is not very suitable for a large amout of nodes and links,especially the ForceDirectedLayout.Follow is my illustration:
As you see in the graph, the nodes overlapped,and the effect of display is not good.
So I want to use my Custom Layout with my layout algorithm，so implement the DiagramLayout and rewrite the function DOLayout(); but it didn't work;
Can any one help me ?
Thx
Z.Tom
Posts: 2
Participants: 2
@Glidias wrote:
It only works on individual object (like go.Node instances) within the Diagram itself, but it doesn't seem to fire when I "drag-enter" some copied items from my Palette diagram into the main Diagram.
How do I detect drag transitions from one Diagram into the another Diagram? Ie. How do you guys detect drag changes when transfering (entering/exiting) from one diagram to the next and vice versa? I noticed that the appearance of the DraggableTool's copied-items changes when dragging over different diagrams when the Diagrams use different node appearance templates. How do you detect the transitionatory changes when the drag-copied items changes it's node template appearance when moving into another new Diagram with a new node template? Is there anyway I can hook into this event to modify the appearance of the drag-copied items accordingly?
NOTE: I can't depend on mouseDragEnter, because there's no guarantee that I'd drag into any existing object within the Diagram. (ie. the Diagram might be empty/sparse), so will drag intno empty space..When I drag a new instance of something into the empty space of a Diagram, mouseDragEnter fails to fire for the Diagram.
Mainly, I need event for:
- Drag-copied items created from a given diagram.
- Drag copied items transition to a new diagram...
But i can't seem to find this anywhere on DraggableTool or something...
Posts: 4
Participants: 2
@Rizwan wrote:
Can you provide WPF, MVVM sample application for plotting Force Layout graph.
Regards
Posts: 8
Participants: 2
@Glidias wrote:
I have a TextBlock overlaid on top of a Shape that is used as a port, and the problem is the TextBlock is preventing the Shape from being easily selected/clicked. Is there a way to allow "click-through" for TextBlock like pointer-events:none or something??
Posts: 2
Participants: 2
@bhaskar wrote:
HI,
Please find the environment details:GO JS Version: GoJS v1.6.0-beta5
Operating System: Win 7
Browsers: IE, Chrome, MozillaWe want to download go js layout to png with more data. When we zoom out the layout not able to download to png where as if we zoom in able to download. Can you please check attached screenshots for references. I thought to send total POC to you, i am not able to attach ZIP file in this forum.
Thanks
Bhaskar
Posts: 2
Participants: 2
@chary wrote:
Hi
I am try to generate a image base64string from the diagram. which has scale 2 and for the smaller diagrams it is generating but for the huge diagram it is not generating. it gets null from the makeImageData function
var img = mydiagram.makeImageData({
background: "white",
scale: mydiagram.scale,
maxSize: new go.Size(Infinity, Infinity)
});
Posts: 5
Participants: 2
@lipuabhishek wrote:
Hi, I have a situation where nodes in a model can have child models as well.
I was wondering if there is any way to replace a node in parent model with its respective child model.
Posts: 2
Participants: 2
@caihua1003 wrote:
I am the new one to GoJS, when I run the example of Mapping Fields, the results like
,
see the text, the text head be cutted, how can I fix this?
Posts: 2
Participants: 2
@Rizwan wrote:
DiagramPanel.Scale is a dependency property, so you can data bind to it. In XAML: ...="{Binding Path=Panel.Scale, ElementName=myDiagram}"
Posts: 2
Participants: 2
@Rajeshpatil74 wrote:
I am completely new to GO.JS and wanted to create a node template with following constrains -
- Node template is rectangle shape with two inner rectangle shape.
- The inner rectangle should be with dotted lines.
- The dotted rectangle contains text blocks
Now, depending on my setting, I should be able to see dotted lines optionally. For eq. By using the created node in design interface I should be able to see the dotted rectangle (so user can drag-drop custom information) and when actual results is displayed using same node template the dotted lines should not be visible (final result).
How I can achieve this ? I am tring to modify the same of Entity relationship template and found that Shape cannot be added within another shape.
Will you provide some sample code for same.
Posts: 6
Participants: 3
@Rizwan wrote:
Please see the attached images it shows the problem when rubberband selection , cursor hangs in between and when zooming also screen renders slowly, there is no smooth selection and zooming
Regards
Posts: 4
Participants: 2
@Vitaly wrote:
My GoDiagram Application has 2 GoViews. And the nodes in 1st goView have reference of other node in 2nd GoView. This application contains some code which is performed when some node is changed in 1st goView then the node(its reference is stored in a node in 1st goView) in the 2nd GoView is modified.
Now , this works fine when I am creating everything at first time. But when I save this as XML using GoXML writer and open it using GoXML reader, it opens only diagram. But I can not save references of nodes as this is heap memory location which will be different when I reads next time. So when I read again the diagram(both diagrams 1st and 2nd goView), I want to make changes in the diagrams which should be reflected in other diagram(as code uses references of nodes). But currently, I can not do these changes in diagram, opened reading existing XML of the diagram.
I want to know best practice to solve above issue with minimum time to open saved diagrams. I know that i need to somehow get back the new references and keep in each node. But I am finding it difficult to do it.
Could you please help me to solve the problem?Thanks you very much...
Posts: 2
Participants: 2
@patrick_fay wrote:
Hi,
How can we simulate diagram events for testing. I notice that a diagram object has an undocumented raiseDiagramEvent method, which we have tried with no success. Is it possible to simulate DiagramEvents?
Thanks
Posts: 2
Participants: 2
@timbijnen wrote:
Hi,
I want to implement a custom function that handles te portspreading of links on a node. What would be the best practise to do this?
Thanks,
Tim
Posts: 2
Participants: 2
@halley wrote:
When i try to collapse or expand a tree after moving the nodes, the tree always returns to the original position. Is there a way to to allow tree to stay at the position that was before the operation.
Thanks,
Halley
Posts: 3
Participants: 2
@walter wrote:
Changes for 1.6.7
- Extended the ContextMenuTool to work on a right-mouse-down event if the tool is in the ToolManager.mouseDownTools list.
- Changed how the main Shapes of Links are measured to be more accurate. This may cause Links to have different position and location values than before.
- Fixed a collapse animation bug when rolling back transactions.For older changes, see https://forum.nwoods.com/t/gojs-version-1-6-6/6897.
Posts: 2
Participants: 1
@puiggali wrote:
How Can I find a link by a labelKeys. I try to find by example myDiagram.findLinksByExample({ "labelKeys": "-10" }) but i can't. I only can findLinksByExample with from or to. Please, can someone help me? Thank you very much.
I have this:
{ "class": "go.GraphLinksModel", "linkLabelKeysProperty": "labelKeys", "nodeDataArray": [ .... ], "linkDataArray": [ {"category":"pointer", "from":3, "to":4, "labelKeys":[ -8 ]}, {"category":"pointer", "from":4, "to":6, "labelKeys":[ -10 ]}, {"category":"pointer", "from":6, "to":5, "labelKeys":[ -11 ]}, {"category":"pointer", "from":7, "to":6, "labelKeys":[ -12 ]}, {"category":"pointer", "from":3, "to":7, "labelKeys":[ -13 ]}, {"category":"pointer", "from":5, "to":7, "labelKeys":[ -14 ]} ]}
Posts: 2
Participants: 2
@strengthseok wrote:
First, I am a Korean.
Please understand i don't speak English well
In the example, I think I want to come out.
However, coming out in the form of debugging.
What should i do now
A detailed description, please.
thank you.[ Now ]
[Source]
link rel=STYLESHEET href="common/css/Inspector.css"/>
link rel=STYLESHEET href="common/css/jquery-ui.css"/>
link rel=STYLESHEET href="common/css/spectrum.css"/>script src="common/js/go_ori.js">
script src="common/js/Inspector.js">
script src="common/js/jquery.js">
script src="common/js/jquery-ui.min.js">
script src="common/js/spectrum.js">
script src="common/js/ExtendedBrush.js">
=================================================div id="myInfo" class="inspector"
=================================================
var inspector = new Inspector('myInfo', myDiagram,
{
acceptButton:true,
resetButton:true,
properties: {
"text": {},
"key": { readOnly: true, show: Inspector.showIfPresent },
"color": { type: 'color' }
}
});[Desired shape]
Posts: 3
Participants: 2
@nadeemparvez.ak wrote:
I am trying to incorporate the GOJS Diagram as part of modal popup which has a UIB TABSET which has 4 tabs and this diagram is part of an HTML included on 3rd TAB. The issue that we have here is for some reason the diagram initializes to zero size since it’s not on the first one.
The same diagram works perfectly alright when I call that html as part of the first tab. Things to be noted here is each tab includes a html file which has its own controller.
I went through one of the forum which recommends calling the below function
myDiagram.requestUpdate() // here myDiagram has my diagram description(function() { 'use strict'; angular .module('irisUi') .directive('goDiagram', function() { return { restrict: 'E', template: '<div></div>', // just an empty DIV element replace: true, scope: { model: '=goModel' }, link: function(scope, element, attrs) { var $ = go.GraphObject.make; var fieldTemplate = $(go.Panel, "TableRow", // this Panel is a row in the containing Table new go.Binding("portId", "name"), // this Panel is a "port" { background: "transparent", // so this port's background can be picked by the mouse fromSpot: go.Spot.Right, // links only go from the right side to the left side toSpot: go.Spot.Left, // allow drawing links from or to this port: fromLinkable: true, toLinkable: true }, $(go.Shape, { width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4, // but disallow drawing links from or to this shape: fromLinkable: false, toLinkable: false }, new go.Binding("figure", "figure"), new go.Binding("fill", "color")), $(go.TextBlock, { margin: new go.Margin(0, 2), column: 1, font: "bold 13px sans-serif", // and disallow drawing links from or to this text: fromLinkable: false, toLinkable: false }, new go.Binding("text", "name")), $(go.TextBlock, { margin: new go.Margin(0, 2), column: 2, font: "13px sans-serif" }, new go.Binding("text", "info")) ); var diagram = // create a Diagram for the given HTML DIV element $(go.Diagram, element[0], { nodeTemplate: $(go.Node, "Auto", { locationSpot: go.Spot.Center, movable: false, copyable: false, deletable: false }, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape, { fill: "#EEEEEE" }), // the content consists of a header and a list of items $(go.Panel, "Vertical", // this is the header for the whole node $(go.Panel, "Auto", { stretch: go.GraphObject.Horizontal }, // as wide as the whole node $(go.Shape, { fill: "#1570A6", stroke: null }), $(go.TextBlock, { alignment: go.Spot.Center, margin: 3, stroke: "white", textAlign: "center", font: "bold 12pt sans-serif" }, new go.Binding("text", "key"))), // this Panel holds a Panel for each item object in the itemArray; // each item Panel is defined by the itemTemplate to be a TableRow in this Table $(go.Panel, "Table", { padding: 2, minSize: new go.Size(100, 10), defaultStretch: go.GraphObject.Horizontal, itemTemplate: fieldTemplate }, new go.Binding("itemArray", "fields") ) // end Table Panel of items ) // end Vertical Panel ), linkTemplate: $(go.Link, { relinkableFrom: true, relinkableTo: true,toShortLength: 4 }, $(go.Shape, { strokeWidth: 1.5 }), $(go.Shape, { toArrow: "Standard", stroke: null }) ), initialContentAlignment: go.Spot.Center, "ModelChanged": updateAngular, "undoManager.isEnabled": true }); // whenever a GoJS transaction has finished modifying the model, update all Angular bindings function updateAngular(e) { if (e.isTransactionFinished) scope.$apply(); } // notice when the value of "model" changes: update the Diagram.model scope.$watch("model", function(newmodel) { var oldmodel = diagram.model; if (oldmodel !== newmodel) { diagram.removeDiagramListener("ChangedSelection", updateSelection); diagram.model = newmodel; diagram.addDiagramListener("ChangedSelection", updateSelection); } }); scope.$watch("model.selectedNodeData.name", function(newname) { if (!diagram.model.selectedNodeData) return; // disable recursive updates diagram.removeModelChangedListener(updateAngular); // change the name diagram.startTransaction("change name"); // the data property has already been modified, so setDataProperty would have no effect var node = diagram.findNodeForData(diagram.model.selectedNodeData); if (node !== null) node.updateTargetBindings("name"); diagram.commitTransaction("change name"); // re-enable normal updates diagram.addModelChangedListener(updateAngular); }); // update the model when the selection changes function updateSelection(e) { var selnode = diagram.selection.first(); diagram.model.selectedNodeData = (selnode instanceof go.Node ? selnode.data : null); scope.$apply(); } diagram.addDiagramListener("ChangedSelection", updateSelection); } }; }) .controller('MappingController', MappingController); function MappingController($log, $scope, $http) { var vm = this; vm.hideMe = true; /* vm.mapClick = function() { alert("Map!"); }*/ $scope.model =go.GraphObject.make(go.GraphLinksModel, { linkFromPortIdProperty: "fromPort", linkToPortIdProperty: "toPort", nodeDataArray: [ { key: "Record1", fields: [ { name: "field1", info: "", color: "#F7B84B", figure: "Ellipse" }, { name: "field2", info: "the second one", color: "#F25022", figure: "Ellipse" }, { name: "fieldThree", info: "3rd", color: "#00BCF2" } ], loc: "0 0" }, { key: "Record2", fields: [ { name: "fieldA", info: "", color: "#FFB900", figure: "Diamond" }, { name: "fieldB", info: "", color: "#F25022", figure: "Rectangle" }, { name: "fieldC", info: "", color: "#7FBA00", figure: "Diamond" }, { name: "fieldD", info: "fourth", color: "#00BCF2", figure: "Rectangle" } ], loc: "250 0" } ], linkDataArray: [ { from: "Record1", fromPort: "field1", to: "Record2", toPort: "fieldA" }, { from: "Record1", fromPort: "field2", to: "Record2", toPort: "fieldD" }, { from: "Record1", fromPort: "fieldThree", to: "Record2", toPort: "fieldB" } ] }); $scope.model.selectedNodeData = null; } })();Below is how the html for the above controller is included on the tabset
uib-tab heading="Mapping" class="navhead" id="tab3" uib-tab-heading> Step 3 : Mapping uib-tab-heading> div ng-include="'app/config_gen/templates/mapping.html'"></div> uib-tab> // note i have to remove start tag for the code to appear
Posts: 2
Participants: 2
@nurub wrote:
I was trying to use GoJS with NodeJS in a simple program. I'm using NodeJS v4 on Win7. I'm testing on Firefox.
I'm also using Express and Jade with NodeJS
I didn't modify the default files like app.js after creating a project in NodeJS. The following are theindex.jade content
extends layout block content h1= title p Welcome to #{title} #myDiagramDiv(style='width:400px; height:150px; background-color: #DAE4E4;')index.js content
var express = require('express'); var router = express.Router(); var go; /* GET home page. */ router.get('/', function(req, res, next) { go = require("../node_modules/gojs/release/go-debug.js"); var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { initialContentAlignment: go.Spot.Center, // center Diagram contents "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo }); var myModel = $(go.Model); // in our model data, each node is represented by a JavaScript object: myModel.nodeDataArray = [ { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" } ]; myDiagram.model = myModel; res.render('index', { title: 'Express' }); }); module.exports = router;I'm getting on the browser the following error
window is not defined
ReferenceError: window is not defined
at Object. (C:\JavaScript\IQTestGenerator\graphTest\node_modules\gojs\release\go-debug.js:2055:325)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at C:\JavaScript\IQTestGenerator\graphTest\routes\index.js:14:10
at Layer.handle as handle_request
at next (C:\JavaScript\IQTestGenerator\graphTest\node_modules\express\lib\router\route.js:131:13)
Posts: 2
Participants: 2
,
