@visactor/vrender-components
Version:
components library for dp visualization
156 lines (150 loc) • 7.04 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.ColorContinuousLegend = void 0;
const vutils_1 = require("@visactor/vutils"), vscale_1 = require("@visactor/vscale"), base_1 = require("../base"), slider_1 = require("../../slider"), constant_1 = require("../constant"), register_1 = require("../register");
(0, register_1.loadColorContinuousLegendComponent)();
class ColorContinuousLegend extends base_1.LegendBase {
constructor(attributes, options) {
super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, ColorContinuousLegend.defaultAttributes, attributes)),
this.name = "colorLegend", this._onSliderToolipChange = e => {
const tooltipShape = this._slider.tooltipShape;
if (tooltipShape && e.detail && !(0, vutils_1.isNil)(e.detail.value)) {
const color = this._colorScale.scale(e.detail.value);
tooltipShape.setAttribute("fill", color);
}
this.dispatchEvent(e);
}, this._onSliderChange = e => {
this._updateColor(), this.dispatchEvent(e);
};
}
setSelected(value) {
this._slider && (this._slider.setValue(value), this._updateColor());
}
_renderContent() {
const {colors: colors, slidable: slidable, layout: layout, align: align, min: min, max: max, value: value, railWidth: railWidth, railHeight: railHeight, showHandler: showHandler = !0, handlerSize: handlerSize, handlerStyle: handlerStyle, railStyle: railStyle, trackStyle: trackStyle, startText: startText, endText: endText, handlerText: handlerText, showTooltip: showTooltip, tooltip: tooltip, inverse: inverse, disableTriggerEvent: disableTriggerEvent} = this.attribute, domain = [], step = (max - min) / (colors.length - 1);
for (let i = 0; i < colors.length; i++) domain.push(min + step * i);
this._colorScale = (new vscale_1.LinearScale).domain(domain, !0).range(colors),
this._color = this._getTrackColor();
const slider = new slider_1.Slider({
x: 0,
y: 0,
range: {
draggableTrack: !0
},
slidable: slidable,
layout: layout,
align: align,
min: min,
max: max,
value: value,
railWidth: railWidth,
railHeight: railHeight,
showHandler: showHandler,
handlerSize: handlerSize,
handlerStyle: handlerStyle,
railStyle: railStyle,
trackStyle: Object.assign({
fill: this._color
}, trackStyle),
startText: startText,
endText: endText,
handlerText: handlerText,
showTooltip: showTooltip,
tooltip: tooltip,
disableTriggerEvent: disableTriggerEvent,
inverse: inverse
});
this._innerView.add(slider), this._slider = slider, slider.translateTo(0 - slider.AABBBounds.x1, (this._title ? this._title.AABBBounds.height() + (0,
vutils_1.get)(this.attribute, "title.space", constant_1.DEFAULT_TITLE_SPACE) : 0) - slider.AABBBounds.y1),
this._updateColor();
}
_bindEvents() {
this.attribute.disableTriggerEvent || this._slider && (this._slider.addEventListener("change", this._onSliderChange),
this._slider.addEventListener("sliderTooltip", this._onSliderToolipChange));
}
_getTrackColor() {
const {colors: colors, layout: layout, inverse: inverse} = this.attribute;
if ((0, vutils_1.isEmpty)(colors)) return;
const count = colors.length;
if (1 === count) return colors[0];
const stops = [];
for (let i = 0; i < count; i++) {
const percent = i / (count - 1);
stops.push({
offset: percent,
color: colors[i]
});
}
const isHorizontal = "horizontal" === layout, res = {
gradient: "linear",
stops: stops,
x0: 0,
y0: 0,
x1: isHorizontal ? 1 : 0,
y1: isHorizontal ? 0 : 1
};
return inverse && (isHorizontal ? (res.x0 = 1, res.x1 = 0) : (res.y0 = 1, res.y1 = 0)),
res;
}
_updateColor() {
var _a;
const {layout: layout = "horizontal", colors: colors, railWidth: railWidth, railHeight: railHeight} = this.attribute, {startHandler: startHandler, endHandler: endHandler, track: track, attribute: attribute} = this._slider, {startValue: startValue, endValue: endValue, startPos: startPos, endPos: endPos} = this._slider.currentValue, handlerColor = null === (_a = attribute.handlerStyle) || void 0 === _a ? void 0 : _a.fill;
if (startHandler && !handlerColor) {
const startHandlerColor = this._colorScale.scale(startValue);
startHandler.setAttribute("fill", startHandlerColor);
}
if (endHandler && !handlerColor) {
const endHandlerColor = this._colorScale.scale(endValue);
endHandler.setAttribute("fill", endHandlerColor);
}
const railLen = "horizontal" === layout ? railWidth : railHeight;
if (Math.abs(startPos - endPos) !== railLen && colors && colors.length > 1) {
const stops = this._color.stops, start = Math.min(startPos, endPos), end = Math.max(startPos, endPos), startRatio = start / railLen, endRatio = end / railLen, range = endRatio - startRatio, betweenStops = stops.filter((stop => stop.offset > startRatio && stop.offset < endRatio)), minValue = Math.min(startValue, endValue), maxValue = Math.max(startValue, endValue), startColor = this._colorScale.scale(minValue), endColor = this._colorScale.scale(maxValue), newStops = [ {
offset: 0,
color: startColor
} ];
betweenStops.forEach((stop => {
newStops.push({
offset: (stop.offset - startRatio) / range,
color: stop.color
});
})), newStops.push({
offset: 1,
color: endColor
}), track.setAttribute("fill", Object.assign(Object.assign({}, this._color), {
stops: newStops
}));
}
}
}
exports.ColorContinuousLegend = ColorContinuousLegend, ColorContinuousLegend.defaultAttributes = {
layout: "horizontal",
title: {
align: "start",
space: constant_1.DEFAULT_TITLE_SPACE,
textStyle: {
fontSize: 12,
fontWeight: "bold",
fill: "rgba(46, 47, 50, 1)"
}
},
handlerSize: 10,
handlerStyle: {
fill: null,
lineWidth: 4,
stroke: "#fff",
outerBorder: {
distance: 2,
lineWidth: 1,
stroke: "#ccc"
}
},
tooltip: {
shapeStyle: {
lineWidth: 4,
stroke: "#fff"
}
}
};
//# sourceMappingURL=color.js.map