@visactor/vrender-core 0.16.1-alpha.0 → 0.16.2-alpha.0

package/dist/index.js

@@ -4373,7 +4373,7 @@
             return;
         }
         ctx.globalAlpha = 1;
-        ctx.lineWidth = 1;
+        ctx.lineWidth = character && typeof character.lineHeight === 'number' ? character.lineHeight : 1;
         ctx.strokeStyle = strokeStyle;
         let fontSize = character.fontSize || 16;
         switch (character.script) {
@@ -6405,6 +6405,9 @@
             this.propagationImmediatelyStopped = true;
         }
         stopPropagation() {
+            if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
+                this.nativeEvent.stopPropagation();
+            }
             this.propagationStopped = true;
         }
         initEvent() {
@@ -8562,6 +8565,7 @@
                         }
                     });
                 }
+                step.propKeys = Object.keys(step.props);
                 lastStep = lastStep.prev;
             }
             const initProps = this.stepHead.props;
@@ -11896,10 +11900,13 @@
         }
         clearStates(hasAnimation) {
             if (this.hasState() && this.normalAttrs) {
+                this.currentStates = [];
                 this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, true);
             }
+            else {
+                this.currentStates = [];
+            }
             this.normalAttrs = null;
-            this.currentStates = [];
         }
         removeState(stateName, hasAnimation) {
             const index = this.currentStates ? this.currentStates.indexOf(stateName) : -1;
@@ -16638,7 +16645,6 @@
                     : this.paragraphs[0].character.textAlign) || 'left';
             this.direction = direction;
             this.directionKey = DIRECTION_KEY[this.direction];
-            const directionKey = this.directionKey;
             this.actualWidth = 0;
             let maxHeight = 0;
             this.paragraphs.forEach((word, index) => {
@@ -16654,6 +16660,11 @@
             });
             this.height = maxHeight;
             this.blankWidth = !isWidthMax ? this.width - this.actualWidth : 0;
+            this.calcOffset(width, isWidthMax);
+        }
+        calcOffset(width, isWidthMax) {
+            const directionKey = this.directionKey;
+            const maxHeight = this.height;
             let x = this.left;
             let spacing = 0;
             if (this.actualWidth < width && !isWidthMax) {
@@ -17086,18 +17097,35 @@
                     paragraphs.push(new Paragraph(textConfig[i].text, false, textConfig[i]));
                 }
             }
-            const frameHeight = typeof maxHeight === 'number' && (!height || height > maxHeight)
-                ? maxHeight
-                : height;
-            const frameWidth = typeof maxWidth === 'number' && (!width || width > maxWidth)
-                ? maxWidth
-                : width;
-            const frame = new Frame(0, 0, frameWidth || 0, frameHeight || 0, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection || 'horizontal', typeof maxWidth === 'number' && (!width || width > maxWidth), typeof maxHeight === 'number' && (!height || height > maxHeight), singleLine || false, (_a = this._frameCache) === null || _a === void 0 ? void 0 : _a.icons);
+            const maxWidthFinite = typeof maxWidth === 'number' && Number.isFinite(maxWidth) && maxWidth > 0;
+            const maxHeightFinite = typeof maxHeight === 'number' && Number.isFinite(maxHeight) && maxHeight > 0;
+            const richTextWidthEnable = typeof width === 'number' &&
+                Number.isFinite(width) &&
+                width > 0 &&
+                (!maxWidthFinite || width <= maxWidth);
+            const richTextHeightEnable = typeof height === 'number' &&
+                Number.isFinite(height) &&
+                height > 0 &&
+                (!maxHeightFinite || height <= maxHeight);
+            const frameWidth = richTextWidthEnable ? width : maxWidthFinite ? maxWidth : 0;
+            const frameHeight = richTextHeightEnable ? height : maxHeightFinite ? maxHeight : 0;
+            const frame = new Frame(0, 0, frameWidth || 0, frameHeight || 0, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection || 'horizontal', !richTextWidthEnable && maxWidthFinite, !richTextHeightEnable && maxHeightFinite, singleLine || false, (_a = this._frameCache) === null || _a === void 0 ? void 0 : _a.icons);
             const wrapper = new Wrapper(frame);
             for (let i = 0; i < paragraphs.length; i++) {
                 wrapper.deal(paragraphs[i]);
             }
             wrapper.send();
+            const directionEnable = frame.layoutDirection === 'horizontal' ? richTextWidthEnable : richTextHeightEnable;
+            if (!directionEnable) {
+                const frameSize = frame.getActualSizeWidthEllipsis();
+                let offsetSize = frame.layoutDirection === 'horizontal' ? frameSize.width : frameSize.height;
+                if (frame.layoutDirection === 'horizontal' ? maxWidthFinite : maxHeightFinite) {
+                    offsetSize = Math.min(offsetSize, frame.layoutDirection === 'horizontal' ? maxWidth : maxHeight);
+                }
+                frame.lines.forEach(function (l) {
+                    l.calcOffset(offsetSize, false);
+                });
+            }
             this._frameCache = frame;
         }
         clone() {
@@ -23092,7 +23120,10 @@
             }
             const { context } = drawContext;
             context.highPerformanceSave();
-            context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
+            graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
+            graphic.glyphHost &&
+                graphic.glyphHost.parent &&
+                context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, true);
             const b = graphic.AABBBounds;
             if (graphic.attribute._debug_bounds !== true) {
                 graphic.attribute._debug_bounds(context, graphic);
@@ -24297,22 +24328,37 @@
         injectable()
     ], DefaultCanvasRichTextRender);
 
-    let DefaultCanvasGlyphRender = class DefaultCanvasGlyphRender extends exports.BaseRender {
+    let DefaultCanvasGlyphRender = class DefaultCanvasGlyphRender {
         constructor() {
-            super(...arguments);
             this.numberType = GLYPH_NUMBER_TYPE;
         }
         drawShape(glyph, context, x, y, drawContext, params, fillCb, strokeCb) {
+            if (!drawContext.drawContribution) {
+                return;
+            }
+            glyph.getSubGraphic().forEach(item => {
+                const renderer = drawContext.drawContribution.getRenderContribution(item);
+                if (renderer && renderer.drawShape) {
+                    renderer.drawShape(item, context, x, y, drawContext, params, fillCb, strokeCb);
+                }
+            });
+        }
+        draw(glyph, renderService, drawContext, params) {
+            const { context } = drawContext;
+            if (!context) {
+                return;
+            }
+            context.highPerformanceSave();
+            if (!drawContext.drawContribution) {
+                return;
+            }
             const glyphTheme = getTheme(glyph);
             const subGraphic = glyph.getSubGraphic();
             subGraphic.length &&
                 subGraphic.forEach(g => {
                     drawContext.drawContribution.renderItem(g, drawContext, { theme: glyphTheme });
                 });
-        }
-        draw(glyph, renderService, drawContext, params) {
-            const glyphAttr = getTheme(glyph).glyph;
-            this._draw(glyph, glyphAttr, false, drawContext, params);
+            context.highPerformanceRestore();
         }
     };
     DefaultCanvasGlyphRender = __decorate([
@@ -25271,6 +25317,7 @@
         }
     }
 
+    const _tempBounds = new vutils.AABBBounds();
     class FlexLayoutPlugin {
         constructor() {
             this.name = 'FlexLayoutPlugin';
@@ -25526,13 +25573,30 @@
         }
         activate(context) {
             this.pluginService = context;
-            graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
+            application.graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
                 if (graphic.glyphHost) {
                     graphic = graphic.glyphHost;
                 }
                 this.tryLayout(graphic);
             });
-            graphicService.hooks.onSetStage.tap(this.key, graphic => {
+            application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
+                if (graphic.glyphHost) {
+                    graphic = graphic.glyphHost;
+                }
+                if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
+                    return;
+                }
+                _tempBounds.copy(bounds);
+            });
+            application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
+                if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
+                    return;
+                }
+                if (!_tempBounds.equals(bounds)) {
+                    this.tryLayout(graphic);
+                }
+            });
+            application.graphicService.hooks.onSetStage.tap(this.key, graphic => {
                 if (graphic.glyphHost) {
                     graphic = graphic.glyphHost;
                 }
@@ -25540,10 +25604,11 @@
             });
         }
         deactivate(context) {
-            graphicService.hooks.onAttributeUpdate.taps = graphicService.hooks.onAttributeUpdate.taps.filter(item => {
-                return item.name !== this.key;
-            });
-            graphicService.hooks.onSetStage.taps = graphicService.hooks.onSetStage.taps.filter(item => {
+            application.graphicService.hooks.onAttributeUpdate.taps =
+                application.graphicService.hooks.onAttributeUpdate.taps.filter(item => {
+                    return item.name !== this.key;
+                });
+            application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(item => {
                 return item.name !== this.key;
             });
         }