UNPKG

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