@visactor/vrender-core 0.22.0-vstory.9 → 0.22.1

package/dist/index.es.js

@@ -607,15 +607,17 @@ class Container {
                 serviceIdentifier: injectIdentifier,
                 constructorArgsMetadata
             };
-            const bindings = this._bindingDictionary.get(injectIdentifier).filter(b => {
+            const bindings = (this._bindingDictionary.get(injectIdentifier) || []).filter(b => {
                 return b.constraint(target);
             });
-            const request = {
-                injectIdentifier,
-                metadata: constructorArgsMetadata,
-                bindings
-            };
-            arr.push(request);
+            if (bindings.length) {
+                const request = {
+                    injectIdentifier,
+                    metadata: constructorArgsMetadata,
+                    bindings: bindings
+                };
+                arr.push(request);
+            }
         }
         return arr;
     }
@@ -855,6 +857,12 @@ let DefaultGlobal = class DefaultGlobal {
     get env() {
         return this._env;
     }
+    get isImageAnonymous() {
+        return this._isImageAnonymous;
+    }
+    set isImageAnonymous(isImageAnonymous) {
+        this._isImageAnonymous = isImageAnonymous;
+    }
     get devicePixelRatio() {
         if (!this._env) {
             this.setEnv(defaultEnv);
@@ -923,6 +931,7 @@ let DefaultGlobal = class DefaultGlobal {
     }
     constructor(contributions) {
         this.contributions = contributions;
+        this._isImageAnonymous = true;
         this.id = Generator.GenAutoIncrementId();
         this.hooks = {
             onSetEnv: new SyncHook(['lastEnv', 'env', 'global'])
@@ -2355,7 +2364,12 @@ let Step$1 = class Step {
                 }
                 else {
                     const x1 = this._x * (1 - this._t) + x * this._t;
-                    this.context.lineTo(x1, this._y, this._lastDefined !== false && p.defined !== false, this.lastPoint);
+                    if (this._t === 0.5) {
+                        this.context.lineTo(x1, this._y, this._lastDefined !== false, this.lastPoint);
+                    }
+                    else {
+                        this.context.lineTo(x1, this._y, this._lastDefined !== false && p.defined !== false, this.lastPoint);
+                    }
                     this.context.lineTo(x1, y, this._lastDefined !== false && p.defined !== false, p);
                 }
                 break;
@@ -2949,24 +2963,40 @@ class CustomPath2D extends CurvePath {
                 case 's':
                     tempX = x + current[3];
                     tempY = y + current[4];
-                    controlX = 2 * x - controlX;
-                    controlY = 2 * y - controlY;
-                    this.bezierCurveTo(controlX + l, controlY + t, x + current[1] + l, y + current[2] + t, tempX + l, tempY + t);
-                    controlX = x + current[1];
-                    controlY = y + current[2];
+                    if (previous[0].match(/[CcSs]/) === null) {
+                        controlX = x;
+                        controlY = y;
+                    }
+                    else {
+                        controlX = 2 * x - controlX;
+                        controlY = 2 * y - controlY;
+                    }
+                    tempControlX = x + current[1];
+                    tempControlY = y + current[2];
+                    this.bezierCurveTo(controlX + l, controlY + t, tempControlX + l, tempControlY + t, tempX + l, tempY + t);
+                    controlX = tempControlX;
+                    controlY = tempControlY;
                     x = tempX;
                     y = tempY;
                     break;
                 case 'S':
                     tempX = current[3];
                     tempY = current[4];
-                    controlX = 2 * x - controlX;
-                    controlY = 2 * y - controlY;
-                    this.bezierCurveTo(controlX + l, controlY + t, current[1] + l, current[2] + t, tempX + l, tempY + t);
+                    if (previous[0].match(/[CcSs]/) === null) {
+                        controlX = x;
+                        controlY = y;
+                    }
+                    else {
+                        controlX = 2 * x - controlX;
+                        controlY = 2 * y - controlY;
+                    }
+                    tempControlX = current[1];
+                    tempControlY = current[2];
+                    this.bezierCurveTo(controlX + l, controlY + t, tempControlX + l, tempControlY + t, tempX + l, tempY + t);
+                    controlX = tempControlX;
+                    controlY = tempControlY;
                     x = tempX;
                     y = tempY;
-                    controlX = current[1];
-                    controlY = current[2];
                     break;
                 case 'q':
                     tempX = x + current[3];
@@ -3274,7 +3304,7 @@ const DefaultTextStyle = {
 const DefaultPickStyle = {
     pickStrokeBuffer: 0
 };
-const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({ forceBoundsWidth: undefined, forceBoundsHeight: undefined, opacity: 1, background: null, autoAnimateTexture: false, textureRatio: 0, textureOptions: null, backgroundOpacity: 1, backgroundCornerRadius: 0, texture: null, textureColor: 'black', textureSize: 10, texturePadding: 2, backgroundMode: 'no-repeat', backgroundFit: true, backgroundClip: true, backgroundScale: 1, backgroundOffsetX: 0, backgroundOffsetY: 0, blur: 0, filter: '', cursor: null, html: null, react: null }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
+const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({ forceBoundsWidth: undefined, forceBoundsHeight: undefined, opacity: 1, background: null, autoAnimateTexture: false, textureRatio: 1, textureOptions: null, backgroundOpacity: 1, backgroundCornerRadius: 0, texture: null, textureColor: 'black', textureSize: 10, texturePadding: 2, backgroundMode: 'no-repeat', backgroundFit: true, backgroundKeepAspectRatio: false, backgroundClip: true, backgroundScale: 1, backgroundOffsetX: 0, backgroundOffsetY: 0, blur: 0, filter: '', cursor: null, html: null, react: null }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
 const DefaultConnectAttribute = {
     connectedType: 'none',
     connectedStyle: {},
@@ -3307,7 +3337,7 @@ const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute),
 const DefaultRect3dAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, x1: 0, y1: 0, cornerRadius: 0, length: 0, cornerType: 'round' });
 const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), { symbolType: 'circle', size: 10, keepDirIn3d: true, clipRange: 1 });
 const DefaultTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), { strokeBoundsBuffer: 0, keepDirIn3d: true });
-const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), { editable: false, editOptions: null, width: 300, height: 300, ellipsis: true, wordBreak: 'break-word', verticalDirection: 'top', textAlign: 'left', textBaseline: 'top', layoutDirection: 'horizontal', textConfig: [], disableAutoWrapLine: false, maxHeight: undefined, maxWidth: undefined, singleLine: false });
+const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), { upgradeAttrs: null, editable: false, editOptions: null, ascentDescentMode: 'actual', width: 300, height: 300, ellipsis: true, wordBreak: 'break-word', verticalDirection: 'top', textAlign: 'left', textBaseline: 'top', layoutDirection: 'horizontal', textConfig: [], disableAutoWrapLine: false, maxHeight: undefined, maxWidth: undefined, singleLine: false });
 const DefaultImageAttribute = Object.assign(Object.assign({ repeatX: 'no-repeat', repeatY: 'no-repeat', image: '', width: 0, height: 0 }, DefaultAttribute), { fill: true, cornerRadius: 0, cornerType: 'round' });
 const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImageAttribute), { backgroundShowMode: 'never', backgroundWidth: 0, backgroundHeight: 0, textAlign: 'left', textBaseline: 'middle', direction: 'horizontal', margin: 0, id: '', width: 20, height: 20, backgroundFill: 'rgba(101, 117, 168, 0.1)', backgroundFillOpacity: 1, backgroundStroke: false, backgroundStrokeOpacity: 1, backgroundRadius: 4, opacity: 1 });
 
@@ -3922,7 +3952,7 @@ function testLetter2(string, index) {
     }
     return i + 1;
 }
-function measureTextCanvas(text, character) {
+function measureTextCanvas(text, character, mode = 'actual') {
     const textMeasure = application.graphicUtil.textMeasure;
     const measurement = textMeasure.measureText(text, character);
     const result = {
@@ -3931,16 +3961,18 @@ function measureTextCanvas(text, character) {
         descent: 0,
         width: 0
     };
-    if (typeof measurement.fontBoundingBoxAscent !== 'number' || typeof measurement.fontBoundingBoxDescent !== 'number') {
-        result.width = measurement.width;
+    const ascent = mode === 'actual' ? measurement.actualBoundingBoxAscent : measurement.fontBoundingBoxAscent;
+    const descent = mode === 'actual' ? measurement.actualBoundingBoxDescent : measurement.fontBoundingBoxDescent;
+    if (typeof ascent !== 'number' || typeof descent !== 'number') {
+        result.width = Math.floor(measurement.width);
         result.height = character.fontSize || 0;
         result.ascent = result.height;
         result.descent = 0;
     }
     else {
-        result.width = measurement.width;
-        result.height = Math.floor(measurement.fontBoundingBoxAscent + measurement.fontBoundingBoxDescent);
-        result.ascent = Math.floor(measurement.fontBoundingBoxAscent);
+        result.width = Math.floor(measurement.width);
+        result.height = Math.floor(ascent + descent);
+        result.ascent = Math.floor(ascent);
         result.descent = result.height - result.ascent;
     }
     return result;
@@ -3967,6 +3999,9 @@ let ATextMeasure = class ATextMeasure {
             metrics.actualBoundingBoxDescent == null ||
             metrics.fontBoundingBoxAscent == null ||
             metrics.fontBoundingBoxDescent == null) {
+            metrics = {
+                width: metrics.width
+            };
             const { ascent, descent } = this.measureTextBoundADscentEstimate(options);
             metrics.actualBoundingBoxAscent = ascent;
             metrics.actualBoundingBoxDescent = descent;
@@ -3974,6 +4009,13 @@ let ATextMeasure = class ATextMeasure {
             metrics.fontBoundingBoxDescent = descent;
         }
         if (metrics.actualBoundingBoxLeft == null || metrics.actualBoundingBoxRight == null) {
+            metrics = {
+                width: metrics.width,
+                actualBoundingBoxAscent: metrics.actualBoundingBoxAscent,
+                actualBoundingBoxDescent: metrics.actualBoundingBoxDescent,
+                fontBoundingBoxAscent: metrics.fontBoundingBoxAscent,
+                fontBoundingBoxDescent: metrics.fontBoundingBoxDescent
+            };
             const { left, right } = this.measureTextBoundLeftRightEstimate(options);
             metrics.actualBoundingBoxLeft = left;
             metrics.actualBoundingBoxRight = right;
@@ -8287,7 +8329,7 @@ class CbAnimate extends ACustomAnimate {
 class Animate {
     constructor(id = Generator.GenAutoIncrementId(), timeline = defaultTimeline, slience) {
         this.id = id;
-        this.timeline = timeline;
+        this.timeline = timeline || defaultTimeline;
         this.status = AnimateStatus.INITIAL;
         this.tailAnimate = new SubAnimate(this);
         this.subAnimates = [this.tailAnimate];
@@ -9173,11 +9215,12 @@ class IncreaseCount extends ACustomAnimate {
         return;
     }
     onUpdate(end, ratio, out) {
+        var _a;
         if (this.valid === false) {
             return;
         }
         if (end) {
-            out.text = this.toNumber;
+            out.text = (_a = this.to) === null || _a === void 0 ? void 0 : _a.text;
         }
         else {
             out.text = (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(this.decimalLength);
@@ -11729,10 +11772,10 @@ class ResourceLoader {
     static GetFile(url, type) {
         let data = ResourceLoader.cache.get(url);
         if (data) {
-            if (data.loadState === 'init' || data.loadState === 'fail') {
+            if (data.loadState === 'fail') {
                 return Promise.reject();
             }
-            else if (data.loadState === 'loading') {
+            else if (data.loadState === 'init' || data.loadState === 'loading') {
                 return data.dataPromise.then(data => data.data);
             }
             return Promise.resolve(data.data);
@@ -12385,6 +12428,7 @@ class Graphic extends Node {
         }
         this.animates.set(animate.id, animate);
         animate.onRemove(() => {
+            animate.stop();
             this.animates.delete(animate.id);
         });
         return animate;
@@ -12506,10 +12550,12 @@ class Graphic extends Node {
         this.normalAttrs = null;
     }
     removeState(stateName, hasAnimation) {
-        const index = this.currentStates ? this.currentStates.indexOf(stateName) : -1;
-        if (index >= 0) {
-            const currentStates = this.currentStates.filter(state => state !== stateName);
-            this.useStates(currentStates, hasAnimation);
+        if (this.currentStates) {
+            const filter = isArray(stateName) ? (s) => !stateName.includes(s) : (s) => s !== stateName;
+            const newStates = this.currentStates.filter(filter);
+            if (newStates.length !== this.currentStates.length) {
+                this.useStates(newStates, hasAnimation);
+            }
         }
     }
     toggleState(stateName, hasAnimation) {
@@ -12685,7 +12731,9 @@ class Graphic extends Node {
             if (this.animates && this.animates.size) {
                 const timeline = stage.getTimeline();
                 this.animates.forEach(a => {
-                    a.setTimeline(timeline);
+                    if (a.timeline === defaultTimeline) {
+                        a.setTimeline(timeline);
+                    }
                 });
             }
             this._onSetStage && this._onSetStage(this, stage, layer);
@@ -12859,6 +12907,7 @@ class Graphic extends Node {
     detachShadow() {
         if (this.shadowRoot) {
             this.addUpdateBoundTag();
+            this.shadowRoot.release(true);
             this.shadowRoot = null;
         }
     }
@@ -12966,6 +13015,7 @@ class Graphic extends Node {
     }
     release() {
         this.releaseStatus = 'released';
+        this.stopAnimates();
         application.graphicService.onRelease(this);
     }
     _emitCustomEvent(type, context) {
@@ -13780,6 +13830,14 @@ class Group extends Graphic {
     getNoWorkAnimateAttr() {
         return Group.NOWORK_ANIMATE_ATTR;
     }
+    release(all) {
+        if (all) {
+            this.forEachChildren((g) => {
+                g.release(all);
+            });
+        }
+        super.release();
+    }
 }
 Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
 function createGroup(attributes) {
@@ -17018,6 +17076,20 @@ let Symbol$1 = class Symbol extends Graphic {
         }
         return this._parsedPath;
     }
+    getParsedPath2D(x = 0, y = 0, size = 1) {
+        let path = null;
+        try {
+            path = new Path2D();
+        }
+        catch (err) {
+            return null;
+        }
+        const parsedPath = this.getParsedPath();
+        if (!parsedPath) {
+            return null;
+        }
+        parsedPath.draw(path, size, x, y);
+    }
     isValid() {
         return super.isValid() && this._isValid();
     }
@@ -17198,7 +17270,7 @@ let Line$1 = class Line extends Graphic {
         const { points = lineTheme.points, connectedType } = attribute;
         const b = aabbBounds;
         points.forEach(p => {
-            if (p.defined !== false || connectedType === 'zero' || connectedType === 'connect') {
+            if (p.defined !== false || connectedType === 'connect') {
                 b.add(p.x, p.y);
             }
         });
@@ -17209,7 +17281,7 @@ let Line$1 = class Line extends Graphic {
         const b = aabbBounds;
         segments.forEach(s => {
             s.points.forEach(p => {
-                if (p.defined !== false || connectedType === 'zero' || connectedType === 'connect') {
+                if (p.defined !== false || connectedType === 'connect') {
                     b.add(p.x, p.y);
                 }
             });
@@ -17844,17 +17916,22 @@ function getFixedLRTB(left, right, top, bottom) {
     const topInt = Math.round(top);
     const rightInt = Math.round(right);
     const bottomInt = Math.round(bottom);
+    const _left = left > leftInt ? leftInt : leftInt - 0.5;
+    const _top = top > topInt ? topInt : topInt - 0.5;
+    const _right = rightInt > right ? rightInt : rightInt + 0.5;
+    const _bottom = bottomInt > bottom ? bottomInt : bottomInt + 0.5;
     return {
-        left: leftInt,
-        top: topInt,
-        right: rightInt,
-        bottom: bottomInt
+        left: _left,
+        top: _top,
+        right: _right,
+        bottom: _bottom
     };
 }
 class Paragraph {
-    constructor(text, newLine, character) {
+    constructor(text, newLine, character, ascentDescentMode) {
         this.fontSize = character.fontSize || 16;
         this.textBaseline = character.textBaseline || 'alphabetic';
+        this.ascentDescentMode = ascentDescentMode;
         const lineHeight = calculateLineHeight(character.lineHeight, this.fontSize);
         if (typeof lineHeight === 'number') {
             this.lineHeight = lineHeight > this.fontSize ? lineHeight : this.fontSize;
@@ -17863,7 +17940,7 @@ class Paragraph {
             this.lineHeight = Math.floor(1.2 * this.fontSize);
         }
         this.height = this.lineHeight;
-        const { ascent, height, descent, width } = measureTextCanvas(text, character);
+        const { ascent, height, descent, width } = measureTextCanvas(text, character, this.ascentDescentMode);
         let halfDetaHeight = 0;
         let deltaAscent = 0;
         let deltaDescent = 0;
@@ -17909,7 +17986,7 @@ class Paragraph {
         this.ellipsisStr = '...';
     }
     updateWidth() {
-        const { width } = measureTextCanvas(this.text, this.character);
+        const { width } = measureTextCanvas(this.text, this.character, this.ascentDescentMode);
         this.width = width;
         if (this.direction === 'vertical') {
             this.widthOrigin = this.width;
@@ -17918,7 +17995,10 @@ class Paragraph {
         }
     }
     drawBackground(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
-        if (!(this.character.background && (!this.character.backgroundOpacity || this.character.backgroundOpacity > 0))) {
+        if (!(this.text !== '' &&
+            this.text !== '\n' &&
+            this.character.background &&
+            (!this.character.backgroundOpacity || this.character.backgroundOpacity > 0))) {
             return;
         }
         let baseline = top + ascent;
@@ -17945,7 +18025,7 @@ class Paragraph {
             text = text.slice(0, index);
             text += this.ellipsisStr;
             if (textAlign === 'right' || textAlign === 'end') {
-                const { width } = measureTextCanvas(this.text.slice(index), this.character);
+                const { width } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
                 if (direction === 'vertical') ;
                 else {
                     left -= this.ellipsisWidth - width;
@@ -17982,7 +18062,7 @@ class Paragraph {
             text = text.slice(0, index);
             text += this.ellipsisStr;
             if (textAlign === 'right' || textAlign === 'end') {
-                const { width } = measureTextCanvas(this.text.slice(index), this.character);
+                const { width } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
                 if (direction === 'vertical') ;
                 else {
                     left -= this.ellipsisWidth - width;
@@ -18019,14 +18099,14 @@ class Paragraph {
                     const right = left + (this.widthOrigin || this.width);
                     const bottom = top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
                     const lrtb = getFixedLRTB(left, right, top, bottom);
-                    ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+                    ctx.fillRect(lrtb.left, 1 + baseline, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
                 }
                 if (this.character.lineThrough) {
                     const top = 1 + baseline - this.ascent / 2;
                     const right = left + (this.widthOrigin || this.width);
                     const bottom = top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
                     const lrtb = getFixedLRTB(left, right, top, bottom);
-                    ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+                    ctx.fillRect(lrtb.left, 1 + baseline - this.ascent / 2, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
                 }
             }
             else if (this.character.textDecoration === 'underline') {
@@ -18034,14 +18114,14 @@ class Paragraph {
                 const right = left + (this.widthOrigin || this.width);
                 const bottom = top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
                 const lrtb = getFixedLRTB(left, right, top, bottom);
-                ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+                ctx.fillRect(lrtb.left, 1 + baseline, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
             }
             else if (this.character.textDecoration === 'line-through') {
                 const top = 1 + baseline - this.ascent / 2;
                 const right = left + (this.widthOrigin || this.width);
                 const bottom = top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
                 const lrtb = getFixedLRTB(left, right, top, bottom);
-                ctx.fillRect(lrtb.left, lrtb.top, lrtb.right - lrtb.left, lrtb.bottom - lrtb.top);
+                ctx.fillRect(lrtb.left, 1 + baseline - this.ascent / 2, lrtb.right - lrtb.left, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1);
             }
         }
         if (direction === 'vertical') {
@@ -18061,7 +18141,7 @@ class Paragraph {
             const index = getStrByWithCanvas(text, width - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
             text = text.slice(0, index);
             text += this.ellipsisStr;
-            const { width: measureWidth } = measureTextCanvas(this.text.slice(index), this.character);
+            const { width: measureWidth } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
             return width + this.ellipsisWidth - measureWidth;
         }
         return width;
@@ -18070,8 +18150,8 @@ class Paragraph {
 function seperateParagraph(paragraph, index) {
     const text1 = paragraph.text.slice(0, index);
     const text2 = paragraph.text.slice(index);
-    const p1 = new Paragraph(text1, paragraph.newLine, paragraph.character);
-    const p2 = new Paragraph(text2, true, paragraph.character);
+    const p1 = new Paragraph(text1, paragraph.newLine, paragraph.character, paragraph.ascentDescentMode);
+    const p2 = new Paragraph(text2, true, paragraph.character, paragraph.ascentDescentMode);
     return [p1, p2];
 }
 
@@ -18361,7 +18441,7 @@ class Line {
                     }
                     const ellipsis = drawEllipsis === true ? '...' : drawEllipsis || '';
                     paragraph.ellipsisStr = ellipsis;
-                    const { width } = measureTextCanvas(ellipsis, paragraph.character);
+                    const { width } = measureTextCanvas(ellipsis, paragraph.character, paragraph.ascentDescentMode);
                     const ellipsisWidth = width || 0;
                     if (ellipsisWidth <= this.blankWidth + otherParagraphWidth) {
                         lastLine && (paragraph.ellipsis = 'add');
@@ -18437,7 +18517,7 @@ class Line {
             if (paragraph instanceof RichTextIcon) {
                 break;
             }
-            const { width } = measureTextCanvas(ellipsis, paragraph.character);
+            const { width } = measureTextCanvas(ellipsis, paragraph.character, paragraph.ascentDescentMode);
             const ellipsisWidth = width || 0;
             if (ellipsisWidth <= this.blankWidth + otherParagraphWidth) {
                 paragraph.ellipsis = 'add';
@@ -18598,6 +18678,13 @@ class Wrapper {
     }
 }
 
+let supportIntl = false;
+try {
+    supportIntl = Intl && typeof Intl.Segmenter === 'function';
+}
+catch (e) {
+    supportIntl = false;
+}
 const RICHTEXT_UPDATE_TAG_KEY = [
     'width',
     'height',
@@ -18757,15 +18844,14 @@ class RichText extends Graphic {
         return tc.every(item => item.isComposing ||
             !(item.text && isString(item.text) && RichText.splitText(item.text).length > 1));
     }
-    static splitEmoji(text) {
-        return [...new Intl.Segmenter().segment(text)].map(x => x.segment);
-    }
     static splitText(text) {
-        try {
-            const arr = this.splitEmoji(text);
-            return arr;
-        }
-        catch (e) {
+        if (supportIntl) {
+            const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+            const segments = [];
+            for (const { segment } of segmenter.segment(text)) {
+                segments.push(segment);
+            }
+            return segments;
         }
         return Array.from(text);
     }
@@ -18786,8 +18872,8 @@ class RichText extends Graphic {
         return tc;
     }
     updateAABBBounds(attribute, richtextTheme, aabbBounds) {
-        var _a, _b;
-        const { width = richtextTheme.width, height = richtextTheme.height, maxWidth = richtextTheme.maxWidth, maxHeight = richtextTheme.maxHeight, textAlign = richtextTheme.textAlign, textBaseline = richtextTheme.textBaseline, editOptions } = attribute;
+        var _a, _b, _c, _d;
+        const { width = richtextTheme.width, height = richtextTheme.height, maxWidth = richtextTheme.maxWidth, maxHeight = richtextTheme.maxHeight, textAlign = richtextTheme.textAlign, verticalDirection = (_b = (_a = attribute.textBaseline) !== null && _a !== void 0 ? _a : richtextTheme.textBaseline) !== null && _b !== void 0 ? _b : richtextTheme.verticalDirection, editOptions } = attribute;
         if (width > 0 && height > 0) {
             aabbBounds.set(0, 0, width, height);
         }
@@ -18800,12 +18886,12 @@ class RichText extends Graphic {
             contentWidth = typeof maxWidth === 'number' && contentWidth > maxWidth ? maxWidth : contentWidth || 0;
             aabbBounds.set(0, 0, contentWidth, contentHeight);
         }
-        if (editOptions && editOptions.keepHeightWhileEmpty && !aabbBounds.height() && !((_a = attribute.textConfig) === null || _a === void 0 ? void 0 : _a.length)) {
-            aabbBounds.y2 = aabbBounds.y1 + ((_b = attribute.fontSize) !== null && _b !== void 0 ? _b : 12);
+        if (editOptions && editOptions.keepHeightWhileEmpty && !aabbBounds.height() && !((_c = attribute.textConfig) === null || _c === void 0 ? void 0 : _c.length)) {
+            aabbBounds.y2 = aabbBounds.y1 + ((_d = attribute.fontSize) !== null && _d !== void 0 ? _d : 12);
             aabbBounds.x2 = aabbBounds.x1 + 2;
         }
         let deltaY = 0;
-        switch (textBaseline) {
+        switch (verticalDirection) {
             case 'top':
                 deltaY = 0;
                 break;
@@ -18834,6 +18920,9 @@ class RichText extends Graphic {
             application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds);
         }
         application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, false, this);
+        if (aabbBounds.width() === 0 && aabbBounds.height() === 0) {
+            aabbBounds.clear();
+        }
         return aabbBounds;
     }
     needUpdateTags(keys) {
@@ -18869,8 +18958,8 @@ class RichText extends Graphic {
         return false;
     }
     combinedStyleToCharacter(config) {
-        const { fill, stroke, fontSize, fontFamily, fontStyle, fontWeight, lineWidth, opacity, fillOpacity, strokeOpacity } = this.attribute;
-        return Object.assign({ fill,
+        const { fill, stroke, fontSize, fontFamily, fontStyle, fontWeight, lineWidth, opacity, fillOpacity, lineHeight, strokeOpacity, upgradeAttrs } = this.attribute;
+        const out = Object.assign({ fill,
             stroke,
             fontSize,
             fontFamily,
@@ -18880,10 +18969,15 @@ class RichText extends Graphic {
             opacity,
             fillOpacity,
             strokeOpacity }, config);
+        if (upgradeAttrs === null || upgradeAttrs === void 0 ? void 0 : upgradeAttrs.lineHeight) {
+            out.lineHeight = lineHeight;
+        }
+        return out;
     }
     doUpdateFrameCache(tc) {
         var _a;
-        const { maxWidth, maxHeight, width, height, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection, singleLine, disableAutoWrapLine, editable } = this.attribute;
+        const { maxWidth, maxHeight, width, height, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection, singleLine, disableAutoWrapLine, editable, ascentDescentMode, upgradeAttrs } = this.attribute;
+        const enableMultiBreakLine = upgradeAttrs && upgradeAttrs.multiBreakLine;
         let { textConfig: _tc = [] } = this.attribute;
         if (editable && _tc.length > 0 && !RichText.AllSingleCharacter(_tc)) {
             _tc = RichText.TransformTextConfig2SingleCharacter(_tc);
@@ -18918,11 +19012,20 @@ class RichText extends Graphic {
                 if (richTextConfig.text && richTextConfig.text.includes('\n')) {
                     const textParts = richTextConfig.text.split('\n');
                     for (let j = 0; j < textParts.length; j++) {
-                        paragraphs.push(new Paragraph(textParts[j], j !== 0, richTextConfig));
+                        if (j === 0) {
+                            paragraphs.push(new Paragraph(textParts[j], false, richTextConfig, ascentDescentMode));
+                        }
+                        else if (textParts[j] || i === textConfig.length - 1) {
+                            paragraphs.push(new Paragraph(textParts[j], true, richTextConfig, ascentDescentMode));
+                        }
+                        else {
+                            const nextRichTextConfig = this.combinedStyleToCharacter(textConfig[i + 1]);
+                            paragraphs.push(new Paragraph(textParts[j], true, nextRichTextConfig, ascentDescentMode));
+                        }
                     }
                 }
                 else if (richTextConfig.text) {
-                    paragraphs.push(new Paragraph(richTextConfig.text, false, richTextConfig));
+                    paragraphs.push(new Paragraph(richTextConfig.text, false, richTextConfig, ascentDescentMode));
                 }
             }
         }
@@ -18940,7 +19043,7 @@ class RichText extends Graphic {
         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);
-        wrapper.newLine = editable;
+        wrapper.newLine = enableMultiBreakLine;
         if (disableAutoWrapLine) {
             let lineCount = 0;
             let skip = false;
@@ -18988,7 +19091,7 @@ class RichText extends Graphic {
                 l.calcOffset(offsetSize, false);
             });
         }
-        if (editable) {
+        if (enableMultiBreakLine) {
             frame.lines.forEach(item => {
                 const lastParagraphs = item.paragraphs;
                 item.paragraphs = item.paragraphs.filter(p => p.text !== '');
@@ -20094,7 +20197,7 @@ class DefaultBaseBackgroundRenderContribution {
     }
     drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
         var _a;
-        const { background, backgroundOpacity = (_a = graphic.attribute.fillOpacity) !== null && _a !== void 0 ? _a : graphicAttribute.backgroundOpacity, opacity = graphicAttribute.opacity, backgroundMode = graphicAttribute.backgroundMode, backgroundFit = graphicAttribute.backgroundFit, backgroundScale = graphicAttribute.backgroundScale, backgroundOffsetX = graphicAttribute.backgroundOffsetX, backgroundOffsetY = graphicAttribute.backgroundOffsetY, backgroundClip = graphicAttribute.backgroundClip } = graphic.attribute;
+        const { background, backgroundOpacity = (_a = graphic.attribute.fillOpacity) !== null && _a !== void 0 ? _a : graphicAttribute.backgroundOpacity, opacity = graphicAttribute.opacity, backgroundMode = graphicAttribute.backgroundMode, backgroundFit = graphicAttribute.backgroundFit, backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio, backgroundScale = graphicAttribute.backgroundScale, backgroundOffsetX = graphicAttribute.backgroundOffsetX, backgroundOffsetY = graphicAttribute.backgroundOffsetY, backgroundClip = graphicAttribute.backgroundClip } = graphic.attribute;
         if (!background) {
             return;
         }
@@ -20117,6 +20220,7 @@ class DefaultBaseBackgroundRenderContribution {
             this.doDrawImage(context, res.data, b, {
                 backgroundMode,
                 backgroundFit,
+                backgroundKeepAspectRatio,
                 backgroundScale,
                 backgroundOffsetX,
                 backgroundOffsetY
@@ -20136,14 +20240,20 @@ class DefaultBaseBackgroundRenderContribution {
         }
     }
     doDrawImage(context, data, b, params) {
-        const { backgroundMode, backgroundFit, backgroundScale = 1, backgroundOffsetX = 0, backgroundOffsetY = 0 } = params;
+        const { backgroundMode, backgroundFit, backgroundKeepAspectRatio, backgroundScale = 1, backgroundOffsetX = 0, backgroundOffsetY = 0 } = params;
         const targetW = b.width();
         const targetH = b.height();
         let w = targetW;
         let h = targetH;
         if (backgroundMode === 'no-repeat') {
             if (backgroundFit) {
-                context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+                if (!backgroundKeepAspectRatio) {
+                    context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+                }
+                else {
+                    const maxScale = Math.max(targetW / data.width, targetH / data.height);
+                    context.drawImage(data, b.x1 + backgroundOffsetX, b.y1 + backgroundOffsetY, data.width * maxScale * backgroundScale, data.height * maxScale * backgroundScale);
+                }
             }
             else {
                 const resW = data.width * backgroundScale;
@@ -20247,6 +20357,7 @@ class DefaultBaseTextureRenderContribution {
         this.time = BaseRenderContributionTime.afterFillStroke;
         this.useStyle = true;
         this.order = 10;
+        this._tempSymbolGraphic = null;
     }
     createCommonPattern(size, padding, color, targetContext, cb) {
         const r = (size - padding * 2) / 2;
@@ -20393,7 +20504,45 @@ class DefaultBaseTextureRenderContribution {
                     break;
             }
         }
-        if (pattern) {
+        if (textureOptions && textureOptions.dynamicTexture) {
+            context.save();
+            context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
+            context.clip();
+            const { gridConfig = {} } = textureOptions;
+            const b = graphic.AABBBounds;
+            const width = b.width();
+            const height = b.height();
+            const padding = texturePadding;
+            const cellSize = textureSize;
+            const gridColumns = gridConfig.columns ? gridConfig.columns : Math.ceil(width / cellSize);
+            const gridRows = gridConfig.rows ? gridConfig.rows : Math.ceil(height / cellSize);
+            const gutterColumn = gridConfig.gutterColumn ? gridConfig.gutterColumn : padding * 2;
+            const gutterRow = gridConfig.gutterRow ? gridConfig.gutterRow : padding * 2;
+            if (!this._tempSymbolGraphic) {
+                this._tempSymbolGraphic = createSymbol({});
+            }
+            const sizeW = gridConfig.columns ? width / gridConfig.columns : cellSize;
+            const sizeH = gridConfig.rows ? height / gridConfig.rows : cellSize;
+            this._tempSymbolGraphic.setAttributes({
+                size: [sizeW - gutterColumn, sizeH - gutterRow],
+                symbolType: texture
+            });
+            const parsedPath = this._tempSymbolGraphic.getParsedPath();
+            for (let i = 0; i < gridRows; i++) {
+                for (let j = 0; j < gridColumns; j++) {
+                    const _x = x + cellSize / 2 + j * cellSize;
+                    const _y = y + cellSize / 2 + i * cellSize;
+                    context.beginPath();
+                    if (parsedPath.draw(context, Math.min(sizeW - gutterColumn, sizeH - gutterRow), _x, _y, 0) === false) {
+                        context.closePath();
+                    }
+                    context.fillStyle = textureColor;
+                    textureOptions.dynamicTexture(context, i, j, gridRows, gridColumns, textureRatio, graphic);
+                }
+            }
+            context.restore();
+        }
+        else if (pattern) {
             context.highPerformanceSave();
             context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
             context.fillStyle = pattern;
@@ -20512,7 +20661,7 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
         this.time = BaseRenderContributionTime.beforeFillStroke;
     }
     drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-        const { background, backgroundMode = graphicAttribute.backgroundMode, backgroundFit = graphicAttribute.backgroundFit, backgroundScale = graphicAttribute.backgroundScale, backgroundOffsetX = graphicAttribute.backgroundOffsetX, backgroundOffsetY = graphicAttribute.backgroundOffsetY } = graphic.attribute;
+        const { background, backgroundMode = graphicAttribute.backgroundMode, backgroundFit = graphicAttribute.backgroundFit, backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio, backgroundScale = graphicAttribute.backgroundScale, backgroundOffsetX = graphicAttribute.backgroundOffsetX, backgroundOffsetY = graphicAttribute.backgroundOffsetY } = graphic.attribute;
         if (!background) {
             return;
         }
@@ -20527,6 +20676,7 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
             this.doDrawImage(context, res.data, b, {
                 backgroundMode,
                 backgroundFit,
+                backgroundKeepAspectRatio,
                 backgroundScale,
                 backgroundOffsetX,
                 backgroundOffsetY
@@ -20825,8 +20975,8 @@ class DefaultImageRenderContribution extends DefaultRectRenderContribution {
         this.useStyle = true;
         this.order = 0;
     }
-    drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-        return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+        return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
     }
 }
 const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -21424,7 +21574,7 @@ let DefaultCanvasLineRender = class DefaultCanvasLineRender extends BaseRender {
         this._draw(line, lineAttribute, false, drawContext, params);
     }
     drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb) {
-        var _a, _b, _c, _d, _e;
+        var _a;
         if (!cache) {
             return;
         }
@@ -21463,60 +21613,6 @@ let DefaultCanvasLineRender = class DefaultCanvasLineRender extends BaseRender {
                 context.stroke();
             }
         }
-        let { connectedType, connectedX, connectedY, connectedStyle } = attribute;
-        if (isArray(defaultAttribute)) {
-            connectedType = (_b = connectedType !== null && connectedType !== void 0 ? connectedType : defaultAttribute[0].connectedType) !== null && _b !== void 0 ? _b : defaultAttribute[1].connectedType;
-            connectedX = (_c = connectedX !== null && connectedX !== void 0 ? connectedX : defaultAttribute[0].connectedX) !== null && _c !== void 0 ? _c : defaultAttribute[1].connectedX;
-            connectedY = (_d = connectedY !== null && connectedY !== void 0 ? connectedY : defaultAttribute[0].connectedY) !== null && _d !== void 0 ? _d : defaultAttribute[1].connectedY;
-            connectedStyle = (_e = connectedStyle !== null && connectedStyle !== void 0 ? connectedStyle : defaultAttribute[0].connectedStyle) !== null && _e !== void 0 ? _e : defaultAttribute[1].connectedStyle;
-        }
-        else {
-            connectedType = connectedType !== null && connectedType !== void 0 ? connectedType : defaultAttribute.connectedType;
-            connectedX = connectedX !== null && connectedX !== void 0 ? connectedX : defaultAttribute.connectedX;
-            connectedY = connectedY !== null && connectedY !== void 0 ? connectedY : defaultAttribute.connectedY;
-            connectedStyle = connectedStyle !== null && connectedStyle !== void 0 ? connectedStyle : defaultAttribute.connectedStyle;
-        }
-        if (connectedType !== 'connect' && connectedType !== 'zero') {
-            connectedType = 'none';
-        }
-        if (connectedType !== 'none') {
-            context.beginPath();
-            drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
-                offsetX,
-                offsetY,
-                offsetZ: z,
-                drawConnect: true,
-                mode: connectedType,
-                zeroX: connectedX,
-                zeroY: connectedY
-            });
-            const da = [];
-            if (isArray(defaultAttribute)) {
-                defaultAttribute.forEach(i => da.push(i));
-            }
-            else {
-                da.push(defaultAttribute);
-            }
-            da.push(attribute);
-            if (fill !== false) {
-                if (fillCb) {
-                    fillCb(context, attribute, defaultAttribute);
-                }
-                else if (fillOpacity) {
-                    context.setCommonStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da);
-                    context.fill();
-                }
-            }
-            if (stroke !== false) {
-                if (strokeCb) {
-                    strokeCb(context, attribute, defaultAttribute);
-                }
-                else if (strokeOpacity) {
-                    context.setStrokeStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da);
-                    context.stroke();
-                }
-            }
-        }
         return !!ret;
     }
     drawLinearLineHighPerformance(line, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, lineAttribute, drawContext, params, fillCb, strokeCb) {
@@ -21553,7 +21649,7 @@ let DefaultCanvasLineRender = class DefaultCanvasLineRender extends BaseRender {
     }
     drawShape(line, context, x, y, drawContext, params, fillCb, strokeCb) {
         const lineAttribute = getTheme(line, params === null || params === void 0 ? void 0 : params.theme).line;
-        const { fill = lineAttribute.fill, stroke = lineAttribute.stroke, fillOpacity = lineAttribute.fillOpacity, strokeOpacity = lineAttribute.strokeOpacity, segments, points, closePath, curveTension = lineAttribute.curveTension } = line.attribute;
+        const { fill = lineAttribute.fill, stroke = lineAttribute.stroke, fillOpacity = lineAttribute.fillOpacity, strokeOpacity = lineAttribute.strokeOpacity, segments, points, closePath, curveTension = lineAttribute.curveTension, connectedType = lineAttribute.connectedType } = line.attribute;
         const data = this.valid(line, lineAttribute, fillCb, strokeCb);
         if (!data) {
             return;
@@ -21566,6 +21662,12 @@ let DefaultCanvasLineRender = class DefaultCanvasLineRender extends BaseRender {
         if (clipRange === 1 && !segments && !points.some(p => p.defined === false) && curveType === 'linear') {
             return this.drawLinearLineHighPerformance(line, context, !!fill, !!stroke, fillOpacity, strokeOpacity, x, y, lineAttribute, drawContext, params, fillCb, strokeCb);
         }
+        function parsePoint(points, connectedType) {
+            if (connectedType === 'none') {
+                return points;
+            }
+            return points.filter(p => p.defined !== false);
+        }
         if (line.shouldUpdateShape()) {
             const { points, segments } = line.attribute;
             const _points = points;
@@ -21597,7 +21699,7 @@ let DefaultCanvasLineRender = class DefaultCanvasLineRender extends BaseRender {
                         startPoint.y = lastSeg.endY;
                         startPoint.defined = lastSeg.curves[lastSeg.curves.length - 1].defined;
                     }
-                    const data = calcLineCache(seg.points, curveType, {
+                    const data = calcLineCache(parsePoint(seg.points, connectedType), curveType, {
                         startPoint,
                         curveTension
                     });
@@ -21623,7 +21725,7 @@ let DefaultCanvasLineRender = class DefaultCanvasLineRender extends BaseRender {
                 }
             }
             else if (points && points.length) {
-                line.cache = calcLineCache(_points, curveType, { curveTension });
+                line.cache = calcLineCache(parsePoint(_points, connectedType), curveType, { curveTension });
             }
             else {
                 line.cache = null;
@@ -21675,10 +21777,6 @@ DefaultCanvasLineRender = __decorate([
 
 function drawAreaSegments(path, segPath, percent, params) {
     var _a;
-    const { drawConnect = false, mode = 'none' } = params || {};
-    if (drawConnect && mode === 'none') {
-        return;
-    }
     const { top, bottom } = segPath;
     if (top.curves.length !== bottom.curves.length) {
         return;
@@ -21687,90 +21785,28 @@ function drawAreaSegments(path, segPath, percent, params) {
         const topList = [];
         const bottomList = [];
         let lastDefined = true;
-        if (drawConnect) {
-            let defined0 = true;
-            let lastCurve;
-            let lastBottomCurve;
-            const n = top.curves.length;
-            top.curves.forEach((curve, i) => {
-                const bototmCurve = bottom.curves[n - i - 1];
-                let currentTopCurve = curve;
-                let currentBottomCurve = bototmCurve;
-                if (curve.originP1 === curve.originP2) {
-                    lastCurve = curve;
-                    lastBottomCurve = bototmCurve;
-                    return;
-                }
-                if (lastCurve && lastCurve.originP1 === lastCurve.originP2) {
-                    currentTopCurve = lastCurve;
-                    currentBottomCurve = lastBottomCurve;
-                }
-                if (curve.defined) {
-                    if (!defined0) {
-                        topList.push(currentTopCurve);
-                        bottomList.push(currentBottomCurve);
-                        drawAreaConnectBlock(path, topList, bottomList, params);
-                        topList.length = 0;
-                        bottomList.length = 0;
-                        defined0 = !defined0;
-                    }
+        for (let i = 0, n = top.curves.length; i < n; i++) {
+            const topCurve = top.curves[i];
+            if (lastDefined !== topCurve.defined) {
+                if (lastDefined) {
+                    drawAreaBlock(path, topList, bottomList, params);
+                    topList.length = 0;
+                    bottomList.length = 0;
                 }
                 else {
-                    const { originP1, originP2 } = curve;
-                    let validTopCurve;
-                    let validBottomCurve;
-                    if (originP1 && originP1.defined !== false) {
-                        validTopCurve = currentTopCurve;
-                        validBottomCurve = currentBottomCurve;
-                    }
-                    else if (originP1 && originP2.defined !== false) {
-                        validTopCurve = curve;
-                        validBottomCurve = bototmCurve;
-                    }
-                    if (defined0) {
-                        defined0 = !defined0;
-                        topList.push(validTopCurve || curve);
-                        bottomList.push(validBottomCurve || bototmCurve);
-                    }
-                    else {
-                        if (validTopCurve) {
-                            defined0 = !defined0;
-                            topList.push(validTopCurve || curve);
-                            bottomList.push(validBottomCurve || bototmCurve);
-                            drawAreaConnectBlock(path, topList, bottomList, params);
-                            topList.length = 0;
-                            bottomList.length = 0;
-                        }
-                    }
+                    topList.push(topCurve);
+                    bottomList.push(bottom.curves[n - i - 1]);
                 }
-                lastCurve = curve;
-            });
-            drawAreaConnectBlock(path, topList, bottomList, params);
-        }
-        else {
-            for (let i = 0, n = top.curves.length; i < n; i++) {
-                const topCurve = top.curves[i];
-                if (lastDefined !== topCurve.defined) {
-                    if (lastDefined) {
-                        drawAreaBlock(path, topList, bottomList, params);
-                        topList.length = 0;
-                        bottomList.length = 0;
-                    }
-                    else {
-                        topList.push(topCurve);
-                        bottomList.push(bottom.curves[n - i - 1]);
-                    }
-                    lastDefined = !lastDefined;
-                }
-                else {
-                    if (lastDefined) {
-                        topList.push(topCurve);
-                        bottomList.push(bottom.curves[n - i - 1]);
-                    }
+                lastDefined = !lastDefined;
+            }
+            else {
+                if (lastDefined) {
+                    topList.push(topCurve);
+                    bottomList.push(bottom.curves[n - i - 1]);
                 }
             }
-            drawAreaBlock(path, topList, bottomList, params);
         }
+        drawAreaBlock(path, topList, bottomList, params);
         return;
     }
     if (percent <= 0) {
@@ -21794,9 +21830,6 @@ function drawAreaSegments(path, segPath, percent, params) {
     let lastDefined = true;
     const topList = [];
     const bottomList = [];
-    let defined0 = true;
-    let lastTopCurve;
-    let lastBottomCurve;
     for (let i = 0, n = top.curves.length; i < n; i++) {
         const topCurve = top.curves[i];
         const curCurveLength = topCurve.getLength(direction);
@@ -21805,127 +21838,50 @@ function drawAreaSegments(path, segPath, percent, params) {
             break;
         }
         drawedLengthUntilLast += curCurveLength;
-        if (drawConnect) {
-            const bototmCurve = bottom.curves[n - i - 1];
-            let currentTopCurve = topCurve;
-            let currentBottomCurve = bototmCurve;
-            if (topCurve.originP1 === topCurve.originP2) {
-                lastTopCurve = topCurve;
-                lastBottomCurve = bototmCurve;
-                continue;
-            }
-            if (lastTopCurve && lastTopCurve.originP1 === lastTopCurve.originP2) {
-                currentTopCurve = lastTopCurve;
-                currentBottomCurve = lastBottomCurve;
-            }
-            if (topCurve.defined) {
-                if (!defined0) {
-                    topList.push(currentTopCurve);
-                    bottomList.push(currentBottomCurve);
-                    drawAreaConnectBlock(path, topList, bottomList, params);
-                    topList.length = 0;
-                    bottomList.length = 0;
-                    defined0 = !defined0;
-                }
+        let tc = null;
+        let bc = null;
+        if (lastDefined !== topCurve.defined) {
+            if (lastDefined) {
+                drawAreaBlock(path, topList, bottomList, params);
+                topList.length = 0;
+                bottomList.length = 0;
             }
             else {
-                const { originP1, originP2 } = topCurve;
-                let validTopCurve;
-                let validBottomCurve;
-                if (originP1 && originP1.defined !== false) {
-                    validTopCurve = currentTopCurve;
-                    validBottomCurve = currentBottomCurve;
-                }
-                else if (originP1 && originP2.defined !== false) {
-                    validTopCurve = topCurve;
-                    validBottomCurve = bototmCurve;
-                }
-                if (defined0) {
-                    defined0 = !defined0;
-                    topList.push(validTopCurve || topCurve);
-                    bottomList.push(validBottomCurve || bototmCurve);
-                }
-                else {
-                    if (validTopCurve) {
-                        defined0 = !defined0;
-                        topList.push(validTopCurve || topCurve);
-                        bottomList.push(validBottomCurve || bototmCurve);
-                        drawAreaConnectBlock(path, topList, bottomList, params);
-                        topList.length = 0;
-                        bottomList.length = 0;
-                    }
-                }
+                tc = topCurve;
+                bc = bottom.curves[n - i - 1];
             }
-            lastTopCurve = topCurve;
+            lastDefined = !lastDefined;
         }
         else {
-            let tc = null;
-            let bc = null;
-            if (lastDefined !== topCurve.defined) {
-                if (lastDefined) {
-                    drawAreaBlock(path, topList, bottomList, params);
-                    topList.length = 0;
-                    bottomList.length = 0;
+            if (lastDefined) {
+                tc = topCurve;
+                bc = bottom.curves[n - i - 1];
+            }
+        }
+        if (tc && bc) {
+            if (percent < 1) {
+                if (tc.p2 && tc.p3) {
+                    tc = divideCubic(tc, percent)[0];
                 }
                 else {
-                    tc = topCurve;
-                    bc = bottom.curves[n - i - 1];
+                    tc = divideLinear(tc, percent)[0];
                 }
-                lastDefined = !lastDefined;
-            }
-            else {
-                if (lastDefined) {
-                    tc = topCurve;
-                    bc = bottom.curves[n - i - 1];
+                if (bc.p2 && bc.p3) {
+                    bc = divideCubic(bc, 1 - percent)[1];
                 }
-            }
-            if (tc && bc) {
-                if (percent < 1) {
-                    if (tc.p2 && tc.p3) {
-                        tc = divideCubic(tc, percent)[0];
-                    }
-                    else {
-                        tc = divideLinear(tc, percent)[0];
-                    }
-                    if (bc.p2 && bc.p3) {
-                        bc = divideCubic(bc, 1 - percent)[1];
-                    }
-                    else {
-                        bc = divideLinear(bc, 1 - percent)[1];
-                    }
+                else {
+                    bc = divideLinear(bc, 1 - percent)[1];
                 }
-                tc.defined = lastDefined;
-                bc.defined = lastDefined;
-                topList.push(tc);
-                bottomList.push(bc);
             }
-            tc = null;
-            bc = null;
+            tc.defined = lastDefined;
+            bc.defined = lastDefined;
+            topList.push(tc);
+            bottomList.push(bc);
         }
+        tc = null;
+        bc = null;
     }
-    if (drawConnect) {
-        drawAreaConnectBlock(path, topList, bottomList, params);
-    }
-    else {
-        drawAreaBlock(path, topList, bottomList, params);
-    }
-}
-function drawAreaConnectBlock(path, topList, bottomList, params) {
-    if (topList.length < 2) {
-        return;
-    }
-    const { offsetX = 0, offsetY = 0, offsetZ = 0, mode } = params || {};
-    let curve = topList[0];
-    path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
-    curve = topList[topList.length - 1];
-    let end = curve.p3 || curve.p1;
-    path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ);
-    curve = bottomList[bottomList.length - 1];
-    path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
-    curve = bottomList[0];
-    end = curve.p3 || curve.p1;
-    path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ);
-    path.closePath();
+    drawAreaBlock(path, topList, bottomList, params);
 }
 function drawAreaBlock(path, topList, bottomList, params) {
     const { offsetX = 0, offsetY = 0, offsetZ = 0 } = params || {};
@@ -22039,7 +21995,7 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
     drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e, _f;
         const areaAttribute = getTheme(area, params === null || params === void 0 ? void 0 : params.theme).area;
-        const { fill = areaAttribute.fill, stroke = areaAttribute.stroke, fillOpacity = areaAttribute.fillOpacity, z = areaAttribute.z, strokeOpacity = areaAttribute.strokeOpacity, curveTension = areaAttribute.curveTension } = area.attribute;
+        const { fill = areaAttribute.fill, stroke = areaAttribute.stroke, fillOpacity = areaAttribute.fillOpacity, z = areaAttribute.z, strokeOpacity = areaAttribute.strokeOpacity, curveTension = areaAttribute.curveTension, connectedType = areaAttribute.connectedType } = area.attribute;
         const data = this.valid(area, areaAttribute, fillCb, strokeCb);
         if (!data) {
             return;
@@ -22051,6 +22007,12 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
         if (closePath && curveType === 'linear') {
             curveType = 'linearClosed';
         }
+        function parsePoint(points, connectedType) {
+            if (connectedType !== 'connect') {
+                return points;
+            }
+            return points.filter(p => p.defined !== false);
+        }
         if (clipRange === 1 && !segments && !points.some(p => p.defined === false) && curveType === 'linear') {
             return this.drawLinearAreaHighPerformance(area, context, !!fill, doStroke, fillOpacity, strokeOpacity, x, y, areaAttribute, drawContext, params, fillCb, strokeCb);
         }
@@ -22073,7 +22035,7 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
                         startPoint.x = lastTopSeg.endX;
                         startPoint.y = lastTopSeg.endY;
                     }
-                    const data = calcLineCache(seg.points, curveType, {
+                    const data = calcLineCache(parsePoint(seg.points, connectedType), curveType, {
                         startPoint,
                         curveTension
                     });
@@ -22102,7 +22064,7 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
                             });
                     }
                     if (bottomPoints.length > 1) {
-                        lastBottomSeg = calcLineCache(bottomPoints, curveType === 'stepBefore' ? 'stepAfter' : curveType === 'stepAfter' ? 'stepBefore' : curveType, { curveTension });
+                        lastBottomSeg = calcLineCache(parsePoint(bottomPoints, connectedType), curveType === 'stepBefore' ? 'stepAfter' : curveType === 'stepAfter' ? 'stepBefore' : curveType, { curveTension });
                         bottomCaches.unshift(lastBottomSeg);
                     }
                 }
@@ -22112,12 +22074,12 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
                 }));
             }
             else if (points && points.length) {
-                const topPoints = points;
+                const topPoints = parsePoint(points, connectedType);
                 const bottomPoints = [];
-                for (let i = points.length - 1; i >= 0; i--) {
+                for (let i = topPoints.length - 1; i >= 0; i--) {
                     bottomPoints.push({
-                        x: (_e = points[i].x1) !== null && _e !== void 0 ? _e : points[i].x,
-                        y: (_f = points[i].y1) !== null && _f !== void 0 ? _f : points[i].y
+                        x: (_e = topPoints[i].x1) !== null && _e !== void 0 ? _e : topPoints[i].x,
+                        y: (_f = topPoints[i].y1) !== null && _f !== void 0 ? _f : topPoints[i].y
                     });
                 }
                 const topCache = calcLineCache(topPoints, curveType, { curveTension });
@@ -22172,17 +22134,9 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
         this._draw(area, areaAttribute, false, drawContext, params);
     }
     drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
-        let ret = false;
-        ret =
-            ret ||
-                this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, false, fillCb, strokeCb);
-        ret =
-            ret ||
-                this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, true, fillCb, strokeCb);
-        return ret;
+        return this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb);
     }
-    _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
-        var _a, _b, _c, _d;
+    _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
         if (!(cache &&
             cache.top &&
             cache.bottom &&
@@ -22192,35 +22146,6 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
             cache.bottom.curves.length)) {
             return;
         }
-        let { connectedType, connectedX, connectedY, connectedStyle } = attribute;
-        const da = [];
-        if (connect) {
-            if (isArray(defaultAttribute)) {
-                connectedType = (_a = connectedType !== null && connectedType !== void 0 ? connectedType : defaultAttribute[0].connectedType) !== null && _a !== void 0 ? _a : defaultAttribute[1].connectedType;
-                connectedX = (_b = connectedX !== null && connectedX !== void 0 ? connectedX : defaultAttribute[0].connectedX) !== null && _b !== void 0 ? _b : defaultAttribute[1].connectedX;
-                connectedY = (_c = connectedY !== null && connectedY !== void 0 ? connectedY : defaultAttribute[0].connectedY) !== null && _c !== void 0 ? _c : defaultAttribute[1].connectedY;
-                connectedStyle = (_d = connectedStyle !== null && connectedStyle !== void 0 ? connectedStyle : defaultAttribute[0].connectedStyle) !== null && _d !== void 0 ? _d : defaultAttribute[1].connectedStyle;
-            }
-            else {
-                connectedType = connectedType !== null && connectedType !== void 0 ? connectedType : defaultAttribute.connectedType;
-                connectedX = connectedX !== null && connectedX !== void 0 ? connectedX : defaultAttribute.connectedX;
-                connectedY = connectedY !== null && connectedY !== void 0 ? connectedY : defaultAttribute.connectedY;
-                connectedStyle = connectedStyle !== null && connectedStyle !== void 0 ? connectedStyle : defaultAttribute.connectedStyle;
-            }
-            if (connectedType !== 'connect' && connectedType !== 'zero') {
-                connectedType = 'none';
-            }
-            if (isArray(defaultAttribute)) {
-                defaultAttribute.forEach(i => da.push(i));
-            }
-            else {
-                da.push(defaultAttribute);
-            }
-            da.push(attribute);
-        }
-        if (connect && connectedType === 'none') {
-            return false;
-        }
         context.beginPath();
         const ret = false;
         const { points, segments } = area.attribute;
@@ -22255,11 +22180,7 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
             offsetX,
             offsetY,
             offsetZ,
-            direction,
-            drawConnect: connect,
-            mode: connectedType,
-            zeroX: connectedX,
-            zeroY: connectedY
+            direction
         });
         this.beforeRenderStep(area, context, offsetX, offsetY, !!fillOpacity, false, fill, false, defaultAttribute, drawContext, fillCb, null, { attribute });
         context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute);
@@ -22270,7 +22191,7 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
                     fillCb(context, attribute, defaultAttribute);
                 }
                 else if (fillOpacity) {
-                    context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute);
+                    context.setCommonStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute);
                     context.fill();
                 }
             }
@@ -22287,14 +22208,10 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
                         drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? 'x' : 'y', {
                             offsetX,
                             offsetY,
-                            offsetZ,
-                            drawConnect: connect,
-                            mode: connectedType,
-                            zeroX: connectedX,
-                            zeroY: connectedY
+                            offsetZ
                         });
                     }
-                    context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute);
+                    context.setStrokeStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute);
                     context.stroke();
                 }
             }
@@ -22663,7 +22580,7 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
     }
     drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        const { backgroundMode = graphicAttribute.backgroundMode, backgroundFit = graphicAttribute.backgroundFit } = graphic.attribute;
+        const { backgroundMode = graphicAttribute.backgroundMode, backgroundFit = graphicAttribute.backgroundFit, backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio } = graphic.attribute;
         let { background } = graphic.attribute;
         if (!background) {
             return;
@@ -22720,7 +22637,7 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
                 context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
             }
             context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
-            this.doDrawImage(context, res.data, b, { backgroundMode, backgroundFit });
+            this.doDrawImage(context, res.data, b, { backgroundMode, backgroundFit, backgroundKeepAspectRatio });
             context.highPerformanceRestore();
             context.setTransformForCurrent();
         }
@@ -24318,6 +24235,9 @@ let DefaultDrawContribution = class DefaultDrawContribution {
         this.backupDirtyBounds = new Bounds();
         this.global = application.global;
         this.layerService = application.layerService;
+        if (!isArray(this.contributions)) {
+            this.contributions = [this.contributions];
+        }
         this.init();
     }
     init() {
@@ -27039,7 +26959,7 @@ function flatten_simplify(points, tolerance, highestQuality) {
 }
 
 function getDefaultCharacterConfig(attribute) {
-    const { fill = 'black', stroke = false, fontWeight = 'normal', fontFamily = 'Arial' } = attribute;
+    const { fill = 'black', stroke = false, fontWeight = 'normal', lineHeight, fontFamily = 'Arial' } = attribute;
     let { fontSize = 12 } = attribute;
     if (!isFinite(fontSize)) {
         fontSize = 12;
@@ -27049,7 +26969,8 @@ function getDefaultCharacterConfig(attribute) {
         stroke,
         fontSize,
         fontWeight,
-        fontFamily
+        fontFamily,
+        lineHeight
     };
 }
 function findConfigIndexByCursorIdx(textConfig, cursorIndex) {
@@ -27133,12 +27054,12 @@ class EditModule {
             this.composingConfigIdx = this.cursorIndex < 0 ? 0 : findConfigIndexByCursorIdx(textConfig, this.cursorIndex);
             if (this.cursorIndex < 0) {
                 const config = textConfig[0];
-                textConfig.unshift(Object.assign(Object.assign(Object.assign({}, getDefaultCharacterConfig(this.currRt.attribute)), config), { text: '' }));
+                textConfig.unshift(Object.assign(Object.assign(Object.assign({ fill: 'black' }, getDefaultCharacterConfig(this.currRt.attribute)), config), { text: '' }));
             }
             else {
                 const configIdx = this.composingConfigIdx;
                 const lastConfig = textConfig[configIdx] || textConfig[configIdx - 1];
-                textConfig.splice(configIdx, 0, Object.assign(Object.assign({}, lastConfig), { text: '' }));
+                textConfig.splice(configIdx, 0, Object.assign(Object.assign({ fill: 'black' }, lastConfig), { text: '' }));
             }
         };
         this.handleCompositionEnd = () => {
@@ -27262,13 +27183,14 @@ class EditModule {
         application.global.addEventListener('keydown', this.handleKeyDown);
     }
     parseCompositionStr(configIdx) {
+        var _a;
         const { textConfig = [] } = this.currRt.attribute;
-        const lastConfig = textConfig[configIdx];
+        const lastConfig = (_a = textConfig[configIdx]) !== null && _a !== void 0 ? _a : {};
         textConfig.splice(configIdx, 1);
         const text = lastConfig.text;
         const textList = text ? Array.from(text.toString()) : [];
         for (let i = 0; i < textList.length; i++) {
-            textConfig.splice(i + configIdx, 0, Object.assign(Object.assign(Object.assign(Object.assign({}, getDefaultCharacterConfig(this.currRt.attribute)), { fill: 'black' }), lastConfig), { isComposing: false, text: textList[i] }));
+            textConfig.splice(i + configIdx, 0, Object.assign(Object.assign({ fill: 'black' }, lastConfig), { isComposing: false, text: textList[i] }));
         }
         this.currRt.setAttributes({ textConfig });
         const nextConfigIdx = configIdx + textList.length;
@@ -27343,18 +27265,23 @@ class Selection {
         }
         return (_a = config[Math.min(idx, config.length - 1)][key]) !== null && _a !== void 0 ? _a : this.rt.attribute[key];
     }
-    getFormat(key) {
-        return this.getAllFormat(key)[0];
+    getFormat(key, supportOutAttr = false) {
+        return this.getAllFormat(key, supportOutAttr)[0];
     }
-    getAllFormat(key) {
+    getAllFormat(key, supportOutAttr = false) {
+        var _a, _b, _c, _d;
         const valSet = new Set();
         const minCursorIdx = Math.min(this.selectionStartCursorIdx, this.curCursorIdx);
         const maxCursorIdx = Math.max(this.selectionStartCursorIdx, this.curCursorIdx);
         if (minCursorIdx === maxCursorIdx) {
-            return [this._getFormat(key, minCursorIdx)];
+            return supportOutAttr
+                ? [(_a = this._getFormat(key, minCursorIdx)) !== null && _a !== void 0 ? _a : ((_b = this.rt) === null || _b === void 0 ? void 0 : _b.attribute)[key]]
+                : [this._getFormat(key, minCursorIdx)];
         }
         for (let i = Math.ceil(minCursorIdx); i <= Math.floor(maxCursorIdx); i++) {
-            const val = this._getFormat(key, i);
+            const val = supportOutAttr
+                ? (_c = this._getFormat(key, i)) !== null && _c !== void 0 ? _c : ((_d = this.rt) === null || _d === void 0 ? void 0 : _d.attribute)[key]
+                : this._getFormat(key, i);
             val && valSet.add(val);
         }
         return Array.from(valSet.values());
@@ -27419,10 +27346,10 @@ class RichTextEditPlugin {
             if (this.copyToClipboard(e)) {
                 return;
             }
-            if (this.fullSelection(e)) {
+            if (this.fullSelectionKeyHandler(e)) {
                 return;
             }
-            if (this.directKey(e)) {
+            if (this.directKeyHandler(e)) {
                 return;
             }
         };
@@ -27463,7 +27390,7 @@ class RichTextEditPlugin {
                 return;
             }
             this.handleEnter();
-            e.target.once('pointerleave', this.handleLeave);
+            e.target.once('pointerleave', this.handleLeave, { capture: true });
             this.tryShowSelection(e, false);
         };
         this.handleEnter = () => {
@@ -27557,11 +27484,11 @@ class RichTextEditPlugin {
     activate(context) {
         this.pluginService = context;
         this.editModule = new EditModule();
-        context.stage.on('pointermove', this.handleMove);
-        context.stage.on('pointerdown', this.handlePointerDown);
-        context.stage.on('pointerup', this.handlePointerUp);
-        context.stage.on('pointerleave', this.handlePointerUp);
-        context.stage.on('dblclick', this.handleDBLClick);
+        context.stage.on('pointermove', this.handleMove, { capture: true });
+        context.stage.on('pointerdown', this.handlePointerDown, { capture: true });
+        context.stage.on('pointerup', this.handlePointerUp, { capture: true });
+        context.stage.on('pointerleave', this.handlePointerUp, { capture: true });
+        context.stage.on('dblclick', this.handleDBLClick, { capture: true });
         application.global.addEventListener('keydown', this.handleKeyDown);
         this.editModule.onInput(this.handleInput);
         this.editModule.onChange(this.handleChange);
@@ -27605,32 +27532,32 @@ class RichTextEditPlugin {
         this.setCursorAndTextArea(pos.x, pos.y1, pos.y2, this.currRt);
         this._tryShowSelection(pos, cache);
     }
-    fullSelection(e) {
+    fullSelection() {
+        const currRt = this.currRt;
+        if (!currRt) {
+            return;
+        }
+        const cache = currRt.getFrameCache();
+        if (!cache) {
+            return;
+        }
+        const { lines } = cache;
+        if (!(lines.length && lines[0].paragraphs.length)) {
+            return;
+        }
+        const totalCursorCount = lines.reduce((total, line) => total + line.paragraphs.length, 0) - 1;
+        this.selectionRange(-0.1, totalCursorCount + 0.1);
+    }
+    fullSelectionKeyHandler(e) {
         if ((application.global.isMacOS() && e.metaKey && e.key === 'a') ||
             (!application.global.isMacOS() && e.ctrlKey && e.key === 'a')) {
-            const currRt = this.currRt;
-            if (!currRt) {
-                return;
-            }
-            const cache = currRt.getFrameCache();
-            if (!cache) {
-                return;
-            }
-            const { lines } = cache;
-            if (lines.length === 0) {
-                return;
-            }
-            if (!lines[0].paragraphs || lines[0].paragraphs.length === 0) {
-                return;
-            }
-            const totalCursorCount = lines.reduce((total, line) => total + line.paragraphs.length, 0) - 1;
-            this.selectionRange(-0.1, totalCursorCount + 0.1);
+            this.fullSelection();
             e.preventDefault();
             return true;
         }
         return false;
     }
-    directKey(e) {
+    directKeyHandler(e) {
         if (!(e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
             return false;
         }
@@ -27681,6 +27608,7 @@ class RichTextEditPlugin {
             else if (this.curCursorIdx > totalCursorCount + 0.1) {
                 this.curCursorIdx = totalCursorCount + 0.1;
             }
+            this.selectionStartCursorIdx = this.curCursorIdx;
             const pos = this.computedCursorPosByCursorIdx(this.curCursorIdx, this.currRt);
             this.setCursorAndTextArea(pos.x, pos.y1, pos.y2, this.currRt);
             this.hideSelection();
@@ -27728,7 +27656,7 @@ class RichTextEditPlugin {
             const placeholder = shadowRoot.getElementsByType('richtext')[0];
             placeholder && shadowRoot.removeChild(placeholder);
         }
-        const { textConfig, editOptions } = this.currRt.attribute;
+        const { textConfig, editOptions = {} } = this.currRt.attribute;
         if (textConfig && textConfig.length) {
             return;
         }
@@ -27747,9 +27675,16 @@ class RichTextEditPlugin {
         if (placeholderFontSize) {
             textConfigItem.fontSize = placeholderFontSize;
         }
-        this.shadowPlaceHolder = createRichText(Object.assign(Object.assign({}, this.currRt.attribute), { x: 0, y: 0, pickable: false, editable: false, editOptions: null, angle: 0, _debug_bounds: false, textConfig: [textConfigItem] }));
+        this.shadowPlaceHolder = createRichText(Object.assign(Object.assign({}, this.currRt.attribute), { x: 0, y: 0, dx: -this.deltaX, dy: -this.deltaY, angle: 0, textConfig: [textConfigItem] }));
         shadow.add(this.shadowPlaceHolder);
     }
+    getRichTextAABBBounds(rt) {
+        const { attribute } = rt;
+        if (!attribute.textConfig.length) {
+            return getRichTextBounds(Object.assign(Object.assign({}, this.shadowPlaceHolder.attribute), { x: attribute.x, y: attribute.y, textAlign: attribute.textAlign, boundsMode: 'accurate' }));
+        }
+        return rt.AABBBounds;
+    }
     tryShowInputBounds() {
         if (!(this.currRt && this.focusing)) {
             return;
@@ -27759,28 +27694,24 @@ class RichTextEditPlugin {
         if (!editOptions || !boundsStrokeWhenInput) {
             return;
         }
-        const { attribute } = this.currRt;
-        let b = this.currRt.AABBBounds;
-        let h = b.height();
-        if (!attribute.textConfig.length && this.editLine) {
-            const { points } = this.editLine.attribute;
-            h = points[1].y - points[0].y;
-            b = getRichTextBounds(Object.assign({}, this.shadowPlaceHolder.attribute));
-        }
+        const b = this.getRichTextAABBBounds(this.currRt);
+        const height = b.height();
+        const width = b.width();
         this.shadowBounds = this.shadowBounds || createRect({});
         this.shadowBounds.setAttributes({
             x: 0,
             y: 0,
-            width: b.width(),
-            height: h,
+            width,
+            height,
             fill: false,
             stroke: boundsStrokeWhenInput,
             lineWidth: 1,
             zIndex: -1
         });
         const shadow = this.getShadow(this.currRt);
-        shadow.add(this.shadowBounds);
+        this.addEditLineOrBgOrBounds(this.shadowBounds, shadow);
         this.offsetLineBgAndShadowBounds();
+        this.offsetShadowRoot();
     }
     trySyncPlaceholderToTextConfig() {
         if (!this.currRt) {
@@ -27790,7 +27721,7 @@ class RichTextEditPlugin {
         if (textConfig && textConfig.length) {
             return;
         }
-        if (!(editOptions && editOptions.placeholder && editOptions.syncPlaceHolderToTextConfig)) {
+        if (!(editOptions && editOptions.placeholder && editOptions.syncPlaceholderToTextConfig)) {
             return;
         }
         const { placeholder } = editOptions;
@@ -27801,17 +27732,37 @@ class RichTextEditPlugin {
         });
     }
     deactivate(context) {
-        context.stage.off('pointermove', this.handleMove);
-        context.stage.off('pointerdown', this.handlePointerDown);
-        context.stage.off('pointerup', this.handlePointerUp);
-        context.stage.off('pointerleave', this.handlePointerUp);
-        context.stage.off('dblclick', this.handleDBLClick);
+        context.stage.off('pointermove', this.handleMove, { capture: true });
+        context.stage.off('pointerdown', this.handlePointerDown, { capture: true });
+        context.stage.off('pointerup', this.handlePointerUp, { capture: true });
+        context.stage.off('pointerleave', this.handlePointerUp, { capture: true });
+        context.stage.off('dblclick', this.handleDBLClick, { capture: true });
         application.global.addEventListener('keydown', this.handleKeyDown);
     }
+    stopPropagation(e) {
+        e.stopPropagation();
+    }
+    addEditLineOrBgOrBounds(graphic, shadowRoot) {
+        let group = shadowRoot.getElementById('emptyBoundsContainer');
+        if (!group) {
+            group = createGroup({ x: 0, y: 0, width: 0, height: 0, boundsMode: 'empty' });
+            group.id = 'emptyBoundsContainer';
+            shadowRoot.add(group);
+        }
+        group.add(graphic);
+    }
+    removeEditLineOrBgOrBounds(graphic, shadowRoot) {
+        const group = shadowRoot.getElementById('emptyBoundsContainer');
+        if (!group) {
+            return;
+        }
+        group.removeChild(graphic);
+    }
     onFocus(e, data) {
         this.updateCbs && this.updateCbs.forEach(cb => cb('beforeOnfocus', this));
         this.deFocus(false);
         this.focusing = true;
+        this.editing = true;
         const target = e.target;
         if (!(target && target.type === 'richtext')) {
             return;
@@ -27823,8 +27774,11 @@ class RichTextEditPlugin {
         if (!cache) {
             return;
         }
-        this.computeGlobalDelta(cache);
-        shadowRoot.setAttributes({ shadowRootIdx: 1, pickable: false, x: this.deltaX, y: this.deltaY });
+        const { editOptions = {} } = this.currRt.attribute;
+        if (editOptions.stopPropagation) {
+            target.addEventListener('*', this.stopPropagation);
+        }
+        this.offsetShadowRoot(target);
         if (!this.editLine) {
             const line = createLine({ x: 0, y: 0, lineWidth: 1, stroke: 'black' });
             this.addAnimateToLine(line);
@@ -27832,8 +27786,8 @@ class RichTextEditPlugin {
             this.ticker.start(true);
             const g = createGroup({ x: 0, y: 0, width: 0, height: 0 });
             this.editBg = g;
-            shadowRoot.add(this.editLine);
-            shadowRoot.add(this.editBg);
+            this.addEditLineOrBgOrBounds(this.editLine, shadowRoot);
+            this.addEditLineOrBgOrBounds(this.editBg, shadowRoot);
         }
         data = data || this.computedCursorPosByEvent(e, cache);
         if (data) {
@@ -27856,6 +27810,23 @@ class RichTextEditPlugin {
         this.tryShowInputBounds();
         this.currRt.addUpdateBoundTag();
     }
+    offsetShadowRoot(rt) {
+        rt = rt || this.currRt;
+        if (!rt) {
+            return;
+        }
+        const shadowRoot = this.getShadow(rt);
+        if (!shadowRoot) {
+            return;
+        }
+        const cache = rt.getFrameCache();
+        if (!cache) {
+            return;
+        }
+        this.computeGlobalDelta(cache);
+        shadowRoot.setAttributes({ shadowRootIdx: 1, pickable: false, x: this.deltaX, y: this.deltaY });
+        this.shadowPlaceHolder && this.shadowPlaceHolder.setAttributes({ dx: -this.deltaX, dy: -this.deltaY });
+    }
     offsetLineBgAndShadowBounds() {
         const rt = this.currRt;
         const { textBaseline } = rt.attribute;
@@ -27881,28 +27852,33 @@ class RichTextEditPlugin {
         }
     }
     deFocus(trulyDeFocus = false) {
-        const target = this.currRt;
-        if (!target) {
+        this.editing = false;
+        this.updateCbs && this.updateCbs.forEach(cb => cb('beforeDefocus', this, { trulyDeFocus }));
+        const currRt = this.currRt;
+        if (!currRt) {
             return;
         }
-        this.updateCbs && this.updateCbs.forEach(cb => cb('beforeDefocus', this, { trulyDeFocus }));
+        const { editOptions = {} } = currRt.attribute;
+        if (editOptions.stopPropagation) {
+            currRt.removeEventListener('*', this.stopPropagation);
+        }
         if (trulyDeFocus) {
             this.trySyncPlaceholderToTextConfig();
-            target.detachShadow();
+            currRt.detachShadow();
         }
-        const currRt = this.currRt;
         this.currRt = null;
+        const shadowRoot = this.getShadow(currRt);
         if (this.editLine) {
-            this.editLine.parent && this.editLine.parent.removeChild(this.editLine);
+            this.removeEditLineOrBgOrBounds(this.editLine, shadowRoot);
             this.editLine.release();
             this.editLine = null;
-            this.editBg.parent && this.editBg.parent.removeChild(this.editBg);
+            this.removeEditLineOrBgOrBounds(this.editBg, shadowRoot);
             this.editBg.release();
             this.editBg = null;
         }
         if (trulyDeFocus) {
             if (this.shadowBounds) {
-                this.shadowBounds.parent && this.shadowBounds.parent.removeChild(this.shadowBounds);
+                this.removeEditLineOrBgOrBounds(this.shadowBounds, shadowRoot);
                 this.shadowBounds.release();
                 this.shadowBounds = null;
             }
@@ -27913,18 +27889,10 @@ class RichTextEditPlugin {
             }
         }
         this.focusing = false;
-        const textConfig = currRt.attribute.textConfig;
-        let lastConfig = textConfig[textConfig.length - 1];
-        let cleared = false;
-        while (lastConfig && lastConfig.text === '\n') {
-            textConfig.pop();
-            lastConfig = textConfig[textConfig.length - 1];
-            cleared = true;
-        }
-        cleared && currRt.setAttributes({ textConfig });
         currRt.removeEventListener('pointerleave', this.handleLeave);
     }
     addAnimateToLine(line) {
+        line.setAttributes({ opacity: 1 });
         line.animates &&
             line.animates.forEach(animate => {
                 animate.stop();
@@ -27983,9 +27951,6 @@ class RichTextEditPlugin {
         };
         let line0Info = this.getLineByPoint(cache, startCursorPos);
         let line1Info = this.getLineByPoint(cache, endCursorPos);
-        if (!line0Info || !line1Info) {
-            return;
-        }
         if (startCursorPos.y > endCursorPos.y ||
             (startCursorPos.y === endCursorPos.y && startCursorPos.x > endCursorPos.x)) {
             [startCursorPos, endCursorPos] = [endCursorPos, startCursorPos];
@@ -28058,7 +28023,7 @@ class RichTextEditPlugin {
     }
     getShadow(rt) {
         const sr = rt.shadowRoot || rt.attachShadow();
-        sr.setAttributes({ boundsMode: 'empty' });
+        sr.setAttributes({ width: 1, height: 1 });
         return sr;
     }
     getLineByPoint(cache, p1) {
@@ -28130,6 +28095,9 @@ class RichTextEditPlugin {
     computeGlobalDelta(cache) {
         this.deltaX = 0;
         this.deltaY = 0;
+        if (cache.lines.length === 0 && this.shadowPlaceHolder) {
+            cache = this.shadowPlaceHolder.getFrameCache();
+        }
         const height = cache.height;
         const actualHeight = cache.actualHeight;
         const width = cache.lines.reduce((w, item) => Math.max(w, item.actualWidth), 0);
@@ -28180,6 +28148,7 @@ class RichTextEditPlugin {
         out.x += left;
         out.y += top;
         this.offsetLineBgAndShadowBounds();
+        this.offsetShadowRoot();
         this.editModule.moveTo(out.x, out.y, rt, this.curCursorIdx, this.selectionStartCursorIdx);
     }
     computedCursorPosByEvent(e, cache) {