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

package/dist/index.js

@@ -273,9 +273,9 @@
             e.stopPropagation();
             const { direction } = this.attribute;
             this._prePos = direction === 'horizontal' ? e.clientX : e.clientY;
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.addEventListener('pointermove', this._onSliderPointerMove);
-                vrender.vglobal.addEventListener('pointerup', this._onSliderPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.addEventListener('pointermove', this._onSliderPointerMove);
+                vrender.global.addEventListener('pointerup', this._onSliderPointerUp);
             }
             else {
                 this._slider.addEventListener('pointermove', this._onSliderPointerMove);
@@ -306,9 +306,9 @@
         };
         _onSliderPointerUp = (e) => {
             e.preventDefault();
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.removeEventListener('pointermove', this._onSliderPointerMove);
-                vrender.vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.removeEventListener('pointermove', this._onSliderPointerMove);
+                vrender.global.removeEventListener('pointerup', this._onSliderPointerUp);
             }
             else {
                 this._slider.removeEventListener('pointermove', this._onSliderPointerMove);
@@ -1331,6 +1331,9 @@
                 _clear(index >>> DIV, ~(1 << (index & MOD)));
             },
             getRange: ({ x1, y1, x2, y2 }) => {
+                if (x2 < 0 || y2 < 0 || x1 > w || y1 > h) {
+                    return true;
+                }
                 let r = y2;
                 let start;
                 let end;
@@ -1363,6 +1366,9 @@
                 return false;
             },
             setRange: ({ x1, y1, x2, y2 }) => {
+                if (x2 < 0 || y2 < 0 || x1 > w || y1 > h) {
+                    return;
+                }
                 let start;
                 let end;
                 let indexStart;
@@ -2619,6 +2625,7 @@
         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) {
@@ -2801,7 +2808,7 @@
             }
         };
         _renderInner(container) {
-            const { title, label, tick, line, grid, items, panel } = this.attribute;
+            const { title, label, tick, line, grid, items } = this.attribute;
             const axisContainer = vrender.createGroup({ x: 0, y: 0, zIndex: 1 });
             axisContainer.name = exports.AXIS_ELEMENT_NAME.axisContainer;
             axisContainer.id = this._getNodeId('container');
@@ -2825,7 +2832,9 @@
                     items.forEach((axisItems, layer) => {
                         const layerLabelGroup = this.renderLabels(labelGroup, axisItems, layer);
                         const labels = layerLabelGroup.getChildren();
-                        this.handleLabelsOverlap(labels, axisItems, layer, items.length);
+                        this.beforeLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+                        this.handleLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+                        this.afterLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
                     });
                 }
                 if (grid?.visible) {
@@ -2835,22 +2844,6 @@
             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();
@@ -3385,6 +3378,67 @@
         });
     }
 
+    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;
@@ -3402,6 +3456,27 @@
                 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;
@@ -3709,24 +3784,21 @@
             }
             return base;
         }
-        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
-            if (vutils.isEmpty(labelShapes)) {
-                return;
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            const orient = this.attribute.orient;
+            if (orient === 'left' || orient === 'right') {
+                rotateYAxis(orient, labelShapes);
             }
-            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;
+            else if (orient === 'bottom' || orient === 'top') {
+                rotateXAxis(orient, labelShapes);
             }
-            if (limitLength) {
-                limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+        }
+        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            if (vutils.isEmpty(labelShapes)) {
+                return;
             }
+            const { verticalLimitSize, label, orient } = this.attribute;
+            const limitLength = this._getAxisLabelLimitLength(verticalLimitSize, 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);
@@ -3754,6 +3826,79 @@
                 }
             }
         }
+        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 {
@@ -4008,7 +4153,13 @@
             }
             return base;
         }
-        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             return;
         }
     }
@@ -4368,9 +4519,9 @@
             if (this._selectedPreviewGroup) {
                 this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
             }
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
-                vrender.vglobal.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
+            if (vrender.global.env === 'browser') {
+                vrender.global.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
+                vrender.global.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
             }
             this.addEventListener('pointermove', this._onHandlerPointerMove);
             this.addEventListener('pointerup', this._onHandlerPointerUp);
@@ -7045,9 +7196,9 @@
             e.stopPropagation();
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? e.clientX : e.clientY;
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.addEventListener('pointermove', this._onHandlerPointerMove);
-                vrender.vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.addEventListener('pointermove', this._onHandlerPointerMove);
+                vrender.global.addEventListener('pointerup', this._onHandlerPointerUp);
             }
             else {
                 this._currentHandler.addEventListener('pointermove', this._onHandlerPointerMove);
@@ -7089,9 +7240,9 @@
         _onHandlerPointerUp = (e) => {
             e.preventDefault();
             this._currentHandler = null;
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.removeEventListener('pointermove', this._onHandlerPointerMove);
-                vrender.vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.removeEventListener('pointermove', this._onHandlerPointerMove);
+                vrender.global.removeEventListener('pointerup', this._onHandlerPointerUp);
             }
             else {
                 const currentTarget = e.target;
@@ -7103,9 +7254,9 @@
         _onTrackPointerdown = (e) => {
             e.stopPropagation();
             this._prePos = this._isHorizontal ? e.clientX : e.clientY;
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.addEventListener('pointermove', this._onTrackPointerMove);
-                vrender.vglobal.addEventListener('pointerup', this._onTrackPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.addEventListener('pointermove', this._onTrackPointerMove);
+                vrender.global.addEventListener('pointerup', this._onTrackPointerUp);
             }
             else {
                 this._track.addEventListener('pointermove', this._onTrackPointerMove);
@@ -7157,9 +7308,9 @@
         };
         _onTrackPointerUp = (e) => {
             e.preventDefault();
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.removeEventListener('pointermove', this._onTrackPointerMove);
-                vrender.vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.removeEventListener('pointermove', this._onTrackPointerMove);
+                vrender.global.removeEventListener('pointerup', this._onTrackPointerUp);
             }
             else {
                 this._track.removeEventListener('pointermove', this._onTrackPointerMove);
@@ -8700,7 +8851,7 @@
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
             this._isReachEnd = false;
             this._tickTime = Date.now();
-            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, true));
+            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this, true));
         };
         _play = (isFirstPlay) => {
             const now = Date.now();
@@ -8723,7 +8874,7 @@
                 (this._direction === 'reverse' && this._dataIndex <= this._minIndex)) {
                 this._isReachEnd = true;
             }
-            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, false));
+            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this, false));
         };
         _updateDataIndex = (dataIndex) => {
             this._dataIndex = dataIndex;
@@ -8732,7 +8883,7 @@
         _playEnd = () => {
             this._isPlaying = false;
             this._controller.togglePlay();
-            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
+            vrender.global.getCancelAnimationFrame()(this._rafId);
             this._activeIndex = -1;
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
         };
@@ -8741,7 +8892,7 @@
                 return;
             }
             this._isPlaying = false;
-            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
+            vrender.global.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -8852,7 +9003,7 @@
             }
             this._startTime = Date.now() - this._elapsed;
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
-            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
+            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this));
         };
         _play = () => {
             this._elapsed = Date.now() - this._startTime;
@@ -8862,11 +9013,11 @@
                 this._playEnd();
                 return;
             }
-            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
+            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this));
         };
         _playEnd = () => {
             this._isPlaying = false;
-            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
+            vrender.global.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
         };
@@ -8876,7 +9027,7 @@
             }
             this._isPlaying = false;
             this._elapsed = Date.now() - this._startTime;
-            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
+            vrender.global.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -9621,7 +9772,7 @@
         }
     }
 
-    const version = "0.14.0-alpha.8";
+    const version = "0.14.0-alpha.9";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;