mascot-vis 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mascot-esm.js +186 -0
- package/package.json +3 -6
- package/dist/mascot-es.js +0 -27745
- package/dist/mascot-min.js +0 -186
- package/dist/mascot-umd.js +0 -27781
- package/js/depGraphVis.js +0 -66
- package/src-new-ts/action/createElement.ts +0 -91
- package/src-new-ts/action/encode.js +0 -20
- package/src-new-ts/action/repeat.js +0 -128
- package/src-new-ts/action/traverseScene.js +0 -41
- package/src-new-ts/data/Network.js +0 -2
- package/src-new-ts/data/Scope.js +0 -135
- package/src-new-ts/data/Table.js +0 -263
- package/src-new-ts/data/Tree.js +0 -3
- package/src-new-ts/data/field.ts +0 -115
- package/src-new-ts/data/import.ts +0 -96
- package/src-new-ts/data/predicate.ts +0 -82
- package/src-new-ts/depgraph/DepGraph.js +0 -178
- package/src-new-ts/depgraph/Edge.js +0 -9
- package/src-new-ts/depgraph/SceneGraph2DepGraph.js +0 -110
- package/src-new-ts/depgraph/Signal.js +0 -12
- package/src-new-ts/depgraph/operator/BoundsEvaluator.js +0 -30
- package/src-new-ts/depgraph/operator/Dataflow.js +0 -41
- package/src-new-ts/depgraph/operator/DomainBuilder.js +0 -50
- package/src-new-ts/depgraph/updateDepGraph.js +0 -45
- package/src-new-ts/depgraph/variable/BoundsVar.js +0 -81
- package/src-new-ts/depgraph/variable/ChannelVar.js +0 -17
- package/src-new-ts/depgraph/variable/DataScopeVar.js +0 -12
- package/src-new-ts/depgraph/variable/DomainVar.js +0 -15
- package/src-new-ts/depgraph/variable/FieldVar.js +0 -17
- package/src-new-ts/depgraph/variable/LayoutParameter.js +0 -8
- package/src-new-ts/depgraph/variable/ScaleVar.js +0 -13
- package/src-new-ts/depgraph/variable/Variable.js +0 -39
- package/src-new-ts/element/gradient/LinearGradient.js +0 -37
- package/src-new-ts/element/group/Collection.js +0 -109
- package/src-new-ts/element/group/Group.js +0 -307
- package/src-new-ts/element/group/Scene.js +0 -98
- package/src-new-ts/element/mark/CircleMark.ts +0 -85
- package/src-new-ts/element/mark/Mark.ts +0 -233
- package/src-new-ts/element/mark/PathMark.js +0 -483
- package/src-new-ts/element/mark/Segment.js +0 -29
- package/src-new-ts/element/mark/Vertex.js +0 -118
- package/src-new-ts/encode/Scale.ts +0 -115
- package/src-new-ts/index.ts +0 -19
- package/src-new-ts/layout/Layout.ts +0 -3
- package/src-new-ts/render/CanvasRenderer.ts +0 -24
- package/src-new-ts/render/SVGRenderer.js +0 -316
- package/src-new-ts/util.ts +0 -3
- package/src-old/action/Classify.js +0 -53
- package/src-old/action/Densify.js +0 -199
- package/src-old/action/Partition.js +0 -531
- package/src-old/action/Repeat.js +0 -106
- package/src-old/action/Repopulate.js +0 -44
- package/src-old/action/Stratify.js +0 -156
- package/src-old/basic/Gradient.js +0 -37
- package/src-old/basic/Point.js +0 -51
- package/src-old/basic/Rectangle.js +0 -63
- package/src-old/bind/bindToAngle.js +0 -56
- package/src-old/bind/bindToAreaMark.js +0 -360
- package/src-old/bind/bindToColor.js +0 -114
- package/src-old/bind/bindToLink.js +0 -81
- package/src-old/bind/bindToPosition.js +0 -283
- package/src-old/bind/bindToRadialDistance.js +0 -62
- package/src-old/bind/bindToSize.js +0 -235
- package/src-old/bind/bindToText.js +0 -60
- package/src-old/bind/bindToThickness.js +0 -100
- package/src-old/constraint/AffixConstraint.js +0 -129
- package/src-old/constraint/AlignConstraint.js +0 -58
- package/src-old/core/Encoding.js +0 -336
- package/src-old/core/Scale.js +0 -322
- package/src-old/core/SceneLoader.js +0 -290
- package/src-old/core/SceneValidator.js +0 -232
- package/src-old/core/SpecExecutor.js +0 -113
- package/src-old/core/SpecGenerator.js +0 -350
- package/src-old/data/DataImporter.js +0 -64
- package/src-old/data/DataScope.js +0 -124
- package/src-old/data/DataTable.js +0 -338
- package/src-old/data/Network.js +0 -106
- package/src-old/data/Tree.js +0 -251
- package/src-old/data/transform/Bin.js +0 -46
- package/src-old/data/transform/Filter.js +0 -48
- package/src-old/data/transform/Groupby.js +0 -18
- package/src-old/data/transform/KDE.js +0 -58
- package/src-old/data/transform/Sort.js +0 -14
- package/src-old/data/transform/Split.js +0 -5
- package/src-old/data/transform/partition.js +0 -46
- package/src-old/history/UndoRedoStack +0 -0
- package/src-old/index.js +0 -271
- package/src-old/indexSVG.js +0 -259
- package/src-old/interaction/Interaction.js +0 -91
- package/src-old/interaction/MouseEvent.js +0 -8
- package/src-old/interaction/Selection.js +0 -9
- package/src-old/interaction/brush.js +0 -362
- package/src-old/item/Segment.js +0 -29
- package/src-old/item/Vertex.js +0 -118
- package/src-old/item/composite/Collection.js +0 -106
- package/src-old/item/composite/Glyph.js +0 -19
- package/src-old/item/composite/Group.js +0 -310
- package/src-old/item/composite/Scene.js +0 -1251
- package/src-old/item/mark/ArcPath.js +0 -181
- package/src-old/item/mark/AreaPath.js +0 -78
- package/src-old/item/mark/CirclePath.js +0 -102
- package/src-old/item/mark/EllipsePath.js +0 -5
- package/src-old/item/mark/Image.js +0 -101
- package/src-old/item/mark/LinkPath.js +0 -118
- package/src-old/item/mark/Mark.js +0 -163
- package/src-old/item/mark/Path.js +0 -494
- package/src-old/item/mark/PointText.js +0 -201
- package/src-old/item/mark/PolygonPath.js +0 -64
- package/src-old/item/mark/RectPath.js +0 -88
- package/src-old/item/mark/RingPath.js +0 -92
- package/src-old/item/refs/Axis.js +0 -362
- package/src-old/item/refs/EncodingAxis.js +0 -515
- package/src-old/item/refs/Gridlines.js +0 -144
- package/src-old/item/refs/LayoutAxis.js +0 -316
- package/src-old/item/refs/Legend.js +0 -273
- package/src-old/layout/Circular.js +0 -95
- package/src-old/layout/Force.js +0 -52
- package/src-old/layout/Grid.js +0 -423
- package/src-old/layout/Layout.js +0 -13
- package/src-old/layout/Packing.js +0 -56
- package/src-old/layout/Stack.js +0 -264
- package/src-old/layout/Strata.js +0 -88
- package/src-old/layout/Sugiyama.js +0 -59
- package/src-old/layout/TidyTree.js +0 -105
- package/src-old/layout/Treemap.js +0 -87
- package/src-old/renderer/SVGInteractionHandler.js +0 -241
- package/src-old/renderer/SVGRenderer.js +0 -325
- package/src-old/renderer/WebGLRenderer.js +0 -1097
- package/src-old/renderer/WebGLRenderer2.js +0 -249
- package/src-old/renderer/threejs/Line2.js +0 -18
- package/src-old/renderer/threejs/LineGeometry.js +0 -77
- package/src-old/renderer/threejs/LineMaterial.js +0 -605
- package/src-old/renderer/threejs/LineSegments2.js +0 -281
- package/src-old/renderer/threejs/LineSegmentsGeometry.js +0 -226
- package/src-old/renderer/threejs/Wireframe.js +0 -51
- package/src-old/renderer/threejs/WireframeGeometry2.js +0 -16
- package/src-old/scale/areaSize.js +0 -0
- package/src-old/scale/domain.js +0 -38
- package/src-old/util/Constants.js +0 -180
- package/src-old/util/DataUtil.js +0 -35
- package/src-old/util/ItemUtil.js +0 -586
- package/src-old/util/Numerical.js +0 -33
- package/tests/demo-tests/README.md +0 -80
- package/tests/demo-tests/SVG2PNG.js +0 -56
- package/tests/demo-tests/demos2CanvasPNGs.js +0 -69
- package/tests/demo-tests/demos2ScenesSVGs.js +0 -100
- package/tests/demo-tests/pathElementWorker.js +0 -91
- package/tests/demo-tests/pixelTest.js +0 -62
- package/tests/demo-tests/renderDemos.html +0 -132
- package/tests/demo-tests/serializationTest.js +0 -36
- package/tests/demo-tests/serializeDemos.html +0 -134
- package/tests/unit-tests/README.md +0 -4
- package/tests/unit-tests/jasmine-browser.json +0 -21
- package/tests/unit-tests/jasmine.json +0 -14
- package/tests/unit-tests/testSpec.js +0 -274
|
@@ -1,362 +0,0 @@
|
|
|
1
|
-
export const Direction = {
|
|
2
|
-
North: 'N',
|
|
3
|
-
South: 'S',
|
|
4
|
-
East: 'E',
|
|
5
|
-
West: 'W',
|
|
6
|
-
NorthEast: 'NE',
|
|
7
|
-
NorthWest: 'NW',
|
|
8
|
-
SouthEast: 'SE',
|
|
9
|
-
SouthWest: 'SW',
|
|
10
|
-
Move: 'M'
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export default class Brush {
|
|
14
|
-
|
|
15
|
-
// Resize Corners and handling Bounds
|
|
16
|
-
|
|
17
|
-
SVG = null;
|
|
18
|
-
drag = false;
|
|
19
|
-
selection = [];
|
|
20
|
-
mouseDown = false;
|
|
21
|
-
rectSvg = null;
|
|
22
|
-
bounds = null;
|
|
23
|
-
brushColor = '#9c3131';
|
|
24
|
-
|
|
25
|
-
dir = null;
|
|
26
|
-
bb = [];
|
|
27
|
-
mouseDownEvent = null;
|
|
28
|
-
|
|
29
|
-
constructor(id, brushColor, bounds = null) {
|
|
30
|
-
this.SVG = d3.select("#" + id).style('cursor', 'crosshair');
|
|
31
|
-
this.brushColor = brushColor;
|
|
32
|
-
if (bounds) {
|
|
33
|
-
this.bounds = bounds;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
brush() {
|
|
38
|
-
document.addEventListener(
|
|
39
|
-
'mousedown', ($e) => {
|
|
40
|
-
this.mouseDownEvent = $e;
|
|
41
|
-
if (!this.rectSvg) {
|
|
42
|
-
this.appendRectangles(this.brushColor);
|
|
43
|
-
}
|
|
44
|
-
if (this.bounds) {
|
|
45
|
-
if (!($e.layerX >= this.bounds.left && $e.layerX <= this.bounds.left + this.bounds.width
|
|
46
|
-
&& $e.layerY >= this.bounds.top && $e.layerY <= this.bounds.top + this.bounds.height))
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
this.drag = false;
|
|
50
|
-
this.mouseDown = true;
|
|
51
|
-
this.selection = [$e.layerX, $e.layerY];
|
|
52
|
-
|
|
53
|
-
let x = this.bb[0];
|
|
54
|
-
let y = this.bb[1];
|
|
55
|
-
let height = this.bb[2];
|
|
56
|
-
let width = this.bb[3];
|
|
57
|
-
if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && (this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3)) {
|
|
58
|
-
this.dir = Direction.South;
|
|
59
|
-
} else if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && (this.selection[1] >= y - 3 && this.selection[1] <= y + 3)) {
|
|
60
|
-
this.dir = Direction.North;
|
|
61
|
-
} else if (this.selection[1] > y + 3 && this.selection[1] < y + height - 3 && (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3)) {
|
|
62
|
-
this.dir = Direction.East;
|
|
63
|
-
} else if (this.selection[1] > y + 3 && this.selection[1] < y + height - 3 && (this.selection[0] >= x - 3 && this.selection[0] <= x + 3)) {
|
|
64
|
-
this.dir = Direction.West;
|
|
65
|
-
} else if (this.selection[0] >= x - 3 && this.selection[0] <= x + 3 && this.selection[1] >= y - 3 && this.selection[1] <= y + 3) {
|
|
66
|
-
this.dir = Direction.NorthWest;
|
|
67
|
-
} else if (this.selection[0] >= x - 3 && this.selection[0] <= x + 3 && this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3) {
|
|
68
|
-
this.dir = Direction.SouthWest;
|
|
69
|
-
} else if (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3 && this.selection[1] >= y - 3 && this.selection[1] <= y + 3) {
|
|
70
|
-
this.dir = Direction.NorthEast;
|
|
71
|
-
} else if (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3 && this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3) {
|
|
72
|
-
this.dir = Direction.SouthEast;
|
|
73
|
-
} else if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && this.selection[1] > y + 3 && this.selection[1] < y + height - 3) {
|
|
74
|
-
this.dir = Direction.Move;
|
|
75
|
-
} else {
|
|
76
|
-
this.dir = null;
|
|
77
|
-
this.updateRectangles(null, $e.layerX, $e.layerY, 0, 0);
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
document.addEventListener(
|
|
82
|
-
'mousemove', ($e) => {
|
|
83
|
-
if (this.mouseDown) {
|
|
84
|
-
this.drag = true;
|
|
85
|
-
if (this.dir == Direction.North) {
|
|
86
|
-
if ($e.layerY > this.bb[1]) {
|
|
87
|
-
//pull down
|
|
88
|
-
if ($e.layerY <= this.bb[1] + this.bb[2])//When we are above bottom line of rect
|
|
89
|
-
this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[2] + this.bb[1] - $e.layerY);
|
|
90
|
-
else//When we go below bottom line of rect
|
|
91
|
-
this.updateRectangles(null, this.bb[0], this.bb[1] + this.bb[2], this.bb[3], $e.layerY - this.bb[1] - this.bb[2]);
|
|
92
|
-
} else {
|
|
93
|
-
// pull up
|
|
94
|
-
this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[2] + this.bb[1] - $e.layerY);
|
|
95
|
-
}
|
|
96
|
-
} else if (this.dir == Direction.South) {
|
|
97
|
-
if ($e.layerY > this.bb[1]) {
|
|
98
|
-
//pull down
|
|
99
|
-
this.updateRectangles(null, this.bb[0], this.bb[1], this.bb[3], $e.layerY - this.bb[1]);
|
|
100
|
-
} else {
|
|
101
|
-
// pull up
|
|
102
|
-
this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[1] - $e.layerY);
|
|
103
|
-
}
|
|
104
|
-
//x,y,height,width
|
|
105
|
-
} else if (this.dir == Direction.West) {
|
|
106
|
-
if ($e.layerX > this.bb[0]) {//Move Right
|
|
107
|
-
if ($e.layerX <= this.bb[0] + this.bb[3])// When we are to the left of rightmost border
|
|
108
|
-
this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[3] - $e.layerX + this.bb[0], this.bb[2]);
|
|
109
|
-
else
|
|
110
|
-
this.updateRectangles(null, this.bb[0] + this.bb[3], this.bb[1], $e.layerX - this.bb[0] - this.bb[3], this.bb[2]);
|
|
111
|
-
|
|
112
|
-
} else {// Move Left
|
|
113
|
-
this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[3] + this.bb[0] - $e.layerX, this.bb[2]);
|
|
114
|
-
}
|
|
115
|
-
} else if (this.dir == Direction.East) {
|
|
116
|
-
if ($e.layerX > this.bb[0]) {//Move Left
|
|
117
|
-
this.updateRectangles(null, this.bb[0], this.bb[1], $e.layerX - this.bb[0], this.bb[2]);
|
|
118
|
-
} else {
|
|
119
|
-
this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[0] - $e.layerX, this.bb[2]);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
else if (this.dir == Direction.NorthEast) {
|
|
123
|
-
}
|
|
124
|
-
else if (this.dir == Direction.NorthWest) {
|
|
125
|
-
}
|
|
126
|
-
else if (this.dir == Direction.SouthEast) {
|
|
127
|
-
//Done
|
|
128
|
-
if ($e.layerX > this.bb[0] && $e.layerY > this.bb[1]) {
|
|
129
|
-
//4
|
|
130
|
-
this.updateRectangles(null, this.bb[0], this.bb[1], $e.layerX - this.bb[0], $e.layerY - this.bb[1]);
|
|
131
|
-
} else if ($e.layerX > this.bb[0] && $e.layerY < this.bb[1]) {
|
|
132
|
-
//1
|
|
133
|
-
this.updateRectangles(null, this.bb[0], $e.layerY, $e.layerX - this.bb[0], this.bb[1] - $e.layerY);
|
|
134
|
-
} else if ($e.layerX < this.bb[0] && $e.layerY < this.bb[1]) {
|
|
135
|
-
//2
|
|
136
|
-
this.updateRectangles(null, $e.layerX, $e.layerY, this.bb[0] - $e.layerX, this.bb[1] - $e.layerY);
|
|
137
|
-
} else {
|
|
138
|
-
//3
|
|
139
|
-
this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[0] - $e.layerX, $e.layerY - this.bb[1]);
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
else if (this.dir == Direction.SouthWest) {
|
|
143
|
-
}
|
|
144
|
-
else if (this.dir == Direction.Move) {
|
|
145
|
-
this.updateRectangles(null, this.bb[0] + $e.layerX - this.selection[0], this.bb[1] + $e.layerY - this.selection[1], this.bb[3], this.bb[2]);
|
|
146
|
-
this.bb[0] = this.bb[0] + $e.layerX - this.selection[0];
|
|
147
|
-
this.bb[1] = this.bb[1] + $e.layerY - this.selection[1];
|
|
148
|
-
this.selection = [$e.layerX, $e.layerY];
|
|
149
|
-
}
|
|
150
|
-
else {
|
|
151
|
-
let { __x, __y, __height, __width } = this.getRectCoordinates($e, this.selection);
|
|
152
|
-
this.updateRectangles(null, __x, __y, __width, __height);
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
});
|
|
156
|
-
|
|
157
|
-
document.addEventListener(
|
|
158
|
-
'mouseup', ($e) => {
|
|
159
|
-
if (this.mouseDown) {
|
|
160
|
-
if (this.drag) {
|
|
161
|
-
console.log('Brush');
|
|
162
|
-
let bb = this.rectSvg._groups[0][0].getBoundingClientRect();
|
|
163
|
-
this.bb = [bb.x - 183, bb.y, bb.height, bb.width];
|
|
164
|
-
document.dispatchEvent(new CustomEvent('brush', {
|
|
165
|
-
'detail': { selection: [[bb.x - 183, bb.y], [bb.x - 183 + bb.width, bb.y + bb.height]] },
|
|
166
|
-
}));
|
|
167
|
-
// Brush Update here
|
|
168
|
-
} else {
|
|
169
|
-
console.log('Click');
|
|
170
|
-
this.updateRectangles('none');
|
|
171
|
-
this.bb = [];
|
|
172
|
-
this.removeRectangles();
|
|
173
|
-
// Click Update here
|
|
174
|
-
document.dispatchEvent(new CustomEvent('brush', {
|
|
175
|
-
'detail': { e: this.mouseDownEvent },
|
|
176
|
-
}));
|
|
177
|
-
}
|
|
178
|
-
this.selection = [];
|
|
179
|
-
this.dir = null;
|
|
180
|
-
this.mouseDown = false;
|
|
181
|
-
}
|
|
182
|
-
})
|
|
183
|
-
return 1;
|
|
184
|
-
}
|
|
185
|
-
removeRectangles() {
|
|
186
|
-
this.rectSvg = null;
|
|
187
|
-
d3.selectAll('.handle--selection').remove()
|
|
188
|
-
d3.selectAll('.handle--n').remove()
|
|
189
|
-
d3.selectAll('.handle--w').remove();
|
|
190
|
-
d3.selectAll('.handle--e').remove();
|
|
191
|
-
d3.selectAll('.handle--s').remove();
|
|
192
|
-
d3.selectAll('.handle--nw').remove();
|
|
193
|
-
d3.selectAll('.handle--ne').remove();
|
|
194
|
-
d3.selectAll('.handle--sw').remove();
|
|
195
|
-
d3.selectAll('.handle--se').remove();
|
|
196
|
-
d3.selectAll('.handle--overlay').remove();
|
|
197
|
-
|
|
198
|
-
}
|
|
199
|
-
appendRectangles(brushColor) {
|
|
200
|
-
this.SVG
|
|
201
|
-
.append('rect')
|
|
202
|
-
.attr("class", "handle--overlay")
|
|
203
|
-
.attr("x", "0")
|
|
204
|
-
.attr("x", "0")
|
|
205
|
-
.attr("height", this.SVG._groups[0][0].clientHeight)
|
|
206
|
-
.attr("width", this.SVG._groups[0][0].clientWidth)
|
|
207
|
-
.style('cursor', 'crosshair')
|
|
208
|
-
.style("opacity", '0')
|
|
209
|
-
this.rectSvg = this.SVG
|
|
210
|
-
.append('rect')
|
|
211
|
-
.attr("class", "handle--selection")
|
|
212
|
-
.style("fill", brushColor)
|
|
213
|
-
.style('cursor', 'move')
|
|
214
|
-
.style("opacity", '0.3')
|
|
215
|
-
.attr("display", "none");
|
|
216
|
-
this.SVG
|
|
217
|
-
.append('rect')
|
|
218
|
-
.attr("class", "handle--n")
|
|
219
|
-
.style('cursor', 'ns-resize')
|
|
220
|
-
.attr("display", "none")
|
|
221
|
-
.style("opacity", '0')
|
|
222
|
-
this.SVG
|
|
223
|
-
.append('rect')
|
|
224
|
-
.attr("class", "handle--w")
|
|
225
|
-
.style('cursor', 'ew-resize')
|
|
226
|
-
.attr("display", "none")
|
|
227
|
-
.style("opacity", '0')
|
|
228
|
-
this.SVG
|
|
229
|
-
.append('rect')
|
|
230
|
-
.attr("class", "handle--e")
|
|
231
|
-
.style('cursor', 'ew-resize')
|
|
232
|
-
.attr("display", "none")
|
|
233
|
-
.style("opacity", '0')
|
|
234
|
-
this.SVG
|
|
235
|
-
.append('rect')
|
|
236
|
-
.attr("class", "handle--s")
|
|
237
|
-
.style('cursor', 'ns-resize')
|
|
238
|
-
.attr("display", "none")
|
|
239
|
-
.style("opacity", '0')
|
|
240
|
-
this.SVG
|
|
241
|
-
.append('rect')
|
|
242
|
-
.attr("class", "handle--nw")
|
|
243
|
-
.style('cursor', 'nwse-resize')
|
|
244
|
-
.attr("display", "none")
|
|
245
|
-
.style("opacity", '0')
|
|
246
|
-
this.SVG
|
|
247
|
-
.append('rect')
|
|
248
|
-
.attr("class", "handle--ne")
|
|
249
|
-
.style('cursor', 'nesw-resize')
|
|
250
|
-
.attr("display", "none")
|
|
251
|
-
.style("opacity", '0')
|
|
252
|
-
this.SVG
|
|
253
|
-
.append('rect')
|
|
254
|
-
.attr("class", "handle--sw")
|
|
255
|
-
.style('cursor', 'nesw-resize')
|
|
256
|
-
.attr("display", "none")
|
|
257
|
-
.style("opacity", '0')
|
|
258
|
-
this.SVG
|
|
259
|
-
.append('rect')
|
|
260
|
-
.attr("class", "handle--se")
|
|
261
|
-
.style('cursor', 'nwse-resize')
|
|
262
|
-
.attr("display", "none")
|
|
263
|
-
.style("opacity", '0');
|
|
264
|
-
}
|
|
265
|
-
updateRectangles(display = null, __x = null, __y = null, __width = null, __height = null) {
|
|
266
|
-
d3.selectAll('.handle--selection').attr("display", display).attr("x", __x)
|
|
267
|
-
.attr("y", __y)
|
|
268
|
-
.attr("height", __height)
|
|
269
|
-
.attr("width", __width)
|
|
270
|
-
d3.selectAll('.handle--n').attr("display", display).attr("x", __x ? __x - 3 : __x)
|
|
271
|
-
.attr("y", __y ? __y - 3 : __y)
|
|
272
|
-
.attr("height", __height == 0 || __height ? 6 : __height)
|
|
273
|
-
.attr("width", __width == 0 || __width ? __width + 6 : __width)
|
|
274
|
-
d3.selectAll('.handle--w').attr("display", display).attr("x", __x ? __x - 3 : __x)
|
|
275
|
-
.attr("y", __y ? __y - 3 : __y)
|
|
276
|
-
.attr("height", __height == 0 || __height ? __height + 6 : __height)
|
|
277
|
-
.attr("width", __width == 0 || __width ? 6 : __width);
|
|
278
|
-
d3.selectAll('.handle--e').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
|
|
279
|
-
.attr("y", __y ? __y - 3 : __y)
|
|
280
|
-
.attr("height", __height == 0 || __height ? __height + 6 : __height)
|
|
281
|
-
.attr("width", __width == 0 || __width ? 6 : __width);
|
|
282
|
-
d3.selectAll('.handle--s').attr("display", display).attr("x", __x ? __x - 3 : __x)
|
|
283
|
-
.attr("y", __y ? __y + __height - 3 : __y)
|
|
284
|
-
.attr("height", __height == 0 || __height ? 6 : __height)
|
|
285
|
-
.attr("width", __width == 0 || __width ? __width + 6 : __width);
|
|
286
|
-
d3.selectAll('.handle--nw').attr("display", display).attr("x", __x ? __x - 3 : __x)
|
|
287
|
-
.attr("y", __y ? __y - 3 : __y)
|
|
288
|
-
.attr("height", __height == 0 || __height ? 6 : __height)
|
|
289
|
-
.attr("width", __width == 0 || __width ? 6 : __width);
|
|
290
|
-
d3.selectAll('.handle--ne').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
|
|
291
|
-
.attr("y", __y ? __y - 3 : __y)
|
|
292
|
-
.attr("height", __height == 0 || __height ? 6 : __height)
|
|
293
|
-
.attr("width", __width == 0 || __width ? 6 : __width);
|
|
294
|
-
d3.selectAll('.handle--sw').attr("display", display).attr("x", __x ? __x - 3 : __x)
|
|
295
|
-
.attr("y", __y ? __y + __height - 3 : __y)
|
|
296
|
-
.attr("height", __height == 0 || __height ? 6 : __height)
|
|
297
|
-
.attr("width", __width == 0 || __width ? 6 : __width);
|
|
298
|
-
d3.selectAll('.handle--se').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
|
|
299
|
-
.attr("y", __y ? __y + __height - 3 : __y)
|
|
300
|
-
.attr("height", __height == 0 || __height ? 6 : __height)
|
|
301
|
-
.attr("width", __width == 0 || __width ? 6 : __width);
|
|
302
|
-
}
|
|
303
|
-
getRectCoordinates($e, selection) {
|
|
304
|
-
let __x, __y, __width, __height = null;
|
|
305
|
-
if ($e.layerY - selection[1] < 0) {
|
|
306
|
-
if ($e.layerX - selection[0] > 0) {
|
|
307
|
-
// LB-RT x+y-
|
|
308
|
-
__x = selection[0];
|
|
309
|
-
__y = $e.layerY;
|
|
310
|
-
__height = selection[1] - $e.layerY;
|
|
311
|
-
__width = $e.layerX - selection[0];
|
|
312
|
-
} else {
|
|
313
|
-
// RB-LT x-y-
|
|
314
|
-
__x = $e.layerX;
|
|
315
|
-
__y = $e.layerY;
|
|
316
|
-
__height = selection[1] - $e.layerY;
|
|
317
|
-
__width = selection[0] - $e.layerX;
|
|
318
|
-
|
|
319
|
-
}
|
|
320
|
-
} else {
|
|
321
|
-
if ($e.layerX - selection[0] > 0) {
|
|
322
|
-
// LT-BR x+y+
|
|
323
|
-
__x = selection[0];
|
|
324
|
-
__y = selection[1];
|
|
325
|
-
__height = $e.layerY - selection[1];
|
|
326
|
-
__width = $e.layerX - selection[0];
|
|
327
|
-
} else {
|
|
328
|
-
// RT-LB x-y+
|
|
329
|
-
__x = $e.layerX;
|
|
330
|
-
__y = selection[1];
|
|
331
|
-
__height = $e.layerY - selection[1];
|
|
332
|
-
__width = selection[0] - $e.layerX;
|
|
333
|
-
}
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
if (this.bounds) {
|
|
337
|
-
// Bounded
|
|
338
|
-
if ($e.layerY - selection[1] > 0) {
|
|
339
|
-
if (__y + __height > this.bounds.top + this.bounds.height) {
|
|
340
|
-
__height = this.bounds.top + this.bounds.height - selection[1];
|
|
341
|
-
}
|
|
342
|
-
} else {
|
|
343
|
-
if (this.bounds.top + __height > selection[1]) {
|
|
344
|
-
__y = this.bounds.top;
|
|
345
|
-
__height = selection[1] - $e.layerY - (this.bounds.top + __height - selection[1]);
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
if ($e.layerX - selection[0] > 0) {
|
|
350
|
-
if (__x + __width > this.bounds.left + this.bounds.width) {
|
|
351
|
-
__width = this.bounds.left + this.bounds.width - selection[0];
|
|
352
|
-
}
|
|
353
|
-
} else {
|
|
354
|
-
if (this.bounds.left + __width > selection[0]) {
|
|
355
|
-
__x = this.bounds.left;
|
|
356
|
-
__width = selection[0] - $e.layerX - (this.bounds.left + __width - selection[0]);
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
return { __x, __y, __height, __width };
|
|
361
|
-
}
|
|
362
|
-
}
|
package/src-old/item/Segment.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
export default class Segment {
|
|
2
|
-
|
|
3
|
-
constructor(v1, v2, parentMark, id) {
|
|
4
|
-
this.type = "segment";
|
|
5
|
-
this._id = id;
|
|
6
|
-
this.vertex1 = v1;
|
|
7
|
-
this.vertex2 = v2;
|
|
8
|
-
|
|
9
|
-
this.dataScope = undefined;
|
|
10
|
-
this.parent = parentMark;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
get id() {
|
|
14
|
-
return this.parent.id + "_s_" + this._id;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
_doTranslate(dx, dy) {
|
|
18
|
-
this.vertex1._doTranslate(dx, dy);
|
|
19
|
-
this.vertex2._doTranslate(dx, dy);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
get x() {
|
|
23
|
-
return (this.vertex1.x + this.vertex2.x)/2;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
get y() {
|
|
27
|
-
return (this.vertex1.y + this.vertex2.y)/2;
|
|
28
|
-
}
|
|
29
|
-
}
|
package/src-old/item/Vertex.js
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
// Based on path.Segment.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
|
2
|
-
// http://paperjs.org/
|
|
3
|
-
// Copyright (c) 2011 - 2019, Juerg Lehni & Jonathan Puckey
|
|
4
|
-
// http://scratchdisk.com/ & https://puckey.studio/
|
|
5
|
-
//
|
|
6
|
-
// Distributed under the MIT license. See LICENSE file for detail
|
|
7
|
-
//
|
|
8
|
-
// All rights reserved.
|
|
9
|
-
|
|
10
|
-
import Point from "../basic/Point"
|
|
11
|
-
import Rectangle from "../basic/Rectangle";
|
|
12
|
-
|
|
13
|
-
export default class Vertex {
|
|
14
|
-
|
|
15
|
-
//handles are relative to the point
|
|
16
|
-
constructor(point, parentMark, id) {
|
|
17
|
-
this.type = "vertex";
|
|
18
|
-
this._id = id;
|
|
19
|
-
this.x = point.x;
|
|
20
|
-
this.y = point.y;
|
|
21
|
-
this.dataScope = undefined;
|
|
22
|
-
this.parent = parentMark;
|
|
23
|
-
|
|
24
|
-
this.shape = undefined;
|
|
25
|
-
this.width = 0;
|
|
26
|
-
this.height = 0;
|
|
27
|
-
this.radius = 0;
|
|
28
|
-
this.fillColor = "#555";
|
|
29
|
-
this.opacity = 1;
|
|
30
|
-
this.strokeWidth = 0;
|
|
31
|
-
this.strokeColor = "#aaa";
|
|
32
|
-
this._polarAngle = undefined;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
get bounds() {
|
|
36
|
-
switch(this.shape) {
|
|
37
|
-
case "rect":
|
|
38
|
-
return new Rectangle(this.x - this.width/2, this.y - this.height/2, this.width, this.height);
|
|
39
|
-
case "circle":
|
|
40
|
-
return new Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
|
|
41
|
-
default:
|
|
42
|
-
return new Rectangle(this.x - 0.5, this.y - 0.5, 1, 1);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
get id() {
|
|
47
|
-
return this.parent.id + "_v_" + this._id;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
toJSON() {
|
|
51
|
-
let json = {};
|
|
52
|
-
json.type = this.type;
|
|
53
|
-
json.id = this._id;
|
|
54
|
-
json.x = this.x;
|
|
55
|
-
json.y = this.y;
|
|
56
|
-
if (this.dataScope)
|
|
57
|
-
json.dataScope = this.dataScope.toJSON();
|
|
58
|
-
if (this._polarAngle !== undefined)
|
|
59
|
-
json.polarAngle = this._polarAngle;
|
|
60
|
-
json.shape = this.shape;
|
|
61
|
-
json.width = this.width;
|
|
62
|
-
json.height = this.height;
|
|
63
|
-
json.radius = this.radius;
|
|
64
|
-
json.fillColor = this.fillColor;
|
|
65
|
-
json.opacity = this.opacity;
|
|
66
|
-
json.strokeWidth = this.strokeWidth;
|
|
67
|
-
json.strokeColor = this.strokeColor;
|
|
68
|
-
return json;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
static fromJSON(json, parent) {
|
|
72
|
-
let v = new Vertex(json, parent, json.id);
|
|
73
|
-
if (json.dataScope)
|
|
74
|
-
v.dataScope = json.dataScope;
|
|
75
|
-
if ("polarAngle" in json)
|
|
76
|
-
v.polarAngle = json.polarAngle;
|
|
77
|
-
v.shape = json.shape;
|
|
78
|
-
v.width = json.width;
|
|
79
|
-
v.height = json.height;
|
|
80
|
-
v.radius = json.radius;
|
|
81
|
-
v.fillColor = json.fillColor;
|
|
82
|
-
v.opacity = json.opacity;
|
|
83
|
-
v.strokeWidth = json.strokeWidth;
|
|
84
|
-
v.strokeColor = json.strokeColor;
|
|
85
|
-
return v;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
_doTranslate(dx, dy) {
|
|
89
|
-
this.x += dx;
|
|
90
|
-
this.y += dy;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
_clone(parent) {
|
|
94
|
-
let v = new Vertex(new Point(this.x, this.y), parent, this._id);
|
|
95
|
-
if (this.dataScope) {
|
|
96
|
-
v.dataScope = this.dataScope.clone();
|
|
97
|
-
}
|
|
98
|
-
v.shape = this.shape;
|
|
99
|
-
v.width = this.width;
|
|
100
|
-
v.height = this.height;
|
|
101
|
-
v.radius = this.radius;
|
|
102
|
-
v.fillColor = this.fillColor;
|
|
103
|
-
v.opacity = this.opacity;
|
|
104
|
-
v.strokeWidth = this.strokeWidth;
|
|
105
|
-
v.strokeColor = this.strokeColor;
|
|
106
|
-
return v;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
set polarAngle(a) {
|
|
110
|
-
this._polarAngle = a;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
get polarAngle() {
|
|
114
|
-
return this._polarAngle;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
Vertex.styles = ["vxShape", "vxWidth", "vxHeight", "vxRadius", "vxFillColor", "vxStrokeColor", "vxStrokeWidth", "vxOpacity"];
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import Group from "./Group";
|
|
2
|
-
import {atlas_rowId, DataType, ItemType} from "../../util/Constants";
|
|
3
|
-
import {CanvasProvider, ItemCounter} from "../../util/ItemUtil";
|
|
4
|
-
|
|
5
|
-
export default class Collection extends Group{
|
|
6
|
-
|
|
7
|
-
constructor() {
|
|
8
|
-
super();
|
|
9
|
-
this.type = ItemType.Collection;
|
|
10
|
-
this._id = this.type + ItemCounter[this.type]++;
|
|
11
|
-
this.classId = this.id;
|
|
12
|
-
this._childrenOrder = undefined;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
get childrenOrder() {
|
|
16
|
-
if (!this._childrenOrder)
|
|
17
|
-
return {"field": "atlas_rowId", "direction": "asc"};
|
|
18
|
-
else
|
|
19
|
-
return this._childrenOrder;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
set childrenOrder(o) {
|
|
23
|
-
if (!("field" in o) && !("direction" in o)) return;
|
|
24
|
-
let field = o.field;
|
|
25
|
-
if (!this.dataScope.dataTable.hasField(field)) {
|
|
26
|
-
console.warn("Cannot order collection children by an non-existent field", o.field);
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
this._childrenOrder = o;
|
|
30
|
-
let f;
|
|
31
|
-
if (field === atlas_rowId) {
|
|
32
|
-
f = (a, b) => parseInt(a.dataScope.getFieldValue(field).substring(1)) - parseInt(b.dataScope.getFieldValue(field).substring(1));
|
|
33
|
-
} else {
|
|
34
|
-
let type = this.children[0].dataScope.getFieldType(field);
|
|
35
|
-
switch (type) {
|
|
36
|
-
case DataType.Date:
|
|
37
|
-
break;
|
|
38
|
-
case DataType.Number:
|
|
39
|
-
case DataType.Integer:
|
|
40
|
-
f = (a, b) => a.dataScope.aggregateNumericalField(field) - b.dataScope.aggregateNumericalField(field);
|
|
41
|
-
break;
|
|
42
|
-
case DataType.String:
|
|
43
|
-
if (o.ranking)
|
|
44
|
-
f = (a, b) => o.ranking.indexOf(a.dataScope.getFieldValue(field)) - o.ranking.indexOf(b.dataScope.getFieldValue(field));
|
|
45
|
-
else
|
|
46
|
-
f = (a, b) => (a.dataScope.getFieldValue(field) < b.dataScope.getFieldValue(field) ? -1 : 1 );
|
|
47
|
-
break;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
this.children.sort(f);
|
|
51
|
-
|
|
52
|
-
if (o.direction == "desc")
|
|
53
|
-
this.children.reverse();
|
|
54
|
-
if (this.layout)
|
|
55
|
-
this.layout.run();
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
duplicate() {
|
|
59
|
-
let coll = this.getScene().collection();
|
|
60
|
-
for (let i = 0; i < this.children.length; i++) {
|
|
61
|
-
let c = this.children[i];
|
|
62
|
-
coll.addChild(c.duplicate());
|
|
63
|
-
}
|
|
64
|
-
coll.classId = this.classId;
|
|
65
|
-
this.parent.addChild(coll);
|
|
66
|
-
if (this._layout) {
|
|
67
|
-
let layout = this._layout.clone();
|
|
68
|
-
coll.layout = layout;
|
|
69
|
-
}
|
|
70
|
-
return coll;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
contains(x, y) {
|
|
74
|
-
let irregular2Ds = [ItemType.Arc, ItemType.Pie, ItemType.Polygon, ItemType.Area];
|
|
75
|
-
if (irregular2Ds.indexOf(this.firstChild.type) >= 0) {
|
|
76
|
-
let svgData = this.getSVGPathData();
|
|
77
|
-
if (svgData !== "") {
|
|
78
|
-
let ctx = CanvasProvider.getContext(),
|
|
79
|
-
p = new Path2D(svgData);
|
|
80
|
-
ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
|
|
81
|
-
ctx.stroke(p);
|
|
82
|
-
return ctx.isPointInPath(p, x, y);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
if (!this._bounds) {
|
|
86
|
-
this._updateBounds();
|
|
87
|
-
}
|
|
88
|
-
return this._bounds.contains(x, y);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
getSVGPathData() {
|
|
92
|
-
let d = "";
|
|
93
|
-
for (let i of this.children) {
|
|
94
|
-
if (i.getSVGPathData)
|
|
95
|
-
d += i.getSVGPathData();
|
|
96
|
-
else if (i.bounds) {
|
|
97
|
-
let b = i.bounds;
|
|
98
|
-
d += ["M", b.left, b.top].join(" ");
|
|
99
|
-
d += ["L", b.right, b.top].join(" ");
|
|
100
|
-
d += ["L", b.right, b.bottom].join(" ");
|
|
101
|
-
d += ["L", b.left, b.bottom, "Z"].join(" ");
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
return d;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import Group from "./Group";
|
|
2
|
-
import {ItemType} from "../../util/Constants";
|
|
3
|
-
import {ItemCounter} from "../../util/ItemUtil";
|
|
4
|
-
|
|
5
|
-
export default class Glyph extends Group {
|
|
6
|
-
|
|
7
|
-
constructor(args) {
|
|
8
|
-
super();
|
|
9
|
-
this.type = ItemType.Glyph;
|
|
10
|
-
this._id = this.type + ItemCounter[this.type]++;
|
|
11
|
-
if (args){
|
|
12
|
-
for (let a of args){
|
|
13
|
-
this.addChild(a);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|