@visactor/vrender-components 0.18.0-alpha.0 → 0.18.0-alpha.2

package/cjs/legend/discrete/discrete.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.DiscreteLegend = void 0;
 
-const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), base_1 = require("../base"), pager_1 = require("../../pager"), constant_1 = require("../constant"), register_1 = require("../register"), DEFAULT_STATES = {
+const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), base_1 = require("../base"), pager_1 = require("../../pager"), constant_1 = require("../constant"), register_1 = require("../register"), util_1 = require("../../util"), scrollbar_1 = require("../../scrollbar"), DEFAULT_STATES = {
     [constant_1.LegendStateValue.focus]: {},
     [constant_1.LegendStateValue.selected]: {},
     [constant_1.LegendStateValue.selectedHover]: {},
@@ -138,10 +138,11 @@ class DiscreteLegend extends base_1.LegendBase {
             startY: 0,
             startIndex: 0,
             items: legendItems,
-            isHorizontal: isHorizontal
+            isHorizontal: isHorizontal,
+            totalPage: 1 / 0
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
-        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPager(isHorizontal)), 
+        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent(isHorizontal)), 
         pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + (0, 
         vutils_1.get)(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
     }
@@ -154,7 +155,7 @@ class DiscreteLegend extends base_1.LegendBase {
     }
     _renderEachItem(item, isSelected, index, items) {
         var _a, _b;
-        const {id: id, label: label, value: value, shape: shape} = item, {padding: padding = 0, focus: focus, focusIconStyle: focusIconStyle} = this.attribute.item, {shape: shapeAttr, label: labelAttr, value: valueAttr, background: background} = this.attribute.item, shapeStyle = this._handleStyle(shapeAttr, item, isSelected, index, items), labelStyle = this._handleStyle(labelAttr, item, isSelected, index, items), valueStyle = this._handleStyle(valueAttr, item, isSelected, index, items), backgroundStyle = this._handleStyle(background, item, isSelected, index, items), parsedPadding = (0, 
+        const {id: id, label: label, value: value, shape: shape} = item, {padding: padding = 0, focus: focus, focusIconStyle: focusIconStyle, align: align} = this.attribute.item, {shape: shapeAttr, label: labelAttr, value: valueAttr, background: background} = this.attribute.item, shapeStyle = this._handleStyle(shapeAttr, item, isSelected, index, items), labelStyle = this._handleStyle(labelAttr, item, isSelected, index, items), valueStyle = this._handleStyle(valueAttr, item, isSelected, index, items), backgroundStyle = this._handleStyle(background, item, isSelected, index, items), parsedPadding = (0, 
         vutils_1.normalizePadding)(padding);
         let itemGroup;
         !1 === background.visible ? (itemGroup = vrender_core_1.graphicCreator.group({
@@ -174,8 +175,8 @@ class DiscreteLegend extends base_1.LegendBase {
         itemGroup.add(innerGroup);
         let focusShape, focusStartX = 0, shapeSize = 0, shapeSpace = 0;
         if (shapeAttr && !1 !== shapeAttr.visible) {
-            shapeSize = (0, vutils_1.get)(shapeStyle, "style.size", constant_1.DEFAULT_SHAPE_SIZE), 
-            shapeSpace = (0, vutils_1.get)(shapeAttr, "space", constant_1.DEFAULT_SHAPE_SPACE);
+            const s = (0, vutils_1.get)(shapeStyle, "style.size", constant_1.DEFAULT_SHAPE_SIZE);
+            shapeSize = (0, vutils_1.isArray)(s) ? s[0] || 0 : s, shapeSpace = (0, vutils_1.get)(shapeAttr, "space", constant_1.DEFAULT_SHAPE_SPACE);
             const itemShape = vrender_core_1.graphicCreator.symbol(Object.assign(Object.assign({
                 x: 0,
                 y: 0,
@@ -190,7 +191,7 @@ class DiscreteLegend extends base_1.LegendBase {
             itemShape.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected), 
             innerGroup.add(itemShape);
         }
-        let focusSpace = 0;
+        let labelShape, focusSpace = 0;
         if (focus) {
             const focusSize = (0, vutils_1.get)(focusIconStyle, "size", constant_1.DEFAULT_SHAPE_SIZE);
             focusShape = vrender_core_1.graphicCreator.symbol(Object.assign(Object.assign({
@@ -204,30 +205,35 @@ class DiscreteLegend extends base_1.LegendBase {
             })), this._appendDataToShape(focusShape, constant_1.LEGEND_ELEMENT_NAME.focus, item, itemGroup), 
             focusSpace = focusSize;
         }
-        const labelShape = vrender_core_1.graphicCreator.text(Object.assign(Object.assign({
+        const text = labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label, labelAttributes = Object.assign(Object.assign({
             x: shapeSize / 2 + shapeSpace,
             y: 0,
             textAlign: "start",
             textBaseline: "middle",
             lineHeight: null === (_b = labelStyle.style) || void 0 === _b ? void 0 : _b.fontSize
         }, labelStyle.style), {
-            text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label
-        }));
+            text: text
+        });
+        labelShape = (0, util_1.isRichText)(labelAttributes) ? vrender_core_1.graphicCreator.richtext((0, 
+        util_1.richTextAttributeTransform)(labelAttributes)) : vrender_core_1.graphicCreator.text(labelAttributes), 
         this._appendDataToShape(labelShape, constant_1.LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), 
         labelShape.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected), 
         innerGroup.add(labelShape);
         const labelSpace = (0, vutils_1.get)(labelAttr, "space", constant_1.DEFAULT_LABEL_SPACE);
         if ((0, vutils_1.isValid)(value)) {
-            const valueSpace = (0, vutils_1.get)(valueAttr, "space", focus ? constant_1.DEFAULT_VALUE_SPACE : 0), valueShape = vrender_core_1.graphicCreator.text(Object.assign(Object.assign({
+            const valueSpace = (0, vutils_1.get)(valueAttr, "space", focus ? constant_1.DEFAULT_VALUE_SPACE : 0), valueText = valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value, valueAttributes = Object.assign(Object.assign({
                 x: 0,
                 y: 0,
                 textAlign: "start",
                 textBaseline: "middle",
                 lineHeight: valueStyle.style.fontSize
             }, valueStyle.style), {
-                text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value
-            }));
-            if (this._appendDataToShape(valueShape, constant_1.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), 
+                text: valueText
+            });
+            let valueShape;
+            if (valueShape = (0, util_1.isRichText)(valueAttributes) ? vrender_core_1.graphicCreator.richtext((0, 
+            util_1.richTextAttributeTransform)(valueAttributes)) : vrender_core_1.graphicCreator.text(valueAttributes), 
+            this._appendDataToShape(valueShape, constant_1.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), 
             valueShape.addState(isSelected ? constant_1.LegendStateValue.selected : constant_1.LegendStateValue.unSelected), 
             this._itemWidthByUser) {
                 const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace, valueBounds = valueShape.AABBBounds, labelBounds = labelShape.AABBBounds, valueWidth = valueBounds.width(), labelWidth = labelBounds.width();
@@ -242,86 +248,150 @@ class DiscreteLegend extends base_1.LegendBase {
         } else this._itemWidthByUser ? (labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace), 
         focusStartX = labelShape.AABBBounds.x2 + labelSpace) : focusStartX = labelShape.AABBBounds.x2 + labelSpace;
         focusShape && (focusShape.setAttribute("x", focusStartX), innerGroup.add(focusShape));
-        const innerGroupBounds = innerGroup.AABBBounds, innerGroupWidth = innerGroupBounds.width(), innerGroupHeight = innerGroupBounds.height(), itemGroupWidth = (0, 
-        vutils_1.isValid)(this.attribute.item.width) ? this.attribute.item.width : innerGroupWidth + parsedPadding[1] + parsedPadding[3], itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
+        const innerGroupBounds = innerGroup.AABBBounds, innerGroupWidth = innerGroupBounds.width();
+        if ("right" === align) {
+            const x2 = innerGroupBounds.x2, x1 = innerGroupBounds.x1;
+            innerGroup.forEachChildren(((child, index) => {
+                "symbol" !== child.type && "right" !== child.attribute.textAlign || child === focusShape ? child.setAttribute("x", x1 + x2 - child.attribute.x - child.AABBBounds.width()) : "symbol" !== child.type ? child.setAttributes({
+                    x: x1 + x2 - child.attribute.x,
+                    textAlign: "left"
+                }) : child.setAttribute("x", x1 + x2 - child.attribute.x);
+            }));
+        }
+        const innerGroupHeight = innerGroupBounds.height(), itemGroupWidth = (0, vutils_1.isValid)(this.attribute.item.width) ? this.attribute.item.width : innerGroupWidth + parsedPadding[1] + parsedPadding[3], itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
         return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, 
         focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), 
         itemGroup;
     }
-    _renderPager(isHorizontal) {
-        const renderStartY = this._title ? this._title.AABBBounds.height() + (0, vutils_1.get)(this.attribute, "title.space", 8) : 0, {maxWidth: maxWidth, maxHeight: maxHeight, maxCol: maxCol = 1, maxRow: maxRow = 2, item: item = {}, pager: pager = {}, disableTriggerEvent: disableTriggerEvent} = this.attribute, {spaceCol: spaceCol = constant_1.DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = constant_1.DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn", space: pagerSpace = constant_1.DEFAULT_PAGER_SPACE, position: position = "middle"} = pager, pageStyle = __rest(pager, [ "animation", "animationDuration", "animationEasing", "space", "position" ]);
-        let pagerComp, pageHeight = 0, pageWidth = 0, startX = 0, startY = 0, pages = 1;
-        if (isHorizontal) {
-            if (pagerComp = new pager_1.Pager(Object.assign(Object.assign({
-                layout: 1 === maxRow ? "horizontal" : "vertical",
-                total: 99
-            }, (0, vutils_1.merge)({
-                handler: {
-                    preShape: "triangleUp",
-                    nextShape: "triangleDown"
+    _createPager(isScrollbar, isHorizontal, compStyle, compSize) {
+        var _a, _b;
+        const {disableTriggerEvent: disableTriggerEvent, maxRow: maxRow} = this.attribute;
+        return isScrollbar ? isHorizontal ? new scrollbar_1.ScrollBar(Object.assign(Object.assign({
+            direction: "vertical",
+            width: 12,
+            range: [ 0, .5 ]
+        }, compStyle), {
+            height: compSize,
+            disableTriggerEvent: disableTriggerEvent
+        })) : new scrollbar_1.ScrollBar(Object.assign(Object.assign({
+            direction: "horizontal",
+            disableTriggerEvent: disableTriggerEvent,
+            range: [ 0, .5 ],
+            height: 12
+        }, compStyle), {
+            width: compSize
+        })) : isHorizontal ? new pager_1.Pager(Object.assign(Object.assign({
+            layout: 1 === maxRow ? "horizontal" : "vertical",
+            total: 99
+        }, (0, vutils_1.merge)({
+            handler: {
+                preShape: "triangleUp",
+                nextShape: "triangleDown"
+            }
+        }, compStyle)), {
+            defaultCurrent: null === (_a = this.attribute.pager) || void 0 === _a ? void 0 : _a.defaultCurrent,
+            disableTriggerEvent: disableTriggerEvent
+        })) : new pager_1.Pager(Object.assign({
+            layout: "horizontal",
+            total: 99,
+            disableTriggerEvent: disableTriggerEvent,
+            defaultCurrent: null === (_b = this.attribute.pager) || void 0 === _b ? void 0 : _b.defaultCurrent
+        }, compStyle));
+    }
+    _updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize) {
+        const {maxHeight: maxHeight, pager: pager} = this.attribute, {currentPage: currentPage, totalPage: totalPage} = this._itemContext;
+        if (isScrollbar) this._pagerComponent.setScrollRange([ (currentPage - 1) / totalPage, currentPage / totalPage ]), 
+        isHorizontal ? this._pagerComponent.setAttributes({
+            x: contentSize,
+            y: renderStartY
+        }) : this._pagerComponent.setAttributes({
+            x: 0,
+            y: maxHeight - this._pagerComponent.AABBBounds.height()
+        }); else {
+            const position = pager && pager.position || "middle";
+            if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
+                let y;
+                y = "start" === position ? renderStartY : "end" === position ? renderStartY + compSize - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compSize / 2 - this._pagerComponent.AABBBounds.height() / 2, 
+                this._pagerComponent.setAttributes({
+                    x: contentSize,
+                    y: y
+                });
+            } else {
+                let x;
+                x = "start" === position ? 0 : "end" === position ? compSize - this._pagerComponent.AABBBounds.width() : (compSize - this._pagerComponent.AABBBounds.width()) / 2, 
+                this._pagerComponent.setAttributes({
+                    x: x,
+                    y: maxHeight - this._pagerComponent.AABBBounds.height()
+                });
+            }
+        }
+    }
+    _bindEventsOfPager(isScrollbar, isHorizontal, compSize, spaceSize) {
+        const pager = this.attribute.pager || {}, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn"} = pager, pageParser = isScrollbar ? e => {
+            const {value: value} = e.detail;
+            let newPage = value[0] * this._itemContext.totalPage;
+            return pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1, 
+            newPage;
+        } : e => e.detail.current, 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 ]);
                 }
-            }, pageStyle)), {
-                disableTriggerEvent: disableTriggerEvent
-            })), this._pager = pagerComp, this._innerView.add(pagerComp), pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, 
-            pageWidth = maxWidth - pagerComp.AABBBounds.width() - pagerSpace, pageWidth <= 0) return this._innerView.removeChild(pagerComp), 
-            !1;
-            let y;
+                animation ? this._itemsContainer.animate().to(isHorizontal ? {
+                    y: -(newPage - 1) * (compSize + spaceSize)
+                } : {
+                    x: -(newPage - 1) * (compSize + spaceSize)
+                }, animationDuration, animationEasing) : isHorizontal ? this._itemsContainer.setAttribute("y", -(newPage - 1) * (compSize + spaceSize)) : this._itemsContainer.setAttribute("x", -(newPage - 1) * (compSize + spaceSize));
+            }
+        };
+        isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), 
+        this._pagerComponent.addEventListener("toNext", onPaging));
+    }
+    _renderPagerComponent(isHorizontal) {
+        const renderStartY = this._title ? this._title.AABBBounds.height() + (0, vutils_1.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 = constant_1.DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = constant_1.DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {space: pagerSpace = constant_1.DEFAULT_PAGER_SPACE, defaultCurrent: defaultCurrent = 1} = pager, compStyle = __rest(pager, [ "space", "defaultCurrent" ]), isScrollbar = "scrollbar" === pager.type;
+        let comp, compSize = 0, contentSize = 0, startX = 0, startY = 0, pages = 1;
+        if (isHorizontal) {
+            if (compSize = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, comp = this._createPager(isScrollbar, isHorizontal, compStyle, compSize), 
+            this._pagerComponent = comp, this._innerView.add(comp), contentSize = maxWidth - comp.AABBBounds.width() - pagerSpace, 
+            contentSize <= 0) return this._innerView.removeChild(comp), !1;
             itemsContainer.getChildren().forEach(((item, index) => {
                 const {width: width, height: height} = item.attribute;
-                pageWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), 
+                contentSize < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), 
                 index > 0 && item.setAttributes({
                     x: startX,
                     y: startY
                 }), startX += spaceCol + width;
-            })), this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.pages = pages, 
-            pagerComp.setTotal(Math.ceil(pages / maxRow)), y = "start" === position ? renderStartY : "end" === position ? renderStartY + pageHeight - pagerComp.AABBBounds.height() / 2 : renderStartY + pageHeight / 2 - pagerComp.AABBBounds.height() / 2, 
-            pagerComp.setAttributes({
-                x: pageWidth,
-                y: y
-            });
+            })), this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.pages = pages;
+            const total = Math.ceil(pages / maxRow);
+            this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
         } else {
-            if (pagerComp = new pager_1.Pager(Object.assign({
-                layout: "horizontal",
-                total: 99,
-                disableTriggerEvent: disableTriggerEvent
-            }, pageStyle)), this._pager = pagerComp, this._innerView.add(pagerComp), pageWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, 
-            pageHeight = maxHeight - pagerComp.AABBBounds.height() - pagerSpace - renderStartY, 
-            pageHeight <= 0) return this._innerView.removeChild(pagerComp), !1;
-            let x;
+            if (compSize = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, comp = this._createPager(isScrollbar, isHorizontal, compStyle, compSize), 
+            this._pagerComponent = comp, this._innerView.add(comp), contentSize = maxHeight - comp.AABBBounds.height() - pagerSpace - renderStartY, 
+            contentSize <= 0) return this._innerView.removeChild(comp), !1;
             itemsContainer.getChildren().forEach(((item, index) => {
                 const {height: height} = item.attribute;
-                pageHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, 
+                contentSize < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, 
                 pages += 1), index > 0 && item.setAttributes({
                     x: startX,
                     y: startY
                 }), startY += spaceRow + height;
-            })), pagerComp.setTotal(Math.ceil(pages / maxCol)), x = "start" === position ? 0 : "end" === position ? pageWidth - pagerComp.AABBBounds.width() : (pageWidth - pagerComp.AABBBounds.width()) / 2, 
-            pagerComp.setAttributes({
-                x: x,
-                y: maxHeight - pagerComp.AABBBounds.height()
-            });
+            }));
+            const total = Math.ceil(pages / maxCol);
+            this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
         }
-        pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compSize + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compSize + spaceCol)));
         const clipGroup = vrender_core_1.graphicCreator.group({
             x: 0,
             y: renderStartY,
-            width: pageWidth,
-            height: pageHeight,
+            width: isHorizontal ? contentSize : compSize,
+            height: isHorizontal ? compSize : contentSize,
             clip: !0,
             pickable: !1
         });
-        clipGroup.add(itemsContainer), this._innerView.add(clipGroup);
-        const onPaging = e => {
-            const {current: current} = e.detail;
-            this._itemContext.currentPage = current, this._itemContext && this._itemContext.startIndex < this._itemContext.items.length && (this._renderItems(), 
-            pagerComp.setTotal(Math.ceil(this._itemContext.pages / this._itemContext.maxPages))), 
-            animation ? itemsContainer.animate().to(isHorizontal ? {
-                y: -(current - 1) * (pageHeight + spaceRow)
-            } : {
-                x: -(current - 1) * (pageWidth + spaceCol)
-            }, animationDuration, animationEasing) : isHorizontal ? itemsContainer.setAttribute("y", -(current - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(current - 1) * (pageWidth + spaceCol));
-        };
-        return this._pager.addEventListener("toPrev", onPaging), this._pager.addEventListener("toNext", onPaging), 
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isScrollbar, isHorizontal, compSize, isHorizontal ? spaceRow : spaceCol), 
         !0;
     }
     _hover(legendItem, e) {