@hpcc-js/layout 3.2.8 → 3.2.10
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/index.js +2300 -895
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +2 -7
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +8 -8
package/dist/index.js
CHANGED
|
@@ -1,42 +1,59 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable:
|
|
3
|
-
var
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
4
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
5
|
import { HTMLWidget, FAChar, select, selectAll, Utility, d3Event, Platform, drag, scaleLinear, dispatch, formatPrefix, format, formatLocale, formatSpecifier, sum, SVGWidget, Database, Palette, scaleOrdinal, ProgressBar, ToggleButton, Text, Button, Spacer, TitleBar, IconBar } from "@hpcc-js/common";
|
|
5
6
|
import { Table } from "@hpcc-js/dgrid";
|
|
6
7
|
import { instanceOfIHighlight } from "@hpcc-js/api";
|
|
7
8
|
function _mergeNamespaces(n, m) {
|
|
8
9
|
for (var i = 0; i < m.length; i++) {
|
|
9
10
|
const e = m[i];
|
|
10
|
-
if (typeof e
|
|
11
|
-
for (const k2 in e)
|
|
11
|
+
if (typeof e !== "string" && !Array.isArray(e)) {
|
|
12
|
+
for (const k2 in e) {
|
|
12
13
|
if (k2 !== "default" && !(k2 in n)) {
|
|
13
14
|
const d = Object.getOwnPropertyDescriptor(e, k2);
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
if (d) {
|
|
16
|
+
Object.defineProperty(n, k2, d.get ? d : {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: /* @__PURE__ */ __name(() => e[k2], "get")
|
|
19
|
+
});
|
|
20
|
+
}
|
|
18
21
|
}
|
|
22
|
+
}
|
|
19
23
|
}
|
|
20
24
|
}
|
|
21
25
|
return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
|
|
22
26
|
}
|
|
23
|
-
|
|
24
|
-
|
|
27
|
+
__name(_mergeNamespaces, "_mergeNamespaces");
|
|
28
|
+
const PKG_NAME = "@hpcc-js/layout";
|
|
29
|
+
const PKG_VERSION = "3.1.1";
|
|
30
|
+
const BUILD_VERSION = "3.2.1";
|
|
31
|
+
const _AbsoluteSurface = class _AbsoluteSurface extends HTMLWidget {
|
|
25
32
|
constructor() {
|
|
26
|
-
super()
|
|
33
|
+
super();
|
|
34
|
+
this._tag = "div";
|
|
27
35
|
}
|
|
28
36
|
enter(domNode, element) {
|
|
29
37
|
super.enter(domNode, element);
|
|
30
38
|
}
|
|
31
39
|
update(domNode, element) {
|
|
32
40
|
super.update(domNode, element);
|
|
33
|
-
let xPos = 0
|
|
41
|
+
let xPos = 0;
|
|
42
|
+
let yPos = 0;
|
|
43
|
+
let width = this.clientWidth();
|
|
44
|
+
let height = this.clientHeight();
|
|
34
45
|
switch (this.units()) {
|
|
35
46
|
case "pixels":
|
|
36
|
-
xPos = this.widgetX()
|
|
47
|
+
xPos = this.widgetX();
|
|
48
|
+
yPos = this.widgetY();
|
|
49
|
+
width = this.widgetWidth() === "" ? width - xPos : Number(this.widgetWidth());
|
|
50
|
+
height = this.widgetHeight() === "" ? height - yPos : Number(this.widgetHeight());
|
|
37
51
|
break;
|
|
38
52
|
case "percent":
|
|
39
|
-
xPos = this.widgetX() * width / 100
|
|
53
|
+
xPos = this.widgetX() * width / 100;
|
|
54
|
+
yPos = this.widgetY() * height / 100;
|
|
55
|
+
width = this.widgetWidth() === "" ? width - xPos : Number(this.widgetWidth()) * width / 100;
|
|
56
|
+
height = this.widgetHeight() === "" ? height - yPos : Number(this.widgetHeight()) * height / 100;
|
|
40
57
|
break;
|
|
41
58
|
}
|
|
42
59
|
element.style("opacity", this.opacity());
|
|
@@ -47,14 +64,20 @@ class AbsoluteSurface extends HTMLWidget {
|
|
|
47
64
|
d.target(this);
|
|
48
65
|
}).merge(widgets).style("left", xPos + "px").style("top", yPos + "px").style("width", width + "px").style("bottom", height + "px").each(function(d) {
|
|
49
66
|
d.resize({ width, height });
|
|
50
|
-
})
|
|
67
|
+
});
|
|
68
|
+
widgets.exit().each(function(d) {
|
|
51
69
|
d.target(null);
|
|
52
70
|
}).remove();
|
|
53
71
|
}
|
|
54
72
|
exit(domNode, element) {
|
|
55
|
-
|
|
73
|
+
if (this.widget()) {
|
|
74
|
+
this.widget().target(null);
|
|
75
|
+
}
|
|
76
|
+
super.exit(domNode, element);
|
|
56
77
|
}
|
|
57
|
-
}
|
|
78
|
+
};
|
|
79
|
+
__name(_AbsoluteSurface, "AbsoluteSurface");
|
|
80
|
+
let AbsoluteSurface = _AbsoluteSurface;
|
|
58
81
|
AbsoluteSurface.prototype._class += " layout_AbsoluteSurface";
|
|
59
82
|
AbsoluteSurface.prototype.publish("units", "percent", "set", "Units", ["pixels", "percent"]);
|
|
60
83
|
AbsoluteSurface.prototype.publish("widgetX", 0, "number", "Widget XPos");
|
|
@@ -63,7 +86,7 @@ AbsoluteSurface.prototype.publish("widgetWidth", "100", "string", "Widget Width,
|
|
|
63
86
|
AbsoluteSurface.prototype.publish("widgetHeight", "100", "string", "Widget Height, omit for full");
|
|
64
87
|
AbsoluteSurface.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Private"] });
|
|
65
88
|
AbsoluteSurface.prototype.publish("opacity", 1, "number", "Opacity");
|
|
66
|
-
class
|
|
89
|
+
const _Accordion = class _Accordion extends HTMLWidget {
|
|
67
90
|
constructor() {
|
|
68
91
|
super();
|
|
69
92
|
__publicField(this, "_isClosed");
|
|
@@ -71,33 +94,63 @@ class Accordion extends HTMLWidget {
|
|
|
71
94
|
__publicField(this, "iconDiv");
|
|
72
95
|
__publicField(this, "ul");
|
|
73
96
|
__publicField(this, "icon");
|
|
74
|
-
this._tag = "div"
|
|
97
|
+
this._tag = "div";
|
|
98
|
+
this._isClosed = false;
|
|
75
99
|
}
|
|
76
|
-
pushListItem(widget, prepend =
|
|
100
|
+
pushListItem(widget, prepend = false, protect = false) {
|
|
77
101
|
const contentArr = this.content();
|
|
78
|
-
|
|
102
|
+
widget._protected = protect;
|
|
103
|
+
if (prepend) {
|
|
104
|
+
contentArr.unshift(widget);
|
|
105
|
+
} else {
|
|
106
|
+
contentArr.push(widget);
|
|
107
|
+
}
|
|
108
|
+
this.content(contentArr);
|
|
109
|
+
return this;
|
|
79
110
|
}
|
|
80
111
|
clearListItems() {
|
|
81
112
|
const arr = [];
|
|
82
|
-
for (const i in this.content())
|
|
83
|
-
this.content()[i]._protected
|
|
84
|
-
|
|
113
|
+
for (const i in this.content()) {
|
|
114
|
+
if (this.content()[i]._protected) {
|
|
115
|
+
arr.push(this.content()[i]);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
this.content(arr);
|
|
119
|
+
return this;
|
|
85
120
|
}
|
|
86
121
|
collapseClick(element) {
|
|
87
|
-
|
|
122
|
+
if (element.classed("closed")) {
|
|
123
|
+
this._isClosed = false;
|
|
124
|
+
element.classed("open", true);
|
|
125
|
+
element.classed("closed", false);
|
|
126
|
+
} else {
|
|
127
|
+
this._isClosed = true;
|
|
128
|
+
element.classed("open", false);
|
|
129
|
+
element.classed("closed", true);
|
|
130
|
+
}
|
|
88
131
|
}
|
|
89
132
|
enter(domNode, element) {
|
|
90
133
|
super.enter(domNode, element);
|
|
91
134
|
const context = this;
|
|
92
|
-
this._isClosed = this.defaultCollapsed()
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
135
|
+
this._isClosed = this.defaultCollapsed();
|
|
136
|
+
element.classed(this._isClosed ? "closed" : "open", true);
|
|
137
|
+
this.titleSpan = element.append("span").classed("collapsible-title", true);
|
|
138
|
+
this.iconDiv = element.append("div").classed("collapsible-icon", true);
|
|
139
|
+
this.ul = element.append("ul");
|
|
140
|
+
this.icon = new FAChar().size({ height: 24, width: 24 }).target(this.iconDiv.node());
|
|
141
|
+
this.iconDiv.on("click", function() {
|
|
142
|
+
context.collapseClick(element);
|
|
143
|
+
context.render();
|
|
144
|
+
});
|
|
145
|
+
this.titleSpan.on("click", function() {
|
|
146
|
+
context.collapseClick(element);
|
|
147
|
+
context.render();
|
|
96
148
|
});
|
|
97
149
|
}
|
|
98
150
|
update(domNode, element) {
|
|
99
151
|
super.update(domNode, element);
|
|
100
|
-
const context = this
|
|
152
|
+
const context = this;
|
|
153
|
+
const this_id = "";
|
|
101
154
|
this.titleSpan.text(context.title().length > 0 ? context.title() + this_id : "Accordion [" + context._id + "]" + this_id);
|
|
102
155
|
const rows = this.ul.selectAll("#" + context._id + " > ul > li").data(this.content(), function(d) {
|
|
103
156
|
return d._id;
|
|
@@ -114,15 +167,20 @@ class Accordion extends HTMLWidget {
|
|
|
114
167
|
});
|
|
115
168
|
}
|
|
116
169
|
widget.target(li);
|
|
117
|
-
} else
|
|
170
|
+
} else {
|
|
118
171
|
return widget._target;
|
|
172
|
+
}
|
|
119
173
|
return li;
|
|
120
|
-
})
|
|
174
|
+
});
|
|
175
|
+
rows.exit().remove();
|
|
176
|
+
this.icon.text_colorFill(this.titleFontColor()).char(this._isClosed ? this.closedIcon() : this.openIcon()).render();
|
|
121
177
|
}
|
|
122
178
|
exit(domNode, element) {
|
|
123
179
|
super.exit(domNode, element);
|
|
124
180
|
}
|
|
125
|
-
}
|
|
181
|
+
};
|
|
182
|
+
__name(_Accordion, "Accordion");
|
|
183
|
+
let Accordion = _Accordion;
|
|
126
184
|
Accordion.prototype._class += " layout_Accordion";
|
|
127
185
|
Accordion.prototype.publish("content", [], "widgetArray", "Array of widgets", null, { tags: ["Basic"] });
|
|
128
186
|
Accordion.prototype.publish("title", "", "string", "Title of collapsible section", null, { tags: ["Private"] });
|
|
@@ -130,16 +188,23 @@ Accordion.prototype.publish("openIcon", "", "string", "Icon to display when l
|
|
|
130
188
|
Accordion.prototype.publish("closedIcon", "", "string", "Icon to display when list is closed", null, { tags: ["Private"] });
|
|
131
189
|
Accordion.prototype.publish("titleFontColor", "#FFFFFF", "html-color", "Title font color", null, { tags: ["Private"] });
|
|
132
190
|
Accordion.prototype.publish("titleBackgroundColor", "#333333", "html-color", "Title background color", null, { tags: ["Private"] });
|
|
133
|
-
Accordion.prototype.publish("defaultCollapsed",
|
|
134
|
-
class
|
|
191
|
+
Accordion.prototype.publish("defaultCollapsed", false, "boolean", "Collapsed by default if true", null, { tags: ["Private"] });
|
|
192
|
+
const _Surface = class _Surface extends HTMLWidget {
|
|
135
193
|
constructor() {
|
|
136
194
|
super();
|
|
137
195
|
__publicField(this, "_surfaceButtons");
|
|
138
|
-
this._tag = "div"
|
|
196
|
+
this._tag = "div";
|
|
197
|
+
this._surfaceButtons = [];
|
|
139
198
|
}
|
|
140
199
|
widgetSize(titleDiv, widgetDiv) {
|
|
141
|
-
let width = this.clientWidth()
|
|
142
|
-
|
|
200
|
+
let width = this.clientWidth();
|
|
201
|
+
let height = this.clientHeight();
|
|
202
|
+
if (this.title()) {
|
|
203
|
+
height -= this.calcHeight(titleDiv);
|
|
204
|
+
}
|
|
205
|
+
height -= this.calcFrameHeight(widgetDiv);
|
|
206
|
+
width -= this.calcFrameWidth(widgetDiv);
|
|
207
|
+
return { width, height };
|
|
143
208
|
}
|
|
144
209
|
enter(domNode, element) {
|
|
145
210
|
super.enter(domNode, element);
|
|
@@ -151,53 +216,70 @@ class Surface extends HTMLWidget {
|
|
|
151
216
|
const titles = element2.selectAll(".surfaceTitle").data(this.title() ? [this.title()] : []);
|
|
152
217
|
titles.enter().insert("h3", "div").attr("class", "surfaceTitle").merge(titles).text(function(d) {
|
|
153
218
|
return d;
|
|
154
|
-
}).style("text-align", this.surfaceTitleAlignment()).style("color", this.surfaceTitleFontColor()).style("font-size", this.surfaceTitleFontSize_exists() ? this.surfaceTitleFontSize() + "px" : null).style("font-family", this.surfaceTitleFontFamily()).style("font-weight", this.surfaceTitleFontBold() ? "bold" : "normal").style("background-color", this.surfaceTitleBackgroundColor()).style("padding", this.surfaceTitlePadding_exists() ? this.surfaceTitlePadding() + "px" : null).style("title", this.altText_exists() ? this.altText() : null)
|
|
155
|
-
|
|
156
|
-
|
|
219
|
+
}).style("text-align", this.surfaceTitleAlignment()).style("color", this.surfaceTitleFontColor()).style("font-size", this.surfaceTitleFontSize_exists() ? this.surfaceTitleFontSize() + "px" : null).style("font-family", this.surfaceTitleFontFamily()).style("font-weight", this.surfaceTitleFontBold() ? "bold" : "normal").style("background-color", this.surfaceTitleBackgroundColor()).style("padding", this.surfaceTitlePadding_exists() ? this.surfaceTitlePadding() + "px" : null).style("title", this.altText_exists() ? this.altText() : null);
|
|
220
|
+
titles.exit().remove();
|
|
221
|
+
const surfaceTitle = element2.select(".surfaceTitle");
|
|
222
|
+
const surfaceButtons = surfaceTitle.append("div").attr("class", "html-button-container").selectAll(".surface-button").data(this.buttonAnnotations());
|
|
223
|
+
surfaceButtons.enter().append("button").classed("surface-button", true).each(function(button, idx) {
|
|
157
224
|
const el = context._surfaceButtons[idx] = select(this).attr("class", "surface-button" + (button.class ? " " + button.class : "")).attr("id", button.id).style("padding", button.padding).style("width", button.width).style("height", button.height).style("cursor", "pointer");
|
|
158
|
-
button.font === "FontAwesome"
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
225
|
+
if (button.font === "FontAwesome") {
|
|
226
|
+
el.style("background", "transparent").style("border", "none").on("click", function(d) {
|
|
227
|
+
context.click(d);
|
|
228
|
+
}).append("i").attr("class", "fa").text(function() {
|
|
229
|
+
return button.label;
|
|
230
|
+
});
|
|
231
|
+
} else {
|
|
232
|
+
el.text(function() {
|
|
233
|
+
return button.label;
|
|
234
|
+
}).on("click", function(d) {
|
|
235
|
+
context.click(d);
|
|
236
|
+
});
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
surfaceButtons.exit().each(function(_d, idx) {
|
|
168
240
|
const element = select(this);
|
|
169
|
-
delete context._surfaceButtons[idx]
|
|
241
|
+
delete context._surfaceButtons[idx];
|
|
242
|
+
element.remove();
|
|
170
243
|
});
|
|
171
244
|
const widgets = element2.selectAll("#" + this._id + " > .surfaceWidget").data(this.widget() ? [this.widget()] : [], function(d) {
|
|
172
245
|
return d._id;
|
|
173
246
|
});
|
|
174
247
|
widgets.enter().append("div").attr("class", "surfaceWidget").each(function(d) {
|
|
175
|
-
select(context.element().node().parentElement).classed("content-icon content-icon-" + d.classID().split("_")[1],
|
|
248
|
+
select(context.element().node().parentElement).classed("content-icon content-icon-" + d.classID().split("_")[1], true);
|
|
249
|
+
d.target(this);
|
|
176
250
|
}).merge(widgets).style("padding", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null).each(function(d) {
|
|
177
251
|
const widgetSize = context.widgetSize(element2.select("h3"), select(this));
|
|
178
|
-
|
|
179
|
-
|
|
252
|
+
if (widgetSize.width < 0) widgetSize.width = 0;
|
|
253
|
+
if (widgetSize.height < 0) widgetSize.height = 0;
|
|
254
|
+
d.resize({ width: widgetSize.width, height: widgetSize.height });
|
|
255
|
+
});
|
|
256
|
+
widgets.exit().each(function(d) {
|
|
180
257
|
d.target(null);
|
|
181
258
|
}).remove();
|
|
182
259
|
}
|
|
183
260
|
exit(domNode, element) {
|
|
184
|
-
|
|
261
|
+
if (this.widget()) {
|
|
262
|
+
this.widget().target(null);
|
|
263
|
+
}
|
|
264
|
+
super.exit(domNode, element);
|
|
185
265
|
}
|
|
186
266
|
// Events ---
|
|
187
267
|
click(obj) {
|
|
188
268
|
}
|
|
189
|
-
}
|
|
269
|
+
};
|
|
270
|
+
__name(_Surface, "Surface");
|
|
271
|
+
let Surface = _Surface;
|
|
190
272
|
Surface.prototype._class += " layout_Surface";
|
|
191
273
|
Surface.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
|
|
192
|
-
Surface.prototype.publish("altText", null, "string", "Alt text", null, { optional:
|
|
193
|
-
Surface.prototype.publish("surfaceTitlePadding", null, "number", "Title Padding (px)", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
194
|
-
Surface.prototype.publish("surfaceTitleFontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
195
|
-
Surface.prototype.publish("surfaceTitleFontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
196
|
-
Surface.prototype.publish("surfaceTitleFontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
197
|
-
Surface.prototype.publish("surfaceTitleFontBold",
|
|
198
|
-
Surface.prototype.publish("surfaceTitleBackgroundColor", null, "html-color", "Title Background Color", null, { tags: ["Advanced"], disable: (w) => !w.title() });
|
|
199
|
-
Surface.prototype.publish("surfaceTitleAlignment", "center", "set", "Title Alignment", ["left", "right", "center"], { tags: ["Basic"], disable: (w) => !w.title() });
|
|
200
|
-
Surface.prototype.publish("surfaceShadow",
|
|
274
|
+
Surface.prototype.publish("altText", null, "string", "Alt text", null, { optional: true });
|
|
275
|
+
Surface.prototype.publish("surfaceTitlePadding", null, "number", "Title Padding (px)", null, { tags: ["Advanced"], disable: /* @__PURE__ */ __name((w) => !w.title(), "disable") });
|
|
276
|
+
Surface.prototype.publish("surfaceTitleFontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], disable: /* @__PURE__ */ __name((w) => !w.title(), "disable") });
|
|
277
|
+
Surface.prototype.publish("surfaceTitleFontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], disable: /* @__PURE__ */ __name((w) => !w.title(), "disable") });
|
|
278
|
+
Surface.prototype.publish("surfaceTitleFontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], disable: /* @__PURE__ */ __name((w) => !w.title(), "disable") });
|
|
279
|
+
Surface.prototype.publish("surfaceTitleFontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], disable: /* @__PURE__ */ __name((w) => !w.title(), "disable") });
|
|
280
|
+
Surface.prototype.publish("surfaceTitleBackgroundColor", null, "html-color", "Title Background Color", null, { tags: ["Advanced"], disable: /* @__PURE__ */ __name((w) => !w.title(), "disable") });
|
|
281
|
+
Surface.prototype.publish("surfaceTitleAlignment", "center", "set", "Title Alignment", ["left", "right", "center"], { tags: ["Basic"], disable: /* @__PURE__ */ __name((w) => !w.title(), "disable") });
|
|
282
|
+
Surface.prototype.publish("surfaceShadow", false, "boolean", "3D Shadow");
|
|
201
283
|
Surface.prototype.publish("surfacePadding", null, "string", "Surface Padding (px)", null, { tags: ["Intermediate"] });
|
|
202
284
|
Surface.prototype.publish("surfaceBackgroundColor", null, "html-color", "Surface Background Color", null, { tags: ["Advanced"] });
|
|
203
285
|
Surface.prototype.publish("surfaceBorderWidth", null, "number", "Surface Border Width (px)", null, { tags: ["Advanced"] });
|
|
@@ -205,19 +287,21 @@ Surface.prototype.publish("surfaceBorderColor", null, "html-color", "Surface Bor
|
|
|
205
287
|
Surface.prototype.publish("surfaceBorderRadius", null, "number", "Surface Border Radius (px)", null, { tags: ["Advanced"] });
|
|
206
288
|
Surface.prototype.publish("buttonAnnotations", [], "array", "Button Array", null, { tags: ["Private"] });
|
|
207
289
|
Surface.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Basic"] });
|
|
208
|
-
class
|
|
290
|
+
const _Cell = class _Cell extends Surface {
|
|
209
291
|
constructor() {
|
|
210
292
|
super();
|
|
211
293
|
__publicField(this, "_indicateTheseIds");
|
|
212
294
|
this._indicateTheseIds = [];
|
|
213
295
|
}
|
|
214
296
|
indicateTheseIds(_) {
|
|
215
|
-
|
|
297
|
+
if (!arguments.length) return this._indicateTheseIds;
|
|
298
|
+
this._indicateTheseIds = _;
|
|
299
|
+
return this;
|
|
216
300
|
}
|
|
217
301
|
enter(domNode, element) {
|
|
218
302
|
super.enter(domNode, element);
|
|
219
303
|
const context = this;
|
|
220
|
-
element.classed("layout_Surface",
|
|
304
|
+
element.classed("layout_Surface", true).on("mouseenter", function() {
|
|
221
305
|
context.onMouseEnter();
|
|
222
306
|
}).on("mouseleave", function() {
|
|
223
307
|
context.onMouseLeave();
|
|
@@ -227,18 +311,27 @@ class Cell extends Surface {
|
|
|
227
311
|
super.update(domNode, element);
|
|
228
312
|
}
|
|
229
313
|
onMouseEnter() {
|
|
230
|
-
const arr = this.indicateTheseIds()
|
|
314
|
+
const arr = this.indicateTheseIds();
|
|
315
|
+
const opacity = this.indicatorOpacity();
|
|
316
|
+
const indicatorBorderColor = this.indicatorBorderColor();
|
|
317
|
+
const indicatorGlowColor = this.indicatorGlowColor();
|
|
231
318
|
for (let i = 0; i < arr.length; i++) {
|
|
232
|
-
const otherElement = select("#" + arr[i])
|
|
233
|
-
|
|
319
|
+
const otherElement = select("#" + arr[i]);
|
|
320
|
+
const otherWidget = otherElement.datum();
|
|
321
|
+
if (otherElement && otherWidget) {
|
|
322
|
+
otherElement.append("div").attr("class", "update-indicator").style("width", otherWidget.width() + "px").style("height", otherWidget.height() + "px").style("opacity", opacity).style("border-color", indicatorBorderColor).style("-webkit-box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor).style("-moz-box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor).style("box-shadow", "inset 0px 0px 30px 0px " + indicatorGlowColor);
|
|
323
|
+
}
|
|
234
324
|
}
|
|
235
325
|
}
|
|
236
326
|
onMouseLeave() {
|
|
237
327
|
const arr = this.indicateTheseIds();
|
|
238
|
-
for (let i = 0; i < arr.length; i++)
|
|
328
|
+
for (let i = 0; i < arr.length; i++) {
|
|
239
329
|
selectAll("#" + arr[i] + " > div.update-indicator").remove();
|
|
330
|
+
}
|
|
240
331
|
}
|
|
241
|
-
}
|
|
332
|
+
};
|
|
333
|
+
__name(_Cell, "Cell");
|
|
334
|
+
let Cell = _Cell;
|
|
242
335
|
Cell.prototype._class += " layout_Cell";
|
|
243
336
|
Cell.prototype.publish("gridRow", 0, "number", "Grid Row Position", null, { tags: ["Private"] });
|
|
244
337
|
Cell.prototype.publish("gridCol", 0, "number", "Grid Column Position", null, { tags: ["Private"] });
|
|
@@ -247,7 +340,7 @@ Cell.prototype.publish("gridColSpan", 1, "number", "Grid Column Span", null, { t
|
|
|
247
340
|
Cell.prototype.publish("indicatorGlowColor", "#EEEE11", "html-color", "Glow color of update-indicator", null, { tags: ["Basic"] });
|
|
248
341
|
Cell.prototype.publish("indicatorBorderColor", "#F48A00", "html-color", "Border color of update-indicator", null, { tags: ["Basic"] });
|
|
249
342
|
Cell.prototype.publish("indicatorOpacity", 0.8, "number", "Opacity of update-indicator", null, { tags: ["Basic"] });
|
|
250
|
-
class
|
|
343
|
+
const _Border = class _Border extends HTMLWidget {
|
|
251
344
|
constructor() {
|
|
252
345
|
super();
|
|
253
346
|
__publicField(this, "_colCount");
|
|
@@ -273,20 +366,40 @@ class Border extends HTMLWidget {
|
|
|
273
366
|
__publicField(this, "lazyPostUpdate", Utility.debounce(function() {
|
|
274
367
|
this.postUpdate();
|
|
275
368
|
}, 100));
|
|
276
|
-
this._tag = "div"
|
|
369
|
+
this._tag = "div";
|
|
370
|
+
this._colCount = 0;
|
|
371
|
+
this._rowCount = 0;
|
|
372
|
+
this._colSize = 0;
|
|
373
|
+
this._rowSize = 0;
|
|
374
|
+
this._shrinkWrapBoxes = {};
|
|
375
|
+
this.content([]);
|
|
376
|
+
this.sectionTypes([]);
|
|
277
377
|
}
|
|
278
378
|
watchWidget(widget) {
|
|
279
|
-
if (this._watch === void 0
|
|
379
|
+
if (this._watch === void 0) {
|
|
380
|
+
this._watch = {};
|
|
381
|
+
}
|
|
382
|
+
if (this._watch[widget.id()]) {
|
|
383
|
+
this._watch[widget.id()].remove();
|
|
384
|
+
delete this._watch[widget.id()];
|
|
385
|
+
}
|
|
386
|
+
if (widget) {
|
|
280
387
|
const context = this;
|
|
281
388
|
this._watch[widget.id()] = widget.monitor(function(paramId, newVal, oldVal) {
|
|
282
|
-
oldVal !== newVal
|
|
389
|
+
if (oldVal !== newVal) {
|
|
390
|
+
context.lazyPostUpdate();
|
|
391
|
+
}
|
|
283
392
|
});
|
|
284
393
|
}
|
|
285
394
|
}
|
|
286
395
|
applyLayoutType() {
|
|
287
396
|
const layoutObj = this.borderLayoutObject();
|
|
288
397
|
this.content().forEach(function(cell, i) {
|
|
289
|
-
cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left
|
|
398
|
+
cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left;
|
|
399
|
+
cell._fixedTop = layoutObj[this.sectionTypes()[i]].top;
|
|
400
|
+
cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width;
|
|
401
|
+
cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height;
|
|
402
|
+
cell._dragHandles = this.cellSpecificDragHandles(this.sectionTypes()[i]);
|
|
290
403
|
}, this);
|
|
291
404
|
}
|
|
292
405
|
cellSpecificDragHandles(sectionType) {
|
|
@@ -304,91 +417,189 @@ class Border extends HTMLWidget {
|
|
|
304
417
|
}
|
|
305
418
|
}
|
|
306
419
|
borderLayoutObject(layoutType) {
|
|
307
|
-
const retObj = {}
|
|
308
|
-
|
|
420
|
+
const retObj = {};
|
|
421
|
+
const context = this;
|
|
422
|
+
let topSize;
|
|
423
|
+
let topPerc;
|
|
424
|
+
let bottomSize;
|
|
425
|
+
let bottomPerc;
|
|
426
|
+
let leftSize;
|
|
427
|
+
let leftPerc;
|
|
428
|
+
let rightSize;
|
|
429
|
+
let rightPerc;
|
|
309
430
|
const bcRect = this.target().getBoundingClientRect();
|
|
310
|
-
bcRect.top
|
|
431
|
+
bcRect.top;
|
|
432
|
+
bcRect.left;
|
|
433
|
+
bcRect.bottom;
|
|
434
|
+
bcRect.right;
|
|
435
|
+
if (this.target() instanceof SVGElement) {
|
|
436
|
+
parseFloat(this.target().getAttribute("width"));
|
|
437
|
+
parseFloat(this.target().getAttribute("height"));
|
|
438
|
+
} else {
|
|
439
|
+
bcRect.width;
|
|
440
|
+
bcRect.height;
|
|
441
|
+
}
|
|
442
|
+
if (this.sectionTypes().indexOf("top") !== -1) {
|
|
443
|
+
topSize = this.topSize();
|
|
444
|
+
topPerc = this.topPercentage();
|
|
445
|
+
if (typeof this._shrinkWrapBoxes["top"] !== "undefined") {
|
|
446
|
+
topSize = this._shrinkWrapBoxes["top"].height + this.gutter();
|
|
447
|
+
topPerc = 0;
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
if (this.sectionTypes().indexOf("bottom") !== -1) {
|
|
451
|
+
bottomSize = this.bottomSize();
|
|
452
|
+
bottomPerc = this.bottomPercentage();
|
|
453
|
+
if (typeof this._shrinkWrapBoxes["bottom"] !== "undefined") {
|
|
454
|
+
bottomSize = this._shrinkWrapBoxes["bottom"].height + this.gutter();
|
|
455
|
+
bottomPerc = 0;
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
if (this.sectionTypes().indexOf("left") !== -1) {
|
|
459
|
+
leftSize = this.leftSize();
|
|
460
|
+
leftPerc = this.leftPercentage();
|
|
461
|
+
if (typeof this._shrinkWrapBoxes["left"] !== "undefined") {
|
|
462
|
+
leftSize = this._shrinkWrapBoxes["left"].width + this.gutter();
|
|
463
|
+
leftPerc = 0;
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
if (this.sectionTypes().indexOf("right") !== -1) {
|
|
467
|
+
rightSize = this.rightSize();
|
|
468
|
+
rightPerc = this.rightPercentage();
|
|
469
|
+
if (typeof this._shrinkWrapBoxes["right"] !== "undefined") {
|
|
470
|
+
rightSize = this._shrinkWrapBoxes["right"].width + this.gutter();
|
|
471
|
+
rightPerc = 0;
|
|
472
|
+
}
|
|
473
|
+
}
|
|
311
474
|
const t = _sectionPlacementObject({
|
|
312
|
-
width: { px: 0, "%": 100 },
|
|
313
|
-
height: { px: topSize, "%": topPerc },
|
|
314
|
-
top: { px: 0, "%": 0 },
|
|
315
|
-
left: { px: 0, "%": 0 }
|
|
316
|
-
})
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
475
|
+
width: { "px": 0, "%": 100 },
|
|
476
|
+
height: { "px": topSize, "%": topPerc },
|
|
477
|
+
top: { "px": 0, "%": 0 },
|
|
478
|
+
left: { "px": 0, "%": 0 }
|
|
479
|
+
});
|
|
480
|
+
const b = _sectionPlacementObject({
|
|
481
|
+
width: { "px": 0, "%": 100 },
|
|
482
|
+
height: { "px": bottomSize, "%": bottomPerc },
|
|
483
|
+
top: { "px": 0, "%": 100 },
|
|
484
|
+
left: { "px": 0, "%": 0 }
|
|
321
485
|
});
|
|
322
486
|
b.top -= b.height;
|
|
323
487
|
const l = _sectionPlacementObject({
|
|
324
|
-
width: { px: leftSize, "%": leftPerc },
|
|
325
|
-
height: { px: -t.height - b.height, "%": 100 },
|
|
326
|
-
top: { px: t.height, "%": 0 },
|
|
327
|
-
left: { px: 0, "%": 0 }
|
|
328
|
-
})
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
488
|
+
width: { "px": leftSize, "%": leftPerc },
|
|
489
|
+
height: { "px": -t.height - b.height, "%": 100 },
|
|
490
|
+
top: { "px": t.height, "%": 0 },
|
|
491
|
+
left: { "px": 0, "%": 0 }
|
|
492
|
+
});
|
|
493
|
+
const r = _sectionPlacementObject({
|
|
494
|
+
width: { "px": rightSize, "%": rightPerc },
|
|
495
|
+
height: { "px": -t.height - b.height, "%": 100 },
|
|
496
|
+
top: { "px": t.height, "%": 0 },
|
|
497
|
+
left: { "px": 0, "%": 100 }
|
|
333
498
|
});
|
|
334
499
|
r.left -= r.width;
|
|
335
500
|
const c2 = _sectionPlacementObject({
|
|
336
|
-
width: { px: -r.width - l.width, "%": 100 },
|
|
337
|
-
height: { px: -t.height - b.height, "%": 100 },
|
|
338
|
-
top: { px: t.height, "%": 0 },
|
|
339
|
-
left: { px: l.width, "%": 0 }
|
|
501
|
+
width: { "px": -r.width - l.width, "%": 100 },
|
|
502
|
+
height: { "px": -t.height - b.height, "%": 100 },
|
|
503
|
+
top: { "px": t.height, "%": 0 },
|
|
504
|
+
left: { "px": l.width, "%": 0 }
|
|
340
505
|
});
|
|
341
|
-
|
|
506
|
+
retObj["top"] = t;
|
|
507
|
+
retObj["bottom"] = b;
|
|
508
|
+
retObj["right"] = r;
|
|
509
|
+
retObj["left"] = l;
|
|
510
|
+
retObj["center"] = c2;
|
|
511
|
+
return retObj;
|
|
342
512
|
function _sectionPlacementObject(obj) {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
513
|
+
obj.width["px"] = typeof obj.width["px"] !== "undefined" ? obj.width["px"] : 0;
|
|
514
|
+
obj.width["%"] = typeof obj.width["%"] !== "undefined" ? obj.width["%"] : 0;
|
|
515
|
+
obj.height["px"] = typeof obj.height["px"] !== "undefined" ? obj.height["px"] : 0;
|
|
516
|
+
obj.height["%"] = typeof obj.height["%"] !== "undefined" ? obj.height["%"] : 0;
|
|
517
|
+
const ret = {
|
|
518
|
+
width: obj.width["px"] + obj.width["%"] / 100 * context.width(),
|
|
519
|
+
height: obj.height["px"] + obj.height["%"] / 100 * context.height(),
|
|
520
|
+
top: obj.top["px"] + obj.top["%"] / 100 * context.height() + context.gutter() / 2,
|
|
521
|
+
left: obj.left["px"] + obj.left["%"] / 100 * context.width() + context.gutter() / 2
|
|
348
522
|
};
|
|
523
|
+
return ret;
|
|
349
524
|
}
|
|
525
|
+
__name(_sectionPlacementObject, "_sectionPlacementObject");
|
|
350
526
|
}
|
|
351
527
|
clearContent(sectionType) {
|
|
352
|
-
if (!sectionType)
|
|
528
|
+
if (!sectionType) {
|
|
353
529
|
this.content().forEach(function(contentWidget) {
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
530
|
+
contentWidget.target(null);
|
|
531
|
+
return false;
|
|
532
|
+
});
|
|
533
|
+
select("#" + this.id() + " > div.borderHandle").classed("borderHandleDisabled", true);
|
|
534
|
+
delete this._watch;
|
|
535
|
+
this.content([]);
|
|
536
|
+
this.sectionTypes([]);
|
|
537
|
+
} else {
|
|
357
538
|
const idx = this.sectionTypes().indexOf(sectionType);
|
|
358
|
-
|
|
539
|
+
if (idx >= 0) {
|
|
540
|
+
if (this._watch && this.content()[idx]) {
|
|
541
|
+
delete this._watch[this.content()[idx].id()];
|
|
542
|
+
}
|
|
543
|
+
this.content()[idx].target(null);
|
|
544
|
+
select("#" + this.id() + " > div.borderHandle_" + sectionType).classed("borderHandleDisabled", true);
|
|
545
|
+
this.content().splice(idx, 1);
|
|
546
|
+
this.sectionTypes().splice(idx, 1);
|
|
547
|
+
}
|
|
359
548
|
}
|
|
360
549
|
}
|
|
361
550
|
hasContent(sectionType, widget, title) {
|
|
362
551
|
return this.sectionTypes().indexOf(sectionType) >= 0;
|
|
363
552
|
}
|
|
364
553
|
setContent(sectionType, widget, title) {
|
|
365
|
-
|
|
554
|
+
this.clearContent(sectionType);
|
|
555
|
+
title = typeof title !== "undefined" ? title : "";
|
|
556
|
+
if (widget) {
|
|
366
557
|
const cell = new Cell().surfaceBorderWidth(0).widget(widget).title(title);
|
|
367
|
-
this.watchWidget(widget)
|
|
558
|
+
this.watchWidget(widget);
|
|
559
|
+
this.content().push(cell);
|
|
560
|
+
this.sectionTypes().push(sectionType);
|
|
368
561
|
}
|
|
369
562
|
return this;
|
|
370
563
|
}
|
|
371
564
|
getCell(id) {
|
|
372
565
|
const idx = this.sectionTypes().indexOf(id);
|
|
373
|
-
|
|
566
|
+
if (idx >= 0) {
|
|
567
|
+
return this.content()[idx];
|
|
568
|
+
}
|
|
569
|
+
return null;
|
|
374
570
|
}
|
|
375
571
|
getContent(id) {
|
|
376
572
|
const idx = this.sectionTypes().indexOf(id);
|
|
377
|
-
|
|
573
|
+
if (idx >= 0) {
|
|
574
|
+
return this.content()[idx].widget();
|
|
575
|
+
}
|
|
576
|
+
return null;
|
|
378
577
|
}
|
|
379
578
|
setLayoutOffsets() {
|
|
380
|
-
this._offsetX = this._element.node().getBoundingClientRect().left + this.gutter() / 2
|
|
579
|
+
this._offsetX = this._element.node().getBoundingClientRect().left + this.gutter() / 2;
|
|
580
|
+
this._offsetY = this._element.node().getBoundingClientRect().top + this.gutter() / 2;
|
|
381
581
|
}
|
|
382
582
|
dragStart(handle) {
|
|
383
583
|
const event = d3Event();
|
|
384
584
|
event.sourceEvent.stopPropagation();
|
|
385
585
|
const context = this;
|
|
386
|
-
this._dragCell = handle
|
|
586
|
+
this._dragCell = handle;
|
|
587
|
+
this._dragCellStartSize = this[handle + "Size"]();
|
|
588
|
+
if (this[handle + "ShrinkWrap"]()) {
|
|
589
|
+
this[handle + "Percentage"](0);
|
|
590
|
+
this[handle + "ShrinkWrap"](false);
|
|
591
|
+
}
|
|
387
592
|
const handleElm = select("#" + context.id() + " > div.borderHandle_" + handle);
|
|
388
|
-
context._handleTop = parseFloat(handleElm.style("top").split("px")[0])
|
|
593
|
+
context._handleTop = parseFloat(handleElm.style("top").split("px")[0]);
|
|
594
|
+
context._handleLeft = parseFloat(handleElm.style("left").split("px")[0]);
|
|
595
|
+
this._dragPrevX = event.sourceEvent.clientX;
|
|
596
|
+
this._dragPrevY = event.sourceEvent.clientY;
|
|
389
597
|
}
|
|
390
598
|
dragTick(handle) {
|
|
391
|
-
const context = this
|
|
599
|
+
const context = this;
|
|
600
|
+
const event = d3Event();
|
|
601
|
+
const xDelta = this._dragPrevX - event.sourceEvent.clientX;
|
|
602
|
+
const yDelta = this._dragPrevY - event.sourceEvent.clientY;
|
|
392
603
|
switch (handle) {
|
|
393
604
|
case "top":
|
|
394
605
|
case "bottom":
|
|
@@ -401,57 +612,128 @@ class Border extends HTMLWidget {
|
|
|
401
612
|
}
|
|
402
613
|
function _moveHandles(handle2, delta) {
|
|
403
614
|
if (delta === 0) return;
|
|
404
|
-
const handles = selectAll("#" + context.id() + " > div.borderHandle")
|
|
405
|
-
|
|
615
|
+
const handles = selectAll("#" + context.id() + " > div.borderHandle");
|
|
616
|
+
const grabbedHandle = select("#" + context.id() + " > div.borderHandle_" + handle2);
|
|
617
|
+
if (grabbedHandle.classed("borderHandle_top")) {
|
|
618
|
+
grabbedHandle.style("top", context._handleTop - delta + "px");
|
|
619
|
+
context._cellSizes.topHeight = context._handleTop - delta;
|
|
620
|
+
context._cellSizes.leftHeight = context._cellSizes.height;
|
|
621
|
+
context._cellSizes.leftHeight -= context._cellSizes.topHeight;
|
|
622
|
+
context._cellSizes.leftHeight -= context._cellSizes.bottomHeight;
|
|
623
|
+
context._cellSizes.rightHeight = context._cellSizes.leftHeight;
|
|
624
|
+
} else if (grabbedHandle.classed("borderHandle_right")) {
|
|
625
|
+
grabbedHandle.style("left", context._handleLeft - delta + "px");
|
|
626
|
+
context._cellSizes.rightWidth = context._cellSizes.width - context._handleLeft + delta;
|
|
627
|
+
} else if (grabbedHandle.classed("borderHandle_bottom")) {
|
|
628
|
+
grabbedHandle.style("top", context._handleTop - delta + "px");
|
|
629
|
+
context._cellSizes.bottomHeight = context._cellSizes.height - context._handleTop + delta;
|
|
630
|
+
context._cellSizes.leftHeight = context._cellSizes.height;
|
|
631
|
+
context._cellSizes.leftHeight -= context._cellSizes.bottomHeight;
|
|
632
|
+
context._cellSizes.leftHeight -= context._cellSizes.topHeight;
|
|
633
|
+
context._cellSizes.rightHeight = context._cellSizes.leftHeight;
|
|
634
|
+
} else if (grabbedHandle.classed("borderHandle_left")) {
|
|
635
|
+
grabbedHandle.style("left", context._handleLeft - delta + "px");
|
|
636
|
+
context._cellSizes.leftWidth = context._handleLeft - delta;
|
|
637
|
+
}
|
|
638
|
+
handles.each(function() {
|
|
406
639
|
const handle3 = select(this);
|
|
407
|
-
|
|
640
|
+
if (handle3.classed("borderHandle_top")) {
|
|
641
|
+
handle3.style("width", context._cellSizes.width + "px");
|
|
642
|
+
handle3.style("top", context._cellSizes.topHeight - 3 + "px");
|
|
643
|
+
} else if (handle3.classed("borderHandle_right")) {
|
|
644
|
+
handle3.style("left", context._cellSizes.width - context._cellSizes.rightWidth + "px");
|
|
645
|
+
handle3.style("top", context._cellSizes.topHeight + 3 + "px");
|
|
646
|
+
handle3.style("height", context._cellSizes.rightHeight + "px");
|
|
647
|
+
} else if (handle3.classed("borderHandle_bottom")) {
|
|
648
|
+
handle3.style("width", context._cellSizes.width + "px");
|
|
649
|
+
handle3.style("top", context._cellSizes.height - context._cellSizes.bottomHeight - 3 + "px");
|
|
650
|
+
} else if (handle3.classed("borderHandle_left")) {
|
|
651
|
+
handle3.style("left", context._cellSizes.leftWidth + "px");
|
|
652
|
+
handle3.style("height", context._cellSizes.leftHeight + "px");
|
|
653
|
+
handle3.style("top", context._cellSizes.topHeight + 3 + "px");
|
|
654
|
+
}
|
|
408
655
|
});
|
|
409
656
|
}
|
|
657
|
+
__name(_moveHandles, "_moveHandles");
|
|
410
658
|
}
|
|
411
659
|
dragEnd(handle) {
|
|
412
660
|
if (handle) {
|
|
413
|
-
const event = d3Event()
|
|
661
|
+
const event = d3Event();
|
|
662
|
+
const xDelta = this._dragPrevX - event.sourceEvent.clientX;
|
|
663
|
+
const yDelta = this._dragPrevY - event.sourceEvent.clientY;
|
|
414
664
|
switch (handle) {
|
|
415
665
|
case "top":
|
|
416
|
-
yDelta !== 0
|
|
666
|
+
if (yDelta !== 0) {
|
|
667
|
+
this.topPercentage(0);
|
|
668
|
+
this.topSize(this.topSize() === 0 ? this.getContent("top").getBBox().height - yDelta : this.topSize() - yDelta);
|
|
669
|
+
}
|
|
417
670
|
break;
|
|
418
671
|
case "right":
|
|
419
|
-
xDelta !== 0
|
|
672
|
+
if (xDelta !== 0) {
|
|
673
|
+
this.rightPercentage(0);
|
|
674
|
+
this.rightSize(this.rightSize() === 0 ? this.getContent("right").getBBox().width + xDelta : this.rightSize() + xDelta);
|
|
675
|
+
}
|
|
420
676
|
break;
|
|
421
677
|
case "bottom":
|
|
422
|
-
yDelta !== 0
|
|
678
|
+
if (yDelta !== 0) {
|
|
679
|
+
this.bottomPercentage(0);
|
|
680
|
+
this.bottomSize(this.bottomSize() === 0 ? this.getContent("bottom").getBBox().height + yDelta : this.bottomSize() + yDelta);
|
|
681
|
+
}
|
|
423
682
|
break;
|
|
424
683
|
case "left":
|
|
425
|
-
xDelta !== 0
|
|
684
|
+
if (xDelta !== 0) {
|
|
685
|
+
this.leftPercentage(0);
|
|
686
|
+
this.leftSize(this.leftSize() === 0 ? this.getContent("left").getBBox().width - xDelta : this.leftSize() - xDelta);
|
|
687
|
+
}
|
|
426
688
|
break;
|
|
427
689
|
}
|
|
428
|
-
this._dragPrevX = event.sourceEvent.clientX
|
|
690
|
+
this._dragPrevX = event.sourceEvent.clientX;
|
|
691
|
+
this._dragPrevY = event.sourceEvent.clientY;
|
|
429
692
|
}
|
|
430
693
|
this.render();
|
|
431
694
|
}
|
|
432
695
|
size(_) {
|
|
433
696
|
const retVal = HTMLWidget.prototype.size.apply(this, arguments);
|
|
434
|
-
|
|
697
|
+
if (arguments.length && this.contentDiv) {
|
|
698
|
+
this.contentDiv.style("width", this._size.width + "px").style("height", this._size.height + "px");
|
|
699
|
+
}
|
|
700
|
+
return retVal;
|
|
435
701
|
}
|
|
436
702
|
enter(domNode, element) {
|
|
437
703
|
super.enter(domNode, element);
|
|
438
704
|
const context = this;
|
|
439
|
-
element.style("position", "relative")
|
|
440
|
-
|
|
705
|
+
element.style("position", "relative");
|
|
706
|
+
this.contentDiv = element.append("div").classed("border-content", true);
|
|
707
|
+
this._scrollBarWidth = Platform.getScrollbarWidth();
|
|
708
|
+
this._borderHandles = ["top", "left", "right", "bottom"];
|
|
709
|
+
const handles = element.selectAll("div.borderHandle").data(this._borderHandles);
|
|
710
|
+
handles.enter().append("div").classed("borderHandle", true).each(function(handle) {
|
|
711
|
+
const h = select(this);
|
|
712
|
+
h.classed("borderHandle_" + handle, true).classed("borderHandleDisabled", context.getContent(handle) === null);
|
|
441
713
|
});
|
|
442
714
|
}
|
|
443
715
|
update(domNode, element) {
|
|
444
|
-
super.update(domNode, element)
|
|
716
|
+
super.update(domNode, element);
|
|
717
|
+
this._sectionTypeArr = this.sectionTypes();
|
|
445
718
|
const context = this;
|
|
446
|
-
element.classed("design-mode", this.designMode())
|
|
719
|
+
element.classed("design-mode", this.designMode());
|
|
720
|
+
this.setLayoutOffsets();
|
|
447
721
|
const rows = this.contentDiv.selectAll(".cell_" + this._id).data(this.content(), function(d) {
|
|
448
722
|
return d._id;
|
|
449
|
-
})
|
|
450
|
-
|
|
723
|
+
});
|
|
724
|
+
const rowsUpdate = rows.enter().append("div").classed("cell_" + this._id, true).style("position", "absolute").each(function(d, i) {
|
|
725
|
+
select(this).classed("border-cell border-cell-" + context._sectionTypeArr[i], true);
|
|
726
|
+
d.target(this);
|
|
727
|
+
select("#" + context.id() + " > div.borderHandle_" + context._sectionTypeArr[i]).classed("borderHandleDisabled", false);
|
|
451
728
|
}).merge(rows);
|
|
452
729
|
rowsUpdate.each(function(d, idx) {
|
|
453
730
|
const sectionType = context.sectionTypes()[idx];
|
|
454
|
-
typeof context[sectionType + "ShrinkWrap"]
|
|
731
|
+
if (typeof context[sectionType + "ShrinkWrap"] !== "undefined" && context[sectionType + "ShrinkWrap"]()) {
|
|
732
|
+
d.render();
|
|
733
|
+
context._shrinkWrapBoxes[sectionType] = d.widget().getBBox(true);
|
|
734
|
+
} else {
|
|
735
|
+
delete context._shrinkWrapBoxes[sectionType];
|
|
736
|
+
}
|
|
455
737
|
});
|
|
456
738
|
const drag$1 = drag().on("start", function(d, i) {
|
|
457
739
|
context.dragStart.call(context, d, i);
|
|
@@ -460,11 +742,20 @@ class Border extends HTMLWidget {
|
|
|
460
742
|
}).on("end", function(d, i) {
|
|
461
743
|
context.dragEnd.call(context, d, i);
|
|
462
744
|
});
|
|
463
|
-
|
|
745
|
+
if (this.designMode()) {
|
|
746
|
+
element.selectAll("#" + this.id() + " > div.borderHandle").call(drag$1);
|
|
747
|
+
} else {
|
|
748
|
+
element.selectAll("#" + this.id() + " > div.borderHandle").on(".drag", null);
|
|
749
|
+
}
|
|
464
750
|
const layoutObj = this.borderLayoutObject();
|
|
465
751
|
this.content().forEach(function(cell, i) {
|
|
466
|
-
cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left
|
|
467
|
-
|
|
752
|
+
cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left;
|
|
753
|
+
cell._fixedTop = layoutObj[this.sectionTypes()[i]].top;
|
|
754
|
+
cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width;
|
|
755
|
+
cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height;
|
|
756
|
+
cell._dragHandles = [];
|
|
757
|
+
}, this);
|
|
758
|
+
rowsUpdate.style("left", function(d) {
|
|
468
759
|
return d._fixedLeft + "px";
|
|
469
760
|
}).style("top", function(d) {
|
|
470
761
|
return d._fixedTop + "px";
|
|
@@ -473,25 +764,57 @@ class Border extends HTMLWidget {
|
|
|
473
764
|
}).style("height", function(d) {
|
|
474
765
|
return d._fixedHeight - context.gutter() + "px";
|
|
475
766
|
}).each(function(d) {
|
|
476
|
-
d._placeholderElement.attr("draggable", context.designMode()).selectAll(".dragHandle").attr("draggable", context.designMode())
|
|
477
|
-
|
|
767
|
+
d._placeholderElement.attr("draggable", context.designMode()).selectAll(".dragHandle").attr("draggable", context.designMode());
|
|
768
|
+
d.surfacePadding(context.surfacePadding()).resize();
|
|
769
|
+
});
|
|
770
|
+
rows.exit().each(function(d) {
|
|
478
771
|
d.target(null);
|
|
479
|
-
}).remove()
|
|
772
|
+
}).remove();
|
|
773
|
+
this.getCellSizes();
|
|
774
|
+
element.selectAll("#" + this.id() + " > div.borderHandle").each(function() {
|
|
480
775
|
const handle = select(this);
|
|
481
|
-
|
|
776
|
+
if (handle.classed("borderHandle_top")) {
|
|
777
|
+
handle.style("width", context._cellSizes.width + "px");
|
|
778
|
+
handle.style("top", context._cellSizes.topHeight - 3 + "px");
|
|
779
|
+
} else if (handle.classed("borderHandle_right")) {
|
|
780
|
+
handle.style("left", context._cellSizes.width - context._cellSizes.rightWidth + "px");
|
|
781
|
+
handle.style("top", context._cellSizes.topHeight + 3 + "px");
|
|
782
|
+
handle.style("height", context._cellSizes.rightHeight + "px");
|
|
783
|
+
} else if (handle.classed("borderHandle_bottom")) {
|
|
784
|
+
handle.style("width", context._cellSizes.width + "px");
|
|
785
|
+
handle.style("top", context._cellSizes.height - context._cellSizes.bottomHeight - 3 + "px");
|
|
786
|
+
} else if (handle.classed("borderHandle_left")) {
|
|
787
|
+
handle.style("left", context._cellSizes.leftWidth + "px");
|
|
788
|
+
handle.style("height", context._cellSizes.leftHeight + "px");
|
|
789
|
+
handle.style("top", context._cellSizes.topHeight + 3 + "px");
|
|
790
|
+
}
|
|
482
791
|
});
|
|
483
792
|
}
|
|
484
793
|
getCellSizes() {
|
|
485
794
|
const context = this;
|
|
486
795
|
context._cellSizes = {};
|
|
487
796
|
const contentRect = this.element().node().getBoundingClientRect();
|
|
488
|
-
context._cellSizes.width = contentRect.width
|
|
797
|
+
context._cellSizes.width = contentRect.width;
|
|
798
|
+
context._cellSizes.height = contentRect.height;
|
|
799
|
+
this.element().selectAll("#" + this.id() + " > div > div.border-cell").each(function() {
|
|
489
800
|
const cell = select(this);
|
|
490
|
-
if (typeof cell.node
|
|
801
|
+
if (typeof cell.node === "function") {
|
|
491
802
|
const rect = cell.node().getBoundingClientRect();
|
|
492
|
-
|
|
803
|
+
if (cell.classed("border-cell-top")) {
|
|
804
|
+
context._cellSizes.topHeight = rect.height;
|
|
805
|
+
} else if (cell.classed("border-cell-left")) {
|
|
806
|
+
context._cellSizes.leftWidth = rect.width;
|
|
807
|
+
context._cellSizes.leftHeight = rect.height;
|
|
808
|
+
} else if (cell.classed("border-cell-right")) {
|
|
809
|
+
context._cellSizes.rightWidth = rect.width;
|
|
810
|
+
context._cellSizes.rightHeight = rect.height;
|
|
811
|
+
} else if (cell.classed("border-cell-bottom")) {
|
|
812
|
+
context._cellSizes.bottomHeight = rect.height;
|
|
813
|
+
}
|
|
493
814
|
}
|
|
494
|
-
})
|
|
815
|
+
});
|
|
816
|
+
const sizes = ["height", "width", "topHeight", "bottomHeight", "leftHeight", "rightHeight", "leftWidth", "rightWidth"];
|
|
817
|
+
sizes.forEach(function(size) {
|
|
495
818
|
context._cellSizes[size] = context._cellSizes[size] === void 0 ? 0 : context._cellSizes[size];
|
|
496
819
|
});
|
|
497
820
|
}
|
|
@@ -499,23 +822,29 @@ class Border extends HTMLWidget {
|
|
|
499
822
|
const context = this;
|
|
500
823
|
this.content().forEach(function(n) {
|
|
501
824
|
if (n._element.node() !== null && n.widget()) {
|
|
502
|
-
const prevBox = n.widget().getBBox(
|
|
503
|
-
|
|
825
|
+
const prevBox = n.widget().getBBox(false, true);
|
|
826
|
+
const currBox = n.widget().getBBox(true, true);
|
|
827
|
+
if (prevBox.width !== currBox.width || prevBox.height !== currBox.height) {
|
|
828
|
+
context.lazyRender();
|
|
829
|
+
}
|
|
504
830
|
}
|
|
505
831
|
});
|
|
506
832
|
}
|
|
507
833
|
exit(domNode, element) {
|
|
508
|
-
this.content().forEach((w) => w.target(null))
|
|
834
|
+
this.content().forEach((w) => w.target(null));
|
|
835
|
+
super.exit(domNode, element);
|
|
509
836
|
}
|
|
510
|
-
}
|
|
837
|
+
};
|
|
838
|
+
__name(_Border, "Border");
|
|
839
|
+
let Border = _Border;
|
|
511
840
|
Border.prototype._class += " layout_Border";
|
|
512
|
-
Border.prototype.publish("designMode",
|
|
841
|
+
Border.prototype.publish("designMode", false, "boolean", "Design Mode", null, { tags: ["Basic"] });
|
|
513
842
|
Border.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Intermediate"] });
|
|
514
843
|
Border.prototype.publish("gutter", 0, "number", "Gap Between Widgets", null, { tags: ["Basic"] });
|
|
515
|
-
Border.prototype.publish("topShrinkWrap",
|
|
516
|
-
Border.prototype.publish("leftShrinkWrap",
|
|
517
|
-
Border.prototype.publish("rightShrinkWrap",
|
|
518
|
-
Border.prototype.publish("bottomShrinkWrap",
|
|
844
|
+
Border.prototype.publish("topShrinkWrap", false, "boolean", "'Top' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
|
|
845
|
+
Border.prototype.publish("leftShrinkWrap", false, "boolean", "'Left' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
|
|
846
|
+
Border.prototype.publish("rightShrinkWrap", false, "boolean", "'Right' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
|
|
847
|
+
Border.prototype.publish("bottomShrinkWrap", false, "boolean", "'Bottom' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
|
|
519
848
|
Border.prototype.publish("topSize", 0, "number", "Height of the 'Top' Cell (px)", null, { tags: ["Private"] });
|
|
520
849
|
Border.prototype.publish("leftSize", 0, "number", "Width of the 'Left' Cell (px)", null, { tags: ["Private"] });
|
|
521
850
|
Border.prototype.publish("rightSize", 0, "number", "Width of the 'Right' Cell (px)", null, { tags: ["Private"] });
|
|
@@ -526,23 +855,31 @@ Border.prototype.publish("rightPercentage", 20, "number", "Percentage (of parent
|
|
|
526
855
|
Border.prototype.publish("bottomPercentage", 20, "number", "Percentage (of parent) Height of the 'Bottom' Cell", null, { tags: ["Private"] });
|
|
527
856
|
Border.prototype.publish("surfacePadding", 0, "number", "Cell Padding (px)", null, { tags: ["Intermediate"] });
|
|
528
857
|
Border.prototype.publish("sectionTypes", [], "array", "Section Types sharing an index with 'content' - Used to determine position/size.", null, { tags: ["Private"] });
|
|
529
|
-
class
|
|
858
|
+
const _WidgetDiv = class _WidgetDiv {
|
|
530
859
|
constructor(div) {
|
|
531
860
|
__publicField(this, "_div");
|
|
532
|
-
__publicField(this, "_overlay",
|
|
861
|
+
__publicField(this, "_overlay", false);
|
|
533
862
|
__publicField(this, "_overflowX", "visible");
|
|
534
863
|
__publicField(this, "_overflowY", "visible");
|
|
535
864
|
__publicField(this, "_widget");
|
|
536
865
|
this._div = div;
|
|
537
866
|
}
|
|
538
867
|
overlay(_) {
|
|
539
|
-
|
|
868
|
+
if (!arguments.length) return this._overlay;
|
|
869
|
+
this._overlay = _;
|
|
870
|
+
return this;
|
|
540
871
|
}
|
|
541
872
|
overflowX(_) {
|
|
542
|
-
|
|
873
|
+
if (!arguments.length) return this._overflowX;
|
|
874
|
+
this._overflowX = _;
|
|
875
|
+
this._div.style("overflow-x", _);
|
|
876
|
+
return this;
|
|
543
877
|
}
|
|
544
878
|
overflowY(_) {
|
|
545
|
-
|
|
879
|
+
if (!arguments.length) return this._overflowY;
|
|
880
|
+
this._overflowY = _;
|
|
881
|
+
this._div.style("overflow-y", _);
|
|
882
|
+
return this;
|
|
546
883
|
}
|
|
547
884
|
element() {
|
|
548
885
|
return this._div;
|
|
@@ -551,25 +888,63 @@ class WidgetDiv {
|
|
|
551
888
|
return this._div.node();
|
|
552
889
|
}
|
|
553
890
|
widget(_) {
|
|
554
|
-
|
|
891
|
+
if (!arguments.length) return this._widget;
|
|
892
|
+
if (this._widget !== _) {
|
|
893
|
+
if (this._widget) {
|
|
894
|
+
this._widget.target(null);
|
|
895
|
+
}
|
|
896
|
+
this._widget = _;
|
|
897
|
+
if (this._widget) {
|
|
898
|
+
this._widget.target(this._div.node());
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
return this;
|
|
555
902
|
}
|
|
556
903
|
resize(size) {
|
|
557
|
-
|
|
904
|
+
if (this._widget) {
|
|
905
|
+
this._div.style("width", `${size.width}px`).style("height", `${size.height}px`);
|
|
906
|
+
this._widget.resize(size);
|
|
907
|
+
}
|
|
908
|
+
return this;
|
|
558
909
|
}
|
|
559
910
|
async render(getBBox, availableHeight, availableWidth) {
|
|
560
911
|
let overflowX = this.overflowX();
|
|
561
|
-
!this.overlay() && overflowX === "visible"
|
|
912
|
+
if (!this.overlay() && overflowX === "visible") {
|
|
913
|
+
overflowX = null;
|
|
914
|
+
}
|
|
562
915
|
let overflowY = this.overflowY();
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
return
|
|
569
|
-
|
|
916
|
+
if (!this.overlay() && overflowY === "visible") {
|
|
917
|
+
overflowY = null;
|
|
918
|
+
}
|
|
919
|
+
this._div.style("height", this.overlay() ? "0px" : null).style("overflow-x", overflowX).style("overflow-y", overflowY);
|
|
920
|
+
if (this._widget) {
|
|
921
|
+
return this._widget.renderPromise().then((w) => {
|
|
922
|
+
if (getBBox && this._widget.visible()) {
|
|
923
|
+
const retVal = this._widget.getBBox();
|
|
924
|
+
retVal.width += 8;
|
|
925
|
+
if (availableHeight !== void 0 && retVal.height > availableHeight) {
|
|
926
|
+
retVal.width += Platform.getScrollbarWidth();
|
|
927
|
+
}
|
|
928
|
+
if (availableWidth !== void 0 && retVal.width > availableWidth) {
|
|
929
|
+
retVal.height += Platform.getScrollbarWidth();
|
|
930
|
+
}
|
|
931
|
+
if (this.overlay()) {
|
|
932
|
+
retVal.height = 0;
|
|
933
|
+
} else {
|
|
934
|
+
retVal.height += 4;
|
|
935
|
+
}
|
|
936
|
+
return retVal;
|
|
937
|
+
}
|
|
938
|
+
return getBBox ? { x: 0, y: 0, width: 0, height: 0 } : void 0;
|
|
939
|
+
});
|
|
940
|
+
} else {
|
|
941
|
+
return Promise.resolve(getBBox ? { x: 0, y: 0, width: 0, height: 0 } : void 0);
|
|
942
|
+
}
|
|
570
943
|
}
|
|
571
|
-
}
|
|
572
|
-
|
|
944
|
+
};
|
|
945
|
+
__name(_WidgetDiv, "WidgetDiv");
|
|
946
|
+
let WidgetDiv = _WidgetDiv;
|
|
947
|
+
const _Border2 = class _Border2 extends HTMLWidget {
|
|
573
948
|
constructor() {
|
|
574
949
|
super();
|
|
575
950
|
__publicField(this, "_bodyElement");
|
|
@@ -588,66 +963,140 @@ class Border2 extends HTMLWidget {
|
|
|
588
963
|
super.enter(domNode, element);
|
|
589
964
|
const topElement = element.append("header");
|
|
590
965
|
this._bodyElement = element.append("div").attr("class", "body");
|
|
591
|
-
const centerElement = this._bodyElement.append("div").attr("class", "center")
|
|
592
|
-
|
|
966
|
+
const centerElement = this._bodyElement.append("div").attr("class", "center");
|
|
967
|
+
const leftElement = this._bodyElement.append("div").attr("class", "lhs");
|
|
968
|
+
const rightElement = this._bodyElement.append("div").attr("class", "rhs");
|
|
969
|
+
const bottomElement = element.append("div").attr("class", "footer");
|
|
970
|
+
this._topWA = new WidgetDiv(topElement);
|
|
971
|
+
this._centerWA = new WidgetDiv(centerElement);
|
|
972
|
+
this._leftWA = new WidgetDiv(leftElement);
|
|
973
|
+
this._rightWA = new WidgetDiv(rightElement);
|
|
974
|
+
this._bottomWA = new WidgetDiv(bottomElement);
|
|
593
975
|
}
|
|
594
976
|
update(domNode, element) {
|
|
595
|
-
super.update(domNode, element)
|
|
977
|
+
super.update(domNode, element);
|
|
978
|
+
this._topWA.element().style("display", this.showTop() ? null : "none");
|
|
979
|
+
this._rightWA.element().style("display", this.showRight() ? null : "none");
|
|
980
|
+
this._bottomWA.element().style("display", this.showBottom() ? null : "none");
|
|
981
|
+
this._leftWA.element().style("display", this.showLeft() ? null : "none");
|
|
982
|
+
if (this.topOverflowX() !== this._topWA.overflowX()) {
|
|
983
|
+
this._topWA.overflowX(this.topOverflowX());
|
|
984
|
+
}
|
|
985
|
+
if (this.rightOverflowX() !== this._rightWA.overflowX()) {
|
|
986
|
+
this._rightWA.overflowX(this.rightOverflowX());
|
|
987
|
+
}
|
|
988
|
+
if (this.bottomOverflowX() !== this._bottomWA.overflowX()) {
|
|
989
|
+
this._bottomWA.overflowX(this.bottomOverflowX());
|
|
990
|
+
}
|
|
991
|
+
if (this.leftOverflowX() !== this._leftWA.overflowX()) {
|
|
992
|
+
this._leftWA.overflowX(this.leftOverflowX());
|
|
993
|
+
}
|
|
994
|
+
if (this.topOverflowY() !== this._topWA.overflowY()) {
|
|
995
|
+
this._topWA.overflowY(this.topOverflowY());
|
|
996
|
+
}
|
|
997
|
+
if (this.rightOverflowY() !== this._rightWA.overflowY()) {
|
|
998
|
+
this._rightWA.overflowY(this.rightOverflowY());
|
|
999
|
+
}
|
|
1000
|
+
if (this.bottomOverflowY() !== this._bottomWA.overflowY()) {
|
|
1001
|
+
this._bottomWA.overflowY(this.bottomOverflowY());
|
|
1002
|
+
}
|
|
1003
|
+
if (this.leftOverflowY() !== this._leftWA.overflowY()) {
|
|
1004
|
+
this._leftWA.overflowY(this.leftOverflowY());
|
|
1005
|
+
}
|
|
1006
|
+
this.element().style("width", `${this.width()}px`).style("height", `${this.height()}px`);
|
|
596
1007
|
}
|
|
597
1008
|
targetNull(w) {
|
|
598
|
-
|
|
1009
|
+
if (w) {
|
|
1010
|
+
w.target(null);
|
|
1011
|
+
}
|
|
599
1012
|
}
|
|
600
1013
|
exit(domNode, element) {
|
|
601
|
-
this.targetNull(this.center())
|
|
1014
|
+
this.targetNull(this.center());
|
|
1015
|
+
this.targetNull(this.bottom());
|
|
1016
|
+
this.targetNull(this.right());
|
|
1017
|
+
this.targetNull(this.left());
|
|
1018
|
+
this.targetNull(this.top());
|
|
1019
|
+
super.exit(domNode, element);
|
|
602
1020
|
}
|
|
603
1021
|
swap(sectionA, sectionB) {
|
|
604
|
-
const a2 = this[sectionA]()
|
|
605
|
-
|
|
1022
|
+
const a2 = this[sectionA]();
|
|
1023
|
+
const b = this[sectionB]();
|
|
1024
|
+
this.targetNull(a2);
|
|
1025
|
+
this.targetNull(b);
|
|
1026
|
+
this[`_${sectionA}WA`].widget(null);
|
|
1027
|
+
this[`_${sectionB}WA`].widget(null);
|
|
1028
|
+
this[sectionA](b);
|
|
1029
|
+
this[sectionB](a2);
|
|
1030
|
+
return this;
|
|
606
1031
|
}
|
|
607
1032
|
render(callback) {
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
this.
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
}
|
|
630
|
-
this.
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
1033
|
+
const retVal = super.render((w) => {
|
|
1034
|
+
if (this._topWA) {
|
|
1035
|
+
this._topWA.widget(this.top()).overlay(this.topOverlay()).render(true).then(async (topBBox) => {
|
|
1036
|
+
const bottomBBox = await this._bottomWA.widget(this.bottom()).render(true, void 0, this.width());
|
|
1037
|
+
const availableHeight = this.height() - (topBBox.height + bottomBBox.height);
|
|
1038
|
+
const leftBBox = await this._leftWA.widget(this.left()).render(true, availableHeight);
|
|
1039
|
+
const rightBBox = await this._rightWA.widget(this.right()).render(true, availableHeight);
|
|
1040
|
+
if (this.bottomHeight_exists()) {
|
|
1041
|
+
bottomBBox.height = this.bottomHeight();
|
|
1042
|
+
}
|
|
1043
|
+
const bodyWidth = this.width() - (leftBBox.width + rightBBox.width);
|
|
1044
|
+
const bodyHeight = this.height() - (topBBox.height + bottomBBox.height);
|
|
1045
|
+
const centerOverflowX = this.centerOverflowX();
|
|
1046
|
+
const centerOverflowY = this.centerOverflowY();
|
|
1047
|
+
const scrollCenterX = ["auto", "scroll"].indexOf(centerOverflowX) !== -1;
|
|
1048
|
+
const scrollCenterY = ["auto", "scroll"].indexOf(centerOverflowY) !== -1;
|
|
1049
|
+
if (scrollCenterX || scrollCenterY) {
|
|
1050
|
+
this._centerWA.overflowX(this.centerOverflowX()).overflowY(this.centerOverflowY()).widget(this.center()).resize({
|
|
1051
|
+
width: bodyWidth,
|
|
1052
|
+
height: bodyHeight
|
|
1053
|
+
}).render();
|
|
1054
|
+
}
|
|
1055
|
+
this._bodyElement.style("height", `${bodyHeight}px`);
|
|
1056
|
+
const promises = [
|
|
1057
|
+
this._topWA.overflowX(this.topOverflowX()).overflowY(this.topOverflowY()).resize({
|
|
1058
|
+
width: this.width(),
|
|
1059
|
+
height: topBBox.height
|
|
1060
|
+
}).render(),
|
|
1061
|
+
this._leftWA.overflowX(this.leftOverflowX()).overflowY(this.leftOverflowY()).resize({
|
|
1062
|
+
width: leftBBox.width,
|
|
1063
|
+
height: bodyHeight
|
|
1064
|
+
}).render(),
|
|
1065
|
+
this._rightWA.overflowX(this.rightOverflowX()).overflowY(this.rightOverflowY()).resize({
|
|
1066
|
+
width: rightBBox.width,
|
|
1067
|
+
height: bodyHeight
|
|
1068
|
+
}).render(),
|
|
1069
|
+
this._centerWA.overflowX(this.centerOverflowX()).overflowY(this.centerOverflowY()).widget(this.center()).resize({
|
|
1070
|
+
width: bodyWidth,
|
|
1071
|
+
height: bodyHeight
|
|
1072
|
+
}).render(),
|
|
1073
|
+
this._bottomWA.overflowX(this.bottomOverflowX()).overflowY(this.bottomOverflowY()).resize({
|
|
1074
|
+
width: this.width(),
|
|
1075
|
+
height: bottomBBox.height
|
|
1076
|
+
}).render()
|
|
1077
|
+
];
|
|
1078
|
+
Promise.all(promises).then((promises2) => {
|
|
1079
|
+
if (callback) {
|
|
1080
|
+
callback(this);
|
|
1081
|
+
}
|
|
1082
|
+
});
|
|
641
1083
|
});
|
|
642
|
-
}
|
|
1084
|
+
} else {
|
|
1085
|
+
if (callback) {
|
|
1086
|
+
callback(this);
|
|
1087
|
+
}
|
|
1088
|
+
}
|
|
643
1089
|
});
|
|
1090
|
+
return retVal;
|
|
644
1091
|
}
|
|
645
|
-
}
|
|
1092
|
+
};
|
|
1093
|
+
__name(_Border2, "Border2");
|
|
1094
|
+
let Border2 = _Border2;
|
|
646
1095
|
Border2.prototype._class += " layout_Border2";
|
|
647
|
-
Border2.prototype.publish("showTop",
|
|
648
|
-
Border2.prototype.publish("showRight",
|
|
649
|
-
Border2.prototype.publish("showBottom",
|
|
650
|
-
Border2.prototype.publish("showLeft",
|
|
1096
|
+
Border2.prototype.publish("showTop", true, "boolean", "If true, top widget adapter will display");
|
|
1097
|
+
Border2.prototype.publish("showRight", true, "boolean", "If true, right widget adapter will display");
|
|
1098
|
+
Border2.prototype.publish("showBottom", true, "boolean", "If true, bottom widget adapter will display");
|
|
1099
|
+
Border2.prototype.publish("showLeft", true, "boolean", "If true, left widget adapter will display");
|
|
651
1100
|
Border2.prototype.publish("topOverflowX", "visible", "set", "Sets the overflow-x css style for the top widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
652
1101
|
Border2.prototype.publish("rightOverflowX", "visible", "set", "Sets the overflow-x css style for the right widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
653
1102
|
Border2.prototype.publish("bottomOverflowX", "visible", "set", "Sets the overflow-x css style for the bottom widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
@@ -658,14 +1107,14 @@ Border2.prototype.publish("rightOverflowY", "visible", "set", "Sets the overflow
|
|
|
658
1107
|
Border2.prototype.publish("bottomOverflowY", "visible", "set", "Sets the overflow-y css style for the bottom widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
659
1108
|
Border2.prototype.publish("leftOverflowY", "visible", "set", "Sets the overflow-y css style for the left widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
660
1109
|
Border2.prototype.publish("centerOverflowY", "visible", "set", "Sets the overflow-y css style for the center widget adapter", ["hidden", "scroll", "visible", "auto"]);
|
|
661
|
-
Border2.prototype.publish("top", null, "widget", "Top Widget", void 0, { render:
|
|
662
|
-
Border2.prototype.publish("topOverlay",
|
|
663
|
-
Border2.prototype.publish("left", null, "widget", "Left Widget", void 0, { render:
|
|
664
|
-
Border2.prototype.publish("center", null, "widget", "Center Widget", void 0, { render:
|
|
665
|
-
Border2.prototype.publish("right", null, "widget", "Right Widget", void 0, { render:
|
|
666
|
-
Border2.prototype.publish("bottom", null, "widget", "Bottom Widget", void 0, { render:
|
|
667
|
-
Border2.prototype.publish("bottomHeight", null, "number", "Bottom Fixed Height", void 0, { optional:
|
|
668
|
-
class
|
|
1110
|
+
Border2.prototype.publish("top", null, "widget", "Top Widget", void 0, { render: false });
|
|
1111
|
+
Border2.prototype.publish("topOverlay", false, "boolean", "Overlay Top Widget");
|
|
1112
|
+
Border2.prototype.publish("left", null, "widget", "Left Widget", void 0, { render: false });
|
|
1113
|
+
Border2.prototype.publish("center", null, "widget", "Center Widget", void 0, { render: false });
|
|
1114
|
+
Border2.prototype.publish("right", null, "widget", "Right Widget", void 0, { render: false });
|
|
1115
|
+
Border2.prototype.publish("bottom", null, "widget", "Bottom Widget", void 0, { render: false });
|
|
1116
|
+
Border2.prototype.publish("bottomHeight", null, "number", "Bottom Fixed Height", void 0, { optional: true });
|
|
1117
|
+
const _Carousel = class _Carousel extends HTMLWidget {
|
|
669
1118
|
constructor() {
|
|
670
1119
|
super(...arguments);
|
|
671
1120
|
__publicField(this, "_prevActive", 0);
|
|
@@ -675,187 +1124,289 @@ class Carousel extends HTMLWidget {
|
|
|
675
1124
|
return this.widgets()[this.active()];
|
|
676
1125
|
}
|
|
677
1126
|
enter(domNode, element) {
|
|
678
|
-
super.enter(domNode, element)
|
|
1127
|
+
super.enter(domNode, element);
|
|
1128
|
+
this._root = element.append("div").attr("id", `${this.id()}_root`);
|
|
679
1129
|
}
|
|
680
1130
|
update(domNode, element) {
|
|
681
1131
|
super.update(domNode, element);
|
|
682
|
-
const active = this.active()
|
|
1132
|
+
const active = this.active();
|
|
1133
|
+
const width = this.width();
|
|
683
1134
|
this._root.style("width", `${width}px`).style("height", `${this.height()}px`);
|
|
684
|
-
const widgetElements = this._root.selectAll(`#${this.id()}_root > .carouselItem`).data(this.widgets(), (d) => d.id())
|
|
1135
|
+
const widgetElements = this._root.selectAll(`#${this.id()}_root > .carouselItem`).data(this.widgets(), (d) => d.id());
|
|
1136
|
+
const update = widgetElements.enter().append("div").attr("class", "carouselItem").each(function(w) {
|
|
685
1137
|
w.target(this);
|
|
686
1138
|
}).merge(widgetElements).style("left", (d, i) => `${(i - this._prevActive) * width}px`).style("width", `${width}px`);
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
1139
|
+
if (this._prevActive !== active) {
|
|
1140
|
+
update.style("display", (d, i) => i === this._prevActive || i === active ? null : "none").transition().duration(this.transitionDuration()).style("left", (d, i) => `${(i - active) * width}px`).on("end", function(d, i) {
|
|
1141
|
+
select(this).style("display", () => i === active ? null : "none");
|
|
1142
|
+
});
|
|
1143
|
+
this._prevActive = active;
|
|
1144
|
+
}
|
|
1145
|
+
widgetElements.exit().each(function(w) {
|
|
690
1146
|
w.target(null);
|
|
691
1147
|
}).remove();
|
|
692
1148
|
}
|
|
693
1149
|
exit(domNode, element) {
|
|
694
|
-
this.widgets().forEach((w) => w.target(null))
|
|
1150
|
+
this.widgets().forEach((w) => w.target(null));
|
|
1151
|
+
super.exit(domNode, element);
|
|
695
1152
|
}
|
|
696
1153
|
render(callback) {
|
|
697
1154
|
return super.render((w) => {
|
|
698
|
-
if (!this.visible() || this.isDOMHidden())
|
|
699
|
-
|
|
700
|
-
|
|
1155
|
+
if (!this.visible() || this.isDOMHidden()) {
|
|
1156
|
+
if (callback) {
|
|
1157
|
+
callback(w);
|
|
1158
|
+
}
|
|
1159
|
+
} else {
|
|
701
1160
|
const aw = this.activeWidget();
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
1161
|
+
if (aw) {
|
|
1162
|
+
aw.resize(this.size()).render((w2) => {
|
|
1163
|
+
if (callback) {
|
|
1164
|
+
callback(w);
|
|
1165
|
+
}
|
|
1166
|
+
});
|
|
1167
|
+
}
|
|
705
1168
|
}
|
|
706
1169
|
});
|
|
707
1170
|
}
|
|
708
|
-
}
|
|
1171
|
+
};
|
|
1172
|
+
__name(_Carousel, "Carousel");
|
|
1173
|
+
let Carousel = _Carousel;
|
|
709
1174
|
Carousel.prototype._class += " layout_Carousel";
|
|
710
|
-
Carousel.prototype.publish("widgets", [], "widgetArray", "Widgets", null, { render:
|
|
1175
|
+
Carousel.prototype.publish("widgets", [], "widgetArray", "Widgets", null, { render: false });
|
|
711
1176
|
Carousel.prototype.publish("active", 0, "number", "Active widget");
|
|
712
1177
|
Carousel.prototype.publish("transitionDuration", 500, "number", "Transition duration");
|
|
713
1178
|
var pi$1 = Math.PI, tau$1 = 2 * pi$1, epsilon = 1e-6, tauEpsilon = tau$1 - epsilon;
|
|
714
1179
|
function Path() {
|
|
715
1180
|
this._x0 = this._y0 = // start of current subpath
|
|
716
|
-
this._x1 = this._y1 = null
|
|
1181
|
+
this._x1 = this._y1 = null;
|
|
1182
|
+
this._ = "";
|
|
717
1183
|
}
|
|
1184
|
+
__name(Path, "Path");
|
|
718
1185
|
function path() {
|
|
719
1186
|
return new Path();
|
|
720
1187
|
}
|
|
1188
|
+
__name(path, "path");
|
|
721
1189
|
Path.prototype = path.prototype = {
|
|
722
1190
|
constructor: Path,
|
|
723
|
-
moveTo: function(x, y) {
|
|
1191
|
+
moveTo: /* @__PURE__ */ __name(function(x, y) {
|
|
724
1192
|
this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y);
|
|
725
|
-
},
|
|
726
|
-
closePath: function() {
|
|
727
|
-
this._x1 !== null
|
|
728
|
-
|
|
729
|
-
|
|
1193
|
+
}, "moveTo"),
|
|
1194
|
+
closePath: /* @__PURE__ */ __name(function() {
|
|
1195
|
+
if (this._x1 !== null) {
|
|
1196
|
+
this._x1 = this._x0, this._y1 = this._y0;
|
|
1197
|
+
this._ += "Z";
|
|
1198
|
+
}
|
|
1199
|
+
}, "closePath"),
|
|
1200
|
+
lineTo: /* @__PURE__ */ __name(function(x, y) {
|
|
730
1201
|
this._ += "L" + (this._x1 = +x) + "," + (this._y1 = +y);
|
|
731
|
-
},
|
|
732
|
-
quadraticCurveTo: function(x1, y1, x, y) {
|
|
1202
|
+
}, "lineTo"),
|
|
1203
|
+
quadraticCurveTo: /* @__PURE__ */ __name(function(x1, y1, x, y) {
|
|
733
1204
|
this._ += "Q" + +x1 + "," + +y1 + "," + (this._x1 = +x) + "," + (this._y1 = +y);
|
|
734
|
-
},
|
|
735
|
-
bezierCurveTo: function(x1, y1, x2, y2, x, y) {
|
|
1205
|
+
}, "quadraticCurveTo"),
|
|
1206
|
+
bezierCurveTo: /* @__PURE__ */ __name(function(x1, y1, x2, y2, x, y) {
|
|
736
1207
|
this._ += "C" + +x1 + "," + +y1 + "," + +x2 + "," + +y2 + "," + (this._x1 = +x) + "," + (this._y1 = +y);
|
|
737
|
-
},
|
|
738
|
-
arcTo: function(x1, y1, x2, y2, r) {
|
|
1208
|
+
}, "bezierCurveTo"),
|
|
1209
|
+
arcTo: /* @__PURE__ */ __name(function(x1, y1, x2, y2, r) {
|
|
739
1210
|
x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
|
|
740
1211
|
var x0 = this._x1, y0 = this._y1, x21 = x2 - x1, y21 = y2 - y1, x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;
|
|
741
1212
|
if (r < 0) throw new Error("negative radius: " + r);
|
|
742
|
-
if (this._x1 === null)
|
|
1213
|
+
if (this._x1 === null) {
|
|
743
1214
|
this._ += "M" + (this._x1 = x1) + "," + (this._y1 = y1);
|
|
744
|
-
else if (l01_2 > epsilon)
|
|
1215
|
+
} else if (!(l01_2 > epsilon)) ;
|
|
1216
|
+
else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
|
|
745
1217
|
this._ += "L" + (this._x1 = x1) + "," + (this._y1 = y1);
|
|
746
|
-
else {
|
|
1218
|
+
} else {
|
|
747
1219
|
var x20 = x2 - x0, y20 = y2 - y0, l21_2 = x21 * x21 + y21 * y21, l20_2 = x20 * x20 + y20 * y20, l21 = Math.sqrt(l21_2), l01 = Math.sqrt(l01_2), l = r * Math.tan((pi$1 - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2), t01 = l / l01, t21 = l / l21;
|
|
748
|
-
Math.abs(t01 - 1) > epsilon
|
|
1220
|
+
if (Math.abs(t01 - 1) > epsilon) {
|
|
1221
|
+
this._ += "L" + (x1 + t01 * x01) + "," + (y1 + t01 * y01);
|
|
1222
|
+
}
|
|
1223
|
+
this._ += "A" + r + "," + r + ",0,0," + +(y01 * x20 > x01 * y20) + "," + (this._x1 = x1 + t21 * x21) + "," + (this._y1 = y1 + t21 * y21);
|
|
749
1224
|
}
|
|
750
|
-
},
|
|
751
|
-
arc: function(x, y, r, a0, a1, ccw) {
|
|
1225
|
+
}, "arcTo"),
|
|
1226
|
+
arc: /* @__PURE__ */ __name(function(x, y, r, a0, a1, ccw) {
|
|
752
1227
|
x = +x, y = +y, r = +r, ccw = !!ccw;
|
|
753
1228
|
var dx = r * Math.cos(a0), dy = r * Math.sin(a0), x0 = x + dx, y0 = y + dy, cw = 1 ^ ccw, da = ccw ? a0 - a1 : a1 - a0;
|
|
754
1229
|
if (r < 0) throw new Error("negative radius: " + r);
|
|
755
|
-
this._x1 === null
|
|
756
|
-
|
|
757
|
-
|
|
1230
|
+
if (this._x1 === null) {
|
|
1231
|
+
this._ += "M" + x0 + "," + y0;
|
|
1232
|
+
} else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
|
|
1233
|
+
this._ += "L" + x0 + "," + y0;
|
|
1234
|
+
}
|
|
1235
|
+
if (!r) return;
|
|
1236
|
+
if (da < 0) da = da % tau$1 + tau$1;
|
|
1237
|
+
if (da > tauEpsilon) {
|
|
1238
|
+
this._ += "A" + r + "," + r + ",0,1," + cw + "," + (x - dx) + "," + (y - dy) + "A" + r + "," + r + ",0,1," + cw + "," + (this._x1 = x0) + "," + (this._y1 = y0);
|
|
1239
|
+
} else if (da > epsilon) {
|
|
1240
|
+
this._ += "A" + r + "," + r + ",0," + +(da >= pi$1) + "," + cw + "," + (this._x1 = x + r * Math.cos(a1)) + "," + (this._y1 = y + r * Math.sin(a1));
|
|
1241
|
+
}
|
|
1242
|
+
}, "arc"),
|
|
1243
|
+
rect: /* @__PURE__ */ __name(function(x, y, w, h) {
|
|
758
1244
|
this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y) + "h" + +w + "v" + +h + "h" + -w + "Z";
|
|
759
|
-
},
|
|
760
|
-
toString: function() {
|
|
1245
|
+
}, "rect"),
|
|
1246
|
+
toString: /* @__PURE__ */ __name(function() {
|
|
761
1247
|
return this._;
|
|
762
|
-
}
|
|
1248
|
+
}, "toString")
|
|
763
1249
|
};
|
|
764
1250
|
function constant(x) {
|
|
765
|
-
return function() {
|
|
1251
|
+
return /* @__PURE__ */ __name(function constant2() {
|
|
766
1252
|
return x;
|
|
767
|
-
};
|
|
1253
|
+
}, "constant");
|
|
768
1254
|
}
|
|
769
|
-
|
|
1255
|
+
__name(constant, "constant");
|
|
1256
|
+
var pi = Math.PI;
|
|
1257
|
+
var tau = 2 * pi;
|
|
770
1258
|
const d3SymbolCircle = {
|
|
771
|
-
draw: function(context, size) {
|
|
1259
|
+
draw: /* @__PURE__ */ __name(function(context, size) {
|
|
772
1260
|
var r = Math.sqrt(size / pi);
|
|
773
|
-
context.moveTo(r, 0)
|
|
774
|
-
|
|
775
|
-
},
|
|
776
|
-
|
|
1261
|
+
context.moveTo(r, 0);
|
|
1262
|
+
context.arc(0, 0, r, 0, tau);
|
|
1263
|
+
}, "draw")
|
|
1264
|
+
};
|
|
1265
|
+
const d3SymbolCross = {
|
|
1266
|
+
draw: /* @__PURE__ */ __name(function(context, size) {
|
|
777
1267
|
var r = Math.sqrt(size / 5) / 2;
|
|
778
|
-
context.moveTo(-3 * r, -r)
|
|
779
|
-
|
|
1268
|
+
context.moveTo(-3 * r, -r);
|
|
1269
|
+
context.lineTo(-r, -r);
|
|
1270
|
+
context.lineTo(-r, -3 * r);
|
|
1271
|
+
context.lineTo(r, -3 * r);
|
|
1272
|
+
context.lineTo(r, -r);
|
|
1273
|
+
context.lineTo(3 * r, -r);
|
|
1274
|
+
context.lineTo(3 * r, r);
|
|
1275
|
+
context.lineTo(r, r);
|
|
1276
|
+
context.lineTo(r, 3 * r);
|
|
1277
|
+
context.lineTo(-r, 3 * r);
|
|
1278
|
+
context.lineTo(-r, r);
|
|
1279
|
+
context.lineTo(-3 * r, r);
|
|
1280
|
+
context.closePath();
|
|
1281
|
+
}, "draw")
|
|
780
1282
|
};
|
|
781
1283
|
var tan30 = Math.sqrt(1 / 3), tan30_2 = tan30 * 2;
|
|
782
1284
|
const d3SymbolDiamond = {
|
|
783
|
-
draw: function(context, size) {
|
|
1285
|
+
draw: /* @__PURE__ */ __name(function(context, size) {
|
|
784
1286
|
var y = Math.sqrt(size / tan30_2), x = y * tan30;
|
|
785
|
-
context.moveTo(0, -y)
|
|
786
|
-
|
|
1287
|
+
context.moveTo(0, -y);
|
|
1288
|
+
context.lineTo(x, 0);
|
|
1289
|
+
context.lineTo(0, y);
|
|
1290
|
+
context.lineTo(-x, 0);
|
|
1291
|
+
context.closePath();
|
|
1292
|
+
}, "draw")
|
|
787
1293
|
};
|
|
788
1294
|
var ka = 0.8908130915292852, kr = Math.sin(pi / 10) / Math.sin(7 * pi / 10), kx = Math.sin(tau / 10) * kr, ky = -Math.cos(tau / 10) * kr;
|
|
789
1295
|
const d3SymbolStar = {
|
|
790
|
-
draw: function(context, size) {
|
|
1296
|
+
draw: /* @__PURE__ */ __name(function(context, size) {
|
|
791
1297
|
var r = Math.sqrt(size * ka), x = kx * r, y = ky * r;
|
|
792
|
-
context.moveTo(0, -r)
|
|
1298
|
+
context.moveTo(0, -r);
|
|
1299
|
+
context.lineTo(x, y);
|
|
793
1300
|
for (var i = 1; i < 5; ++i) {
|
|
794
1301
|
var a2 = tau * i / 5, c2 = Math.cos(a2), s2 = Math.sin(a2);
|
|
795
|
-
context.lineTo(s2 * r, -c2 * r)
|
|
1302
|
+
context.lineTo(s2 * r, -c2 * r);
|
|
1303
|
+
context.lineTo(c2 * x - s2 * y, s2 * x + c2 * y);
|
|
796
1304
|
}
|
|
797
1305
|
context.closePath();
|
|
798
|
-
}
|
|
799
|
-
}
|
|
800
|
-
|
|
1306
|
+
}, "draw")
|
|
1307
|
+
};
|
|
1308
|
+
const d3SymbolSquare = {
|
|
1309
|
+
draw: /* @__PURE__ */ __name(function(context, size) {
|
|
801
1310
|
var w = Math.sqrt(size), x = -w / 2;
|
|
802
1311
|
context.rect(x, x, w, w);
|
|
803
|
-
}
|
|
1312
|
+
}, "draw")
|
|
804
1313
|
};
|
|
805
1314
|
var sqrt3 = Math.sqrt(3);
|
|
806
1315
|
const d3SymbolTriangle = {
|
|
807
|
-
draw: function(context, size) {
|
|
1316
|
+
draw: /* @__PURE__ */ __name(function(context, size) {
|
|
808
1317
|
var y = -Math.sqrt(size / (sqrt3 * 3));
|
|
809
|
-
context.moveTo(0, y * 2)
|
|
810
|
-
|
|
1318
|
+
context.moveTo(0, y * 2);
|
|
1319
|
+
context.lineTo(-sqrt3 * y, -y);
|
|
1320
|
+
context.lineTo(sqrt3 * y, -y);
|
|
1321
|
+
context.closePath();
|
|
1322
|
+
}, "draw")
|
|
811
1323
|
};
|
|
812
1324
|
var c = -0.5, s = Math.sqrt(3) / 2, k = 1 / Math.sqrt(12), a = (k / 2 + 1) * 3;
|
|
813
1325
|
const d3SymbolWye = {
|
|
814
|
-
draw: function(context, size) {
|
|
1326
|
+
draw: /* @__PURE__ */ __name(function(context, size) {
|
|
815
1327
|
var r = Math.sqrt(size / a), x0 = r / 2, y0 = r * k, x1 = x0, y1 = r * k + r, x2 = -x1, y2 = y1;
|
|
816
|
-
context.moveTo(x0, y0)
|
|
817
|
-
|
|
1328
|
+
context.moveTo(x0, y0);
|
|
1329
|
+
context.lineTo(x1, y1);
|
|
1330
|
+
context.lineTo(x2, y2);
|
|
1331
|
+
context.lineTo(c * x0 - s * y0, s * x0 + c * y0);
|
|
1332
|
+
context.lineTo(c * x1 - s * y1, s * x1 + c * y1);
|
|
1333
|
+
context.lineTo(c * x2 - s * y2, s * x2 + c * y2);
|
|
1334
|
+
context.lineTo(c * x0 + s * y0, c * y0 - s * x0);
|
|
1335
|
+
context.lineTo(c * x1 + s * y1, c * y1 - s * x1);
|
|
1336
|
+
context.lineTo(c * x2 + s * y2, c * y2 - s * x2);
|
|
1337
|
+
context.closePath();
|
|
1338
|
+
}, "draw")
|
|
818
1339
|
};
|
|
819
1340
|
function d3Symbol() {
|
|
820
1341
|
var type = constant(d3SymbolCircle), size = constant(64), context = null;
|
|
821
1342
|
function symbol() {
|
|
822
1343
|
var buffer;
|
|
823
|
-
if (context
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
1344
|
+
if (!context) context = buffer = path();
|
|
1345
|
+
type.apply(this, arguments).draw(context, +size.apply(this, arguments));
|
|
1346
|
+
if (buffer) return context = null, buffer + "" || null;
|
|
1347
|
+
}
|
|
1348
|
+
__name(symbol, "symbol");
|
|
1349
|
+
symbol.type = function(_) {
|
|
1350
|
+
return arguments.length ? (type = typeof _ === "function" ? _ : constant(_), symbol) : type;
|
|
1351
|
+
};
|
|
1352
|
+
symbol.size = function(_) {
|
|
1353
|
+
return arguments.length ? (size = typeof _ === "function" ? _ : constant(+_), symbol) : size;
|
|
1354
|
+
};
|
|
1355
|
+
symbol.context = function(_) {
|
|
1356
|
+
return arguments.length ? (context = _ == null ? null : _, symbol) : context;
|
|
1357
|
+
};
|
|
1358
|
+
return symbol;
|
|
832
1359
|
}
|
|
833
|
-
|
|
1360
|
+
__name(d3Symbol, "d3Symbol");
|
|
1361
|
+
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
|
|
834
1362
|
return typeof obj;
|
|
835
1363
|
} : function(obj) {
|
|
836
|
-
return obj && typeof Symbol
|
|
837
|
-
}
|
|
1364
|
+
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
1365
|
+
};
|
|
1366
|
+
var d3_identity = /* @__PURE__ */ __name(function d3_identity2(d) {
|
|
838
1367
|
return d;
|
|
839
|
-
},
|
|
840
|
-
|
|
1368
|
+
}, "d3_identity");
|
|
1369
|
+
var d3_reverse = /* @__PURE__ */ __name(function d3_reverse2(arr) {
|
|
1370
|
+
var mirror = [];
|
|
1371
|
+
for (var i = 0, l = arr.length; i < l; i++) {
|
|
841
1372
|
mirror[i] = arr[l - i - 1];
|
|
1373
|
+
}
|
|
842
1374
|
return mirror;
|
|
843
|
-
},
|
|
1375
|
+
}, "d3_reverse");
|
|
1376
|
+
var d3_textWrapping = /* @__PURE__ */ __name(function d3_textWrapping2(text, width) {
|
|
844
1377
|
text.each(function() {
|
|
845
1378
|
var text2 = select(this), words = text2.text().split(/\s+/).reverse(), word, line = [], lineHeight = 1.2;
|
|
846
1379
|
text2.attr("y");
|
|
847
|
-
|
|
848
|
-
|
|
1380
|
+
var dy = parseFloat(text2.attr("dy")) || 0, tspan = text2.text(null).append("tspan").attr("x", 0).attr("dy", dy + "em");
|
|
1381
|
+
while (word = words.pop()) {
|
|
1382
|
+
line.push(word);
|
|
1383
|
+
tspan.text(line.join(" "));
|
|
1384
|
+
if (tspan.node().getComputedTextLength() > width && line.length > 1) {
|
|
1385
|
+
line.pop();
|
|
1386
|
+
tspan.text(line.join(" "));
|
|
1387
|
+
line = [word];
|
|
1388
|
+
tspan = text2.append("tspan").attr("x", 0).attr("dy", lineHeight + dy + "em").text(word);
|
|
1389
|
+
}
|
|
1390
|
+
}
|
|
849
1391
|
});
|
|
850
|
-
},
|
|
851
|
-
|
|
852
|
-
|
|
1392
|
+
}, "d3_textWrapping");
|
|
1393
|
+
var d3_mergeLabels = /* @__PURE__ */ __name(function d3_mergeLabels2() {
|
|
1394
|
+
var gen = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
|
|
1395
|
+
var labels = arguments[1];
|
|
1396
|
+
var domain = arguments[2];
|
|
1397
|
+
var range = arguments[3];
|
|
1398
|
+
var labelDelimiter = arguments[4];
|
|
1399
|
+
if ((typeof labels === "undefined" ? "undefined" : _typeof(labels)) === "object") {
|
|
853
1400
|
if (labels.length === 0) return gen;
|
|
854
|
-
|
|
1401
|
+
var i = labels.length;
|
|
1402
|
+
for (; i < gen.length; i++) {
|
|
855
1403
|
labels.push(gen[i]);
|
|
1404
|
+
}
|
|
856
1405
|
return labels;
|
|
857
|
-
} else if (typeof labels
|
|
858
|
-
|
|
1406
|
+
} else if (typeof labels === "function") {
|
|
1407
|
+
var customLabels = [];
|
|
1408
|
+
var genLength = gen.length;
|
|
1409
|
+
for (var _i = 0; _i < genLength; _i++) {
|
|
859
1410
|
customLabels.push(labels({
|
|
860
1411
|
i: _i,
|
|
861
1412
|
genLength,
|
|
@@ -864,25 +1415,32 @@ var _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol"
|
|
|
864
1415
|
range,
|
|
865
1416
|
labelDelimiter
|
|
866
1417
|
}));
|
|
1418
|
+
}
|
|
867
1419
|
return customLabels;
|
|
868
1420
|
}
|
|
869
1421
|
return gen;
|
|
870
|
-
},
|
|
1422
|
+
}, "d3_mergeLabels");
|
|
1423
|
+
var d3_linearLegend = /* @__PURE__ */ __name(function d3_linearLegend2(scale, cells, labelFormat) {
|
|
871
1424
|
var data = [];
|
|
872
|
-
if (cells.length > 1)
|
|
1425
|
+
if (cells.length > 1) {
|
|
873
1426
|
data = cells;
|
|
874
|
-
else
|
|
875
|
-
|
|
1427
|
+
} else {
|
|
1428
|
+
var domain = scale.domain(), increment = (domain[domain.length - 1] - domain[0]) / (cells - 1);
|
|
1429
|
+
var i = 0;
|
|
1430
|
+
for (; i < cells; i++) {
|
|
876
1431
|
data.push(domain[0] + i * increment);
|
|
1432
|
+
}
|
|
1433
|
+
}
|
|
877
1434
|
var labels = data.map(labelFormat);
|
|
878
1435
|
return {
|
|
879
1436
|
data,
|
|
880
1437
|
labels,
|
|
881
|
-
feature: function(d) {
|
|
1438
|
+
feature: /* @__PURE__ */ __name(function feature(d) {
|
|
882
1439
|
return scale(d);
|
|
883
|
-
}
|
|
1440
|
+
}, "feature")
|
|
884
1441
|
};
|
|
885
|
-
},
|
|
1442
|
+
}, "d3_linearLegend");
|
|
1443
|
+
var d3_quantLegend = /* @__PURE__ */ __name(function d3_quantLegend2(scale, labelFormat, labelDelimiter) {
|
|
886
1444
|
var labels = scale.range().map(function(d) {
|
|
887
1445
|
var invert = scale.invertExtent(d);
|
|
888
1446
|
return labelFormat(invert[0]) + " " + labelDelimiter + " " + labelFormat(invert[1]);
|
|
@@ -892,51 +1450,81 @@ var _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol"
|
|
|
892
1450
|
labels,
|
|
893
1451
|
feature: d3_identity
|
|
894
1452
|
};
|
|
895
|
-
},
|
|
1453
|
+
}, "d3_quantLegend");
|
|
1454
|
+
var d3_ordinalLegend = /* @__PURE__ */ __name(function d3_ordinalLegend2(scale) {
|
|
896
1455
|
return {
|
|
897
1456
|
data: scale.domain(),
|
|
898
1457
|
labels: scale.domain(),
|
|
899
|
-
feature: function(d) {
|
|
1458
|
+
feature: /* @__PURE__ */ __name(function feature(d) {
|
|
900
1459
|
return scale(d);
|
|
901
|
-
}
|
|
1460
|
+
}, "feature")
|
|
902
1461
|
};
|
|
903
|
-
},
|
|
1462
|
+
}, "d3_ordinalLegend");
|
|
1463
|
+
var d3_cellOver = /* @__PURE__ */ __name(function d3_cellOver2(cellDispatcher, d, obj) {
|
|
904
1464
|
cellDispatcher.call("cellover", obj, d);
|
|
905
|
-
},
|
|
1465
|
+
}, "d3_cellOver");
|
|
1466
|
+
var d3_cellOut = /* @__PURE__ */ __name(function d3_cellOut2(cellDispatcher, d, obj) {
|
|
906
1467
|
cellDispatcher.call("cellout", obj, d);
|
|
907
|
-
},
|
|
1468
|
+
}, "d3_cellOut");
|
|
1469
|
+
var d3_cellClick = /* @__PURE__ */ __name(function d3_cellClick2(cellDispatcher, d, obj) {
|
|
908
1470
|
cellDispatcher.call("cellclick", obj, d);
|
|
909
|
-
},
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
1471
|
+
}, "d3_cellClick");
|
|
1472
|
+
var helper = {
|
|
1473
|
+
d3_drawShapes: /* @__PURE__ */ __name(function d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, path2) {
|
|
1474
|
+
if (shape === "rect") {
|
|
1475
|
+
shapes.attr("height", shapeHeight).attr("width", shapeWidth);
|
|
1476
|
+
} else if (shape === "circle") {
|
|
1477
|
+
shapes.attr("r", shapeRadius);
|
|
1478
|
+
} else if (shape === "line") {
|
|
1479
|
+
shapes.attr("x1", 0).attr("x2", shapeWidth).attr("y1", 0).attr("y2", 0);
|
|
1480
|
+
} else if (shape === "path") {
|
|
1481
|
+
shapes.attr("d", path2);
|
|
1482
|
+
}
|
|
1483
|
+
}, "d3_drawShapes"),
|
|
1484
|
+
d3_addText: /* @__PURE__ */ __name(function d3_addText(svg, enter, labels, classPrefix, labelWidth) {
|
|
914
1485
|
enter.append("text").attr("class", classPrefix + "label");
|
|
915
1486
|
var text = svg.selectAll("g." + classPrefix + "cell text." + classPrefix + "label").data(labels).text(d3_identity);
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
1487
|
+
if (labelWidth) {
|
|
1488
|
+
svg.selectAll("g." + classPrefix + "cell text." + classPrefix + "label").call(d3_textWrapping, labelWidth);
|
|
1489
|
+
}
|
|
1490
|
+
return text;
|
|
1491
|
+
}, "d3_addText"),
|
|
1492
|
+
d3_calcType: /* @__PURE__ */ __name(function d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter) {
|
|
1493
|
+
var type = scale.invertExtent ? d3_quantLegend(scale, labelFormat, labelDelimiter) : scale.ticks ? d3_linearLegend(scale, cells, labelFormat) : d3_ordinalLegend(scale);
|
|
1494
|
+
var range = scale.range && scale.range() || scale.domain();
|
|
1495
|
+
type.labels = d3_mergeLabels(type.labels, labels, scale.domain(), range, labelDelimiter);
|
|
1496
|
+
if (ascending) {
|
|
1497
|
+
type.labels = d3_reverse(type.labels);
|
|
1498
|
+
type.data = d3_reverse(type.data);
|
|
1499
|
+
}
|
|
1500
|
+
return type;
|
|
1501
|
+
}, "d3_calcType"),
|
|
1502
|
+
d3_filterCells: /* @__PURE__ */ __name(function d3_filterCells(type, cellFilter) {
|
|
923
1503
|
var filterCells = type.data.map(function(d, i) {
|
|
924
1504
|
return { data: d, label: type.labels[i] };
|
|
925
|
-
}).filter(cellFilter)
|
|
1505
|
+
}).filter(cellFilter);
|
|
1506
|
+
var dataValues = filterCells.map(function(d) {
|
|
926
1507
|
return d.data;
|
|
927
|
-
})
|
|
1508
|
+
});
|
|
1509
|
+
var labelValues = filterCells.map(function(d) {
|
|
928
1510
|
return d.label;
|
|
929
1511
|
});
|
|
930
|
-
|
|
1512
|
+
type.data = type.data.filter(function(d) {
|
|
931
1513
|
return dataValues.indexOf(d) !== -1;
|
|
932
|
-
})
|
|
1514
|
+
});
|
|
1515
|
+
type.labels = type.labels.filter(function(d) {
|
|
933
1516
|
return labelValues.indexOf(d) !== -1;
|
|
934
|
-
})
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
1517
|
+
});
|
|
1518
|
+
return type;
|
|
1519
|
+
}, "d3_filterCells"),
|
|
1520
|
+
d3_placement: /* @__PURE__ */ __name(function d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign) {
|
|
1521
|
+
cell.attr("transform", cellTrans);
|
|
1522
|
+
text.attr("transform", textTrans);
|
|
1523
|
+
if (orient === "horizontal") {
|
|
1524
|
+
text.style("text-anchor", labelAlign);
|
|
1525
|
+
}
|
|
1526
|
+
}, "d3_placement"),
|
|
1527
|
+
d3_addEvents: /* @__PURE__ */ __name(function d3_addEvents(cells, dispatcher) {
|
|
940
1528
|
cells.on("mouseover.legend", function(d) {
|
|
941
1529
|
d3_cellOver(dispatcher, d, this);
|
|
942
1530
|
}).on("mouseout.legend", function(d) {
|
|
@@ -944,19 +1532,24 @@ var _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol"
|
|
|
944
1532
|
}).on("click.legend", function(d) {
|
|
945
1533
|
d3_cellClick(dispatcher, d, this);
|
|
946
1534
|
});
|
|
947
|
-
},
|
|
948
|
-
d3_title: function(svg, title, classPrefix, titleWidth) {
|
|
1535
|
+
}, "d3_addEvents"),
|
|
1536
|
+
d3_title: /* @__PURE__ */ __name(function d3_title(svg, title, classPrefix, titleWidth) {
|
|
949
1537
|
if (title !== "") {
|
|
950
1538
|
var titleText = svg.selectAll("text." + classPrefix + "legendTitle");
|
|
951
|
-
titleText.data([title]).enter().append("text").attr("class", classPrefix + "legendTitle")
|
|
952
|
-
|
|
1539
|
+
titleText.data([title]).enter().append("text").attr("class", classPrefix + "legendTitle");
|
|
1540
|
+
svg.selectAll("text." + classPrefix + "legendTitle").text(title);
|
|
1541
|
+
if (titleWidth) {
|
|
1542
|
+
svg.selectAll("text." + classPrefix + "legendTitle").call(d3_textWrapping, titleWidth);
|
|
1543
|
+
}
|
|
1544
|
+
var cellsSvg = svg.select("." + classPrefix + "legendCells");
|
|
1545
|
+
var yOffset = svg.select("." + classPrefix + "legendTitle").nodes().map(function(d) {
|
|
953
1546
|
return d.getBBox().height;
|
|
954
1547
|
})[0], xOffset = -cellsSvg.nodes().map(function(d) {
|
|
955
1548
|
return d.getBBox().x;
|
|
956
1549
|
})[0];
|
|
957
1550
|
cellsSvg.attr("transform", "translate(" + xOffset + "," + yOffset + ")");
|
|
958
1551
|
}
|
|
959
|
-
},
|
|
1552
|
+
}, "d3_title"),
|
|
960
1553
|
d3_defaultLocale: {
|
|
961
1554
|
format,
|
|
962
1555
|
formatPrefix
|
|
@@ -965,14 +1558,22 @@ var _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol"
|
|
|
965
1558
|
d3_defaultDelimiter: "to"
|
|
966
1559
|
};
|
|
967
1560
|
function color() {
|
|
968
|
-
var scale = scaleLinear(), shape = "rect", shapeWidth = 15, shapeHeight = 15, shapeRadius = 10, shapePadding = 2, cells = [5], cellFilter = void 0, labels = [], classPrefix = "", useClass =
|
|
1561
|
+
var scale = scaleLinear(), shape = "rect", shapeWidth = 15, shapeHeight = 15, shapeRadius = 10, shapePadding = 2, cells = [5], cellFilter = void 0, labels = [], classPrefix = "", useClass = false, title = "", locale = helper.d3_defaultLocale, specifier = helper.d3_defaultFormatSpecifier, labelOffset = 10, labelAlign = "middle", labelDelimiter = helper.d3_defaultDelimiter, labelWrap = void 0, orient = "vertical", ascending = false, path2 = void 0, titleWidth = void 0, legendDispatcher = dispatch("cellover", "cellout", "cellclick");
|
|
969
1562
|
function legend(svg) {
|
|
970
1563
|
var type = helper.d3_calcType(scale, ascending, cells, labels, locale.format(specifier), labelDelimiter), legendG = svg.selectAll("g").data([scale]);
|
|
971
|
-
legendG.enter().append("g").attr("class", classPrefix + "legendCells")
|
|
972
|
-
|
|
1564
|
+
legendG.enter().append("g").attr("class", classPrefix + "legendCells");
|
|
1565
|
+
if (cellFilter) {
|
|
1566
|
+
helper.d3_filterCells(type, cellFilter);
|
|
1567
|
+
}
|
|
1568
|
+
var cell = svg.select("." + classPrefix + "legendCells").selectAll("." + classPrefix + "cell").data(type.data);
|
|
1569
|
+
var cellEnter = cell.enter().append("g").attr("class", classPrefix + "cell");
|
|
973
1570
|
cellEnter.append(shape).attr("class", classPrefix + "swatch");
|
|
974
1571
|
var shapes = svg.selectAll("g." + classPrefix + "cell " + shape + "." + classPrefix + "swatch").data(type.data);
|
|
975
|
-
helper.d3_addEvents(cellEnter, legendDispatcher)
|
|
1572
|
+
helper.d3_addEvents(cellEnter, legendDispatcher);
|
|
1573
|
+
cell.exit().transition().style("opacity", 0).remove();
|
|
1574
|
+
shapes.exit().transition().style("opacity", 0).remove();
|
|
1575
|
+
shapes = shapes.merge(shapes);
|
|
1576
|
+
helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, path2);
|
|
976
1577
|
var text = helper.d3_addText(svg, cellEnter, type.labels, classPrefix, labelWrap);
|
|
977
1578
|
cell = cellEnter.merge(cell);
|
|
978
1579
|
var textSize = text.nodes().map(function(d) {
|
|
@@ -980,77 +1581,174 @@ function color() {
|
|
|
980
1581
|
}), shapeSize = shapes.nodes().map(function(d) {
|
|
981
1582
|
return d.getBBox();
|
|
982
1583
|
});
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
1584
|
+
if (!useClass) {
|
|
1585
|
+
if (shape == "line") {
|
|
1586
|
+
shapes.style("stroke", type.feature);
|
|
1587
|
+
} else {
|
|
1588
|
+
shapes.style("fill", type.feature);
|
|
1589
|
+
}
|
|
1590
|
+
} else {
|
|
1591
|
+
shapes.attr("class", function(d) {
|
|
1592
|
+
return classPrefix + "swatch " + type.feature(d);
|
|
990
1593
|
});
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
return
|
|
1030
|
-
}
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
return
|
|
1048
|
-
}
|
|
1594
|
+
}
|
|
1595
|
+
var cellTrans = void 0, textTrans = void 0, textAlign = labelAlign == "start" ? 0 : labelAlign == "middle" ? 0.5 : 1;
|
|
1596
|
+
if (orient === "vertical") {
|
|
1597
|
+
(function() {
|
|
1598
|
+
var cellSize = textSize.map(function(d, i) {
|
|
1599
|
+
return Math.max(d.height, shapeSize[i].height);
|
|
1600
|
+
});
|
|
1601
|
+
cellTrans = /* @__PURE__ */ __name(function cellTrans2(d, i) {
|
|
1602
|
+
var height = sum(cellSize.slice(0, i));
|
|
1603
|
+
return "translate(0, " + (height + i * shapePadding) + ")";
|
|
1604
|
+
}, "cellTrans");
|
|
1605
|
+
textTrans = /* @__PURE__ */ __name(function textTrans2(d, i) {
|
|
1606
|
+
return "translate( " + (shapeSize[i].width + shapeSize[i].x + labelOffset) + ", " + (shapeSize[i].y + shapeSize[i].height / 2 + 5) + ")";
|
|
1607
|
+
}, "textTrans");
|
|
1608
|
+
})();
|
|
1609
|
+
} else if (orient === "horizontal") {
|
|
1610
|
+
cellTrans = /* @__PURE__ */ __name(function cellTrans2(d, i) {
|
|
1611
|
+
return "translate(" + i * (shapeSize[i].width + shapePadding) + ",0)";
|
|
1612
|
+
}, "cellTrans");
|
|
1613
|
+
textTrans = /* @__PURE__ */ __name(function textTrans2(d, i) {
|
|
1614
|
+
return "translate(" + (shapeSize[i].width * textAlign + shapeSize[i].x) + ",\n " + (shapeSize[i].height + shapeSize[i].y + labelOffset + 8) + ")";
|
|
1615
|
+
}, "textTrans");
|
|
1616
|
+
}
|
|
1617
|
+
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
|
|
1618
|
+
helper.d3_title(svg, title, classPrefix, titleWidth);
|
|
1619
|
+
cell.transition().style("opacity", 1);
|
|
1620
|
+
}
|
|
1621
|
+
__name(legend, "legend");
|
|
1622
|
+
legend.scale = function(_) {
|
|
1623
|
+
if (!arguments.length) return scale;
|
|
1624
|
+
scale = _;
|
|
1625
|
+
return legend;
|
|
1626
|
+
};
|
|
1627
|
+
legend.cells = function(_) {
|
|
1628
|
+
if (!arguments.length) return cells;
|
|
1629
|
+
if (_.length > 1 || _ >= 2) {
|
|
1630
|
+
cells = _;
|
|
1631
|
+
}
|
|
1632
|
+
return legend;
|
|
1633
|
+
};
|
|
1634
|
+
legend.cellFilter = function(_) {
|
|
1635
|
+
if (!arguments.length) return cellFilter;
|
|
1636
|
+
cellFilter = _;
|
|
1637
|
+
return legend;
|
|
1638
|
+
};
|
|
1639
|
+
legend.shape = function(_, d) {
|
|
1640
|
+
if (!arguments.length) return shape;
|
|
1641
|
+
if (_ == "rect" || _ == "circle" || _ == "line" || _ == "path" && typeof d === "string") {
|
|
1642
|
+
shape = _;
|
|
1643
|
+
path2 = d;
|
|
1644
|
+
}
|
|
1645
|
+
return legend;
|
|
1646
|
+
};
|
|
1647
|
+
legend.shapeWidth = function(_) {
|
|
1648
|
+
if (!arguments.length) return shapeWidth;
|
|
1649
|
+
shapeWidth = +_;
|
|
1650
|
+
return legend;
|
|
1651
|
+
};
|
|
1652
|
+
legend.shapeHeight = function(_) {
|
|
1653
|
+
if (!arguments.length) return shapeHeight;
|
|
1654
|
+
shapeHeight = +_;
|
|
1655
|
+
return legend;
|
|
1656
|
+
};
|
|
1657
|
+
legend.shapeRadius = function(_) {
|
|
1658
|
+
if (!arguments.length) return shapeRadius;
|
|
1659
|
+
shapeRadius = +_;
|
|
1660
|
+
return legend;
|
|
1661
|
+
};
|
|
1662
|
+
legend.shapePadding = function(_) {
|
|
1663
|
+
if (!arguments.length) return shapePadding;
|
|
1664
|
+
shapePadding = +_;
|
|
1665
|
+
return legend;
|
|
1666
|
+
};
|
|
1667
|
+
legend.labels = function(_) {
|
|
1668
|
+
if (!arguments.length) return labels;
|
|
1669
|
+
labels = _;
|
|
1670
|
+
return legend;
|
|
1671
|
+
};
|
|
1672
|
+
legend.labelAlign = function(_) {
|
|
1673
|
+
if (!arguments.length) return labelAlign;
|
|
1674
|
+
if (_ == "start" || _ == "end" || _ == "middle") {
|
|
1675
|
+
labelAlign = _;
|
|
1676
|
+
}
|
|
1677
|
+
return legend;
|
|
1678
|
+
};
|
|
1679
|
+
legend.locale = function(_) {
|
|
1680
|
+
if (!arguments.length) return locale;
|
|
1681
|
+
locale = formatLocale(_);
|
|
1682
|
+
return legend;
|
|
1683
|
+
};
|
|
1684
|
+
legend.labelFormat = function(_) {
|
|
1685
|
+
if (!arguments.length) return legend.locale().format(specifier);
|
|
1686
|
+
specifier = formatSpecifier(_);
|
|
1687
|
+
return legend;
|
|
1688
|
+
};
|
|
1689
|
+
legend.labelOffset = function(_) {
|
|
1690
|
+
if (!arguments.length) return labelOffset;
|
|
1691
|
+
labelOffset = +_;
|
|
1692
|
+
return legend;
|
|
1693
|
+
};
|
|
1694
|
+
legend.labelDelimiter = function(_) {
|
|
1695
|
+
if (!arguments.length) return labelDelimiter;
|
|
1696
|
+
labelDelimiter = _;
|
|
1697
|
+
return legend;
|
|
1698
|
+
};
|
|
1699
|
+
legend.labelWrap = function(_) {
|
|
1700
|
+
if (!arguments.length) return labelWrap;
|
|
1701
|
+
labelWrap = _;
|
|
1702
|
+
return legend;
|
|
1703
|
+
};
|
|
1704
|
+
legend.useClass = function(_) {
|
|
1705
|
+
if (!arguments.length) return useClass;
|
|
1706
|
+
if (_ === true || _ === false) {
|
|
1707
|
+
useClass = _;
|
|
1708
|
+
}
|
|
1709
|
+
return legend;
|
|
1710
|
+
};
|
|
1711
|
+
legend.orient = function(_) {
|
|
1712
|
+
if (!arguments.length) return orient;
|
|
1713
|
+
_ = _.toLowerCase();
|
|
1714
|
+
if (_ == "horizontal" || _ == "vertical") {
|
|
1715
|
+
orient = _;
|
|
1716
|
+
}
|
|
1717
|
+
return legend;
|
|
1718
|
+
};
|
|
1719
|
+
legend.ascending = function(_) {
|
|
1720
|
+
if (!arguments.length) return ascending;
|
|
1721
|
+
ascending = !!_;
|
|
1722
|
+
return legend;
|
|
1723
|
+
};
|
|
1724
|
+
legend.classPrefix = function(_) {
|
|
1725
|
+
if (!arguments.length) return classPrefix;
|
|
1726
|
+
classPrefix = _;
|
|
1727
|
+
return legend;
|
|
1728
|
+
};
|
|
1729
|
+
legend.title = function(_) {
|
|
1730
|
+
if (!arguments.length) return title;
|
|
1731
|
+
title = _;
|
|
1732
|
+
return legend;
|
|
1733
|
+
};
|
|
1734
|
+
legend.titleWidth = function(_) {
|
|
1735
|
+
if (!arguments.length) return titleWidth;
|
|
1736
|
+
titleWidth = _;
|
|
1737
|
+
return legend;
|
|
1738
|
+
};
|
|
1739
|
+
legend.textWrap = function(_) {
|
|
1740
|
+
if (!arguments.length) return textWrap;
|
|
1741
|
+
textWrap = _;
|
|
1742
|
+
return legend;
|
|
1743
|
+
};
|
|
1744
|
+
legend.on = function() {
|
|
1049
1745
|
var value = legendDispatcher.on.apply(legendDispatcher, arguments);
|
|
1050
1746
|
return value === legendDispatcher ? legend : value;
|
|
1051
|
-
}
|
|
1747
|
+
};
|
|
1748
|
+
return legend;
|
|
1052
1749
|
}
|
|
1053
|
-
|
|
1750
|
+
__name(color, "color");
|
|
1751
|
+
const _Legend = class _Legend extends SVGWidget {
|
|
1054
1752
|
constructor(owner) {
|
|
1055
1753
|
super();
|
|
1056
1754
|
__publicField(this, "_owner");
|
|
@@ -1059,17 +1757,18 @@ class Legend extends SVGWidget {
|
|
|
1059
1757
|
__publicField(this, "_legendOrdinal");
|
|
1060
1758
|
__publicField(this, "_disabled", []);
|
|
1061
1759
|
__publicField(this, "_symbolTypeMap", {
|
|
1062
|
-
circle: d3SymbolCircle,
|
|
1063
|
-
cross: d3SymbolCross,
|
|
1064
|
-
diamond: d3SymbolDiamond,
|
|
1065
|
-
square: d3SymbolSquare,
|
|
1066
|
-
star: d3SymbolStar,
|
|
1067
|
-
triangle: d3SymbolTriangle,
|
|
1068
|
-
wye: d3SymbolWye
|
|
1760
|
+
"circle": d3SymbolCircle,
|
|
1761
|
+
"cross": d3SymbolCross,
|
|
1762
|
+
"diamond": d3SymbolDiamond,
|
|
1763
|
+
"square": d3SymbolSquare,
|
|
1764
|
+
"star": d3SymbolStar,
|
|
1765
|
+
"triangle": d3SymbolTriangle,
|
|
1766
|
+
"wye": d3SymbolWye
|
|
1069
1767
|
});
|
|
1070
1768
|
__publicField(this, "_g");
|
|
1071
1769
|
__publicField(this, "_containerSize");
|
|
1072
|
-
this._owner = owner
|
|
1770
|
+
this._owner = owner;
|
|
1771
|
+
this._drawStartPos = "origin";
|
|
1073
1772
|
const context = this;
|
|
1074
1773
|
this._legendOrdinal = color().shape("path", d3Symbol().type(d3SymbolCircle).size(150)()).shapePadding(10).shapeRadius(10).on("cellclick", function(d) {
|
|
1075
1774
|
context.onClick(d, this);
|
|
@@ -1080,7 +1779,14 @@ class Legend extends SVGWidget {
|
|
|
1080
1779
|
});
|
|
1081
1780
|
}
|
|
1082
1781
|
isDisabled(d) {
|
|
1083
|
-
|
|
1782
|
+
if (typeof d === "undefined") {
|
|
1783
|
+
return false;
|
|
1784
|
+
} else if (typeof d === "string") {
|
|
1785
|
+
return d.indexOf("__") === 0 || this._disabled.indexOf(d) >= 0;
|
|
1786
|
+
} else if (d instanceof Database.Field) {
|
|
1787
|
+
return d.id().indexOf("__") === 0 || this._disabled.indexOf(d.id()) >= 0;
|
|
1788
|
+
}
|
|
1789
|
+
return this._disabled.indexOf(d) >= 0;
|
|
1084
1790
|
}
|
|
1085
1791
|
filteredFields() {
|
|
1086
1792
|
switch (this.dataFamily()) {
|
|
@@ -1106,11 +1812,17 @@ class Legend extends SVGWidget {
|
|
|
1106
1812
|
return this.data().filter((row) => !this.isDisabled(row[0]));
|
|
1107
1813
|
case "ND":
|
|
1108
1814
|
const disabledCols = {};
|
|
1109
|
-
let anyDisabled =
|
|
1110
|
-
|
|
1815
|
+
let anyDisabled = false;
|
|
1816
|
+
this.columns().forEach((col, idx) => {
|
|
1111
1817
|
const disabled = this.isDisabled(col);
|
|
1112
|
-
disabledCols[idx] = disabled
|
|
1113
|
-
|
|
1818
|
+
disabledCols[idx] = disabled;
|
|
1819
|
+
if (disabled) {
|
|
1820
|
+
anyDisabled = true;
|
|
1821
|
+
}
|
|
1822
|
+
});
|
|
1823
|
+
return !anyDisabled ? this.data() : this.data().map((row) => {
|
|
1824
|
+
return row.filter((cell, idx) => !disabledCols[idx]);
|
|
1825
|
+
});
|
|
1114
1826
|
}
|
|
1115
1827
|
return this.data();
|
|
1116
1828
|
}
|
|
@@ -1120,7 +1832,12 @@ class Legend extends SVGWidget {
|
|
|
1120
1832
|
}
|
|
1121
1833
|
targetWidget(_) {
|
|
1122
1834
|
if (!arguments.length) return this._targetWidget;
|
|
1123
|
-
|
|
1835
|
+
this._targetWidget = _;
|
|
1836
|
+
if (this._targetWidgetMonitor) {
|
|
1837
|
+
this._targetWidgetMonitor.remove();
|
|
1838
|
+
delete this._targetWidgetMonitor;
|
|
1839
|
+
}
|
|
1840
|
+
if (this._targetWidget) {
|
|
1124
1841
|
const context = this;
|
|
1125
1842
|
this._targetWidgetMonitor = this._targetWidget.monitor(function(key, newProp, oldProp, source) {
|
|
1126
1843
|
switch (key) {
|
|
@@ -1136,22 +1853,24 @@ class Legend extends SVGWidget {
|
|
|
1136
1853
|
return this;
|
|
1137
1854
|
}
|
|
1138
1855
|
getWidget() {
|
|
1139
|
-
if (this._targetWidget)
|
|
1856
|
+
if (this._targetWidget) {
|
|
1140
1857
|
switch (this._targetWidget.classID()) {
|
|
1141
1858
|
case "composite_MultiChart":
|
|
1142
1859
|
return this._targetWidget.chart();
|
|
1143
1860
|
}
|
|
1861
|
+
}
|
|
1144
1862
|
return this._targetWidget;
|
|
1145
1863
|
}
|
|
1146
1864
|
getPalette() {
|
|
1147
1865
|
const widget = this.getWidget();
|
|
1148
|
-
if (widget && widget._palette)
|
|
1866
|
+
if (widget && widget._palette) {
|
|
1149
1867
|
switch (widget._palette.type()) {
|
|
1150
1868
|
case "ordinal":
|
|
1151
1869
|
return Palette.ordinal(widget._palette.id());
|
|
1152
1870
|
case "rainbow":
|
|
1153
1871
|
return Palette.rainbow(widget._palette.id());
|
|
1154
1872
|
}
|
|
1873
|
+
}
|
|
1155
1874
|
return Palette.ordinal("default");
|
|
1156
1875
|
}
|
|
1157
1876
|
getPaletteType() {
|
|
@@ -1159,19 +1878,30 @@ class Legend extends SVGWidget {
|
|
|
1159
1878
|
}
|
|
1160
1879
|
fillColorFunc() {
|
|
1161
1880
|
const widget = this.getWidget();
|
|
1162
|
-
if (widget && widget.fillColor)
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1881
|
+
if (widget && widget.fillColor) {
|
|
1882
|
+
if (widget._palette && widget.paletteID && widget._palette.name !== widget.paletteID()) {
|
|
1883
|
+
widget._palette = widget._palette.switch(widget.paletteID());
|
|
1884
|
+
}
|
|
1885
|
+
return (row, col, sel) => {
|
|
1886
|
+
return widget.fillColor(row, col, sel);
|
|
1887
|
+
};
|
|
1888
|
+
}
|
|
1889
|
+
const palette = Palette.ordinal(widget && widget.paletteID ? widget.paletteID() || "default" : "default");
|
|
1890
|
+
return (row, col, sel) => {
|
|
1891
|
+
return palette(col);
|
|
1892
|
+
};
|
|
1166
1893
|
}
|
|
1167
1894
|
fillColor(row, col, sel) {
|
|
1168
1895
|
return this.fillColorFunc()(row, col, sel);
|
|
1169
1896
|
}
|
|
1170
1897
|
enter(domNode, element) {
|
|
1171
|
-
super.enter(domNode, element)
|
|
1898
|
+
super.enter(domNode, element);
|
|
1899
|
+
this._g = element.append("g").attr("class", "legendOrdinal");
|
|
1172
1900
|
}
|
|
1173
1901
|
calcMetaData() {
|
|
1174
|
-
let dataArr = []
|
|
1902
|
+
let dataArr = [];
|
|
1903
|
+
let total = 0;
|
|
1904
|
+
let maxLabelWidth = 0;
|
|
1175
1905
|
const colLength = this.columns().length;
|
|
1176
1906
|
if (this._targetWidget) {
|
|
1177
1907
|
const columns = this.columns();
|
|
@@ -1184,35 +1914,50 @@ class Legend extends SVGWidget {
|
|
|
1184
1914
|
dataArr = this.data().map(function(n, i) {
|
|
1185
1915
|
val = this.data()[i].slice(1, colLength).reduce((acc, n2) => acc + n2, 0);
|
|
1186
1916
|
const disabled = this.isDisabled(n[0]);
|
|
1187
|
-
disabled
|
|
1188
|
-
const label = n[0] + (!disabled && this.showSeriesTotal() ? ` (${val})` : "")
|
|
1189
|
-
|
|
1917
|
+
if (!disabled) total += val;
|
|
1918
|
+
const label = n[0] + (!disabled && this.showSeriesTotal() ? ` (${val})` : "");
|
|
1919
|
+
const textSize = this.textSize(label);
|
|
1920
|
+
if (maxLabelWidth < textSize.width) maxLabelWidth = textSize.width;
|
|
1921
|
+
return [fillColor(n, n[0], false), n[0], label];
|
|
1190
1922
|
}, this);
|
|
1191
1923
|
break;
|
|
1192
1924
|
case "ND":
|
|
1193
|
-
|
|
1925
|
+
const widgetColumns = this.columns().filter((col) => col.indexOf("__") !== 0);
|
|
1926
|
+
dataArr = widgetColumns.filter(function(n, i) {
|
|
1194
1927
|
return i > 0;
|
|
1195
1928
|
}).map(function(n, i) {
|
|
1196
1929
|
val = this.data().reduce((acc, n2) => acc + n2[i + 1], 0);
|
|
1197
|
-
const disabled = this.isDisabled(columns[i + 1])
|
|
1198
|
-
disabled
|
|
1930
|
+
const disabled = this.isDisabled(columns[i + 1]);
|
|
1931
|
+
const label = n + (!disabled && this.showSeriesTotal() ? ` (${val})` : "");
|
|
1932
|
+
if (!disabled) total += val;
|
|
1199
1933
|
const textSize = this.textSize(label);
|
|
1200
|
-
|
|
1934
|
+
if (maxLabelWidth < textSize.width) maxLabelWidth = textSize.width;
|
|
1935
|
+
return [fillColor(void 0, n, false), n, label];
|
|
1201
1936
|
}, this);
|
|
1202
1937
|
break;
|
|
1203
1938
|
default:
|
|
1204
|
-
|
|
1205
|
-
|
|
1939
|
+
const widgetColumns2 = this.columns();
|
|
1940
|
+
dataArr = widgetColumns2.map(function(n) {
|
|
1941
|
+
return [fillColor(void 0, n, false), n];
|
|
1206
1942
|
}, this);
|
|
1207
1943
|
break;
|
|
1208
1944
|
}
|
|
1209
1945
|
break;
|
|
1210
1946
|
case "rainbow":
|
|
1211
|
-
const palette = this.getPalette()
|
|
1947
|
+
const palette = this.getPalette();
|
|
1948
|
+
const format$1 = format(this.rainbowFormat());
|
|
1949
|
+
const widget = this.getWidget();
|
|
1950
|
+
const steps = this.rainbowBins();
|
|
1951
|
+
const weightMin = widget._dataMinWeight;
|
|
1952
|
+
const weightMax = widget._dataMaxWeight;
|
|
1953
|
+
const stepWeightDiff = (weightMax - weightMin) / (steps - 1);
|
|
1212
1954
|
dataArr.push([palette(weightMin, weightMin, weightMax), format$1(weightMin)]);
|
|
1213
1955
|
for (let x = 1; x < steps - 1; ++x) {
|
|
1214
1956
|
let mid = stepWeightDiff * x;
|
|
1215
|
-
Math.floor(mid) > parseInt(dataArr[0][1])
|
|
1957
|
+
if (Math.floor(mid) > parseInt(dataArr[0][1])) {
|
|
1958
|
+
mid = Math.floor(mid);
|
|
1959
|
+
}
|
|
1960
|
+
dataArr.push([palette(mid, weightMin, weightMax), format$1(mid)]);
|
|
1216
1961
|
}
|
|
1217
1962
|
dataArr.push([palette(weightMax, weightMin, weightMax), format$1(weightMax)]);
|
|
1218
1963
|
break;
|
|
@@ -1226,28 +1971,52 @@ class Legend extends SVGWidget {
|
|
|
1226
1971
|
}
|
|
1227
1972
|
update(domNode, element) {
|
|
1228
1973
|
super.update(domNode, element);
|
|
1229
|
-
const { dataArr, maxLabelWidth, total } = this.calcMetaData()
|
|
1974
|
+
const { dataArr, maxLabelWidth, total } = this.calcMetaData();
|
|
1975
|
+
const radius = this.shapeRadius();
|
|
1976
|
+
const size = this.radiusToSymbolSize(radius);
|
|
1977
|
+
const strokeWidth = 1;
|
|
1230
1978
|
let shapePadding = this.itemPadding();
|
|
1231
|
-
this.orientation() === "horizontal"
|
|
1979
|
+
if (this.orientation() === "horizontal") {
|
|
1980
|
+
shapePadding += maxLabelWidth - radius * 2;
|
|
1981
|
+
}
|
|
1232
1982
|
const ordinal = scaleOrdinal().domain(dataArr.map((row) => row[1])).range(dataArr.map((row) => row[0]));
|
|
1233
|
-
this._legendOrdinal.shape("path", d3Symbol().type(this._symbolTypeMap[this.symbolType()]).size(size)()).orient(this.orientation()).title(this.title()).labelWrap(this.labelMaxWidth()).labelAlign(this.labelAlign()).shapePadding(shapePadding).scale(ordinal).labels((d) => dataArr[d.i][2])
|
|
1983
|
+
this._legendOrdinal.shape("path", d3Symbol().type(this._symbolTypeMap[this.symbolType()]).size(size)()).orient(this.orientation()).title(this.title()).labelWrap(this.labelMaxWidth()).labelAlign(this.labelAlign()).shapePadding(shapePadding).scale(ordinal).labels((d) => dataArr[d.i][2]);
|
|
1984
|
+
this._g.call(this._legendOrdinal);
|
|
1985
|
+
this.updateDisabled(element, dataArr);
|
|
1234
1986
|
const legendCellsBbox = this._g.select(".legendCells").node().getBBox();
|
|
1235
|
-
let offsetX = Math.abs(legendCellsBbox.x)
|
|
1987
|
+
let offsetX = Math.abs(legendCellsBbox.x);
|
|
1988
|
+
let offsetY = Math.abs(legendCellsBbox.y) + strokeWidth;
|
|
1236
1989
|
if (this.orientation() === "horizontal") {
|
|
1237
|
-
if (this.labelAlign() === "start"
|
|
1990
|
+
if (this.labelAlign() === "start") {
|
|
1991
|
+
offsetX += strokeWidth;
|
|
1992
|
+
} else if (this.labelAlign() === "end") {
|
|
1993
|
+
offsetX -= strokeWidth;
|
|
1994
|
+
}
|
|
1995
|
+
if (this.width() > legendCellsBbox.width) {
|
|
1238
1996
|
const extraWidth = this.width() - legendCellsBbox.width;
|
|
1239
1997
|
offsetX += extraWidth / 2;
|
|
1240
1998
|
}
|
|
1241
|
-
} else if (this.orientation() === "vertical"
|
|
1242
|
-
|
|
1243
|
-
|
|
1999
|
+
} else if (this.orientation() === "vertical") {
|
|
2000
|
+
offsetX += strokeWidth;
|
|
2001
|
+
if (this._containerSize.height > legendCellsBbox.height) {
|
|
2002
|
+
const extraHeight = this.height() - legendCellsBbox.height;
|
|
2003
|
+
offsetY += extraHeight / 2;
|
|
2004
|
+
}
|
|
1244
2005
|
}
|
|
1245
|
-
this._g.attr("transform", `translate(${offsetX}, ${offsetY})`)
|
|
2006
|
+
this._g.attr("transform", `translate(${offsetX}, ${offsetY})`);
|
|
2007
|
+
this.pos({
|
|
1246
2008
|
x: 0,
|
|
1247
2009
|
y: 0
|
|
1248
|
-
})
|
|
1249
|
-
|
|
1250
|
-
|
|
2010
|
+
});
|
|
2011
|
+
this._legendOrdinal.labelOffset(this.itemPadding());
|
|
2012
|
+
const legendTotal = this._g.selectAll(".legendTotal").data(dataArr.length && this.showLegendTotal() ? [total] : []);
|
|
2013
|
+
const totalText = `Total: ${total}`;
|
|
2014
|
+
const totalOffsetX = -offsetX;
|
|
2015
|
+
const totalOffsetY = legendCellsBbox.height + this.itemPadding() + strokeWidth;
|
|
2016
|
+
this.enableOverflowScroll(false);
|
|
2017
|
+
this.enableOverflow(true);
|
|
2018
|
+
legendTotal.enter().append("text").classed("legendTotal", true).merge(legendTotal).attr("transform", `translate(${totalOffsetX}, ${totalOffsetY})`).text(totalText);
|
|
2019
|
+
legendTotal.exit().remove();
|
|
1251
2020
|
}
|
|
1252
2021
|
updateDisabled(element, dataArr) {
|
|
1253
2022
|
element.style("cursor", "pointer").selectAll("path.swatch").filter((d, i) => i < dataArr.length).style("stroke", (d, i) => dataArr[i][0]).style(
|
|
@@ -1257,7 +2026,15 @@ class Legend extends SVGWidget {
|
|
|
1257
2026
|
}
|
|
1258
2027
|
postUpdate(domNode, element) {
|
|
1259
2028
|
let w;
|
|
1260
|
-
|
|
2029
|
+
if (this._boundingBox) {
|
|
2030
|
+
w = this._boundingBox.width;
|
|
2031
|
+
this._boundingBox.width = this._size.width;
|
|
2032
|
+
}
|
|
2033
|
+
super.postUpdate(domNode, element);
|
|
2034
|
+
if (w !== void 0) {
|
|
2035
|
+
this._boundingBox.width = w;
|
|
2036
|
+
}
|
|
2037
|
+
this._parentRelativeDiv.style("overflow", "hidden");
|
|
1261
2038
|
}
|
|
1262
2039
|
exit(domNode, element) {
|
|
1263
2040
|
super.exit(domNode, element);
|
|
@@ -1286,27 +2063,37 @@ class Legend extends SVGWidget {
|
|
|
1286
2063
|
case "2D":
|
|
1287
2064
|
case "ND":
|
|
1288
2065
|
const disabledIdx = this._disabled.indexOf(d);
|
|
1289
|
-
disabledIdx < 0
|
|
2066
|
+
if (disabledIdx < 0) {
|
|
2067
|
+
this._disabled.push(d);
|
|
2068
|
+
} else {
|
|
2069
|
+
this._disabled.splice(disabledIdx, 1);
|
|
2070
|
+
}
|
|
2071
|
+
this._owner.refreshColumns();
|
|
2072
|
+
this._owner.refreshData();
|
|
2073
|
+
this._owner.render();
|
|
1290
2074
|
break;
|
|
1291
2075
|
}
|
|
1292
2076
|
break;
|
|
1293
2077
|
}
|
|
1294
2078
|
}
|
|
1295
2079
|
onOver(d, domNode) {
|
|
1296
|
-
if (instanceOfIHighlight(this._owner))
|
|
2080
|
+
if (instanceOfIHighlight(this._owner)) {
|
|
1297
2081
|
switch (this.getPaletteType()) {
|
|
1298
2082
|
case "ordinal":
|
|
1299
2083
|
switch (this.dataFamily()) {
|
|
1300
2084
|
case "2D":
|
|
1301
2085
|
case "ND":
|
|
1302
|
-
this._disabled.indexOf(d) < 0
|
|
2086
|
+
if (this._disabled.indexOf(d) < 0) {
|
|
2087
|
+
this._owner.highlightColumn(d);
|
|
2088
|
+
}
|
|
1303
2089
|
break;
|
|
1304
2090
|
}
|
|
1305
2091
|
break;
|
|
1306
2092
|
}
|
|
2093
|
+
}
|
|
1307
2094
|
}
|
|
1308
2095
|
onOut(d, domNode) {
|
|
1309
|
-
if (instanceOfIHighlight(this._owner))
|
|
2096
|
+
if (instanceOfIHighlight(this._owner)) {
|
|
1310
2097
|
switch (this.getPaletteType()) {
|
|
1311
2098
|
case "ordinal":
|
|
1312
2099
|
switch (this.dataFamily()) {
|
|
@@ -1317,6 +2104,7 @@ class Legend extends SVGWidget {
|
|
|
1317
2104
|
}
|
|
1318
2105
|
break;
|
|
1319
2106
|
}
|
|
2107
|
+
}
|
|
1320
2108
|
}
|
|
1321
2109
|
onDblClick(rowData, rowIdx) {
|
|
1322
2110
|
}
|
|
@@ -1327,27 +2115,36 @@ class Legend extends SVGWidget {
|
|
|
1327
2115
|
if (this.fitToContent()) {
|
|
1328
2116
|
this._containerSize = _size;
|
|
1329
2117
|
const bbox = this.getBBox();
|
|
1330
|
-
|
|
1331
|
-
|
|
2118
|
+
if (_size.width > bbox.width) {
|
|
2119
|
+
bbox.width = _size.width;
|
|
2120
|
+
}
|
|
2121
|
+
if (_size.height > bbox.height) {
|
|
2122
|
+
bbox.height = _size.height;
|
|
2123
|
+
}
|
|
2124
|
+
retVal = super.resize.apply(this, [{ ...bbox }]);
|
|
2125
|
+
} else {
|
|
1332
2126
|
retVal = super.resize.apply(this, arguments);
|
|
2127
|
+
}
|
|
1333
2128
|
return retVal;
|
|
1334
2129
|
}
|
|
1335
|
-
}
|
|
2130
|
+
};
|
|
2131
|
+
__name(_Legend, "Legend");
|
|
2132
|
+
let Legend = _Legend;
|
|
1336
2133
|
Legend.prototype._class += " layout_Legend";
|
|
1337
2134
|
Legend.prototype.publish("title", "", "string", "Title");
|
|
1338
2135
|
Legend.prototype.publish("symbolType", "circle", "set", "Shape of each legend item", ["circle", "cross", "diamond", "square", "star", "triangle", "wye"]);
|
|
1339
|
-
Legend.prototype.publish("labelMaxWidth", null, "number", "Max Label Width (pixels)", null, { optional:
|
|
2136
|
+
Legend.prototype.publish("labelMaxWidth", null, "number", "Max Label Width (pixels)", null, { optional: true });
|
|
1340
2137
|
Legend.prototype.publish("orientation", "vertical", "set", "Orientation of Legend rows", ["vertical", "horizontal"], { tags: ["Private"] });
|
|
1341
2138
|
Legend.prototype.publish("dataFamily", "ND", "set", "Type of data", ["1D", "2D", "ND", "map", "graph", "any"], { tags: ["Private"] });
|
|
1342
|
-
Legend.prototype.publish("rainbowFormat", ",", "string", "Rainbow number formatting", null, { tags: ["Private"], optional:
|
|
1343
|
-
Legend.prototype.publish("rainbowBins", 8, "number", "Number of rainbow bins", null, { tags: ["Private"], disable: (w) => !w.isRainbow() });
|
|
1344
|
-
Legend.prototype.publish("showSeriesTotal",
|
|
1345
|
-
Legend.prototype.publish("showLegendTotal",
|
|
2139
|
+
Legend.prototype.publish("rainbowFormat", ",", "string", "Rainbow number formatting", null, { tags: ["Private"], optional: true, disable: /* @__PURE__ */ __name((w) => !w.isRainbow(), "disable") });
|
|
2140
|
+
Legend.prototype.publish("rainbowBins", 8, "number", "Number of rainbow bins", null, { tags: ["Private"], disable: /* @__PURE__ */ __name((w) => !w.isRainbow(), "disable") });
|
|
2141
|
+
Legend.prototype.publish("showSeriesTotal", false, "boolean", "Show value next to series");
|
|
2142
|
+
Legend.prototype.publish("showLegendTotal", false, "boolean", "Show a total of the series values under the legend", null);
|
|
1346
2143
|
Legend.prototype.publish("itemPadding", 8, "number", "Padding between legend items (pixels)");
|
|
1347
2144
|
Legend.prototype.publish("shapeRadius", 7, "number", "Radius of legend shape (pixels)");
|
|
1348
|
-
Legend.prototype.publish("fitToContent",
|
|
1349
|
-
Legend.prototype.publish("labelAlign", "start", "set", "Horizontal alignment of legend item label (for horizontal orientation only)", ["start", "middle", "end"], { optional:
|
|
1350
|
-
class
|
|
2145
|
+
Legend.prototype.publish("fitToContent", true, "boolean", "If true, resize will simply reapply the bounding box dimensions");
|
|
2146
|
+
Legend.prototype.publish("labelAlign", "start", "set", "Horizontal alignment of legend item label (for horizontal orientation only)", ["start", "middle", "end"], { optional: true, disable: /* @__PURE__ */ __name((w) => w.orientation() === "vertical", "disable") });
|
|
2147
|
+
const _Modal = class _Modal extends HTMLWidget {
|
|
1351
2148
|
constructor() {
|
|
1352
2149
|
super();
|
|
1353
2150
|
__publicField(this, "_widget");
|
|
@@ -1362,72 +2159,128 @@ class Modal extends HTMLWidget {
|
|
|
1362
2159
|
this._tag = "div";
|
|
1363
2160
|
}
|
|
1364
2161
|
closeModal() {
|
|
1365
|
-
this.visible(
|
|
2162
|
+
this.visible(false);
|
|
1366
2163
|
}
|
|
1367
2164
|
getRelativeTarget() {
|
|
1368
2165
|
let relativeTarget;
|
|
1369
|
-
|
|
2166
|
+
if (this.relativeTargetId()) {
|
|
2167
|
+
relativeTarget = document.getElementById(this.relativeTargetId());
|
|
2168
|
+
if (relativeTarget) {
|
|
2169
|
+
return relativeTarget;
|
|
2170
|
+
}
|
|
2171
|
+
}
|
|
2172
|
+
if (!relativeTarget) {
|
|
2173
|
+
relativeTarget = this.locateAncestor("layout_Grid");
|
|
2174
|
+
if (relativeTarget && relativeTarget.element) {
|
|
2175
|
+
return relativeTarget.element().node();
|
|
2176
|
+
}
|
|
2177
|
+
}
|
|
2178
|
+
return document.body;
|
|
1370
2179
|
}
|
|
1371
2180
|
setModalSize() {
|
|
1372
|
-
this.fixedHeight() !== null && this.fixedWidth() !== null
|
|
1373
|
-
|
|
1374
|
-
|
|
2181
|
+
if (this.fixedHeight() !== null && this.fixedWidth() !== null) {
|
|
2182
|
+
this._modal.style("height", this.fixedHeight()).style("width", this.fixedWidth()).style("min-height", null).style("min-width", null).style("max-height", null).style("max-width", null);
|
|
2183
|
+
} else if (this.minHeight() || this.minWidth()) {
|
|
2184
|
+
this._modal.style("min-height", this.minHeight()).style("min-width", this.minWidth()).style("max-height", this.maxHeight()).style("max-width", this.maxWidth());
|
|
2185
|
+
}
|
|
2186
|
+
const modalRect = this._modal.node().getBoundingClientRect();
|
|
2187
|
+
const headerRect = this._modalHeader.node().getBoundingClientRect();
|
|
2188
|
+
this._modalBody.style("height", modalRect.height - headerRect.height + "px").style("width", modalRect.width);
|
|
2189
|
+
return modalRect;
|
|
1375
2190
|
}
|
|
1376
2191
|
setFadePosition(rect) {
|
|
1377
2192
|
this._fade.style("top", rect.top + "px").style("left", rect.left + "px").style("width", rect.width + "px").style("height", rect.height + "px");
|
|
1378
2193
|
}
|
|
1379
2194
|
setModalPosition(rect) {
|
|
1380
2195
|
const modalRect = this.setModalSize();
|
|
1381
|
-
if (this.fixedTop() !== null && this.fixedLeft() !== null)
|
|
2196
|
+
if (this.fixedTop() !== null && this.fixedLeft() !== null) {
|
|
1382
2197
|
this._modal.style("top", `calc(${this.fixedTop()} + ${rect.top}px)`).style("left", `calc(${this.fixedLeft()} + ${rect.left}px)`);
|
|
1383
|
-
else if (this.fixedHeight() !== null && this.fixedWidth() !== null)
|
|
2198
|
+
} else if (this.fixedHeight() !== null && this.fixedWidth() !== null) {
|
|
1384
2199
|
this._modal.style("top", rect.top + rect.height / 2 - modalRect.height / 2 + "px").style("left", rect.left + rect.width / 2 - modalRect.width / 2 + "px");
|
|
1385
|
-
else if (this.minHeight() || this.minWidth()) {
|
|
2200
|
+
} else if (this.minHeight() || this.minWidth()) {
|
|
1386
2201
|
const contentRect = this._modal.node().getBoundingClientRect();
|
|
1387
2202
|
this._modal.style("top", rect.top + rect.height / 2 - contentRect.height / 2 + "px").style("left", rect.left + rect.width / 2 - contentRect.width / 2 + "px");
|
|
1388
2203
|
}
|
|
1389
2204
|
}
|
|
1390
2205
|
resize(size) {
|
|
1391
|
-
|
|
2206
|
+
super.resize();
|
|
2207
|
+
if (this._modal) this.setModalSize();
|
|
2208
|
+
return this;
|
|
1392
2209
|
}
|
|
1393
2210
|
resizeBodySync(width, height) {
|
|
1394
|
-
const
|
|
1395
|
-
|
|
2211
|
+
const header = this._modalHeader.node();
|
|
2212
|
+
const headerRect = header.getBoundingClientRect();
|
|
2213
|
+
this._modal.style("width", width + "px").style("height", height + headerRect.height + "px").style("min-width", width + "px").style("min-height", height + headerRect.height + "px");
|
|
2214
|
+
this._modalHeader.style("width", width + "px");
|
|
2215
|
+
this._modalBody.style("width", width + "px").style("height", height + "px");
|
|
2216
|
+
return this.minWidth(width + "px").minHeight(height + headerRect.height + "px").resize({
|
|
1396
2217
|
height: height + headerRect.height,
|
|
1397
2218
|
width
|
|
1398
2219
|
});
|
|
1399
2220
|
}
|
|
1400
2221
|
enter(domNode, element) {
|
|
1401
|
-
super.enter(domNode, element)
|
|
2222
|
+
super.enter(domNode, element);
|
|
2223
|
+
this._fade = element.append("div").classed("layout_Modal-fade", true).classed("layout_Modal-fadeClickable", this.enableClickFadeToClose()).classed("layout_Modal-fade-hidden", !this.showFade());
|
|
1402
2224
|
const header_h = this.titleFontSize() * 2;
|
|
1403
|
-
this._modal = element.append("div").classed("layout_Modal-content",
|
|
2225
|
+
this._modal = element.append("div").classed("layout_Modal-content", true);
|
|
2226
|
+
this._modalHeader = this._modal.append("div").classed("layout_Modal-header", true).style("color", this.titleFontColor()).style("font-size", this.titleFontSize() + "px").style("height", header_h + "px");
|
|
2227
|
+
this._modalBody = this._modal.append("div").classed("layout_Modal-body", true).style("height", `calc( 100% - ${header_h}px )`).style("overflow-x", this.overflowX()).style("overflow-y", this.overflowY());
|
|
2228
|
+
this._modalHeader.append("div").classed("layout_Modal-title", true).style("line-height", this.titleFontSize() + "px").style("top", this.titleFontSize() / 2 + "px").style("left", this.titleFontSize() / 2 + "px").text(this.formattedTitle());
|
|
2229
|
+
this._modalHeaderAnnotations = this._modalHeader.append("div").classed("layout_Modal-annotations", true);
|
|
2230
|
+
this._modalHeaderCloseButton = this._modalHeaderAnnotations.append("div").classed("layout_Modal-closeButton", true).html('<i class="fa fa-close"></i>');
|
|
2231
|
+
this._modalHeaderAnnotations.style("line-height", this.titleFontSize() + "px").style("right", this.titleFontSize() / 2 + "px").style("top", this.titleFontSize() / 2 + "px");
|
|
2232
|
+
this._modalHeaderCloseButton.on("click", () => {
|
|
1404
2233
|
this.closeModal();
|
|
1405
|
-
})
|
|
1406
|
-
|
|
2234
|
+
});
|
|
2235
|
+
this._fade.on("click", (n) => {
|
|
2236
|
+
if (this.enableClickFadeToClose()) {
|
|
2237
|
+
this.closeModal();
|
|
2238
|
+
}
|
|
1407
2239
|
});
|
|
1408
2240
|
}
|
|
1409
2241
|
update(domNode, element) {
|
|
1410
|
-
super.update(domNode, element)
|
|
2242
|
+
super.update(domNode, element);
|
|
2243
|
+
element.style("display", this.show() ? null : "none");
|
|
2244
|
+
this._fade.classed("layout_Modal-fade-hidden", !this.showFade());
|
|
2245
|
+
this._relativeTarget = this.getRelativeTarget();
|
|
2246
|
+
this.setModalSize();
|
|
1411
2247
|
const rect = this._relativeTarget.getBoundingClientRect();
|
|
1412
|
-
this.setFadePosition(rect)
|
|
2248
|
+
this.setFadePosition(rect);
|
|
2249
|
+
this.setModalPosition(rect);
|
|
2250
|
+
if (this.show()) {
|
|
2251
|
+
if (!this._widget.target()) {
|
|
2252
|
+
this._widget.target(this._modalBody.node());
|
|
2253
|
+
}
|
|
2254
|
+
this._widget.resize().render();
|
|
2255
|
+
} else {
|
|
2256
|
+
this._widget.target(null).render();
|
|
2257
|
+
}
|
|
1413
2258
|
}
|
|
1414
2259
|
exit(domNode, element) {
|
|
1415
|
-
|
|
2260
|
+
if (this._widget) {
|
|
2261
|
+
this._widget.target(null);
|
|
2262
|
+
}
|
|
2263
|
+
super.exit(domNode, element);
|
|
1416
2264
|
}
|
|
1417
2265
|
formattedTitle() {
|
|
1418
2266
|
const title = this.title_exists() ? this.title().trim() : "";
|
|
1419
|
-
|
|
2267
|
+
if (title.length > 0 && title.slice(0, 1) === "(" && title.slice(-1) === ")") {
|
|
2268
|
+
return title.slice(1, -1);
|
|
2269
|
+
}
|
|
2270
|
+
return this.title();
|
|
1420
2271
|
}
|
|
1421
|
-
}
|
|
2272
|
+
};
|
|
2273
|
+
__name(_Modal, "Modal");
|
|
2274
|
+
let Modal = _Modal;
|
|
1422
2275
|
Modal.prototype._class += " layout_Modal";
|
|
1423
2276
|
Modal.prototype.publish("title", null, "string", "title");
|
|
1424
2277
|
Modal.prototype.publish("widget", null, "widget", "widget");
|
|
1425
2278
|
Modal.prototype.publish("titleFontSize", 18, "number", "titleFontSize (in pixels)");
|
|
1426
2279
|
Modal.prototype.publish("titleFontColor", "#ffffff", "html-color", "titleFontColor");
|
|
1427
2280
|
Modal.prototype.publish("relativeTargetId", null, "string", "relativeTargetId");
|
|
1428
|
-
Modal.prototype.publish("show",
|
|
1429
|
-
Modal.prototype.publish("showFade",
|
|
1430
|
-
Modal.prototype.publish("enableClickFadeToClose",
|
|
2281
|
+
Modal.prototype.publish("show", true, "boolean", "show");
|
|
2282
|
+
Modal.prototype.publish("showFade", true, "boolean", "showFade");
|
|
2283
|
+
Modal.prototype.publish("enableClickFadeToClose", true, "boolean", "enableClickFadeToClose");
|
|
1431
2284
|
Modal.prototype.publish("minWidth", "400px", "string", "minWidth");
|
|
1432
2285
|
Modal.prototype.publish("minHeight", "400px", "string", "minHeight");
|
|
1433
2286
|
Modal.prototype.publish("maxWidth", "800px", "string", "maxWidth");
|
|
@@ -1438,12 +2291,12 @@ Modal.prototype.publish("fixedTop", null, "string", "fixedTop");
|
|
|
1438
2291
|
Modal.prototype.publish("fixedLeft", null, "string", "fixedLeft");
|
|
1439
2292
|
Modal.prototype.publish("overflowX", "hidden", "string", "overflowX");
|
|
1440
2293
|
Modal.prototype.publish("overflowY", "scroll", "string", "overflowY");
|
|
1441
|
-
class
|
|
2294
|
+
const _ChartPanel = class _ChartPanel extends Border2 {
|
|
1442
2295
|
constructor() {
|
|
1443
2296
|
super();
|
|
1444
|
-
__publicField(this, "_legend", new Legend(this).enableOverflow(
|
|
2297
|
+
__publicField(this, "_legend", new Legend(this).enableOverflow(true));
|
|
1445
2298
|
__publicField(this, "_progressBar", new ProgressBar());
|
|
1446
|
-
__publicField(this, "_autoScale",
|
|
2299
|
+
__publicField(this, "_autoScale", false);
|
|
1447
2300
|
__publicField(this, "_resolutions", {
|
|
1448
2301
|
tiny: { width: 100, height: 100 },
|
|
1449
2302
|
small: { width: 300, height: 300 }
|
|
@@ -1452,19 +2305,23 @@ class ChartPanel extends Border2 {
|
|
|
1452
2305
|
__publicField(this, "_highlight");
|
|
1453
2306
|
__publicField(this, "_scale");
|
|
1454
2307
|
__publicField(this, "_orig_size");
|
|
1455
|
-
__publicField(this, "_toggleInfo", new ToggleButton().faChar("fa-info-circle").tooltip(".Description").selected(
|
|
2308
|
+
__publicField(this, "_toggleInfo", new ToggleButton().faChar("fa-info-circle").tooltip(".Description").selected(false).on("enabled", () => {
|
|
2309
|
+
return this.description() !== "";
|
|
2310
|
+
}).on("click", () => {
|
|
1456
2311
|
if (this._toggleInfo.selected()) {
|
|
1457
|
-
this._modal.title(this.title()).widget(new Text().text(this.description())).show(
|
|
2312
|
+
this._modal.title(this.title()).widget(new Text().text(this.description())).show(true).render();
|
|
1458
2313
|
const origCloseFunc = this._modal._close;
|
|
1459
2314
|
this._modal._close = () => {
|
|
1460
|
-
this._toggleInfo.selected(
|
|
2315
|
+
this._toggleInfo.selected(false).render();
|
|
2316
|
+
this._modal._close = origCloseFunc;
|
|
1461
2317
|
};
|
|
1462
2318
|
}
|
|
1463
2319
|
}).on("mouseMove", () => {
|
|
1464
2320
|
}).on("mouseOut", () => {
|
|
1465
2321
|
}));
|
|
1466
2322
|
__publicField(this, "_toggleData", new ToggleButton().faChar("fa-table").tooltip("Data").on("click", () => {
|
|
1467
|
-
this.dataVisible(this._toggleData.selected())
|
|
2323
|
+
this.dataVisible(this._toggleData.selected());
|
|
2324
|
+
this.render();
|
|
1468
2325
|
}));
|
|
1469
2326
|
__publicField(this, "_buttonDownload", new Button().faChar("fa-download").tooltip("Download").on("click", () => {
|
|
1470
2327
|
this.downloadCSV();
|
|
@@ -1472,9 +2329,15 @@ class ChartPanel extends Border2 {
|
|
|
1472
2329
|
__publicField(this, "_buttonDownloadImage", new Button().faChar("fa-image").tooltip("Download Image").on("click", () => {
|
|
1473
2330
|
this.downloadPNG();
|
|
1474
2331
|
}));
|
|
1475
|
-
__publicField(this, "_toggleLegend", new ToggleButton().faChar("fa-list-ul").tooltip("Legend").selected(
|
|
2332
|
+
__publicField(this, "_toggleLegend", new ToggleButton().faChar("fa-list-ul").tooltip("Legend").selected(false).on("click", () => {
|
|
1476
2333
|
const selected = this._toggleLegend.selected();
|
|
1477
|
-
|
|
2334
|
+
if (this.legendPosition() === "bottom") {
|
|
2335
|
+
this.showBottom(selected);
|
|
2336
|
+
} else if (this.legendPosition() === "right") {
|
|
2337
|
+
this.showRight(selected);
|
|
2338
|
+
}
|
|
2339
|
+
this.legendVisible(selected);
|
|
2340
|
+
this.render();
|
|
1478
2341
|
}));
|
|
1479
2342
|
__publicField(this, "_spacer", new Spacer());
|
|
1480
2343
|
__publicField(this, "_titleBar", new TitleBar().buttons([this._toggleData, this._buttonDownload, this._buttonDownloadImage, this._spacer, this._toggleLegend]));
|
|
@@ -1491,25 +2354,45 @@ class ChartPanel extends Border2 {
|
|
|
1491
2354
|
this._tag = "div";
|
|
1492
2355
|
}
|
|
1493
2356
|
fields(_) {
|
|
1494
|
-
|
|
2357
|
+
if (!arguments.length) return super.fields();
|
|
2358
|
+
super.fields(_);
|
|
2359
|
+
this._legend.fields(_);
|
|
2360
|
+
this.refreshFields();
|
|
2361
|
+
return this;
|
|
1495
2362
|
}
|
|
1496
2363
|
refreshFields() {
|
|
1497
|
-
|
|
2364
|
+
this._widget.fields(this._legend.filteredFields());
|
|
2365
|
+
this._table.fields(this._legend.filteredFields());
|
|
2366
|
+
return this;
|
|
1498
2367
|
}
|
|
1499
2368
|
columns(_, asDefault) {
|
|
1500
|
-
|
|
2369
|
+
if (!arguments.length) return super.columns();
|
|
2370
|
+
super.columns(_, asDefault);
|
|
2371
|
+
this._legend.columns(_, asDefault);
|
|
2372
|
+
this.refreshColumns();
|
|
2373
|
+
return this;
|
|
1501
2374
|
}
|
|
1502
2375
|
refreshColumns() {
|
|
1503
|
-
|
|
2376
|
+
this._widget.columns(this._legend.filteredColumns());
|
|
2377
|
+
this._table.columns(this._legend.filteredColumns());
|
|
2378
|
+
return this;
|
|
1504
2379
|
}
|
|
1505
2380
|
data(_) {
|
|
1506
|
-
|
|
2381
|
+
if (!arguments.length) return super.data();
|
|
2382
|
+
super.data(_);
|
|
2383
|
+
this._legend.data(_);
|
|
2384
|
+
this.refreshData();
|
|
2385
|
+
return this;
|
|
1507
2386
|
}
|
|
1508
2387
|
refreshData() {
|
|
1509
|
-
|
|
2388
|
+
this._widget.data(this._legend.filteredData());
|
|
2389
|
+
this._table.data(this._legend.filteredData());
|
|
2390
|
+
return this;
|
|
1510
2391
|
}
|
|
1511
2392
|
highlight(_) {
|
|
1512
|
-
|
|
2393
|
+
if (!arguments.length) return this._highlight;
|
|
2394
|
+
this._highlight = _;
|
|
2395
|
+
return this;
|
|
1513
2396
|
}
|
|
1514
2397
|
startProgress() {
|
|
1515
2398
|
this._progressBar.start();
|
|
@@ -1518,56 +2401,125 @@ class ChartPanel extends Border2 {
|
|
|
1518
2401
|
this._progressBar.finish();
|
|
1519
2402
|
}
|
|
1520
2403
|
buttons(_) {
|
|
1521
|
-
|
|
2404
|
+
if (!arguments.length) return this._titleBar.buttons();
|
|
2405
|
+
this._titleBar.buttons(_);
|
|
2406
|
+
return this;
|
|
1522
2407
|
}
|
|
1523
2408
|
downloadCSV() {
|
|
1524
|
-
const namePrefix = this.downloadTitle() ? this.downloadTitle() : this.title() ? this.title() : "data"
|
|
1525
|
-
|
|
2409
|
+
const namePrefix = this.downloadTitle() ? this.downloadTitle() : this.title() ? this.title() : "data";
|
|
2410
|
+
const nameSuffix = this.downloadTimestampSuffix() ? "_" + Utility.timestamp() : "";
|
|
2411
|
+
Utility.downloadString("CSV", this._widget.export("CSV"), namePrefix + nameSuffix);
|
|
2412
|
+
return this;
|
|
1526
2413
|
}
|
|
1527
2414
|
downloadPNG() {
|
|
1528
2415
|
const widget = this.widget();
|
|
1529
|
-
|
|
2416
|
+
if (widget instanceof SVGWidget) {
|
|
2417
|
+
if (!this.legendVisible()) {
|
|
2418
|
+
widget.downloadPNG(this.title());
|
|
2419
|
+
} else {
|
|
2420
|
+
widget.downloadPNG(this.title(), void 0, this._legend);
|
|
2421
|
+
}
|
|
2422
|
+
}
|
|
2423
|
+
return this;
|
|
1530
2424
|
}
|
|
1531
2425
|
highlightColumn(column) {
|
|
1532
2426
|
if (column) {
|
|
1533
2427
|
const cssTag = `series-${this.cssTag(column)}`;
|
|
1534
2428
|
this._centerWA.element().selectAll(".series").each(function() {
|
|
1535
|
-
const element = select(this)
|
|
2429
|
+
const element = select(this);
|
|
2430
|
+
const highlight = element.classed(cssTag);
|
|
1536
2431
|
element.classed("highlight", highlight).classed("lowlight", !highlight);
|
|
1537
2432
|
});
|
|
1538
|
-
} else
|
|
1539
|
-
this._centerWA.element().selectAll(".series").classed("highlight",
|
|
2433
|
+
} else {
|
|
2434
|
+
this._centerWA.element().selectAll(".series").classed("highlight", false).classed("lowlight", false);
|
|
2435
|
+
}
|
|
1540
2436
|
return this;
|
|
1541
2437
|
}
|
|
1542
2438
|
getResponsiveMode() {
|
|
1543
|
-
|
|
2439
|
+
if (!this.enableAutoscaling()) return "none";
|
|
2440
|
+
if (!this._autoScale) return "regular";
|
|
2441
|
+
if (this.size().width <= this._resolutions.tiny.width || this.size().height <= this._resolutions.tiny.height) {
|
|
2442
|
+
return "tiny";
|
|
2443
|
+
} else if (this.size().width <= this._resolutions.small.width || this.size().height <= this._resolutions.small.height) {
|
|
2444
|
+
return "small";
|
|
2445
|
+
}
|
|
2446
|
+
return "regular";
|
|
1544
2447
|
}
|
|
1545
2448
|
setOrigSize() {
|
|
1546
2449
|
this._orig_size = JSON.parse(JSON.stringify(this.size()));
|
|
1547
2450
|
}
|
|
1548
2451
|
enter(domNode, element) {
|
|
1549
|
-
super.enter(domNode, element)
|
|
2452
|
+
super.enter(domNode, element);
|
|
2453
|
+
this._modal.target(this.target()).relativeTargetId(this.id());
|
|
2454
|
+
this.top(this._titleBar);
|
|
2455
|
+
this.center(this._carousel);
|
|
2456
|
+
this._legend.targetWidget(this._widget).orientation("vertical").title("").visible(false);
|
|
2457
|
+
this._progressBar.enter(domNode, element);
|
|
2458
|
+
this.setOrigSize();
|
|
1550
2459
|
}
|
|
1551
2460
|
preUpdateTiny(element) {
|
|
1552
2461
|
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "none");
|
|
1553
2462
|
}
|
|
1554
2463
|
preUpdateSmall(element) {
|
|
1555
|
-
const scale_x = this._orig_size.width / this._resolutions.small.width
|
|
2464
|
+
const scale_x = this._orig_size.width / this._resolutions.small.width;
|
|
2465
|
+
const scale_y = this._orig_size.height / this._resolutions.small.height;
|
|
1556
2466
|
this._scale = Math.min(scale_x, scale_y);
|
|
1557
2467
|
const x_is_smaller = this._scale === scale_x;
|
|
1558
2468
|
this.size({
|
|
1559
2469
|
width: x_is_smaller ? this._resolutions.small.width : this._orig_size.width * (1 / this._scale),
|
|
1560
|
-
height: x_is_smaller ? this._orig_size.height * (1 / this._scale)
|
|
1561
|
-
})
|
|
2470
|
+
height: !x_is_smaller ? this._resolutions.small.height : this._orig_size.height * (1 / this._scale)
|
|
2471
|
+
});
|
|
2472
|
+
element.select("div.title-icon").style("position", "static");
|
|
2473
|
+
element.selectAll("lhs").style("display", "none");
|
|
2474
|
+
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "");
|
|
2475
|
+
element.selectAll("div.data-count").style("visibility", "hidden");
|
|
2476
|
+
element.style("transform", `scale(${this._scale})`);
|
|
1562
2477
|
}
|
|
1563
2478
|
preUpdateRegular(element) {
|
|
1564
|
-
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "")
|
|
2479
|
+
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "");
|
|
2480
|
+
element.selectAll("div.data-count").style("visibility", "hidden");
|
|
2481
|
+
element.select("div.title-icon").style("position", "static");
|
|
2482
|
+
element.style("transform", "translate(0px,0px) scale(1)");
|
|
1565
2483
|
}
|
|
1566
2484
|
update(domNode, element) {
|
|
1567
2485
|
super.update(domNode, element);
|
|
1568
2486
|
}
|
|
1569
2487
|
preUpdate(domNode, element) {
|
|
1570
|
-
|
|
2488
|
+
super.preUpdate(domNode, element);
|
|
2489
|
+
if (this._prevLegendPosition !== this.legendPosition()) {
|
|
2490
|
+
if (this._legend.target() !== null) this._legend.target(null);
|
|
2491
|
+
if (this._prevLegendPosition !== void 0) {
|
|
2492
|
+
this.swap(this._prevLegendPosition, this.legendPosition());
|
|
2493
|
+
} else {
|
|
2494
|
+
this[this.legendPosition()](this._legend);
|
|
2495
|
+
}
|
|
2496
|
+
if (this.legendPosition() === "right") {
|
|
2497
|
+
this.rightOverflowX("hidden");
|
|
2498
|
+
this.rightOverflowY("auto");
|
|
2499
|
+
this.bottomOverflowX("visible");
|
|
2500
|
+
this.bottomOverflowY("visible");
|
|
2501
|
+
} else {
|
|
2502
|
+
this.rightOverflowX("visible");
|
|
2503
|
+
this.rightOverflowY("visible");
|
|
2504
|
+
this.bottomOverflowX("auto");
|
|
2505
|
+
this.bottomOverflowY("hidden");
|
|
2506
|
+
}
|
|
2507
|
+
this._prevLegendPosition = this.legendPosition();
|
|
2508
|
+
}
|
|
2509
|
+
if (this._prevdataVisible !== this.dataVisible()) {
|
|
2510
|
+
this._prevdataVisible = this.dataVisible();
|
|
2511
|
+
this._toggleData.selected(this._prevdataVisible);
|
|
2512
|
+
this._legend.visible(this._prevlegendVisible && !this._prevdataVisible);
|
|
2513
|
+
this._carousel.active(this._prevdataVisible ? 1 : 0);
|
|
2514
|
+
}
|
|
2515
|
+
if (this._prevlegendVisible !== this.legendVisible()) {
|
|
2516
|
+
this._prevlegendVisible = this.legendVisible();
|
|
2517
|
+
this._toggleLegend.selected(this._prevlegendVisible);
|
|
2518
|
+
this._legend.visible(this._prevlegendVisible && !this._prevdataVisible);
|
|
2519
|
+
}
|
|
2520
|
+
this._legend.orientation(this.legendPosition() === "bottom" ? "horizontal" : "vertical");
|
|
2521
|
+
this.showLeft(!this.left());
|
|
2522
|
+
switch (this.getResponsiveMode()) {
|
|
1571
2523
|
case "tiny":
|
|
1572
2524
|
this.preUpdateTiny(element);
|
|
1573
2525
|
break;
|
|
@@ -1578,16 +2530,28 @@ class ChartPanel extends Border2 {
|
|
|
1578
2530
|
this.preUpdateRegular(element);
|
|
1579
2531
|
break;
|
|
1580
2532
|
}
|
|
1581
|
-
const chart = this._widget.classID() === "composite_MultiChart" ? this._widget
|
|
1582
|
-
|
|
1583
|
-
|
|
2533
|
+
const chart = this._widget.classID() === "composite_MultiChart" ? this._widget["chart"]() : this._widget;
|
|
2534
|
+
this._legend.dataFamily(chart._dataFamily || "any");
|
|
2535
|
+
if (this._prevChartDataFamily !== this._legend.dataFamily()) {
|
|
2536
|
+
this._prevChartDataFamily = this._legend.dataFamily();
|
|
2537
|
+
switch (this._prevChartDataFamily) {
|
|
1584
2538
|
case "any":
|
|
1585
|
-
this._toggleLegend.selected(
|
|
2539
|
+
this._toggleLegend.selected(false);
|
|
2540
|
+
this._legend.visible(false);
|
|
1586
2541
|
break;
|
|
1587
2542
|
}
|
|
1588
|
-
|
|
2543
|
+
}
|
|
2544
|
+
element.style("box-shadow", this.highlight() ? `inset 0px 0px 0px ${this.highlightSize()}px ${this.highlightColor()}` : "none");
|
|
2545
|
+
if (this._hideLegendToggleList.indexOf(chart.classID()) !== -1) {
|
|
2546
|
+
this._spacer.visible(false);
|
|
2547
|
+
this._toggleLegend.visible(false);
|
|
2548
|
+
} else {
|
|
2549
|
+
this._spacer.visible(true);
|
|
2550
|
+
this._toggleLegend.visible(true);
|
|
2551
|
+
}
|
|
2552
|
+
if (this._prevChart !== chart) {
|
|
1589
2553
|
this._prevChart = chart;
|
|
1590
|
-
const widgetIconBar = chart ? chart
|
|
2554
|
+
const widgetIconBar = chart ? chart["_titleBar"] || chart["_iconBar"] : void 0;
|
|
1591
2555
|
if (widgetIconBar && widgetIconBar instanceof IconBar) {
|
|
1592
2556
|
this._prevButtons = this._prevButtons || [...this.buttons()];
|
|
1593
2557
|
const buttons = [
|
|
@@ -1595,14 +2559,24 @@ class ChartPanel extends Border2 {
|
|
|
1595
2559
|
new Spacer(),
|
|
1596
2560
|
...this._prevButtons
|
|
1597
2561
|
];
|
|
1598
|
-
widgetIconBar.buttons([]).render()
|
|
1599
|
-
|
|
2562
|
+
widgetIconBar.buttons([]).render();
|
|
2563
|
+
this.buttons(buttons);
|
|
2564
|
+
} else if (this._prevButtons) {
|
|
2565
|
+
this.buttons(this._prevButtons);
|
|
2566
|
+
}
|
|
1600
2567
|
}
|
|
1601
2568
|
const hiddenButtons = [];
|
|
1602
|
-
|
|
2569
|
+
if (!this.dataButtonVisible()) hiddenButtons.push(this._toggleData);
|
|
2570
|
+
if (!this.downloadButtonVisible()) hiddenButtons.push(this._buttonDownload);
|
|
2571
|
+
if (!this.downloadImageButtonVisible()) hiddenButtons.push(this._buttonDownloadImage);
|
|
2572
|
+
if (!this.legendButtonVisible()) hiddenButtons.push(this._toggleLegend);
|
|
2573
|
+
this._buttonDownloadImage.enabled(this.widget() instanceof SVGWidget);
|
|
2574
|
+
this._titleBar.hiddenButtons(hiddenButtons).visible(this.titleVisible());
|
|
2575
|
+
this.topOverlay(this.titleOverlay() || !this.titleVisible());
|
|
1603
2576
|
}
|
|
1604
2577
|
postUpdate(domNode, element) {
|
|
1605
|
-
|
|
2578
|
+
super.postUpdate(domNode, element);
|
|
2579
|
+
switch (this.getResponsiveMode()) {
|
|
1606
2580
|
case "tiny":
|
|
1607
2581
|
this.postUpdateTiny(element);
|
|
1608
2582
|
break;
|
|
@@ -1615,23 +2589,50 @@ class ChartPanel extends Border2 {
|
|
|
1615
2589
|
}
|
|
1616
2590
|
}
|
|
1617
2591
|
postUpdateTiny(element) {
|
|
1618
|
-
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "none")
|
|
1619
|
-
|
|
2592
|
+
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "none");
|
|
2593
|
+
element.selectAll("div.data-count").style("visibility", "visible").style("font-size", this.titleIconFontSize() / 3 + "px").style("line-height", this.titleIconFontSize() / 3 + "px").style("left", this.titleIconFontSize() + "px").text(this.data().length);
|
|
2594
|
+
element.style("transform", "translate(0px,0px) scale(1)");
|
|
2595
|
+
const iconDiv = element.selectAll("div.title-icon");
|
|
2596
|
+
const _node = iconDiv.node();
|
|
2597
|
+
const _container = element.node().parentElement;
|
|
2598
|
+
const containerRect = _container.getBoundingClientRect();
|
|
1620
2599
|
if (_node) {
|
|
1621
|
-
const rect = iconDiv.node().getBoundingClientRect()
|
|
1622
|
-
|
|
2600
|
+
const rect = iconDiv.node().getBoundingClientRect();
|
|
2601
|
+
const icon_top = containerRect.height / 2;
|
|
2602
|
+
iconDiv.style("position", "absolute").style("left", `calc(50% - ${rect.width / 2}px)`).style("top", `${icon_top - rect.height / 2}px`);
|
|
2603
|
+
element.selectAll("div.data-count").style("position", "absolute").style("left", `calc(50% + ${rect.width / 2}px)`).style("top", `${icon_top - rect.height / 2}px`);
|
|
1623
2604
|
}
|
|
1624
2605
|
}
|
|
1625
2606
|
postUpdateSmall(element) {
|
|
1626
|
-
element.selectAll("lhs").style("display", "none")
|
|
1627
|
-
|
|
2607
|
+
element.selectAll("lhs").style("display", "none");
|
|
2608
|
+
element.selectAll("div.title-icon").style("position", "static");
|
|
2609
|
+
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "");
|
|
2610
|
+
element.selectAll("div.data-count").style("visibility", "hidden");
|
|
2611
|
+
const rect = element.node().getBoundingClientRect();
|
|
2612
|
+
const parentRect = element.node().parentElement.getBoundingClientRect();
|
|
1628
2613
|
element.style("transform", `translate(${parentRect.x - rect.x}px, ${parentRect.y - rect.y}px) scale(${this._scale})`);
|
|
1629
2614
|
}
|
|
1630
2615
|
postUpdateRegular(element) {
|
|
1631
|
-
element.selectAll("div.title-icon").style("position", "static")
|
|
2616
|
+
element.selectAll("div.title-icon").style("position", "static");
|
|
2617
|
+
element.selectAll("div.body,div.title-text,div.icon-bar").style("display", "");
|
|
2618
|
+
element.selectAll("div.data-count").style("visibility", "hidden");
|
|
1632
2619
|
}
|
|
1633
2620
|
exit(domNode, element) {
|
|
1634
|
-
this._progressBar.exit(domNode, element)
|
|
2621
|
+
this._progressBar.exit(domNode, element);
|
|
2622
|
+
this.right(null);
|
|
2623
|
+
this._legend.target(null);
|
|
2624
|
+
this.center(null);
|
|
2625
|
+
this._carousel.target(null);
|
|
2626
|
+
this.top(null);
|
|
2627
|
+
this._titleBar.target(null);
|
|
2628
|
+
this._modal.target(null);
|
|
2629
|
+
delete this._prevChart;
|
|
2630
|
+
delete this._prevButtons;
|
|
2631
|
+
delete this._prevChartDataFamily;
|
|
2632
|
+
delete this._prevPos;
|
|
2633
|
+
delete this._prevdataVisible;
|
|
2634
|
+
delete this._prevlegendVisible;
|
|
2635
|
+
super.exit(domNode, element);
|
|
1635
2636
|
}
|
|
1636
2637
|
// Event Handlers ---
|
|
1637
2638
|
// Events ---
|
|
@@ -1640,23 +2641,25 @@ class ChartPanel extends Border2 {
|
|
|
1640
2641
|
dblclick(row, column, selected) {
|
|
1641
2642
|
}
|
|
1642
2643
|
vertex_click(row, col, sel, more) {
|
|
1643
|
-
more && more.vertex;
|
|
2644
|
+
if (more && more.vertex) ;
|
|
1644
2645
|
}
|
|
1645
2646
|
vertex_dblclick(row, col, sel, more) {
|
|
1646
|
-
more && more.vertex;
|
|
2647
|
+
if (more && more.vertex) ;
|
|
1647
2648
|
}
|
|
1648
2649
|
edge_click(row, col, sel, more) {
|
|
1649
|
-
more && more.edge;
|
|
2650
|
+
if (more && more.edge) ;
|
|
1650
2651
|
}
|
|
1651
2652
|
edge_dblclick(row, col, sel, more) {
|
|
1652
|
-
more && more.edge;
|
|
2653
|
+
if (more && more.edge) ;
|
|
1653
2654
|
}
|
|
1654
|
-
}
|
|
2655
|
+
};
|
|
2656
|
+
__name(_ChartPanel, "ChartPanel");
|
|
2657
|
+
let ChartPanel = _ChartPanel;
|
|
1655
2658
|
ChartPanel.prototype._class += " layout_ChartPanel";
|
|
1656
2659
|
ChartPanel.prototype.publishReset();
|
|
1657
2660
|
ChartPanel.prototype.publishProxy("title", "_titleBar");
|
|
1658
|
-
ChartPanel.prototype.publish("titleVisible",
|
|
1659
|
-
ChartPanel.prototype.publish("titleOverlay",
|
|
2661
|
+
ChartPanel.prototype.publish("titleVisible", true, "boolean");
|
|
2662
|
+
ChartPanel.prototype.publish("titleOverlay", false, "boolean");
|
|
1660
2663
|
ChartPanel.prototype.publishProxy("titleIcon", "_titleBar");
|
|
1661
2664
|
ChartPanel.prototype.publishProxy("titleIconFont", "_titleBar");
|
|
1662
2665
|
ChartPanel.prototype.publishProxy("titleFont", "_titleBar");
|
|
@@ -1665,14 +2668,14 @@ ChartPanel.prototype.publishProxy("titleFontSize", "_titleBar");
|
|
|
1665
2668
|
ChartPanel.prototype.publishProxy("description", "_titleBar");
|
|
1666
2669
|
ChartPanel.prototype.publishProxy("descriptionFont", "_titleBar");
|
|
1667
2670
|
ChartPanel.prototype.publishProxy("descriptionFontSize", "_titleBar");
|
|
1668
|
-
ChartPanel.prototype.publish("dataVisible",
|
|
1669
|
-
ChartPanel.prototype.publish("dataButtonVisible",
|
|
1670
|
-
ChartPanel.prototype.publish("downloadButtonVisible",
|
|
1671
|
-
ChartPanel.prototype.publish("downloadImageButtonVisible",
|
|
2671
|
+
ChartPanel.prototype.publish("dataVisible", false, "boolean", "Show data table");
|
|
2672
|
+
ChartPanel.prototype.publish("dataButtonVisible", true, "boolean", "Show data table button");
|
|
2673
|
+
ChartPanel.prototype.publish("downloadButtonVisible", true, "boolean", "Show data download button");
|
|
2674
|
+
ChartPanel.prototype.publish("downloadImageButtonVisible", false, "boolean", "Show image download button");
|
|
1672
2675
|
ChartPanel.prototype.publish("downloadTitle", "", "string", "File name when downloaded");
|
|
1673
|
-
ChartPanel.prototype.publish("downloadTimestampSuffix",
|
|
1674
|
-
ChartPanel.prototype.publish("legendVisible",
|
|
1675
|
-
ChartPanel.prototype.publish("legendButtonVisible",
|
|
2676
|
+
ChartPanel.prototype.publish("downloadTimestampSuffix", true, "boolean", "Use timestamp as file name suffix");
|
|
2677
|
+
ChartPanel.prototype.publish("legendVisible", false, "boolean", "Show legend");
|
|
2678
|
+
ChartPanel.prototype.publish("legendButtonVisible", true, "boolean", "Show legend button");
|
|
1676
2679
|
ChartPanel.prototype.publish("legendPosition", "right", "set", "Position of legend", ["right", "bottom"]);
|
|
1677
2680
|
ChartPanel.prototype.publishProxy("legend_labelMaxWidth", "_legend", "labelMaxWidth");
|
|
1678
2681
|
ChartPanel.prototype.publishProxy("legend_showSeriesTotal", "_legend", "showSeriesTotal");
|
|
@@ -1681,8 +2684,8 @@ ChartPanel.prototype.publishProxy("legend_itemPadding", "_legend", "itemPadding"
|
|
|
1681
2684
|
ChartPanel.prototype.publishProxy("legend_shapeRadius", "_legend", "shapeRadius");
|
|
1682
2685
|
ChartPanel.prototype.publishProxy("legend_symbolType", "_legend", "symbolType");
|
|
1683
2686
|
ChartPanel.prototype.publishProxy("legend_labelAlign", "_legend", "labelAlign");
|
|
1684
|
-
ChartPanel.prototype.publish("widget", null, "widget", "Widget", void 0, { render:
|
|
1685
|
-
ChartPanel.prototype.publish("enableAutoscaling",
|
|
2687
|
+
ChartPanel.prototype.publish("widget", null, "widget", "Widget", void 0, { render: false });
|
|
2688
|
+
ChartPanel.prototype.publish("enableAutoscaling", false, "boolean");
|
|
1686
2689
|
ChartPanel.prototype.publish("highlightSize", 4, "number");
|
|
1687
2690
|
ChartPanel.prototype.publish("highlightColor", "#e67e22", "html-color");
|
|
1688
2691
|
ChartPanel.prototype.publishProxy("progress_halfLife", "_progressBar", "halfLife");
|
|
@@ -1695,42 +2698,53 @@ ChartPanel.prototype.publishProxy("progress_blurColor", "_progressBar", "blurCol
|
|
|
1695
2698
|
ChartPanel.prototype.publishProxy("progress_blurOpacity", "_progressBar", "blurOpacity");
|
|
1696
2699
|
ChartPanel.prototype.widget = function(_) {
|
|
1697
2700
|
if (!arguments.length) return this._widget;
|
|
1698
|
-
this._carousel.widgets([_, this._table])
|
|
1699
|
-
|
|
1700
|
-
|
|
2701
|
+
this._carousel.widgets([_, this._table]);
|
|
2702
|
+
this._widget = _;
|
|
2703
|
+
this._widget.fields(this._legend.filteredFields()).data(this._legend.filteredData());
|
|
2704
|
+
const context = this;
|
|
2705
|
+
const tmpAny = this._widget;
|
|
2706
|
+
tmpAny.click = function() {
|
|
1701
2707
|
context.click.apply(context, arguments);
|
|
1702
|
-
}
|
|
2708
|
+
};
|
|
2709
|
+
tmpAny.dblclick = function() {
|
|
1703
2710
|
context.dblclick.apply(context, arguments);
|
|
1704
|
-
}
|
|
2711
|
+
};
|
|
2712
|
+
tmpAny.vertex_click = function() {
|
|
1705
2713
|
context.vertex_click.apply(context, arguments);
|
|
1706
|
-
}
|
|
2714
|
+
};
|
|
2715
|
+
tmpAny.vertex_dblclick = function() {
|
|
1707
2716
|
context.vertex_dblclick.apply(context, arguments);
|
|
1708
|
-
}
|
|
2717
|
+
};
|
|
2718
|
+
tmpAny.edge_click = function() {
|
|
1709
2719
|
context.edge_click.apply(context, arguments);
|
|
1710
|
-
}
|
|
2720
|
+
};
|
|
2721
|
+
tmpAny.edge_dblclick = function() {
|
|
1711
2722
|
context.edge_dblclick.apply(context, arguments);
|
|
1712
|
-
}
|
|
2723
|
+
};
|
|
2724
|
+
return this;
|
|
1713
2725
|
};
|
|
1714
|
-
class
|
|
2726
|
+
const _FlexGrid = class _FlexGrid extends HTMLWidget {
|
|
1715
2727
|
constructor() {
|
|
1716
2728
|
super();
|
|
1717
2729
|
}
|
|
1718
2730
|
enter(domNode, element) {
|
|
1719
|
-
super.enter(domNode, element)
|
|
2731
|
+
super.enter(domNode, element);
|
|
2732
|
+
select(domNode.parentNode).style("height", "100%").style("width", "100%");
|
|
1720
2733
|
}
|
|
1721
2734
|
update(domNode, element) {
|
|
1722
2735
|
super.update(domNode, element);
|
|
1723
|
-
const context = this
|
|
2736
|
+
const context = this;
|
|
2737
|
+
const cachedSizes = [];
|
|
1724
2738
|
this.updateFlexParent(element);
|
|
1725
2739
|
const listItems = element.selectAll(".FlexGrid-list-item").data(this.widgets(), (w) => w.id());
|
|
1726
|
-
listItems.enter().append("div").classed("FlexGrid-list-item",
|
|
2740
|
+
listItems.enter().append("div").classed("FlexGrid-list-item", true).each(function(w) {
|
|
1727
2741
|
w.target(this);
|
|
1728
2742
|
}).merge(listItems).style("min-height", this.itemMinHeight() + "px").style("min-width", this.itemMinWidth() + "px").style("flex-basis", (n, i) => {
|
|
1729
2743
|
const flexBasis = this.widgetsFlexBasis()[i];
|
|
1730
|
-
return typeof flexBasis
|
|
2744
|
+
return typeof flexBasis !== "undefined" ? flexBasis : this.flexBasis();
|
|
1731
2745
|
}).style("flex-grow", (n, i) => {
|
|
1732
2746
|
const flexGrow = this.widgetsFlexGrow()[i];
|
|
1733
|
-
return typeof flexGrow
|
|
2747
|
+
return typeof flexGrow !== "undefined" ? flexGrow : this.flexGrow();
|
|
1734
2748
|
}).style("border-width", this.borderWidth() + "px").style("border-color", this.itemBorderColor()).each(function() {
|
|
1735
2749
|
this.firstChild.style.display = "none";
|
|
1736
2750
|
}).each(function() {
|
|
@@ -1740,27 +2754,41 @@ class FlexGrid extends HTMLWidget {
|
|
|
1740
2754
|
rect.height
|
|
1741
2755
|
]);
|
|
1742
2756
|
}).each(function(w, i) {
|
|
1743
|
-
this.firstChild.style.display = "block"
|
|
2757
|
+
this.firstChild.style.display = "block";
|
|
2758
|
+
w.resize({
|
|
1744
2759
|
width: cachedSizes[i][0] - 2 * context.borderWidth(),
|
|
1745
2760
|
height: cachedSizes[i][1] - 2 * context.borderWidth()
|
|
1746
2761
|
});
|
|
1747
|
-
})
|
|
2762
|
+
});
|
|
2763
|
+
listItems.exit().remove();
|
|
1748
2764
|
}
|
|
1749
2765
|
exit(domNode, element) {
|
|
1750
2766
|
super.exit(domNode, element);
|
|
1751
2767
|
}
|
|
1752
2768
|
updateFlexParent(element) {
|
|
1753
|
-
element.style("height", "100%").style("flex-direction", this.orientation() === "horizontal" ? "row" : "column").style("flex-wrap", this.flexWrap()).style("align-items", this.alignItems()).style("align-content", this.alignContent()).style("overflow-x", () =>
|
|
2769
|
+
element.style("height", "100%").style("flex-direction", this.orientation() === "horizontal" ? "row" : "column").style("flex-wrap", this.flexWrap()).style("align-items", this.alignItems()).style("align-content", this.alignContent()).style("overflow-x", () => {
|
|
2770
|
+
if (this.forceXScroll() || this.orientation() === "horizontal" && this.flexWrap() === "nowrap" && !this.disableScroll()) {
|
|
2771
|
+
return "scroll";
|
|
2772
|
+
}
|
|
2773
|
+
return "hidden";
|
|
2774
|
+
}).style("overflow-y", () => {
|
|
2775
|
+
if (this.forceYScroll() || this.orientation() === "vertical" && this.flexWrap() === "nowrap" && !this.disableScroll()) {
|
|
2776
|
+
return "scroll";
|
|
2777
|
+
}
|
|
2778
|
+
return "hidden";
|
|
2779
|
+
});
|
|
1754
2780
|
}
|
|
1755
|
-
}
|
|
2781
|
+
};
|
|
2782
|
+
__name(_FlexGrid, "FlexGrid");
|
|
2783
|
+
let FlexGrid = _FlexGrid;
|
|
1756
2784
|
FlexGrid.prototype._class += " layout_FlexGrid";
|
|
1757
2785
|
FlexGrid.prototype.publish("itemBorderColor", "transparent", "html-color", "Color of list item borders");
|
|
1758
2786
|
FlexGrid.prototype.publish("borderWidth", 0, "number", "Width of list item borders (pixels)");
|
|
1759
2787
|
FlexGrid.prototype.publish("orientation", "horizontal", "set", "Controls the flex-direction of the list items", ["horizontal", "vertical"]);
|
|
1760
2788
|
FlexGrid.prototype.publish("flexWrap", "wrap", "set", "Controls the line wrap when overflow occurs", ["nowrap", "wrap", "wrap-reverse"]);
|
|
1761
|
-
FlexGrid.prototype.publish("disableScroll",
|
|
1762
|
-
FlexGrid.prototype.publish("forceXScroll",
|
|
1763
|
-
FlexGrid.prototype.publish("forceYScroll",
|
|
2789
|
+
FlexGrid.prototype.publish("disableScroll", false, "boolean", "If false, scrollbar will show (when flexWrap is set to 'nowrap')", null, { disable: /* @__PURE__ */ __name((w) => w.flexWrap() !== "nowrap", "disable") });
|
|
2790
|
+
FlexGrid.prototype.publish("forceXScroll", false, "boolean", "If true, horzontal scrollbar will show");
|
|
2791
|
+
FlexGrid.prototype.publish("forceYScroll", false, "boolean", "If true, vertical scrollbar will show");
|
|
1764
2792
|
FlexGrid.prototype.publish("itemMinHeight", 64, "number", "Minimum height of a list item (pixels)");
|
|
1765
2793
|
FlexGrid.prototype.publish("itemMinWidth", 64, "number", "Minimum width of a list item (pixels)");
|
|
1766
2794
|
FlexGrid.prototype.publish("alignItems", "stretch", "set", "Controls normal alignment of items", ["flex-start", "center", "flex-end", "stretch"]);
|
|
@@ -1770,30 +2798,45 @@ FlexGrid.prototype.publish("flexBasis", "10%", "string", "Default flex-basis sty
|
|
|
1770
2798
|
FlexGrid.prototype.publish("widgetsFlexGrow", [], "array", "Array of flex-grow values keyed on the widgets array");
|
|
1771
2799
|
FlexGrid.prototype.publish("widgetsFlexBasis", [], "array", "Array of flex-basis values keyed on the widgets array");
|
|
1772
2800
|
FlexGrid.prototype.publish("widgets", [], "widgetArray", "Array of widgets to be rendered as list items");
|
|
1773
|
-
var commonjsGlobal = typeof globalThis
|
|
2801
|
+
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
1774
2802
|
function getDefaultExportFromCjs(x) {
|
|
1775
|
-
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x
|
|
2803
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
|
|
1776
2804
|
}
|
|
2805
|
+
__name(getDefaultExportFromCjs, "getDefaultExportFromCjs");
|
|
1777
2806
|
var gridList$1 = { exports: {} };
|
|
1778
2807
|
(function(module, exports) {
|
|
1779
2808
|
(function(root, factory) {
|
|
1780
|
-
|
|
2809
|
+
{
|
|
2810
|
+
module.exports = factory();
|
|
2811
|
+
}
|
|
1781
2812
|
})(commonjsGlobal, function() {
|
|
1782
|
-
var GridList2 = function(items, options) {
|
|
2813
|
+
var GridList2 = /* @__PURE__ */ __name(function(items, options) {
|
|
1783
2814
|
this._options = options;
|
|
1784
|
-
for (var k2 in this.defaults)
|
|
1785
|
-
this._options.hasOwnProperty(k2)
|
|
1786
|
-
|
|
1787
|
-
|
|
2815
|
+
for (var k2 in this.defaults) {
|
|
2816
|
+
if (!this._options.hasOwnProperty(k2)) {
|
|
2817
|
+
this._options[k2] = this.defaults[k2];
|
|
2818
|
+
}
|
|
2819
|
+
}
|
|
2820
|
+
this.items = items;
|
|
2821
|
+
this._adjustSizeOfItems();
|
|
2822
|
+
this.generateGrid();
|
|
2823
|
+
}, "GridList");
|
|
1788
2824
|
GridList2.cloneItems = function(items, _items) {
|
|
1789
2825
|
var i, k2;
|
|
1790
|
-
|
|
1791
|
-
_items
|
|
1792
|
-
|
|
2826
|
+
if (_items === void 0) {
|
|
2827
|
+
_items = [];
|
|
2828
|
+
}
|
|
2829
|
+
for (i = 0; i < items.length; i++) {
|
|
2830
|
+
if (!_items[i]) {
|
|
2831
|
+
_items[i] = {};
|
|
2832
|
+
}
|
|
2833
|
+
for (k2 in items[i]) {
|
|
1793
2834
|
_items[i][k2] = items[i][k2];
|
|
2835
|
+
}
|
|
1794
2836
|
}
|
|
1795
2837
|
return _items;
|
|
1796
|
-
}
|
|
2838
|
+
};
|
|
2839
|
+
GridList2.prototype = {
|
|
1797
2840
|
defaults: {
|
|
1798
2841
|
lanes: 5,
|
|
1799
2842
|
direction: "horizontal"
|
|
@@ -1810,220 +2853,331 @@ var gridList$1 = { exports: {} };
|
|
|
1810
2853
|
* Warn: Does not work if items don't have a width or height specified
|
|
1811
2854
|
* besides their position in the grid.
|
|
1812
2855
|
*/
|
|
1813
|
-
toString: function() {
|
|
1814
|
-
var widthOfGrid = this.grid.length, output =
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
2856
|
+
toString: /* @__PURE__ */ __name(function() {
|
|
2857
|
+
var widthOfGrid = this.grid.length, output = "\n #|", border = "\n --", item, i, j;
|
|
2858
|
+
for (i = 0; i < widthOfGrid; i++) {
|
|
2859
|
+
output += " " + this._padNumber(i, " ");
|
|
2860
|
+
border += "---";
|
|
2861
|
+
}
|
|
2862
|
+
output += border;
|
|
2863
|
+
for (i = 0; i < this._options.lanes; i++) {
|
|
2864
|
+
output += "\n" + this._padNumber(i, " ") + "|";
|
|
2865
|
+
for (j = 0; j < widthOfGrid; j++) {
|
|
2866
|
+
output += " ";
|
|
2867
|
+
item = this.grid[j][i];
|
|
2868
|
+
output += item ? this._padNumber(this.items.indexOf(item), "0") : "--";
|
|
2869
|
+
}
|
|
2870
|
+
}
|
|
2871
|
+
output += "\n";
|
|
2872
|
+
return output;
|
|
2873
|
+
}, "toString"),
|
|
2874
|
+
generateGrid: /* @__PURE__ */ __name(function() {
|
|
1827
2875
|
var i;
|
|
1828
|
-
|
|
2876
|
+
this._resetGrid();
|
|
2877
|
+
for (i = 0; i < this.items.length; i++) {
|
|
1829
2878
|
this._markItemPositionToGrid(this.items[i]);
|
|
1830
|
-
|
|
1831
|
-
|
|
2879
|
+
}
|
|
2880
|
+
}, "generateGrid"),
|
|
2881
|
+
resizeGrid: /* @__PURE__ */ __name(function(lanes) {
|
|
1832
2882
|
var currentColumn = 0;
|
|
1833
|
-
this._options.lanes = lanes
|
|
2883
|
+
this._options.lanes = lanes;
|
|
2884
|
+
this._adjustSizeOfItems();
|
|
2885
|
+
this._sortItemsByPosition();
|
|
2886
|
+
this._resetGrid();
|
|
1834
2887
|
for (var i = 0; i < this.items.length; i++) {
|
|
1835
2888
|
var item = this.items[i], position = this._getItemPosition(item);
|
|
1836
2889
|
this._updateItemPosition(
|
|
1837
2890
|
item,
|
|
1838
2891
|
this.findPositionForItem(item, { x: currentColumn, y: 0 })
|
|
1839
|
-
)
|
|
2892
|
+
);
|
|
2893
|
+
currentColumn = Math.max(currentColumn, position.x);
|
|
1840
2894
|
}
|
|
1841
2895
|
this._pullItemsToLeft();
|
|
1842
|
-
},
|
|
1843
|
-
findPositionForItem: function(item, start, fixedRow) {
|
|
2896
|
+
}, "resizeGrid"),
|
|
2897
|
+
findPositionForItem: /* @__PURE__ */ __name(function(item, start, fixedRow) {
|
|
1844
2898
|
var x, y, position;
|
|
1845
|
-
for (x = start.x; x < this.grid.length; x++)
|
|
2899
|
+
for (x = start.x; x < this.grid.length; x++) {
|
|
1846
2900
|
if (fixedRow !== void 0) {
|
|
1847
|
-
|
|
2901
|
+
position = [x, fixedRow];
|
|
2902
|
+
if (this._itemFitsAtPosition(item, position)) {
|
|
1848
2903
|
return position;
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
2904
|
+
}
|
|
2905
|
+
} else {
|
|
2906
|
+
for (y = start.y; y < this._options.lanes; y++) {
|
|
2907
|
+
position = [x, y];
|
|
2908
|
+
if (this._itemFitsAtPosition(item, position)) {
|
|
1852
2909
|
return position;
|
|
2910
|
+
}
|
|
2911
|
+
}
|
|
2912
|
+
}
|
|
2913
|
+
}
|
|
1853
2914
|
var newCol = this.grid.length, newRow = 0;
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
2915
|
+
if (fixedRow !== void 0 && this._itemFitsAtPosition(item, [newCol, fixedRow])) {
|
|
2916
|
+
newRow = fixedRow;
|
|
2917
|
+
}
|
|
2918
|
+
return [newCol, newRow];
|
|
2919
|
+
}, "findPositionForItem"),
|
|
2920
|
+
moveItemToPosition: /* @__PURE__ */ __name(function(item, newPosition) {
|
|
1857
2921
|
var position = this._getItemPosition({
|
|
1858
2922
|
x: newPosition[0],
|
|
1859
2923
|
y: newPosition[1],
|
|
1860
2924
|
w: item.w,
|
|
1861
2925
|
h: item.h
|
|
1862
2926
|
});
|
|
1863
|
-
this._updateItemPosition(item, [position.x, position.y])
|
|
1864
|
-
|
|
1865
|
-
|
|
2927
|
+
this._updateItemPosition(item, [position.x, position.y]);
|
|
2928
|
+
this._resolveCollisions(item);
|
|
2929
|
+
}, "moveItemToPosition"),
|
|
2930
|
+
resizeItem: /* @__PURE__ */ __name(function(item, size) {
|
|
1866
2931
|
var width = size.w || item.w, height = size.h || item.h;
|
|
1867
|
-
this._updateItemSize(item, width, height)
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
2932
|
+
this._updateItemSize(item, width, height);
|
|
2933
|
+
this._resolveCollisions(item);
|
|
2934
|
+
this._pullItemsToLeft();
|
|
2935
|
+
}, "resizeItem"),
|
|
2936
|
+
getChangedItems: /* @__PURE__ */ __name(function(initialItems, idAttribute) {
|
|
2937
|
+
var changedItems = [];
|
|
2938
|
+
for (var i = 0; i < initialItems.length; i++) {
|
|
1871
2939
|
var item = this._getItemByAttribute(
|
|
1872
2940
|
idAttribute,
|
|
1873
2941
|
initialItems[i][idAttribute]
|
|
1874
2942
|
);
|
|
1875
|
-
(item.x !== initialItems[i].x || item.y !== initialItems[i].y || item.w !== initialItems[i].w || item.h !== initialItems[i].h)
|
|
2943
|
+
if (item.x !== initialItems[i].x || item.y !== initialItems[i].y || item.w !== initialItems[i].w || item.h !== initialItems[i].h) {
|
|
2944
|
+
changedItems.push(item);
|
|
2945
|
+
}
|
|
1876
2946
|
}
|
|
1877
2947
|
return changedItems;
|
|
1878
|
-
},
|
|
1879
|
-
_sortItemsByPosition: function() {
|
|
2948
|
+
}, "getChangedItems"),
|
|
2949
|
+
_sortItemsByPosition: /* @__PURE__ */ __name(function() {
|
|
1880
2950
|
this.items.sort((function(item1, item2) {
|
|
1881
2951
|
var position1 = this._getItemPosition(item1), position2 = this._getItemPosition(item2);
|
|
1882
|
-
|
|
2952
|
+
if (position1.x != position2.x) {
|
|
2953
|
+
return position1.x - position2.x;
|
|
2954
|
+
}
|
|
2955
|
+
if (position1.y != position2.y) {
|
|
2956
|
+
return position1.y - position2.y;
|
|
2957
|
+
}
|
|
2958
|
+
return 0;
|
|
1883
2959
|
}).bind(this));
|
|
1884
|
-
},
|
|
1885
|
-
_adjustSizeOfItems: function() {
|
|
2960
|
+
}, "_sortItemsByPosition"),
|
|
2961
|
+
_adjustSizeOfItems: /* @__PURE__ */ __name(function() {
|
|
1886
2962
|
for (var i = 0; i < this.items.length; i++) {
|
|
1887
2963
|
var item = this.items[i];
|
|
1888
|
-
|
|
2964
|
+
if (item.autoSize === void 0) {
|
|
2965
|
+
item.autoSize = item.w === 0 || item.h === 0;
|
|
2966
|
+
}
|
|
2967
|
+
if (item.autoSize) {
|
|
2968
|
+
if (this._options.direction === "horizontal") {
|
|
2969
|
+
item.h = this._options.lanes;
|
|
2970
|
+
} else {
|
|
2971
|
+
item.w = this._options.lanes;
|
|
2972
|
+
}
|
|
2973
|
+
}
|
|
1889
2974
|
}
|
|
1890
|
-
},
|
|
1891
|
-
_resetGrid: function() {
|
|
2975
|
+
}, "_adjustSizeOfItems"),
|
|
2976
|
+
_resetGrid: /* @__PURE__ */ __name(function() {
|
|
1892
2977
|
this.grid = [];
|
|
1893
|
-
},
|
|
1894
|
-
_itemFitsAtPosition: function(item, newPosition) {
|
|
2978
|
+
}, "_resetGrid"),
|
|
2979
|
+
_itemFitsAtPosition: /* @__PURE__ */ __name(function(item, newPosition) {
|
|
1895
2980
|
var position = this._getItemPosition(item), x, y;
|
|
1896
|
-
if (newPosition[0] < 0 || newPosition[1] < 0
|
|
1897
|
-
return
|
|
2981
|
+
if (newPosition[0] < 0 || newPosition[1] < 0) {
|
|
2982
|
+
return false;
|
|
2983
|
+
}
|
|
2984
|
+
if (newPosition[1] + position.h > this._options.lanes) {
|
|
2985
|
+
return false;
|
|
2986
|
+
}
|
|
1898
2987
|
for (x = newPosition[0]; x < newPosition[0] + position.w; x++) {
|
|
1899
2988
|
var col = this.grid[x];
|
|
1900
|
-
if (col) {
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
2989
|
+
if (!col) {
|
|
2990
|
+
continue;
|
|
2991
|
+
}
|
|
2992
|
+
for (y = newPosition[1]; y < newPosition[1] + position.h; y++) {
|
|
2993
|
+
if (col[y] && col[y] !== item) {
|
|
2994
|
+
return false;
|
|
2995
|
+
}
|
|
1904
2996
|
}
|
|
1905
2997
|
}
|
|
1906
|
-
return
|
|
1907
|
-
},
|
|
1908
|
-
_updateItemPosition: function(item, position) {
|
|
1909
|
-
item.x !== null && item.y !== null
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
2998
|
+
return true;
|
|
2999
|
+
}, "_itemFitsAtPosition"),
|
|
3000
|
+
_updateItemPosition: /* @__PURE__ */ __name(function(item, position) {
|
|
3001
|
+
if (item.x !== null && item.y !== null) {
|
|
3002
|
+
this._deleteItemPositionFromGrid(item);
|
|
3003
|
+
}
|
|
3004
|
+
this._setItemPosition(item, position);
|
|
3005
|
+
this._markItemPositionToGrid(item);
|
|
3006
|
+
}, "_updateItemPosition"),
|
|
3007
|
+
_updateItemSize: /* @__PURE__ */ __name(function(item, width, height) {
|
|
3008
|
+
if (item.x !== null && item.y !== null) {
|
|
3009
|
+
this._deleteItemPositionFromGrid(item);
|
|
3010
|
+
}
|
|
3011
|
+
item.w = width;
|
|
3012
|
+
item.h = height;
|
|
3013
|
+
this._markItemPositionToGrid(item);
|
|
3014
|
+
}, "_updateItemSize"),
|
|
3015
|
+
_markItemPositionToGrid: /* @__PURE__ */ __name(function(item) {
|
|
1915
3016
|
var position = this._getItemPosition(item), x, y;
|
|
1916
|
-
|
|
1917
|
-
|
|
3017
|
+
this._ensureColumns(position.x + position.w);
|
|
3018
|
+
for (x = position.x; x < position.x + position.w; x++) {
|
|
3019
|
+
for (y = position.y; y < position.y + position.h; y++) {
|
|
1918
3020
|
this.grid[x][y] = item;
|
|
1919
|
-
|
|
1920
|
-
|
|
3021
|
+
}
|
|
3022
|
+
}
|
|
3023
|
+
}, "_markItemPositionToGrid"),
|
|
3024
|
+
_deleteItemPositionFromGrid: /* @__PURE__ */ __name(function(item) {
|
|
1921
3025
|
var position = this._getItemPosition(item), x, y;
|
|
1922
|
-
for (x = position.x; x < position.x + position.w; x++)
|
|
1923
|
-
if (this.grid[x])
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
3026
|
+
for (x = position.x; x < position.x + position.w; x++) {
|
|
3027
|
+
if (!this.grid[x]) {
|
|
3028
|
+
continue;
|
|
3029
|
+
}
|
|
3030
|
+
for (y = position.y; y < position.y + position.h; y++) {
|
|
3031
|
+
if (this.grid[x][y] == item) {
|
|
3032
|
+
this.grid[x][y] = null;
|
|
3033
|
+
}
|
|
3034
|
+
}
|
|
3035
|
+
}
|
|
3036
|
+
}, "_deleteItemPositionFromGrid"),
|
|
3037
|
+
_ensureColumns: /* @__PURE__ */ __name(function(N) {
|
|
1928
3038
|
var i;
|
|
1929
|
-
for (i = 0; i < N; i++)
|
|
1930
|
-
this.grid[i]
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
3039
|
+
for (i = 0; i < N; i++) {
|
|
3040
|
+
if (!this.grid[i]) {
|
|
3041
|
+
this.grid.push(new GridCol(this._options.lanes));
|
|
3042
|
+
}
|
|
3043
|
+
}
|
|
3044
|
+
}, "_ensureColumns"),
|
|
3045
|
+
_getItemsCollidingWithItem: /* @__PURE__ */ __name(function(item) {
|
|
3046
|
+
var collidingItems = [];
|
|
3047
|
+
for (var i = 0; i < this.items.length; i++) {
|
|
3048
|
+
if (item != this.items[i] && this._itemsAreColliding(item, this.items[i])) {
|
|
3049
|
+
collidingItems.push(i);
|
|
3050
|
+
}
|
|
3051
|
+
}
|
|
1935
3052
|
return collidingItems;
|
|
1936
|
-
},
|
|
1937
|
-
_itemsAreColliding: function(item1, item2) {
|
|
3053
|
+
}, "_getItemsCollidingWithItem"),
|
|
3054
|
+
_itemsAreColliding: /* @__PURE__ */ __name(function(item1, item2) {
|
|
1938
3055
|
var position1 = this._getItemPosition(item1), position2 = this._getItemPosition(item2);
|
|
1939
3056
|
return !(position2.x >= position1.x + position1.w || position2.x + position2.w <= position1.x || position2.y >= position1.y + position1.h || position2.y + position2.h <= position1.y);
|
|
1940
|
-
},
|
|
1941
|
-
_resolveCollisions: function(item) {
|
|
1942
|
-
this._tryToResolveCollisionsLocally(item)
|
|
1943
|
-
|
|
1944
|
-
|
|
3057
|
+
}, "_itemsAreColliding"),
|
|
3058
|
+
_resolveCollisions: /* @__PURE__ */ __name(function(item) {
|
|
3059
|
+
if (!this._tryToResolveCollisionsLocally(item)) {
|
|
3060
|
+
this._pullItemsToLeft(item);
|
|
3061
|
+
}
|
|
3062
|
+
this._pullItemsToLeft();
|
|
3063
|
+
}, "_resolveCollisions"),
|
|
3064
|
+
_tryToResolveCollisionsLocally: /* @__PURE__ */ __name(function(item) {
|
|
1945
3065
|
var collidingItems = this._getItemsCollidingWithItem(item);
|
|
1946
|
-
if (!collidingItems.length)
|
|
1947
|
-
return
|
|
3066
|
+
if (!collidingItems.length) {
|
|
3067
|
+
return true;
|
|
3068
|
+
}
|
|
1948
3069
|
var _gridList = new GridList2([], this._options), leftOfItem, rightOfItem, aboveOfItem, belowOfItem;
|
|
1949
|
-
GridList2.cloneItems(this.items, _gridList.items)
|
|
3070
|
+
GridList2.cloneItems(this.items, _gridList.items);
|
|
3071
|
+
_gridList.generateGrid();
|
|
1950
3072
|
for (var i = 0; i < collidingItems.length; i++) {
|
|
1951
|
-
var collidingItem = _gridList.items[collidingItems[i]], collidingPosition = this._getItemPosition(collidingItem)
|
|
1952
|
-
|
|
3073
|
+
var collidingItem = _gridList.items[collidingItems[i]], collidingPosition = this._getItemPosition(collidingItem);
|
|
3074
|
+
var position = this._getItemPosition(item);
|
|
3075
|
+
leftOfItem = [position.x - collidingPosition.w, collidingPosition.y];
|
|
3076
|
+
rightOfItem = [position.x + position.w, collidingPosition.y];
|
|
3077
|
+
aboveOfItem = [collidingPosition.x, position.y - collidingPosition.h];
|
|
3078
|
+
belowOfItem = [collidingPosition.x, position.y + position.h];
|
|
3079
|
+
if (_gridList._itemFitsAtPosition(collidingItem, leftOfItem)) {
|
|
1953
3080
|
_gridList._updateItemPosition(collidingItem, leftOfItem);
|
|
1954
|
-
else if (_gridList._itemFitsAtPosition(collidingItem, aboveOfItem))
|
|
3081
|
+
} else if (_gridList._itemFitsAtPosition(collidingItem, aboveOfItem)) {
|
|
1955
3082
|
_gridList._updateItemPosition(collidingItem, aboveOfItem);
|
|
1956
|
-
else if (_gridList._itemFitsAtPosition(collidingItem, belowOfItem))
|
|
3083
|
+
} else if (_gridList._itemFitsAtPosition(collidingItem, belowOfItem)) {
|
|
1957
3084
|
_gridList._updateItemPosition(collidingItem, belowOfItem);
|
|
1958
|
-
else if (_gridList._itemFitsAtPosition(collidingItem, rightOfItem))
|
|
3085
|
+
} else if (_gridList._itemFitsAtPosition(collidingItem, rightOfItem)) {
|
|
1959
3086
|
_gridList._updateItemPosition(collidingItem, rightOfItem);
|
|
1960
|
-
else
|
|
1961
|
-
return
|
|
3087
|
+
} else {
|
|
3088
|
+
return false;
|
|
3089
|
+
}
|
|
1962
3090
|
}
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
3091
|
+
GridList2.cloneItems(_gridList.items, this.items);
|
|
3092
|
+
this.generateGrid();
|
|
3093
|
+
return true;
|
|
3094
|
+
}, "_tryToResolveCollisionsLocally"),
|
|
3095
|
+
_pullItemsToLeft: /* @__PURE__ */ __name(function(fixedItem) {
|
|
3096
|
+
this._sortItemsByPosition();
|
|
3097
|
+
this._resetGrid();
|
|
3098
|
+
if (fixedItem) {
|
|
1967
3099
|
var fixedPosition = this._getItemPosition(fixedItem);
|
|
1968
3100
|
this._updateItemPosition(fixedItem, [fixedPosition.x, fixedPosition.y]);
|
|
1969
3101
|
}
|
|
1970
3102
|
for (var i = 0; i < this.items.length; i++) {
|
|
1971
3103
|
var item = this.items[i], position = this._getItemPosition(item);
|
|
1972
|
-
if (
|
|
1973
|
-
|
|
1974
|
-
item,
|
|
1975
|
-
{ x, y: 0 },
|
|
1976
|
-
position.y
|
|
1977
|
-
);
|
|
1978
|
-
this._updateItemPosition(item, newPosition);
|
|
3104
|
+
if (fixedItem && item == fixedItem) {
|
|
3105
|
+
continue;
|
|
1979
3106
|
}
|
|
3107
|
+
var x = this._findLeftMostPositionForItem(item), newPosition = this.findPositionForItem(
|
|
3108
|
+
item,
|
|
3109
|
+
{ x, y: 0 },
|
|
3110
|
+
position.y
|
|
3111
|
+
);
|
|
3112
|
+
this._updateItemPosition(item, newPosition);
|
|
1980
3113
|
}
|
|
1981
|
-
},
|
|
1982
|
-
_findLeftMostPositionForItem: function(item) {
|
|
1983
|
-
|
|
3114
|
+
}, "_pullItemsToLeft"),
|
|
3115
|
+
_findLeftMostPositionForItem: /* @__PURE__ */ __name(function(item) {
|
|
3116
|
+
var tail = 0, position = this._getItemPosition(item);
|
|
3117
|
+
for (var i = 0; i < this.grid.length; i++) {
|
|
1984
3118
|
for (var j = position.y; j < position.y + position.h; j++) {
|
|
1985
3119
|
var otherItem = this.grid[i][j];
|
|
1986
|
-
if (otherItem) {
|
|
1987
|
-
|
|
1988
|
-
|
|
3120
|
+
if (!otherItem) {
|
|
3121
|
+
continue;
|
|
3122
|
+
}
|
|
3123
|
+
var otherPosition = this._getItemPosition(otherItem);
|
|
3124
|
+
if (this.items.indexOf(otherItem) < this.items.indexOf(item)) {
|
|
3125
|
+
tail = otherPosition.x + otherPosition.w;
|
|
1989
3126
|
}
|
|
1990
3127
|
}
|
|
3128
|
+
}
|
|
1991
3129
|
return tail;
|
|
1992
|
-
},
|
|
1993
|
-
_getItemByAttribute: function(key, value) {
|
|
1994
|
-
for (var i = 0; i < this.items.length; i++)
|
|
1995
|
-
if (this.items[i][key] === value)
|
|
3130
|
+
}, "_findLeftMostPositionForItem"),
|
|
3131
|
+
_getItemByAttribute: /* @__PURE__ */ __name(function(key, value) {
|
|
3132
|
+
for (var i = 0; i < this.items.length; i++) {
|
|
3133
|
+
if (this.items[i][key] === value) {
|
|
1996
3134
|
return this.items[i];
|
|
3135
|
+
}
|
|
3136
|
+
}
|
|
1997
3137
|
return null;
|
|
1998
|
-
},
|
|
1999
|
-
_padNumber: function(nr, prefix) {
|
|
3138
|
+
}, "_getItemByAttribute"),
|
|
3139
|
+
_padNumber: /* @__PURE__ */ __name(function(nr, prefix) {
|
|
2000
3140
|
return nr >= 10 ? nr : prefix + nr;
|
|
2001
|
-
},
|
|
2002
|
-
_getItemPosition: function(item) {
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
3141
|
+
}, "_padNumber"),
|
|
3142
|
+
_getItemPosition: /* @__PURE__ */ __name(function(item) {
|
|
3143
|
+
if (this._options.direction === "horizontal") {
|
|
3144
|
+
return item;
|
|
3145
|
+
} else {
|
|
3146
|
+
return {
|
|
3147
|
+
x: item.y,
|
|
3148
|
+
y: item.x,
|
|
3149
|
+
w: item.h,
|
|
3150
|
+
h: item.w
|
|
3151
|
+
};
|
|
3152
|
+
}
|
|
3153
|
+
}, "_getItemPosition"),
|
|
3154
|
+
_setItemPosition: /* @__PURE__ */ __name(function(item, position) {
|
|
3155
|
+
if (this._options.direction === "horizontal") {
|
|
3156
|
+
item.x = position[0];
|
|
3157
|
+
item.y = position[1];
|
|
3158
|
+
} else {
|
|
3159
|
+
item.x = position[1];
|
|
3160
|
+
item.y = position[0];
|
|
3161
|
+
}
|
|
3162
|
+
}, "_setItemPosition")
|
|
2013
3163
|
};
|
|
2014
|
-
var GridCol = function(lanes) {
|
|
2015
|
-
for (var i = 0; i < lanes; i++)
|
|
3164
|
+
var GridCol = /* @__PURE__ */ __name(function(lanes) {
|
|
3165
|
+
for (var i = 0; i < lanes; i++) {
|
|
2016
3166
|
this.push(null);
|
|
2017
|
-
|
|
2018
|
-
|
|
3167
|
+
}
|
|
3168
|
+
}, "GridCol");
|
|
3169
|
+
GridCol.prototype = [];
|
|
3170
|
+
return GridList2;
|
|
2019
3171
|
});
|
|
2020
3172
|
})(gridList$1);
|
|
2021
3173
|
var gridListExports = gridList$1.exports;
|
|
2022
|
-
const gridList = /* @__PURE__ */ getDefaultExportFromCjs(gridListExports)
|
|
3174
|
+
const gridList = /* @__PURE__ */ getDefaultExportFromCjs(gridListExports);
|
|
3175
|
+
const _GridList = /* @__PURE__ */ _mergeNamespaces({
|
|
2023
3176
|
__proto__: null,
|
|
2024
3177
|
default: gridList
|
|
2025
|
-
}, [gridListExports])
|
|
2026
|
-
|
|
3178
|
+
}, [gridListExports]);
|
|
3179
|
+
const GridList = _GridList && gridList || _GridList;
|
|
3180
|
+
const _Grid = class _Grid extends HTMLWidget {
|
|
2027
3181
|
constructor() {
|
|
2028
3182
|
super();
|
|
2029
3183
|
__publicField(this, "divItems");
|
|
@@ -2039,31 +3193,51 @@ class Grid extends HTMLWidget {
|
|
|
2039
3193
|
__publicField(this, "_d3DragResize");
|
|
2040
3194
|
__publicField(this, "_selectionBag");
|
|
2041
3195
|
__publicField(this, "_scrollBarWidth");
|
|
2042
|
-
this._tag = "div"
|
|
3196
|
+
this._tag = "div";
|
|
3197
|
+
this._selectionBag = new Utility.Selection(this);
|
|
3198
|
+
this.content([]);
|
|
2043
3199
|
}
|
|
2044
3200
|
getDimensions() {
|
|
2045
3201
|
const size = { width: 0, height: 0 };
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
3202
|
+
this.content().forEach(function(cell) {
|
|
3203
|
+
if (size.width < cell.gridCol() + cell.gridColSpan()) {
|
|
3204
|
+
size.width = cell.gridCol() + cell.gridColSpan();
|
|
3205
|
+
}
|
|
3206
|
+
if (size.height < cell.gridRow() + cell.gridRowSpan()) {
|
|
3207
|
+
size.height = cell.gridRow() + cell.gridRowSpan();
|
|
3208
|
+
}
|
|
3209
|
+
}, this);
|
|
3210
|
+
return size;
|
|
2049
3211
|
}
|
|
2050
3212
|
clearContent(widget) {
|
|
2051
3213
|
this.content(this.content().filter(function(contentWidget) {
|
|
2052
|
-
if (!widget)
|
|
2053
|
-
|
|
3214
|
+
if (!widget) {
|
|
3215
|
+
contentWidget.target(null);
|
|
3216
|
+
return false;
|
|
3217
|
+
}
|
|
2054
3218
|
let w = contentWidget;
|
|
2055
|
-
|
|
2056
|
-
if (widget === w)
|
|
2057
|
-
|
|
3219
|
+
while (w) {
|
|
3220
|
+
if (widget === w) {
|
|
3221
|
+
contentWidget.target(null);
|
|
3222
|
+
return false;
|
|
3223
|
+
}
|
|
2058
3224
|
w = w.widget ? w.widget() : null;
|
|
2059
3225
|
}
|
|
2060
|
-
return
|
|
3226
|
+
return true;
|
|
2061
3227
|
}));
|
|
2062
3228
|
}
|
|
2063
3229
|
setContent(row, col, widget, title, rowSpan, colSpan) {
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
3230
|
+
rowSpan = rowSpan || 1;
|
|
3231
|
+
colSpan = colSpan || 1;
|
|
3232
|
+
title = title || "";
|
|
3233
|
+
this.content(this.content().filter(function(contentWidget) {
|
|
3234
|
+
if (contentWidget.gridRow() === row && contentWidget.gridCol() === col) {
|
|
3235
|
+
contentWidget.target(null);
|
|
3236
|
+
return false;
|
|
3237
|
+
}
|
|
3238
|
+
return true;
|
|
3239
|
+
}));
|
|
3240
|
+
if (widget) {
|
|
2067
3241
|
const cell = new Cell().gridRow(row).gridCol(col).widget(widget).title(title).gridRowSpan(rowSpan).gridColSpan(colSpan);
|
|
2068
3242
|
this.content().push(cell);
|
|
2069
3243
|
}
|
|
@@ -2071,26 +3245,44 @@ class Grid extends HTMLWidget {
|
|
|
2071
3245
|
}
|
|
2072
3246
|
sortedContent() {
|
|
2073
3247
|
return this.content().sort(function(l, r) {
|
|
2074
|
-
|
|
3248
|
+
if (l.gridRow() === r.gridRow()) {
|
|
3249
|
+
return l.gridCol() - r.gridCol();
|
|
3250
|
+
}
|
|
3251
|
+
return l.gridRow() - r.gridRow();
|
|
2075
3252
|
});
|
|
2076
3253
|
}
|
|
2077
3254
|
getCell(row, col) {
|
|
2078
3255
|
let retVal = null;
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
3256
|
+
this.content().some(function(cell) {
|
|
3257
|
+
if (row >= cell.gridRow() && row < cell.gridRow() + cell.gridRowSpan() && col >= cell.gridCol() && col < cell.gridCol() + cell.gridColSpan()) {
|
|
3258
|
+
retVal = cell;
|
|
3259
|
+
return true;
|
|
3260
|
+
}
|
|
3261
|
+
return false;
|
|
3262
|
+
});
|
|
3263
|
+
return retVal;
|
|
2082
3264
|
}
|
|
2083
3265
|
getWidgetCell(id) {
|
|
2084
3266
|
let retVal = null;
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
3267
|
+
this.content().some(function(cell) {
|
|
3268
|
+
if (cell.widget().id() === id) {
|
|
3269
|
+
retVal = cell;
|
|
3270
|
+
return true;
|
|
3271
|
+
}
|
|
3272
|
+
return false;
|
|
3273
|
+
});
|
|
3274
|
+
return retVal;
|
|
2088
3275
|
}
|
|
2089
3276
|
getContent(id) {
|
|
2090
3277
|
let retVal = null;
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
3278
|
+
this.content().some(function(cell) {
|
|
3279
|
+
if (cell.widget().id() === id) {
|
|
3280
|
+
retVal = cell.widget();
|
|
3281
|
+
return true;
|
|
3282
|
+
}
|
|
3283
|
+
return false;
|
|
3284
|
+
});
|
|
3285
|
+
return retVal;
|
|
2094
3286
|
}
|
|
2095
3287
|
cellToGridItem(cell) {
|
|
2096
3288
|
return {
|
|
@@ -2108,30 +3300,39 @@ class Grid extends HTMLWidget {
|
|
|
2108
3300
|
resetItemsPos() {
|
|
2109
3301
|
this.origItems.forEach(function(origItem) {
|
|
2110
3302
|
const item = this.itemsMap[origItem.id];
|
|
2111
|
-
item.x = origItem.x
|
|
3303
|
+
item.x = origItem.x;
|
|
3304
|
+
item.y = origItem.y;
|
|
2112
3305
|
}, this);
|
|
2113
3306
|
}
|
|
2114
3307
|
initGridList() {
|
|
2115
|
-
this.itemsMap = {}
|
|
3308
|
+
this.itemsMap = {};
|
|
3309
|
+
this.items = this.content().map(function(cell) {
|
|
2116
3310
|
const retVal = this.cellToGridItem(cell);
|
|
2117
|
-
|
|
2118
|
-
|
|
3311
|
+
this.itemsMap[retVal.id] = retVal;
|
|
3312
|
+
return retVal;
|
|
3313
|
+
}, this);
|
|
3314
|
+
this.origItems = this.content().map(this.cellToGridItem);
|
|
3315
|
+
this.gridList = new GridList(this.items, {
|
|
2119
3316
|
direction: this.snapping(),
|
|
2120
3317
|
lanes: this.snapping() === "horizontal" ? this.snappingRows() : this.snappingColumns()
|
|
2121
3318
|
});
|
|
2122
3319
|
}
|
|
2123
3320
|
killGridList() {
|
|
2124
|
-
this.gridList = null
|
|
3321
|
+
this.gridList = null;
|
|
3322
|
+
delete this.items;
|
|
3323
|
+
delete this.itemsMap;
|
|
2125
3324
|
}
|
|
2126
3325
|
enter(domNode, element) {
|
|
2127
|
-
super.enter(domNode, element)
|
|
3326
|
+
super.enter(domNode, element);
|
|
3327
|
+
this._scrollBarWidth = Platform.getScrollbarWidth();
|
|
2128
3328
|
const context = this;
|
|
2129
3329
|
this._d3Drag = drag().subject(function(_d) {
|
|
2130
3330
|
const d = context.cellToGridItem(_d);
|
|
2131
3331
|
return { x: d.x * context.cellWidth, y: d.y * context.cellHeight };
|
|
2132
3332
|
}).on("start", function(_d) {
|
|
2133
3333
|
if (!context.designMode()) return;
|
|
2134
|
-
d3Event().sourceEvent.stopPropagation()
|
|
3334
|
+
d3Event().sourceEvent.stopPropagation();
|
|
3335
|
+
context.initGridList();
|
|
2135
3336
|
const d = context.itemsMap[_d.id()];
|
|
2136
3337
|
context.dragItem = element.append("div").attr("class", "dragging").style("transform", function() {
|
|
2137
3338
|
return "translate(" + d.x * context.cellWidth + "px, " + d.y * context.cellHeight + "px)";
|
|
@@ -2139,15 +3340,40 @@ class Grid extends HTMLWidget {
|
|
|
2139
3340
|
return d.w * context.cellWidth - context.gutter() + "px";
|
|
2140
3341
|
}).style("height", function() {
|
|
2141
3342
|
return d.h * context.cellHeight - context.gutter() + "px";
|
|
2142
|
-
})
|
|
3343
|
+
});
|
|
3344
|
+
context.selectionBagClick(_d);
|
|
2143
3345
|
}).on("drag", function(_d) {
|
|
2144
3346
|
if (!context.designMode()) return;
|
|
2145
3347
|
const event = d3Event();
|
|
2146
3348
|
event.sourceEvent.stopPropagation();
|
|
2147
3349
|
const d = context.itemsMap[_d.id()];
|
|
2148
|
-
|
|
3350
|
+
if (event.x < 0) {
|
|
3351
|
+
event.x = 0;
|
|
3352
|
+
}
|
|
3353
|
+
if (event.x + d.w * context.cellWidth > context.snappingColumns() * context.cellWidth) {
|
|
3354
|
+
event.x = context.snappingColumns() * context.cellWidth - d.w * context.cellWidth;
|
|
3355
|
+
}
|
|
3356
|
+
if (event.y < 0) {
|
|
3357
|
+
event.y = 0;
|
|
3358
|
+
}
|
|
3359
|
+
if (event.y + d.h * context.cellWidth > context.snappingRows() * context.cellWidth) {
|
|
3360
|
+
event.y = context.snappingRows() * context.cellWidth - d.h * context.cellWidth;
|
|
3361
|
+
}
|
|
2149
3362
|
const pos = [Math.max(0, Math.floor((event.x + context.cellWidth / 2) / context.cellWidth)), Math.max(0, Math.floor((event.y + context.cellHeight / 2) / context.cellHeight))];
|
|
2150
|
-
(d.x !== pos[0] || d.y !== pos[1])
|
|
3363
|
+
if (d.x !== pos[0] || d.y !== pos[1]) {
|
|
3364
|
+
if (context.snapping() !== "none") {
|
|
3365
|
+
context.resetItemsPos();
|
|
3366
|
+
context.gridList.moveItemToPosition(d, pos);
|
|
3367
|
+
} else {
|
|
3368
|
+
d.x = pos[0];
|
|
3369
|
+
d.y = pos[1];
|
|
3370
|
+
}
|
|
3371
|
+
if (_d.gridCol() !== d.x || _d.gridRow() !== d.y) {
|
|
3372
|
+
context.items.forEach(context.gridItemToCell);
|
|
3373
|
+
context.updateGrid(false, 100);
|
|
3374
|
+
}
|
|
3375
|
+
}
|
|
3376
|
+
context.dragItem.style("transform", function() {
|
|
2151
3377
|
return "translate(" + event.x + "px, " + event.y + "px)";
|
|
2152
3378
|
}).style("width", function() {
|
|
2153
3379
|
return d.w * context.cellWidth + "px";
|
|
@@ -2155,13 +3381,19 @@ class Grid extends HTMLWidget {
|
|
|
2155
3381
|
return d.h * context.cellHeight + "px";
|
|
2156
3382
|
});
|
|
2157
3383
|
}).on("end", function() {
|
|
2158
|
-
context.designMode()
|
|
2159
|
-
|
|
3384
|
+
if (!context.designMode()) return;
|
|
3385
|
+
d3Event().sourceEvent.stopPropagation();
|
|
3386
|
+
context.dragItem.remove();
|
|
3387
|
+
context.dragItem = null;
|
|
3388
|
+
context.killGridList();
|
|
3389
|
+
});
|
|
3390
|
+
this._d3DragResize = drag().subject(function(_d) {
|
|
2160
3391
|
const d = context.cellToGridItem(_d);
|
|
2161
3392
|
return { x: (d.x + d.w - 1) * context.cellWidth, y: (d.y + d.h - 1) * context.cellHeight };
|
|
2162
3393
|
}).on("start", function(_d) {
|
|
2163
3394
|
if (!context.designMode()) return;
|
|
2164
|
-
d3Event().sourceEvent.stopPropagation()
|
|
3395
|
+
d3Event().sourceEvent.stopPropagation();
|
|
3396
|
+
context.initGridList();
|
|
2165
3397
|
const d = context.itemsMap[_d.id()];
|
|
2166
3398
|
context.dragItem = element.append("div").attr("class", "resizing").style("transform", function() {
|
|
2167
3399
|
return "translate(" + d.x * context.cellWidth + "px, " + d.y * context.cellHeight + "px)";
|
|
@@ -2169,25 +3401,45 @@ class Grid extends HTMLWidget {
|
|
|
2169
3401
|
return d.w * context.cellWidth - context.gutter() + "px";
|
|
2170
3402
|
}).style("height", function() {
|
|
2171
3403
|
return d.h * context.cellHeight - context.gutter() + "px";
|
|
2172
|
-
})
|
|
3404
|
+
});
|
|
3405
|
+
context.dragItemPos = { x: d.x, y: d.y };
|
|
2173
3406
|
}).on("drag", function(_d) {
|
|
2174
3407
|
if (!context.designMode()) return;
|
|
2175
3408
|
const event = d3Event();
|
|
2176
3409
|
event.sourceEvent.stopPropagation();
|
|
2177
|
-
const d = context.itemsMap[_d.id()]
|
|
3410
|
+
const d = context.itemsMap[_d.id()];
|
|
3411
|
+
const pos = [Math.max(0, Math.round(event.x / context.cellWidth)), Math.max(0, Math.round(event.y / context.cellHeight))];
|
|
3412
|
+
const size = {
|
|
2178
3413
|
w: Math.max(1, pos[0] - d.x + 1),
|
|
2179
3414
|
h: Math.max(1, pos[1] - d.y + 1)
|
|
2180
3415
|
};
|
|
2181
|
-
(d.w !== size.w || d.h !== size.h)
|
|
3416
|
+
if (d.w !== size.w || d.h !== size.h) {
|
|
3417
|
+
if (context.snapping() !== "none") {
|
|
3418
|
+
context.resetItemsPos();
|
|
3419
|
+
context.gridList.resizeItem(d, size);
|
|
3420
|
+
} else {
|
|
3421
|
+
d.w = size.w;
|
|
3422
|
+
d.h = size.h;
|
|
3423
|
+
}
|
|
3424
|
+
if (_d.gridColSpan() !== d.w || _d.gridRowSpan() !== d.h) {
|
|
3425
|
+
context.items.forEach(context.gridItemToCell);
|
|
3426
|
+
context.updateGrid(d.id, 100);
|
|
3427
|
+
}
|
|
3428
|
+
}
|
|
3429
|
+
context.dragItem.style("width", function() {
|
|
2182
3430
|
return (-d.x + 1) * context.cellWidth + event.x - context.gutter() + "px";
|
|
2183
3431
|
}).style("height", function() {
|
|
2184
3432
|
return (-d.y + 1) * context.cellHeight + event.y - context.gutter() + "px";
|
|
2185
3433
|
});
|
|
2186
3434
|
}).on("end", function() {
|
|
2187
|
-
context.designMode()
|
|
3435
|
+
if (!context.designMode()) return;
|
|
3436
|
+
d3Event().sourceEvent.stopPropagation();
|
|
3437
|
+
context.dragItem.remove();
|
|
3438
|
+
context.dragItem = null;
|
|
3439
|
+
context.killGridList();
|
|
2188
3440
|
});
|
|
2189
3441
|
}
|
|
2190
|
-
updateGrid(resize, transitionDuration = 0, _noRender =
|
|
3442
|
+
updateGrid(resize, transitionDuration = 0, _noRender = false) {
|
|
2191
3443
|
transitionDuration = transitionDuration || 0;
|
|
2192
3444
|
const context = this;
|
|
2193
3445
|
this.divItems.classed("draggable", this.designMode()).transition().duration(transitionDuration).style("left", function(d) {
|
|
@@ -2199,66 +3451,123 @@ class Grid extends HTMLWidget {
|
|
|
2199
3451
|
}).style("height", function(d) {
|
|
2200
3452
|
return d.gridRowSpan() * context.cellHeight - context.gutter() + "px";
|
|
2201
3453
|
}).on("end", function(d) {
|
|
2202
|
-
d.surfaceShadow_default(context.surfaceShadow()).surfacePadding_default(context.surfacePadding()).surfaceBorderWidth_default(context.surfaceBorderWidth()).surfaceBackgroundColor_default(context.surfaceBackgroundColor())
|
|
3454
|
+
d.surfaceShadow_default(context.surfaceShadow()).surfacePadding_default(context.surfacePadding()).surfaceBorderWidth_default(context.surfaceBorderWidth()).surfaceBackgroundColor_default(context.surfaceBackgroundColor());
|
|
3455
|
+
if (resize === true || resize === d.id()) {
|
|
3456
|
+
d.resize().lazyRender();
|
|
3457
|
+
}
|
|
2203
3458
|
});
|
|
2204
3459
|
}
|
|
2205
3460
|
update(domNode, element2) {
|
|
2206
|
-
super.update(domNode, element2)
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
3461
|
+
super.update(domNode, element2);
|
|
3462
|
+
this._placeholderElement.style("overflow-x", this.fitTo() === "width" ? "hidden" : null);
|
|
3463
|
+
this._placeholderElement.style("overflow-y", this.fitTo() === "width" ? "scroll" : null);
|
|
3464
|
+
const dimensions = this.getDimensions();
|
|
3465
|
+
const clientWidth = this.width() - (this.fitTo() === "width" ? this._scrollBarWidth : 0);
|
|
3466
|
+
this.cellWidth = clientWidth / dimensions.width;
|
|
3467
|
+
this.cellHeight = this.fitTo() === "all" ? this.height() / dimensions.height : this.cellWidth;
|
|
3468
|
+
if (this.designMode()) {
|
|
3469
|
+
const cellLaneRatio = Math.min(this.width() / this.snappingColumns(), this.height() / this.snappingRows());
|
|
3470
|
+
const laneWidth = Math.floor(cellLaneRatio);
|
|
3471
|
+
this.cellWidth = laneWidth;
|
|
3472
|
+
this.cellHeight = this.cellWidth;
|
|
2211
3473
|
}
|
|
2212
|
-
const context = this
|
|
3474
|
+
const context = this;
|
|
3475
|
+
const divItems = element2.selectAll("#" + this.id() + " > .ddCell").data(this.content(), function(d) {
|
|
2213
3476
|
return d.id();
|
|
2214
3477
|
});
|
|
2215
3478
|
this.divItems = divItems.enter().append("div").attr("class", "ddCell").each(function(d) {
|
|
2216
|
-
d.target(this)
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
3479
|
+
d.target(this);
|
|
3480
|
+
d.__grid_watch = d.monitor(function(key, newVal, oldVal) {
|
|
3481
|
+
if (context._renderCount && (key === "snapping" || key.indexOf("grid") === 0) && newVal !== oldVal) {
|
|
3482
|
+
if (!context.gridList) {
|
|
3483
|
+
context.initGridList();
|
|
3484
|
+
if (context.snapping() !== "none") {
|
|
3485
|
+
context.gridList.resizeGrid(context.snapping() === "horizontal" ? context.snappingRows() : context.snappingColumns());
|
|
3486
|
+
}
|
|
3487
|
+
context.items.forEach(context.gridItemToCell);
|
|
3488
|
+
context.updateGrid(d.id(), 100);
|
|
3489
|
+
context.killGridList();
|
|
3490
|
+
}
|
|
3491
|
+
}
|
|
3492
|
+
});
|
|
2220
3493
|
const element = select(this);
|
|
2221
|
-
|
|
2222
|
-
})
|
|
2223
|
-
|
|
3494
|
+
element.append("div").attr("class", "resizeHandle").call(context._d3DragResize).append("div").attr("class", "resizeHandleDisplay");
|
|
3495
|
+
}).merge(divItems);
|
|
3496
|
+
this.divItems.each(function(d) {
|
|
3497
|
+
const element = select(this);
|
|
3498
|
+
if (context.designMode()) {
|
|
3499
|
+
element.call(context._d3Drag);
|
|
3500
|
+
} else {
|
|
3501
|
+
element.on("mousedown.drag", null).on("touchstart.drag", null);
|
|
3502
|
+
}
|
|
3503
|
+
});
|
|
3504
|
+
this.divItems.select(".resizeHandle").style("display", this.designMode() ? null : "none");
|
|
3505
|
+
this.updateGrid(true);
|
|
3506
|
+
divItems.exit().each(function(d) {
|
|
3507
|
+
d.target(null);
|
|
3508
|
+
if (d.__grid_watch) {
|
|
3509
|
+
d.__grid_watch.remove();
|
|
3510
|
+
}
|
|
2224
3511
|
}).remove();
|
|
2225
3512
|
const lanesBackground = element2.selectAll("#" + this.id() + " > .laneBackground").data(this.designMode() ? [""] : []);
|
|
2226
3513
|
lanesBackground.enter().insert("div", ":first-child").attr("class", "laneBackground").style("left", "1px").style("top", "1px").on("click", function() {
|
|
2227
3514
|
context.selectionBagClear();
|
|
2228
|
-
}).merge(lanesBackground).style("width", this.snappingColumns() * this.cellWidth + "px").style("height", this.snappingRows() * this.cellHeight + "px")
|
|
3515
|
+
}).merge(lanesBackground).style("width", this.snappingColumns() * this.cellWidth + "px").style("height", this.snappingRows() * this.cellHeight + "px");
|
|
3516
|
+
lanesBackground.exit().each(function() {
|
|
2229
3517
|
context.selectionBagClear();
|
|
2230
3518
|
}).remove();
|
|
2231
3519
|
const lanes = element2.selectAll("#" + this.id() + " > .lane").data(this.designMode() ? [""] : []);
|
|
2232
|
-
lanes.enter().append("div").attr("class", "lane").style("left", "1px").style("top", "1px")
|
|
3520
|
+
lanes.enter().append("div").attr("class", "lane").style("left", "1px").style("top", "1px");
|
|
3521
|
+
lanes.style("display", this.showLanes() ? null : "none").style("width", this.snappingColumns() * this.cellWidth + "px").style("height", this.snappingRows() * this.cellHeight + "px").style("background-image", "linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px)").style("background-size", this.cellWidth + "px " + this.cellHeight + "px");
|
|
3522
|
+
lanes.exit().remove();
|
|
2233
3523
|
}
|
|
2234
3524
|
exit(domNode, element) {
|
|
2235
|
-
this.content().forEach((w) => w.target(null))
|
|
3525
|
+
this.content().forEach((w) => w.target(null));
|
|
3526
|
+
super.exit(domNode, element);
|
|
2236
3527
|
}
|
|
2237
3528
|
_createSelectionObject(d) {
|
|
2238
3529
|
return {
|
|
2239
3530
|
_id: d._id,
|
|
2240
|
-
element: () =>
|
|
3531
|
+
element: /* @__PURE__ */ __name(() => {
|
|
3532
|
+
return d._element;
|
|
3533
|
+
}, "element"),
|
|
2241
3534
|
widget: d
|
|
2242
3535
|
};
|
|
2243
3536
|
}
|
|
2244
3537
|
selection(_) {
|
|
2245
|
-
|
|
2246
|
-
return this._createSelectionObject(row);
|
|
2247
|
-
}, this)), this) : this._selectionBag.get().map(function(d) {
|
|
3538
|
+
if (!arguments.length) return this._selectionBag.get().map(function(d) {
|
|
2248
3539
|
return d._id;
|
|
2249
3540
|
});
|
|
3541
|
+
this._selectionBag.set(_.map(function(row) {
|
|
3542
|
+
return this._createSelectionObject(row);
|
|
3543
|
+
}, this));
|
|
3544
|
+
return this;
|
|
2250
3545
|
}
|
|
2251
3546
|
selectionBagClear() {
|
|
2252
|
-
|
|
3547
|
+
if (!this._selectionBag.isEmpty()) {
|
|
3548
|
+
this._selectionBag.clear();
|
|
3549
|
+
this.postSelectionChange();
|
|
3550
|
+
}
|
|
2253
3551
|
}
|
|
2254
3552
|
selectionBagClick(d) {
|
|
2255
3553
|
if (d !== null) {
|
|
2256
3554
|
const selectionObj = this._createSelectionObject(d);
|
|
2257
|
-
if (d3Event().sourceEvent.ctrlKey)
|
|
2258
|
-
|
|
2259
|
-
|
|
3555
|
+
if (d3Event().sourceEvent.ctrlKey) {
|
|
3556
|
+
if (this._selectionBag.isSelected(selectionObj)) {
|
|
3557
|
+
this._selectionBag.remove(selectionObj);
|
|
3558
|
+
this.postSelectionChange();
|
|
3559
|
+
} else {
|
|
3560
|
+
this._selectionBag.append(selectionObj);
|
|
3561
|
+
this.postSelectionChange();
|
|
3562
|
+
}
|
|
3563
|
+
} else {
|
|
2260
3564
|
const selected = this._selectionBag.get();
|
|
2261
|
-
selected.length === 1 && selected[0]._id === selectionObj._id
|
|
3565
|
+
if (selected.length === 1 && selected[0]._id === selectionObj._id) {
|
|
3566
|
+
this.selectionBagClear();
|
|
3567
|
+
} else {
|
|
3568
|
+
this._selectionBag.set([selectionObj]);
|
|
3569
|
+
}
|
|
3570
|
+
this.postSelectionChange();
|
|
2262
3571
|
}
|
|
2263
3572
|
}
|
|
2264
3573
|
}
|
|
@@ -2270,44 +3579,58 @@ class Grid extends HTMLWidget {
|
|
|
2270
3579
|
const [x, y, w, h] = layoutArr[i];
|
|
2271
3580
|
d.gridCol(x).gridRow(y).gridColSpan(w).gridRowSpan(h);
|
|
2272
3581
|
}
|
|
2273
|
-
})
|
|
3582
|
+
});
|
|
3583
|
+
this.updateGrid(true);
|
|
2274
3584
|
}
|
|
2275
3585
|
vizActivation(elem) {
|
|
2276
3586
|
}
|
|
2277
|
-
}
|
|
3587
|
+
};
|
|
3588
|
+
__name(_Grid, "Grid");
|
|
3589
|
+
let Grid = _Grid;
|
|
2278
3590
|
Grid.prototype._class += " layout_Grid";
|
|
2279
|
-
Grid.prototype.publish("designMode",
|
|
2280
|
-
Grid.prototype.publish("showLanes",
|
|
3591
|
+
Grid.prototype.publish("designMode", false, "boolean", "Design Mode", null, { tags: ["Basic"] });
|
|
3592
|
+
Grid.prototype.publish("showLanes", true, "boolean", "Show snapping lanes when in design mode", null, { tags: ["Basic"], disable: /* @__PURE__ */ __name((w) => !w.designMode(), "disable") });
|
|
2281
3593
|
Grid.prototype.publish("fitTo", "all", "set", "Sizing Strategy", ["all", "width"], { tags: ["Basic"] });
|
|
2282
3594
|
Grid.prototype.publish("snapping", "vertical", "set", "Snapping Strategy", ["vertical", "horizontal", "none"]);
|
|
2283
3595
|
Grid.prototype.publish("snappingColumns", 12, "number", "Snapping Columns");
|
|
2284
3596
|
Grid.prototype.publish("snappingRows", 16, "number", "Snapping Rows");
|
|
2285
3597
|
Grid.prototype.publish("gutter", 6, "number", "Gap Between Widgets", null, { tags: ["Basic"] });
|
|
2286
|
-
Grid.prototype.publish("surfaceShadow",
|
|
3598
|
+
Grid.prototype.publish("surfaceShadow", true, "boolean", "3D Shadow");
|
|
2287
3599
|
Grid.prototype.publish("surfacePadding", null, "string", "Cell Padding (px)", null, { tags: ["Intermediate"] });
|
|
2288
3600
|
Grid.prototype.publish("surfaceBorderWidth", 1, "number", "Width (px) of Cell Border", null, { tags: ["Intermediate"] });
|
|
2289
3601
|
Grid.prototype.publish("surfaceBackgroundColor", null, "html-color", "Surface Background Color", null, { tags: ["Advanced"] });
|
|
2290
|
-
Grid.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Basic"], render:
|
|
2291
|
-
class
|
|
3602
|
+
Grid.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Basic"], render: false });
|
|
3603
|
+
const _HorizontalList = class _HorizontalList extends FlexGrid {
|
|
2292
3604
|
constructor() {
|
|
2293
|
-
super()
|
|
3605
|
+
super();
|
|
3606
|
+
this.orientation_default("horizontal");
|
|
3607
|
+
this.flexWrap_default("nowrap");
|
|
2294
3608
|
}
|
|
2295
|
-
}
|
|
3609
|
+
};
|
|
3610
|
+
__name(_HorizontalList, "HorizontalList");
|
|
3611
|
+
let HorizontalList = _HorizontalList;
|
|
2296
3612
|
HorizontalList.prototype._class += " layout_HorizontalList";
|
|
2297
|
-
class
|
|
3613
|
+
const _Layered = class _Layered extends HTMLWidget {
|
|
2298
3614
|
constructor() {
|
|
2299
3615
|
super();
|
|
2300
3616
|
__publicField(this, "_contentContainer");
|
|
2301
3617
|
__publicField(this, "_widgetPlacements");
|
|
2302
3618
|
__publicField(this, "_widgetRatios");
|
|
2303
|
-
this._tag = "div"
|
|
3619
|
+
this._tag = "div";
|
|
3620
|
+
this._widgetPlacements = [];
|
|
3621
|
+
this._widgetRatios = [];
|
|
2304
3622
|
}
|
|
2305
3623
|
addLayer(widget, placement = "default", widthRatio = 1, heightRatio = 1) {
|
|
2306
3624
|
const widgets = this.widgets();
|
|
2307
|
-
|
|
3625
|
+
widgets.push(widget ? widget : new Text().text("No widget defined for layer."));
|
|
3626
|
+
this.widgets(widgets);
|
|
3627
|
+
this._widgetPlacements.push(placement);
|
|
3628
|
+
this._widgetRatios.push([widthRatio, heightRatio]);
|
|
3629
|
+
return this;
|
|
2308
3630
|
}
|
|
2309
3631
|
enter(domNode, element) {
|
|
2310
|
-
super.enter(domNode, element)
|
|
3632
|
+
super.enter(domNode, element);
|
|
3633
|
+
this._contentContainer = element.append("div").attr("class", "container");
|
|
2311
3634
|
}
|
|
2312
3635
|
update(domNode, element) {
|
|
2313
3636
|
super.update(domNode, element);
|
|
@@ -2322,20 +3645,30 @@ class Layered extends HTMLWidget {
|
|
|
2322
3645
|
const clientSize = {
|
|
2323
3646
|
width: context.clientWidth(),
|
|
2324
3647
|
height: context.clientHeight()
|
|
2325
|
-
}
|
|
2326
|
-
|
|
2327
|
-
|
|
3648
|
+
};
|
|
3649
|
+
const widgetSize = context.widgetSize(idx, clientSize);
|
|
3650
|
+
const widgetPosition = context.widgetPosition(idx, clientSize, widgetSize);
|
|
3651
|
+
this.style.top = widgetPosition.y + "px";
|
|
3652
|
+
this.style.left = widgetPosition.x + "px";
|
|
3653
|
+
widget.resize(widgetSize).render();
|
|
3654
|
+
});
|
|
3655
|
+
content.exit().each(function(widget, idx) {
|
|
2328
3656
|
widget.target(null);
|
|
2329
|
-
}).remove()
|
|
3657
|
+
}).remove();
|
|
3658
|
+
content.order();
|
|
2330
3659
|
}
|
|
2331
3660
|
widgetSize(idx, clientSize) {
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
3661
|
+
if (this._widgetPlacements[idx] === "default") {
|
|
3662
|
+
return {
|
|
3663
|
+
width: clientSize.width * this._widgetRatios[idx][0],
|
|
3664
|
+
height: clientSize.height * this._widgetRatios[idx][1]
|
|
3665
|
+
};
|
|
3666
|
+
} else {
|
|
3667
|
+
return {
|
|
3668
|
+
width: clientSize.width * this._widgetRatios[idx][0],
|
|
3669
|
+
height: clientSize.height * this._widgetRatios[idx][1]
|
|
3670
|
+
};
|
|
3671
|
+
}
|
|
2339
3672
|
}
|
|
2340
3673
|
widgetPosition(idx, clientSize, widgetSize) {
|
|
2341
3674
|
switch (this._widgetPlacements[idx]) {
|
|
@@ -2371,50 +3704,76 @@ class Layered extends HTMLWidget {
|
|
|
2371
3704
|
};
|
|
2372
3705
|
}
|
|
2373
3706
|
}
|
|
2374
|
-
}
|
|
3707
|
+
};
|
|
3708
|
+
__name(_Layered, "Layered");
|
|
3709
|
+
let Layered = _Layered;
|
|
2375
3710
|
Layered.prototype._class += " layout_Layered";
|
|
2376
3711
|
Layered.prototype.publish("surfacePadding", 0, "number", "Padding");
|
|
2377
3712
|
Layered.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });
|
|
2378
|
-
class
|
|
3713
|
+
const _Popup = class _Popup extends HTMLWidget {
|
|
2379
3714
|
constructor() {
|
|
2380
3715
|
super();
|
|
2381
3716
|
__publicField(this, "_surfaceButtons");
|
|
2382
3717
|
__publicField(this, "_originalPosition");
|
|
2383
|
-
this._tag = "div"
|
|
3718
|
+
this._tag = "div";
|
|
3719
|
+
this._surfaceButtons = [];
|
|
2384
3720
|
}
|
|
2385
3721
|
updateState(visible) {
|
|
2386
|
-
visible = visible || !this.popupState()
|
|
3722
|
+
visible = visible || !this.popupState();
|
|
3723
|
+
this.popupState(visible).render();
|
|
2387
3724
|
}
|
|
2388
3725
|
enter(domNode, element) {
|
|
2389
|
-
super.enter(domNode, element)
|
|
3726
|
+
super.enter(domNode, element);
|
|
3727
|
+
this.widget().target(domNode);
|
|
3728
|
+
this._originalPosition = this.position();
|
|
2390
3729
|
}
|
|
2391
3730
|
update(domNode, element) {
|
|
2392
|
-
super.update(domNode, element)
|
|
3731
|
+
super.update(domNode, element);
|
|
3732
|
+
element.style("visibility", this.popupState() ? null : "hidden").style("opacity", this.popupState() ? null : 0).style("width", this.shrinkWrap() ? this.widget().width() + "px" : this._size.width + "px").style("height", this.shrinkWrap() ? this.widget().height() + "px" : this._size.height + "px");
|
|
3733
|
+
if (this.widget().size().height === 0) {
|
|
3734
|
+
this.widget().resize(this.size());
|
|
3735
|
+
}
|
|
2393
3736
|
}
|
|
2394
3737
|
postUpdate(domNode, element) {
|
|
2395
|
-
let left
|
|
3738
|
+
let left;
|
|
3739
|
+
let top;
|
|
2396
3740
|
switch (this.centerPopup()) {
|
|
2397
3741
|
case "container":
|
|
2398
|
-
|
|
3742
|
+
if (this._placeholderElement) {
|
|
3743
|
+
left = parseInt(this._placeholderElement.style("width")) / 2 - this.widget().width() / 2;
|
|
3744
|
+
top = parseInt(this._placeholderElement.style("height")) / 2 - this.widget().height() / 2;
|
|
3745
|
+
}
|
|
3746
|
+
this.position("absolute");
|
|
2399
3747
|
break;
|
|
2400
3748
|
case "window":
|
|
2401
|
-
left = window.innerWidth / 2 - this.widget().width() / 2
|
|
3749
|
+
left = window.innerWidth / 2 - this.widget().width() / 2;
|
|
3750
|
+
top = window.innerHeight / 2 - this.widget().height() / 2;
|
|
3751
|
+
this.position("fixed");
|
|
2402
3752
|
break;
|
|
2403
3753
|
default:
|
|
2404
|
-
left = 0
|
|
3754
|
+
left = 0;
|
|
3755
|
+
top = 0;
|
|
3756
|
+
this.position(this._originalPosition);
|
|
2405
3757
|
break;
|
|
2406
3758
|
}
|
|
2407
|
-
this.pos({ x: left, y: top })
|
|
3759
|
+
this.pos({ x: left, y: top });
|
|
3760
|
+
super.postUpdate(domNode, element);
|
|
3761
|
+
element.style("position", this.position()).style("left", this.left() + "px").style("right", this.right() + "px").style("top", this.top() + "px").style("bottom", this.bottom() + "px");
|
|
2408
3762
|
}
|
|
2409
3763
|
exit(domNode, element) {
|
|
2410
|
-
|
|
3764
|
+
if (this.widget()) {
|
|
3765
|
+
this.widget().target(null);
|
|
3766
|
+
}
|
|
3767
|
+
super.exit(domNode, element);
|
|
2411
3768
|
}
|
|
2412
3769
|
click(obj) {
|
|
2413
3770
|
}
|
|
2414
|
-
}
|
|
3771
|
+
};
|
|
3772
|
+
__name(_Popup, "Popup");
|
|
3773
|
+
let Popup = _Popup;
|
|
2415
3774
|
Popup.prototype._class += " layout_Popup";
|
|
2416
|
-
Popup.prototype.publish("popupState",
|
|
2417
|
-
Popup.prototype.publish("shrinkWrap",
|
|
3775
|
+
Popup.prototype.publish("popupState", false, "boolean", "State of the popup, visible (true) or hidden (false)", null, {});
|
|
3776
|
+
Popup.prototype.publish("shrinkWrap", false, "boolean", "The popup parent container either shrinks to the size of its contents (true) or expands to fit thge popup's parentDiv (false)", null, {});
|
|
2418
3777
|
Popup.prototype.publish("centerPopup", "none", "set", "Center the widget in its container element (target) or in the window", ["none", "container", "window"], {});
|
|
2419
3778
|
Popup.prototype.publish("top", null, "number", "Top position property of popup", null, {});
|
|
2420
3779
|
Popup.prototype.publish("bottom", null, "number", "Bottom position property of popup", null, {});
|
|
@@ -2422,7 +3781,7 @@ Popup.prototype.publish("left", null, "number", "Left position property of popup
|
|
|
2422
3781
|
Popup.prototype.publish("right", null, "number", "Right position property of popup", null, {});
|
|
2423
3782
|
Popup.prototype.publish("position", "relative", "set", "Value of the 'position' property", ["absolute", "relative", "fixed", "static", "initial", "inherit"], { tags: ["Private"] });
|
|
2424
3783
|
Popup.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Private"] });
|
|
2425
|
-
class
|
|
3784
|
+
const _Tabbed = class _Tabbed extends HTMLWidget {
|
|
2426
3785
|
constructor() {
|
|
2427
3786
|
super();
|
|
2428
3787
|
__publicField(this, "_tabContainer");
|
|
@@ -2430,24 +3789,43 @@ class Tabbed extends HTMLWidget {
|
|
|
2430
3789
|
this._tag = "div";
|
|
2431
3790
|
}
|
|
2432
3791
|
clearTabs() {
|
|
2433
|
-
|
|
3792
|
+
this.labels([]);
|
|
3793
|
+
this.widgets([]);
|
|
3794
|
+
return this;
|
|
2434
3795
|
}
|
|
2435
3796
|
addTab(widget, label, isActive, callback) {
|
|
2436
3797
|
const widgetSize = widget.size();
|
|
2437
|
-
widgetSize.width === 0 && widgetSize.height === 0
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
const
|
|
2441
|
-
|
|
3798
|
+
if (widgetSize.width === 0 && widgetSize.height === 0) {
|
|
3799
|
+
widget.size({ width: "100%", height: "100%" });
|
|
3800
|
+
}
|
|
3801
|
+
const labels = this.labels();
|
|
3802
|
+
const widgets = this.widgets();
|
|
3803
|
+
if (isActive) {
|
|
3804
|
+
this.activeTabIdx(this.widgets().length);
|
|
3805
|
+
}
|
|
3806
|
+
labels.push(label);
|
|
3807
|
+
const surface = new Surface().widget(widget ? widget : new Text().text("No widget defined for tab"));
|
|
3808
|
+
widgets.push(surface);
|
|
3809
|
+
this.labels(labels);
|
|
3810
|
+
this.widgets(widgets);
|
|
3811
|
+
if (callback) {
|
|
3812
|
+
callback(surface);
|
|
3813
|
+
}
|
|
3814
|
+
return this;
|
|
2442
3815
|
}
|
|
2443
3816
|
widgetSize(widgetDiv) {
|
|
2444
3817
|
const width = this.clientWidth();
|
|
2445
3818
|
let height = this.clientHeight();
|
|
2446
3819
|
const tcBox = this._tabContainer.node().getBoundingClientRect();
|
|
2447
|
-
|
|
3820
|
+
if (typeof tcBox.height !== "undefined") {
|
|
3821
|
+
height -= tcBox.height;
|
|
3822
|
+
}
|
|
3823
|
+
return { width, height };
|
|
2448
3824
|
}
|
|
2449
3825
|
enter(domNode, element) {
|
|
2450
|
-
super.enter(domNode, element)
|
|
3826
|
+
super.enter(domNode, element);
|
|
3827
|
+
this._tabContainer = element.append("div");
|
|
3828
|
+
this._contentContainer = element.append("div");
|
|
2451
3829
|
}
|
|
2452
3830
|
update(domNode, element) {
|
|
2453
3831
|
super.update(domNode, element);
|
|
@@ -2457,50 +3835,60 @@ class Tabbed extends HTMLWidget {
|
|
|
2457
3835
|
return d;
|
|
2458
3836
|
});
|
|
2459
3837
|
tabs.enter().append("span").attr("class", "tab-button id" + this.id()).style("cursor", "pointer").on("click", function(d, idx) {
|
|
2460
|
-
context.click(context.widgets()[idx].widget(), d, idx)
|
|
3838
|
+
context.click(context.widgets()[idx].widget(), d, idx);
|
|
3839
|
+
context.activeTabIdx(idx).render();
|
|
2461
3840
|
}).merge(tabs).classed("active", function(d, idx) {
|
|
2462
3841
|
return context.activeTabIdx() === idx;
|
|
2463
3842
|
}).text(function(d) {
|
|
2464
3843
|
return d;
|
|
2465
|
-
})
|
|
3844
|
+
});
|
|
3845
|
+
tabs.exit().remove();
|
|
2466
3846
|
const content = this._contentContainer.selectAll(".tab-content.id" + this.id()).data(this.widgets(), function(d) {
|
|
2467
3847
|
return d.id();
|
|
2468
3848
|
});
|
|
2469
|
-
|
|
3849
|
+
content.enter().append("div").attr("class", "tab-content id" + this.id()).each(function(widget, idx) {
|
|
2470
3850
|
widget.target(this);
|
|
2471
3851
|
}).merge(content).classed("active", function(d, idx) {
|
|
2472
3852
|
return context.activeTabIdx() === idx;
|
|
2473
3853
|
}).style("display", function(d, idx) {
|
|
2474
3854
|
return context.activeTabIdx() === idx ? "block" : "none";
|
|
2475
3855
|
}).each(function(surface, idx) {
|
|
2476
|
-
|
|
3856
|
+
surface.visible(context.activeTabIdx() === idx);
|
|
3857
|
+
if (context.activeTabIdx() === idx) {
|
|
2477
3858
|
const wSize = context.widgetSize(select(this));
|
|
2478
3859
|
surface.surfaceBorderWidth(context.showTabs() ? null : 0).surfacePadding(context.showTabs() ? null : 0).resize(wSize);
|
|
2479
3860
|
}
|
|
2480
|
-
})
|
|
3861
|
+
});
|
|
3862
|
+
content.exit().each(function(widget, idx) {
|
|
2481
3863
|
widget.target(null);
|
|
2482
|
-
}).remove()
|
|
3864
|
+
}).remove();
|
|
3865
|
+
switch (this.tabLocation()) {
|
|
2483
3866
|
case "bottom":
|
|
2484
|
-
this._tabContainer.attr("class", "on_bottom").style("top", this._contentContainer.node().offsetHeight + this.surfacePadding() + "px").style("position", "absolute")
|
|
3867
|
+
this._tabContainer.attr("class", "on_bottom").style("top", this._contentContainer.node().offsetHeight + this.surfacePadding() + "px").style("position", "absolute");
|
|
3868
|
+
this._contentContainer.style("top", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null).style("position", "absolute");
|
|
2485
3869
|
break;
|
|
2486
3870
|
default:
|
|
2487
|
-
this._tabContainer.attr("class", "on_top").style("top", null).style("position", "relative")
|
|
3871
|
+
this._tabContainer.attr("class", "on_top").style("top", null).style("position", "relative");
|
|
3872
|
+
this._contentContainer.style("top", this._tabContainer.node().offsetHeight + this.surfacePadding() + "px").style("position", "absolute");
|
|
2488
3873
|
break;
|
|
2489
3874
|
}
|
|
2490
3875
|
}
|
|
2491
3876
|
click(widget, column, idx) {
|
|
2492
3877
|
}
|
|
2493
|
-
}
|
|
3878
|
+
};
|
|
3879
|
+
__name(_Tabbed, "Tabbed");
|
|
3880
|
+
let Tabbed = _Tabbed;
|
|
2494
3881
|
Tabbed.prototype._class += " layout_Tabbed";
|
|
2495
|
-
Tabbed.prototype.publish("showTabs",
|
|
3882
|
+
Tabbed.prototype.publish("showTabs", true, "boolean", "Show Tabs", null, {});
|
|
2496
3883
|
Tabbed.prototype.publish("surfacePadding", 4, "number", "Padding");
|
|
2497
3884
|
Tabbed.prototype.publish("activeTabIdx", 0, "number", "Index of active tab", null, {});
|
|
2498
3885
|
Tabbed.prototype.publish("labels", [], "array", "Array of tab labels sharing an index with ", null, { tags: ["Private"] });
|
|
2499
3886
|
Tabbed.prototype.publish("tabLocation", "top", "set", "Position the tabs at the bottom of the widget", ["top", "bottom"], { tags: ["Private"] });
|
|
2500
3887
|
Tabbed.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });
|
|
2501
|
-
class
|
|
3888
|
+
const _Toolbar = class _Toolbar extends HTMLWidget {
|
|
2502
3889
|
constructor() {
|
|
2503
|
-
super()
|
|
3890
|
+
super();
|
|
3891
|
+
this._tag = "div";
|
|
2504
3892
|
}
|
|
2505
3893
|
enter(domNode, element) {
|
|
2506
3894
|
super.enter(domNode, element);
|
|
@@ -2510,16 +3898,21 @@ class Toolbar extends HTMLWidget {
|
|
|
2510
3898
|
const context = this;
|
|
2511
3899
|
element.attr("title", context.title()).style("background-color", this.backgroundColor());
|
|
2512
3900
|
const title = element.selectAll("div.toolbar-title").data(this.title() ? [this.title()] : []);
|
|
2513
|
-
title.enter().append("div").classed("toolbar-title",
|
|
3901
|
+
title.enter().append("div").classed("toolbar-title", true).append("span");
|
|
3902
|
+
title.selectAll("div.toolbar-title > span").style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null).style("color", this.fontColor_exists() ? this.fontColor() : null).style("font-family", this.fontFamily_exists() ? this.fontFamily() : null).style("font-weight", this.fontBold_exists() ? this.fontBold() ? "bold" : "normal" : null).style("background-color", this.backgroundColor_exists() ? this.backgroundColor() : null).text(context.title());
|
|
3903
|
+
title.exit().remove();
|
|
2514
3904
|
const childWidgets = element.selectAll("div.toolbar-child").data(this.widgets() !== null ? this.widgets() : [], function(d) {
|
|
2515
3905
|
return d.id();
|
|
2516
3906
|
});
|
|
2517
3907
|
childWidgets.enter().insert("div", "div.toolbar-title").each(function(d, i) {
|
|
2518
3908
|
const widgetClass = context.widgetClasses()[i] ? context.widgetClasses()[i] + " toolbar-child" : "toolbar-child";
|
|
2519
|
-
select(this).classed(widgetClass,
|
|
2520
|
-
|
|
3909
|
+
select(this).classed(widgetClass, true);
|
|
3910
|
+
d.target(this);
|
|
3911
|
+
});
|
|
3912
|
+
childWidgets.exit().each(function(d) {
|
|
2521
3913
|
d.target(null);
|
|
2522
|
-
}).remove()
|
|
3914
|
+
}).remove();
|
|
3915
|
+
childWidgets.order();
|
|
2523
3916
|
}
|
|
2524
3917
|
render(callback) {
|
|
2525
3918
|
const context = this;
|
|
@@ -2528,31 +3921,43 @@ class Toolbar extends HTMLWidget {
|
|
|
2528
3921
|
let minX = toolbarBBox.left + toolbarBBox.width;
|
|
2529
3922
|
context.element().selectAll("div.toolbar-child").each(function(d, i) {
|
|
2530
3923
|
const childBBox = this.getBoundingClientRect();
|
|
2531
|
-
|
|
2532
|
-
|
|
3924
|
+
if (minX > childBBox.left)
|
|
3925
|
+
minX = childBBox.left;
|
|
3926
|
+
});
|
|
3927
|
+
context.element().select(".toolbar-title").style("width", minX - toolbarBBox.left - 4 + "px");
|
|
3928
|
+
if (callback) {
|
|
3929
|
+
callback(w);
|
|
3930
|
+
}
|
|
2533
3931
|
});
|
|
2534
3932
|
}
|
|
2535
3933
|
exit(domNode, element) {
|
|
2536
3934
|
this.widgets().forEach(function(w) {
|
|
2537
3935
|
w.target(null);
|
|
2538
|
-
})
|
|
3936
|
+
});
|
|
3937
|
+
super.exit(domNode, element);
|
|
2539
3938
|
}
|
|
2540
|
-
}
|
|
3939
|
+
};
|
|
3940
|
+
__name(_Toolbar, "Toolbar");
|
|
3941
|
+
let Toolbar = _Toolbar;
|
|
2541
3942
|
Toolbar.prototype._class += " layout_Toolbar";
|
|
2542
3943
|
Toolbar.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
|
|
2543
|
-
Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional:
|
|
2544
|
-
Toolbar.prototype.publish("fontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional:
|
|
2545
|
-
Toolbar.prototype.publish("fontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional:
|
|
2546
|
-
Toolbar.prototype.publish("fontBold",
|
|
2547
|
-
Toolbar.prototype.publish("backgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional:
|
|
2548
|
-
Toolbar.prototype.publish("responsive",
|
|
3944
|
+
Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
|
|
3945
|
+
Toolbar.prototype.publish("fontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
|
|
3946
|
+
Toolbar.prototype.publish("fontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
|
|
3947
|
+
Toolbar.prototype.publish("fontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
|
|
3948
|
+
Toolbar.prototype.publish("backgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
|
|
3949
|
+
Toolbar.prototype.publish("responsive", true, "boolean", "Adapts to pixel width", null, { tags: ["Basic"] });
|
|
2549
3950
|
Toolbar.prototype.publish("widgets", [], "widgetArray", "Child widgets of the toolbar", null, { tags: ["Basic"] });
|
|
2550
3951
|
Toolbar.prototype.publish("widgetClasses", [], "array", "Array of Html Element classes to be assigned to the child widgets (shares index with widgets param)", null, { tags: ["Basic"] });
|
|
2551
|
-
class
|
|
3952
|
+
const _VerticalList = class _VerticalList extends FlexGrid {
|
|
2552
3953
|
constructor() {
|
|
2553
|
-
super()
|
|
3954
|
+
super();
|
|
3955
|
+
this.orientation_default("vertical");
|
|
3956
|
+
this.flexWrap_default("nowrap");
|
|
2554
3957
|
}
|
|
2555
|
-
}
|
|
3958
|
+
};
|
|
3959
|
+
__name(_VerticalList, "VerticalList");
|
|
3960
|
+
let VerticalList = _VerticalList;
|
|
2556
3961
|
VerticalList.prototype._class += " layout_VerticalList";
|
|
2557
3962
|
export {
|
|
2558
3963
|
AbsoluteSurface,
|
|
@@ -2579,4 +3984,4 @@ export {
|
|
|
2579
3984
|
WidgetDiv
|
|
2580
3985
|
};
|
|
2581
3986
|
//# sourceMappingURL=index.js.map
|
|
2582
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('.layout_AbsoluteSurface{pointer-events:none!important}.layout_AbsoluteSurface>.placeholder{position:relative;overflow:hidden;pointer-events:all}.layout_Accordion>ul{position:relative}.layout_Accordion.open>span{font-style:italic}.layout_Accordion.closed>ul{height:0px;overflow:hidden}.layout_Accordion.open>ul{display:block}.layout_Accordion>.collapsible-icon,.layout_Accordion>.collapsible-title{cursor:pointer;box-sizing:border-box}.layout_Accordion>.collapsible-title{display:block;width:100%}.layout_Accordion>.collapsible-title{font-size:13px;color:#fff;padding:4px 8px;height:26px;-webkit-box-shadow:inset 0px -1px 1px 0px rgba(0,0,0,.2);-moz-box-shadow:inset 0px -1px 1px 0px rgba(0,0,0,.2);box-shadow:inset 0 -1px 1px #0003}.layout_Accordion li{background-color:#fff}.layout_Accordion>ul,.layout_Accordion>.collapsible-title{background-color:#333}.layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion>.collapsible-title{background-color:#555}.layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#777}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#999}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#bbb}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#ccc}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#ddd}.layout_Accordion>ul,.layout_Accordion>span{padding-left:0}.layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion>span{padding-left:12px}.layout_Accordion>.collapsible-title:before{padding:4px 8px;position:absolute;left:0;top:0}.layout_Accordion>.collapsible-icon{position:absolute;top:0;right:0;width:24px;height:24px;color:#fff}.layout_Surface{box-sizing:border-box;margin:0;border:1px solid #e5e5e5;overflow:hidden;height:100%;width:100%}.layout_Surface.shadow2{box-shadow:0 2px 2px #00000024,0 3px 1px -2px #0003,0 1px 5px #0000001f}.layout_Surface>h3{margin:0;padding:2px;background-color:#e5e5e5}.layout_Surface .html-button-container{position:absolute;right:0;top:3px}.layout_Surface>div{padding:8px}.layout_Surface .html-button-container .surface-button{margin-right:5px}.layout_Surface .html-button-container .surface-button i{opacity:.8}.layout_Surface .html-button-container .surface-button:hover{opacity:1}.layout_Surface .html-button-container .surface-button:active{opacity:.5}div[draggable=true].hideDragCellContent.content-icon:before{content:"";font-family:FontAwesome;position:absolute;top:calc(50% - 74px);left:calc(50% - 56px);font-size:100px}div[draggable=true].hideDragCellContent.content-icon-Line:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Pie:before{top:calc(50% - 72px);left:calc(50% - 45px);content:""}div[draggable=true].hideDragCellContent.content-icon-Area:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Gauge:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Table:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Form:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Grid:before,div[draggable=true].hideDragCellContent.content-icon-Graph:before,div[draggable=true].hideDragCellContent.content-icon-Border:before,div[draggable=true].hideDragCellContent.content-icon-Tabbed:before,div[draggable=true].hideDragCellContent.content-icon-Accordion:before,div[draggable=true].hideDragCellContent.content-icon-MultiChart:before,div[draggable=true].hideDragCellContent.content-icon-MultiChartSurface:before{content:""}div[draggable=true].hideDragCellContent.content-icon-ChoroplethStates:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethStatesHeat:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethCounties:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethCountries:before,div[draggable=true].hideDragCellContent.content-icon-GMap:before,div[draggable=true].hideDragCellContent.content-icon-GMapHeat:before,div[draggable=true].hideDragCellContent.content-icon-GMapGraph:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Text:before,div[draggable=true].hideDragCellContent.content-icon-TextBox:before,div[draggable=true].hideDragCellContent.content-icon-FAChar:before{content:""}.layout_Cell .update-indicator{box-sizing:border-box;position:absolute;top:0;left:0;padding:0;z-index:1000;border-width:0px;border-style:solid;pointer-events:none}.layout_Border{width:100%;height:100%}.layout_Border>.border-content{width:100%;height:100%;position:relative}.layout_Border>.borderHandle{width:6px;height:6px;background-color:#444;opacity:.3;position:absolute;visibility:hidden}.layout_Border.design-mode>.borderHandle{visibility:visible}.layout_Border>.borderHandle:hover{background-color:#666}.layout_Border>.borderHandle.borderHandleDisabled{display:none}.layout_Border>.borderHandle_top,.layout_Border>.borderHandle_bottom{cursor:ns-resize}.layout_Border>.borderHandle_left,.layout_Border>.borderHandle_right{cursor:ew-resize}.layout_Border .cell{border-radius:5px;border:1px solid #e5e5e5;display:inline-block;overflow:hidden}.layout_Border .cell h2{margin:0;padding-top:4px;-webkit-margin:0px;text-align:center}.layout_Border .layout_BorderCell.over{border:2px dashed #000}.layout_Border .dragItem{z-index:-1;opacity:.33}.layout_Border .notDragItem{z-index:-1;opacity:1}.layout_Border div[draggable=true]{opacity:.75;cursor:default}.layout_Border div[draggable=true] .dragHandle{opacity:1}.layout_Border div[draggable=true] .dragHandle_n,.layout_Border div[draggable=true] .dragHandle_e,.layout_Border div[draggable=true] .dragHandle_s,.layout_Border div[draggable=true] .dragHandle_w{background-color:#aaa}.layout_Border div[draggable=true] .dragHandle_nw,.layout_Border div[draggable=true] .dragHandle_ne,.layout_Border div[draggable=true] .dragHandle_se,.layout_Border div[draggable=true] .dragHandle_sw{background-color:#333}.layout_Border div[draggable=true] .dragHandle_nw{cursor:nw-resize}.layout_Border div[draggable=true] .dragHandle_n{cursor:n-resize}.layout_Border div[draggable=true] .dragHandle_ne{cursor:ne-resize}.layout_Border div[draggable=true] .dragHandle_e{cursor:e-resize}.layout_Border div[draggable=true] .dragHandle_se{cursor:se-resize}.layout_Border div[draggable=true] .dragHandle_s{cursor:s-resize}.layout_Border div[draggable=true] .dragHandle_sw{cursor:sw-resize}.layout_Border div[draggable=true] .dragHandle_w{cursor:w-resize}.layout_Border div[draggable=false]>div>.dragHandle{display:none}.layout_Border .grid-drop-target{position:fixed;box-sizing:border-box;border:2px dashed #7f8c8d;border-radius:0;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6464641a 4px,#6464641a 8px)}.layout_Border .grid-drop-target.drop-target-over{border:2px dashed #179BD7;background:repeating-linear-gradient(-45deg,#0000,#0000 6px,#119bd71a 6px,#119bd71a 12px)}.layout_Border2{display:flex;flex-direction:column}.layout_Border2>.body{margin:0;padding:0;display:flex;flex-flow:row}.layout_Border2>.body>.center{flex:1}.layout_Border2>.header{display:block}.layout_Border2>.footer{display:block}.layout_Carousel>div{position:relative;overflow:hidden}.layout_Carousel>div>.carouselItem{position:absolute}.layout_Modal-header{background-color:#3f51b5;overflow:hidden}.layout_Modal-body{background-color:#fff;overflow-y:scroll;overflow-x:hidden}.layout_Modal-title,.layout_Modal-annotations{position:absolute}.layout_Modal-closeButton{cursor:pointer}.layout_Modal-closeButton:hover{opacity:.7}.layout_Modal-closeButton:active{opacity:.5}.layout_Modal-fade{position:fixed;background-color:#000;opacity:.5;z-index:10000}.layout_Modal-content{position:fixed;background-color:#fff;z-index:10100}.layout_Modal-fade-hidden{display:none}.layout_Modal-fadeClickable{cursor:pointer}.layout_ChartPanel .series.highlight{stroke-width:2px;opacity:1}.layout_ChartPanel .series.lowlight{opacity:.3!important}.layout_FlexGrid{display:flex}.FlexGrid-list-item{overflow:hidden;border-style:solid;flex-grow:1}.layout_Grid>.ddCell{position:absolute}.layout_Grid>.laneBackground{position:absolute;border-style:solid;border-width:1px;background:#f5f5f5}.layout_Grid>.lane{position:absolute;border-style:none;opacity:.25;border-radius:0;pointer-events:none}.layout_Grid>.ddCell.draggable{border-style:solid;border-width:1px;background-color:#f8f8ff;border-radius:0;cursor:move}.layout_Grid>.ddCell.draggable>.resizeHandle{bottom:0;right:0;width:8px;height:8px;border-style:none;position:absolute;cursor:nwse-resize}.layout_Grid>.ddCell.draggable .resizeHandleDisplay{bottom:2px;right:2px;width:4px;height:4px;border-style:solid;border-left-width:0px;border-top-width:0px;border-right-width:2px;border-bottom-width:2px;border-color:#a9a9a9;background-color:none;position:absolute}.layout_Grid>.ddCell.draggable .resizeHandleDisplay:hover{border-color:orange}.layout_Grid>.dragging{border-style:solid;border-width:1px;border-color:gray;border-radius:0;position:absolute;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6464641a 4px,#6464641a 8px)}.layout_Grid>.resizing{border-style:solid;border-width:1px;border-color:gray;background-color:orange;border-radius:0;position:absolute;opacity:.3;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,orange 4px,orange 8px)}.layout_Grid>.ddCell.draggable .common_Widget.selected{border-style:solid;border-width:1px;border-color:red;background-color:gray;border-radius:0;position:absolute;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6400001a 4px,#6400001a 8px)}.layout_Grid #drag-me:before{content:"#" attr(id);font-weight:700}.layout_Layered{pointer-events:none}.layout_Layered>.container>.content{position:absolute}.layout_Layered>.container>.content>div>.common_Widget,.layout_Layered>.container>.content>div>svg>.common_Widget{pointer-events:all}.layout_Tabbed .tab-button{position:relative;top:1px;display:inline-block;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;background-color:transparent;margin-right:4px;padding:2px 2px 4px;background-color:#ccc}.layout_Tabbed .tab-button.active{background-color:#fff;z-index:999}.layout_Tabbed .on_bottom .tab-button{border-bottom:1px solid #ddd;border-top:none;top:-1px}.layout_Toolbar{height:100%;background-color:#ddd;white-space:nowrap;overflow:hidden}.layout_Toolbar .toolbar-title{display:inline-block;position:relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);margin-left:4px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layout_Toolbar .toolbar-child{position:relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);float:right;margin-left:4px;margin-right:4px;line-height:16px}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
3987
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode('.layout_AbsoluteSurface{pointer-events:none!important}.layout_AbsoluteSurface>.placeholder{position:relative;overflow:hidden;pointer-events:all}.layout_Accordion>ul{position:relative}.layout_Accordion.open>span{font-style:italic}.layout_Accordion.closed>ul{height:0px;overflow:hidden}.layout_Accordion.open>ul{display:block}.layout_Accordion>.collapsible-icon,.layout_Accordion>.collapsible-title{cursor:pointer;box-sizing:border-box}.layout_Accordion>.collapsible-title{display:block;width:100%}.layout_Accordion>.collapsible-title{font-size:13px;color:#fff;padding:4px 8px;height:26px;-webkit-box-shadow:inset 0px -1px 1px 0px rgba(0,0,0,.2);-moz-box-shadow:inset 0px -1px 1px 0px rgba(0,0,0,.2);box-shadow:inset 0 -1px 1px #0003}.layout_Accordion li{background-color:#fff}.layout_Accordion>ul,.layout_Accordion>.collapsible-title{background-color:#333}.layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion>.collapsible-title{background-color:#555}.layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#777}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#999}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#bbb}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#ccc}.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion .layout_Accordion>.collapsible-title{background-color:#ddd}.layout_Accordion>ul,.layout_Accordion>span{padding-left:0}.layout_Accordion .layout_Accordion>ul,.layout_Accordion .layout_Accordion>span{padding-left:12px}.layout_Accordion>.collapsible-title:before{padding:4px 8px;position:absolute;left:0;top:0}.layout_Accordion>.collapsible-icon{position:absolute;top:0;right:0;width:24px;height:24px;color:#fff}.layout_Surface{box-sizing:border-box;margin:0;border:1px solid #e5e5e5;overflow:hidden;height:100%;width:100%}.layout_Surface.shadow2{box-shadow:0 2px 2px #00000024,0 3px 1px -2px #0003,0 1px 5px #0000001f}.layout_Surface>h3{margin:0;padding:2px;background-color:#e5e5e5}.layout_Surface .html-button-container{position:absolute;right:0;top:3px}.layout_Surface>div{padding:8px}.layout_Surface .html-button-container .surface-button{margin-right:5px}.layout_Surface .html-button-container .surface-button i{opacity:.8}.layout_Surface .html-button-container .surface-button:hover{opacity:1}.layout_Surface .html-button-container .surface-button:active{opacity:.5}div[draggable=true].hideDragCellContent.content-icon:before{content:"";font-family:FontAwesome;position:absolute;top:calc(50% - 74px);left:calc(50% - 56px);font-size:100px}div[draggable=true].hideDragCellContent.content-icon-Line:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Pie:before{top:calc(50% - 72px);left:calc(50% - 45px);content:""}div[draggable=true].hideDragCellContent.content-icon-Area:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Gauge:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Table:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Form:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Grid:before,div[draggable=true].hideDragCellContent.content-icon-Graph:before,div[draggable=true].hideDragCellContent.content-icon-Border:before,div[draggable=true].hideDragCellContent.content-icon-Tabbed:before,div[draggable=true].hideDragCellContent.content-icon-Accordion:before,div[draggable=true].hideDragCellContent.content-icon-MultiChart:before,div[draggable=true].hideDragCellContent.content-icon-MultiChartSurface:before{content:""}div[draggable=true].hideDragCellContent.content-icon-ChoroplethStates:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethStatesHeat:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethCounties:before,div[draggable=true].hideDragCellContent.content-icon-ChoroplethCountries:before,div[draggable=true].hideDragCellContent.content-icon-GMap:before,div[draggable=true].hideDragCellContent.content-icon-GMapHeat:before,div[draggable=true].hideDragCellContent.content-icon-GMapGraph:before{content:""}div[draggable=true].hideDragCellContent.content-icon-Text:before,div[draggable=true].hideDragCellContent.content-icon-TextBox:before,div[draggable=true].hideDragCellContent.content-icon-FAChar:before{content:""}.layout_Cell .update-indicator{box-sizing:border-box;position:absolute;top:0;left:0;padding:0;z-index:1000;border-width:0px;border-style:solid;pointer-events:none}.layout_Border{width:100%;height:100%}.layout_Border>.border-content{width:100%;height:100%;position:relative}.layout_Border>.borderHandle{width:6px;height:6px;background-color:#444;opacity:.3;position:absolute;visibility:hidden}.layout_Border.design-mode>.borderHandle{visibility:visible}.layout_Border>.borderHandle:hover{background-color:#666}.layout_Border>.borderHandle.borderHandleDisabled{display:none}.layout_Border>.borderHandle_top,.layout_Border>.borderHandle_bottom{cursor:ns-resize}.layout_Border>.borderHandle_left,.layout_Border>.borderHandle_right{cursor:ew-resize}.layout_Border .cell{border-radius:5px;border:1px solid #e5e5e5;display:inline-block;overflow:hidden}.layout_Border .cell h2{margin:0;padding-top:4px;-webkit-margin:0px;text-align:center}.layout_Border .layout_BorderCell.over{border:2px dashed #000}.layout_Border .dragItem{z-index:-1;opacity:.33}.layout_Border .notDragItem{z-index:-1;opacity:1}.layout_Border div[draggable=true]{opacity:.75;cursor:default}.layout_Border div[draggable=true] .dragHandle{opacity:1}.layout_Border div[draggable=true] .dragHandle_n,.layout_Border div[draggable=true] .dragHandle_e,.layout_Border div[draggable=true] .dragHandle_s,.layout_Border div[draggable=true] .dragHandle_w{background-color:#aaa}.layout_Border div[draggable=true] .dragHandle_nw,.layout_Border div[draggable=true] .dragHandle_ne,.layout_Border div[draggable=true] .dragHandle_se,.layout_Border div[draggable=true] .dragHandle_sw{background-color:#333}.layout_Border div[draggable=true] .dragHandle_nw{cursor:nw-resize}.layout_Border div[draggable=true] .dragHandle_n{cursor:n-resize}.layout_Border div[draggable=true] .dragHandle_ne{cursor:ne-resize}.layout_Border div[draggable=true] .dragHandle_e{cursor:e-resize}.layout_Border div[draggable=true] .dragHandle_se{cursor:se-resize}.layout_Border div[draggable=true] .dragHandle_s{cursor:s-resize}.layout_Border div[draggable=true] .dragHandle_sw{cursor:sw-resize}.layout_Border div[draggable=true] .dragHandle_w{cursor:w-resize}.layout_Border div[draggable=false]>div>.dragHandle{display:none}.layout_Border .grid-drop-target{position:fixed;box-sizing:border-box;border:2px dashed #7f8c8d;border-radius:0;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6464641a 4px,#6464641a 8px)}.layout_Border .grid-drop-target.drop-target-over{border:2px dashed #179BD7;background:repeating-linear-gradient(-45deg,#0000,#0000 6px,#119bd71a 6px,#119bd71a 12px)}.layout_Border2{display:flex;flex-direction:column}.layout_Border2>.body{margin:0;padding:0;display:flex;flex-flow:row}.layout_Border2>.body>.center{flex:1}.layout_Border2>.header{display:block}.layout_Border2>.footer{display:block}.layout_Carousel>div{position:relative;overflow:hidden}.layout_Carousel>div>.carouselItem{position:absolute}.layout_Modal-header{background-color:#3f51b5;overflow:hidden}.layout_Modal-body{background-color:#fff;overflow-y:scroll;overflow-x:hidden}.layout_Modal-title,.layout_Modal-annotations{position:absolute}.layout_Modal-closeButton{cursor:pointer}.layout_Modal-closeButton:hover{opacity:.7}.layout_Modal-closeButton:active{opacity:.5}.layout_Modal-fade{position:fixed;background-color:#000;opacity:.5;z-index:10000}.layout_Modal-content{position:fixed;background-color:#fff;z-index:10100}.layout_Modal-fade-hidden{display:none}.layout_Modal-fadeClickable{cursor:pointer}.layout_ChartPanel .series.highlight{stroke-width:2px;opacity:1}.layout_ChartPanel .series.lowlight{opacity:.3!important}.layout_FlexGrid{display:flex}.FlexGrid-list-item{overflow:hidden;border-style:solid;flex-grow:1}.layout_Grid>.ddCell{position:absolute}.layout_Grid>.laneBackground{position:absolute;border-style:solid;border-width:1px;background:#f5f5f5}.layout_Grid>.lane{position:absolute;border-style:none;opacity:.25;border-radius:0;pointer-events:none}.layout_Grid>.ddCell.draggable{border-style:solid;border-width:1px;background-color:#f8f8ff;border-radius:0;cursor:move}.layout_Grid>.ddCell.draggable>.resizeHandle{bottom:0;right:0;width:8px;height:8px;border-style:none;position:absolute;cursor:nwse-resize}.layout_Grid>.ddCell.draggable .resizeHandleDisplay{bottom:2px;right:2px;width:4px;height:4px;border-style:solid;border-left-width:0px;border-top-width:0px;border-right-width:2px;border-bottom-width:2px;border-color:#a9a9a9;background-color:none;position:absolute}.layout_Grid>.ddCell.draggable .resizeHandleDisplay:hover{border-color:orange}.layout_Grid>.dragging{border-style:solid;border-width:1px;border-color:gray;border-radius:0;position:absolute;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6464641a 4px,#6464641a 8px)}.layout_Grid>.resizing{border-style:solid;border-width:1px;border-color:gray;background-color:orange;border-radius:0;position:absolute;opacity:.3;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,orange 4px,orange 8px)}.layout_Grid>.ddCell.draggable .common_Widget.selected{border-style:solid;border-width:1px;border-color:red;background-color:gray;border-radius:0;position:absolute;background:repeating-linear-gradient(-45deg,#0000,#0000 4px,#6400001a 4px,#6400001a 8px)}.layout_Grid #drag-me:before{content:"#" attr(id);font-weight:700}.layout_Layered{pointer-events:none}.layout_Layered>.container>.content{position:absolute}.layout_Layered>.container>.content>div>.common_Widget,.layout_Layered>.container>.content>div>svg>.common_Widget{pointer-events:all}.layout_Tabbed .tab-button{position:relative;top:1px;display:inline-block;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;background-color:transparent;margin-right:4px;padding:2px 2px 4px;background-color:#ccc}.layout_Tabbed .tab-button.active{background-color:#fff;z-index:999}.layout_Tabbed .on_bottom .tab-button{border-bottom:1px solid #ddd;border-top:none;top:-1px}.layout_Toolbar{height:100%;background-color:#ddd;white-space:nowrap;overflow:hidden}.layout_Toolbar .toolbar-title{display:inline-block;position:relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);margin-left:4px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layout_Toolbar .toolbar-child{position:relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);float:right;margin-left:4px;margin-right:4px;line-height:16px}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
|