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 PortShiftingTool class lets a user move a port on a {@link Node}.
|
17 | *
|
18 | * This tool only works when the Node has a port (any GraphObject) marked with
|
19 | * a non-null and non-empty portId that is positioned in a Spot Panel,
|
20 | * and the user holds down the Shift key.
|
21 | * It works by modifying that port's {@link GraphObject#alignment} property.
|
22 | *
|
23 | * If you want to experiment with this extension, try the <a href="../../extensionsJSM/PortShifting.html">Port Shifting</a> sample.
|
24 | * @category Tool Extension
|
25 | */
|
26 | export class PortShiftingTool extends go.Tool {
|
27 | /**
|
28 | * The port being shifted.
|
29 | */
|
30 | public port: go.GraphObject | null = null;
|
31 | private _originalAlignment: go.Spot = go.Spot.Default;
|
32 |
|
33 | /**
|
34 | * Constructs a PortShiftingTool and sets the name for the tool.
|
35 | */
|
36 | constructor() {
|
37 | super();
|
38 | this.name = 'PortShifting';
|
39 | }
|
40 |
|
41 | /**
|
42 | * This tool can only start if the mouse has moved enough so that it is not a click,
|
43 | * and if the mouse down point is on a GraphObject "port" in a Spot Panel,
|
44 | * as determined by {@link #findPort}.
|
45 | */
|
46 | public canStart(): boolean {
|
47 | const diagram = this.diagram;
|
48 | if (!super.canStart()) return false;
|
49 | // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
|
50 | const e = diagram.lastInput;
|
51 | if (!e.left || !e.shift) return false;
|
52 | if (!this.isBeyondDragSize()) return false;
|
53 |
|
54 | return this.findPort() !== null;
|
55 | }
|
56 |
|
57 | /**
|
58 | * From the {@link GraphObject} at the mouse point, search up the visual tree until we get to
|
59 | * an object that has the {@link GraphObject#portId} property set to a non-empty string, that is in a Spot Panel,
|
60 | * and that is not the main element of the panel (typically the first element).
|
61 | * @return {GraphObject} This returns null if no such port is at the mouse down point.
|
62 | */
|
63 | public findPort(): go.GraphObject | null {
|
64 | const diagram = this.diagram;
|
65 | const e = diagram.firstInput;
|
66 | let elt = diagram.findObjectAt(e.documentPoint, null, null);
|
67 | if (elt === null || !(elt.part instanceof go.Node)) return null;
|
68 |
|
69 | while (elt !== null && elt.panel !== null) {
|
70 | if (elt.panel.type === go.Panel.Spot && elt.panel.findMainElement() !== elt &&
|
71 | elt.portId !== null && elt.portId !== '') return elt;
|
72 | elt = elt.panel;
|
73 | }
|
74 | return null;
|
75 | }
|
76 |
|
77 | /**
|
78 | * Start a transaction, call {@link #findPort} and remember it as the "port" property,
|
79 | * and remember the original value for the port's {@link GraphObject#alignment} property.
|
80 | */
|
81 | public doActivate(): void {
|
82 | this.startTransaction('Shifted Label');
|
83 | this.port = this.findPort();
|
84 | if (this.port !== null) {
|
85 | this._originalAlignment = this.port.alignment.copy();
|
86 | }
|
87 | super.doActivate();
|
88 | }
|
89 |
|
90 | /**
|
91 | * Stop any ongoing transaction.
|
92 | */
|
93 | public doDeactivate(): void {
|
94 | super.doDeactivate();
|
95 | this.stopTransaction();
|
96 | }
|
97 |
|
98 | /**
|
99 | * Clear any reference to a port element.
|
100 | */
|
101 | public doStop(): void {
|
102 | this.port = null;
|
103 | super.doStop();
|
104 | }
|
105 |
|
106 | /**
|
107 | * Restore the port's original value for GraphObject.alignment.
|
108 | */
|
109 | public doCancel(): void {
|
110 | if (this.port !== null) {
|
111 | this.port.alignment = this._originalAlignment;
|
112 | }
|
113 | super.doCancel();
|
114 | }
|
115 |
|
116 | /**
|
117 | * During the drag, call {@link #updateAlignment} in order to set the {@link GraphObject#alignment} of the port.
|
118 | */
|
119 | public doMouseMove(): void {
|
120 | if (!this.isActive) return;
|
121 | this.updateAlignment();
|
122 | }
|
123 |
|
124 | /**
|
125 | * At the end of the drag, update the alignment of the port and finish the tool,
|
126 | * completing a transaction.
|
127 | */
|
128 | public doMouseUp(): void {
|
129 | if (!this.isActive) return;
|
130 | this.updateAlignment();
|
131 | this.transactionResult = 'Shifted Label';
|
132 | this.stopTool();
|
133 | }
|
134 |
|
135 | /**
|
136 | * Save the port's {@link GraphObject#alignment} as a fractional Spot in the Spot Panel
|
137 | * that the port is in. Thus if the main element changes size, the relative positions
|
138 | * of the ports will be maintained. But that does assume that the port must remain
|
139 | * inside the main element -- it cannot wander away from the node.
|
140 | * This does not modify the port's {@link GraphObject#alignmentFocus} property.
|
141 | */
|
142 | public updateAlignment(): void {
|
143 | if (this.port === null || this.port.panel === null) return;
|
144 | const last = this.diagram.lastInput.documentPoint;
|
145 | const main = this.port.panel.findMainElement();
|
146 | if (main === null) return;
|
147 | const tl = main.getDocumentPoint(go.Spot.TopLeft);
|
148 | const br = main.getDocumentPoint(go.Spot.BottomRight);
|
149 | const x = Math.max(0, Math.min((last.x - tl.x) / (br.x - tl.x), 1));
|
150 | const y = Math.max(0, Math.min((last.y - tl.y) / (br.y - tl.y), 1));
|
151 | this.port.alignment = new go.Spot(x, y);
|
152 | }
|
153 | }
|