UNPKG

12.2 kBHTMLView Raw
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="TypeScript: The user can draw a new polygon by clicking where its points should go."/>
7<link rel="stylesheet" href="../assets/css/style.css"/>
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
9<title>Polygon Drawing Tool</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
52 <div class="p-4 w-full">
53 <div id="sample">
54 <div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 350px"></div>
55 <div id="buttons">
56 <button type="button" id="select">Select</button>
57 <button type="button" id="drawPolygon">Draw Polygon</button>
58 <button type="button" id="drawPolyline">Draw Polyline</button>
59 <button type="button" id="finishDrawing">Finish Drawing</button>
60 <button type="button" id="cancelDrawing">Cancel Drawing</button>
61 <button type="button" id="undo">Undo Last Point</button>
62 <br/>
63 <label><input type="checkbox" id = "allowResizing" checked="checked" />Allow Resizing</label>
64 <label><input type="checkbox" id = "allowReshaping" checked="checked" />Allow Reshaping</label>
65 <label><input type="checkbox" id = "allowRotating" checked="checked" />Allow Rotating</label>
66 <p>
67 This sample demonstrates the PolygonDrawingTool, a custom <a>Tool</a> added to the Diagram's mouseDownTools. It is
68 defined in its own file, as <a href="PolygonDrawingTool.ts">PolygonDrawingTool.ts</a>. It also demonstrates the GeometryReshapingTool,
69 another custom tool, defined in <a href="GeometryReshapingTool.ts">GeometryReshapingTool.ts</a>.
70 </p>
71 <p>
72 These extensions serve as examples of features that can be added to GoJS by writing new classes. With the PolygonDrawingTool,
73 a new mode is supported that allows the user to draw custom shapes. With the GeometryReshapingTool, users can change
74 the geometry (i.e. the "shape") of a <a>Shape</a>s in a selected <a>Node</a>.
75 </p>
76 <p>
77 Click a "Draw" button and then click in the diagram to place a new point in a polygon or polyline shape. Right-click,
78 double-click, or Enter to finish. Press <b>Escape</b> to cancel, or <b>Z</b> to remove the last point. Click the
79 "Select" button to switch back to the normal selection behavior, so that you can select, resize, and rotate the shapes.
80 The checkboxes control whether you can resize, reshape, and/or rotate selected shapes.
81 </p>
82 </div>
83 <div>
84 <button id="save">Save</button>
85 <button id="load">Load</button>
86 </div>
87 <textarea id="mySavedDiagram" style="width:100%;height:300px">
88{ "position": "0 0",
89 "model": { "class": "go.GraphLinksModel",
90 "nodeDataArray": [ {"loc":"183 148", "category": "PolygonDrawing", "geo":"F M0 145 L75 2 L131 87 L195 0 L249 143z", "key":-1} ],
91 "linkDataArray": [ ]
92} }
93 </textarea>
94 </div>
95
96 <script type="module" id="code">
97 import * as go from "../release/go-module.js";
98 import { GeometryReshapingTool } from './GeometryReshapingTool.js';
99 import { PolygonDrawingTool } from './PolygonDrawingTool.js';
100
101 if (window.goSamples) goSamples(); // init for the samples -- you don't need to call this
102 const $ = go.GraphObject.make;
103
104 const myDiagram =
105 $(go.Diagram, 'myDiagramDiv');
106 myDiagram.toolManager.mouseDownTools.insertAt(3, new GeometryReshapingTool());
107
108 myDiagram.nodeTemplateMap.add('PolygonDrawing', $(go.Node, { locationSpot: go.Spot.Center }, // to support rotation about the center
109 new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), {
110 selectionAdorned: true, selectionObjectName: 'SHAPE',
111 selectionAdornmentTemplate: // custom selection adornment: a blue rectangle
112 $(go.Adornment, 'Auto', $(go.Shape, { stroke: 'dodgerblue', fill: null }), $(go.Placeholder, { margin: -1 }))
113 }, { resizable: true, resizeObjectName: 'SHAPE' }, { rotatable: true, rotateObjectName: 'SHAPE' }, { reshapable: true }, // GeometryReshapingTool assumes nonexistent Part.reshapeObjectName would be "SHAPE"
114 $(go.Shape, { name: 'SHAPE', fill: 'lightgray', strokeWidth: 1.5 }, new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify), new go.Binding('angle').makeTwoWay(), new go.Binding('geometryString', 'geo').makeTwoWay(), new go.Binding('fill'), new go.Binding('stroke'), new go.Binding('strokeWidth'))));
115 // create polygon drawing tool for myDiagram, defined in PolygonDrawingTool.js
116 const tool = new PolygonDrawingTool();
117 // provide the default JavaScript object for a new polygon in the model
118 tool.archetypePartData = { fill: 'yellow', stroke: 'blue', strokeWidth: 3, category: 'PolygonDrawing' };
119 tool.isPolygon = true; // for a polyline drawing tool set this property to false
120 tool.isEnabled = false;
121 // install as first mouse-down-tool
122 myDiagram.toolManager.mouseDownTools.insertAt(0, tool);
123 load(); // load a simple diagram from the textarea
124
125 function mode(draw, polygon) {
126 // assume PolygonDrawingTool is the first tool in the mouse-down-tools list
127 const tool = myDiagram.toolManager.mouseDownTools.elt(0);
128 tool.isEnabled = draw;
129 tool.isPolygon = polygon;
130 tool.archetypePartData.fill = (polygon ? 'yellow' : null);
131 tool.temporaryShape.fill = (polygon ? 'yellow' : null);
132 if (draw) myDiagram.currentTool = tool;
133 }
134 // this command ends the PolygonDrawingTool
135 function finish(commit) {
136 const tool = myDiagram.currentTool;
137 if (commit && tool instanceof PolygonDrawingTool) {
138 const lastInput = myDiagram.lastInput;
139 if (lastInput.event instanceof MouseEvent)
140 tool.removeLastPoint(); // remove point from last mouse-down
141 tool.finishShape();
142 }
143 else {
144 tool.doCancel();
145 }
146 }
147 // this command removes the last clicked point from the temporary Shape
148 function undo() {
149 const tool = myDiagram.currentTool;
150 if (tool instanceof PolygonDrawingTool) {
151 const lastInput = myDiagram.lastInput;
152 if (lastInput.event instanceof MouseEvent)
153 tool.removeLastPoint(); // remove point from last mouse-down
154 tool.undo();
155 }
156 }
157 function updateAllAdornments() {
158 myDiagram.selection.each((p) => { p.updateAdornments(); });
159 }
160 // save a model to and load a model from Json text, displayed below the Diagram
161 function save() {
162 const str = '{ "position": "' + go.Point.stringify(myDiagram.position) + '",\n "model": ' + myDiagram.model.toJson() + ' }';
163 document.getElementById('mySavedDiagram').value = str;
164 }
165 function load() {
166 const str = document.getElementById('mySavedDiagram').value;
167 try {
168 const json = JSON.parse(str);
169 myDiagram.initialPosition = go.Point.parse(json.position || '0 0');
170 myDiagram.model = go.Model.fromJson(json.model);
171 myDiagram.model.undoManager.isEnabled = true;
172 }
173 catch (ex) {
174 alert(ex);
175 }
176 }
177 function select() {
178 mode(false, false);
179 }
180 function drawPolygon() {
181 mode(true, true);
182 }
183 function drawPolyline() {
184 mode(true, false);
185 }
186 function finishDrawing() {
187 finish(true);
188 }
189 function cancelDrawing() {
190 finish(false);
191 }
192 function allowResizing() {
193 myDiagram.allowResize = !myDiagram.allowResize;
194 updateAllAdornments();
195 }
196 function allowReshaping() {
197 myDiagram.allowReshape = !myDiagram.allowReshape;
198 updateAllAdornments();
199 }
200 function allowRotating() {
201 myDiagram.allowRotate = !myDiagram.allowRotate;
202 updateAllAdornments();
203 }
204
205 document.getElementById("select").onclick = select;
206 document.getElementById("drawPolygon").onclick = drawPolygon;
207 document.getElementById("drawPolyline").onclick = drawPolyline;
208 document.getElementById("finishDrawing").onclick = finishDrawing;
209 document.getElementById("cancelDrawing").onclick = cancelDrawing;
210 document.getElementById("undo").onclick = undo;
211 document.getElementById("allowResizing").onclick = allowResizing;
212 document.getElementById("allowReshaping").onclick = allowReshaping;
213 document.getElementById("allowRotating").onclick = allowRotating;
214 document.getElementById("save").onclick = save;
215 document.getElementById("load").onclick = load;
216
217 window.myDiagram = myDiagram; // Attach to the window for console debugging
218 </script>
219 </div>
220 <!-- * * * * * * * * * * * * * -->
221 <!-- End of GoJS sample code -->
222 </div>
223</body>
224<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
225<script src="../assets/js/goSamples.js"></script>
226</html>