UNPKG

gojs/extensions/Robot.html

Version:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
6<meta name="description" content="Test a diagram by simulating abstract input events."/> 
7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
9<title>Simulating Input Events</title>
10</head>
11
12<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="mb-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 class="p-4 w-full">
53<script src="Robot.js"></script>
54
55<script id="code">
var robot;  // this global variable will hold an instance of the Robot class for myDiagram
57
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
61
  function showProperties(e, obj) {  // executed by ContextMenuButton
    var node = obj.part.adornedPart;
    var msg = "Context clicked: " + node.data.key + ". ";
    msg += "Selection includes:";
    myDiagram.selection.each(function(part) {
      msg += " " + part.toString();
    });
    document.getElementById("myStatus").textContent = msg;
  }
71
  function nodeClicked(e, obj) {  // executed by click and doubleclick handlers
    var evt = e.copy();
    var node = obj.part;
    var type = evt.clickCount === 2 ? "Double-Clicked: " : "Clicked: ";
    var msg = type + node.data.key + ". ";
    document.getElementById("myStatus").textContent = msg;
  }
79
  myDiagram =
    $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
      {
        nodeTemplate:
          $(go.Node, "Auto",
            {
              click: nodeClicked,
              doubleClick: nodeClicked,
              contextMenu:
                $("ContextMenu",
                  $("ContextMenuButton",
                    $(go.TextBlock, "Properties"),
                    { click: showProperties })
                )
            },
            $(go.Shape, "Rectangle",
              { fill: "lightgray" },
              { portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }),
            $(go.TextBlock,
              { margin: 3 },
              new go.Binding("text", "key"))),
        model: new go.GraphLinksModel([
          { key: "Lambda" },
          { key: "Mu" }
        ], [
            { from: "Lambda", to: "Mu" }
          ]),
        "undoManager.isEnabled": true
      });
109
  // a shared Robot that can be used by all commands for this one Diagram
  robot = new Robot(myDiagram);  // defined in Robot.js
112
  // initialize the Palette that is on the left side of the page
  myPalette =
    $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
      {
        nodeTemplate: myDiagram.nodeTemplate,
        model: new go.GraphLinksModel([  // specify the contents of the Palette
          { key: "Alpha" },
          { key: "Beta" },
          { key: "Gamma" },
          { key: "Delta" }
        ])
      });
}
126
function dragFromPalette() {
  // simulate a drag-and-drop between Diagrams:
  var dragdrop = { sourceDiagram: myPalette, targetDiagram: myDiagram };
  robot.mouseDown(5, 5, 0, dragdrop);  // this should be where the Alpha node is in the source myPalette
  robot.mouseMove(60, 60, 100, dragdrop);
  robot.mouseUp(100, 100, 200, dragdrop);  // this is where the node will be dropped in the target myDiagram
  // If successful in dragging a node from the Palette into the Diagram,
  // the DraggingTool will perform a transaction.
}
136
function copyNode() {
  var alpha = myDiagram.findNodeForKey("Alpha");
  if (alpha === null) return;
  var loc = alpha.actualBounds.center;
141
  var options = { control: true, alt: true };
  // Simulate a mouse drag to move the Alpha node:
  robot.mouseDown(loc.x, loc.y, 0, options);
  robot.mouseMove(loc.x + 80, loc.y + 50, 50, options);
  robot.mouseMove(loc.x + 20, loc.y + 100, 100, options);
  robot.mouseUp(loc.x + 20, loc.y + 100, 150, options);
  // If successful, will have made a copy of the "Alpha" node below it.
149
  // Alternatively you could copy the Node using commands:
  // myDiagram.commandHandler.copySelection();
  // myDiagram.commandHandler.pasteSelection(new go.Point(loc.x+20, loc.y+100));
}
154
function dragSelectNodes() {
  var alpha = myDiagram.findNodeForKey("Alpha");
  if (alpha === null) return;
  var alpha2 = myDiagram.findNodeForKey("Alpha2");
  if (alpha2 === null) return;
  var coll = new go.Set();
  coll.add(alpha);
  coll.add(alpha2);
  var area = myDiagram.computePartsBounds(coll);
  area.inflate(30, 30);
165
  // Simulate dragging in the background around the two Alpha nodes.
  // This uses timestamps to pretend to wait a while to avoid activating the PanningTool.
  // Hopefully this mouse down does not hit any Part, but in the Diagram's background:
  robot.mouseDown(area.x, area.y, 0);
  // NOTE that this mouseMove timestamp needs to be > myDiagram.toolManager.dragSelectingTool.delay:
  robot.mouseMove(area.centerX, area.centerY, 200);
  robot.mouseUp(area.right, area.bottom, 250);
  // Now should have selected both "Alpha" and "Alpha2" using the DragSelectingTool.
174
  // Alternatively you could select the Nodes programmatically:
  // alpha.isSelected = true;
  // alpha2.isSelected = true;
}
179
function clickContextMenu() {
  var alpha = myDiagram.findNodeForKey("Alpha");
  if (alpha === null) return;
  var loc = alpha.location;
184
  // right click on Alpha
  robot.mouseDown(loc.x + 10, loc.y + 10, 0, { right: true });
  robot.mouseUp(loc.x + 10, loc.y + 10, 100, { right: true });
188
  // Alternatively you could invoke the Show Context Menu command directly:
  // myDiagram.commandHandler.showContextMenu(alpha);
191
  // move mouse over first context menu button
  robot.mouseMove(loc.x + 20, loc.y + 20, 200);
  // and click that button
  robot.mouseDown(loc.x + 20, loc.y + 20, 300);
  robot.mouseUp(loc.x + 20, loc.y + 20, 350);
  // This should have invoked the ContextMenuButton's click function, showProperties,
  // which should have put a green message in the myStatus DIV.
}
200
function deleteSelection() {
  // Simulate clicking the "Del" key:
  robot.keyDown("Del");
  robot.keyUp("Del");
  // Now the selected Nodes are deleted.
206
  // Alternatively you could invoke the Delete command directly:
  // myDiagram.commandHandler.deleteSelection();
}
210
function clickLambda() {
  var lambda = myDiagram.findNodeForKey("Lambda");
  if (lambda === null) return;
  var loc = lambda.location;
215
  // click on Lambda
  robot.mouseDown(loc.x + 10, loc.y + 10, 0, {});
  robot.mouseUp(loc.x + 10, loc.y + 10, 100, {});
219
  // Clicking is just a sequence of input events.
  // There is no command in CommandHandler for such a basic gesture.
}
223
function doubleClickLambda() {
  var lambda = myDiagram.findNodeForKey("Lambda");
  if (lambda === null) return;
  var loc = lambda.location;
228
  // double-click on Lambda
  robot.mouseDown(loc.x + 10, loc.y + 10, 0, {});
  robot.mouseUp(loc.x + 10, loc.y + 10, 100, {});
  robot.mouseDown(loc.x + 10, loc.y + 10, 200, { clickCount: 2 });
  robot.mouseUp(loc.x + 10, loc.y + 10, 300, { clickCount: 2 });
}
window.addEventListener('DOMContentLoaded', init);
236</script>
237
238<div id="sample">
<div style="width: 100%; display: flex; justify-content: space-between">
  <div id="myPaletteDiv" style="width: 80px; height: 400px; margin-right: 2px; border: solid 1px black"></div>
  <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
</div>
<p>
To simulate mouse events the buttons below use the <b>Robot</b> class that is defined in <a href="Robot.js">Robot.js</a>.
</p>
<p>
Click these buttons in order from top to bottom:<br />
<button onclick="dragFromPalette()">Drag From Palette</button><br />
<button onclick="copyNode()">Copy Node</button><br />
<button onclick="dragSelectNodes()">Drag Select Nodes</button><br />
<button onclick="clickContextMenu()">Context Menu Click Alpha</button><br />
<button onclick="deleteSelection()">Delete</button><br />
</p>
<p>Clicking operations:<br />
<button onclick="clickLambda()">Click Lambda</button><br />
<button onclick="doubleClickLambda()">Double Click Lambda</button><br />
</p>
<p>
The <a>UndoManager</a> has been enabled in the main Diagram.
Give focus to the Diagram and you can undo everything and then redo everything to confirm what was executed by the Robot.
</p>
<div id="myStatus" style="color:green"></div>
263</div>
  </div>
  <!-- * * * * * * * * * * * * * -->
  <!--  End of GoJS sample code  -->
</div>
268</body>
269<!--  This script is part of the gojs.net website, and is not needed to run the sample -->
270<script src="../assets/js/goSamples.js"></script>
271</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6	`<meta name="description" content="Test a diagram by simulating abstract input events."/>`
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->`
9	`<title>Simulating Input Events</title>`
10	`</head>`
11
12	`<body>`
13	`<!-- This top nav is not part of the sample code -->`
14	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
15	`<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">`
16	`<div class="md:pl-4">`
17	`<a class="text-white hover:text-white no-underline hover:no-underline`
18	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
19	`<h1 class="mb-0 p-1 ">GoJS</h1>`
20	`</a>`
21	`</div>`
22	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
23	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
24	`<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>`
25	`<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>`
26	`</svg>`
27	`</button>`
28	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
29	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
30	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
31	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
32	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
33	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
34	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"`
38	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"`
40	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>`
41	`</ul>`
42	`</div>`
43	`</div>`
44	`<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />`
45	`</nav>`
46	`<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">`
47	`<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>`
48	`<!-- * * * * * * * * * * * * * -->`
49	`<!-- Start of GoJS sample code -->`
50
51	`<script src="../release/go.js"></script>`
52	`<div class="p-4 w-full">`
53	`<script src="Robot.js"></script>`
54
55	`<script id="code">`
56	`var robot; // this global variable will hold an instance of the Robot class for myDiagram`
57
58	`function init() {`
59	`if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this`
60	`var $ = go.GraphObject.make; // for conciseness in defining templates`
61
62	`function showProperties(e, obj) { // executed by ContextMenuButton`
63	`var node = obj.part.adornedPart;`
64	`var msg = "Context clicked: " + node.data.key + ". ";`
65	`msg += "Selection includes:";`
66	`myDiagram.selection.each(function(part) {`
67	`msg += " " + part.toString();`
68	`});`
69	`document.getElementById("myStatus").textContent = msg;`
70	`}`
71
72	`function nodeClicked(e, obj) { // executed by click and doubleclick handlers`
73	`var evt = e.copy();`
74	`var node = obj.part;`
75	`var type = evt.clickCount === 2 ? "Double-Clicked: " : "Clicked: ";`
76	`var msg = type + node.data.key + ". ";`
77	`document.getElementById("myStatus").textContent = msg;`
78	`}`
79
80	`myDiagram =`
81	`$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element`
82	`{`
83	`nodeTemplate:`
84	`$(go.Node, "Auto",`
85	`{`
86	`click: nodeClicked,`
87	`doubleClick: nodeClicked,`
88	`contextMenu:`
89	`$("ContextMenu",`
90	`$("ContextMenuButton",`
91	`$(go.TextBlock, "Properties"),`
92	`{ click: showProperties })`
93	`)`
94	`},`
95	`$(go.Shape, "Rectangle",`
96	`{ fill: "lightgray" },`
97	`{ portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }),`
98	`$(go.TextBlock,`
99	`{ margin: 3 },`
100	`new go.Binding("text", "key"))),`
101	`model: new go.GraphLinksModel([`
102	`{ key: "Lambda" },`
103	`{ key: "Mu" }`
104	`], [`
105	`{ from: "Lambda", to: "Mu" }`
106	`]),`
107	`"undoManager.isEnabled": true`
108	`});`
109
110	`// a shared Robot that can be used by all commands for this one Diagram`
111	`robot = new Robot(myDiagram); // defined in Robot.js`
112
113	`// initialize the Palette that is on the left side of the page`
114	`myPalette =`
115	`$(go.Palette, "myPaletteDiv", // must name or refer to the DIV HTML element`
116	`{`
117	`nodeTemplate: myDiagram.nodeTemplate,`
118	`model: new go.GraphLinksModel([ // specify the contents of the Palette`
119	`{ key: "Alpha" },`
120	`{ key: "Beta" },`
121	`{ key: "Gamma" },`
122	`{ key: "Delta" }`
123	`])`
124	`});`
125	`}`
126
127	`function dragFromPalette() {`
128	`// simulate a drag-and-drop between Diagrams:`
129	`var dragdrop = { sourceDiagram: myPalette, targetDiagram: myDiagram };`
130	`robot.mouseDown(5, 5, 0, dragdrop); // this should be where the Alpha node is in the source myPalette`
131	`robot.mouseMove(60, 60, 100, dragdrop);`
132	`robot.mouseUp(100, 100, 200, dragdrop); // this is where the node will be dropped in the target myDiagram`
133	`// If successful in dragging a node from the Palette into the Diagram,`
134	`// the DraggingTool will perform a transaction.`
135	`}`
136
137	`function copyNode() {`
138	`var alpha = myDiagram.findNodeForKey("Alpha");`
139	`if (alpha === null) return;`
140	`var loc = alpha.actualBounds.center;`
141
142	`var options = { control: true, alt: true };`
143	`// Simulate a mouse drag to move the Alpha node:`
144	`robot.mouseDown(loc.x, loc.y, 0, options);`
145	`robot.mouseMove(loc.x + 80, loc.y + 50, 50, options);`
146	`robot.mouseMove(loc.x + 20, loc.y + 100, 100, options);`
147	`robot.mouseUp(loc.x + 20, loc.y + 100, 150, options);`
148	`// If successful, will have made a copy of the "Alpha" node below it.`
149
150	`// Alternatively you could copy the Node using commands:`
151	`// myDiagram.commandHandler.copySelection();`
152	`// myDiagram.commandHandler.pasteSelection(new go.Point(loc.x+20, loc.y+100));`
153	`}`
154
155	`function dragSelectNodes() {`
156	`var alpha = myDiagram.findNodeForKey("Alpha");`
157	`if (alpha === null) return;`
158	`var alpha2 = myDiagram.findNodeForKey("Alpha2");`
159	`if (alpha2 === null) return;`
160	`var coll = new go.Set();`
161	`coll.add(alpha);`
162	`coll.add(alpha2);`
163	`var area = myDiagram.computePartsBounds(coll);`
164	`area.inflate(30, 30);`
165
166	`// Simulate dragging in the background around the two Alpha nodes.`
167	`// This uses timestamps to pretend to wait a while to avoid activating the PanningTool.`
168	`// Hopefully this mouse down does not hit any Part, but in the Diagram's background:`
169	`robot.mouseDown(area.x, area.y, 0);`
170	`// NOTE that this mouseMove timestamp needs to be > myDiagram.toolManager.dragSelectingTool.delay:`
171	`robot.mouseMove(area.centerX, area.centerY, 200);`
172	`robot.mouseUp(area.right, area.bottom, 250);`
173	`// Now should have selected both "Alpha" and "Alpha2" using the DragSelectingTool.`
174
175	`// Alternatively you could select the Nodes programmatically:`
176	`// alpha.isSelected = true;`
177	`// alpha2.isSelected = true;`
178	`}`
179
180	`function clickContextMenu() {`
181	`var alpha = myDiagram.findNodeForKey("Alpha");`
182	`if (alpha === null) return;`
183	`var loc = alpha.location;`
184
185	`// right click on Alpha`
186	`robot.mouseDown(loc.x + 10, loc.y + 10, 0, { right: true });`
187	`robot.mouseUp(loc.x + 10, loc.y + 10, 100, { right: true });`
188
189	`// Alternatively you could invoke the Show Context Menu command directly:`
190	`// myDiagram.commandHandler.showContextMenu(alpha);`
191
192	`// move mouse over first context menu button`
193	`robot.mouseMove(loc.x + 20, loc.y + 20, 200);`
194	`// and click that button`
195	`robot.mouseDown(loc.x + 20, loc.y + 20, 300);`
196	`robot.mouseUp(loc.x + 20, loc.y + 20, 350);`
197	`// This should have invoked the ContextMenuButton's click function, showProperties,`
198	`// which should have put a green message in the myStatus DIV.`
199	`}`
200
201	`function deleteSelection() {`
202	`// Simulate clicking the "Del" key:`
203	`robot.keyDown("Del");`
204	`robot.keyUp("Del");`
205	`// Now the selected Nodes are deleted.`
206
207	`// Alternatively you could invoke the Delete command directly:`
208	`// myDiagram.commandHandler.deleteSelection();`
209	`}`
210
211	`function clickLambda() {`
212	`var lambda = myDiagram.findNodeForKey("Lambda");`
213	`if (lambda === null) return;`
214	`var loc = lambda.location;`
215
216	`// click on Lambda`
217	`robot.mouseDown(loc.x + 10, loc.y + 10, 0, {});`
218	`robot.mouseUp(loc.x + 10, loc.y + 10, 100, {});`
219
220	`// Clicking is just a sequence of input events.`
221	`// There is no command in CommandHandler for such a basic gesture.`
222	`}`
223
224	`function doubleClickLambda() {`
225	`var lambda = myDiagram.findNodeForKey("Lambda");`
226	`if (lambda === null) return;`
227	`var loc = lambda.location;`
228
229	`// double-click on Lambda`
230	`robot.mouseDown(loc.x + 10, loc.y + 10, 0, {});`
231	`robot.mouseUp(loc.x + 10, loc.y + 10, 100, {});`
232	`robot.mouseDown(loc.x + 10, loc.y + 10, 200, { clickCount: 2 });`
233	`robot.mouseUp(loc.x + 10, loc.y + 10, 300, { clickCount: 2 });`
234	`}`
235	`window.addEventListener('DOMContentLoaded', init);`
236	`</script>`
237
238	`<div id="sample">`
239	`<div style="width: 100%; display: flex; justify-content: space-between">`
240	`<div id="myPaletteDiv" style="width: 80px; height: 400px; margin-right: 2px; border: solid 1px black"></div>`
241	`<div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>`
242	`</div>`
243	`<p>`
244	`To simulate mouse events the buttons below use the <b>Robot</b> class that is defined in <a href="Robot.js">Robot.js</a>.`
245	`</p>`
246	`<p>`
247	`Click these buttons in order from top to bottom:<br />`
248	`<button onclick="dragFromPalette()">Drag From Palette</button><br />`
249	`<button onclick="copyNode()">Copy Node</button><br />`
250	`<button onclick="dragSelectNodes()">Drag Select Nodes</button><br />`
251	`<button onclick="clickContextMenu()">Context Menu Click Alpha</button><br />`
252	`<button onclick="deleteSelection()">Delete</button><br />`
253	`</p>`
254	`<p>Clicking operations:<br />`
255	`<button onclick="clickLambda()">Click Lambda</button><br />`
256	`<button onclick="doubleClickLambda()">Double Click Lambda</button><br />`
257	`</p>`
258	`<p>`
259	`The <a>UndoManager</a> has been enabled in the main Diagram.`
260	`Give focus to the Diagram and you can undo everything and then redo everything to confirm what was executed by the Robot.`
261	`</p>`
262	`<div id="myStatus" style="color:green"></div>`
263	`</div>`
264	`</div>`
265	`<!-- * * * * * * * * * * * * * -->`
266	`<!-- End of GoJS sample code -->`
267	`</div>`
268	`</body>`
269	`<!-- This script is part of the gojs.net website, and is not needed to run the sample -->`
270	`<script src="../assets/js/goSamples.js"></script>`
271	`</html>`