@visactor/vrender-components 0.21.0-alpha.3 → 0.21.0-vstory.1

package/es/legend/discrete/discrete.js

@@ -8,7 +8,7 @@ var __rest = this && this.__rest || function(s, e) {
     return t;
 };
 
-import { merge, isEmpty, normalizePadding, get, isValid, isNil, isFunction, isArray, minInArray, throttle, isNumberClose, clamp, isObject } from "@visactor/vutils";
+import { merge, isEmpty, normalizePadding, get, isValid, isNil, isFunction, isArray, minInArray, throttle } from "@visactor/vutils";
 
 import { graphicCreator } from "@visactor/vrender-core";
 
@@ -153,8 +153,7 @@ export class DiscreteLegend extends LegendBase {
             items: legendItems,
             isHorizontal: isHorizontal,
             totalPage: 1 / 0,
-            isScrollbar: pager && "scrollbar" === pager.type,
-            clipContainer: void 0
+            isScrollbar: pager && "scrollbar" === pager.type
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
         this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent()), 
@@ -165,15 +164,8 @@ export class DiscreteLegend extends LegendBase {
         if (this.attribute.disableTriggerEvent) return;
         if (!this._itemsContainer) return;
         const {hover: hover = !0, select: select = !0} = this.attribute;
-        if (hover) {
-            let trigger = "pointermove", triggerOff = "pointerleave";
-            isObject(hover) && (hover.trigger && (trigger = hover.trigger), hover.triggerOff && (triggerOff = hover.triggerOff)), 
-            this._itemsContainer.addEventListener(trigger, this._onHover), this._itemsContainer.addEventListener(triggerOff, this._onUnHover);
-        }
-        if (select) {
-            let trigger = "pointerdown";
-            isObject(select) && select.trigger && (trigger = select.trigger), this._itemsContainer.addEventListener(trigger, this._onClick);
-        }
+        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerleave", this._onUnHover)), 
+        select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
     }
     _autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape) {
         var _a, _b;
@@ -315,12 +307,12 @@ export class DiscreteLegend extends LegendBase {
             direction: "horizontal",
             disableTriggerEvent: disableTriggerEvent,
             range: [ 0, .5 ],
-            height: !1 === compStyle.visible ? 0 : 12
+            height: 12
         }, compStyle), {
             width: compSize
         })) : new ScrollBar(Object.assign(Object.assign({
             direction: "vertical",
-            width: !1 === compStyle.visible ? 0 : 12,
+            width: 12,
             range: [ 0, .5 ]
         }, compStyle), {
             height: compSize,
@@ -345,15 +337,9 @@ export class DiscreteLegend extends LegendBase {
             });
         }
     }
-    _computeScrollbarDelta() {
-        const {isHorizontal: isHorizontal, clipContainer: clipContainer} = this._itemContext, itemContainerBounds = this._itemsContainer.AABBBounds, clipContainerBounds = clipContainer.AABBBounds;
-        let delta, innerViewSize;
-        return isHorizontal ? (innerViewSize = clipContainerBounds.width(), delta = innerViewSize / itemContainerBounds.width()) : (innerViewSize = clipContainerBounds.height(), 
-        delta = innerViewSize / itemContainerBounds.height()), delta;
-    }
     _updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY) {
-        const {isHorizontal: isHorizontal, currentPage: currentPage, totalPage: totalPage} = this._itemContext, start = (currentPage - 1) / totalPage;
-        this._pagerComponent.setScrollRange([ start, start + this._computeScrollbarDelta() ]), 
+        const {currentPage: currentPage, totalPage: totalPage, isHorizontal: isHorizontal} = this._itemContext;
+        this._pagerComponent.setScrollRange([ (currentPage - 1) / totalPage, currentPage / totalPage ]), 
         isHorizontal ? this._pagerComponent.setAttributes({
             x: 0,
             y: renderStartY + contentHeight
@@ -366,32 +352,20 @@ export class DiscreteLegend extends LegendBase {
         const pager = this.attribute.pager || {}, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn"} = pager, pageParser = this._itemContext.isScrollbar ? e => {
             const {value: value} = e.detail;
             let newPage;
-            return newPage = 0 === value[0] ? 1 : 1 === value[1] ? this._itemContext.totalPage : value[0] * this._itemContext.totalPage + 1, 
-            newPage;
+            return 0 === value[0] ? newPage = 1 : 1 === value[1] ? newPage = this._itemContext.totalPage : (newPage = value[0] * this._itemContext.totalPage, 
+            pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1), newPage;
         } : e => e.detail.current, onScroll = e => {
             const scrollComponent = this._pagerComponent, preScrollRange = scrollComponent.getScrollRange(), {direction: direction} = scrollComponent.attribute, {width: width, height: height} = scrollComponent.getSliderRenderBounds(), currentScrollValue = "vertical" === direction ? e.deltaY / height : e.deltaX / width;
-            scrollComponent.setScrollRange([ preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue ], !0), 
-            this.updateScrollMask();
+            scrollComponent.setScrollRange([ preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue ], !0);
         }, onPaging = e => {
             const newPage = pageParser(e);
             if (newPage !== this._itemContext.currentPage) {
                 if (this._itemContext.currentPage = newPage, this._itemContext && this._itemContext.startIndex < this._itemContext.items.length) {
                     this._renderItems();
                     const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
-                    if (this._itemContext.totalPage = newTotalPage, this._itemContext.isScrollbar && this._pagerComponent) {
-                        const newDelta = this._computeScrollbarDelta(), [start] = this._pagerComponent.getScrollRange();
-                        this._pagerComponent.setScrollRange([ start, start + newDelta ]);
-                    }
+                    this._itemContext.totalPage = newTotalPage, this._pagerComponent.setScrollRange([ (newPage - 1) / newTotalPage, newPage / newTotalPage ]);
                 }
-                if (this._itemContext.isScrollbar) {
-                    const [start] = this._pagerComponent.getScrollRange();
-                    let containerSize;
-                    containerSize = this._itemContext.isHorizontal ? this._itemsContainer.AABBBounds.width() : this._itemsContainer.AABBBounds.height();
-                    const startOffset = containerSize * start;
-                    this.updateScrollMask(), animation ? this._itemsContainer.animate().to({
-                        [channel]: -startOffset
-                    }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -startOffset);
-                } else animation ? this._itemsContainer.animate().to({
+                animation ? this._itemsContainer.animate().to({
                     [channel]: -(newPage - 1) * pageSize
                 }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
@@ -447,20 +421,18 @@ export class DiscreteLegend extends LegendBase {
             clip: !0,
             pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, 
-        this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), 
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), 
         !0;
     }
     _renderScrollbar() {
-        var _a;
         const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, item: item = {}, pager: pager = {}} = this.attribute, {spaceCol: spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent: defaultCurrent = 1} = pager, compStyle = __rest(pager, [ "space", "defaultCurrent" ]), {isHorizontal: isHorizontal} = this._itemContext, maxHeight = this._contentMaxHeight;
-        let comp, contentWidth = 0, contentHeight = 0, startY = 0, pages = 1;
-        if (isHorizontal) contentWidth = maxWidth, contentHeight = this._itemHeight, comp = this._createScrollbar(compStyle, contentWidth), 
-        this._pagerComponent = comp, this._innerView.add(comp); else {
-            if (contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, 
-            comp = this._createScrollbar(compStyle, contentHeight), this._pagerComponent = comp, 
-            this._innerView.add(comp), contentHeight <= 0) return this._innerView.removeChild(comp), 
-            !1;
+        let comp, compSize = 0, contentWidth = 0, contentHeight = 0, startY = 0, pages = 1;
+        if (isHorizontal) compSize = maxWidth, contentWidth = maxWidth, contentHeight = this._itemHeight, 
+        comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, 
+        this._innerView.add(comp), this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY); else {
+            if (compSize = maxHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, 
+            this._innerView.add(comp), contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, 
+            contentHeight <= 0) return this._innerView.removeChild(comp), !1;
             const items = itemsContainer.getChildren(), itemsHeightArr = items.map((item => item.attribute.height));
             if (1 === itemsHeightArr.length || itemsHeightArr.every((entry => entry === itemsHeightArr[0]))) {
                 const itemHeight = itemsHeightArr[0], maxContentHeight = contentHeight, pageItemsCount = Math.floor(maxContentHeight / (spaceRow + itemHeight));
@@ -471,15 +443,9 @@ export class DiscreteLegend extends LegendBase {
                 prePages !== pages && index === itemsContainer.getChildren().length - 1 && startY - contentHeight >= 1 / 3 * height && (contentHeight = preStartY + height, 
                 pages -= 1);
             }));
-            this._itemContext.totalPage = pages, this._itemContext.pages = pages;
-        }
-        if (defaultCurrent > 1) if (isHorizontal) {
-            const maxOffset = this._itemsContainer.AABBBounds.width() - contentWidth;
-            itemsContainer.setAttribute("x", -Math.min((defaultCurrent - 1) * (contentWidth + spaceCol), maxOffset));
-        } else {
-            const maxOffset = this._itemsContainer.AABBBounds.height() - contentHeight;
-            itemsContainer.setAttribute("y", -Math.min((defaultCurrent - 1) * (contentHeight + spaceRow), maxOffset));
+            this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
         }
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (contentWidth + spaceCol)) : itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (contentHeight + spaceRow)));
         const clipGroup = graphicCreator.group({
             x: 0,
             y: renderStartY,
@@ -488,57 +454,9 @@ export class DiscreteLegend extends LegendBase {
             clip: !0,
             pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, 
-        this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY), (null === (_a = pager.scrollMask) || void 0 === _a ? void 0 : _a.visible) && this.renderScrollMask(clipGroup), 
-        this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), 
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), 
         !0;
     }
-    renderScrollMask(clipGroup) {
-        const {scrollMask: scrollMask = {}} = this.attribute.pager, {visible: visible = !0, gradientLength: gradientLength = 16, gradientStops: gradientStops} = scrollMask;
-        if (!visible || !gradientStops) return;
-        const width = clipGroup.AABBBounds.width(), height = clipGroup.AABBBounds.height(), totalLength = this._itemContext.isHorizontal ? width : height, startStops = gradientStops.map((stop => ({
-            offset: gradientLength * stop.offset / totalLength,
-            color: stop.color
-        }))), endStops = gradientStops.map((stop => ({
-            offset: (totalLength - gradientLength * stop.offset) / totalLength,
-            color: stop.color
-        }))), mask = graphicCreator.rect({
-            x: 0,
-            y: 0,
-            width: width,
-            height: height
-        });
-        this._scrollMask = mask, this._scrollMaskContext = {
-            startStops: startStops,
-            endStops: endStops
-        }, this.updateScrollMask(), clipGroup.add(mask);
-    }
-    updateScrollMask() {
-        if (!this._scrollMask || !this._pagerComponent) return;
-        if (!this._itemContext.isScrollbar) return;
-        const [start, end] = this._pagerComponent.getScrollRange(), stops = [];
-        isNumberClose(clamp(end, 0, 1), 1) || stops.push(...this._scrollMaskContext.endStops), 
-        isNumberClose(clamp(start, 0, 1), 0) || stops.push(...this._scrollMaskContext.startStops), 
-        stops.length && (this._itemContext.isHorizontal ? this._scrollMask.setAttributes({
-            fill: {
-                gradient: "linear",
-                x0: 0,
-                y0: 0,
-                x1: 1,
-                y1: 0,
-                stops: stops
-            }
-        }) : this._scrollMask.setAttributes({
-            fill: {
-                gradient: "linear",
-                x0: 0,
-                y0: 0,
-                x1: 0,
-                y1: 1,
-                stops: stops
-            }
-        }));
-    }
     _renderPagerComponent() {
         return this._itemContext.isScrollbar ? this._renderScrollbar() : this._renderPager(), 
         !0;