@estesbubba wrote:

In our print code we allow the user to select the scale and have based the code off your printing example. What happens is when the scale isn't 1.0 the tiling doesn't work properly. Modifying your print example to do scale of 1.1 shows the problem. I also tried changing the boundswidth and boundsheight multiplying by 1.1 but that doesn't help. Here is what I changed in printing.html and this happens with both 1.5 and 1.6.

  var imgDiv = document.getElementById('myImages');
  imgDiv.innerHTML = ''; // clear out the old images, if any
  var db = myDiagram.documentBounds.copy();
  var boundswidth = db.width * 1.1;
  var boundsheight = db.height * 1.1;
  var imgWidth = width;
  var imgHeight = height;
  var p = db.position.copy();
  for (var i = 0; i < boundsheight; i += imgHeight) {
    for (var j = 0; j < boundswidth; j += imgWidth) {
      img = myDiagram.makeImage({
        scale: 1.1,
        position: new go.Point(p.x + j, p.y + i),
        size: new go.Size(imgWidth, imgHeight)
      });
      // Append the new HTMLImageElement to the #myImages div
      img.className = 'images';
      imgDiv.appendChild(img);
      imgDiv.appendChild(document.createElement('br'));
    }
  }
}

Am I doing something wrong or could this be a bug?

Posts: 3

Participants: 2

Read full topic

@sfrtrd wrote:

I want add some additional data to the node and access the data when click it.The additional data isn't display in the node object.

Posts: 2

Participants: 2

Read full topic

@jarangbacot wrote:

I'm trying to create tree chart like this :

How to bypass child 1 level so child 3 will be at equal position and level as child 2 ?
Thanks

Posts: 4

Participants: 2

Read full topic

@venkadesr wrote:

Hi,
I am using go.js to create a visual interface as follows

I have associated the context menu for the square node, whereas I need a different context menu for parallelogram (target) node. In my case, whatever I am associated the context menu for square node is coming same for parallelogram node also.

Is it possible to have two different context menu (one for square node) and another one for parellelogram node? If so how to do it.

Regards,
R.Venkades (IDS software)

Posts: 1

Participants: 1

Read full topic

@puiggali wrote:

Can someone help me please?

myDiagram.nodeTemplate =
  $(go.Node, "Auto",  // the whole node panel
    { selectionAdorned: true,
      resizable: true,
      layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
      fromSpot: go.Spot.AllSides,
      toSpot: go.Spot.AllSides,
      isShadowed: true,
      shadowColor: "#C5C1AA",

        fromLinkable: true,
        fromLinkableSelfNode: true,
        fromLinkableDuplicates: true,
        toLinkable: true,
        toLinkableSelfNode: true,
        toLinkableDuplicates: true,
        cursor: "pointer"

       },
    new go.Binding("location", "location").makeTwoWay(),
    // define the node's outer shape, which will surround the Table
    $(go.Shape, "Rectangle",
      { fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),
    $(go.Panel, "Table",
      { margin: 8, stretch: go.GraphObject.Fill },
      $(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
      // the table header
      $(go.TextBlock,
        {
          row: 0, alignment: go.Spot.Center,
          margin: new go.Margin(0, 14, 0, 2),  // leave room for Button
          font: "bold 16px sans-serif",
          editable: true, isMultiline: false
        },
        new go.Binding("text", "key").makeTwoWay()),
        new go.Binding("segmentOffset", "segmentOffset", go.Point.parse).makeTwoWay(go.Point.stringify), //Actualitza automaticament les dades al codi
      // the collapse/expand button
      $("PanelExpanderButton", "LIST",  // the name of the element whose visibility this button toggles
        { row: 0, alignment: go.Spot.TopRight }),
      // the list of Panels, each showing an attribute
      $(go.Panel, "Vertical",
        {
          name: "LIST",
          row: 1,
          padding: 3,
          alignment: go.Spot.TopLeft,
          defaultAlignment: go.Spot.Left,
          stretch: go.GraphObject.Horizontal,
          itemTemplate: itemTempl
        },
        new go.Binding("itemArray", "items")),

      { // this tooltip Adornment is shared by all nodes
      toolTip:
        $(go.Adornment, "Auto",
          $(go.Shape, { fill: "#FFFFCC" }),
          $(go.TextBlock, { margin: 4 },  // the tooltip shows the result of calling nodeInfo(data)
            new go.Binding("text", "", nodeInfo))
        ),
      // this context menu Adornment is shared by all nodes
      contextMenu: partContextMenu
    }

    )  // end Table Panel

Posts: 6

Participants: 2

Read full topic

@3.141592 wrote:

I have a table node with two table panels that contain ports, one in column 0 and the other in column 2 (leftmost and rightmost columns).

I have a contextMenu that will display when rightclicking on the table panels containing ports - is there a good way of getting the panel's column data, so I can see if the panel clicked was the left or right panel?

I've tried using things like using obj.panel.column but I keep getting the value 0

Posts: 3

Participants: 2

Read full topic

@pingfu163 wrote:

in this below demo, I want to modify the polyline to bezier line, How to implement it ?

http://gojs.net/latest/extensions/PolygonDrawing.html
Thanks.

Posts: 2

Participants: 2

Read full topic

@zeineb wrote:

Hello, How can make a dynamic UML class in which i can add rows to add new attributes? thank you

Posts: 1

Participants: 1

Read full topic

@jarangbacot wrote:

I want to know how to set TreeVertex.level manually. Is there any example ?
Thanks

Posts: 2

Participants: 2

Read full topic

@smat wrote:

Hi, I have a tree with nodes. Some of them have a small picture that I want to show magnified if user hover with mouse over the small picture.
It works but I can show only first picture magnified by hover.
How I get hover to show for every node's picture exact the picture hovered actually.
I tried to write the node name into a hidden input and use it to get node's name to access the appropriate picture but it friezes with picture of first hovered node.
How I can get it to show for every hovered node the picture belonging to the node?
Below an idea how it's done now - it's a modified code from some example.
Please help.

Within the node definition I have:

{
    mouseHover: function(e, obj) {
        var node = obj.part;
        jQuery("[name='matNoHover']").val(node.data.text);
        nodeHoverAdornment.adornedObject = node;
        node.addAdornment("mouseHover", nodeHoverAdornment);
    }
}

and the definition of nodeHoverAdornment looks like below:

   var nodeHoverAdornment =
      $(go.Adornment, "Spot",
        {
          background: "transparent",
          mouseLeave: function(e, obj) {
            var ad = obj.part;
            ad.adornedPart.removeAdornment("mouseHover");
          }
        },
        $(go.Placeholder,
          {
            background: "transparent",  // to allow this Placeholder to be "seen" by mouse events
            isActionable: true,  // needed because this is in a temporary Layer
            click: function(e, obj) {
              var node = obj.part.adornedPart;
              node.diagram.select(node);
            }
          }),
        $(go.Picture, { desiredSize: new go.Size(150, 150),
                        margin: 2,
                        source: 'http://.../' + getPicture(jQuery("[name='matNoHover']").val())) })
      );

Posts: 2

Participants: 2

Read full topic

@walter wrote:

Changes for 1.6.4:
- Wheel scrolling now respects Diagram.allowHorizontalScroll and Diagram.allowVerticalScroll in all code paths.

The GoJS web site now supports HTTPS, even though there's no real need for that, being a static web site with no user entry forms.

For older changes, see https://forum.nwoods.com/t/gojs-version-1-6-3/6809

Posts: 2

Participants: 1

Read full topic

@sunil wrote:

var diaWidth=63431, diaHeight=1010;
var test= diagram.makeImageData({
background: 'white',
scale: 1,
type: "image/jpeg",
maxSize: new go.Size(diaWidth, diaHeight)
});

Above is the code I am used to set the image width and height but still its not working for me.
Could give suggestion for me how to resolve this.

Posts: 3

Participants: 2

Read full topic

@marc1 wrote:

Is there a way to layout a tree structure to fill a page or viewable area on the screen?

Posts: 6

Participants: 2

Read full topic

@jarangbacot wrote:

I want to find only the first child of treeleaf or last parent, how can i do it?

Thanks

Posts: 2

Participants: 2

Read full topic

@bkowalchuk wrote:

We have created a design based very closely on your flowchart sample.The flowchart sample DOES have the behavior that I want.

I am having a couple small problems that I can't seem to resolve.

Problem 1: When link is added, the link is redrawn with different ports. Very annoying.
Problem 2: The ports on the Condition node (Diamond shape) appear inside the shape, not on the edges.

Below is the JS code from my page:

        function init() {  // init for these samples -- you don't need to call this
            var $ = go.GraphObject.make;  // for conciseness in defining templates
            //IsReadOnly = parentWindow.IsReadOnly;

            switch (qsMode){
                case 0:
                    IsReadOnly = true;
                    IsDisabled = true;
                    break;
                case 1:
                    IsReadOnly = true;
                    IsDisabled = false;
                    break;
                case 2:
                    IsReadOnly = false;
                    IsDisabled = false;
                    break;
                default:
                    break;
            }

            if ((hdnGoJSData.value != "")) {
                (jQuery)("#mySavedModel").val(hdnGoJSData.value);
            }

            goDiagram =
                $(go.Diagram, "myDiagram",  // must name or refer to the DIV HTML element
                    {
                        initialContentAlignment : go.Spot.TopCenter,
                        allowDrop: true,  // must be true to accept drops from the Palette
                        //    isReadOnly: IsReadOnly,
                        "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
                        "LinkRelinked": showLinkLabel,
                        "undoManager.isEnabled": true  // enable undo & redo
                    });


            //Call the ajax to redraw the runtime diagram from the server values on initial load
            goDiagram.addDiagramListener("InitialLayoutCompleted", function (ev){
                var itmestatusjson = document.getElementById("<%= WorkflowItemStatus.ClientID %>");
                SetWorkflowItemState(itmestatusjson.value);
            });

            goDiagram.addDiagramListener("ObjectContextClicked", function (ev) {

                if (qsMode != 1) {

                    //set popup title, ev.subject.le is inner text
                    var selectedNode = goDiagram.selection.iterator.first();
                    var selectedNodeText = selectedNode.Qe.text;
                    if (selectedNodeText === 'undefined') {
                        return false;
                    }

                    // Only allow action items and decision items to show a popup in design mode
                    var selectedNodeCategory = selectedNode.Qe.category;
                    if (selectedNodeCategory === 'Start' || selectedNodeCategory === 'End' || selectedNodeCategory === 'Link' || selectedNodeCategory === 'Comment') {
                        return false;
                    }

                    // Set the title text (for both design and runtime popups)
                    (jQuery)("#lblNodeText").text(selectedNodeText);
                    (jQuery)("#lblNodeText2").text(selectedNodeText);
                    (jQuery)("#lblConditionNodeText").text(selectedNodeText);
                    (jQuery)("#lblComplianceNodeText").text(selectedNodeText);

                    if (selectedNodeCategory) {
                        OnSingleClick(selectedNodeCategory);
                    }
                }
                return false;
            });

            goDiagram.addDiagramListener("ObjectSingleClicked", function (ev) {
                if (qsMode == 1) {

                    //set popup title, ev.subject.le is inner text
                    var selectedNode = goDiagram.selection.iterator.first();
                    var selectedNodeText = selectedNode.Qe.text;
                    if (selectedNodeText === 'undefined') {
                        return false;
                    }

                    // Only allow action items and decision items to show a popup in design mode
                    var selectedNodeCategory = selectedNode.Qe.category;
                    if (selectedNodeCategory === 'Start' || selectedNodeCategory === 'End' || selectedNodeCategory === 'Link' || selectedNodeCategory === 'Comment') {
                        return false;
                    }

                    // Set the title text (for both design and runtime popups)
                    (jQuery)("#lblNodeText").text(selectedNodeText);
                    (jQuery)("#lblNodeText2").text(selectedNodeText);
                    (jQuery)("#lblConditionNodeText").text(selectedNodeText);
                    (jQuery)("#lblComplianceNodeText").text(selectedNodeText);

                    var selectedNodeKey = selectedNode.Qe.key;

                    if (selectedNodeCategory) {

                        var statusItem = null;
                        for (var k = 0; k < itemsarray.Items.Item.length; k++) {
                            if (itemsarray.Items.Item[k].Key == selectedNodeKey) {
                                statusItem = itemsarray.Items.Item[k];
                                break;
                            }
                        }

                        if (statusItem.IsDisabled != "1") {
                            OnSingleClick(selectedNodeCategory);
                        }
                    }
                }
                return false;
            });

            function nodeStyle() {
                return [
                    // The Node.location comes from the "loc" property of the node data,
                    // converted by the Point.parse static method.
                    // If the Node.location is changed, it updates the "loc" property of the node data,
                    // converting back using the Point.stringify static method.
                    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                    {
                        // the Node.location is at the center of each node
                        locationSpot: go.Spot.Center,
                        //isShadowed: true,
                        //shadowColor: "#888",
                        // handle mouse enter/leave events to show/hide the ports
                        mouseEnter: function (e, obj) { showPorts(obj.part, true); },
                        mouseLeave: function (e, obj) { showPorts(obj.part, false); },
                    }
                ];
            }

            // Define a function for creating a "port" that is normally transparent.
            // The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect
            // and where the port is positioned on the node, and the boolean "output" and "input" arguments
            // control whether the user can draw links from or to the port.
            function makePort(name, spot, output, input) {
                // the port is basically just a small circle that has a white stroke when it is made visible
                return $(go.Shape, "Circle",
                    {
                        fill: "transparent",
                        stroke: null,  // this is changed to "white" in the showPorts function
                        desiredSize: new go.Size(8, 8),
                        alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
                        portId: name,  // declare this object to be a "port"
                        fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
                        fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
                        cursor: "pointer"  // show a different cursor to indicate potential link point
                    });
            }

            // define the Node templates for regular nodes

            var lightText = 'whitesmoke';

            goDiagram.nodeTemplateMap.add("",  // the default category
                $(go.Node, "Spot", nodeStyle(),
                    // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
                    $(go.Panel, "Auto",
                        $(go.Shape, "Rectangle",
                        { fill: "#00A9C9", stroke: null},
                        new go.Binding("figure", "figure"),
                        new go.Binding("fill","fill").makeTwoWay()),
                        $(go.TextBlock,
                            {   name: "TEXTBLOCK",
                                font: "bold 11pt Helvetica, Arial, sans-serif",
                                stroke: lightText,
                                margin: 8,
                                maxSize: new go.Size(160, NaN),
                                wrap: go.TextBlock.WrapFit,
                                editable: true
                            },
                            new go.Binding("text", "text").makeTwoWay())
                ),
                // four named ports, one on each side:
                makePort("T", go.Spot.Top, false, true),
                makePort("L", go.Spot.Left, true, true),
                makePort("R", go.Spot.Right, true, true),
                makePort("B", go.Spot.Bottom, true, false)
            ));

            goDiagram.nodeTemplateMap.add("Start",
                $(go.Node, "Spot", nodeStyle(),
                    $(go.Panel, "Auto",
                        $(go.Shape, "Circle",
                            { minSize: new go.Size(40, 60), fill: "#79C900", stroke: null}),
                        $(go.TextBlock, "Start",
                            { margin: 5, font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
                            new go.Binding("text", "text").makeTwoWay())
                    ),
                    // three named ports, one on each side except the top, all output only:
                    makePort("L", go.Spot.Left, true, false),
                    makePort("R", go.Spot.Right, true, false),
                    makePort("B", go.Spot.Bottom, true, false)
                ));

            goDiagram.nodeTemplateMap.add("End",
                $(go.Node, "Spot", nodeStyle(),
                    $(go.Panel, "Auto",
                        $(go.Shape, "Circle",
                            { minSize: new go.Size(40, 60), fill: "#DC3C00", stroke: null} ),
                        $(go.TextBlock, "End",
                            { margin: 5, font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText }, new go.Binding("text", "text").makeTwoWay())
                    ),

                    // three named ports, one on each side except the bottom, all input only:
                    makePort("T", go.Spot.Top, false, true),
                    makePort("L", go.Spot.Left, false, true),
                    makePort("R", go.Spot.Right, false, true)
                ));

            goDiagram.nodeTemplateMap.add("Action",
                $(go.Node, "Auto", nodeStyle(),
                    $(go.Shape, "File",
                        { fill: "#EFFAB4", stroke: null},
                        new go.Binding("fill","fill").makeTwoWay()),
                    $(go.TextBlock,
                        {   name: "TEXTBLOCK",
                            margin: 5,
                            maxSize: new go.Size(200, NaN),
                            wrap: go.TextBlock.WrapFit,
                            textAlign: "center",
                            editable: true,
                            font: "bold 11pt Helvetica, Arial, sans-serif",
                            stroke: '#454545'
                        },
                        new go.Binding("text", "text").makeTwoWay()),
                    makePort("T", go.Spot.Top, false, true),
                    makePort("L", go.Spot.Left, true, false),
                    makePort("R", go.Spot.Right, true, false),
                    makePort("B", go.Spot.Bottom, true, false)
                ));


            goDiagram.nodeTemplateMap.add("Condition",
                $(go.Node, "Auto", nodeStyle(),
                    $(go.Shape, "Diamond",
                        { fill: "#70706F", stroke: null},
                        new go.Binding("fill","fill").makeTwoWay()),
                    $(go.TextBlock,
                        {   name: "TEXTBLOCK",
                            margin: 5,
                            maxSize: new go.Size(200, NaN),
                            wrap: go.TextBlock.WrapFit,
                            textAlign: "center",
                            editable: true,
                            font: "bold 11pt Helvetica, Arial, sans-serif",
                            stroke: 'whitesmoke'
                        },
                        new go.Binding("text", "text").makeTwoWay()),
                    makePort("T", go.Spot.Top, false, true),
                    makePort("L", go.Spot.Left, true, true),
                    makePort("R", go.Spot.Right, true, true),
                    makePort("B", go.Spot.Bottom, true, false)
                ));

            goDiagram.nodeTemplateMap.add("Compliance",
                $(go.Node, "Auto", nodeStyle(),
                    $(go.Shape, "ManualOperation",
                        { fill: "#009900", stroke: null},
                        new go.Binding("fill","fill").makeTwoWay()),
                    $(go.TextBlock,
                        {   name: "TEXTBLOCK",
                            margin: 5,
                            maxSize: new go.Size(200, NaN),
                            wrap: go.TextBlock.WrapFit,
                            textAlign: "center",
                            editable: true,
                            font: "bold 11pt Helvetica, Arial, sans-serif",
                            stroke: 'whitesmoke'
                        },
                        new go.Binding("text", "text").makeTwoWay()),
                    makePort("T", go.Spot.Top, true, true),
                    makePort("B", go.Spot.Bottom, true, true) //Two ports, only required
                ));

            goDiagram.nodeTemplateMap.add("Comment",
                $(go.Node, "Auto", nodeStyle(),
                    $(go.Shape, "File",
                        { fill: "#EFF28E", stroke: null }),
                    $(go.TextBlock,
                        {   name: "TEXTBLOCK",
                            margin: 5,
                            maxSize: new go.Size(200, NaN),
                            wrap: go.TextBlock.WrapFit,
                            textAlign: "center",
                            editable: true,
                            font: "bold 11pt Helvetica, Arial, sans-serif",
                            stroke: '#454545'
                        },
                        new go.Binding("text", "text").makeTwoWay())
                    // no ports, because no links are allowed to connect with a comment
                ));

            // replace the default Link template in the linkTemplateMap
            goDiagram.linkTemplate =
                $(go.Link,  // the whole link panel
                    {
                        routing: go.Link.Orthogonal,
                        curve: go.Link.JumpOver,
                        corner: 5,
                        toShortLength: 4,
                        relinkableFrom: true,
                        relinkableTo: true,
                        //reshapable: true,
                        mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
                        mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; }
                    },
                    new go.Binding("points").makeTwoWay(),
                            $(go.Shape,  // the highlight shape, normally transparent
      { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
                    $(go.Shape,  // the link path shape
                        { isPanelMain: true, stroke: "gray", strokeWidth: 2, name: "LINK" },
                         new go.Binding("stroke", "stroke").makeTwoWay()),
                    $(go.Shape,  // the arrowhead
                        { toArrow: "standard", stroke: null, fill: "gray" }),
                    $(go.Panel, "Auto",  // the link label, normally not visible
                        { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
                        new go.Binding("visible", "visible").makeTwoWay(),
                        $(go.Shape, "RoundedRectangle",  // the label shape
                            { fill: "#F8F8F8", stroke: null }),
                        $(go.TextBlock, "Enter Choice",  // the label
                            {
                                name: "TEXTBLOCK",
                                textAlign: "center",
                                font: "10pt helvetica, arial, sans-serif",
                                stroke: "#333333",
                                editable: true,
                            },
                            new go.Binding("text", "text").makeTwoWay(),
                            new go.Binding("stroke", "stroke").makeTwoWay())
                    )
                );

            // Make link labels visible if coming out of a "conditional" node.
            // This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
            function showLinkLabel(e) {
                var label = e.subject.findObject("LABEL");
                if (label !== null) {
                    label.visible = (e.subject.fromNode.data.category === "Condition");
                }
            }

            // temporary links used by LinkingTool and RelinkingTool are also orthogonal:
            goDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
            goDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

            load();  // load an initial diagram from some JSON text

            // initialize the Palette that is on the left side of the page
            myPalette =
                $(go.Palette, "myPalette",  // must name or refer to the DIV HTML element
                    {
                        nodeTemplateMap: goDiagram.nodeTemplateMap,  // share the templates used by goDiagram
                        model: new go.GraphLinksModel([  // specify the contents of the Palette
                            { category: "Start", text: "<%= GetLocalResourceObject("gojsStartTagResource1")%>" },
                            { category: "ActionNode", text: "<%=GetLocalResourceObject("gojsActionTagResource1")%>", color: "#1E90FF" },
                            { category: "Condition", text: "<%=GetLocalResourceObject("gojsConditionTagResource1")%>", figure: "Diamond" },
                            { category: "Comment", text: "<%= GetLocalResourceObject("gojsCommentTagResource1")%>", figure: "RoundedRectangle" },
                            { category: "Compliance", text: "<%= GetLocalResourceObject("gojsComplianceResource1")%>", figure: "ManualEntry" },
                            { category: "End", text: "<%= GetLocalResourceObject("gojsEndTagResource1")%>" }
                        ])
                    });
                } // init END


                // Make all ports on a node visible when the mouse is over the node
                function showPorts(node, show) {
                    var diagram = node.diagram;
                    if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
                    node.ports.each(function (port) {
                        port.stroke = (show ? "white" : null);
                    });
                }


                // Show the diagram's model in JSON format that the user may edit
                function load() {
                    goDiagram.model = go.Model.fromJson((jQuery)("#mySavedModel").val());
                    if (IsDisabled) // thsi doesn't appear to be working with goJS
                    {
                        goDiagram.isDisabled = true;
                    }

                    goDiagram.isReadOnly =  IsReadOnly;

                }

Posts: 4

Participants: 2

Read full topic

@st wrote:

To judge each node contains...
Thank you.

Posts: 2

Participants: 2

Read full topic

@shivani wrote:

is there a way to activate draw link only on border of NodeShape not the whole area.
For eg:
current scenario hand cursor is coming for all the area except the textblock area

what i want to achieve is that the hand cursor should come only on the border of the node shape:

thanks in advance

Posts: 2

Participants: 2

Read full topic

@AndyP wrote:

Hi,
now the users want to change the visual representation of a node in runtime.
Is it possible to change the template of a node after it is created?
"Undo" should work also.

Posts: 16

Participants: 2

Read full topic

@shameer.sheik wrote:

Hi,

the graphlinksmodel gets a json as follows

{ "class": "go.GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},
{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},
{"key":0, "loc":"0 77", "text":"Preheat oven to 375 F"},
{"key":1, "loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},
{"key":2, "loc":"175 190", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},
{"key":3, "loc":"175 270", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},
{"key":4, "loc":"175 370", "text":"Press evenly into ungreased 15x10x1 pan"},
{"key":5, "loc":"352 85", "text":"Finely chop 1/2 cup of your choice of nuts"},
{"key":6, "loc":"175 440", "text":"Sprinkle nuts on top"},
{"key":7, "loc":"175 500", "text":"Bake for 25 minutes and let cool"},
{"key":8, "loc":"175 570", "text":"Cut into rectangular grid"},
{"key":-2, "category":"End", "loc":"175 640", "text":"Enjoy!"}
],
"linkDataArray": [
{"from":1, "to":2, "fromPort":"B", "toPort":"T"},
{"from":2, "to":3, "fromPort":"B", "toPort":"T"},
{"from":3, "to":4, "fromPort":"B", "toPort":"T"},
{"from":4, "to":6, "fromPort":"B", "toPort":"T"},
{"from":6, "to":7, "fromPort":"B", "toPort":"T"},
{"from":7, "to":8, "fromPort":"B", "toPort":"T"},
{"from":8, "to":-2, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":0, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":1, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":5, "fromPort":"B", "toPort":"T"},
{"from":5, "to":4, "fromPort":"B", "toPort":"T"},
{"from":0, "to":4, "fromPort":"B", "toPort":"T"}
]}

is it possible to change "linkDataArray" to "mylinkDataArray" and "nodeDataArray" to "mynodeDataArray" , so that

i have read this from your intro page , still wanted to confirm

The node data and the link data in models can be any JavaScript object. You get to decide what properties those objects have -- add as many as you need for your app.

how can i do this ? is this possible ?

Posts: 3

Participants: 2

Read full topic