@visactor/vrender-components 0.16.0 → 0.16.1

package/dist/index.js

@@ -4684,7 +4684,7 @@
   function applyStrokeStyle(ctx, character) {
     var strokeStyle = character && character.stroke || defaultFormatting.stroke;
     if (!strokeStyle) return void (ctx.globalAlpha = 0);
-    ctx.globalAlpha = 1, ctx.lineWidth = 1, ctx.strokeStyle = strokeStyle;
+    ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineHeight ? character.lineHeight : 1, ctx.strokeStyle = strokeStyle;
     var fontSize = character.fontSize || 16;
     switch (character.script) {
       case "super":
@@ -5887,7 +5887,7 @@
     }, {
       key: "stopPropagation",
       value: function stopPropagation() {
-        this.propagationStopped = !0;
+        this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.stopPropagation(), this.propagationStopped = !0;
       }
     }, {
       key: "initEvent",
@@ -6563,7 +6563,7 @@
           void 0 === step.props[k] && (step.props[k] = _this7.target.getDefaultAttribute(k));
         }); lastStep.prev;) lastStep.props && (lastStep.propKeys || (lastStep.propKeys = Object.keys(lastStep.props)), lastStep.propKeys.forEach(function (key) {
           void 0 === _props[key] && (_props[key] = lastStep.props[key]);
-        })), lastStep = lastStep.prev;
+        })), step.propKeys = Object.keys(step.props), lastStep = lastStep.prev;
         var initProps = this.stepHead.props;
         step.propKeys || (step.propKeys = Object.keys(_props)), step.propKeys.forEach(function (key) {
           if (void 0 === initProps[key]) {
@@ -7490,7 +7490,7 @@
     }, {
       key: "clearStates",
       value: function clearStates(hasAnimation) {
-        this.hasState() && this.normalAttrs && this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0), this.normalAttrs = null, this.currentStates = [];
+        this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
       }
     }, {
       key: "removeState",
@@ -11403,9 +11403,7 @@
       _classCallCheck(this, Line);
       this.left = left, this.width = width, this.baseline = baseline, this.ascent = ascent, this.descent = descent, this.top = baseline - ascent, this.paragraphs = lineBuffer.map(function (p) {
         return p;
-      }), this.textAlign = (this.paragraphs[0] instanceof RichTextIcon ? this.paragraphs[0].attribute.textAlign : this.paragraphs[0].character.textAlign) || "left", this.direction = direction, this.directionKey = DIRECTION_KEY[this.direction];
-      var directionKey = this.directionKey;
-      this.actualWidth = 0;
+      }), this.textAlign = (this.paragraphs[0] instanceof RichTextIcon ? this.paragraphs[0].attribute.textAlign : this.paragraphs[0].character.textAlign) || "left", this.direction = direction, this.directionKey = DIRECTION_KEY[this.direction], this.actualWidth = 0;
       var maxHeight = 0;
       this.paragraphs.forEach(function (word, index) {
         if (0 === index && word instanceof Paragraph) {
@@ -11413,24 +11411,30 @@
           0 !== (null == result ? void 0 : result.index) && (word.text = word.text.slice(null == result ? void 0 : result.index), word.updateWidth());
         }
         _this.actualWidth += word[_this.directionKey.width], maxHeight = Math.max(word[_this.directionKey.height], maxHeight);
-      }), this.height = maxHeight, this.blankWidth = isWidthMax ? 0 : this.width - this.actualWidth;
-      var x = this.left,
-        spacing = 0;
-      if (this.actualWidth < width && !isWidthMax) switch (this.textAlign) {
-        case "right":
-          x = width - this.actualWidth;
-          break;
-        case "center":
-          x = (width - this.actualWidth) / 2;
-          break;
-        case "justify":
-          this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1);
-      }
-      this.paragraphs.map(function (paragraph) {
-        paragraph instanceof RichTextIcon ? (paragraph["_" + directionKey.x] = x, x += paragraph[directionKey.width] + spacing, paragraph["_" + directionKey.y] = "top" === paragraph.attribute.textBaseline ? 0 : "bottom" === paragraph.attribute.textBaseline ? maxHeight - paragraph.height : (maxHeight - paragraph.height) / 2) : (paragraph[directionKey.left] = x, x += paragraph[directionKey.width] + spacing);
-      });
+      }), this.height = maxHeight, this.blankWidth = isWidthMax ? 0 : this.width - this.actualWidth, this.calcOffset(width, isWidthMax);
     }
     _createClass(Line, [{
+      key: "calcOffset",
+      value: function calcOffset(width, isWidthMax) {
+        var directionKey = this.directionKey,
+          maxHeight = this.height;
+        var x = this.left,
+          spacing = 0;
+        if (this.actualWidth < width && !isWidthMax) switch (this.textAlign) {
+          case "right":
+            x = width - this.actualWidth;
+            break;
+          case "center":
+            x = (width - this.actualWidth) / 2;
+            break;
+          case "justify":
+            this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1);
+        }
+        this.paragraphs.map(function (paragraph) {
+          paragraph instanceof RichTextIcon ? (paragraph["_" + directionKey.x] = x, x += paragraph[directionKey.width] + spacing, paragraph["_" + directionKey.y] = "top" === paragraph.attribute.textBaseline ? 0 : "bottom" === paragraph.attribute.textBaseline ? maxHeight - paragraph.height : (maxHeight - paragraph.height) / 2) : (paragraph[directionKey.left] = x, x += paragraph[directionKey.width] + spacing);
+        });
+      }
+    }, {
       key: "draw",
       value: function draw(ctx, lastLine, x, y, drawIcon) {
         var _this2 = this;
@@ -11710,10 +11714,22 @@
           var textParts = textConfig[i].text.split("\n");
           for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, textConfig[i]));
         } else paragraphs.push(new Paragraph(textConfig[i].text, !1, textConfig[i]));
-        var frame = new Frame(0, 0, ("number" == typeof maxWidth && (!width || width > maxWidth) ? maxWidth : width) || 0, ("number" == typeof maxHeight && (!height || height > maxHeight) ? maxHeight : height) || 0, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection || "horizontal", "number" == typeof maxWidth && (!width || width > maxWidth), "number" == typeof maxHeight && (!height || height > maxHeight), singleLine || !1, null === (_a = this._frameCache) || void 0 === _a ? void 0 : _a.icons),
+        var maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
+          maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
+          richTextWidthEnable = "number" == typeof width && Number.isFinite(width) && width > 0 && (!maxWidthFinite || width <= maxWidth),
+          richTextHeightEnable = "number" == typeof height && Number.isFinite(height) && height > 0 && (!maxHeightFinite || height <= maxHeight),
+          frame = new Frame(0, 0, (richTextWidthEnable ? width : maxWidthFinite ? maxWidth : 0) || 0, (richTextHeightEnable ? height : maxHeightFinite ? maxHeight : 0) || 0, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection || "horizontal", !richTextWidthEnable && maxWidthFinite, !richTextHeightEnable && maxHeightFinite, singleLine || !1, null === (_a = this._frameCache) || void 0 === _a ? void 0 : _a.icons),
           wrapper = new Wrapper(frame);
         for (var _i = 0; _i < paragraphs.length; _i++) wrapper.deal(paragraphs[_i]);
-        wrapper.send(), this._frameCache = frame;
+        wrapper.send();
+        if (!("horizontal" === frame.layoutDirection ? richTextWidthEnable : richTextHeightEnable)) {
+          var frameSize = frame.getActualSizeWidthEllipsis();
+          var offsetSize = "horizontal" === frame.layoutDirection ? frameSize.width : frameSize.height;
+          ("horizontal" === frame.layoutDirection ? maxWidthFinite : maxHeightFinite) && (offsetSize = Math.min(offsetSize, "horizontal" === frame.layoutDirection ? maxWidth : maxHeight)), frame.lines.forEach(function (l) {
+            l.calcOffset(offsetSize, !1);
+          });
+        }
+        this._frameCache = frame;
       }
     }, {
       key: "clone",
@@ -16788,7 +16804,7 @@
       value: function drawItem(graphic, renderService, drawContext, drawContribution, params) {
         if (!graphic.attribute._debug_bounds) return !1;
         var context = drawContext.context;
-        context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
+        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
         var b = graphic.AABBBounds;
         return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
       }
@@ -18021,35 +18037,36 @@
     if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-  var DefaultCanvasGlyphRender = /*#__PURE__*/function (_BaseRender) {
-    _inherits(DefaultCanvasGlyphRender, _BaseRender);
-    var _super = _createSuper(DefaultCanvasGlyphRender);
+  var DefaultCanvasGlyphRender = /*#__PURE__*/function () {
     function DefaultCanvasGlyphRender() {
-      var _this;
       _classCallCheck(this, DefaultCanvasGlyphRender);
-      _this = _super.apply(this, arguments), _this.numberType = GLYPH_NUMBER_TYPE;
-      return _this;
+      this.numberType = GLYPH_NUMBER_TYPE;
     }
     _createClass(DefaultCanvasGlyphRender, [{
       key: "drawShape",
       value: function drawShape(glyph, context, x, y, drawContext, params, fillCb, strokeCb) {
+        drawContext.drawContribution && glyph.getSubGraphic().forEach(function (item) {
+          var renderer = drawContext.drawContribution.getRenderContribution(item);
+          renderer && renderer.drawShape && renderer.drawShape(item, context, x, y, drawContext, params, fillCb, strokeCb);
+        });
+      }
+    }, {
+      key: "draw",
+      value: function draw(glyph, renderService, drawContext, params) {
+        var context = drawContext.context;
+        if (!context) return;
+        if (context.highPerformanceSave(), !drawContext.drawContribution) return;
         var glyphTheme = getTheme(glyph),
           subGraphic = glyph.getSubGraphic();
         subGraphic.length && subGraphic.forEach(function (g) {
           drawContext.drawContribution.renderItem(g, drawContext, {
             theme: glyphTheme
           });
-        });
-      }
-    }, {
-      key: "draw",
-      value: function draw(glyph, renderService, drawContext, params) {
-        var glyphAttr = getTheme(glyph).glyph;
-        this._draw(glyph, glyphAttr, !1, drawContext, params);
+        }), context.highPerformanceRestore();
       }
     }]);
     return DefaultCanvasGlyphRender;
-  }(BaseRender);
+  }();
   DefaultCanvasGlyphRender = __decorate$6([injectable()], DefaultCanvasGlyphRender);
 
   var __decorate$5 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -18591,11 +18608,11 @@
               const { direction } = this.attribute;
               this._prePos = direction === 'horizontal' ? e.clientX : e.clientY;
               if (vglobal.env === 'browser') {
-                  vglobal.addEventListener('pointermove', this._onSliderPointerMove);
+                  vglobal.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
                   vglobal.addEventListener('pointerup', this._onSliderPointerUp);
               }
               else {
-                  this._slider.addEventListener('pointermove', this._onSliderPointerMove);
+                  this._slider.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
                   this._slider.addEventListener('pointerup', this._onSliderPointerUp);
                   this._slider.addEventListener('pointerupoutside', this._onSliderPointerUp);
               }
@@ -20301,6 +20318,21 @@
                   this._lastSelect = target;
               }
           };
+          this._handleRelatedGraphicSetState = (e) => {
+              var _a, _b, _c;
+              if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.type) === AttributeUpdateType.STATE) {
+                  const currentStates = (_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.currentStates) !== null && _c !== void 0 ? _c : [];
+                  const label = this._graphicToText.get(e.target);
+                  if (label) {
+                      if (label.text) {
+                          label.text.useStates(currentStates);
+                      }
+                      if (label.labelLine) {
+                          label.labelLine.useStates(currentStates);
+                      }
+                  }
+              }
+          };
       }
       labeling(textBounds, graphicBounds, position, offset) {
           return;
@@ -20351,7 +20383,7 @@
               target.addEventListener('pointerdown', this._onClick);
           }
       }
-      _setStates(target) {
+      _setStatesOfText(target) {
           if (!target) {
               return;
           }
@@ -20361,10 +20393,20 @@
           }
           target.states = state;
       }
+      _setStatesOfLabelLine(target) {
+          if (!target) {
+              return;
+          }
+          const state = this.attribute.labelLineState;
+          if (!state || vutils.isEmpty(state)) {
+              return;
+          }
+          target.states = state;
+      }
       _createLabelText(attributes) {
           const text = createText(attributes);
           this._bindEvent(text);
-          this._setStates(text);
+          this._setStatesOfText(text);
           return text;
       }
       _prepare() {
@@ -20560,7 +20602,11 @@
                   if (relatedGraphic) {
                       const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                       this.add(text);
-                      labelLine && this.add(labelLine);
+                      if (labelLine) {
+                          this._setStatesOfLabelLine(labelLine);
+                          this.add(labelLine);
+                      }
+                      this._syncStateWithRelatedGraphic(relatedGraphic);
                       relatedGraphic.once('animate-bind', () => {
                           text.setAttributes(from);
                           const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
@@ -20620,6 +20666,7 @@
                   if (labelLine) {
                       this.add(labelLine);
                   }
+                  this._syncStateWithRelatedGraphic(relatedGraphic);
               }
               else if (state === 'update') {
                   const prevLabel = prevTextMap.get(relatedGraphic);
@@ -20639,6 +20686,11 @@
           });
           this._graphicToText = currentTextMap;
       }
+      _syncStateWithRelatedGraphic(relatedGraphic) {
+          if (this.attribute.syncState) {
+              relatedGraphic.on('afterAttributeUpdate', this._handleRelatedGraphicSetState);
+          }
+      }
       _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
           const listener = (event) => {
               var _a;
@@ -21168,8 +21220,9 @@
                   maxRadius = currentMarks.attribute.outerRadius;
               }
           });
-          currentMarks.forEach((currentMark, index) => {
+          data.forEach((d, index) => {
               var _a, _b;
+              const currentMark = this._idToGraphic.get(d.id);
               const graphicAttribute = currentMark.attribute;
               const center = { x: (_a = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.y) !== null && _b !== void 0 ? _b : 0 };
               if (!vutils.isNil(data[index]) && !vutils.isNil(textBoundsArray[index])) {
@@ -21395,17 +21448,6 @@
               labelPosition.x = cx + alignOffset + flag * (spaceWidth + targetCenterOffset);
           }
       }
-      _computeAlignOffset(align, labelWidth, alignFlag) {
-          switch (align) {
-              case 'left':
-                  return alignFlag < 0 ? -labelWidth : 0;
-              case 'right':
-                  return alignFlag < 0 ? 0 : labelWidth;
-              case 'center':
-              default:
-                  return (labelWidth / 2) * alignFlag;
-          }
-      }
       _computeAlign(arc, attribute) {
           var _a, _b, _c, _d, _e, _f;
           const labelConfig = attribute;
@@ -24274,10 +24316,14 @@
               this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
           }
           if (vglobal.env === 'browser') {
-              vglobal.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
+              vglobal.addEventListener('pointermove', this._onHandlerPointerMove.bind(this), {
+                  capture: true
+              });
               vglobal.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
           }
-          this.addEventListener('pointermove', this._onHandlerPointerMove);
+          this.addEventListener('pointermove', this._onHandlerPointerMove, {
+              capture: true
+          });
           this.addEventListener('pointerup', this._onHandlerPointerUp);
           this.addEventListener('pointerupoutside', this._onHandlerPointerUp);
           if (showDetail === 'auto') {
@@ -26448,11 +26494,13 @@
               this._currentHandler = e.target;
               this._prePos = this._isHorizontal ? e.clientX : e.clientY;
               if (vglobal.env === 'browser') {
-                  vglobal.addEventListener('pointermove', this._onHandlerPointerMove);
+                  vglobal.addEventListener('pointermove', this._onHandlerPointerMove, {
+                      capture: true
+                  });
                   vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
               }
               else {
-                  this._currentHandler.addEventListener('pointermove', this._onHandlerPointerMove);
+                  this._currentHandler.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
                   this._currentHandler.addEventListener('pointerup', this._onHandlerPointerUp);
                   this._currentHandler.addEventListener('pointerupoutside', this._onHandlerPointerUp);
               }
@@ -26496,12 +26544,14 @@
               e.preventDefault();
               this._currentHandler = null;
               if (vglobal.env === 'browser') {
-                  vglobal.removeEventListener('pointermove', this._onHandlerPointerMove);
+                  vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, {
+                      capture: true
+                  });
                   vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
               }
               else {
                   const currentTarget = e.target;
-                  currentTarget.removeEventListener('pointermove', this._onHandlerPointerMove);
+                  currentTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
                   currentTarget.removeEventListener('pointerup', this._onHandlerPointerUp);
                   currentTarget.removeEventListener('pointerupoutside', this._onHandlerPointerUp);
               }
@@ -26510,11 +26560,15 @@
               e.stopPropagation();
               this._prePos = this._isHorizontal ? e.clientX : e.clientY;
               if (vglobal.env === 'browser') {
-                  vglobal.addEventListener('pointermove', this._onTrackPointerMove);
+                  vglobal.addEventListener('pointermove', this._onTrackPointerMove, {
+                      capture: true
+                  });
                   vglobal.addEventListener('pointerup', this._onTrackPointerUp);
               }
               else {
-                  this._track.addEventListener('pointermove', this._onTrackPointerMove);
+                  this._track.addEventListener('pointermove', this._onTrackPointerMove, {
+                      capture: true
+                  });
                   this._track.addEventListener('pointerup', this._onTrackPointerUp);
                   this._track.addEventListener('pointerupoutside', this._onTrackPointerUp);
               }
@@ -29189,7 +29243,7 @@
       return new Tag(params ? params.attribute : {});
   }
 
-  const version = "0.16.0";
+  const version = "0.16.1";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;