UNPKG

12.6 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: Let the user draw a Shape using the mouse or finger without any constraints."/>
7<link rel="stylesheet" href="../assets/css/style.css"/>
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
9<title>Freehand 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: 600px"></div>
55 <div id="buttons">
56 <button id="select">Select</button>
57 <button id="drawMode">Draw Mode</button>
58 <button id="save">Save</button>
59 <button id="load">Load</button>
60 <label><input type="checkbox" id = "allowResizing" checked="checked" />Allow Resizing</label>
61 <label><input type="checkbox" id = "allowReshaping" checked="checked" />Allow Reshaping</label>
62 <label><input type="checkbox" id = "allowRotating" checked="checked" />Allow Rotating</label>
63 </div>
64 <p>
65 This sample demonstrates the FreehandDrawingTool. It is defined in its own file, as <a href="FreehandDrawingTool.ts">FreehandDrawingTool.ts</a>.
66 It also demonstrates the GeometryReshapingTool, another custom tool, defined in <a href="GeometryReshapingTool.ts">GeometryReshapingTool.ts</a>.
67 </p>
68 <p>
69 Press and drag to draw a line.
70 </p>
71 <p>
72 Click the "Select" button to switch back to the normal selection behavior, so that you can select, resize, and rotate the
73 shapes. The checkboxes control whether you can resize, reshape, and/or rotate selected shapes.
74 </p>
75 <textarea id="mySavedDiagram" style="width:100%;height:300px">
76{ "position": "0 0",
77 "model": { "class": "go.GraphLinksModel",
78 "nodeDataArray": [ {"loc":"301 143", "category":"FreehandDrawing", "geo":"M0 70 L1 70 L2 70 L3 70 L5 70 L7 70 L8 70 L11 70 L13 70 L18 69 L21 69 L25 68 L29 67 L34 67 L38 67 L42 67 L47 66 L50 66 L53 66 L55 66 L57 66 L60 66 L63 66 L64 66 L66 66 L68 66 L70 66 L72 66 L74 66 L76 66 L78 65 L81 65 L83 65 L85 65 L88 65 L90 65 L92 65 L95 65 L98 65 L100 65 L102 65 L104 65 L106 65 L109 65 L110 65 L111 65 L112 65 L113 65 L114 65 L115 65 L116 65 L118 65 L119 65 L120 65 L121 65 L122 65 L123 65 L124 65 L125 65 L126 65 L127 65 L128 65 L129 65 L131 65 L131 64 L132 64 L133 64 L134 64 L135 64 L137 64 L138 64 L139 64 L140 64 L141 64 L140 64 L139 64 L138 64 L137 64 L135 65 L134 65 L132 66 L130 67 L129 67 L126 68 L123 70 L121 71 L119 72 L116 73 L114 74 L111 76 L109 77 L106 78 L104 79 L99 81 L96 84 L94 84 L90 87 L89 87 L87 88 L86 89 L84 89 L83 90 L81 91 L80 92 L79 92 L77 93 L76 94 L74 94 L74 95 L73 96 L71 96 L70 97 L68 98 L67 98 L66 99 L64 99 L64 100 L62 100 L61 101 L60 102 L59 102 L58 103 L57 103 L57 104 L56 104 L56 105 L54 105 L54 107 L53 107 L52 108 L51 108 L51 109 L49 110 L48 111 L47 112 L47 113 L46 113 L45 114 L44 114 L44 115 L44 116 L43 116 L43 117 L42 117 L42 119 L41 119 L41 120 L40 120 L40 121 L39 122 L39 123 L38 124 L37 125 L36 126 L36 127 L35 128 L34 128 L34 129 L33 130 L33 131 L32 131 L32 130 L32 129 L33 128 L34 125 L35 122 L37 119 L39 115 L41 111 L41 106 L43 103 L45 98 L47 93 L48 90 L49 86 L51 83 L52 81 L54 78 L55 74 L55 71 L56 68 L57 65 L58 62 L58 59 L58 55 L58 53 L58 51 L58 49 L58 48 L59 45 L60 44 L60 42 L61 40 L61 38 L62 36 L64 32 L64 30 L65 29 L66 27 L66 26 L66 25 L66 24 L67 23 L67 22 L67 21 L67 20 L67 19 L68 19 L68 18 L68 17 L69 16 L69 15 L69 14 L69 12 L69 11 L69 10 L70 9 L70 8 L70 7 L70 6 L71 5 L71 4 L71 3 L71 2 L71 1 L71 0 L71 1 L71 2 L71 5 L71 6 L71 8 L71 9 L71 12 L71 14 L72 16 L72 18 L73 20 L73 23 L74 25 L74 27 L75 29 L76 32 L77 34 L78 35 L79 38 L79 39 L81 42 L81 43 L82 45 L83 46 L83 47 L83 49 L85 50 L86 52 L86 55 L86 58 L88 60 L89 62 L89 64 L90 66 L91 67 L91 69 L92 70 L92 71 L93 72 L94 73 L94 74 L94 75 L95 76 L96 77 L96 79 L97 81 L98 82 L98 83 L98 84 L99 85 L99 86 L100 87 L100 90 L101 91 L102 92 L102 93 L103 95 L103 96 L103 97 L104 98 L104 100 L104 101 L105 102 L106 103 L106 104 L107 106 L108 108 L109 110 L110 111 L111 113 L112 114 L113 115 L113 117 L115 119 L116 121 L116 123 L118 124 L119 126 L120 127 L121 129 L121 130 L122 131 L123 131 L123 132 L124 132 L124 133 L125 134 L125 135 L126 135 L127 136 L128 137 L129 138 L130 139 L131 140 L130 139 L129 138 L128 138 L126 136 L124 136 L123 134 L121 133 L118 131 L116 130 L114 128 L111 127 L107 123 L105 122 L102 120 L100 119 L98 117 L95 116 L93 114 L90 113 L88 111 L85 110 L83 108 L81 106 L78 105 L77 104 L75 103 L72 102 L71 101 L70 100 L68 99 L67 98 L65 98 L64 97 L62 96 L60 96 L58 95 L57 94 L54 93 L53 93 L51 92 L49 91 L48 91 L47 91 L45 90 L44 90 L43 89 L42 89 L41 89 L40 88 L39 87 L37 87 L36 86 L35 85 L33 85 L32 84 L31 84 L30 83 L29 83 L28 82 L26 81 L25 81 L24 80 L22 80 L21 79 L21 78 L20 78 L19 78 L18 77 L17 77 L16 76 L15 76 L15 75 L14 75 L13 75 L12 74 L11 74 L10 74 L9 74 L7 73 L5 72 L4 72 L3 72 L2 71", "key":-1} ],
79 "linkDataArray": [ ]
80} }
81 </textarea>
82 </div>
83
84 <script type="module" id="code">
85 import * as go from "../release/go-module.js";
86 import { FreehandDrawingTool } from './FreehandDrawingTool.js';
87 import { GeometryReshapingTool } from './GeometryReshapingTool.js';
88
89 if (window.goSamples) window.goSamples(); // init for these samples -- you don't need to call this
90 const $ = go.GraphObject.make;
91
92 const myDiagram =
93 $(go.Diagram, 'myDiagramDiv');
94 myDiagram.toolManager.mouseDownTools.insertAt(3, new GeometryReshapingTool());
95
96 myDiagram.nodeTemplateMap.add('FreehandDrawing', $(go.Part, { locationSpot: go.Spot.Center, isLayoutPositioned: false }, new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), {
97 selectionAdorned: true, selectionObjectName: 'SHAPE',
98 selectionAdornmentTemplate: // custom selection adornment: a blue rectangle
99 $(go.Adornment, 'Auto', $(go.Shape, { stroke: 'dodgerblue', fill: null }), $(go.Placeholder, { margin: -1 }))
100 }, { resizable: true, resizeObjectName: 'SHAPE' }, { rotatable: true, rotateObjectName: 'SHAPE' }, { reshapable: true }, // GeometryReshapingTool assumes nonexistent Part.reshapeObjectName would be "SHAPE"
101 $(go.Shape, { name: 'SHAPE', fill: null, 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'))));
102
103 // create drawing tool for myDiagram, defined in FreehandDrawingTool.js
104 const tool = new FreehandDrawingTool();
105 // provide the default JavaScript object for a new polygon in the model
106 tool.archetypePartData = { stroke: 'green', strokeWidth: 3, category: 'FreehandDrawing' };
107 // allow the tool to start on top of an existing Part
108 tool.isBackgroundOnly = false;
109 // install as first mouse-move-tool
110 myDiagram.toolManager.mouseMoveTools.insertAt(0, tool);
111 load(); // load a simple diagram from the textarea
112
113 window.myDiagram = myDiagram; // Attach to the window for console debugging
114
115 function mode(draw) {
116 const tool = myDiagram.toolManager.findTool('FreehandDrawing');
117 if (tool !== null)
118 tool.isEnabled = draw;
119 }
120 function updateAllAdornments() {
121 myDiagram.selection.each(function (p) { p.updateAdornments(); });
122 }
123 // save a model to and load a model from Json text, displayed below the Diagram
124 function save() {
125 const str = '{ "position": "' + go.Point.stringify(myDiagram.position) + '",\n "model": ' + myDiagram.model.toJson() + ' }';
126 document.getElementById('mySavedDiagram').value = str;
127 }
128 function load() {
129 const str = document.getElementById('mySavedDiagram').value;
130 try {
131 const json = JSON.parse(str);
132 myDiagram.initialPosition = go.Point.parse(json.position || '0 0');
133 myDiagram.model = go.Model.fromJson(json.model);
134 myDiagram.model.undoManager.isEnabled = true;
135 }
136 catch (ex) {
137 alert(ex);
138 }
139 }
140 function select() {
141 mode(false);
142 }
143 function drawMode() {
144 mode(true);
145 }
146 function allowResizing() {
147 myDiagram.allowResize = !myDiagram.allowResize;
148 updateAllAdornments();
149 }
150 function allowReshaping() {
151 myDiagram.allowReshape = !myDiagram.allowReshape;
152 updateAllAdornments();
153 }
154 function allowRotating() {
155 myDiagram.allowRotate = !myDiagram.allowRotate;
156 updateAllAdornments();
157 }
158
159 document.getElementById("select").onclick = select;
160 document.getElementById("drawMode").onclick = drawMode;
161 document.getElementById("save").onclick = save;
162 document.getElementById("load").onclick = load;
163 document.getElementById("allowResizing").onclick = allowResizing;
164 document.getElementById("allowReshaping").onclick = allowReshaping;
165 document.getElementById("allowRotating").onclick = allowRotating;
166 </script>
167 </div>
168 <!-- * * * * * * * * * * * * * -->
169 <!-- End of GoJS sample code -->
170 </div>
171</body>
172<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
173<script src="../assets/js/goSamples.js"></script>
174</html>