@visactor/vrender-components 0.16.1 → 0.16.2

package/dist/index.js

@@ -15268,16 +15268,17 @@
       key: "createCommonPattern",
       value: function createCommonPattern(size, padding, color, targetContext, cb) {
         var r = (size - 2 * padding) / 2,
+          dpr = targetContext.dpr,
           canvas = canvasAllocate.allocate({
             width: size,
             height: size,
-            dpr: 1
+            dpr: dpr
           }),
           ctx = canvas.getContext("2d");
         if (!ctx) return null;
-        ctx.clearRect(0, 0, size, size), cb(r, ctx);
+        ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, size, size), cb(r, ctx);
         var pattern = targetContext.createPattern(canvas.nativeCanvas, "repeat");
-        return canvasAllocate.free(canvas), pattern;
+        return pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), canvasAllocate.free(canvas), pattern;
       }
     }, {
       key: "createCirclePattern",
@@ -18501,7 +18502,8 @@
       'clip',
       'pickable',
       'childrenPickable',
-      'zIndex'
+      'zIndex',
+      'cursor'
   ];
   class AbstractComponent extends Group {
       constructor(attributes, mode = '2d') {
@@ -18641,11 +18643,11 @@
           this._onSliderPointerUp = (e) => {
               e.preventDefault();
               if (vglobal.env === 'browser') {
-                  vglobal.removeEventListener('pointermove', this._onSliderPointerMove);
+                  vglobal.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
                   vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
               }
               else {
-                  this._slider.removeEventListener('pointermove', this._onSliderPointerMove);
+                  this._slider.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
                   this._slider.removeEventListener('pointerup', this._onSliderPointerUp);
                   this._slider.removeEventListener('pointerupoutside', this._onSliderPointerUp);
               }
@@ -18679,6 +18681,9 @@
           return this.attribute.range;
       }
       bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (this._rail) {
               this._rail.addEventListener('pointerdown', this._onRailPointerDown);
           }
@@ -20371,6 +20376,9 @@
           this._renderLabels(labels);
       }
       _bindEvent(target) {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (!target) {
               return;
           }
@@ -21986,7 +21994,7 @@
               });
           }
           else {
-              const line = createLine(Object.assign(Object.assign({ points: this._clipPoints(this.attribute.points) }, vutils.array(lineStyle)[0]), { fill: false }));
+              const line = createPolygon(Object.assign(Object.assign({ points: this._clipPoints(this.attribute.points) }, vutils.array(lineStyle)[0]), { fill: false, closePath: false }));
               line.name = `${this.name}-line`;
               line.id = this._getNodeId('line');
               if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
@@ -22305,6 +22313,9 @@
           this._bindEvent();
       }
       _bindEvent() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           const { hover, select } = this.attribute;
           if (hover) {
               this._innerView.addEventListener('pointermove', this._onHover);
@@ -24289,6 +24300,9 @@
           vutils.isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
       }
       bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           const { showDetail, brushSelect } = this.attribute;
           if (this._startHandler) {
               this._startHandler.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'start'));
@@ -25137,6 +25151,12 @@
   }
 
   class MarkLine extends Marker {
+      getLine() {
+          return this._line;
+      }
+      getLabel() {
+          return this._label;
+      }
       constructor(attributes) {
           super(vutils.merge({}, MarkLine.defaultAttributes, attributes));
       }
@@ -25217,6 +25237,12 @@
   MarkLine.defaultAttributes = DEFAULT_MARK_LINE_THEME;
 
   class MarkArea extends Marker {
+      getArea() {
+          return this._area;
+      }
+      getLabel() {
+          return this._label;
+      }
       constructor(attributes) {
           super(vutils.merge({}, MarkArea.defaultAttributes, attributes));
       }
@@ -25633,6 +25659,9 @@
           this._bindEvents();
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (this.preHandler) {
               this.preHandler.addEventListener('pointerenter', this._onHover);
               this.preHandler.addEventListener('pointerleave', this._onUnHover);
@@ -26010,6 +26039,9 @@
           }
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (!this._itemsContainer) {
               return;
           }
@@ -26143,7 +26175,7 @@
       }
       _renderPager(isHorizontal) {
           const renderStartY = this._title ? this._title.AABBBounds.height() + vutils.get(this.attribute, 'title.space', 8) : 0;
-          const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
+          const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {}, disableTriggerEvent } = this.attribute;
           const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
           const itemsContainer = this._itemsContainer;
           const { animation = true, animationDuration = 450, animationEasing = 'quadIn', space: pagerSpace = DEFAULT_PAGER_SPACE } = pager, pageStyle = __rest(pager, ["animation", "animationDuration", "animationEasing", "space"]);
@@ -26154,12 +26186,12 @@
           let startY = 0;
           let pages = 1;
           if (isHorizontal) {
-              pagerComp = new Pager(Object.assign({ layout: maxRow === 1 ? 'horizontal' : 'vertical', total: 99 }, vutils.merge({
+              pagerComp = new Pager(Object.assign(Object.assign({ layout: maxRow === 1 ? 'horizontal' : 'vertical', total: 99 }, vutils.merge({
                   handler: {
                       preShape: 'triangleUp',
                       nextShape: 'triangleDown'
                   }
-              }, pageStyle)));
+              }, pageStyle)), { disableTriggerEvent }));
               this._pager = pagerComp;
               this._innerView.add(pagerComp);
               pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow;
@@ -26190,7 +26222,7 @@
               });
           }
           else {
-              pagerComp = new Pager(Object.assign({ layout: 'horizontal', total: 99 }, pageStyle));
+              pagerComp = new Pager(Object.assign({ layout: 'horizontal', total: 99, disableTriggerEvent }, pageStyle));
               this._pager = pagerComp;
               this._innerView.add(pagerComp);
               pageWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol;
@@ -26621,11 +26653,15 @@
           this._onTrackPointerUp = (e) => {
               e.preventDefault();
               if (vglobal.env === 'browser') {
-                  vglobal.removeEventListener('pointermove', this._onTrackPointerMove);
+                  vglobal.removeEventListener('pointermove', this._onTrackPointerMove, {
+                      capture: true
+                  });
                   vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
               }
               else {
-                  this._track.removeEventListener('pointermove', this._onTrackPointerMove);
+                  this._track.removeEventListener('pointermove', this._onTrackPointerMove, {
+                      capture: true
+                  });
                   this._track.removeEventListener('pointerup', this._onTrackPointerUp);
                   this._track.removeEventListener('pointerupoutside', this._onTrackPointerUp);
               }
@@ -26896,6 +26932,9 @@
           return textShape;
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           const { slidable, range } = this.attribute;
           if (slidable) {
               if (this._startHandler) {
@@ -27105,7 +27144,7 @@
           this._updateColor();
       }
       _renderContent() {
-          const { colors, slidable, layout, align, min, max, value, railWidth, railHeight, showHandler = true, handlerSize, handlerStyle, railStyle, trackStyle, startText, endText, handlerText, showTooltip, tooltip } = this.attribute;
+          const { colors, slidable, layout, align, min, max, value, railWidth, railHeight, showHandler = true, handlerSize, handlerStyle, railStyle, trackStyle, startText, endText, handlerText, showTooltip, tooltip, disableTriggerEvent } = this.attribute;
           const domain = [];
           const step = (max - min) / (colors.length - 1);
           for (let i = 0; i < colors.length; i++) {
@@ -27136,7 +27175,8 @@
               endText,
               handlerText,
               showTooltip,
-              tooltip
+              tooltip,
+              disableTriggerEvent
           });
           this._innerView.add(slider);
           this._slider = slider;
@@ -27145,6 +27185,9 @@
           this._updateColor();
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (this._slider) {
               this._slider.addEventListener('change', this._onSliderChange);
           }
@@ -27295,7 +27338,7 @@
           this._slider.setValue(value);
       }
       _renderContent() {
-          const { slidable, layout, align, min, max, value, railWidth, railHeight, showHandler = true, handlerSize, handlerStyle, railStyle, trackStyle, startText, endText, handlerText, showTooltip, tooltip, sizeBackground } = this.attribute;
+          const { slidable, layout, align, min, max, value, railWidth, railHeight, showHandler = true, handlerSize, handlerStyle, railStyle, trackStyle, startText, endText, handlerText, showTooltip, tooltip, sizeBackground, disableTriggerEvent } = this.attribute;
           const mainContainer = createGroup({
               x: 0,
               y: 0
@@ -27325,7 +27368,8 @@
               endText,
               handlerText,
               showTooltip,
-              tooltip
+              tooltip,
+              disableTriggerEvent
           });
           mainContainer.add(slider);
           let start = 0;
@@ -27359,6 +27403,9 @@
           this._slider = slider;
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (this._slider) {
               this._slider.addEventListener('change', this._onSliderChange);
           }
@@ -27874,6 +27921,9 @@
               }
           };
           this._initEvents = () => {
+              if (this.attribute.disableTriggerEvent) {
+                  return;
+              }
               this._playController.addEventListener('pointerdown', (e) => {
                   e.stopPropagation();
                   if (this._isPaused === true) {
@@ -28071,7 +28121,8 @@
                   range: false,
                   handlerText: { visible: false },
                   startText: { visible: false },
-                  endText: { visible: false }
+                  endText: { visible: false },
+                  disableTriggerEvent: this.attribute.disableTriggerEvent
               };
               if (isHorizontal(this._orient)) {
                   const railWidth = Math.max(0, this._layoutInfo.slider.size);
@@ -28105,7 +28156,8 @@
                   start: this._start,
                   pause: this._pause,
                   forward: this._forward,
-                  backward: this._backward
+                  backward: this._backward,
+                  disableTriggerEvent: this.attribute.disableTriggerEvent
               };
               if (isHorizontal(this._orient)) {
                   attrs.layout = 'horizontal';
@@ -28258,6 +28310,9 @@
               this._slider.setAttribute('value', this._dataIndex);
           };
           this._initEvents = () => {
+              if (this.attribute.disableTriggerEvent) {
+                  return;
+              }
               this._controller.addEventListener(ControllerEventEnum.OnPlay, (e) => {
                   e.stopPropagation();
                   this.play();
@@ -28406,6 +28461,9 @@
               }
           };
           this._initEvents = () => {
+              if (this.attribute.disableTriggerEvent) {
+                  return;
+              }
               this._controller.addEventListener(ControllerEventEnum.OnPlay, (e) => {
                   e.stopPropagation();
                   this.play();
@@ -28633,6 +28691,9 @@
           };
       }
       bindBrushEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           const { delayType = 'throttle', delayTime = 0, trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this.attribute;
           this.stage.addEventListener(trigger, this._onBrushStart);
           this.stage.addEventListener(updateTrigger, delayMap[delayType](this._onBrushing, delayTime));
@@ -29243,13 +29304,157 @@
       return new Tag(params ? params.attribute : {});
   }
 
-  const version = "0.16.1";
+  const svg = '<svg width="200" height="200" viewBox="0 0 1024 1024" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z"></path></svg>';
+  class CheckBox extends AbstractComponent {
+      constructor(attributes) {
+          super(vutils.merge({}, CheckBox.defaultAttributes, attributes));
+          this.renderGroup();
+          this.onBeforeAttributeUpdate = (val, attributes, key) => {
+              if ('interactive' in val) {
+                  this.setAttribute('pickable', val.interactive);
+              }
+              if ('disabled' in val) {
+                  this.setAttribute('cursor', val.disable ? this.attribute.disableCursor : this.attribute.cursor);
+              }
+              return undefined;
+          };
+          this.addEventListener('click', this.handleClick);
+      }
+      render() {
+          this.removeAllChild();
+          this.renderBox();
+          this.renderIcon();
+          this.renderText();
+          this.layout();
+      }
+      renderBox() {
+          this._box = new Rect(vutils.merge({}, this.attribute.box));
+          if (this.attribute.checked && this.attribute.disabled) {
+              this._box.setAttributes({
+                  fill: this.attribute.box.disableCheckedFill,
+                  stroke: this.attribute.box.disableCheckedStroke
+              });
+          }
+          else if (this.attribute.checked) {
+              this._box.setAttributes({
+                  fill: this.attribute.box.checkedFill,
+                  stroke: this.attribute.box.checkedStroke
+              });
+          }
+          this.appendChild(this._box);
+      }
+      renderIcon() {
+          this._icon = new Image(vutils.merge({}, this.attribute.icon));
+          if (!this.attribute.checked) {
+              this._icon.setAttribute('visible', false);
+          }
+          this.appendChild(this._icon);
+      }
+      renderText() {
+          this._text = new WrapText(vutils.merge({}, this.attribute.text));
+          if (this.attribute.disabled) {
+              this._text.setAttribute('fill', this.attribute.text.disableFill);
+          }
+          this.appendChild(this._text);
+      }
+      renderGroup() {
+          if (!this.attribute.interactive) {
+              this.setAttribute('pickable', false);
+          }
+          if (this.attribute.disabled) {
+              this.setAttribute('cursor', this.attribute.disableCursor);
+          }
+      }
+      layout() {
+          const boxHeight = this.attribute.box.height;
+          const iconHeight = this.attribute.icon.height;
+          const textHeight = this._text.AABBBounds.height();
+          const maxHeight = Math.max(boxHeight, iconHeight, textHeight);
+          const boxY = maxHeight / 2 - boxHeight / 2;
+          const iconY = maxHeight / 2 - iconHeight / 2;
+          const textY = maxHeight / 2 - textHeight / 2;
+          const boxWidth = this.attribute.box.width;
+          const iconWidth = this.attribute.icon.width;
+          const maxWidth = Math.max(boxWidth, iconWidth);
+          const boxX = maxWidth / 2 - boxWidth / 2;
+          const iconX = maxWidth / 2 - iconWidth / 2;
+          const textX = maxWidth + this.attribute.spaceBetweenTextAndIcon;
+          this._box.setAttributes({
+              x: boxX,
+              y: boxY
+          });
+          this._icon.setAttributes({
+              x: iconX,
+              y: iconY
+          });
+          this._text.setAttributes({
+              x: textX,
+              y: textY
+          });
+      }
+      handleClick() {
+          var _a;
+          if (this.attribute.disabled) {
+              return;
+          }
+          else if (this.attribute.checked) {
+              this.setAttribute('checked', false);
+          }
+          else {
+              this.setAttribute('checked', true);
+          }
+          const changeEvent = new CustomEvent('checkbox_state_change', {
+              eventType: 'checkbox_state_change',
+              checked: this.attribute.checked
+          });
+          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
+          this.dispatchEvent(changeEvent);
+      }
+  }
+  CheckBox.defaultAttributes = {
+      interactive: true,
+      disabled: false,
+      checked: false,
+      cursor: 'pointer',
+      disableCursor: 'not-allowed',
+      spaceBetweenTextAndIcon: 8,
+      text: {
+          text: 'text',
+          fontSize: 14,
+          fill: '#000',
+          disableFill: 'rgb(201,205,212)',
+          textBaseline: 'top',
+          pickable: false
+      },
+      icon: {
+          image: svg,
+          width: 10,
+          height: 10,
+          pickable: false
+      },
+      box: {
+          width: 14,
+          height: 14,
+          cornerRadius: 2,
+          fill: '#fff',
+          stroke: 'rgb(229,230,235)',
+          disableFill: 'rgb(242,243,245)',
+          checkedFill: 'rgb(22, 93, 255)',
+          checkedStroke: 'rgb(22, 93, 255)',
+          disableCheckedFill: 'rgb(148, 191, 255)',
+          disableCheckedStroke: 'rgb(148, 191, 255)',
+          pickable: false
+      }
+  };
+
+  const version = "0.16.2";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;
   exports.ArcLabel = ArcLabel;
   exports.BasePlayer = BasePlayer;
   exports.Brush = Brush;
+  exports.CheckBox = CheckBox;
   exports.CircleAxis = CircleAxis;
   exports.CircleAxisGrid = CircleAxisGrid;
   exports.CircleCrosshair = CircleCrosshair;