create-gojs-kit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/> <meta name="description" content="A finite state machine chart with editable and interactive features." /> <meta itemprop="description" content="A finite state machine chart with editable and interactive features." /> <meta property="og:description" content="A finite state machine chart with editable and interactive features." /> <meta name="twitter:description" content="A finite state machine chart with editable and interactive features." /> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="../assets/css/style.css">  <meta itemprop="name" content="State Chart Diagram Editor with Labeled Transition Links" /> <meta property="og:title" content="State Chart Diagram Editor with Labeled Transition Links" /> <meta name="twitter:title" content="State Chart Diagram Editor with Labeled Transition Links" /> <meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/statechart.png" /> <meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/statechart.png" /> <meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/statechart.png" /> <meta property="og:url" content="https://gojs.net/latest/samples/stateChart.html" /> <meta property="twitter:url" content="https://gojs.net/latest/samples/stateChart.html" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="og:type" content="website" /> <meta property="twitter:domain" content="gojs.net" /> <title> State Chart Diagram Editor with Labeled Transition Links | GoJS Diagramming Library </title> </head> <body>  <nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200"> <div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4"> <a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo" href="../"> GoJS </a> <div class="relative"> <button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation"> <svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div id="topnavList" class="hidden md:block"> <div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit"> <a href="../learn/">Learn</a> <a href="../samples/">Samples</a> <a href="../intro/">Intro</a> <a href="../api/">API</a> <a href="../download.html">Download</a> <a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a> <a id="tc" href="https://nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a> <a id="tb" href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a> </div> </div> </div> </div> </nav> <script> window.addEventListener("DOMContentLoaded", function () { // topnav var topButton = document.getElementById("topnavButton"); var topnavList = document.getElementById("topnavList"); if (topButton && topnavList) { topButton.addEventListener("click", function (e) { topnavList .classList .toggle("hidden"); e.stopPropagation(); }); document.addEventListener("click", function (e) { // if the clicked element isn't the list, close the list if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) { topButton.click(); } }); // set active <a> element var url = window .location .href .toLowerCase(); var aTags = topnavList.getElementsByTagName('a'); for (var i = 0; i < aTags.length; i++) { var lowerhref = aTags[i] .href .toLowerCase(); if (lowerhref.endsWith('.html')) lowerhref = lowerhref.slice(0, -5); if (url.startsWith(lowerhref)) { aTags[i] .classList .add('active'); break; } } } }); </script> <div class="flex flex-col prose"> <div class="w-full max-w-screen-xl mx-auto">   <script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script> <div id="allSampleContent" class="p-4 w-full"> <script id="code"> function init() { myDiagram = new go.Diagram('myDiagramDiv', { padding: 12, 'animationManager.initialAnimationStyle': go.AnimationStyle.None, InitialAnimationStarting: e => { var animation = e.subject.defaultAnimation; animation.easing = go.Animation.EaseOutExpo; animation.duration = 800; animation.add(e.diagram, 'scale', 0.3, 1); animation.add(e.diagram, 'opacity', 0, 1); }, // have mouse wheel events zoom in and out instead of scroll up and down 'toolManager.mouseWheelBehavior': go.WheelMode.Zoom, // support double-click in background creating a new node 'clickCreatingTool.archetypeNodeData': { text: 'new node' }, // enable undo & redo 'undoManager.isEnabled': true }); // when the document is modified, add a "*" to the title and enable the "Save" button myDiagram.addDiagramListener('Modified', e => { const button = document.getElementById('SaveButton'); if (button) button.disabled = !myDiagram.isModified; const idx = document.title.indexOf('*'); if (myDiagram.isModified) { if (idx < 0) document.title += '*'; } else { if (idx >= 0) document.title = document.title.slice(0, idx); } }); const colors = { pink: '#facbcb', blue: '#b7d8f7', green: '#b9e1c8', yellow: '#faeb98', background: '#e8e8e8' }; const colorsDark = { green: '#3fab76', yellow: '#f4d90a', blue: '#0091ff', pink: '#e65257', background: '#161616' }; myDiagram.div.style.backgroundColor = colors.background; myDiagram.nodeTemplate = new go.Node('Auto', { isShadowed: true, shadowBlur: 0, shadowOffset: new go.Point(5, 5), shadowColor: 'black' }) .bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify) .add( new go.Shape('RoundedRectangle', { strokeWidth: 1.5, fill: colors.blue, portId: '', fromLinkable: true, fromLinkableSelfNode: false, fromLinkableDuplicates: true, toLinkable: true, toLinkableSelfNode: false, toLinkableDuplicates: true, cursor: 'pointer' }) .bind('fill', 'type', type => { if (type === 'Start') return colors.green; if (type === 'End') return colors.pink; return colors.blue; }) .bind('figure', 'type', type => { if (type === 'Start' || type === 'End') return 'Circle'; return 'RoundedRectangle'; }), new go.TextBlock({ font: 'bold small-caps 11pt helvetica, bold arial, sans-serif', shadowVisible: false, margin: 8, font: 'bold 14px sans-serif', stroke: '#333', editable: true }) .bindTwoWay('text') ); // unlike the normal selection Adornment, this one includes a Button myDiagram.nodeTemplate.selectionAdornmentTemplate = new go.Adornment('Spot') .add( new go.Panel('Auto') .add( new go.Shape('RoundedRectangle', { fill: null, stroke: colors.pink, strokeWidth: 3 }), new go.Placeholder() // a Placeholder sizes itself to the selected Node ), // the button to create a "next" node, at the top-right corner go.GraphObject.build('Button', { alignment: go.Spot.TopRight, click: addNodeAndLink // this function is defined below }) .add( new go.Shape('PlusLine', { width: 6, height: 6 }) ) // end button ); // clicking the button inserts a new node to the right of the selected node, // and adds a link to that new node function addNodeAndLink(e, obj) { var adornment = obj.part; var diagram = e.diagram; diagram.startTransaction('Add State'); // get the node data for which the user clicked the button var fromNode = adornment.adornedPart; var fromData = fromNode.data; // create a new "State" data object, positioned off to the right of the adorned Node var toData = { text: 'new' }; var p = fromNode.location.copy(); p.x += 200; toData.loc = go.Point.stringify(p); // the "loc" property is a string, not a Point object // add the new node data to the model var model = diagram.model; model.addNodeData(toData); // create a link data from the old node data to the new node data var linkdata = { from: model.getKeyForNodeData(fromData), // or just: fromData.id to: model.getKeyForNodeData(toData), text: 'transition' }; // and add the link data to the model model.addLinkData(linkdata); // select the new Node var newnode = diagram.findNodeForData(toData); diagram.select(newnode); diagram.commitTransaction('Add State'); // if the new node is off-screen, scroll the diagram to show the new node if (!diagram.viewportBounds.containsRect(newnode.actualBounds)) { diagram.commandHandler.scrollToPart(newnode); } } // replace the default Link template in the linkTemplateMap myDiagram.linkTemplate = new go.Link({ // shadow options are for the label, not the link itself isShadowed: true, shadowBlur: 0, shadowColor: 'black', shadowOffset: new go.Point(2.5, 2.5), curve: go.Curve.Bezier, curviness: 40, adjusting: go.LinkAdjusting.Stretch, reshapable: true, relinkableFrom: true, relinkableTo: true, fromShortLength: 8, toShortLength: 10 }) .bindTwoWay('points') .bind('curviness') .add( // Main shape geometry new go.Shape({ strokeWidth: 2, shadowVisible: false, stroke: 'black' }) .bind('strokeDashArray', 'progress', progress => progress ? [] : [5, 6]) .bind('opacity', 'progress', progress => progress ? 1 : 0.5), // Arrowheads new go.Shape({ fromArrow: 'circle', strokeWidth: 1.5, fill: 'white' }) .bind('opacity', 'progress', progress => progress ? 1 : 0.5), new go.Shape({ toArrow: 'standard', stroke: null, scale: 1.5, fill: 'black' }) .bind('opacity', 'progress', progress => progress ? 1 : 0.5), // The link label new go.Panel('Auto') .add( new go.Shape('RoundedRectangle', { shadowVisible: true, fill: colors.yellow, strokeWidth: 0.5 }), new go.TextBlock({ font: '9pt helvetica, arial, sans-serif', margin: 1, editable: true, // enable in-place editing text: 'Action' // default text }) .bind('text') // editing the text automatically updates the model data ) ); // read in the JSON data from the "mySavedModel" element load(); } // Show the diagram's model in JSON format function save() { document.getElementById('mySavedModel').value = myDiagram.model.toJson(); myDiagram.isModified = false; } function load() { myDiagram.model = go.Model.fromJson(document.getElementById('mySavedModel').value); } window.addEventListener('DOMContentLoaded', init); </script> <div id="sample"> <div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 470px; background: whitesmoke"></div> <p>This sample creates a state chart to story-board an online shopping experience.</p> <p> The text is editable for both the <a>Node</a>s and the <a>Link</a>s. The user can draw as many links from one <a>Node</a> to another <a>Node</a> as desired. To create a new <a>Link</a> start dragging from the edge of a <a>Node</a>. The <a>Link</a> s can be reshaped or deleted when selected. Double-clicking in the background of the <a>Diagram</a> creates a new node. The mouse wheel is set to zoom in and out instead of scroll. </p> <p> This sample customizes the <a>Part.selectionAdornmentTemplate</a> of the node to a template that contains a button. The button is positioned to be at the Top-Right corner of the node by being in a Spot Panel with its <a>GraphObject.alignment</a> property set to Spot.TopRight. </p> <p> The Button's <a>GraphObject.click</a> method creates a new node data, adds it to the model, and creates a link from the original node data to the new node data. All of this is done inside a transaction, so that it can be undone by the user (Ctrl+Z and Ctrl+Y will undo and redo transactions). After the node is created, <a>CommandHandler.scrollToPart</a> is called to try to center it. </p> <div> <div> <button id="SaveButton" onclick="save()">Save</button> <button onclick="load()">Load</button> Diagram Model saved in JSON format: </div> <textarea id="mySavedModel" style="width: 100%; height: 300px"> { "class": "go.GraphLinksModel", "nodeKeyProperty": "id", "pointsDigits": 0, "nodeDataArray": [ {"id":-1, "loc":"155 -150", "type":"Start", "text":"Start" }, {"id":0, "loc":"190 15", "text":"Shopping"}, {"id":1, "loc":"353 32", "text":"Browse Items"}, {"id":2, "loc":"353 166", "text":"Search Items"}, {"id":3, "loc":"552 12", "text":"View Item"}, {"id":4, "loc":"700 -95", "text":"View Cart"}, {"id":5, "loc":"660 100", "text":"Update Cart"}, {"id":6, "loc":"850 20", "text":"Checkout"}, {"id":-2, "loc":"830 200", "type":"End", "text":"End" } ], "linkDataArray": [ { "from": -1, "to": 0, "progress": true, "text": "Visit online store", "curviness": -10 }, { "from": 0, "to": 1, "progress": true, "text": "Browse" }, { "from": 0, "to": 2, "progress": true, "text": "Use search bar", "curviness": -70 }, { "from": 1, "to": 2, "progress": true, "text": "Use search bar" }, { "from": 2, "to": 3, "progress": true, "text": "Click item", "curviness": -70 }, { "from": 2, "to": 2, "progress": false, "text": "Another search", "curviness": 40 }, { "from": 1, "to": 3, "progress": true, "text": "Click item" }, { "from": 3, "to": 0, "progress": false, "text": "Not interested", "curviness": -100 }, { "from": 3, "to": 4, "progress": true, "text": "Add to cart" }, { "from": 4, "to": 0, "progress": false, "text": "More shopping", "curviness": -150 }, { "from": 4, "to": 5, "progress": false, "text": "Update needed", "curviness": 70 }, { "from": 5, "to": 4, "progress": false, "text": "Update made" }, { "from": 4, "to": 6, "progress": true, "text": "Proceed" }, { "from": 6, "to": 5, "progress": false, "text": "Update needed"}, { "from": 6, "to": -2, "progress": true, "text": "Purchase made" } ] } </textarea> </div> </div> </div>   </div> <div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto"> <hr/> <h3 class="text-xl">GoJS Features in this sample</h3>  <h4>Buttons</h4> <p> GoJS defines several <a href="../api/symbols/Panel.html" target="api">Panel</a>s for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels. </p> <p> These predefined panels can be used as if they were <a href="../api/symbols/Panel.html" target="api">Panel</a>-derived classes in calls to <a href="../api/symbols/GraphObject.html#build" target="api">GraphObject.build</a>. They are implemented as simple visual trees of <a href="../api/symbols/GraphObject.html" target="api">GraphObject</a>s in <a href="../api/symbols/Panel.html" target="api">Panel</a>s, with pre-set properties and event handlers. </p> <p> More information can be found in the <a href="../intro/buttons.html">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#buttons">Related samples</a> </p> <hr>  </div> </div> </body>  <script src="../assets/js/goSamples.js"></script> </html>