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 | */
|
11 | import * as go from '../release/go-module.js';
|
12 | /**
|
13 | * This custom {@link Link} class customizes its {@link Shape} to surround the comment node (the from node).
|
14 | * If the Shape is filled, it will obscure the comment itself unless the Link is behind the comment node.
|
15 | * Thus the default layer for BalloonLinks is "Background".
|
16 | *
|
17 | * If you want to experiment with this extension, try the <a href="../../extensionsJSM/BalloonLink.html">Balloon Links</a> sample.
|
18 | * @category Part Extension
|
19 | */
|
20 | export class BalloonLink extends go.Link {
|
21 | /**
|
22 | * Constructs a BalloonLink and sets the {@link Part#layerName} property to "Background".
|
23 | */
|
24 | constructor() {
|
25 | super();
|
26 | this._base = 10;
|
27 | this.layerName = 'Background';
|
28 | }
|
29 | /**
|
30 | * Copies properties to a cloned BalloonLink.
|
31 | */
|
32 | cloneProtected(copy) {
|
33 | super.cloneProtected(copy);
|
34 | copy._base = this._base;
|
35 | }
|
36 | /**
|
37 | * Gets or sets width of the base of the triangle at the center point of the {@link Link#fromNode}.
|
38 | *
|
39 | * The default value is 10.
|
40 | */
|
41 | get base() { return this._base; }
|
42 | set base(value) { this._base = value; }
|
43 | /**
|
44 | * Produce a Geometry from the Link's route that draws a "balloon" shape around the {@link Link#fromNode}
|
45 | * and has a triangular shape with the base at the fromNode and the top at the toNode.
|
46 | */
|
47 | makeGeometry() {
|
48 | const fromnode = this.fromNode;
|
49 | const tonode = this.toNode;
|
50 | if (fromnode === null || tonode === null)
|
51 | return super.makeGeometry();
|
52 | // assume the fromNode is the comment and the toNode is the commented-upon node
|
53 | const bb = fromnode.actualBounds;
|
54 | const nb = tonode.actualBounds;
|
55 | const p0 = bb.center;
|
56 | let pn = this.getPoint(this.pointsCount - 1);
|
57 | if (bb.intersectsRect(nb)) {
|
58 | pn = nb.center;
|
59 | }
|
60 | const pos = this.routeBounds;
|
61 | // compute the intersection points for the triangular arrow
|
62 | const ang = pn.directionPoint(p0);
|
63 | const L = new go.Point(this.base, 0).rotate(ang - 90).add(p0);
|
64 | const R = new go.Point(this.base, 0).rotate(ang + 90).add(p0);
|
65 | this.getLinkPointFromPoint(fromnode, fromnode, L, pn, true, L);
|
66 | this.getLinkPointFromPoint(fromnode, fromnode, R, pn, true, R);
|
67 | // form a triangular arrow from the comment to the commented node
|
68 | const fig = new go.PathFigure(pn.x - pos.x, pn.y - pos.y, true); // filled; start at arrow point at commented node
|
69 | fig.add(new go.PathSegment(go.PathSegment.Line, R.x - pos.x, R.y - pos.y)); // a triangle base point on comment's edge
|
70 | let side = 0;
|
71 | if (L.y >= bb.bottom || R.y >= bb.bottom)
|
72 | side = 2;
|
73 | else if (L.x <= bb.x && R.x <= bb.x)
|
74 | side = 1;
|
75 | else if (L.x >= bb.right && R.x >= bb.right)
|
76 | side = 3;
|
77 | this.pathToCorner(side, bb, fig, pos, L, R);
|
78 | this.pathToCorner(side + 1, bb, fig, pos, L, R);
|
79 | this.pathToCorner(side + 2, bb, fig, pos, L, R);
|
80 | this.pathToCorner(side + 3, bb, fig, pos, L, R);
|
81 | fig.add(new go.PathSegment(go.PathSegment.Line, L.x - pos.x, L.y - pos.y).close()); // the other triangle base point on comment's edge
|
82 | // return a Geometry
|
83 | return new go.Geometry().add(fig);
|
84 | }
|
85 | /**
|
86 | * Draw a line to a corner, but not if the comment arrow encompasses that corner.
|
87 | */
|
88 | pathToCorner(side, bb, fig, pos, L, R) {
|
89 | switch (side % 4) {
|
90 | case 0:
|
91 | if (!(L.y <= bb.y && R.x <= bb.x))
|
92 | fig.add(new go.PathSegment(go.PathSegment.Line, bb.x - pos.x, bb.y - pos.y));
|
93 | break;
|
94 | case 1:
|
95 | if (!(L.x <= bb.x && R.y >= bb.bottom))
|
96 | fig.add(new go.PathSegment(go.PathSegment.Line, bb.x - pos.x, bb.bottom - pos.y));
|
97 | break;
|
98 | case 2:
|
99 | if (!(L.y >= bb.bottom && R.x >= bb.right))
|
100 | fig.add(new go.PathSegment(go.PathSegment.Line, bb.right - pos.x, bb.bottom - pos.y));
|
101 | break;
|
102 | case 3:
|
103 | if (!(L.x >= bb.right && R.y <= bb.y))
|
104 | fig.add(new go.PathSegment(go.PathSegment.Line, bb.right - pos.x, bb.y - pos.y));
|
105 | break;
|
106 | }
|
107 | }
|
108 | }
|