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

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 } from "@visactor/vutils";
+import { merge, isEmpty, normalizePadding, get, isValid, isNil, isFunction, isArray } from "@visactor/vutils";
 
 import { graphicCreator } from "@visactor/vrender-core";
 
@@ -20,6 +20,10 @@ import { DEFAULT_TITLE_SPACE, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DE
 
 import { loadDiscreteLegendComponent } from "../register";
 
+import { isRichText, richTextAttributeTransform } from "../../util";
+
+import { ScrollBar } from "../../scrollbar";
+
 const DEFAULT_STATES = {
     [LegendStateValue.focus]: {},
     [LegendStateValue.selected]: {},
@@ -140,10 +144,11 @@ export class DiscreteLegend extends 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() + get(this.attribute, "title.space", 8) : 0), 
         this._innerView.add(itemsContainer));
     }
@@ -156,7 +161,7 @@ export class DiscreteLegend extends 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 = normalizePadding(padding);
+        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 = normalizePadding(padding);
         let itemGroup;
         !1 === background.visible ? (itemGroup = graphicCreator.group({
             x: 0,
@@ -175,7 +180,8 @@ export class DiscreteLegend extends LegendBase {
         itemGroup.add(innerGroup);
         let focusShape, focusStartX = 0, shapeSize = 0, shapeSpace = 0;
         if (shapeAttr && !1 !== shapeAttr.visible) {
-            shapeSize = get(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE), shapeSpace = get(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
+            const s = get(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE);
+            shapeSize = isArray(s) ? s[0] || 0 : s, shapeSpace = get(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
             const itemShape = graphicCreator.symbol(Object.assign(Object.assign({
                 x: 0,
                 y: 0,
@@ -190,7 +196,7 @@ export class DiscreteLegend extends LegendBase {
             itemShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), 
             innerGroup.add(itemShape);
         }
-        let focusSpace = 0;
+        let labelShape, focusSpace = 0;
         if (focus) {
             const focusSize = get(focusIconStyle, "size", DEFAULT_SHAPE_SIZE);
             focusShape = graphicCreator.symbol(Object.assign(Object.assign({
@@ -204,30 +210,33 @@ export class DiscreteLegend extends LegendBase {
             })), this._appendDataToShape(focusShape, LEGEND_ELEMENT_NAME.focus, item, itemGroup), 
             focusSpace = focusSize;
         }
-        const labelShape = 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 = isRichText(labelAttributes) ? graphicCreator.richtext(richTextAttributeTransform(labelAttributes)) : graphicCreator.text(labelAttributes), 
         this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), 
         labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), 
         innerGroup.add(labelShape);
         const labelSpace = get(labelAttr, "space", DEFAULT_LABEL_SPACE);
         if (isValid(value)) {
-            const valueSpace = get(valueAttr, "space", focus ? DEFAULT_VALUE_SPACE : 0), valueShape = graphicCreator.text(Object.assign(Object.assign({
+            const valueSpace = get(valueAttr, "space", focus ? 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, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), 
+                text: valueText
+            });
+            let valueShape;
+            if (valueShape = isRichText(valueAttributes) ? graphicCreator.richtext(richTextAttributeTransform(valueAttributes)) : graphicCreator.text(valueAttributes), 
+            this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), 
             valueShape.addState(isSelected ? LegendStateValue.selected : 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,85 +251,150 @@ export class DiscreteLegend extends 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 = 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 = 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() + 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 = DEFAULT_ITEM_SPACE_COL, spaceRow: spaceRow = DEFAULT_ITEM_SPACE_ROW} = item, itemsContainer = this._itemsContainer, {animation: animation = !0, animationDuration: animationDuration = 450, animationEasing: animationEasing = "quadIn", space: pagerSpace = 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(Object.assign(Object.assign({
-                layout: 1 === maxRow ? "horizontal" : "vertical",
-                total: 99
-            }, merge({
-                handler: {
-                    preShape: "triangleUp",
-                    nextShape: "triangleDown"
+    _createPager(isScrollbar, isHorizontal, compStyle, compSize) {
+        var _a, _b;
+        const {disableTriggerEvent: disableTriggerEvent, maxRow: maxRow} = this.attribute;
+        return isScrollbar ? new ScrollBar(isHorizontal ? Object.assign(Object.assign({
+            direction: "vertical",
+            width: 12,
+            range: [ 0, .5 ]
+        }, compStyle), {
+            height: compSize,
+            disableTriggerEvent: disableTriggerEvent
+        }) : Object.assign(Object.assign({
+            direction: "horizontal",
+            disableTriggerEvent: disableTriggerEvent,
+            range: [ 0, .5 ],
+            height: 12
+        }, compStyle), {
+            width: compSize
+        })) : new Pager(isHorizontal ? Object.assign(Object.assign({
+            layout: 1 === maxRow ? "horizontal" : "vertical",
+            total: 99
+        }, merge({
+            handler: {
+                preShape: "triangleUp",
+                nextShape: "triangleDown"
+            }
+        }, compStyle)), {
+            defaultCurrent: null === (_a = this.attribute.pager) || void 0 === _a ? void 0 : _a.defaultCurrent,
+            disableTriggerEvent: disableTriggerEvent
+        }) : 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() + 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" ]), 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(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 = 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) {