gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
299 lines (276 loc) • 15.2 kB
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="Moving (not copying) nodes between two Diagrams and two different Models sharing an UndoManager."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Two Diagrams</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<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>
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script src="../extensions/Robot.js"></script>
<script id="code">
function init() {
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make; // for conciseness in defining templates
// ****** First Diagram ******
myDiagram = new go.Diagram("myDiagramDiv",
{
allowDragOut: true,
"commandHandler.archetypeGroupData": { isGroup: true },
// handle undo or redo maybe changing Diagram properties controlled by check boxes
"ModelChanged": e => {
if (e.isTransactionFinished) allChecks(true);
},
// A Diagram listener must be placed on both Diagrams.
// When a collection of Parts is dragged into a diagram and dropped, the normal behavior is
// to copy the data and create new Parts in the destination diagram.
// To simulate a "move", the source Node must be deleted.
// To allow a forced "copy", don't delete if the control key was held down in the source diagram.
"ExternalObjectsDropped": e => {
if (myDiagram2.commandHandler.canDeleteSelection() &&
!(myDiagram2.lastInput.control || myDiagram2.lastInput.meta)) {
myDiagram2.commandHandler.deleteSelection();
}
}
});
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the Shape will go around the TextBlock
$(go.Shape, "RoundedRectangle",
{ portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer", strokeWidth: 0 },
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8 }, // some room around the text
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key"))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
// ****** Second Diagram ******
myDiagram2 = new go.Diagram("myDiagramDiv2",
{
allowDragOut: true,
"commandHandler.archetypeGroupData": { isGroup: true },
// handle undo or redo maybe changing Diagram properties controlled by check boxes
"ModelChanged": e => {
if (e.isTransactionFinished) allChecks(true);
},
// A Diagram listener must be placed on both Diagrams.
// When a collection of Parts is dragged into a diagram and dropped, the normal behavior is
// to copy the data and create new Parts in the destination diagram.
// To simulate a "move", the source Node must be deleted.
// To allow a forced "copy", don't delete if the control key was held down in the source diagram.
"ExternalObjectsDropped": e => {
if (myDiagram.commandHandler.canDeleteSelection() &&
!(myDiagram.lastInput.control || myDiagram.lastInput.meta)) {
myDiagram.commandHandler.deleteSelection();
}
}
});
// share templates with the first diagram
myDiagram2.nodeTemplate = myDiagram.nodeTemplate;
// show a different model
myDiagram2.model = new go.GraphLinksModel(
[
{ key: "Zeta", color: "lightblue" },
{ key: "Eta", color: "orange" }
],
[
{ from: "Zeta", to: "Eta" }
]);
// But the Diagrams share the same undo manager!
myDiagram.model.undoManager = myDiagram2.model.undoManager;
myDiagram.model.undoManager.isEnabled = true;
// initialize all the HTML checkboxes
allChecks(true);
}
function allChecks(set) {
var MD1allowDragOut = document.getElementById("MD1allowDragOut");
var MD1allowDrop = document.getElementById("MD1allowDrop");
var MD1isReadOnly = document.getElementById("MD1isReadOnly");
var MD1allowDelete = document.getElementById("MD1allowDelete");
var MD1allowInsert = document.getElementById("MD1allowInsert");
var MD1allowMove = document.getElementById("MD1allowMove");
var MD2allowDragOut = document.getElementById("MD2allowDragOut");
var MD2allowDrop = document.getElementById("MD2allowDrop");
var MD2isReadOnly = document.getElementById("MD2isReadOnly");
var MD2allowDelete = document.getElementById("MD2allowDelete");
var MD2allowInsert = document.getElementById("MD2allowInsert");
var MD2allowMove = document.getElementById("MD2allowMove");
if (set) {
MD1allowDragOut.checked = myDiagram.allowDragOut;
MD1allowDrop.checked = myDiagram.allowDrop;
MD1isReadOnly.checked = myDiagram.isReadOnly;
MD1allowCopy.checked = myDiagram.allowCopy;
MD1allowDelete.checked = myDiagram.allowDelete;
MD1allowInsert.checked = myDiagram.allowInsert;
MD1allowMove.checked = myDiagram.allowMove;
MD2allowDragOut.checked = myDiagram2.allowDragOut;
MD2allowDrop.checked = myDiagram2.allowDrop;
MD2isReadOnly.checked = myDiagram2.isReadOnly;
MD2allowCopy.checked = myDiagram2.allowCopy;
MD2allowDelete.checked = myDiagram2.allowDelete;
MD2allowInsert.checked = myDiagram2.allowInsert;
MD2allowMove.checked = myDiagram2.allowMove;
} else {
myDiagram.startTransaction('a');
myDiagram.allowDragOut = MD1allowDragOut.checked;
myDiagram.allowDrop = MD1allowDrop.checked;
myDiagram.isReadOnly = MD1isReadOnly.checked;
myDiagram.allowCopy = MD1allowCopy.checked;
myDiagram.allowDelete = MD1allowDelete.checked;
myDiagram.allowInsert = MD1allowInsert.checked;
myDiagram.allowMove = MD1allowMove.checked;
myDiagram2.allowDragOut = MD2allowDragOut.checked;
myDiagram2.allowDrop = MD2allowDrop.checked;
myDiagram2.isReadOnly = MD2isReadOnly.checked;
myDiagram2.allowCopy = MD2allowCopy.checked;
myDiagram2.allowDelete = MD2allowDelete.checked;
myDiagram2.allowInsert = MD2allowInsert.checked;
myDiagram2.allowMove = MD2allowMove.checked;
myDiagram.commitTransaction('a');
}
}
function dragBetaAcross() {
var robot = new Robot(myDiagram);
var beta = myDiagram.findNodeForKey("Beta");
if (beta !== null) {
var opts = { sourceDiagram: myDiagram, targetDiagram: myDiagram2 };
var loc = beta.location;
robot.mouseDown(loc.x + 15, loc.y + 15, 0, opts);
robot.mouseMove(loc.x + 20, loc.y + 10, 100, opts);
robot.mouseMove(60, 20, 200, opts);
robot.mouseUp(80, 50, 300, opts);
} else {
console.log("Beta not found in myDiagram");
}
}
function copyBetaBack() {
var robot = new Robot(myDiagram2);
var beta = myDiagram2.findNodeForKey("Beta");
if (beta !== null) {
// turn off deletion in myDiagram2
var delbutton = document.getElementById("MD2allowDelete");
delbutton.checked = false;
delbutton.onclick(); // better way to simulate clicking on check box?
// now dragging between diagrams won't delete the source node in myDiagram2
var opts = { sourceDiagram: myDiagram2, targetDiagram: myDiagram };
var loc = beta.location;
robot.mouseDown(loc.x + 15, loc.y + 15, 0, opts);
robot.mouseMove(loc.x - 20, loc.y + 10, 100, opts);
robot.mouseMove(160, 40, 200, opts);
robot.mouseUp(80, 10, 300, opts);
} else {
console.log("Beta not found in myDiagram2");
}
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<p>
In this sample dragging from one Diagram to the other effectively "moves" the selection.
It does this by having an "ExternalObjectsDropped" Diagram listener on each Diagram,
which deletes the selection in the original Diagram when it is dropped on an external one.
</p>
<p>The two Diagrams do not share a Model, but the two Models do share the same UndoManager:</p>
<pre>myDiagram.model.undoManager = myDiagram2.model.undoManager;</pre>
<p>Hence an undo or redo in one Diagram affects the other Diagram. This allows Node "moves" to be undone across Diagrams.</p>
<p>(This is different from the <a href="updateDemo.html">Update Demo</a>, which is an example of two Diagrams sharing/showing the same Model.)</p>
<div style="width: 100%; display: flex; flex-wrap: wrap">
<div>
<div id="myDiagramDiv" style="border: solid 1px black; width:350px; height:300px; margin: 0 2px 0 0"></div>
<p>
<label><input type="checkbox" onclick="allChecks()" id="MD1allowDragOut" />allowDragOut</label>
<label><input type="checkbox" onclick="allChecks()" id="MD1allowDrop" />allowDrop</label>
<label><input type="checkbox" onclick="allChecks()" id="MD1isReadOnly" />isReadOnly</label>
</p>
<p>
<label><input type="checkbox" onclick="allChecks()" id="MD1allowCopy" />allowCopy</label>
<label><input type="checkbox" onclick="allChecks()" id="MD1allowDelete" />allowDelete</label>
<label><input type="checkbox" onclick="allChecks()" id="MD1allowInsert" />allowInsert</label>
<label><input type="checkbox" onclick="allChecks()" id="MD1allowMove" />allowMove</label>
</p>
</div>
<div>
<div id="myDiagramDiv2" style="border: solid 1px black; width:350px; height:300px"></div>
<p>
<label><input type="checkbox" onclick="allChecks()" id="MD2allowDragOut" />allowDragOut</label>
<label><input type="checkbox" onclick="allChecks()" id="MD2allowDrop" />allowDrop</label>
<label><input type="checkbox" onclick="allChecks()" id="MD2isReadOnly" />isReadOnly</label>
</p>
<p>
<label><input type="checkbox" onclick="allChecks()" id="MD2allowCopy" />allowCopy</label>
<label><input type="checkbox" onclick="allChecks()" id="MD2allowDelete" />allowDelete</label>
<label><input type="checkbox" onclick="allChecks()" id="MD2allowInsert" />allowInsert</label>
<label><input type="checkbox" onclick="allChecks()" id="MD2allowMove" />allowMove</label>
</p>
</div>
</div>
<div>
Using the Robot extension class:<br />
<button onclick="dragBetaAcross()">Drag Beta across</button><br />
<button onclick="copyBetaBack()">Copy Beta back</button>
</div>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>