1 | /*
|
2 | * Copyright (C) 1998-2021 by Northwoods Software Corporation. All Rights Reserved.
|
3 | */
|
4 | var __extends = (this && this.__extends) || (function () {
|
5 | var extendStatics = function (d, b) {
|
6 | extendStatics = Object.setPrototypeOf ||
|
7 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
8 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
9 | return extendStatics(d, b);
|
10 | };
|
11 | return function (d, b) {
|
12 | extendStatics(d, b);
|
13 | function __() { this.constructor = d; }
|
14 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
15 | };
|
16 | })();
|
17 | (function (factory) {
|
18 | if (typeof module === "object" && typeof module.exports === "object") {
|
19 | var v = factory(require, exports);
|
20 | if (v !== undefined) module.exports = v;
|
21 | }
|
22 | else if (typeof define === "function" && define.amd) {
|
23 | define(["require", "exports", "../release/go.js"], factory);
|
24 | }
|
25 | })(function (require, exports) {
|
26 | ;
|
27 | Object.defineProperty(exports, "__esModule", { value: true });
|
28 | exports.DragCreatingTool = void 0;
|
29 | /*
|
30 | * This is an extension and not part of the main GoJS library.
|
31 | * Note that the API for this class may change with any version, even point releases.
|
32 | * If you intend to use an extension in production, you should copy the code to your own source directory.
|
33 | * Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
|
34 | * See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
|
35 | */
|
36 | var go = require("../release/go.js");
|
37 | /**
|
38 | * The DragCreatingTool lets the user create a new node by dragging in the background
|
39 | * to indicate its size and position.
|
40 | *
|
41 | * The default drag selection box is a magenta rectangle.
|
42 | * You can modify the {@link #box} to customize its appearance.
|
43 | *
|
44 | * This tool will not be able to start running unless you have set the
|
45 | * {@link #archetypeNodeData} property to an object that can be copied and added to the diagram's model.
|
46 | *
|
47 | * You can use this tool in a modal manner by executing:
|
48 | * ```js
|
49 | * diagram.currentTool = new DragCreatingTool();
|
50 | * ```
|
51 | *
|
52 | * Use this tool in a mode-less manner by executing:
|
53 | * ```js
|
54 | * myDiagram.toolManager.mouseMoveTools.insertAt(2, new DragCreatingTool());
|
55 | * ```
|
56 | *
|
57 | * However when used mode-lessly as a mouse-move tool, in {@link ToolManager#mouseMoveTools},
|
58 | * this cannot start running unless there has been a motionless delay
|
59 | * after the mouse-down event of at least {@link #delay} milliseconds.
|
60 | *
|
61 | * This tool does not utilize any {@link Adornment}s or tool handles,
|
62 | * but it does temporarily add the {@link #box} Part to the diagram.
|
63 | * This tool does conduct a transaction when inserting the new node.
|
64 | *
|
65 | * If you want to experiment with this extension, try the <a href="../../extensionsJSM/DragCreating.html">Drag Creating</a> sample.
|
66 | * @category Tool Extension
|
67 | */
|
68 | var DragCreatingTool = /** @class */ (function (_super) {
|
69 | __extends(DragCreatingTool, _super);
|
70 | /**
|
71 | * Constructs a DragCreatingTool, sets {@link #box} to a magenta rectangle, and sets name of the tool.
|
72 | */
|
73 | function DragCreatingTool() {
|
74 | var _this = _super.call(this) || this;
|
75 | _this._archetypeNodeData = null;
|
76 | _this._delay = 175;
|
77 | var b = new go.Part();
|
78 | var r = new go.Shape();
|
79 | b.layerName = 'Tool';
|
80 | b.selectable = false;
|
81 | r.name = 'SHAPE';
|
82 | r.figure = 'Rectangle';
|
83 | r.fill = null;
|
84 | r.stroke = 'magenta';
|
85 | r.position = new go.Point(0, 0);
|
86 | b.add(r);
|
87 | _this._box = b;
|
88 | _this.name = 'DragCreating';
|
89 | return _this;
|
90 | }
|
91 | Object.defineProperty(DragCreatingTool.prototype, "box", {
|
92 | /**
|
93 | * Gets or sets the {@link Part} used as the "rubber-band box"
|
94 | * that is stretched to follow the mouse, as feedback for what area will
|
95 | * be passed to {@link #insertPart} upon a mouse-up.
|
96 | *
|
97 | * Initially this is a {@link Part} containing only a simple magenta rectangular {@link Shape}.
|
98 | * The object to be resized should be named "SHAPE".
|
99 | * Setting this property does not raise any events.
|
100 | *
|
101 | * Modifying this property while this tool {@link Tool#isActive} might have no effect.
|
102 | */
|
103 | get: function () { return this._box; },
|
104 | set: function (val) { this._box = val; },
|
105 | enumerable: false,
|
106 | configurable: true
|
107 | });
|
108 | Object.defineProperty(DragCreatingTool.prototype, "delay", {
|
109 | /**
|
110 | * Gets or sets the time in milliseconds for which the mouse must be stationary
|
111 | * before this tool can be started.
|
112 | *
|
113 | * The default value is 175 milliseconds.
|
114 | * A value of zero will allow this tool to run without any wait after the mouse down.
|
115 | * Setting this property does not raise any events.
|
116 | */
|
117 | get: function () { return this._delay; },
|
118 | set: function (val) { this._delay = val; },
|
119 | enumerable: false,
|
120 | configurable: true
|
121 | });
|
122 | Object.defineProperty(DragCreatingTool.prototype, "archetypeNodeData", {
|
123 | /**
|
124 | * Gets or sets a data object that will be copied and added to the diagram's model each time this tool executes.
|
125 | *
|
126 | * The default value is null.
|
127 | * The value must be non-null for this tool to be able to run.
|
128 | * Setting this property does not raise any events.
|
129 | */
|
130 | get: function () { return this._archetypeNodeData; },
|
131 | set: function (val) { this._archetypeNodeData = val; },
|
132 | enumerable: false,
|
133 | configurable: true
|
134 | });
|
135 | /**
|
136 | * This tool can run when there has been a mouse-drag, far enough away not to be a click,
|
137 | * and there has been delay of at least {@link #delay} milliseconds
|
138 | * after the mouse-down before a mouse-move.
|
139 | */
|
140 | DragCreatingTool.prototype.canStart = function () {
|
141 | if (!this.isEnabled)
|
142 | return false;
|
143 | // gotta have some node data that can be copied
|
144 | if (this.archetypeNodeData === null)
|
145 | return false;
|
146 | var diagram = this.diagram;
|
147 | // heed IsReadOnly & AllowInsert
|
148 | if (diagram.isReadOnly || diagram.isModelReadOnly)
|
149 | return false;
|
150 | if (!diagram.allowInsert)
|
151 | return false;
|
152 | var e = diagram.lastInput;
|
153 | // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
|
154 | if (!e.left)
|
155 | return false;
|
156 | // don't include the following checks when this tool is running modally
|
157 | if (diagram.currentTool !== this) {
|
158 | if (!this.isBeyondDragSize())
|
159 | return false;
|
160 | // must wait for "delay" milliseconds before that tool can run
|
161 | if (e.timestamp - diagram.firstInput.timestamp < this.delay)
|
162 | return false;
|
163 | }
|
164 | return true;
|
165 | };
|
166 | /**
|
167 | * Capture the mouse and show the {@link #box}.
|
168 | */
|
169 | DragCreatingTool.prototype.doActivate = function () {
|
170 | var diagram = this.diagram;
|
171 | this.isActive = true;
|
172 | diagram.isMouseCaptured = true;
|
173 | diagram.add(this.box);
|
174 | this.doMouseMove();
|
175 | };
|
176 | /**
|
177 | * Release the mouse and remove any {@link #box}.
|
178 | */
|
179 | DragCreatingTool.prototype.doDeactivate = function () {
|
180 | var diagram = this.diagram;
|
181 | diagram.remove(this.box);
|
182 | diagram.isMouseCaptured = false;
|
183 | this.isActive = false;
|
184 | };
|
185 | /**
|
186 | * Update the {@link #box}'s position and size according to the value
|
187 | * of {@link #computeBoxBounds}.
|
188 | */
|
189 | DragCreatingTool.prototype.doMouseMove = function () {
|
190 | if (this.isActive && this.box !== null) {
|
191 | var r = this.computeBoxBounds();
|
192 | var shape = this.box.findObject('SHAPE');
|
193 | if (shape === null)
|
194 | shape = this.box.findMainElement();
|
195 | if (shape !== null)
|
196 | shape.desiredSize = r.size;
|
197 | this.box.position = r.position;
|
198 | }
|
199 | };
|
200 | /**
|
201 | * Call {@link #insertPart} with the value of a call to {@link #computeBoxBounds}.
|
202 | */
|
203 | DragCreatingTool.prototype.doMouseUp = function () {
|
204 | if (this.isActive) {
|
205 | var diagram = this.diagram;
|
206 | diagram.remove(this.box);
|
207 | try {
|
208 | diagram.currentCursor = 'wait';
|
209 | this.insertPart(this.computeBoxBounds());
|
210 | }
|
211 | finally {
|
212 | diagram.currentCursor = '';
|
213 | }
|
214 | }
|
215 | this.stopTool();
|
216 | };
|
217 | /**
|
218 | * This just returns a {@link Rect} stretching from the mouse-down point to the current mouse point.
|
219 | * @return {Rect} a {@link Rect} in document coordinates.
|
220 | */
|
221 | DragCreatingTool.prototype.computeBoxBounds = function () {
|
222 | var diagram = this.diagram;
|
223 | var start = diagram.firstInput.documentPoint;
|
224 | var latest = diagram.lastInput.documentPoint;
|
225 | return new go.Rect(start, latest);
|
226 | };
|
227 | /**
|
228 | * Create a node by adding a copy of the {@link #archetypeNodeData} object
|
229 | * to the diagram's model, assign its {@link GraphObject#position} and {@link GraphObject#desiredSize}
|
230 | * according to the given bounds, and select the new part.
|
231 | *
|
232 | * The actual part that is added to the diagram may be a {@link Part}, a {@link Node},
|
233 | * or even a {@link Group}, depending on the properties of the {@link #archetypeNodeData}
|
234 | * and the type of the template that is copied to create the part.
|
235 | * @param {Rect} bounds a Point in document coordinates.
|
236 | * @return {Part} the newly created Part, or null if it failed.
|
237 | */
|
238 | DragCreatingTool.prototype.insertPart = function (bounds) {
|
239 | var diagram = this.diagram;
|
240 | var arch = this.archetypeNodeData;
|
241 | if (arch === null)
|
242 | return null;
|
243 | diagram.raiseDiagramEvent('ChangingSelection', diagram.selection);
|
244 | this.startTransaction(this.name);
|
245 | var part = null;
|
246 | if (arch !== null) {
|
247 | var data = diagram.model.copyNodeData(arch);
|
248 | if (data) {
|
249 | diagram.model.addNodeData(data);
|
250 | part = diagram.findPartForData(data);
|
251 | }
|
252 | }
|
253 | if (part !== null) {
|
254 | part.position = bounds.position;
|
255 | part.resizeObject.desiredSize = bounds.size;
|
256 | if (diagram.allowSelect) {
|
257 | diagram.clearSelection();
|
258 | part.isSelected = true;
|
259 | }
|
260 | }
|
261 | // set the TransactionResult before raising event, in case it changes the result or cancels the tool
|
262 | this.transactionResult = this.name;
|
263 | this.stopTransaction();
|
264 | diagram.raiseDiagramEvent('ChangedSelection', diagram.selection);
|
265 | return part;
|
266 | };
|
267 | return DragCreatingTool;
|
268 | }(go.Tool));
|
269 | exports.DragCreatingTool = DragCreatingTool;
|
270 | });
|