@visactor/vrender-components 0.0.38-brush.2-alpha.0

package/README.md

@@ -0,0 +1,9 @@
+# @visactor/components
+
+## Description
+
+## Usage
+
+```typescript
+import { xxx } from '@visactor/components';
+```

package/cjs/axis/animate/group-fade.d.ts

@@ -0,0 +1,17 @@
+import { ACustomAnimate, EasingType, IGroup } from '@visactor/vrender';
+export declare class GroupFadeIn extends ACustomAnimate<any> {
+    target: IGroup;
+    constructor(from: any, to: any, duration: number, easing: EasingType);
+    getEndProps(): Record<string, any>;
+    onBind(): void;
+    onEnd(): void;
+    onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
+}
+export declare class GroupFadeOut extends ACustomAnimate<any> {
+    target: IGroup;
+    constructor(from: any, to: any, duration: number, easing: EasingType);
+    getEndProps(): Record<string, any>;
+    onBind(): void;
+    onEnd(): void;
+    onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
+}

package/cjs/axis/animate/group-fade.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.GroupFadeOut = exports.GroupFadeIn = void 0;
+
+const vrender_1 = require("@visactor/vrender");
+
+class GroupFadeIn extends vrender_1.ACustomAnimate {
+    constructor(from, to, duration, easing) {
+        super(null, null, duration, easing);
+    }
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.setTheme({
+            common: {
+                opacity: 0
+            }
+        });
+    }
+    onEnd() {
+        this.target.setTheme({
+            common: {
+                opacity: 1
+            }
+        });
+    }
+    onUpdate(end, ratio, out) {
+        this.target.setTheme({
+            common: {
+                opacity: ratio
+            }
+        });
+    }
+}
+
+exports.GroupFadeIn = GroupFadeIn;
+
+class GroupFadeOut extends vrender_1.ACustomAnimate {
+    constructor(from, to, duration, easing) {
+        super(null, null, duration, easing);
+    }
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.setTheme({
+            common: {
+                opacity: 1
+            }
+        });
+    }
+    onEnd() {
+        this.target.setTheme({
+            common: {
+                opacity: 0
+            }
+        });
+    }
+    onUpdate(end, ratio, out) {
+        this.target.setTheme({
+            common: {
+                opacity: 1 - ratio
+            }
+        });
+    }
+}
+
+exports.GroupFadeOut = GroupFadeOut;
+//# sourceMappingURL=group-fade.js.map

package/cjs/axis/animate/group-fade.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/axis/animate/group-fade.ts"],"names":[],"mappings":";;;AAGA,+CAAuE;AAEvE,MAAa,WAAY,SAAQ,wBAAmB;IAGlD,YAAY,IAAS,EAAE,EAAO,EAAE,QAAgB,EAAE,MAAkB;QAClE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,WAAW;QACT,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACnB,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC;aACX;SACF,CAAC,CAAC;QACH,OAAO;IACT,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACnB,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC;aACX;SACF,CAAC,CAAC;QACH,OAAO;IACT,CAAC;IAED,QAAQ,CAAC,GAAY,EAAE,KAAa,EAAE,GAAwB;QAC5D,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACnB,MAAM,EAAE;gBACN,OAAO,EAAE,KAAK;aACf;SACF,CAAC,CAAC;IACL,CAAC;CACF;AApCD,kCAoCC;AAED,MAAa,YAAa,SAAQ,wBAAmB;IAGnD,YAAY,IAAS,EAAE,EAAO,EAAE,QAAgB,EAAE,MAAkB;QAClE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,WAAW;QACT,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACnB,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC;aACX;SACF,CAAC,CAAC;QACH,OAAO;IACT,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACnB,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC;aACX;SACF,CAAC,CAAC;QACH,OAAO;IACT,CAAC;IAED,QAAQ,CAAC,GAAY,EAAE,KAAa,EAAE,GAAwB;QAC5D,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACnB,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,GAAG,KAAK;aACnB;SACF,CAAC,CAAC;IACL,CAAC;CACF;AApCD,oCAoCC","file":"group-fade.js","sourcesContent":["/**\n * TODO: 待 vrender 修复后可删除\n */\nimport { ACustomAnimate, EasingType, IGroup } from '@visactor/vrender';\n\nexport class GroupFadeIn extends ACustomAnimate<any> {\n  declare target: IGroup;\n\n  constructor(from: any, to: any, duration: number, easing: EasingType) {\n    super(null, null, duration, easing);\n  }\n\n  getEndProps(): Record<string, any> {\n    return {};\n  }\n\n  onBind(): void {\n    this.target.setTheme({\n      common: {\n        opacity: 0\n      }\n    });\n    return;\n  }\n\n  onEnd(): void {\n    this.target.setTheme({\n      common: {\n        opacity: 1\n      }\n    });\n    return;\n  }\n\n  onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n    this.target.setTheme({\n      common: {\n        opacity: ratio\n      }\n    });\n  }\n}\n\nexport class GroupFadeOut extends ACustomAnimate<any> {\n  declare target: IGroup;\n\n  constructor(from: any, to: any, duration: number, easing: EasingType) {\n    super(null, null, duration, easing);\n  }\n\n  getEndProps(): Record<string, any> {\n    return {};\n  }\n\n  onBind(): void {\n    this.target.setTheme({\n      common: {\n        opacity: 1\n      }\n    });\n    return;\n  }\n\n  onEnd(): void {\n    this.target.setTheme({\n      common: {\n        opacity: 0\n      }\n    });\n    return;\n  }\n\n  onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n    this.target.setTheme({\n      common: {\n        opacity: 1 - ratio\n      }\n    });\n  }\n}\n"]}

package/cjs/axis/animate/group-transition.d.ts

@@ -0,0 +1,10 @@
+import { ACustomAnimate, AnimateMode, IGroup } from '@visactor/vrender';
+export declare class GroupTransition extends ACustomAnimate<any> {
+    target: IGroup;
+    private _oldElementMap;
+    private _newElementAttrMap;
+    mode: AnimateMode;
+    onBind(): void;
+    onStart(): void;
+    onUpdate(end: boolean, ratio: number, out: Record<string, any>): void;
+}

package/cjs/axis/animate/group-transition.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.GroupTransition = void 0;
+
+const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils"), util_1 = require("../../util");
+
+function getElMap(g) {
+    const elMap = {};
+    return (0, util_1.traverseGroup)(g, (el => {
+        "group" !== el.type && el.id && (elMap[el.id] = el);
+    })), elMap;
+}
+
+class GroupTransition extends vrender_1.ACustomAnimate {
+    constructor() {
+        super(...arguments), this.mode = vrender_1.AnimateMode.NORMAL;
+    }
+    onBind() {
+        const currentInnerView = this.target.getInnerView(), prevInnerView = this.target.getPrevInnerView();
+        prevInnerView && (this._oldElementMap = getElMap(prevInnerView), this._newElementAttrMap = {}, 
+        (0, util_1.traverseGroup)(currentInnerView, (el => {
+            var _a, _b, _c, _d, _e, _f;
+            if ("group" !== el.type && el.id) {
+                const oldEl = this._oldElementMap[el.id];
+                if (oldEl) {
+                    if (!(0, vutils_1.isEqual)(el.attribute, oldEl.attribute)) {
+                        const newProps = (0, vutils_1.cloneDeep)(el.attribute);
+                        this._newElementAttrMap[el.id] = {
+                            state: "update",
+                            node: el,
+                            attrs: Object.assign(Object.assign({}, newProps), {
+                                opacity: null !== (_a = newProps.opacity) && void 0 !== _a ? _a : 1,
+                                fillOpacity: null !== (_b = newProps.fillOpacity) && void 0 !== _b ? _b : 1,
+                                strokeOpacity: null !== (_c = newProps.strokeOpacity) && void 0 !== _c ? _c : 1
+                            })
+                        }, el.setAttributes(oldEl.attribute);
+                    }
+                } else {
+                    const finalOpacityAttrs = {
+                        opacity: null !== (_d = el.attribute.opacity) && void 0 !== _d ? _d : 1,
+                        fillOpacity: null !== (_e = el.attribute.fillOpacity) && void 0 !== _e ? _e : 1,
+                        strokeOpacity: null !== (_f = el.attribute.strokeOpacity) && void 0 !== _f ? _f : 1
+                    };
+                    this._newElementAttrMap[el.id] = {
+                        state: "enter",
+                        node: el,
+                        attrs: finalOpacityAttrs
+                    }, el.setAttributes({
+                        opacity: 0,
+                        fillOpacity: 0,
+                        strokeOpacity: 0
+                    });
+                }
+            }
+        })));
+    }
+    onStart() {
+        let duration = this.duration, easing = this.easing;
+        Object.keys(this._newElementAttrMap).forEach((id => {
+            var _a, _b, _c;
+            const {node: node, attrs: attrs, state: state} = this._newElementAttrMap[id];
+            "enter" === state && (duration = (0, vutils_1.isValidNumber)(null === (_a = this.params.enter) || void 0 === _a ? void 0 : _a.duration) ? this.params.enter.duration : duration, 
+            easing = (null === (_b = this.params.enter) || void 0 === _b ? void 0 : _b.easing) ? null === (_c = this.params.enter) || void 0 === _c ? void 0 : _c.easing : easing), 
+            "path" === node.type ? node.animate({
+                interpolate: (key, ratio, from, to, nextAttributes) => "path" === key && (nextAttributes.path = (0, 
+                vutils_1.interpolateString)(from, to)(ratio), !0)
+            }).to(attrs, duration, easing) : node.animate().to(attrs, duration, easing);
+        }));
+    }
+    onUpdate(end, ratio, out) {}
+}
+
+exports.GroupTransition = GroupTransition;
+//# sourceMappingURL=group-transition.js.map

package/cjs/axis/animate/group-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/axis/animate/group-transition.ts"],"names":[],"mappings":"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","file":"group-transition.js","sourcesContent":["import { ACustomAnimate, AnimateMode, EasingType, IGraphic, IGroup } from '@visactor/vrender';\nimport { Dict, cloneDeep, interpolateString, isEqual, isValidNumber } from '@visactor/vutils';\nimport { traverseGroup } from '../../util';\n\nfunction getElMap(g: IGroup) {\n  const elMap: Dict<IGraphic> = {};\n  traverseGroup(g, (el: IGraphic) => {\n    if ((el as IGraphic).type !== 'group' && el.id) {\n      elMap[el.id] = el;\n    }\n  });\n  return elMap;\n}\n\nexport class GroupTransition extends ACustomAnimate<any> {\n  declare target: IGroup;\n\n  private _oldElementMap: Dict<IGraphic>;\n  private _newElementAttrMap: Dict<any>;\n  mode = AnimateMode.NORMAL; // 组件的群组动画不需要设置走 AnimateMode.SET_ATTR_IMMEDIATELY\n\n  onBind(): void {\n    // @ts-ignore\n    const currentInnerView = this.target.getInnerView();\n    // @ts-ignore\n    const prevInnerView = this.target.getPrevInnerView();\n    if (!prevInnerView) {\n      return;\n    }\n\n    this._oldElementMap = getElMap(prevInnerView);\n    this._newElementAttrMap = {};\n\n    // 遍历新的场景树，将新节点属性更新为旧节点\n    // TODO: 目前只处理更新场景\n    traverseGroup(currentInnerView, (el: IGraphic) => {\n      if ((el as IGraphic).type !== 'group' && el.id) {\n        const oldEl = this._oldElementMap[el.id];\n        if (oldEl) {\n          if (!isEqual((el as IGraphic).attribute, (oldEl as IGraphic).attribute)) {\n            // 更新\n            const newProps = cloneDeep((el as IGraphic).attribute);\n            this._newElementAttrMap[el.id] = {\n              state: 'update',\n              node: el,\n              attrs: {\n                ...newProps,\n                opacity: newProps.opacity ?? 1,\n                fillOpacity: newProps.fillOpacity ?? 1,\n                strokeOpacity: newProps.strokeOpacity ?? 1\n              }\n            };\n\n            (el as IGraphic).setAttributes((oldEl as IGraphic).attribute);\n          }\n        } else {\n          // 新入场元素，进行 fadeIn 动画\n          const finalOpacityAttrs = {\n            opacity: el.attribute.opacity ?? 1,\n            fillOpacity: el.attribute.fillOpacity ?? 1,\n            strokeOpacity: el.attribute.strokeOpacity ?? 1\n          };\n          this._newElementAttrMap[el.id] = {\n            state: 'enter',\n            node: el,\n            attrs: finalOpacityAttrs\n          };\n          (el as IGraphic).setAttributes({\n            opacity: 0,\n            fillOpacity: 0,\n            strokeOpacity: 0\n          });\n        }\n      }\n    });\n  }\n\n  onStart(): void {\n    let duration = this.duration;\n    let easing = this.easing;\n\n    // 新的场景树\n    Object.keys(this._newElementAttrMap).forEach(id => {\n      const { node, attrs, state } = this._newElementAttrMap[id];\n      if (state === 'enter') {\n        duration = isValidNumber(this.params.enter?.duration) ? this.params.enter.duration : duration;\n        easing = this.params.enter?.easing ? this.params.enter?.easing : easing;\n      }\n      if ((node as IGraphic).type === 'path') {\n        (node as IGraphic)\n          .animate({\n            interpolate(key: string, ratio: number, from: any, to: any, nextAttributes: any) {\n              if (key === 'path') {\n                nextAttributes.path = interpolateString(from, to)(ratio);\n                return true;\n              }\n\n              return false;\n            }\n          })\n          // .wait(delay)\n          .to(attrs, duration, easing as EasingType);\n      } else {\n        (node as IGraphic)\n          .animate()\n          // .wait(delay)\n          .to(attrs, duration, easing as EasingType);\n      }\n    });\n  }\n\n  onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n    // do nothing\n  }\n}\n"]}

package/cjs/axis/animate/index.d.ts

@@ -0,0 +1,2 @@
+export * from './group-transition';
+export * from './group-fade';

package/cjs/axis/animate/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./group-transition"), exports), __exportStar(require("./group-fade"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/axis/animate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/axis/animate/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC;AAEnC,+CAA6B","file":"index.js","sourcesContent":["export * from './group-transition';\n\nexport * from './group-fade';\n"]}

package/cjs/axis/base.d.ts

@@ -0,0 +1,53 @@
+import { IGroup, TextAlignType, TextBaselineType } from '@visactor/vrender';
+import { Dict } from '@visactor/vutils';
+import { AbstractComponent } from '../core/base';
+import { Point } from '../core/type';
+import { TagAttributes } from '../tag';
+import { GridAttributes, AxisBaseAttributes, AxisItem, TransformedAxisItem, TickLineItem } from './type';
+export declare abstract class AxisBase<T extends AxisBaseAttributes> extends AbstractComponent<Required<T>> {
+    name: string;
+    protected _innerView: IGroup;
+    getInnerView(): IGroup;
+    protected _prevInnerView: IGroup;
+    getPrevInnerView(): IGroup;
+    protected data: TransformedAxisItem[];
+    protected tickLineItems: TickLineItem[];
+    protected subTickLineItems: TickLineItem[];
+    protected axisLabelLayerSize: Dict<{
+        width: number;
+        height: number;
+        textAlign: string;
+        textBaseline: string;
+    }>;
+    protected axisLabelsContainer: IGroup | null;
+    protected axisContainer: IGroup;
+    private _lastHover;
+    private _lastSelect;
+    protected abstract renderLine(container: IGroup): void;
+    protected abstract isInValidValue(value: number): boolean;
+    protected abstract getTickCoord(value: number): Point;
+    protected abstract getVerticalVector(offset: number, inside: boolean, point?: Point): any;
+    protected abstract getRelativeVector(point: Point): [number, number];
+    protected abstract getTitleAttribute(): TagAttributes;
+    protected abstract getGridAttribute(type: string): GridAttributes;
+    protected abstract getTextBaseline(vector: [number, number], inside?: boolean): TextBaselineType;
+    getBoundsWithoutRender(attributes: Partial<T>): import("@visactor/vutils").IBounds;
+    protected render(): void;
+    private _bindEvent;
+    private _onHover;
+    private _onUnHover;
+    private _onClick;
+    private _renderInner;
+    protected renderTicks(container: IGroup): void;
+    protected renderLabels(container: IGroup, items: AxisItem[], layer: number): IGroup;
+    protected renderTitle(container: IGroup): void;
+    protected renderGrid(container: IGroup): void;
+    protected getVerticalCoord(point: Point, offset: number, inside: boolean): Point;
+    protected getTextAlign(vector: number[]): TextAlignType;
+    protected getTickLineItems(): TickLineItem[];
+    protected getSubTickLineItems(): TickLineItem[];
+    private _getTickLineAttribute;
+    private _getLabelAttribute;
+    private _transformItems;
+    private _renderGridByType;
+}

package/cjs/axis/base.js

@@ -0,0 +1,305 @@
+"use strict";
+
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.AxisBase = void 0;
+
+const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), util_1 = require("../util"), constant_1 = require("../constant"), constant_2 = require("./constant"), config_1 = require("./config"), tag_1 = require("../tag/tag"), grid_1 = require("./grid");
+
+class AxisBase extends base_1.AbstractComponent {
+    constructor() {
+        super(...arguments), this.name = "axis", this.data = [], this.tickLineItems = [], 
+        this.subTickLineItems = [], this.axisLabelLayerSize = {}, this.axisLabelsContainer = null, 
+        this._onHover = e => {
+            const target = e.target;
+            target !== this._lastHover && target.name && !(0, vutils_1.isEmpty)(target.states) && (target.addState(constant_1.StateValue.hover, !0), 
+            (0, util_1.traverseGroup)(this.axisContainer, (node => {
+                node !== target && node.name && !(0, vutils_1.isEmpty)(node.states) && node.addState(constant_1.StateValue.hoverReverse, !0);
+            })), this._lastHover = target);
+        }, this._onUnHover = e => {
+            this._lastHover && ((0, util_1.traverseGroup)(this.axisContainer, (node => {
+                node.name && !(0, vutils_1.isEmpty)(node.states) && (node.removeState(constant_1.StateValue.hoverReverse), 
+                node.removeState(constant_1.StateValue.hover));
+            })), this._lastHover = null);
+        }, this._onClick = e => {
+            const target = e.target;
+            if (this._lastSelect === target && target.hasState(constant_1.StateValue.selected)) return this._lastSelect = null, 
+            void (0, util_1.traverseGroup)(this.axisContainer, (node => {
+                node.name && !(0, vutils_1.isEmpty)(node.states) && (node.removeState(constant_1.StateValue.selectedReverse), 
+                node.removeState(constant_1.StateValue.selected));
+            }));
+            target.name && !(0, vutils_1.isEmpty)(target.states) && (target.addState(constant_1.StateValue.selected, !0), 
+            (0, util_1.traverseGroup)(this.axisContainer, (node => {
+                node !== target && node.name && !(0, vutils_1.isEmpty)(node.states) && node.addState(constant_1.StateValue.selectedReverse, !0);
+            })), this._lastSelect = target);
+        };
+    }
+    getInnerView() {
+        return this._innerView;
+    }
+    getPrevInnerView() {
+        return this._prevInnerView;
+    }
+    getBoundsWithoutRender(attributes) {
+        const currentAttribute = (0, vutils_1.cloneDeep)(this.attribute);
+        (0, vutils_1.merge)(this.attribute, attributes);
+        const offscreenGroup = (0, vrender_1.createGroup)({
+            x: this.attribute.x,
+            y: this.attribute.y
+        });
+        return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), 
+        this.attribute = currentAttribute, offscreenGroup.AABBBounds;
+    }
+    render() {
+        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = (0, 
+        vrender_1.createGroup)({
+            x: 0,
+            y: 0,
+            pickable: !1
+        }), this.add(this._innerView), this._renderInner(this._innerView), this._bindEvent();
+    }
+    _bindEvent() {
+        const {hover: hover, select: select} = this.attribute;
+        hover && (this._innerView.addEventListener("pointermove", this._onHover), this._innerView.addEventListener("pointerout", this._onUnHover)), 
+        select && this._innerView.addEventListener("pointerdown", this._onClick);
+    }
+    _renderInner(container) {
+        const {title: title, label: label, tick: tick, line: line, grid: grid, items: items, panel: panel} = this.attribute, axisContainer = (0, 
+        vrender_1.createGroup)({
+            x: 0,
+            y: 0,
+            zIndex: 1
+        });
+        if (axisContainer.name = constant_2.AXIS_ELEMENT_NAME.axisContainer, axisContainer.id = this._getNodeId("container"), 
+        axisContainer.setMode(this.mode), this.axisContainer = axisContainer, container.add(axisContainer), 
+        (null == line ? void 0 : line.visible) && this.renderLine(axisContainer), items && items.length) {
+            if (this.data = this._transformItems(items[0]), (null == tick ? void 0 : tick.visible) && this.renderTicks(axisContainer), 
+            null == label ? void 0 : label.visible) {
+                const labelGroup = (0, vrender_1.createGroup)({
+                    x: 0,
+                    y: 0,
+                    pickable: !1
+                });
+                labelGroup.name = constant_2.AXIS_ELEMENT_NAME.labelContainer, labelGroup.id = this._getNodeId("label-container"), 
+                this.axisLabelsContainer = labelGroup, axisContainer.add(labelGroup), items.forEach(((axisItems, layer) => {
+                    this.renderLabels(labelGroup, axisItems, layer);
+                }));
+            }
+            (null == grid ? void 0 : grid.visible) && this.renderGrid(container);
+        }
+        if ((null == title ? void 0 : title.visible) && this.renderTitle(axisContainer), 
+        panel && panel.visible) {
+            const axisContainerBounds = axisContainer.AABBBounds, bgRect = (0, vrender_1.createRect)(Object.assign({
+                x: axisContainerBounds.x1,
+                y: axisContainerBounds.y1,
+                width: axisContainerBounds.width(),
+                height: axisContainerBounds.height()
+            }, panel.style));
+            bgRect.name = constant_2.AXIS_ELEMENT_NAME.background, bgRect.id = this._getNodeId("background"), 
+            (0, vutils_1.isEmpty)(panel.state) || (bgRect.states = (0, vutils_1.merge)({}, constant_1.DEFAULT_STATES, panel.state)), 
+            axisContainer.insertBefore(bgRect, axisContainer.firstChild);
+        }
+    }
+    renderTicks(container) {
+        var _a;
+        const tickLineItems = this.getTickLineItems(), tickLineGroup = (0, vrender_1.createGroup)({
+            x: 0,
+            y: 0,
+            pickable: !1
+        });
+        tickLineGroup.name = constant_2.AXIS_ELEMENT_NAME.tickContainer, tickLineGroup.id = this._getNodeId("tick-container"), 
+        container.add(tickLineGroup);
+        const tickLineState = (0, vutils_1.isEmpty)(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state) ? null : (0, 
+        vutils_1.merge)({}, constant_1.DEFAULT_STATES, this.attribute.tick.state);
+        tickLineItems.forEach(((item, index) => {
+            const line = (0, vrender_1.createLine)(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
+            line.name = constant_2.AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), 
+            line.states = tickLineState, tickLineGroup.add(line);
+        })), this.tickLineItems = tickLineItems;
+        const {subTick: subTick} = this.attribute;
+        if (null == subTick ? void 0 : subTick.visible) {
+            const subTickLineItems = this.getSubTickLineItems();
+            if (subTickLineItems.length) {
+                const subTickLineState = (0, vutils_1.isEmpty)(subTick.state) ? null : (0, vutils_1.merge)({}, constant_1.DEFAULT_STATES, subTick.state);
+                subTickLineItems.forEach(((item, index) => {
+                    const line = (0, vrender_1.createLine)(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
+                    line.name = constant_2.AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), 
+                    line.states = subTickLineState, tickLineGroup.add(line);
+                }));
+            }
+            this.subTickLineItems = subTickLineItems;
+        }
+    }
+    renderLabels(container, items, layer) {
+        var _a;
+        let data;
+        data = 0 === layer ? this.data : this._transformItems(items);
+        const labelGroup = (0, vrender_1.createGroup)({
+            x: 0,
+            y: 0,
+            pickable: !1
+        });
+        labelGroup.name = `${constant_2.AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`, 
+        labelGroup.id = this._getNodeId(`label-container-layer-${layer}`), container.add(labelGroup);
+        let maxTextWidth = 0, maxTextHeight = 0, textAlign = "center", textBaseline = "middle";
+        const labelState = (0, vutils_1.isEmpty)(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state) ? null : (0, 
+        vutils_1.merge)({}, constant_1.DEFAULT_STATES, this.attribute.label.state);
+        return data.forEach(((item, index) => {
+            var _a;
+            const labelStyle = this._getLabelAttribute(item, index, data, layer), text = (0, 
+            vrender_1.createText)(labelStyle);
+            text.name = constant_2.AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), 
+            text.states = labelState, labelGroup.add(text);
+            const angle = null !== (_a = labelStyle.angle) && void 0 !== _a ? _a : 0;
+            maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width()), maxTextHeight = Math.max(maxTextHeight, text.AABBBounds.height()), 
+            angle && (maxTextWidth = Math.abs(maxTextWidth * Math.cos(angle)), maxTextHeight = Math.abs(maxTextHeight * Math.sin(angle))), 
+            textAlign = labelStyle.textAlign, textBaseline = labelStyle.textBaseline;
+        })), this.axisLabelLayerSize[layer] = {
+            width: maxTextWidth,
+            height: maxTextHeight,
+            textAlign: textAlign,
+            textBaseline: textBaseline
+        }, labelGroup;
+    }
+    renderTitle(container) {
+        const titleAttributes = this.getTitleAttribute(), axisTitle = new tag_1.Tag(Object.assign({}, titleAttributes));
+        axisTitle.name = constant_2.AXIS_ELEMENT_NAME.title, axisTitle.id = this._getNodeId("title"), 
+        container.add(axisTitle);
+    }
+    renderGrid(container) {
+        this._renderGridByType("grid", container);
+        const {visible: visible} = this.attribute.subGrid || {};
+        visible && this._renderGridByType("subGrid", container);
+    }
+    getVerticalCoord(point, offset, inside) {
+        const vector = this.getVerticalVector(offset, inside, point);
+        return {
+            x: point.x + vector[0],
+            y: point.y + vector[1]
+        };
+    }
+    getTextAlign(vector) {
+        let align = "center";
+        return (0, vutils_1.isNumberClose)(vector[0], 0) ? align = "center" : vector[0] > 0 ? align = "start" : vector[0] < 0 && (align = "end"), 
+        align;
+    }
+    getTickLineItems() {
+        const {tick: tick} = this.attribute, data = this.data, tickLineItems = [], {alignWithLabel: alignWithLabel, inside: inside = !1, length: length} = tick;
+        let tickSegment = 1;
+        return data.length >= 2 && (tickSegment = data[1].value - data[0].value), data.forEach((item => {
+            let point = item.point, tickValue = item.value;
+            if (!alignWithLabel) {
+                const value = item.value - tickSegment / 2;
+                if (this.isInValidValue(value)) return;
+                point = this.getTickCoord(value), tickValue = value;
+            }
+            const endPoint = this.getVerticalCoord(point, length, inside);
+            if ("3d" === this.mode) {
+                const vec = this.getVerticalVector(length, inside, point);
+                let alpha = 0, beta = 0;
+                (0, vutils_1.abs)(vec[0]) > (0, vutils_1.abs)(vec[1]) ? alpha = vutils_1.pi / 2 * (endPoint.x > point.x ? 1 : -1) : beta = vutils_1.pi / 2 * (endPoint.y > point.y ? -1 : 1), 
+                tickLineItems.push({
+                    start: point,
+                    end: endPoint,
+                    value: tickValue,
+                    id: `tick-${item.id}`,
+                    anchor: [ point.x, point.y ],
+                    alpha: alpha,
+                    beta: beta
+                });
+            } else tickLineItems.push({
+                start: point,
+                end: endPoint,
+                value: tickValue,
+                id: `tick-${item.id}`
+            });
+        })), tickLineItems;
+    }
+    getSubTickLineItems() {
+        const {subTick: subTick} = this.attribute, subTickLineItems = [], {count: subCount = 4, inside: inside = !1, length: length = 2} = subTick, tickLineItems = this.tickLineItems, tickLineCount = tickLineItems.length;
+        if (tickLineCount >= 2) for (let i = 0; i < tickLineCount - 1; i++) {
+            const pre = tickLineItems[i], next = tickLineItems[i + 1];
+            for (let j = 0; j < subCount; j++) {
+                const percent = (j + 1) / (subCount + 1), value = (1 - percent) * pre.value + percent * next.value, point = this.getTickCoord(value), endPoint = this.getVerticalCoord(point, length, inside);
+                subTickLineItems.push({
+                    start: point,
+                    end: endPoint,
+                    value: value,
+                    id: `sub-tick-${value}`
+                });
+            }
+        }
+        return subTickLineItems;
+    }
+    _getTickLineAttribute(type, tickItem, index, tickItems) {
+        let style = (0, vutils_1.get)(this.attribute, `${type}.style`);
+        const data = this.data[index];
+        style = (0, vutils_1.isFunction)(style) ? (0, vutils_1.merge)({}, (0, vutils_1.get)(config_1.DEFAULT_AXIS_THEME, `${type}.style`), "tick" === type ? style(data.rawValue, index, data, this.data) : style(tickItem.value, index, tickItem, tickItems)) : style;
+        const {start: start, end: end, anchor: anchor, alpha: alpha, beta: beta} = tickItem;
+        return Object.assign({
+            points: [ start, end ],
+            anchor: anchor,
+            alpha: alpha,
+            beta: beta
+        }, style);
+    }
+    _getLabelAttribute(tickDatum, index, tickData, layer) {
+        var _a, _b, _c, _d, _e, _f;
+        const _g = this.attribute.label, {space: space = 4, inside: inside = !1, formatMethod: formatMethod} = _g, tagAttributes = __rest(_g, [ "space", "inside", "formatMethod" ]);
+        let offset = space, tickLength = 0;
+        (null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.visible) && (null === (_b = this.attribute.tick) || void 0 === _b ? void 0 : _b.inside) === inside && (tickLength = (null === (_c = this.attribute.tick) || void 0 === _c ? void 0 : _c.length) || 4), 
+        (null === (_d = this.attribute.subTick) || void 0 === _d ? void 0 : _d.visible) && (null === (_e = this.attribute.subTick) || void 0 === _e ? void 0 : _e.inside) === inside && (tickLength = Math.max(tickLength, (null === (_f = this.attribute.subTick) || void 0 === _f ? void 0 : _f.length) || 2)), 
+        offset += tickLength;
+        const axisVector = this.getRelativeVector(tickDatum.point);
+        layer > 0 && (0 === axisVector[1] ? offset += (this.axisLabelLayerSize[layer - 1].height + (0, 
+        vutils_1.get)(this.attribute, "label.space", 4)) * layer : offset += (this.axisLabelLayerSize[layer - 1].width + (0, 
+        vutils_1.get)(this.attribute, "label.space", 4)) * layer);
+        const point = this.getVerticalCoord(tickDatum.point, offset, inside), vector = this.getVerticalVector(offset, inside, point), text = formatMethod ? formatMethod(tickDatum.label, tickDatum, index, tickData, layer) : tickDatum.label;
+        let {style: textStyle} = tagAttributes;
+        return textStyle = (0, vutils_1.isFunction)(textStyle) ? (0, vutils_1.merge)({}, config_1.DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle, 
+        textStyle = (0, vutils_1.merge)({
+            textAlign: this.getTextAlign(vector),
+            textBaseline: this.getTextBaseline(vector, inside)
+        }, textStyle), (0, vutils_1.isFunction)(textStyle.text) && (textStyle.text = textStyle.text({
+            label: tickDatum.label,
+            value: tickDatum.rawValue,
+            index: tickDatum.index,
+            layer: layer
+        })), Object.assign(Object.assign(Object.assign({}, point), {
+            text: text,
+            lineHeight: null == textStyle ? void 0 : textStyle.fontSize
+        }), textStyle);
+    }
+    _transformItems(items) {
+        const data = [];
+        return items.forEach((item => {
+            var _a;
+            data.push(Object.assign(Object.assign({}, item), {
+                point: this.getTickCoord(item.value),
+                id: null !== (_a = item.id) && void 0 !== _a ? _a : item.label
+            }));
+        })), data;
+    }
+    _renderGridByType(type, container) {
+        const gridAttrs = this.getGridAttribute(type), gridGroup = new grid_1.Grid(Object.assign(Object.assign({
+            pickable: !1
+        }, gridAttrs), {
+            zIndex: 0
+        }));
+        gridGroup.name = "subGrid" === type ? `${constant_2.AXIS_ELEMENT_NAME.grid}-sub` : `${constant_2.AXIS_ELEMENT_NAME.grid}`, 
+        gridGroup.id = this._getNodeId(type), container.add(gridGroup);
+    }
+}
+
+exports.AxisBase = AxisBase;
+//# sourceMappingURL=base.js.map