@visactor/vrender-components 0.20.13-alpha.3 → 0.20.14

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 } from "@visactor/vutils";
+import { merge, isEmpty, normalizePadding, get, isValid, isNil, isFunction, isArray, minInArray, throttle, isNumberClose, clamp, isObject } from "@visactor/vutils";
 
 import { graphicCreator } from "@visactor/vrender-core";
 
@@ -38,7 +38,7 @@ export class DiscreteLegend extends LegendBase {
     constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, DiscreteLegend.defaultAttributes, attributes)), 
         this.name = "discreteLegend", this._itemsContainer = null, this._itemHeightByUser = void 0, 
-        this._itemHeight = 0, this._itemMaxWidth = 0, this._onHover = e => {
+        this._itemHeight = 0, this._itemMaxWidth = 0, this._contentMaxHeight = 0, this._onHover = e => {
             const target = e.target;
             if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
                 const legendItem = target.delegate;
@@ -98,7 +98,7 @@ export class DiscreteLegend extends LegendBase {
         }));
     }
     _renderItems() {
-        const {item: itemAttrs = {}, maxCol: maxCol = 1, maxRow: maxRow = 2, maxWidth: maxWidth, maxHeight: maxHeight, defaultSelected: defaultSelected, lazyload: lazyload, autoPage: autoPage} = this.attribute, {spaceCol: spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = itemAttrs, itemsContainer = this._itemsContainer, {items: legendItems, isHorizontal: isHorizontal, startIndex: startIndex, isScrollbar: isScrollbar} = this._itemContext, maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
+        const {item: itemAttrs = {}, maxCol: maxCol = 1, maxRow: maxRow = 2, maxWidth: maxWidth, defaultSelected: defaultSelected, lazyload: lazyload, autoPage: autoPage} = this.attribute, {spaceCol: spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = itemAttrs, itemsContainer = this._itemsContainer, {items: legendItems, isHorizontal: isHorizontal, startIndex: startIndex, isScrollbar: isScrollbar} = this._itemContext, maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol, maxHeight = this._contentMaxHeight;
         let item, {doWrap: doWrap, maxWidthInCol: maxWidthInCol, startX: startX, startY: startY, pages: pages} = this._itemContext, lastItemWidth = 0;
         for (let index = startIndex, len = legendItems.length; index < len && !(lazyload && pages > this._itemContext.currentPage * maxPages); index++) {
             lazyload && (this._itemContext.startIndex = index + 1), item = legendItems[index], 
@@ -127,10 +127,10 @@ export class DiscreteLegend extends LegendBase {
         lazyload || (this._itemContext.startIndex = legendItems.length), this._itemContext;
     }
     _renderContent() {
-        const {item: item = {}, items: items, reversed: reversed, maxWidth: maxWidth} = this.attribute;
+        const {item: item = {}, items: items, reversed: reversed, maxWidth: maxWidth, maxHeight: maxHeight} = this.attribute;
         if (!1 === item.visible || isEmpty(items)) return;
         let legendItems = items;
-        reversed && (legendItems = null == items ? void 0 : items.reverse());
+        reversed && (legendItems = null == items ? void 0 : items.reverse()), this._contentMaxHeight = Math.max(0, maxHeight - this._parsedPadding[0] - this._parsedPadding[2]);
         const itemsContainer = graphicCreator.group({
             x: 0,
             y: 0
@@ -153,7 +153,8 @@ export class DiscreteLegend extends LegendBase {
             items: legendItems,
             isHorizontal: isHorizontal,
             totalPage: 1 / 0,
-            isScrollbar: pager && "scrollbar" === pager.type
+            isScrollbar: pager && "scrollbar" === pager.type,
+            clipContainer: void 0
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
         this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent()), 
@@ -164,8 +165,15 @@ export class DiscreteLegend extends LegendBase {
         if (this.attribute.disableTriggerEvent) return;
         if (!this._itemsContainer) return;
         const {hover: hover = !0, select: select = !0} = this.attribute;
-        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerleave", this._onUnHover)), 
-        select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
+        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);
+        }
     }
     _autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape) {
         var _a, _b;
@@ -307,12 +315,12 @@ export class DiscreteLegend extends LegendBase {
             direction: "horizontal",
             disableTriggerEvent: disableTriggerEvent,
             range: [ 0, .5 ],
-            height: 12
+            height: !1 === compStyle.visible ? 0 : 12
         }, compStyle), {
             width: compSize
         })) : new ScrollBar(Object.assign(Object.assign({
             direction: "vertical",
-            width: 12,
+            width: !1 === compStyle.visible ? 0 : 12,
             range: [ 0, .5 ]
         }, compStyle), {
             height: compSize,
@@ -337,9 +345,15 @@ 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 {currentPage: currentPage, totalPage: totalPage, isHorizontal: isHorizontal} = this._itemContext;
-        this._pagerComponent.setScrollRange([ (currentPage - 1) / totalPage, currentPage / totalPage ]), 
+        const {isHorizontal: isHorizontal, currentPage: currentPage, totalPage: totalPage} = this._itemContext, start = (currentPage - 1) / totalPage;
+        this._pagerComponent.setScrollRange([ start, start + this._computeScrollbarDelta() ]), 
         isHorizontal ? this._pagerComponent.setAttributes({
             x: 0,
             y: renderStartY + contentHeight
@@ -352,20 +366,32 @@ 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 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;
+            return newPage = 0 === value[0] ? 1 : 1 === value[1] ? this._itemContext.totalPage : value[0] * this._itemContext.totalPage + 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);
+            scrollComponent.setScrollRange([ preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue ], !0), 
+            this.updateScrollMask();
         }, 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);
-                    this._itemContext.totalPage = newTotalPage, this._pagerComponent.setScrollRange([ (newPage - 1) / newTotalPage, newPage / newTotalPage ]);
+                    if (this._itemContext.totalPage = newTotalPage, this._itemContext.isScrollbar && this._pagerComponent) {
+                        const newDelta = this._computeScrollbarDelta(), [start] = this._pagerComponent.getScrollRange();
+                        this._pagerComponent.setScrollRange([ start, start + newDelta ]);
+                    }
                 }
-                animation ? this._itemsContainer.animate().to({
+                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({
                     [channel]: -(newPage - 1) * pageSize
                 }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
@@ -379,7 +405,7 @@ export class DiscreteLegend extends LegendBase {
         } else this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging);
     }
     _renderPager() {
-        const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxHeight: maxHeight, maxCol: maxCol = 1, maxRow: maxRow = 2, 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;
+        const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxCol: maxCol = 1, maxRow: maxRow = 2, 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, compWidth = 0, compHeight = 0, contentWidth = 0, contentHeight = 0, startX = 0, startY = 0, pages = 1;
         if (isHorizontal) {
             if (compHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, compWidth = maxWidth, 
@@ -421,18 +447,20 @@ export class DiscreteLegend extends LegendBase {
             clip: !0,
             pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), 
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, 
+        this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), 
         !0;
     }
     _renderScrollbar() {
-        const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxHeight: maxHeight, 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;
-        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;
+        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;
             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));
@@ -443,9 +471,15 @@ 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, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+            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));
         }
-        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,
@@ -454,9 +488,57 @@ export class DiscreteLegend extends LegendBase {
             clip: !0,
             pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), 
+        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"), 
         !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;