public/libs/actions.js

@@ -1117,7 +1117,7 @@ actions.prototype._clickAction_text = function () {
     // 正在淡入淡出的话不执行
     if (core.status.event.animateUI) return;
 
-    const Store = Mota.require('module', 'MainUI').TextboxStore;
+    const Store = Mota.require('module', 'Render').TextboxStore;
     const store = Store.get('main-textbox');
 
     // var data = core.clone(core.status.event.data.current);

public/libs/events.js

@@ -1553,7 +1553,7 @@ events.prototype.__action_doAsyncFunc = function (isAsync, func) {
 
 events.prototype._action_text = function (data, x, y, prefix) {
     if (this.__action_checkReplaying()) return;
-    const Store = Mota.require('module', 'MainUI').TextboxStore;
+    const Store = Mota.require('module', 'Render').TextboxStore;
     const store = Store.get('main-textbox');
     const { text } = data;
     let title = '';
@@ -1594,10 +1594,10 @@ events.prototype._action_text = function (data, x, y, prefix) {
         }
     }
 
-    const showText = text.slice(0, titleStartIndex) + text.slice(titleEndIndex);
+    const showTitle =
+        text.slice(0, titleStartIndex) + text.slice(titleEndIndex);
     store.show();
-    store.modify({ title });
+    store.modify({ text: showTitle, title });
-    store.setText(showText);
 
     // data.text = core.replaceText(data.text, prefix);
     // var ctx = data.code ? '__text__' + data.code : null;

src/core/fx/webgl.ts

@@ -13,7 +13,7 @@ function checkSupport() {
         sleep(3000).then(() => {
             tip(
                 'warning',
-                `您的浏览器不支持WebGL，大部分效果将会无法显示，请更新你的浏览器`
+                `您的浏览器不支持WebGL，大部分特效将会无法显示，建议使用新版浏览器`
             );
         });
     }
@@ -21,7 +21,7 @@ function checkSupport() {
         sleep(3000).then(() => {
             tip(
                 'warning',
-                `您的浏览器不支持WebGL2，大部分效果将会无法显示，请更新你的浏览器`
+                `您的浏览器不支持WebGL2，一部分特效将会无法显示，建议使用新版浏览器`
             );
         });
     }
@@ -54,10 +54,10 @@ type UniformFunc<
 type UniformBinderValue<N extends UniformBinderNum> = N extends 1
     ? number
     : N extends 2
-      ? [number, number]
+    ? [number, number]
-      : N extends 3
+    : N extends 3
-        ? [number, number, number]
+    ? [number, number, number]
-        : [number, number, number, number];
+    : [number, number, number, number];
 
 interface UniformBinder<
     N extends UniformBinderNum,

src/core/render/container.ts

@@ -80,9 +80,9 @@ export class Container<E extends EContainerEvent = EContainerEvent>
     append(parent: RenderItem): void {
         super.append(parent);
         if (this.root) {
-            const root = this.root;
             this.forEachChild(ele => {
-                ele.setRoot(root);
+                ele.checkRoot();
+                this.root?.connect(ele);
             });
         }
     }
@@ -104,7 +104,6 @@ export class Container<E extends EContainerEvent = EContainerEvent>
         this.sortedChildren = [...this.children].sort(
             (a, b) => a.zIndex - b.zIndex
         );
-        this.update();
     }
 
     protected propagateEvent<T extends ActionType>(

src/core/render/item.ts

@@ -437,15 +437,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         return canvas;
     }
 
-    /**
-     * 删除由 `requireCanvas` 申请的画布，当画布不再使用时，可以用该方法删除画布
-     * @param canvas 要删除的画布
-     */
-    protected deleteCanvas(canvas: MotaOffscreenCanvas2D) {
-        if (!this.canvases.delete(canvas)) return;
-        canvas.delete();
-    }
-
     //#region 修改元素属性
 
     /**
@@ -466,8 +457,8 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
      * @param y 纵坐标
      */
     pos(x: number, y: number) {
-        // 这个函数会调用 update，因此不再手动调用 update
         this._transform.setTranslate(x, y);
+        this.update();
     }
 
     /**
@@ -597,15 +588,10 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     }
 
     update(item: RenderItem<any> = this): void {
-        if (this._parent) {
+        if (this.cacheDirty) return;
-            if (this.cacheDirty && this._parent.cacheDirty) return;
+        this.cacheDirty = true;
-            this.cacheDirty = true;
+        if (this.hidden) return;
-            if (this.hidden) return;
+        this.parent?.update(item);
-            this._parent.update(item);
-        } else {
-            if (this.cacheDirty) return;
-            this.cacheDirty = true;
-        }
     }
 
     updateTransform() {
@@ -664,12 +650,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
 
     //#region 父子关系
 
-    setRoot(item: RenderItem & IRenderTreeRoot) {
-        this._root?.disconnect(this);
-        this._root = item;
-        item.connect(item);
-    }
-
     checkRoot(): RenderItem | null {
         if (this._root) return this._root;
         if (this.isRoot) return this;

src/core/render/preset/misc.ts

@@ -30,10 +30,7 @@ export class Text extends RenderItem<ETextEvent> {
         super(type, false);
 
         this.text = text;
-        if (text.length > 0) {
+        if (text.length > 0) this.calBox();
-            this.calBox();
-            this.emit('setText', text);
-        }
     }
 
     protected render(
@@ -73,7 +70,7 @@ export class Text extends RenderItem<ETextEvent> {
     setText(text: string) {
         this.text = text;
         this.calBox();
-        this.update(this);
+        if (this.parent) this.update(this);
         this.emit('setText', text);
     }
 
@@ -84,7 +81,7 @@ export class Text extends RenderItem<ETextEvent> {
     setFont(font: string) {
         this.font = font;
         this.calBox();
-        this.update(this);
+        if (this.parent) this.update(this);
     }
 
     /**
@@ -113,11 +110,7 @@ export class Text extends RenderItem<ETextEvent> {
             this.measure();
         this.length = width;
         this.descent = actualBoundingBoxAscent;
-        this.size(
+        this.size(width, actualBoundingBoxAscent + actualBoundingBoxDescent);
-            width,
-            Math.abs(actualBoundingBoxAscent) +
-                Math.abs(actualBoundingBoxDescent)
-        );
     }
 
     protected handleProps(
@@ -139,7 +132,7 @@ export class Text extends RenderItem<ETextEvent> {
             case 'font':
                 if (!this.assertType(nextValue, 'string', key)) return false;
                 this.setFont(nextValue);
-                return true;
+                break;
             case 'strokeWidth':
                 this.setStrokeWidth(nextValue);
                 return true;
@@ -345,27 +338,14 @@ export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
     }
 }
 
-interface WinskinPatterns {
-    top: CanvasPattern;
-    left: CanvasPattern;
-    bottom: CanvasPattern;
-    right: CanvasPattern;
-}
-
 export interface EWinskinEvent extends ERenderItemEvent {}
 
 export class Winskin extends RenderItem<EWinskinEvent> {
     image: SizedCanvasImageSource;
-    /** 边框宽度，32表示原始宽度 */
+    /** 边框宽度 */
     borderSize: number = 32;
-    /** 图片名称 */
-    imageName?: string;
 
     private pendingImage?: ImageIds;
-    private patternCache?: WinskinPatterns;
-    private patternTransform: DOMMatrix;
-
-    private static patternMap: Map<string, WinskinPatterns> = new Map();
 
     constructor(
         image: SizedCanvasImageSource,
@@ -373,63 +353,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
     ) {
         super(type, false, false);
         this.image = image;
-        this.setAntiAliasing(false);
-
-        if (window.DOMMatrix) {
-            this.patternTransform = new DOMMatrix();
-        } else if (window.WebKitCSSMatrix) {
-            this.patternTransform = new WebKitCSSMatrix();
-        } else {
-            this.patternTransform = new SVGMatrix();
-        }
-    }
-
-    private generatePattern() {
-        const pattern = this.requireCanvas();
-        const img = this.image;
-        pattern.size(32, 16);
-        pattern.withGameScale(false);
-        pattern.setHD(false);
-        pattern.setAntiAliasing(false);
-        const ctx = pattern.ctx;
-        ctx.drawImage(img, 144, 0, 32, 16, 0, 0, 32, 16);
-        const topPattern = ctx.createPattern(pattern.canvas, 'repeat');
-        ctx.clearRect(0, 0, 32, 16);
-        ctx.drawImage(img, 144, 48, 32, 16, 0, 0, 32, 16);
-        const bottomPattern = ctx.createPattern(pattern.canvas, 'repeat');
-        ctx.clearRect(0, 0, 32, 16);
-        pattern.size(16, 32);
-        ctx.drawImage(img, 128, 16, 16, 32, 0, 0, 16, 32);
-        const leftPattern = ctx.createPattern(pattern.canvas, 'repeat');
-        ctx.clearRect(0, 0, 16, 32);
-        ctx.drawImage(img, 176, 16, 16, 32, 0, 0, 16, 32);
-        const rightPattern = ctx.createPattern(pattern.canvas, 'repeat');
-        if (!topPattern || !bottomPattern || !leftPattern || !rightPattern) {
-            return null;
-        }
-        const winskinPattern: WinskinPatterns = {
-            top: topPattern,
-            bottom: bottomPattern,
-            left: leftPattern,
-            right: rightPattern
-        };
-        if (this.imageName) {
-            Winskin.patternMap.set(this.imageName, winskinPattern);
-        }
-        this.patternCache = winskinPattern;
-        this.deleteCanvas(pattern);
-        return winskinPattern;
-    }
-
-    private getPattern() {
-        if (!this.imageName) {
-            if (this.patternCache) return this.patternCache;
-            return this.generatePattern();
-        } else {
-            const pattern = Winskin.patternMap.get(this.imageName);
-            if (pattern) return pattern;
-            return this.generatePattern();
-        }
     }
 
     protected render(
@@ -438,38 +361,143 @@ export class Winskin extends RenderItem<EWinskinEvent> {
     ): void {
         const ctx = canvas.ctx;
         const img = this.image;
-        const w = this.width;
+        const x = 0;
-        const h = this.height;
+        const y = 0;
-        const pad = this.borderSize / 2;
+        const w = canvas.width;
-        // 背景
+        const h = canvas.height;
-        ctx.drawImage(img, 0, 0, 128, 128, 2, 2, w - 4, h - 4);
+        const sz = this.borderSize / 32;
-        const pattern = this.getPattern();
+        ctx.drawImage(img, 0, 0, 128, 128, x + 2, y + 2, w - 4, h - 4);
-        if (!pattern) return;
+        ctx.drawImage(img, 128, 0, 16, 16, x, y, 16 * sz, 16 * sz);
-        const { top, left, right, bottom } = pattern;
+        let dx;
-        top.setTransform(this.patternTransform);
+        for (dx = 0; dx < w - 64 * sz; dx += 32 * sz) {
-        left.setTransform(this.patternTransform);
+            ctx.drawImage(
-        right.setTransform(this.patternTransform);
+                img,
-        bottom.setTransform(this.patternTransform);
+                144,
-        // 上下左右边框
+                0,
-        ctx.save();
+                32,
-        ctx.fillStyle = top;
+                16,
-        ctx.translate(pad, 0);
+                x + dx + 16,
-        ctx.fillRect(0, 0, w - pad * 2, pad);
+                y,
-        ctx.fillStyle = bottom;
+                32 * sz,
-        ctx.translate(0, h - pad);
+                16 * sz
-        ctx.fillRect(0, 0, w - pad * 2, pad);
+            );
-        ctx.fillStyle = left;
+            ctx.drawImage(
-        ctx.translate(-pad, pad * 2 - h);
+                img,
-        ctx.fillRect(0, 0, pad, h - pad * 2);
+                144,
-        ctx.fillStyle = right;
+                48,
-        ctx.translate(w - pad, 0);
+                32,
-        ctx.fillRect(0, 0, pad, h - pad * 2);
+                16,
-        ctx.restore();
+                x + dx + 16,
-        // 四个角的边框
+                y + h - 16 * sz,
-        ctx.drawImage(img, 128, 0, 16, 16, 0, 0, pad, pad);
+                32 * sz,
-        ctx.drawImage(img, 176, 0, 16, 16, w - pad, 0, pad, pad);
+                16 * sz
-        ctx.drawImage(img, 128, 48, 16, 16, 0, h - pad, pad, pad);
+            );
-        ctx.drawImage(img, 176, 48, 16, 16, w - pad, h - pad, pad, pad);
+        }
+        ctx.drawImage(
+            img,
+            144,
+            0,
+            w - dx - 32,
+            16,
+            x + dx + 16 * sz,
+            y,
+            w - dx - 32 * sz,
+            16 * sz
+        );
+        ctx.drawImage(
+            img,
+            144,
+            48,
+            w - dx - 32,
+            16,
+            x + dx + 16 * sz,
+            y + h - 16 * sz,
+            w - dx - 32 * sz,
+            16 * sz
+        );
+        ctx.drawImage(
+            img,
+            176,
+            0,
+            16,
+            16,
+            x + w - 16 * sz,
+            y,
+            16 * sz,
+            16 * sz
+        );
+        // 左右
+        let dy;
+        for (dy = 0; dy < h - 64 * sz; dy += 32 * sz) {
+            ctx.drawImage(
+                img,
+                128,
+                16,
+                16,
+                32,
+                x,
+                y + dy + 16 * sz,
+                16 * sz,
+                32 * sz
+            );
+            ctx.drawImage(
+                img,
+                176,
+                16,
+                16,
+                32,
+                x + w - 16 * sz,
+                y + dy + 16 * sz,
+                16 * sz,
+                32 * sz
+            );
+        }
+        ctx.drawImage(
+            img,
+            128,
+            16,
+            16,
+            h - dy - 32,
+            x,
+            y + dy + 16 * sz,
+            16 * sz,
+            h - dy - 32 * sz
+        );
+        ctx.drawImage(
+            img,
+            176,
+            16,
+            16,
+            h - dy - 32,
+            x + w - 16 * sz,
+            y + dy + 16 * sz,
+            16 * sz,
+            h - dy - 32 * sz
+        );
+        // 下方
+        ctx.drawImage(
+            img,
+            128,
+            48,
+            16,
+            16,
+            x,
+            y + h - 16 * sz,
+            16 * sz,
+            16 * sz
+        );
+        ctx.drawImage(
+            img,
+            176,
+            48,
+            16,
+            16,
+            x + w - 16 * sz,
+            y + h - 16 * sz,
+            16 * sz,
+            16 * sz
+        );
+        this.update();
     }
 
     /**
@@ -478,7 +506,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
      */
     setImage(image: SizedCanvasImageSource) {
         this.image = image;
-        this.patternCache = void 0;
         this.update();
     }
 
@@ -503,7 +530,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
             }
             this.pendingImage = name;
         }
-        this.imageName = name;
     }
 
     /**
@@ -512,8 +538,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
      */
     setBorderSize(size: number) {
         this.borderSize = size;
-        this.patternTransform.a = size / 32;
-        this.patternTransform.d = size / 32;
         this.update();
     }
 

src/data/logger.json

@@ -90,7 +90,6 @@
         "56": "Method '$1' has been deprecated. Consider using '$2' instead.",
         "57": "Repeated UI controller on item '$1', new controller will not work.",
         "58": "Fail to set ellipse round rect, since length of 'ellipse' property should only be 2, 4, 6 or 8. delivered: $1",
-        "59": "Unknown icon '$1' in parsing text content.",
         "1001": "Item-detail extension needs 'floor-binder' and 'floor-damage' extension as dependency.",
         "1101": "Cannot add new effect to point effect instance, for there's no more reserve space for it. Please increase the max count of the instance."
     }

src/module/render/components/textbox.tsx

@@ -2,8 +2,8 @@ import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
 import {
     computed,
     defineComponent,
-    nextTick,
     onUnmounted,
+    onUpdated,
     ref,
     shallowReactive,
     shallowRef,
@@ -13,7 +13,7 @@ import {
 } from 'vue';
 import { logger } from '@/core/common/logger';
 import { Sprite } from '@/core/render/sprite';
-import { DefaultProps } from '@/core/render/renderer';
+import { ContainerProps, DefaultProps } from '@/core/render/renderer';
 import { isNil } from 'lodash-es';
 import { SetupComponentOptions } from './types';
 import EventEmitter from 'eventemitter3';
@@ -22,9 +22,7 @@ import {
     ITextContentConfig,
     TextContentTyper,
     TyperRenderable,
-    TextContentType,
+    TextContentType
-    WordBreak,
-    TextAlign
 } from './textboxTyper';
 
 export interface TextContentProps
@@ -36,6 +34,8 @@ export interface TextContentProps
     fill?: boolean;
     /** 是否描边 */
     stroke?: boolean;
+    /** 是否忽略打字机，直接显伤全部 */
+    showAll?: boolean;
 }
 
 export type TextContentEmits = {
@@ -43,18 +43,6 @@ export type TextContentEmits = {
     typeStart: () => void;
 };
 
-export interface TextContentExpose {
-    /**
-     * 重新开始打字
-     */
-    retype(): void;
-
-    /**
-     * 立刻显示所有文字
-     */
-    showAll(): void;
-}
-
 const textContentOptions = {
     props: [
         'breakChars',
@@ -62,6 +50,7 @@ const textContentOptions = {
         'fontSize',
         'fontWeight',
         'fontItalic',
+        'height',
         'ignoreLineEnd',
         'ignoreLineStart',
         'interval',
@@ -69,14 +58,17 @@ const textContentOptions = {
         'lineHeight',
         'text',
         'textAlign',
+        'width',
         'wordBreak',
+        'x',
+        'y',
         'fill',
         'fillStyle',
         'strokeStyle',
         'strokeWidth',
         'stroke',
-        'loc',
+        'showAll',
-        'width'
+        'loc'
     ],
     emits: ['typeEnd', 'typeStart']
 } satisfies SetupComponentOptions<
@@ -89,72 +81,69 @@ export const TextContent = defineComponent<
     TextContentProps,
     TextContentEmits,
     keyof TextContentEmits
->((props, { emit, expose }) => {
+>((props, { emit }) => {
-    const width = computed(() => props.width ?? props.loc?.[2] ?? 200);
+    if (props.width && props.width <= 0) {
-    if (width.value < 0) {
         logger.warn(41, String(props.width));
     }
 
     const typer = new TextContentTyper(props);
     let renderable: TyperRenderable[] = [];
     let needUpdate = false;
+    let nowText = '';
+
+    watch(props, value => {
+        typer.setConfig(value);
+    });
 
     const retype = () => {
+        if (props.showAll) {
+            typer.typeAll();
+        }
+        if (props.text === nowText) return;
         if (needUpdate) return;
         needUpdate = true;
         if (!spriteElement.value) {
             needUpdate = false;
         }
+        nowText = props.text ?? '';
         renderable = [];
 
         spriteElement.value?.requestBeforeFrame(() => {
             typer.setConfig(props);
             typer.setText(props.text ?? '');
             typer.type();
+            if (props.showAll) {
+                typer.typeAll();
+            }
             needUpdate = false;
         });
     };
 
-    const showAll = () => {
+    onUpdated(retype);
-        typer.typeAll();
-    };
-
-    watch(props, value => {
-        typer.setConfig(value);
-        retype();
-    });
-
-    expose({ retype, showAll });
 
     const spriteElement = shallowRef<Sprite>();
     const renderContent = (canvas: MotaOffscreenCanvas2D) => {
         const ctx = canvas.ctx;
         ctx.textBaseline = 'top';
         renderable.forEach(v => {
-            switch (v.type) {
+            if (v.type === TextContentType.Text) {
-                case TextContentType.Text: {
+                ctx.fillStyle = v.fillStyle;
-                    if (v.text.length === 0) return;
+                ctx.strokeStyle = v.strokeStyle;
-                    ctx.fillStyle = v.fillStyle;
+                ctx.font = v.font;
-                    ctx.strokeStyle = v.strokeStyle;
+                const text = v.text.slice(0, v.pointer);
-                    ctx.font = v.font;
-                    const text = v.text.slice(0, v.pointer);
 
-                    if (props.fill ?? true) {
+                if (props.fill ?? true) {
-                        ctx.fillText(text, v.x, v.y);
+                    ctx.fillText(text, v.x, v.y);
-                    }
-                    if (props.stroke) {
-                        ctx.strokeText(text, v.x, v.y);
-                    }
-                    break;
                 }
-                case TextContentType.Icon: {
+                if (props.stroke) {
-                    const { renderable: r, x: dx, y: dy, width, height } = v;
+                    ctx.strokeText(text, v.x, v.y);
-                    const render = r.render;
-                    const [x, y, w, h] = render[0];
-                    const icon = r.autotile ? r.image[0] : r.image;
-                    ctx.drawImage(icon, x, y, w, h, dx, dy, width, height);
-                    break;
                 }
+            } else {
+                const r = v.renderable;
+                const render = r.render;
+                const [x, y, w, h] = render[0];
+                const icon = r.autotile ? r.image[0] : r.image;
+                ctx.drawImage(icon, x, y, w, h, v.x, v.y, v.width, v.height);
             }
         });
     };
@@ -175,15 +164,19 @@ export const TextContent = defineComponent<
     return () => {
         return (
             <sprite
-                loc={props.loc}
+                {...props}
                 ref={spriteElement}
+                x={props.x}
+                y={props.y}
+                width={props.width}
+                height={props.height}
                 render={renderContent}
             ></sprite>
         );
     };
 }, textContentOptions);
 
-export interface TextboxProps extends TextContentProps, DefaultProps {
+export interface TextboxProps extends TextContentProps, ContainerProps {
     /** 背景颜色 */
     backColor?: CanvasStyle;
     /** 背景 winskin */
@@ -202,28 +195,6 @@ export interface TextboxProps extends TextContentProps, DefaultProps {
     titlePadding?: number;
 }
 
-export interface TextboxExpose {
-    /**
-     * 显示这个文本框
-     */
-    show(): void;
-
-    /**
-     * 隐藏这个文本框
-     */
-    hide(): void;
-
-    /**
-     * 重新开始打字
-     */
-    retype(): void;
-
-    /**
-     * 立刻显示所有文字
-     */
-    showAll(): void;
-}
-
 type TextboxEmits = TextContentEmits;
 type TextboxSlots = SlotsType<{
     default: (data: TextboxProps) => VNode[];
@@ -234,14 +205,23 @@ const textboxOptions = {
     props: (textContentOptions.props as (keyof TextboxProps)[]).concat([
         'backColor',
         'winskin',
+        'id',
         'padding',
+        'alpha',
+        'hidden',
+        'anchorX',
+        'anchorY',
+        'anti',
+        'cache',
+        'composite',
+        'fall',
+        'hd',
+        'transform',
+        'type',
+        'zIndex',
         'titleFill',
         'titleStroke',
-        'titleFont',
+        'titleFont'
-        'titlePadding',
-        'id',
-        'hidden',
-        'title'
     ]),
     emits: textContentOptions.emits
 } satisfies SetupComponentOptions<TextboxProps, {}, string, TextboxSlots>;
@@ -256,206 +236,153 @@ export const Textbox = defineComponent<
     TextboxEmits,
     keyof TextboxEmits,
     TextboxSlots
->((props, { slots, expose }) => {
+>((props, { slots }) => {
-    const contentData = shallowReactive<TextContentProps>({});
+    const data = shallowReactive({ ...props });
-    const data = shallowReactive<TextboxProps>({});
+    data.padding ??= 8;
-
+    data.width ??= 200;
-    const setContentData = () => {
+    data.height ??= 200;
-        contentData.breakChars = props.breakChars ?? '';
+    data.id ??= '';
-        contentData.fontFamily = props.fontFamily ?? 'Verdana';
+    data.alpha ??= 1;
-        contentData.fontSize = props.fontSize ?? 16;
+    data.titleFill ??= '#000';
-        contentData.fontWeight = props.fontWeight ?? 500;
+    data.titleStroke ??= 'transparent';
-        contentData.fontItalic = props.fontItalic ?? false;
+    data.titleFont ??= '16px Verdana';
-        contentData.ignoreLineEnd = props.ignoreLineEnd ?? '';
+    data.titlePadding ??= 4;
-        contentData.ignoreLineStart = props.ignoreLineStart ?? '';
-        contentData.interval = props.interval ?? 0;
-        contentData.keepLast = props.keepLast ?? false;
-        contentData.lineHeight = props.lineHeight ?? 0;
-        contentData.text = props.text ?? '';
-        contentData.textAlign = props.textAlign ?? TextAlign.Left;
-        contentData.wordBreak = props.wordBreak ?? WordBreak.Space;
-        contentData.fill = props.fill ?? true;
-        contentData.stroke = props.stroke ?? false;
-        contentData.fillStyle = props.fillStyle ?? '#fff';
-        contentData.strokeStyle = props.strokeStyle ?? '#000';
-        contentData.strokeWidth = props.strokeWidth ?? 2;
-        contentData.loc = props.loc;
-        contentData.width = props.width;
-    };
-
-    const setTextboxData = () => {
-        data.backColor = props.backColor ?? '#222';
-        data.winskin = props.winskin;
-        data.padding = props.padding ?? 8;
-        data.titleFill = props.titleFill ?? 'gold';
-        data.titleStroke = props.titleStroke ?? 'transparent';
-        data.titleFont = props.titleFont ?? '18px Verdana';
-        data.titlePadding = props.titlePadding ?? 8;
-        data.width = props.width ?? props.loc?.[2] ?? 200;
-        data.height = props.height ?? props.loc?.[3] ?? 200;
-        data.title = props.title ?? '';
-    };
-
-    setContentData();
-    setTextboxData();
-
-    watch(props, () => {
-        const needUpdateTitle = data.title !== props.title;
-        setTextboxData();
-        if (needUpdateTitle) {
-            onSetText();
-        }
-    });
 
     const titleElement = ref<Text>();
-    const content = ref<TextContentExpose>();
+    const titleWidth = ref(data.titlePadding * 2);
-    const hidden = ref(props.hidden);
+    const titleHeight = ref(data.titlePadding * 2);
-    /** 标题宽度 */
-    const tw = ref(data.titlePadding! * 2);
-    /** 标题高度 */
-    const th = ref(data.titlePadding! * 2);
     const contentY = computed(() => {
-        const height = th.value;
+        const height = titleHeight.value;
         return data.title ? height : 0;
     });
-    const backHeight = computed(() => data.height! - contentY.value);
     const contentWidth = computed(() => data.width! - data.padding! * 2);
     const contentHeight = computed(
         () => data.height! - data.padding! * 2 - contentY.value
     );
 
-    const onSetText = () => {
+    const calTitleSize = (text: string) => {
-        nextTick(() => {
+        if (!titleElement.value) return;
-            titleElement.value?.requestBeforeFrame(() => {
+        const { width, height } = titleElement.value;
-                if (titleElement.value) {
+        titleWidth.value = width + data.titlePadding! * 2;
-                    const { width, height } = titleElement.value;
+        titleHeight.value = height + data.titlePadding! * 2;
-                    tw.value = width + data.padding! * 2;
+        data.title = text;
-                    th.value = height + data.padding! * 2;
-                }
-            });
-        });
     };
 
+    watch(titleElement, (value, old) => {
+        old?.off('setText', calTitleSize);
+        value?.on('setText', calTitleSize);
+        if (value) calTitleSize(value?.text);
+    });
+
+    onUnmounted(() => {
+        titleElement.value?.off('setText', calTitleSize);
+    });
+
     // ----- store
 
     /** 结束打字机 */
     const storeEmits: TextboxStoreEmits = {
         endType() {
-            content.value?.showAll();
+            data.showAll = true;
-        },
-        hide() {
-            hidden.value = true;
-        },
-        show() {
-            hidden.value = false;
-        },
-        update(value) {
-            if (data.title !== value.title) {
-                data.title = value.title;
-                onSetText();
-            }
-        },
-        setText(text) {
-            if (contentData.text === text) {
-                content.value?.retype();
-            } else {
-                contentData.text = text;
-            }
         }
     };
 
     const store = TextboxStore.use(
         props.id ?? getNextTextboxId(),
-        contentData,
+        data,
         storeEmits
     );
+    const hidden = ref(data.hidden);
+    store.on('hide', () => (hidden.value = true));
+    store.on('show', () => (hidden.value = false));
+    store.on('update', value => {
+        if (value.title) {
+            titleElement.value?.requestBeforeFrame(() => {
+                const { width, height } = titleElement.value!;
+                titleWidth.value = width + data.padding! * 2;
+                titleHeight.value = height + data.padding! * 2;
+            });
+        }
+    });
 
     const onTypeStart = () => {
         store.emitTypeStart();
     };
 
     const onTypeEnd = () => {
+        data.showAll = false;
         store.emitTypeEnd();
     };
 
-    expose<TextboxExpose>({
+    return () => {
-        show() {
+        return (
-            hidden.value = false;
+            <container {...data} hidden={hidden.value} alpha={data.alpha}>
-        },
+                {data.title ? (
-        hide() {
+                    <container
-            hidden.value = true;
+                        zIndex={10}
-        },
+                        width={titleWidth.value}
-        retype() {
+                        height={titleHeight.value}
-            content.value?.retype();
+                    >
-        },
+                        {slots.title ? (
-        showAll() {
+                            slots.title(data)
-            content.value?.showAll();
+                        ) : props.winskin ? (
-        }
+                            <winskin image={props.winskin}></winskin>
-    });
+                        ) : (
-
+                            <g-rect
-    return () => (
+                                x={0}
-        <container
+                                y={0}
-            id={props.id}
+                                width={titleWidth.value}
-            hidden={hidden.value}
+                                height={titleHeight.value}
-            alpha={data.alpha}
+                                fillStyle={data.backColor}
-            loc={props.loc}
+                            ></g-rect>
-        >
+                        )}
-            {data.title && (
+                        <text
-                <container zIndex={10} loc={[0, 0, tw.value, th.value]}>
+                            ref={titleElement}
-                    {slots.title ? (
+                            text={data.title}
-                        slots.title(data)
+                            x={data.titlePadding}
-                    ) : props.winskin ? (
+                            y={data.titlePadding}
-                        <winskin
+                            fillStyle={data.titleFill}
-                            image={props.winskin}
+                            strokeStyle={data.titleStroke}
-                            loc={[0, 0, tw.value, th.value]}
+                            font={data.titleFont}
-                        ></winskin>
+                        ></text>
-                    ) : (
+                    </container>
-                        <g-rect loc={[0, 0, tw.value, th.value]}></g-rect>
+                ) : (
-                    )}
+                    ''
-                    <text
+                )}
-                        ref={titleElement}
+                {slots.default ? (
-                        text={data.title}
+                    slots.default(data)
-                        loc={[data.titlePadding, data.titlePadding]}
+                ) : props.winskin ? (
-                        fillStyle={data.titleFill}
+                    <winskin image={props.winskin}></winskin>
-                        strokeStyle={data.titleStroke}
+                ) : (
-                        font={data.titleFont}
+                    <g-rect
-                    ></text>
+                        x={0}
-                </container>
+                        y={contentY.value}
-            )}
+                        width={data.width ?? 200}
-            {slots.default ? (
+                        height={(data.height ?? 200) - contentY.value}
-                slots.default(data)
+                        fill
-            ) : props.winskin ? (
+                        fillStyle={data.backColor}
-                <winskin
+                    ></g-rect>
-                    image={props.winskin}
+                )}
-                    loc={[0, contentY.value, data.width!, backHeight.value]}
+                <TextContent
-                ></winskin>
+                    {...data}
-            ) : (
+                    id=""
-                <g-rect
+                    hidden={false}
-                    loc={[0, contentY.value, data.width!, backHeight.value]}
+                    x={data.padding!}
-                    fill
+                    y={contentY.value + data.padding!}
-                    fillStyle={data.backColor}
+                    width={contentWidth.value}
-                ></g-rect>
+                    height={contentHeight.value}
-            )}
+                    onTypeEnd={onTypeEnd}
-            <TextContent
+                    onTypeStart={onTypeStart}
-                {...contentData}
+                    zIndex={0}
-                ref={content}
+                    showAll={data.showAll}
-                x={data.padding!}
+                ></TextContent>
-                y={contentY.value + data.padding!}
+            </container>
-                width={contentWidth.value}
+        );
-                height={contentHeight.value}
+    };
-                onTypeEnd={onTypeEnd}
-                onTypeStart={onTypeStart}
-            ></TextContent>
-        </container>
-    );
 }, textboxOptions);
 
 interface TextboxStoreEmits {
     endType: () => void;
-    hide: () => void;
-    show: () => void;
-    update: (value: TextboxProps) => void;
-    setText: (text: string) => void;
 }
 
 interface TextboxStoreEvent {
@@ -509,30 +436,21 @@ export class TextboxStore extends EventEmitter<TextboxStoreEvent> {
             // @ts-expect-error 无法推导
             if (!isNil(value)) this.data[key] = value;
         }
-        this.emits.update(this.data);
         this.emit('update', this.data);
     }
 
-    /**
-     * 设置显示的文本
-     * @param text 要显示的文本
-     */
-    setText(text: string) {
-        this.emits.setText(text);
-    }
-
     /**
      * 显示文本框
      */
     show() {
-        this.emits.show();
+        this.emit('show');
     }
 
     /**
      * 隐藏文本框
      */
     hide() {
-        this.emits.hide();
+        this.emit('hide');
     }
 
     /**

src/module/render/components/textboxTyper.ts

@@ -135,16 +135,7 @@ export interface TyperIconRenderable {
     renderable: RenderableData | AutotileRenderable;
 }
 
-export interface TyperWaitRenderable {
+export type TyperRenderable = TyperTextRenderable | TyperIconRenderable;
-    type: TextContentType.Wait;
-    wait: number;
-    waited: number;
-}
-
-export type TyperRenderable =
-    | TyperTextRenderable
-    | TyperIconRenderable
-    | TyperWaitRenderable;
 
 interface TextContentTyperEvent {
     typeStart: [];
@@ -280,64 +271,49 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
     private createTyperData(index: number, line: number) {
         const renderable = this.renderObject.data[index];
         if (!renderable) return false;
-        switch (renderable.type) {
+        if (renderable.type === TextContentType.Text) {
-            case TextContentType.Text: {
+            if (line < 0 || line > renderable.splitLines.length) {
-                if (line < 0 || line > renderable.splitLines.length) {
+                return false;
-                    return false;
-                }
-                const start = renderable.splitLines[line - 1] ?? -1;
-                const end =
-                    renderable.splitLines[line] ?? renderable.text.length - 1;
-
-                const data: TyperTextRenderable = {
-                    type: TextContentType.Text,
-                    x: this.x,
-                    y: this.y,
-                    text: renderable.text.slice(start + 1, end + 1),
-                    font: renderable.font,
-                    fillStyle: renderable.fillStyle,
-                    strokeStyle: this.config.strokeStyle,
-                    pointer: 0
-                };
-                this.processingData = data;
-                this.renderData.push(data);
-                return true;
             }
-            case TextContentType.Icon: {
+            const start = renderable.splitLines[line - 1] ?? 0;
-                const tex = texture.getRenderable(renderable.icon!);
+            const end = renderable.splitLines[line] ?? renderable.text.length;
-                if (!tex) return false;
+            const data: TyperTextRenderable = {
-                const { render } = tex;
+                type: TextContentType.Text,
-                const [, , width, height] = render[0];
+                x: this.x,
-                const aspect = width / height;
+                y: this.y,
-                let iconWidth = 0;
+                text: renderable.text.slice(start, end),
-                if (aspect < 1) {
+                font: renderable.font,
-                    // 这时候应该把高度限定在当前字体大小
+                fillStyle: renderable.fillStyle,
-                    iconWidth = width * (renderable.fontSize / height);
+                strokeStyle: this.config.strokeStyle,
-                } else {
+                pointer: 0
-                    iconWidth = renderable.fontSize;
+            };
-                }
+            this.processingData = data;
-                const data: TyperIconRenderable = {
+            this.renderData.push(data);
-                    type: TextContentType.Icon,
+            return true;
-                    x: this.x,
+        } else {
-                    y: this.y,
+            const tex = texture.getRenderable(renderable.icon!);
-                    width: iconWidth,
+            if (!tex) return false;
-                    height: iconWidth / aspect,
+            const { render } = tex;
-                    renderable: tex
+            const [, , width, height] = render[0];
-                };
+            const aspect = width / height;
-                this.processingData = data;
+            let iconWidth = 0;
-                this.renderData.push(data);
+            if (aspect < 1) {
-                return true;
+                // 这时候应该把高度限定在当前字体大小
-            }
+                iconWidth = width * (renderable.fontSize / height);
-            case TextContentType.Wait: {
+            } else {
-                const data: TyperWaitRenderable = {
+                iconWidth = renderable.fontSize;
-                    type: TextContentType.Wait,
-                    wait: renderable.wait!,
-                    waited: 0
-                };
-                this.processingData = data;
-                this.renderData.push(data);
-                return true;
             }
+            const data: TyperIconRenderable = {
+                type: TextContentType.Icon,
+                x: this.x,
+                y: this.y,
+                width: iconWidth,
+                height: iconWidth / aspect,
+                renderable: tex
+            };
+            this.processingData = data;
+            this.renderData.push(data);
+            return true;
         }
     }
 
@@ -363,64 +339,62 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
                 return true;
             }
             const lineHeight = this.renderObject.lineHeights[this.nowLine];
-            switch (now.type) {
+            if (now.type === TextContentType.Text) {
-                case TextContentType.Text: {
+                const restChars = now.text.length - now.pointer;
-                    const restChars = now.text.length - now.pointer;
+                if (restChars <= rest) {
-                    if (restChars <= rest) {
+                    // 当前这段 renderable 打字完成后，刚好结束或还有内容
-                        // 当前这段 renderable 打字完成后，刚好结束或还有内容
+                    rest -= restChars;
-                        rest -= restChars;
+                    now.pointer = now.text.length;
-                        now.pointer = now.text.length;
+                    if (this.dataLine === renderable.splitLines.length) {
-                        if (this.dataLine === renderable.splitLines.length) {
+                        // 如果是最后一行
-                            // 如果是最后一行
+                        if (isNil(renderable.lastLineWidth)) {
-                            if (isNil(renderable.lastLineWidth)) {
+                            const ctx = this.parser.testCanvas.ctx;
-                                const ctx = this.parser.testCanvas.ctx;
+                            ctx.font = now.font;
-                                ctx.font = now.font;
+                            const metrics = ctx.measureText(now.text);
-                                const metrics = ctx.measureText(now.text);
+                            renderable.lastLineWidth = metrics.width;
-                                renderable.lastLineWidth = metrics.width;
-                            }
-                            this.x += renderable.lastLineWidth;
-                            this.dataLine = 0;
-                            this.pointer++;
-                        } else {
-                            // 不是最后一行，那么换行
-                            this.x = 0;
-                            this.y += lineHeight + this.config.lineHeight;
-                            this.dataLine++;
-                            this.nowLine++;
                         }
+                        this.x += renderable.lastLineWidth;
+                        this.dataLine = 0;
+                        this.pointer++;
+                        const success = this.createTyperData(
+                            this.pointer,
+                            this.dataLine
+                        );
+                        if (!success) return true;
                     } else {
-                        now.pointer += rest;
+                        // 不是最后一行，那么换行
-                        return false;
-                    }
-                    break;
-                }
-                case TextContentType.Icon: {
-                    rest--;
-                    this.pointer++;
-                    if (renderable.splitLines[0] === 0) {
-                        // 如果图标换行
                         this.x = 0;
                         this.y += lineHeight + this.config.lineHeight;
+                        this.dataLine++;
                         this.nowLine++;
-                        this.dataLine = 0;
+                        const success = this.createTyperData(
-                        now.x = 0;
+                            this.pointer,
-                        now.y = this.y;
+                            this.dataLine
-                    } else {
+                        );
-                        this.x += now.width;
+                        if (!success) return true;
                     }
-                    break;
+                } else {
+                    now.pointer += rest;
+                    return false;
                 }
-                case TextContentType.Wait: {
+            } else {
-                    now.waited += num;
+                rest--;
-                    if (now.waited > now.wait) {
+                this.pointer++;
-                        // 等待结束
+                if (renderable.splitLines[0] === 0) {
-                        this.pointer++;
+                    // 如果图标换行
-                    }
+                    this.x = 0;
-                    break;
+                    this.y += lineHeight + this.config.lineHeight;
+                    this.nowLine++;
+                    this.dataLine = 0;
+                    now.x = 0;
+                    now.y = this.y;
                 }
+                const success = this.createTyperData(
+                    this.pointer,
+                    this.dataLine
+                );
+                if (!success) return true;
             }
-            const success = this.createTyperData(this.pointer, this.dataLine);
-            if (!success) return true;
         }
         return false;
     }
@@ -448,7 +422,6 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
      * 开始打字
      */
     type() {
-        if (this.typing) return;
         if (this.config.interval === 0) {
             this.emit('typeStart');
             this.typeChars(Infinity);
@@ -465,7 +438,6 @@ export class TextContentTyper extends EventEmitter<TextContentTyperEvent> {
      * 立即显示所有文字
      */
     typeAll() {
-        if (!this.typing) return;
         this.typeChars(Infinity);
         this.render?.(this.renderData, false);
     }
@@ -589,7 +561,7 @@ export class TextContentParser {
         const end = this.indexParam(start);
         if (end === -1) {
             // 标签结束
-            return ['', start - 1];
+            return ['', start];
         } else {
             // 标签开始
             return [this.text.slice(start + 1, end), end];
@@ -660,43 +632,43 @@ export class TextContentParser {
     }
 
     private parseFillStyle(pointer: number) {
-        const [param, end] = this.getChildableTagParam(pointer + 2);
+        const [param, end] = this.getChildableTagParam(pointer + 1);
         if (!param) {
             // 参数为空或没有参数，视为标签结束
             const color = this.fillStyleStack.pop();
             if (!color) {
                 logger.warn(54, '\\r', pointer.toString());
-                return end;
+                return pointer;
             }
-            if (this.resolved.length > 0) this.addTextRenderable();
+            this.addTextRenderable();
             this.status.fillStyle = color;
-            return end;
+            return pointer;
         } else {
             // 标签开始
             this.fillStyleStack.push(this.status.fillStyle);
-            if (this.resolved.length > 0) this.addTextRenderable();
+            this.addTextRenderable();
             this.status.fillStyle = param;
             return end;
         }
     }
 
     private parseFontSize(pointer: number) {
-        const [param, end] = this.getChildableTagParam(pointer + 2);
+        const [param, end] = this.getChildableTagParam(pointer + 1);
         if (!param) {
             // 参数为空或没有参数，视为标签结束
             const size = this.fontSizeStack.pop();
             if (!size) {
                 logger.warn(54, '\\c', pointer.toString());
-                return end;
+                return pointer;
             }
-            if (this.resolved.length > 0) this.addTextRenderable();
+            this.addTextRenderable();
             this.status.fontSize = size;
             this.font = this.buildFont();
-            return end;
+            return pointer;
         } else {
             // 标签开始
             this.fontSizeStack.push(this.status.fontSize);
-            if (this.resolved.length > 0) this.addTextRenderable();
+            this.addTextRenderable();
             this.status.fontSize = parseFloat(param);
             this.font = this.buildFont();
             return end;
@@ -704,22 +676,22 @@ export class TextContentParser {
     }
 
     private parseFontFamily(pointer: number) {
-        const [param, end] = this.getChildableTagParam(pointer + 2);
+        const [param, end] = this.getChildableTagParam(pointer + 1);
         if (!param) {
             // 参数为空或没有参数，视为标签结束
             const font = this.fontFamilyStack.pop();
             if (!font) {
                 logger.warn(54, '\\g', pointer.toString());
-                return end;
+                return pointer;
             }
-            if (this.resolved.length > 0) this.addTextRenderable();
+            this.addTextRenderable();
             this.status.fontFamily = font;
             this.font = this.buildFont();
-            return end;
+            return pointer;
         } else {
             // 标签开始
             this.fontFamilyStack.push(this.status.fontFamily);
-            if (this.resolved.length > 0) this.addTextRenderable();
+            this.addTextRenderable();
             this.status.fontFamily = param;
             this.font = this.buildFont();
             return end;
@@ -727,20 +699,20 @@ export class TextContentParser {
     }
 
     private parseFontWeight() {
-        if (this.resolved.length > 0) this.addTextRenderable();
+        this.addTextRenderable();
         this.status.fontWeight = this.status.fontWeight > 500 ? 500 : 700;
         this.font = this.buildFont();
     }
 
     private parseFontItalic() {
-        if (this.resolved.length > 0) this.addTextRenderable();
+        this.addTextRenderable();
         this.status.fontItalic = !this.status.fontItalic;
         this.font = this.buildFont();
     }
 
     private parseWait(pointer: number) {
-        if (this.resolved.length > 0) this.addTextRenderable();
+        this.addTextRenderable();
-        const [param, end] = this.getTagParam(pointer + 2);
+        const [param, end] = this.getTagParam(pointer);
         if (!param) {
             logger.warn(55, '\\z');
             return pointer;
@@ -751,10 +723,10 @@ export class TextContentParser {
     }
 
     private parseIcon(pointer: number) {
-        if (this.resolved.length > 0) this.addTextRenderable();
+        this.addTextRenderable();
-        const [param, end] = this.getTagParam(pointer + 2);
+        const [param, end] = this.getTagParam(pointer);
         if (!param) {
-            logger.warn(55, '\\i');
+            logger.warn(55, '\\z');
             return pointer;
         }
         if (/^\d+$/.test(param)) {
@@ -767,10 +739,6 @@ export class TextContentParser {
                 this.addIconRenderable(num as AllNumbers);
             } else {
                 const num = texture.idNumberMap[param as AllIds];
-                if (num === void 0) {
-                    logger.warn(59, param);
-                    return end;
-                }
                 this.addIconRenderable(num);
             }
         }
@@ -874,11 +842,9 @@ export class TextContentParser {
                         break;
                     case 'd':
                         this.parseFontWeight();
-                        pointer++;
                         break;
                     case 'e':
                         this.parseFontItalic();
-                        pointer++;
                         break;
                     case 'z':
                         pointer = this.parseWait(pointer);
@@ -895,7 +861,7 @@ export class TextContentParser {
                 // 表达式
                 pointer++;
                 inExpression = true;
-                expStart = pointer + 1;
+                expStart = pointer;
                 continue;
             }
 
@@ -909,8 +875,7 @@ export class TextContentParser {
 
     private getHeight(metrics: TextMetrics) {
         return (
-            Math.abs(metrics.actualBoundingBoxAscent) +
+            metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
-            Math.abs(metrics.actualBoundingBoxDescent)
         );
     }
 
@@ -934,14 +899,10 @@ export class TextContentParser {
         // 如果大于猜测，那么算长度
         const data = this.renderable[this.nowRenderable];
         const ctx = this.testCanvas.ctx;
-        ctx.font = data.font;
+        ctx.font = this.font;
         const metrics = ctx.measureText(
             data.text.slice(this.lineStart, pointer + 1)
         );
-        const height = this.getHeight(metrics);
-        if (height > this.lineHeight) {
-            this.lineHeight = height;
-        }
         if (metrics.width < rest) {
             // 实际宽度小于剩余宽度时，将猜测增益乘以剩余总宽度与当前宽度的比值的若干倍
             this.guessGain *= (rest / metrics.width) * (1.1 + 1 / length);
@@ -986,7 +947,7 @@ export class TextContentParser {
         const data = this.renderable[index];
         const { wordBreak } = data;
         const ctx = this.testCanvas.ctx;
-        ctx.font = data.font;
+        ctx.font = this.font;
         while (true) {
             const mid = Math.floor((start + end) / 2);
             if (mid === start) {
@@ -997,33 +958,31 @@ export class TextContentParser {
             }
             const text = data.text.slice(
                 wordBreak[this.bsStart],
-                wordBreak[mid] + 1
+                wordBreak[mid]
             );
             const metrics = ctx.measureText(text);
-            height = this.getHeight(metrics);
             if (metrics.width > width) {
                 end = mid;
             } else if (metrics.width === width) {
-                if (height > this.lineHeight) {
-                    this.lineHeight = height;
-                }
                 return mid;
             } else {
                 start = mid;
             }
+            height = this.getHeight(metrics);
         }
     }
 
     /**
      * 检查剩余字符能否分行
      */
-    private checkRestLine(width: number, guess: number, pointer: number) {
+    private checkRestLine(width: number, guess: number) {
         if (this.wordBreak.length === 0) return true;
-        if (pointer === -1) {
+        const last = this.nowRenderable - 1;
-            return this.checkLineWidth(width, guess, 0);
+        if (last === -1) {
+            const now = this.renderable[this.nowRenderable];
+            return this.checkLineWidth(width, guess, now.text.length);
         }
-        const isLast = this.renderable.length - 1 === pointer;
+        const data = this.renderable[last];
-        const data = this.renderable[pointer];
         const rest = width - this.lineWidth;
         if (data.type === TextContentType.Text) {
             const wordBreak = data.wordBreak;
@@ -1031,7 +990,7 @@ export class TextContentParser {
             const lastIndex = isNil(lastLine) ? 0 : lastLine;
             const restText = data.text.slice(lastIndex);
             const ctx = this.testCanvas.ctx;
-            ctx.font = data.font;
+            ctx.font = this.font;
             const metrics = ctx.measureText(restText);
             // 如果剩余内容不能构成完整的行
             if (metrics.width < rest) {
@@ -1049,12 +1008,12 @@ export class TextContentParser {
                 this.bsEnd = lastBreak;
                 let maxWidth = rest;
                 while (true) {
-                    const index = this.bsLineWidth(maxWidth, pointer);
+                    const index = this.bsLineWidth(maxWidth, last);
                     data.splitLines.push(this.wordBreak[index]);
                     this.lineHeights.push(this.lineHeight);
                     this.bsStart = index;
                     const text = data.text.slice(this.wordBreak[index]);
-                    if (!isLast && text.length < guess / 4) {
+                    if (text.length < guess / 4) {
                         // 如果剩余文字很少，几乎不可能会单独成一行时，直接结束循环
                         this.lastBreakIndex = index;
                         break;
@@ -1081,15 +1040,9 @@ export class TextContentParser {
             } else {
                 iconWidth = this.status.fontSize;
             }
-            this.lineWidth += iconWidth;
-            const iconHeight = iconWidth / aspect;
-            if (iconHeight > this.lineHeight) {
-                this.lineHeight = iconHeight;
-            }
             if (iconWidth > rest) {
                 data.splitLines.push(0);
                 this.lineHeights.push(this.lineHeight);
-                this.lineWidth = 0;
                 return true;
             } else {
                 return false;
@@ -1117,6 +1070,8 @@ export class TextContentParser {
 
         const allBreak = this.wordBreakRule === WordBreak.All;
 
+        // debugger;
+
         for (let i = 0; i < this.renderable.length; i++) {
             const data = this.renderable[i];
             const { wordBreak, fontSize } = data;
@@ -1125,7 +1080,7 @@ export class TextContentParser {
             this.wordBreak = wordBreak;
 
             if (data.type === TextContentType.Icon) {
-                this.checkRestLine(width, guess, i - 1);
+                this.checkRestLine(width, guess);
                 continue;
             } else if (data.type === TextContentType.Wait) {
                 continue;
@@ -1167,7 +1122,7 @@ export class TextContentParser {
                 }
             }
 
-            this.checkRestLine(width, guess, i);
+            this.checkRestLine(width, guess);
         }
 
         return {

src/module/render/index.tsx

@@ -4,7 +4,6 @@ import { defineComponent } from 'vue';
 import { UIController } from '@/core/system';
 import { mainSceneUI } from './ui/main';
 import { MAIN_HEIGHT, MAIN_WIDTH } from './shared';
-import { TextboxStore } from './components';
 
 export function create() {
     const main = new MotaRenderer();
@@ -35,10 +34,6 @@ export function create() {
     console.log(main);
 }
 
-Mota.register('module', 'MainUI', {
-    TextboxStore
-});
-
 export * from './components';
 export * from './ui';
 export * from './use';

src/module/render/ui/main.tsx

@@ -57,7 +57,9 @@ const MainScene = defineComponent(() => {
     const mainTextboxProps: Props<typeof Textbox> = {
         text: '',
         hidden: true,
-        loc: [0, 330, 480, 150],
+        width: 480,
+        height: 150,
+        y: 330,
         zIndex: 30,
         fillStyle: '#fff',
         titleFill: 'gold',
@@ -65,7 +67,7 @@ const MainScene = defineComponent(() => {
         titleFont: '700 20px normal',
         winskin: 'winskin2.png',
         interval: 100,
-        lineHeight: 4
+        lineHeight: 6
     };
 
     const map = ref<LayerGroup>();