@visactor/vrender-components 0.13.2 → 0.14.0-alpha.0

package/dist/index.js

@@ -273,9 +273,9 @@
             e.stopPropagation();
             const { direction } = this.attribute;
             this._prePos = direction === 'horizontal' ? e.clientX : e.clientY;
-            if (vrender.global.env === 'browser') {
-                vrender.global.addEventListener('pointermove', this._onSliderPointerMove);
-                vrender.global.addEventListener('pointerup', this._onSliderPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.addEventListener('pointermove', this._onSliderPointerMove);
+                vrender.vglobal.addEventListener('pointerup', this._onSliderPointerUp);
             }
             else {
                 this._slider.addEventListener('pointermove', this._onSliderPointerMove);
@@ -306,9 +306,9 @@
         };
         _onSliderPointerUp = (e) => {
             e.preventDefault();
-            if (vrender.global.env === 'browser') {
-                vrender.global.removeEventListener('pointermove', this._onSliderPointerMove);
-                vrender.global.removeEventListener('pointerup', this._onSliderPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.removeEventListener('pointermove', this._onSliderPointerMove);
+                vrender.vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
             }
             else {
                 this._slider.removeEventListener('pointermove', this._onSliderPointerMove);
@@ -743,44 +743,65 @@
             const poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
             const { visible: bgVisible, ...backgroundStyle } = panel;
             const symbolSize = backgroundStyle.size ?? 12;
+            const spaceSize = vutils.isArray(symbolSize)
+                ? [symbolSize[0] + (backgroundStyle.space ?? 0), symbolSize[1] + (backgroundStyle.space ?? 0)]
+                : symbolSize + (backgroundStyle.space ?? 0);
             const lineWidth = backgroundStyle.lineWidth ?? 1;
-            const { angle, offset, rectOffset } = this.getAngleAndOffset(position, popTipWidth, poptipHeight, vutils.isArray(symbolSize) ? symbolSize : [symbolSize, symbolSize - lineWidth]);
-            if (vutils.isBoolean(bgVisible)) {
-                const offsetX = (vutils.isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
-                const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', {
-                    ...backgroundStyle,
-                    visible: bgVisible && (contentVisible || titleVisible),
-                    x: offsetX,
-                    y: 0,
-                    anchor: [0, 0],
-                    symbolType: 'arrow2Left',
-                    angle: angle,
-                    dx: offset[0],
-                    dy: offset[1],
-                    size: symbolSize,
-                    zIndex: -9
-                }, 'symbol');
-                if (!vutils.isEmpty(state?.panel)) {
-                    bgSymbol.states = state.panel;
+            const range = this.stage
+                ? [this.stage.width, this.stage.height]
+                : undefined;
+            const layout = position === 'auto';
+            for (let i = 0; i < this.positionList.length; i++) {
+                const p = layout ? this.positionList[i] : position;
+                const { angle, offset, rectOffset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, vutils.isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth]);
+                if (vutils.isBoolean(bgVisible)) {
+                    const offsetX = (vutils.isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
+                    const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', {
+                        ...backgroundStyle,
+                        visible: bgVisible && (contentVisible || titleVisible),
+                        x: offsetX,
+                        y: 0,
+                        anchor: [0, 0],
+                        symbolType: 'arrow2Left',
+                        angle: angle,
+                        dx: offset[0],
+                        dy: offset[1],
+                        size: symbolSize,
+                        zIndex: -9
+                    }, 'symbol');
+                    if (!vutils.isEmpty(state?.panel)) {
+                        bgSymbol.states = state.panel;
+                    }
+                    const bgRect = group.createOrUpdateChild('poptip-rect-panel', {
+                        ...backgroundStyle,
+                        visible: bgVisible && (contentVisible || titleVisible),
+                        x: 0,
+                        y: 0,
+                        width: popTipWidth,
+                        height: poptipHeight,
+                        zIndex: -10
+                    }, 'rect');
+                    if (!vutils.isEmpty(state?.panel)) {
+                        bgRect.states = state.panel;
+                    }
                 }
-                const bgRect = group.createOrUpdateChild('poptip-rect-panel', {
-                    ...backgroundStyle,
-                    visible: bgVisible && (contentVisible || titleVisible),
-                    x: 0,
-                    y: 0,
-                    width: popTipWidth,
-                    height: poptipHeight,
-                    zIndex: -10
-                }, 'rect');
-                if (!vutils.isEmpty(state?.panel)) {
-                    bgRect.states = state.panel;
+                group.setAttributes({
+                    x: -offset[0] + dx,
+                    y: -offset[1] + dy
+                });
+                if (layout && range) {
+                    const b = this.AABBBounds;
+                    const stageBounds = new vutils.Bounds().setValue(0, 0, range[0], range[1]);
+                    if (vutils.rectInsideAnotherRect(b, stageBounds, false)) {
+                        break;
+                    }
+                }
+                else {
+                    break;
                 }
             }
-            group.setAttributes({
-                x: -offset[0] + dx,
-                y: -offset[1] + dy
-            });
         }
+        positionList = ['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'];
         getAngleAndOffset(position, width, height, size) {
             const sizeH = size[1] / 2;
             switch (position) {
@@ -875,27 +896,30 @@
       return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    const theme = {
-        poptip: {
+    const DEFAULT_THEME = {
+        visible: true,
+        position: 'auto',
+        titleStyle: {
+            fontSize: 16,
+            fill: '#08979c'
+        },
+        contentStyle: {
+            fontSize: 12,
+            fill: 'green'
+        },
+        panel: {
             visible: true,
-            position: 'top',
-            titleStyle: {
-                fontSize: 16,
-                fill: '#08979c'
-            },
-            contentStyle: {
-                fontSize: 12,
-                fill: 'green'
-            },
-            panel: {
-                visible: true,
-                fill: '#e6fffb',
-                stroke: '#87e8de',
-                lineWidth: 1,
-                cornerRadius: 4
-            }
+            fill: '#e6fffb',
+            size: 12,
+            space: 0,
+            stroke: '#87e8de',
+            lineWidth: 1,
+            cornerRadius: 4
         }
     };
+    const theme = {
+        poptip: vutils.merge({}, DEFAULT_THEME)
+    };
 
     function wrapPoptip(target, source) {
         vutils.merge(target, theme.poptip, source);
@@ -1050,7 +1074,7 @@
         injectable()
     ], PopTipForClipedTextPlugin);
 
-    const module = new ContainerModule(bind => {
+    const popTipModule = new ContainerModule(bind => {
         bind(PopTipRenderContribution).toSelf().inSingletonScope();
         bind(vrender.InteractiveSubRenderContribution).toService(PopTipRenderContribution);
         bind(PopTipPlugin).toSelf().inSingletonScope();
@@ -1060,7 +1084,10 @@
     });
     function loadPoptip(defaultPoptipTheme) {
         vutils.merge(theme.poptip, defaultPoptipTheme);
-        vrender.container.load(module);
+        vrender.container.load(popTipModule);
+    }
+    function setPoptipTheme(defaultPoptipTheme) {
+        vutils.merge(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
     }
 
     class CrosshairBase extends AbstractComponent {
@@ -2734,16 +2761,25 @@
             tickLineGroup.name = exports.AXIS_ELEMENT_NAME.tickContainer;
             tickLineGroup.id = this._getNodeId('tick-container');
             container.add(tickLineGroup);
-            const tickLineState = vutils.isEmpty(this.attribute.tick?.state)
-                ? null
-                : vutils.merge({}, DEFAULT_STATES$2, this.attribute.tick.state);
             tickLineItems.forEach((item, index) => {
                 const line = vrender.createLine({
                     ...this._getTickLineAttribute('tick', item, index, tickLineItems)
                 });
                 line.name = exports.AXIS_ELEMENT_NAME.tick;
                 line.id = this._getNodeId(item.id);
-                line.states = tickLineState;
+                if (vutils.isEmpty(this.attribute.tick?.state)) {
+                    line.states = null;
+                }
+                else {
+                    const data = this.data[index];
+                    const tickLineState = vutils.merge({}, DEFAULT_STATES$2, this.attribute.tick.state);
+                    Object.keys(tickLineState).forEach(key => {
+                        if (vutils.isFunction(tickLineState[key])) {
+                            tickLineState[key] = tickLineState[key](data.rawValue, index, data, this.data);
+                        }
+                    });
+                    line.states = tickLineState;
+                }
                 tickLineGroup.add(line);
             });
             this.tickLineItems = tickLineItems;
@@ -2751,14 +2787,24 @@
             if (subTick?.visible) {
                 const subTickLineItems = this.getSubTickLineItems();
                 if (subTickLineItems.length) {
-                    const subTickLineState = vutils.isEmpty(subTick.state) ? null : vutils.merge({}, DEFAULT_STATES$2, subTick.state);
                     subTickLineItems.forEach((item, index) => {
                         const line = vrender.createLine({
                             ...this._getTickLineAttribute('subTick', item, index, tickLineItems)
                         });
                         line.name = exports.AXIS_ELEMENT_NAME.subTick;
                         line.id = this._getNodeId(`${index}`);
-                        line.states = subTickLineState;
+                        if (vutils.isEmpty(subTick.state)) {
+                            line.states = null;
+                        }
+                        else {
+                            const subTickLineState = vutils.merge({}, DEFAULT_STATES$2, subTick.state);
+                            Object.keys(subTickLineState).forEach(key => {
+                                if (vutils.isFunction(subTickLineState[key])) {
+                                    subTickLineState[key] = subTickLineState[key](item.value, index, item, tickLineItems);
+                                }
+                            });
+                            line.states = subTickLineState;
+                        }
                         tickLineGroup.add(line);
                     });
                 }
@@ -2779,15 +2825,23 @@
             let maxTextHeight = 0;
             let textAlign = 'center';
             let textBaseline = 'middle';
-            const labelState = vutils.isEmpty(this.attribute.label?.state)
-                ? null
-                : vutils.merge({}, DEFAULT_STATES$2, this.attribute.label.state);
             data.forEach((item, index) => {
                 const labelStyle = this._getLabelAttribute(item, index, data, layer);
                 const text = vrender.createText(labelStyle);
                 text.name = exports.AXIS_ELEMENT_NAME.label;
                 text.id = this._getNodeId(`layer${layer}-label-${item.id}`);
-                text.states = labelState;
+                if (vutils.isEmpty(this.attribute.label?.state)) {
+                    text.states = null;
+                }
+                else {
+                    const labelState = vutils.merge({}, DEFAULT_STATES$2, this.attribute.label.state);
+                    Object.keys(labelState).forEach(key => {
+                        if (vutils.isFunction(labelState[key])) {
+                            labelState[key] = labelState[key](item, index, data, layer);
+                        }
+                    });
+                    text.states = labelState;
+                }
                 labelGroup.add(text);
                 const angle = labelStyle.angle ?? 0;
                 maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width());
@@ -4214,9 +4268,9 @@
             if (this._selectedPreviewGroup) {
                 this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
             }
-            if (vrender.global.env === 'browser') {
-                vrender.global.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
-                vrender.global.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
+                vrender.vglobal.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
             }
             this.addEventListener('pointermove', this._onHandlerPointerMove);
             this.addEventListener('pointerup', this._onHandlerPointerUp);
@@ -5976,7 +6030,7 @@
                     item.id = item.label;
                 }
                 item.index = index;
-                const itemGroup = this._renderEachItem(item, vutils.isEmpty(defaultSelected) ? true : defaultSelected?.includes(item.label), index);
+                const itemGroup = this._renderEachItem(item, vutils.isEmpty(defaultSelected) ? true : defaultSelected?.includes(item.label), index, legendItems);
                 const itemWidth = itemGroup.attribute.width;
                 const itemHeight = itemGroup.attribute.height;
                 this._itemHeight = Math.max(this._itemHeight, itemHeight);
@@ -6049,16 +6103,21 @@
                 this._itemsContainer.addEventListener('pointerdown', this._onClick);
             }
         }
-        _renderEachItem(item, isSelected, index) {
+        _renderEachItem(item, isSelected, index, items) {
             const { id, label, value, shape } = item;
-            const { shape: shapeAttr = {}, label: labelAttr = {}, value: valueAttr = {}, padding = 0, background, focus, focusIconStyle = {} } = this.attribute.item;
+            const { padding = 0, focus, focusIconStyle = {} } = this.attribute.item;
+            let { shape: shapeAttr = {}, label: labelAttr = {}, value: valueAttr = {}, background = {} } = this.attribute.item;
+            shapeAttr = this._handleStyle(shapeAttr, item, isSelected, index, items);
+            labelAttr = this._handleStyle(labelAttr, item, isSelected, index, items);
+            valueAttr = this._handleStyle(valueAttr, item, isSelected, index, items);
+            background = this._handleStyle(background, item, isSelected, index, items);
             const parsedPadding = vutils.normalizePadding(padding);
             let itemGroup;
             if (background.visible === false) {
                 itemGroup = vrender.createGroup({
                     x: 0,
                     y: 0,
-                    cursor: background?.style.cursor
+                    cursor: (background?.style).cursor
                 });
                 this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup);
             }
@@ -6089,7 +6148,8 @@
                 ...shapeAttr.style
             });
             Object.keys(shapeAttr.state || {}).forEach(key => {
-                const color = shapeAttr.state[key].fill || shapeAttr.state[key].stroke;
+                const color = shapeAttr.state[key].fill ||
+                    shapeAttr.state[key].stroke;
                 if (shape.fill && vutils.isNil(shapeAttr.state[key].fill) && color) {
                     shapeAttr.state[key].fill = color;
                 }
@@ -6121,7 +6181,7 @@
                 y: 0,
                 textAlign: 'start',
                 textBaseline: 'middle',
-                lineHeight: labelAttr?.style.fontSize,
+                lineHeight: (labelAttr?.style).fontSize,
                 ...labelAttr?.style,
                 text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label
             });
@@ -6137,7 +6197,7 @@
                     y: 0,
                     textAlign: 'start',
                     textBaseline: 'middle',
-                    lineHeight: valueAttr?.style.fontSize,
+                    lineHeight: (valueAttr?.style).fontSize,
                     ...valueAttr?.style,
                     text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value
                 });
@@ -6470,6 +6530,20 @@
             changeEvent.manager = this.stage?.eventSystem.manager;
             this.dispatchEvent(changeEvent);
         }
+        _handleStyle(config, item, isSelected, index, items) {
+            const newConfig = vutils.merge({}, config);
+            if (config.style && vutils.isFunction(config.style)) {
+                newConfig.style = config.style(item, isSelected, index, items);
+            }
+            if (config.state) {
+                Object.keys(config.state).forEach(key => {
+                    if (config.state[key] && vutils.isFunction(config.state[key])) {
+                        newConfig.state[key] = config.state[key](item, isSelected, index, items);
+                    }
+                });
+            }
+            return newConfig;
+        }
     }
 
     exports.SLIDER_ELEMENT_NAME = void 0;
@@ -6851,9 +6925,9 @@
             e.stopPropagation();
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? e.clientX : e.clientY;
-            if (vrender.global.env === 'browser') {
-                vrender.global.addEventListener('pointermove', this._onHandlerPointerMove);
-                vrender.global.addEventListener('pointerup', this._onHandlerPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.addEventListener('pointermove', this._onHandlerPointerMove);
+                vrender.vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
             }
             else {
                 this._currentHandler.addEventListener('pointermove', this._onHandlerPointerMove);
@@ -6895,9 +6969,9 @@
         _onHandlerPointerUp = (e) => {
             e.preventDefault();
             this._currentHandler = null;
-            if (vrender.global.env === 'browser') {
-                vrender.global.removeEventListener('pointermove', this._onHandlerPointerMove);
-                vrender.global.removeEventListener('pointerup', this._onHandlerPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.removeEventListener('pointermove', this._onHandlerPointerMove);
+                vrender.vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
             }
             else {
                 const currentTarget = e.target;
@@ -6909,9 +6983,9 @@
         _onTrackPointerdown = (e) => {
             e.stopPropagation();
             this._prePos = this._isHorizontal ? e.clientX : e.clientY;
-            if (vrender.global.env === 'browser') {
-                vrender.global.addEventListener('pointermove', this._onTrackPointerMove);
-                vrender.global.addEventListener('pointerup', this._onTrackPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.addEventListener('pointermove', this._onTrackPointerMove);
+                vrender.vglobal.addEventListener('pointerup', this._onTrackPointerUp);
             }
             else {
                 this._track.addEventListener('pointermove', this._onTrackPointerMove);
@@ -6963,9 +7037,9 @@
         };
         _onTrackPointerUp = (e) => {
             e.preventDefault();
-            if (vrender.global.env === 'browser') {
-                vrender.global.removeEventListener('pointermove', this._onTrackPointerMove);
-                vrender.global.removeEventListener('pointerup', this._onTrackPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.removeEventListener('pointermove', this._onTrackPointerMove);
+                vrender.vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
             }
             else {
                 this._track.removeEventListener('pointermove', this._onTrackPointerMove);
@@ -8506,7 +8580,7 @@
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
             this._isReachEnd = false;
             this._tickTime = Date.now();
-            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this, true));
+            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, true));
         };
         _play = (isFirstPlay) => {
             const now = Date.now();
@@ -8529,7 +8603,7 @@
                 (this._direction === 'reverse' && this._dataIndex <= this._minIndex)) {
                 this._isReachEnd = true;
             }
-            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this, false));
+            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, false));
         };
         _updateDataIndex = (dataIndex) => {
             this._dataIndex = dataIndex;
@@ -8538,7 +8612,7 @@
         _playEnd = () => {
             this._isPlaying = false;
             this._controller.togglePlay();
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._activeIndex = -1;
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
         };
@@ -8547,7 +8621,7 @@
                 return;
             }
             this._isPlaying = false;
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -8658,7 +8732,7 @@
             }
             this._startTime = Date.now() - this._elapsed;
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
-            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this));
+            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
         };
         _play = () => {
             this._elapsed = Date.now() - this._startTime;
@@ -8668,11 +8742,11 @@
                 this._playEnd();
                 return;
             }
-            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this));
+            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
         };
         _playEnd = () => {
             this._isPlaying = false;
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
         };
@@ -8682,7 +8756,7 @@
             }
             this._isPlaying = false;
             this._elapsed = Date.now() - this._startTime;
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -9427,7 +9501,7 @@
         }
     }
 
-    const version = "0.13.2";
+    const version = "0.14.0-alpha.0";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;
@@ -9480,7 +9554,8 @@
     exports.getSizeHandlerPath = getSizeHandlerPath;
     exports.getVerticalPath = getVerticalPath;
     exports.loadPoptip = loadPoptip;
-    exports.module = module;
+    exports.popTipModule = popTipModule;
+    exports.setPoptipTheme = setPoptipTheme;
     exports.version = version;
 
 }));