@visactor/vrender-components
Version:
components library for dp visualization
160 lines (156 loc) • 6.96 kB
JavaScript
import { AbstractComponent } from "../core/base";
import { merge } from "@visactor/vutils";
export class StoryLabelItem extends AbstractComponent {
constructor(attributes, options) {
super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, StoryLabelItem.defaultAttributes, attributes));
}
render() {
const {contentOffsetX: contentOffsetX, contentOffsetY: contentOffsetY, lineStyle: lineStyle, symbolStartStyle: symbolStartStyle, symbolEndStyle: symbolEndStyle, symbolStartOuterStyle: symbolStartOuterStyle, titleTop: titleTopText, titleBottom: titleBottomText, titleTopStyle: titleTopStyle, titleBottomStyle: titleBottomStyle, titleSpace: titleSpace, titleTopPanelStyle: titleTopPanelStyle, titleBottomPanelStyle: titleBottomPanelStyle, theme: theme} = this.attribute, group = this.createOrUpdateChild("label-item-container", {
x: 0,
y: 0,
zIndex: 1
}, "group"), symbolStart = group.createOrUpdateChild("label-item-symbol-start", Object.assign({
x: 0,
y: 0
}, symbolStartStyle), "symbol"), symbolEnd = group.createOrUpdateChild("label-item-symbol-end", Object.assign({
x: contentOffsetX,
y: contentOffsetY
}, symbolEndStyle), "symbol"), symbolStartOut = group.createOrUpdateChild("label-item-symbol-start-out", Object.assign({
x: 0,
y: 0
}, symbolStartOuterStyle), "symbol"), spaceW = titleSpace[0], spaceH = titleSpace[1], titleTopGroup = group.createOrUpdateChild("label-item-title-top-group", {
x: contentOffsetX,
y: contentOffsetY,
clip: !0
}, "group"), titleTop = titleTopGroup.createOrUpdateChild("label-item-title-top", Object.assign(Object.assign({
x: spaceW,
y: -spaceH,
text: titleTopText
}, titleTopStyle), {
textBaseline: "bottom",
textAlign: "left",
zIndex: 10
}), "text"), titleTopBounds = titleTop.AABBBounds;
contentOffsetX > 0 && titleTopGroup.setAttributes({
x: contentOffsetX - titleTopBounds.width() - 2 * spaceW
}), titleTopGroup.setAttributes({
width: titleTopBounds.width() + 2 * spaceW,
height: -titleTopBounds.height() - 2 * spaceH
});
const titleTopPanel = titleTopGroup.createOrUpdateChild("label-item-title-top-panel", Object.assign(Object.assign({}, titleTopPanelStyle), {
x: titleTopPanelStyle.padding.left,
y: (titleTopGroup.attribute.height > 0 ? 0 : titleTopGroup.attribute.height) + titleTopPanelStyle.padding.top,
width: titleTopGroup.attribute.width - titleTopPanelStyle.padding.left - titleTopPanelStyle.padding.right,
height: (titleTopGroup.attribute.height > 0 ? 1 : -1) * titleTopGroup.attribute.height - titleTopPanelStyle.padding.bottom - titleTopPanelStyle.padding.top,
scaleCenter: [ titleTopGroup.attribute.width / 2, titleTopGroup.attribute.height / 2 ]
}), "rect");
this._titleTopPanel = titleTopPanel;
const titleBottomGroup = group.createOrUpdateChild("label-item-title-bottom-group", {
x: contentOffsetX,
y: contentOffsetY,
clip: !0
}, "group"), titleBottom = titleBottomGroup.createOrUpdateChild("label-item-title-bottom", Object.assign(Object.assign({
x: spaceW,
y: spaceH,
text: titleBottomText
}, titleBottomStyle), {
textBaseline: "top",
textAlign: "left",
zIndex: 10
}), "text"), titleBottomBounds = titleBottom.AABBBounds;
contentOffsetX > 0 && titleBottomGroup.setAttributes({
x: contentOffsetX - titleBottomBounds.width() - 2 * spaceW
}), titleBottomGroup.setAttributes({
width: titleBottomBounds.width() + 2 * spaceW,
height: titleTopBounds.height() + 2 * spaceH
});
const titleBottomPanel = titleBottomGroup.createOrUpdateChild("label-item-title-bottom-panel", Object.assign(Object.assign({}, titleBottomPanelStyle), {
x: titleBottomPanelStyle.padding.left,
y: (titleBottomGroup.attribute.height > 0 ? 0 : titleBottomGroup.attribute.height) + titleBottomPanelStyle.padding.top,
width: titleBottomGroup.attribute.width - titleBottomPanelStyle.padding.left - titleBottomPanelStyle.padding.right,
height: (titleBottomGroup.attribute.height > 0 ? 1 : -1) * titleBottomGroup.attribute.height - titleBottomPanelStyle.padding.bottom - titleBottomPanelStyle.padding.top,
scaleCenter: [ titleBottomGroup.attribute.width / 2, titleBottomGroup.attribute.height / 2 ]
}), "rect");
this._titleBottomPanel = titleBottomPanel;
const maxTextWidth = Math.max(titleTop.AABBBounds.width(), titleBottom.AABBBounds.width()) + 2 * spaceW, points = [ {
x: 0,
y: 0
}, contentOffsetX > 0 ? {
x: contentOffsetX - maxTextWidth,
y: contentOffsetY
} : {
x: contentOffsetX + maxTextWidth,
y: contentOffsetY
}, {
x: contentOffsetX,
y: contentOffsetY
} ];
if ("simple" === theme) {
points.pop();
const p = points[1];
symbolEnd.setAttributes(p);
}
const line = group.createOrUpdateChild("label-item-line", Object.assign(Object.assign({
x: 0,
y: 0
}, lineStyle), {
points: points
}), "line");
this._symbolEnd = symbolEnd, this._symbolStart = symbolStart, this._symbolStartOuter = symbolStartOut,
this._titleTop = titleTop, this._titleBottom = titleBottom, this._line = line;
}
}
StoryLabelItem.defaultAttributes = {
contentOffsetX: 100,
contentOffsetY: -60,
titleTopStyle: {
fontSize: 12,
fill: "white"
},
titleBottomStyle: {
fontSize: 12,
fill: "white"
},
lineStyle: {
stroke: "white",
lineWidth: 1
},
symbolStartStyle: {
symbolType: "circle",
size: 3,
fill: "white"
},
symbolEndStyle: {
symbolType: "circle",
size: 3,
fill: "white"
},
symbolStartOuterStyle: {
symbolType: "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0",
size: 8,
stroke: "white"
},
titleSpace: [ 2, 2 ],
titleTopPanelStyle: {
visible: !1,
padding: {
left: 0,
right: 0,
bottom: 2,
top: 2
},
cornerRadius: 3
},
titleBottomPanelStyle: {
visible: !1,
padding: {
left: 0,
right: 0,
bottom: 2,
top: 2
},
cornerRadius: 3
},
theme: "default"
};
//# sourceMappingURL=label-item.js.map