@visactor/vrender-components 0.13.3-alpha.0 → 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 {
@@ -4241,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);
@@ -6898,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);
@@ -6942,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;
@@ -6956,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);
@@ -7010,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);
@@ -8553,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();
@@ -8576,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;
@@ -8585,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);
         };
@@ -8594,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);
         };
@@ -8705,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;
@@ -8715,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);
         };
@@ -8729,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);
         };
@@ -9474,7 +9501,7 @@
         }
     }
 
-    const version = "0.13.3-alpha.0";
+    const version = "0.14.0-alpha.0";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;
@@ -9527,7 +9554,8 @@
     exports.getSizeHandlerPath = getSizeHandlerPath;
     exports.getVerticalPath = getVerticalPath;
     exports.loadPoptip = loadPoptip;
-    exports.module = module;
+    exports.popTipModule = popTipModule;
+    exports.setPoptipTheme = setPoptipTheme;
     exports.version = version;
 
 }));