@visactor/vrender-components 0.14.0-alpha.4 → 0.14.0-alpha.8

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);
@@ -2619,7 +2619,6 @@
         AXIS_ELEMENT_NAME["gridRegion"] = "axis-grid-region";
         AXIS_ELEMENT_NAME["line"] = "axis-line";
         AXIS_ELEMENT_NAME["background"] = "axis-background";
-        AXIS_ELEMENT_NAME["axisLabelBackground"] = "axis-label-background";
     })(exports.AXIS_ELEMENT_NAME || (exports.AXIS_ELEMENT_NAME = {}));
     exports.AxisStateValue = void 0;
     (function (AxisStateValue) {
@@ -2802,7 +2801,7 @@
             }
         };
         _renderInner(container) {
-            const { title, label, tick, line, grid, items } = this.attribute;
+            const { title, label, tick, line, grid, items, panel } = this.attribute;
             const axisContainer = vrender.createGroup({ x: 0, y: 0, zIndex: 1 });
             axisContainer.name = exports.AXIS_ELEMENT_NAME.axisContainer;
             axisContainer.id = this._getNodeId('container');
@@ -2826,9 +2825,7 @@
                     items.forEach((axisItems, layer) => {
                         const layerLabelGroup = this.renderLabels(labelGroup, axisItems, layer);
                         const labels = layerLabelGroup.getChildren();
-                        this.beforeLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
-                        this.handleLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
-                        this.afterLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+                        this.handleLabelsOverlap(labels, axisItems, layer, items.length);
                     });
                 }
                 if (grid?.visible) {
@@ -2838,6 +2835,22 @@
             if (title?.visible) {
                 this.renderTitle(axisContainer);
             }
+            if (panel && panel.visible) {
+                const axisContainerBounds = axisContainer.AABBBounds;
+                const bgRect = vrender.createRect({
+                    x: axisContainerBounds.x1,
+                    y: axisContainerBounds.y1,
+                    width: axisContainerBounds.width(),
+                    height: axisContainerBounds.height(),
+                    ...panel.style
+                });
+                bgRect.name = exports.AXIS_ELEMENT_NAME.background;
+                bgRect.id = this._getNodeId('background');
+                if (!vutils.isEmpty(panel.state)) {
+                    bgRect.states = vutils.merge({}, DEFAULT_STATES$2, panel.state);
+                }
+                axisContainer.insertBefore(bgRect, axisContainer.firstChild);
+            }
         }
         renderTicks(container) {
             const tickLineItems = this.getTickLineItems();
@@ -3372,67 +3385,6 @@
         });
     }
 
-    function alignAxisLabels(labels, start, containerSize, orient, align) {
-        if (orient === 'right' || orient === 'left') {
-            if (align === 'left') {
-                const flag = orient === 'right' ? 0 : -1;
-                labels.forEach(label => {
-                    label.setAttributes({
-                        x: start + containerSize * flag,
-                        textAlign: 'left'
-                    });
-                });
-            }
-            else if (align === 'right') {
-                const flag = orient === 'right' ? 1 : 0;
-                labels.forEach(label => {
-                    label.setAttributes({
-                        x: start + containerSize * flag,
-                        textAlign: 'right'
-                    });
-                });
-            }
-            else if (align === 'center') {
-                const flag = orient === 'right' ? 1 : -1;
-                labels.forEach(label => {
-                    label.setAttributes({
-                        x: start + containerSize * 0.5 * flag,
-                        textAlign: 'center'
-                    });
-                });
-            }
-        }
-        else if (orient === 'bottom' || orient === 'top') {
-            if (align === 'top') {
-                const flag = orient === 'bottom' ? 0 : -1;
-                labels.forEach(label => {
-                    label.setAttributes({
-                        y: start + containerSize * flag,
-                        textBaseline: 'top'
-                    });
-                });
-            }
-            else if (align === 'bottom') {
-                const flag = orient === 'bottom' ? 1 : 0;
-                labels.forEach(label => {
-                    label.setAttributes({
-                        y: start + containerSize * flag,
-                        textBaseline: 'bottom'
-                    });
-                });
-            }
-            else if (align === 'middle') {
-                const flag = orient === 'bottom' ? 1 : -1;
-                labels.forEach(label => {
-                    label.setAttributes({
-                        y: start + containerSize * 0.5 * flag,
-                        textBaseline: 'middle'
-                    });
-                });
-            }
-        }
-    }
-
     function getCirclePoints(center, count, radius, startAngle, endAngle) {
         const points = [];
         const range = endAngle - startAngle;
@@ -3450,27 +3402,6 @@
                 this.setMode(mode);
             }
         }
-        _renderInner(container) {
-            super._renderInner(container);
-            const { panel } = this.attribute;
-            if (panel && panel.visible) {
-                const axisContainer = this.axisContainer;
-                const axisContainerBounds = axisContainer.AABBBounds;
-                const bgRect = vrender.createRect({
-                    x: axisContainerBounds.x1,
-                    y: axisContainerBounds.y1,
-                    width: axisContainerBounds.width(),
-                    height: axisContainerBounds.height(),
-                    ...panel.style
-                });
-                bgRect.name = exports.AXIS_ELEMENT_NAME.background;
-                bgRect.id = this._getNodeId('background');
-                if (!vutils.isEmpty(panel.state)) {
-                    bgRect.states = vutils.merge({}, DEFAULT_STATES$1, panel.state);
-                }
-                axisContainer.insertBefore(bgRect, axisContainer.firstChild);
-            }
-        }
         renderLine(container) {
             const { start, end, line } = this.attribute;
             const { startSymbol, endSymbol, style, breakRange, breakShape, breakShapeStyle, state, ...restLineAttrs } = line;
@@ -3778,21 +3709,24 @@
             }
             return base;
         }
-        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            const orient = this.attribute.orient;
-            if (orient === 'left' || orient === 'right') {
-                rotateYAxis(orient, labelShapes);
-            }
-            else if (orient === 'bottom' || orient === 'top') {
-                rotateXAxis(orient, labelShapes);
-            }
-        }
-        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
             if (vutils.isEmpty(labelShapes)) {
                 return;
             }
-            const { verticalLimitSize, label, orient } = this.attribute;
-            const limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount);
+            const { verticalLimitSize, label, title, line, tick, orient } = this.attribute;
+            const labelSpace = label.space ?? 4;
+            let limitLength = verticalLimitSize;
+            let titleHeight = 0;
+            let titleSpacing = 0;
+            const axisLineWidth = line?.visible ? line.style.lineWidth ?? 1 : 0;
+            const tickLength = tick?.visible ? tick.length ?? 4 : 0;
+            if (title?.visible) {
+                titleHeight = measureTextSize(title.text, title.textStyle).height;
+                titleSpacing = title.space;
+            }
+            if (limitLength) {
+                limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+            }
             const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation } = label;
             if (vutils.isFunction(layoutFunc)) {
                 layoutFunc(labelShapes, labelData, layer, this);
@@ -3820,79 +3754,6 @@
                 }
             }
         }
-        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            const { verticalLimitSize, orient } = this.attribute;
-            const isHorizontal = orient === 'bottom' || orient === 'top';
-            const axisLabelContainerBounds = labelContainer.AABBBounds;
-            let axisLabelContainerSize = isHorizontal ? axisLabelContainerBounds.height() : axisLabelContainerBounds.width();
-            const { verticalMinSize } = this.attribute;
-            if (vutils.isValidNumber(verticalMinSize) && (!vutils.isValidNumber(verticalLimitSize) || verticalMinSize <= verticalLimitSize)) {
-                const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
-                axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize);
-                let x;
-                let y;
-                if (orient === 'left') {
-                    x = axisLabelContainerBounds.x2 - axisLabelContainerSize;
-                    y = axisLabelContainerBounds.y1;
-                }
-                else if (orient === 'right') {
-                    x = axisLabelContainerBounds.x1;
-                    y = axisLabelContainerBounds.y1;
-                }
-                else if (orient === 'top') {
-                    x = axisLabelContainerBounds.x1;
-                    y = axisLabelContainerBounds.y2 - axisLabelContainerSize;
-                }
-                else if (orient === 'bottom') {
-                    x = axisLabelContainerBounds.x1;
-                    y = axisLabelContainerBounds.y1;
-                }
-                const bgRect = vrender.createRect({
-                    x,
-                    y,
-                    width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
-                    height: isHorizontal ? axisLabelContainerSize : axisLabelContainerBounds.height(),
-                    pickable: false
-                });
-                bgRect.name = exports.AXIS_ELEMENT_NAME.axisLabelBackground;
-                bgRect.id = this._getNodeId('axis-label-background');
-                labelContainer.insertBefore(bgRect, labelContainer.firstChild);
-            }
-            if (vutils.isValid(this.attribute.label.containerAlign)) {
-                let start;
-                if (orient === 'left') {
-                    start = axisLabelContainerBounds.x2;
-                }
-                else if (orient === 'right') {
-                    start = axisLabelContainerBounds.x1;
-                }
-                else if (orient === 'top') {
-                    start = axisLabelContainerBounds.y2;
-                }
-                else if (orient === 'bottom') {
-                    start = axisLabelContainerBounds.y1;
-                }
-                alignAxisLabels(labelShapes, start, axisLabelContainerSize, orient, this.attribute.label.containerAlign);
-            }
-        }
-        _getAxisLabelLimitLength(limitSize, layerCount) {
-            const { label, title, line, tick } = this.attribute;
-            const labelSpace = label.space ?? 4;
-            let limitLength = limitSize;
-            let titleHeight = 0;
-            let titleSpacing = 0;
-            const axisLineWidth = line?.visible ? line.style.lineWidth ?? 1 : 0;
-            const tickLength = tick?.visible ? tick.length ?? 4 : 0;
-            if (title?.visible) {
-                titleHeight = measureTextSize(title.text, title.textStyle).height;
-                const padding = vutils.normalizePadding(title.padding);
-                titleSpacing = title.space + padding[0] + padding[2];
-            }
-            if (limitLength) {
-                limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
-            }
-            return limitLength;
-        }
     }
 
     class CircleAxis extends AxisBase {
@@ -4147,13 +4008,7 @@
             }
             return base;
         }
-        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            return;
-        }
-        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            return;
-        }
-        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
             return;
         }
     }
@@ -4513,9 +4368,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);
@@ -7190,9 +7045,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);
@@ -7234,9 +7089,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;
@@ -7248,9 +7103,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);
@@ -7302,9 +7157,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);
@@ -8845,7 +8700,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();
@@ -8868,7 +8723,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;
@@ -8877,7 +8732,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);
         };
@@ -8886,7 +8741,7 @@
                 return;
             }
             this._isPlaying = false;
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -8997,7 +8852,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;
@@ -9007,11 +8862,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);
         };
@@ -9021,7 +8876,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);
         };
@@ -9766,7 +9621,7 @@
         }
     }
 
-    const version = "0.14.0-alpha.4";
+    const version = "0.14.0-alpha.8";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;