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 |
|
9 | <title>Polygon Drawing Tool</title>
|
10 | </head>
|
11 |
|
12 | <body>
|
13 |
|
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 |
|
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();
|
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 },
|
109 | new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), {
|
110 | selectionAdorned: true, selectionObjectName: 'SHAPE',
|
111 | selectionAdornmentTemplate:
|
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 },
|
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 |
|
116 | const tool = new PolygonDrawingTool();
|
117 |
|
118 | tool.archetypePartData = { fill: 'yellow', stroke: 'blue', strokeWidth: 3, category: 'PolygonDrawing' };
|
119 | tool.isPolygon = true;
|
120 | tool.isEnabled = false;
|
121 |
|
122 | myDiagram.toolManager.mouseDownTools.insertAt(0, tool);
|
123 | load();
|
124 |
|
125 | function mode(draw, polygon) {
|
126 |
|
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 |
|
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();
|
141 | tool.finishShape();
|
142 | }
|
143 | else {
|
144 | tool.doCancel();
|
145 | }
|
146 | }
|
147 |
|
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();
|
154 | tool.undo();
|
155 | }
|
156 | }
|
157 | function updateAllAdornments() {
|
158 | myDiagram.selection.each((p) => { p.updateAdornments(); });
|
159 | }
|
160 |
|
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;
|
218 | </script>
|
219 | </div>
|
220 |
|
221 |
|
222 | </div>
|
223 | </body>
|
224 |
|
225 | <script src="../assets/js/goSamples.js"></script>
|
226 | </html>
|