@scottcom4 wrote:
Hi Guys,
Evaluating GoJS at the moment have been playing around with the samples provided, however I have been unable to get the Record Mapper example to work. I am just presented with a blank canvas.
I can get other examples working correctly (as I hope you can see in the below code), so am confused as to what I am doing wrong.
Any help would be greatly appreciated.
Regards.
Scott<!DOCTYPE html> <!-- HTML5 document type --> <html> <head> <p>This works as desired.</p> <div id="myDiagramDiv" style="width:100%; height:500px; background-color: #DAE4E4;"></div> <!-- use go-debug.js when developing and go.js when deploying --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.15/go-debug.js"></script> <script> 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 }); // define a simple Node template myDiagram.nodeTemplate = $(go.Node, "Horizontal", // the entire node will have a light-blue background { background: "#44CCFF" }, $(go.Picture, // Pictures should normally have an explicit width and height. // This picture has a red background, only visible when there is no source set // or when the image is partially transparent. { margin: 10, width: 50, height: 50, background: "red" }, // Picture.source is data bound to the "source" attribute of the model data new go.Binding("source")), $(go.TextBlock, "Default Text", // the initial value for TextBlock.text // some room around the text, a larger font, and a white stroke: { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, // TextBlock.text is data bound to the "name" attribute of the model data new go.Binding("text", "name")) ); var model = $(go.Model); model.nodeDataArray = [ // note that each node data object holds whatever properties it needs; // for this app we add the "name" and "source" properties { name: "Don Meow", source: "cat1.png" }, { name: "Copricat", source: "cat2.png" }, { name: "Demeter", source: "cat3.png" }, { /* Empty node data */ } ]; myDiagram.model = model; </script> <p>This works as desired.</p> <div id="myDiagramDiv1" style="width:100%; height:500px; background-color: #DAE4E4;"></div> <script> var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv1", { initialContentAlignment: go.Spot.Center, // center Diagram contents "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo }); // the template we defined earlier myDiagram.nodeTemplate = $(go.Node, "Horizontal", { background: "#44CCFF" }, $(go.Picture, { margin: 10, width: 50, height: 50, background: "red" }, new go.Binding("source")), $(go.TextBlock, "Default Text", { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, new go.Binding("text", "name")) ); var model = $(go.TreeModel); model.nodeDataArray = [ // the "key" and "parent" property names are required, // but you can add whatever data properties you need for your app { key: "1", name: "Don Meow", source: "cat1.png" }, { key: "2", parent: "1", name: "Demeter", source: "cat2.png" }, { key: "3", parent: "1", name: "Copricat", source: "cat3.png" }, { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" }, { key: "5", parent: "3", name: "Alonzo", source: "cat5.png" }, { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" } ]; myDiagram.model = model; </script> <p> This does not work as desired</p> <div id="myDiagramDiv2" style="width:100%; height:500px; background-color: #DAE4E4;"></div> <script> 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, "myDiagramDiv2", { initialContentAlignment: go.Spot.Center, validCycle: go.Diagram.CycleNotDirected, // don't allow loops // For this sample, automatically show the state of the diagram's model on the page "ModelChanged": function(e) { if (e.isTransactionFinished) showModel(); }, "undoManager.isEnabled": true }); // This template is a Panel that is used to represent each item in a Panel.itemArray. // The Panel is data bound to the item object. 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, 5), column: 1, font: "bold 13px sans-serif", alignment: go.Spot.Left, // 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, 5), column: 2, font: "13px sans-serif", alignment: go.Spot.Left }, new go.Binding("text", "info")) ); // This template represents a whole "record". myDiagram.nodeTemplate = $(go.Node, "Auto", { movable: false, copyable: false, deletable: false }, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), // this rectangular shape surrounds the content of the node $(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 ); // end Node myDiagram.linkTemplate = $(go.Link, { relinkableFrom: true, relinkableTo: true, // let user reconnect links toShortLength: 4, fromShortLength: 2 }, $(go.Shape, { strokeWidth: 1.5 }), $(go.Shape, { toArrow: "Standard", stroke: null }) ); myDiagram.model = $(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" } ] }); showModel(); // show the diagram's initial model function showModel() { document.getElementById("mySavedModel").textContent = myDiagram.model.toJson(); } } </script> </head>
Posts: 3
Participants: 2