1 | /*
|
2 | * Copyright (C) 1998-2021 by Northwoods Software Corporation. All Rights Reserved.
|
3 | */
|
4 |
|
5 | /*
|
6 | * This is an extension and not part of the main GoJS library.
|
7 | * Note that the API for this class may change with any version, even point releases.
|
8 | * If you intend to use an extension in production, you should copy the code to your own source directory.
|
9 | * Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
|
10 | * See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
|
11 | */
|
12 |
|
13 | import * as go from '../release/go-module.js';
|
14 |
|
15 | /**
|
16 | * The DragZoomingTool lets the user zoom into a diagram by stretching a box
|
17 | * to indicate the new contents of the diagram's viewport (the area of the
|
18 | * model shown by the Diagram).
|
19 | * Hold down the Shift key in order to zoom out.
|
20 | *
|
21 | * The default drag selection box is a magenta rectangle.
|
22 | * You can modify the {@link #box} to customize its appearance.
|
23 | *
|
24 | * The diagram that is zoomed by this tool is specified by the {@link #zoomedDiagram} property.
|
25 | * If the value is null, the tool zooms its own {@link Tool#diagram}.
|
26 | *
|
27 | * You can use this tool in a modal manner by executing:
|
28 | * ```js
|
29 | * diagram.currentTool = new DragZoomingTool();
|
30 | * ```
|
31 | *
|
32 | * Use this tool in a mode-less manner by executing:
|
33 | * ```js
|
34 | * myDiagram.toolManager.mouseMoveTools.insertAt(2, new DragZoomingTool());
|
35 | * ```
|
36 | *
|
37 | * However when used mode-lessly as a mouse-move tool, in {@link ToolManager#mouseMoveTools},
|
38 | * this cannot start running unless there has been a motionless delay
|
39 | * after the mouse-down event of at least {@link #delay} milliseconds.
|
40 | *
|
41 | * This tool does not utilize any {@link Adornment}s or tool handles,
|
42 | * but it does temporarily add the {@link #box} part to the diagram.
|
43 | * This tool does not modify the model or conduct any transaction.
|
44 | *
|
45 | * If you want to experiment with this extension, try the <a href="../../extensionsJSM/DragZooming.html">Drag Zooming</a> sample.
|
46 | * @category Tool Extension
|
47 | */
|
48 | export class DragZoomingTool extends go.Tool {
|
49 | private _box: go.Part;
|
50 | private _delay: number = 175;
|
51 | private _zoomedDiagram: go.Diagram | null = null;
|
52 |
|
53 | /**
|
54 | * Constructs a DragZoomingTool, sets {@link #box} to a magenta rectangle, and sets name of the tool.
|
55 | */
|
56 | constructor() {
|
57 | super();
|
58 | const b: go.Part = new go.Part();
|
59 | const r: go.Shape = new go.Shape();
|
60 | b.layerName = 'Tool';
|
61 | b.selectable = false;
|
62 | r.name = 'SHAPE';
|
63 | r.figure = 'Rectangle';
|
64 | r.fill = null;
|
65 | r.stroke = 'magenta';
|
66 | r.position = new go.Point(0, 0);
|
67 | b.add(r);
|
68 | this._box = b;
|
69 | this.name = 'DragZooming';
|
70 | }
|
71 |
|
72 | /**
|
73 | * Gets or sets the {@link Part} used as the "rubber-band zoom box"
|
74 | * that is stretched to follow the mouse, as feedback for what area will
|
75 | * be passed to {@link #zoomToRect} upon a mouse-up.
|
76 | *
|
77 | * Initially this is a {@link Part} containing only a simple magenta rectangular {@link Shape}.
|
78 | * The object to be resized should be named "SHAPE".
|
79 | * Setting this property does not raise any events.
|
80 | *
|
81 | * Modifying this property while this tool {@link Tool#isActive} might have no effect.
|
82 | */
|
83 | get box(): go.Part { return this._box; }
|
84 | set box(val: go.Part) { this._box = val; }
|
85 |
|
86 | /**
|
87 | * Gets or sets the time in milliseconds for which the mouse must be stationary
|
88 | * before this tool can be started.
|
89 | *
|
90 | * The default value is 175 milliseconds.
|
91 | * Setting this property does not raise any events.
|
92 | */
|
93 | get delay(): number { return this._delay; }
|
94 | set delay(val: number) { this._delay = val; }
|
95 |
|
96 | /**
|
97 | * Gets or sets the {@link Diagram} whose {@link Diagram#position} and {@link Diagram#scale}
|
98 | * should be set to display the drawn {@link #box} rectangular bounds.
|
99 | *
|
100 | * The default value is null, which causes {@link #zoomToRect} to modify this tool's {@link Tool#diagram}.
|
101 | * Setting this property does not raise any events.
|
102 | */
|
103 | get zoomedDiagram(): go.Diagram | null { return this._zoomedDiagram; }
|
104 | set zoomedDiagram(val: go.Diagram | null) { this._zoomedDiagram = val; }
|
105 |
|
106 | /**
|
107 | * This tool can run when there has been a mouse-drag, far enough away not to be a click,
|
108 | * and there has been delay of at least {@link #delay} milliseconds
|
109 | * after the mouse-down before a mouse-move.
|
110 | */
|
111 | public canStart(): boolean {
|
112 | if (!this.isEnabled) return false;
|
113 | const diagram = this.diagram;
|
114 | const e = diagram.lastInput;
|
115 | // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
|
116 | if (!e.left) return false;
|
117 | // don't include the following checks when this tool is running modally
|
118 | if (diagram.currentTool !== this) {
|
119 | if (!this.isBeyondDragSize()) return false;
|
120 | // must wait for "delay" milliseconds before that tool can run
|
121 | if (e.timestamp - diagram.firstInput.timestamp < this.delay) return false;
|
122 | }
|
123 | return true;
|
124 | }
|
125 |
|
126 | /**
|
127 | * Capture the mouse and show the {@link #box}.
|
128 | */
|
129 | public doActivate(): void {
|
130 | const diagram = this.diagram;
|
131 | this.isActive = true;
|
132 | diagram.isMouseCaptured = true;
|
133 | diagram.skipsUndoManager = true;
|
134 | diagram.add(this.box);
|
135 | this.doMouseMove();
|
136 | }
|
137 |
|
138 | /**
|
139 | * Release the mouse and remove any {@link #box}.
|
140 | */
|
141 | public doDeactivate(): void {
|
142 | const diagram = this.diagram;
|
143 | diagram.remove(this.box);
|
144 | diagram.skipsUndoManager = false;
|
145 | diagram.isMouseCaptured = false;
|
146 | this.isActive = false;
|
147 | }
|
148 |
|
149 | /**
|
150 | * Update the {@link #box}'s position and size according to the value
|
151 | * of {@link #computeBoxBounds}.
|
152 | */
|
153 | public doMouseMove(): void {
|
154 | const diagram = this.diagram;
|
155 | if (this.isActive && this.box !== null) {
|
156 | const r = this.computeBoxBounds();
|
157 | let shape = this.box.findObject('SHAPE');
|
158 | if (shape === null) shape = this.box.findMainElement();
|
159 | if (shape !== null) shape.desiredSize = r.size;
|
160 | this.box.position = r.position;
|
161 | }
|
162 | }
|
163 |
|
164 | /**
|
165 | * Call {@link #zoomToRect} with the value of a call to {@link #computeBoxBounds}.
|
166 | */
|
167 | public doMouseUp(): void {
|
168 | if (this.isActive) {
|
169 | const diagram = this.diagram;
|
170 | diagram.remove(this.box);
|
171 | try {
|
172 | diagram.currentCursor = 'wait';
|
173 | this.zoomToRect(this.computeBoxBounds());
|
174 | } finally {
|
175 | diagram.currentCursor = '';
|
176 | }
|
177 | }
|
178 | this.stopTool();
|
179 | }
|
180 |
|
181 | /**
|
182 | * This just returns a {@link Rect} stretching from the mouse-down point to the current mouse point
|
183 | * while maintaining the aspect ratio of the {@link #zoomedDiagram}.
|
184 | * @return {Rect} a {@link Rect} in document coordinates.
|
185 | */
|
186 | public computeBoxBounds(): go.Rect {
|
187 | const diagram = this.diagram;
|
188 | const start = diagram.firstInput.documentPoint;
|
189 | const latest = diagram.lastInput.documentPoint;
|
190 | const adx = latest.x - start.x;
|
191 | const ady = latest.y - start.y;
|
192 |
|
193 | let observed = this.zoomedDiagram;
|
194 | if (observed === null) observed = diagram;
|
195 | if (observed === null) {
|
196 | return new go.Rect(start, latest);
|
197 | }
|
198 | const vrect = observed.viewportBounds;
|
199 | if (vrect.height === 0 || ady === 0) {
|
200 | return new go.Rect(start, latest);
|
201 | }
|
202 |
|
203 | const vratio = vrect.width / vrect.height;
|
204 | let lx;
|
205 | let ly;
|
206 | if (Math.abs(adx / ady) < vratio) {
|
207 | lx = start.x + adx;
|
208 | ly = start.y + Math.ceil(Math.abs(adx) / vratio) * (ady < 0 ? -1 : 1);
|
209 | } else {
|
210 | lx = start.x + Math.ceil(Math.abs(ady) * vratio) * (adx < 0 ? -1 : 1);
|
211 | ly = start.y + ady;
|
212 | }
|
213 | return new go.Rect(start, new go.Point(lx, ly));
|
214 | }
|
215 |
|
216 | /**
|
217 | * This method is called to change the {@link #zoomedDiagram}'s viewport to match the given rectangle.
|
218 | * @param {Rect} r a rectangular bounds in document coordinates.
|
219 | */
|
220 | public zoomToRect(r: go.Rect): void {
|
221 | if (r.width < 0.1) return;
|
222 | const diagram = this.diagram;
|
223 | let observed = this.zoomedDiagram;
|
224 | if (observed === null) observed = diagram;
|
225 | if (observed === null) return;
|
226 |
|
227 | // zoom out when using the Shift modifier
|
228 | if (diagram.lastInput.shift) {
|
229 | observed.scale = Math.max(observed.scale * r.width / observed.viewportBounds.width, observed.minScale);
|
230 | observed.centerRect(r);
|
231 | } else {
|
232 | // do scale first, so the Diagram's position normalization isn't constrained unduly when increasing scale
|
233 | observed.scale = Math.min(observed.viewportBounds.width * observed.scale / r.width, observed.maxScale);
|
234 | observed.position = new go.Point(r.x, r.y);
|
235 | }
|
236 | }
|
237 | }
|