You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
724 lines
26 KiB
724 lines
26 KiB
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.ChartType = exports.SelectionType = exports.PlayPause = exports.ToggleIcon = exports.SpeedSelect = exports.Split = exports.BarChart = exports.LineChart = exports.Value = exports.Range = exports.Pause = exports.Play = exports.Forward = exports.Backward = exports.Reset = exports.IconBase = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var util_1 = require("@antv/util");
|
|
var core_1 = require("../../core");
|
|
var shapes_1 = require("../../shapes");
|
|
var util_2 = require("../../util");
|
|
var indicator_1 = require("../indicator");
|
|
var select_1 = require("../select");
|
|
var IconBase = /** @class */ (function (_super) {
|
|
tslib_1.__extends(IconBase, _super);
|
|
function IconBase(options) {
|
|
var _this = _super.call(this, (0, util_2.deepAssign)({}, { style: { backgroundOpacity: IconBase.backgroundOpacities.default } }, IconBase.defaultOptions, options)) || this;
|
|
/** hover 时是否显示背景 */
|
|
_this.showBackground = true;
|
|
_this.background = _this.appendChild(new shapes_1.Rect({}));
|
|
_this.icon = _this.appendChild(new shapes_1.Group({}));
|
|
return _this;
|
|
}
|
|
Object.defineProperty(IconBase.prototype, "label", {
|
|
get: function () {
|
|
return 'BaseIcon';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(IconBase.prototype, "lineWidth", {
|
|
get: function () {
|
|
return Math.log10(this.attributes.size);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(IconBase.prototype, "padding", {
|
|
get: function () {
|
|
return (0, util_2.parseSeriesAttr)(this.attributes.size / 5);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(IconBase.prototype, "iconSize", {
|
|
get: function () {
|
|
var size = this.attributes.size;
|
|
var _a = tslib_1.__read(this.padding, 4), top = _a[0], right = _a[1], bottom = _a[2], left = _a[3];
|
|
return Math.max(size - Math.max(left + right, top + bottom), this.lineWidth * 2 + 1);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
IconBase.prototype.renderBackground = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, size = _a.size;
|
|
var halfSize = size / 2;
|
|
var backgroundStyle = (0, util_2.subStyleProps)(this.attributes, 'background');
|
|
this.background.attr(tslib_1.__assign({ x: x - halfSize, y: y - halfSize, width: size, height: size }, backgroundStyle));
|
|
};
|
|
IconBase.prototype.showIndicator = function () {
|
|
if (!this.label)
|
|
return;
|
|
var size = this.attributes.size;
|
|
var _a = this.background.getBBox(), x = _a.x, y = _a.y;
|
|
this.indicator.update({ x: x + size / 2, y: y - 5, labelText: this.label, visibility: 'visible' });
|
|
};
|
|
IconBase.prototype.hideIndicator = function () {
|
|
this.indicator.update({ visibility: 'hidden' });
|
|
};
|
|
IconBase.prototype.connectedCallback = function () {
|
|
var _a;
|
|
_super.prototype.connectedCallback.call(this);
|
|
// indicator 脱离文档流，需要手动添加到 canvas
|
|
var size = this.attributes.size;
|
|
var _b = this.background.getBBox(), x = _b.x, y = _b.y;
|
|
var canvas = (_a = this.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
|
|
if (canvas) {
|
|
this.indicator = canvas.appendChild(new indicator_1.Indicator({
|
|
style: {
|
|
x: x + size / 2,
|
|
y: y - size / 2,
|
|
visibility: 'hidden',
|
|
position: 'top',
|
|
radius: 3,
|
|
zIndex: 100,
|
|
},
|
|
}));
|
|
}
|
|
};
|
|
IconBase.prototype.disconnectedCallback = function () {
|
|
this.indicator.destroy();
|
|
};
|
|
IconBase.prototype.render = function () {
|
|
this.renderIcon();
|
|
if (this.showBackground)
|
|
this.renderBackground();
|
|
};
|
|
IconBase.prototype.bindEvents = function () {
|
|
var _this = this;
|
|
var onClick = this.attributes.onClick;
|
|
this.addEventListener('click', function () {
|
|
onClick === null || onClick === void 0 ? void 0 : onClick(_this);
|
|
});
|
|
if (this.showBackground) {
|
|
var resetBackground_1 = function () { return _this.background.attr({ opacity: IconBase.backgroundOpacities.default }); };
|
|
var hoverBackground_1 = function () { return _this.background.attr({ opacity: IconBase.backgroundOpacities.hover }); };
|
|
var activeBackground_1 = function () { return _this.background.attr({ opacity: IconBase.backgroundOpacities.active }); };
|
|
this.addEventListener('pointerenter', function () {
|
|
hoverBackground_1();
|
|
_this.showIndicator();
|
|
});
|
|
this.addEventListener('pointerleave', function () {
|
|
resetBackground_1();
|
|
_this.hideIndicator();
|
|
});
|
|
this.addEventListener('pointerdown', function () {
|
|
activeBackground_1();
|
|
});
|
|
this.addEventListener('pointerup', function () {
|
|
resetBackground_1();
|
|
});
|
|
}
|
|
};
|
|
IconBase.tag = 'IconBase';
|
|
IconBase.defaultOptions = {
|
|
style: {
|
|
x: 0,
|
|
y: 0,
|
|
size: 10,
|
|
color: '#565758',
|
|
backgroundRadius: 4,
|
|
backgroundFill: '#e2e2e2',
|
|
},
|
|
};
|
|
IconBase.backgroundOpacities = {
|
|
default: 0,
|
|
hover: 0.8,
|
|
active: 1,
|
|
};
|
|
return IconBase;
|
|
}(core_1.Component));
|
|
exports.IconBase = IconBase;
|
|
var arrow = function (size, color) {
|
|
if (color === void 0) { color = '#565758'; }
|
|
return new shapes_1.Path({
|
|
style: {
|
|
fill: color,
|
|
d: "M ".concat(size, ",").concat(size, " L -").concat(size, ",0 L ").concat(size, ",-").concat(size, " Z"),
|
|
transformOrigin: 'center',
|
|
},
|
|
});
|
|
};
|
|
/** 重置 */
|
|
var Reset = /** @class */ (function (_super) {
|
|
tslib_1.__extends(Reset, _super);
|
|
function Reset() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Reset.prototype.arcPath = function (cx, cy, radius) {
|
|
var _a = tslib_1.__read([radius, radius], 2), rx = _a[0], ry = _a[1];
|
|
var getPosByAngle = function (angle) { return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]; };
|
|
var _b = tslib_1.__read(getPosByAngle((-5 / 4) * Math.PI), 2), x1 = _b[0], y1 = _b[1];
|
|
var _c = tslib_1.__read(getPosByAngle((1 / 4) * Math.PI), 2), x2 = _c[0], y2 = _c[1];
|
|
return "M".concat(x1, ",").concat(y1, ",A").concat(rx, ",").concat(ry, ",0,1,1,").concat(x2, ",").concat(y2);
|
|
};
|
|
Object.defineProperty(Reset.prototype, "label", {
|
|
get: function () {
|
|
return '重置';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Reset.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var size = this.iconSize;
|
|
var lineWidth = this.lineWidth;
|
|
var arrowSize = lineWidth + 0.5;
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.reset', 'path')
|
|
.styles({
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
d: this.arcPath(x, y, size / 2 - lineWidth),
|
|
markerStart: arrow(arrowSize, color),
|
|
});
|
|
};
|
|
return Reset;
|
|
}(IconBase));
|
|
exports.Reset = Reset;
|
|
/** 快退 */
|
|
var Backward = /** @class */ (function (_super) {
|
|
tslib_1.__extends(Backward, _super);
|
|
function Backward() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(Backward.prototype, "label", {
|
|
get: function () {
|
|
return '快退';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Backward.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var size = this.iconSize;
|
|
var deltaX = size / 2;
|
|
var deltaY = size / 2 / Math.pow(3, 0.5);
|
|
var points = [
|
|
[x, y],
|
|
[x, y - deltaY],
|
|
[x - deltaX, y],
|
|
[x, y + deltaY],
|
|
[x, y],
|
|
[x + deltaX, y - deltaY],
|
|
[x + deltaX, y + deltaY],
|
|
[x, y],
|
|
];
|
|
(0, util_2.select)(this.icon).maybeAppend('.backward', 'polygon').styles({
|
|
points: points,
|
|
fill: color,
|
|
});
|
|
};
|
|
return Backward;
|
|
}(IconBase));
|
|
exports.Backward = Backward;
|
|
/** 快进 */
|
|
var Forward = /** @class */ (function (_super) {
|
|
tslib_1.__extends(Forward, _super);
|
|
function Forward() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(Forward.prototype, "label", {
|
|
get: function () {
|
|
return '快进';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Forward.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var size = this.iconSize;
|
|
var deltaX = size / 2;
|
|
var deltaY = size / 2 / Math.pow(3, 0.5);
|
|
var points = [
|
|
[x, y],
|
|
[x, y - deltaY],
|
|
[x + deltaX, y],
|
|
[x, y + deltaY],
|
|
[x, y],
|
|
[x - deltaX, y - deltaY],
|
|
[x - deltaX, y + deltaY],
|
|
[x, y],
|
|
];
|
|
(0, util_2.select)(this.icon).maybeAppend('.forward', 'polygon').styles({
|
|
points: points,
|
|
fill: color,
|
|
});
|
|
};
|
|
return Forward;
|
|
}(IconBase));
|
|
exports.Forward = Forward;
|
|
var Play = /** @class */ (function (_super) {
|
|
tslib_1.__extends(Play, _super);
|
|
function Play() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(Play.prototype, "label", {
|
|
get: function () {
|
|
return '播放';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Play.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var size = this.iconSize;
|
|
var deltaX = (size / 3) * Math.pow(3, 0.5) * 0.8;
|
|
var points = [
|
|
[x + deltaX, y],
|
|
[x - deltaX / 2, y - (size / 2) * 0.8],
|
|
[x - deltaX / 2, y + (size / 2) * 0.8],
|
|
[x + deltaX, y],
|
|
];
|
|
(0, util_2.select)(this.icon).maybeAppend('.play', 'polygon').styles({
|
|
points: points,
|
|
fill: color,
|
|
});
|
|
};
|
|
return Play;
|
|
}(IconBase));
|
|
exports.Play = Play;
|
|
var Pause = /** @class */ (function (_super) {
|
|
tslib_1.__extends(Pause, _super);
|
|
function Pause() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(Pause.prototype, "label", {
|
|
get: function () {
|
|
return '暂停';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Pause.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var size = this.iconSize;
|
|
var deltaX = size / 3;
|
|
var points = [
|
|
[x - deltaX, y - size / 2],
|
|
[x - deltaX, y + size / 2],
|
|
[x - deltaX / 2, y + size / 2],
|
|
[x - deltaX / 2, y - size / 2],
|
|
[x - deltaX, y - size / 2],
|
|
[x + deltaX / 2, y - size / 2],
|
|
[x + deltaX / 2, y + size / 2],
|
|
[x + deltaX, y + size / 2],
|
|
[x + deltaX, y - size / 2],
|
|
];
|
|
(0, util_2.select)(this.icon).maybeAppend('.pause', 'polygon').styles({
|
|
points: points,
|
|
fill: color,
|
|
});
|
|
};
|
|
return Pause;
|
|
}(IconBase));
|
|
exports.Pause = Pause;
|
|
/** 时间范围 */
|
|
var Range = /** @class */ (function (_super) {
|
|
tslib_1.__extends(Range, _super);
|
|
function Range() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(Range.prototype, "label", {
|
|
get: function () {
|
|
return '范围时间';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Range.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
|
|
var gap = lineWidth;
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.left-line', 'line')
|
|
.styles({
|
|
x1: x - size / 2,
|
|
y1: y - size / 2,
|
|
x2: x - size / 2,
|
|
y2: y + size / 2,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
});
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.right-line', 'line')
|
|
.styles({
|
|
x1: x + size / 2,
|
|
y1: y - size / 2,
|
|
x2: x + size / 2,
|
|
y2: y + size / 2,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
});
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.left-arrow', 'line')
|
|
.styles({
|
|
x1: x,
|
|
y1: y,
|
|
x2: x - size / 2 + gap * 2,
|
|
y2: y,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
markerEnd: arrow(lineWidth * 2, color),
|
|
});
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.right-arrow', 'line')
|
|
.styles({
|
|
x1: x,
|
|
y1: y,
|
|
x2: x + size / 2 - gap * 2,
|
|
y2: y,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
markerEnd: arrow(lineWidth * 2, color),
|
|
});
|
|
};
|
|
return Range;
|
|
}(IconBase));
|
|
exports.Range = Range;
|
|
/** 值范围 */
|
|
var Value = /** @class */ (function (_super) {
|
|
tslib_1.__extends(Value, _super);
|
|
function Value() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(Value.prototype, "label", {
|
|
get: function () {
|
|
return '单一时间';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Value.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.line', 'line')
|
|
.styles({
|
|
x1: x,
|
|
y1: y - size / 2,
|
|
x2: x,
|
|
y2: y + size / 2,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
});
|
|
var gap = lineWidth;
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.left-arrow', 'line')
|
|
.styles({
|
|
x1: x - size / 2 - gap * 2,
|
|
y1: y,
|
|
x2: x - gap * 2,
|
|
y2: y,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
markerEnd: arrow(lineWidth * 2, color),
|
|
});
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.right-arrow', 'line')
|
|
.styles({
|
|
x1: x + size / 2 + gap * 2,
|
|
y1: y,
|
|
x2: x + gap * 2,
|
|
y2: y,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
markerEnd: arrow(lineWidth * 2, color),
|
|
});
|
|
};
|
|
return Value;
|
|
}(IconBase));
|
|
exports.Value = Value;
|
|
var getCoordinatePoints = function (size) {
|
|
return [
|
|
[-size / 2, -size / 2],
|
|
[-size / 2, size / 2],
|
|
[size / 2, size / 2],
|
|
];
|
|
};
|
|
var LineChart = /** @class */ (function (_super) {
|
|
tslib_1.__extends(LineChart, _super);
|
|
function LineChart() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(LineChart.prototype, "label", {
|
|
get: function () {
|
|
return '折线图';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
LineChart.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
|
|
var gap = lineWidth;
|
|
var deltaX = (size - gap * 2 - lineWidth) / 4;
|
|
var deltaY = (size - gap * 2 - lineWidth) / 2;
|
|
var _c = tslib_1.__read([x - size / 2 + gap, y + size / 2 - gap * 2], 2), ox = _c[0], oy = _c[1];
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.coordinate', 'polyline')
|
|
.styles({
|
|
points: getCoordinatePoints(size).map(function (_a) {
|
|
var _b = tslib_1.__read(_a, 2), px = _b[0], py = _b[1];
|
|
return [px + x, py + y];
|
|
}),
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
});
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.line', 'polyline')
|
|
.styles({
|
|
points: [
|
|
[ox, oy],
|
|
[ox + deltaX, oy - deltaY],
|
|
[ox + deltaX * 2, oy],
|
|
[ox + deltaX * 4, oy - deltaY * 2],
|
|
],
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
});
|
|
};
|
|
return LineChart;
|
|
}(IconBase));
|
|
exports.LineChart = LineChart;
|
|
var BarChart = /** @class */ (function (_super) {
|
|
tslib_1.__extends(BarChart, _super);
|
|
function BarChart() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(BarChart.prototype, "label", {
|
|
get: function () {
|
|
return '条形图';
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(BarChart.prototype, "data", {
|
|
get: function () {
|
|
return [1, 4, 2, 4, 3];
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
BarChart.prototype.renderIcon = function () {
|
|
var data = this.data;
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
|
|
var gap = lineWidth;
|
|
var deltaX = (size - gap) / data.length;
|
|
var deltaY = (size - gap * 2) / 4;
|
|
var _c = tslib_1.__read([x - size / 2 + gap * 2, y + size / 2 - gap], 2), ox = _c[0], oy = _c[1];
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.coordinate', 'polyline')
|
|
.styles({
|
|
points: getCoordinatePoints(size).map(function (_a) {
|
|
var _b = tslib_1.__read(_a, 2), px = _b[0], py = _b[1];
|
|
return [px + x, py + y];
|
|
}),
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
});
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.bars', 'g')
|
|
.selectAll('.column')
|
|
.data(this.data.map(function (value, index) { return ({ value: value, index: index }); }))
|
|
.join(function (enter) {
|
|
return enter
|
|
.append('line')
|
|
.attr('className', 'column')
|
|
.style('x1', function (_a) {
|
|
var index = _a.index;
|
|
return ox + deltaX * index;
|
|
})
|
|
.style('y1', oy)
|
|
.style('x2', function (_a) {
|
|
var index = _a.index;
|
|
return ox + deltaX * index;
|
|
})
|
|
.style('y2', function (_a) {
|
|
var value = _a.value;
|
|
return oy - deltaY * value;
|
|
})
|
|
.styles({
|
|
y1: oy,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
});
|
|
});
|
|
};
|
|
return BarChart;
|
|
}(IconBase));
|
|
exports.BarChart = BarChart;
|
|
/** 分割线 */
|
|
var Split = /** @class */ (function (_super) {
|
|
tslib_1.__extends(Split, _super);
|
|
function Split(options) {
|
|
var _this = _super.call(this, (0, util_2.deepAssign)({}, { style: { color: '#d8d9d9' } }, options)) || this;
|
|
_this.showBackground = false;
|
|
return _this;
|
|
}
|
|
Split.prototype.renderIcon = function () {
|
|
var _a = this.attributes, x = _a.x, y = _a.y, color = _a.color;
|
|
var _b = this, size = _b.iconSize, lineWidth = _b.lineWidth;
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.split', 'line')
|
|
.styles({
|
|
x1: x,
|
|
y1: y - size / 2,
|
|
x2: x,
|
|
y2: y + size / 2,
|
|
stroke: color,
|
|
lineWidth: lineWidth,
|
|
});
|
|
};
|
|
return Split;
|
|
}(IconBase));
|
|
exports.Split = Split;
|
|
var SpeedSelect = /** @class */ (function (_super) {
|
|
tslib_1.__extends(SpeedSelect, _super);
|
|
function SpeedSelect() {
|
|
var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__read(arguments), false)) || this;
|
|
_this.showBackground = false;
|
|
return _this;
|
|
}
|
|
Object.defineProperty(SpeedSelect.prototype, "padding", {
|
|
get: function () {
|
|
return (0, util_2.parseSeriesAttr)(0);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
SpeedSelect.prototype.renderIcon = function () {
|
|
var iconSize = this.iconSize;
|
|
var _a = this.attributes, x = _a.x, y = _a.y, _b = _a.speed, speed = _b === void 0 ? 1 : _b;
|
|
var inheritStyle = (0, util_1.omit)(this.attributes, [
|
|
'x',
|
|
'y',
|
|
'transform',
|
|
'transformOrigin',
|
|
'width',
|
|
'height',
|
|
'size',
|
|
'color',
|
|
'speed',
|
|
]);
|
|
var width = (0, util_1.clamp)(iconSize, 20, Infinity);
|
|
var height = 20;
|
|
var style = tslib_1.__assign(tslib_1.__assign({}, inheritStyle), { x: x - width / 2, y: y - height / 2, width: width, height: height, defaultValue: speed, bordered: false, showDropdownIcon: false, selectRadius: 2, dropdownPadding: this.padding, dropdownRadius: 2, dropdownSpacing: iconSize / 5, placeholderFontSize: iconSize / 2, optionPadding: 0, optionLabelFontSize: iconSize / 2, optionBackgroundRadius: 1, options: [
|
|
{ label: '1x', value: 1 },
|
|
{ label: '1.5x', value: 1.5 },
|
|
{ label: '2x', value: 2 },
|
|
] });
|
|
(0, util_2.select)(this.icon)
|
|
.maybeAppend('.speed', function () { return new select_1.Select({ style: style }); })
|
|
.attr('className', 'speed')
|
|
.each(function () {
|
|
this.update(style);
|
|
});
|
|
};
|
|
SpeedSelect.tag = 'SpeedSelect';
|
|
return SpeedSelect;
|
|
}(IconBase));
|
|
exports.SpeedSelect = SpeedSelect;
|
|
var ToggleIcon = /** @class */ (function (_super) {
|
|
tslib_1.__extends(ToggleIcon, _super);
|
|
function ToggleIcon(options) {
|
|
var _this = _super.call(this, options) || this;
|
|
_this.icon = _this.appendChild(new shapes_1.Group({}));
|
|
_this.currentType = _this.attributes.type;
|
|
return _this;
|
|
}
|
|
ToggleIcon.prototype.getType = function () {
|
|
return this.currentType;
|
|
};
|
|
ToggleIcon.prototype.render = function () {
|
|
var _this = this;
|
|
var _a = this.attributes, onChange = _a.onChange, restStyles = tslib_1.__rest(_a, ["onChange"]);
|
|
(0, util_2.select)(this.icon)
|
|
.selectAll('.icon')
|
|
.data([this.currentType])
|
|
.join(function (enter) {
|
|
return enter
|
|
.append(function (type) {
|
|
var _a;
|
|
var Ctor = (_a = _this.toggles.find(function (_a) {
|
|
var _b = tslib_1.__read(_a, 1), key = _b[0];
|
|
return key === type;
|
|
})) === null || _a === void 0 ? void 0 : _a[1];
|
|
if (!Ctor)
|
|
throw new Error("Invalid type: ".concat(type));
|
|
return new Ctor({});
|
|
})
|
|
.attr('className', 'icon')
|
|
.styles(restStyles, false)
|
|
.update({});
|
|
}, function (update) { return update.styles({ restStyles: restStyles }).update({}); }, function (exit) { return exit.remove(); });
|
|
};
|
|
ToggleIcon.prototype.bindEvents = function () {
|
|
var _this = this;
|
|
var onChange = this.attributes.onChange;
|
|
this.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
var nextIndex = (_this.toggles.findIndex(function (_a) {
|
|
var _b = tslib_1.__read(_a, 1), key = _b[0];
|
|
return key === _this.currentType;
|
|
}) + 1) % _this.toggles.length;
|
|
var nextType = _this.toggles[nextIndex][0];
|
|
onChange === null || onChange === void 0 ? void 0 : onChange(_this.currentType);
|
|
_this.currentType = nextType;
|
|
_this.render();
|
|
});
|
|
};
|
|
ToggleIcon.tag = 'ToggleIcon';
|
|
return ToggleIcon;
|
|
}(core_1.Component));
|
|
exports.ToggleIcon = ToggleIcon;
|
|
var PlayPause = /** @class */ (function (_super) {
|
|
tslib_1.__extends(PlayPause, _super);
|
|
function PlayPause(options) {
|
|
var _this = _super.call(this, (0, util_2.deepAssign)({}, { style: { type: 'play' } }, options)) || this;
|
|
_this.toggles = [
|
|
['play', Play],
|
|
['pause', Pause],
|
|
];
|
|
return _this;
|
|
}
|
|
return PlayPause;
|
|
}(ToggleIcon));
|
|
exports.PlayPause = PlayPause;
|
|
var SelectionType = /** @class */ (function (_super) {
|
|
tslib_1.__extends(SelectionType, _super);
|
|
function SelectionType(options) {
|
|
var _this = _super.call(this, (0, util_2.deepAssign)({}, { style: { type: 'range' } }, options)) || this;
|
|
_this.toggles = [
|
|
['range', Range],
|
|
['value', Value],
|
|
];
|
|
return _this;
|
|
}
|
|
return SelectionType;
|
|
}(ToggleIcon));
|
|
exports.SelectionType = SelectionType;
|
|
var ChartType = /** @class */ (function (_super) {
|
|
tslib_1.__extends(ChartType, _super);
|
|
function ChartType(options) {
|
|
var _this = _super.call(this, (0, util_2.deepAssign)({}, { style: { type: 'column' } }, options)) || this;
|
|
_this.toggles = [
|
|
['line', LineChart],
|
|
['column', BarChart],
|
|
];
|
|
return _this;
|
|
}
|
|
return ChartType;
|
|
}(ToggleIcon));
|
|
exports.ChartType = ChartType;
|
|
//# sourceMappingURL=icons.js.map
|