gojs

<!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="TypeScript: Allow the user to shift ports that are in a node."/> <link rel="stylesheet" href="../assets/css/style.css"/>  <title>Logic Circuit with shiftable ports</title> </head> <body>  <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"> <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"> <div class="md:pl-4"> <a class="text-white hover:text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../"> <h1 class="my-0 p-1 ">GoJS</h1> </a> </div> <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path> <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"> <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"> <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto"> <div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <div id="allSampleContent" class="p-4 w-full"> <script id="code"> function init() { require(["PortShiftingScript"], function(app) { app.init(); document.getElementById("saveModel").onclick = app.save; document.getElementById("loadModel").onclick = app.load; }); } window.addEventListener('DOMContentLoaded', init); </script> <div id="sample"> <div style="width: 100%; display: flex; justify-content: space-between"> <div id="palette" style="width: 100px; height: 500px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div> <div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div> </div> <div id="description"> <p> This is exactly like the <a href="../samples/LogicCircuit.html">Logic Circuit sample</a> but also makes use of the PortShiftingTool, which is defined in <a href="PortShiftingTool.ts" target="_blank">PortShiftingTool.ts</a> </p> <p> When the user wants to shift the position of a port on a node, the user can hold down the Shift key during a mouse-down on a port element. Dragging then will move the port within the node. </p> <p> Note how the relative position of the port within the node is maintained as you resize the node. </p> <p> If you want to persist the port's spot, you should add a TwoWay Binding of the <a>GraphObject.alignment</a> property with a property that you define on the node data for each port. </p> <p> This sample does not constrain the position of the port within the node, but you could adapt the PortShiftingTool.updateAlignment method to do so. For example if you wanted, you could keep a port stuck along one edge of the node. </p> </div> <div id="buttons"> <button id="saveModel">Save</button> <button id="loadModel">Load</button> </div> <textarea id="mySavedModel" style="width:100%;height:200px"> { "class": "go.GraphLinksModel", "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ {"category":"input", "key":"input1", "loc":"-150 -80" }, {"category":"or", "key":"or1", "loc":"-70 0" }, {"category":"not", "key":"not1", "loc":"10 0" }, {"category":"xor", "key":"xor1", "loc":"100 0" }, {"category":"or", "key":"or2", "loc":"200 0" }, {"category":"output", "key":"output1", "loc":"200 -100" } ], "linkDataArray": [ {"from":"input1", "fromPort":"out", "to":"or1", "toPort":"in1"}, {"from":"or1", "fromPort":"out", "to":"not1", "toPort":"in"}, {"from":"not1", "fromPort":"out", "to":"or1", "toPort":"in2"}, {"from":"not1", "fromPort":"out", "to":"xor1", "toPort":"in1"}, {"from":"xor1", "fromPort":"out", "to":"or2", "toPort":"in1"}, {"from":"or2", "fromPort":"out", "to":"xor1", "toPort":"in2"}, {"from":"xor1", "fromPort":"out", "to":"output1", "toPort":""} ]} </textarea> </div> </div>   </div> </body>  <script src="../assets/js/goSamples.js"></script> </html>