@kurot/core 1.0.12

package/dist/kurot/text/TextField.js

@@ -0,0 +1,734 @@
+import { DisplayObject } from '../display/DisplayObject.js';
+import { TouchEvent } from '../events/TouchEvent.js';
+import { TextEvent } from '../events/TextEvent.js';
+import { measureText, getFontString } from './TextMeasurer.js';
+import { HorizontalAlign } from './enums/HorizontalAlign.js';
+import { VerticalAlign } from './enums/VerticalAlign.js';
+import { TextFieldType } from './enums/TextFieldType.js';
+import { TextFieldInputType } from './enums/TextFieldInputType.js';
+import { InputController } from './InputController.js';
+import { tokenize, splitGraphemes } from './WordWrap.js';
+/**
+ * TextField displays text content. Supports single-line, multi-line, word wrap,
+ * rich text (textFlow), input mode, and basic styling.
+ *
+ * Simplified from Egret's TextField — uses normal properties instead of the
+ * internal $TextField array-based storage.
+ */
+export class TextField extends DisplayObject {
+    // ── Static fields ─────────────────────────────────────────────────────────
+    static default_fontFamily = 'Arial';
+    static default_size = 30;
+    static default_textColor = 0xffffff;
+    // ── Instance fields ───────────────────────────────────────────────────────
+    _fontFamily = TextField.default_fontFamily;
+    _fontSize = TextField.default_size;
+    _bold = false;
+    _italic = false;
+    _textAlign = HorizontalAlign.LEFT;
+    _verticalAlign = VerticalAlign.TOP;
+    _textColor = TextField.default_textColor;
+    _strokeColor = 0x000000;
+    _stroke = 0;
+    _lineSpacing = 0;
+    _wordWrap = false;
+    _multiline = false;
+    _type = TextFieldType.DYNAMIC;
+    _inputType = TextFieldInputType.TEXT;
+    _text = '';
+    _displayAsPassword = false;
+    _maxChars = 0;
+    _scrollV = 1;
+    _restrict;
+    _restrictAnd;
+    _restrictNot;
+    _border = false;
+    _borderColor = 0x000000;
+    _background = false;
+    _backgroundColor = 0xffffff;
+    _textFlow;
+    _textWidth = 0;
+    _textHeight = 0;
+    _numLines = 0;
+    _linesArr;
+    _textDirty = true;
+    _fontString = '';
+    _selectionAnchor = 0;
+    _selectionActive = 0;
+    _isTyping = false;
+    _inputController;
+    // ── Constructor ───────────────────────────────────────────────────────────
+    constructor() {
+        super();
+        this.$renderObjectType = 5 /* RenderObjectType.TEXT */;
+        this.invalidateFontString();
+    }
+    // Width/Height affect line-breaking, so invalidate text when they change.
+    // NOTE: override both getter AND setter — overriding only the setter in JS
+    // shadows the parent's getter, causing `tf.height` to return `undefined`.
+    get width() {
+        return isNaN(this.$explicitWidth) ? this.$getOriginalBounds().width : this.$explicitWidth;
+    }
+    set width(value) {
+        const v = isNaN(value) ? NaN : value;
+        if (this.$explicitWidth === v)
+            return;
+        this.$explicitWidth = v;
+        this.invalidateText();
+    }
+    get height() {
+        return isNaN(this.$explicitHeight) ? this.$getOriginalBounds().height : this.$explicitHeight;
+    }
+    set height(value) {
+        const v = isNaN(value) ? NaN : value;
+        if (this.$explicitHeight === v)
+            return;
+        this.$explicitHeight = v;
+        this.invalidateText();
+    }
+    // ── Getters / Setters ─────────────────────────────────────────────────────
+    get fontFamily() {
+        return this._fontFamily;
+    }
+    set fontFamily(value) {
+        if (this._fontFamily !== value) {
+            this._fontFamily = value;
+            this.invalidateText();
+        }
+    }
+    get size() {
+        return this._fontSize;
+    }
+    set size(value) {
+        if (this._fontSize !== value) {
+            this._fontSize = value;
+            this.invalidateText();
+        }
+    }
+    get bold() {
+        return this._bold;
+    }
+    set bold(value) {
+        if (this._bold !== value) {
+            this._bold = value;
+            this.invalidateText();
+        }
+    }
+    get italic() {
+        return this._italic;
+    }
+    set italic(value) {
+        if (this._italic !== value) {
+            this._italic = value;
+            this.invalidateText();
+        }
+    }
+    get textAlign() {
+        return this._textAlign;
+    }
+    set textAlign(value) {
+        if (this._textAlign !== value) {
+            this._textAlign = value;
+            this.invalidateText();
+        }
+    }
+    get verticalAlign() {
+        return this._verticalAlign;
+    }
+    set verticalAlign(value) {
+        if (this._verticalAlign !== value) {
+            this._verticalAlign = value;
+            this.invalidateText();
+        }
+    }
+    get textColor() {
+        return this._textColor;
+    }
+    set textColor(value) {
+        if (this._textColor !== value) {
+            this._textColor = value;
+            this._inputController?.setColor(value);
+            this.$markDirty();
+        }
+    }
+    get strokeColor() {
+        return this._strokeColor;
+    }
+    set strokeColor(value) {
+        if (this._strokeColor !== value) {
+            this._strokeColor = value;
+            this.$markDirty();
+        }
+    }
+    get stroke() {
+        return this._stroke;
+    }
+    set stroke(value) {
+        if (this._stroke !== value) {
+            this._stroke = value;
+            this.$markDirty();
+        }
+    }
+    get lineSpacing() {
+        return this._lineSpacing;
+    }
+    set lineSpacing(value) {
+        if (this._lineSpacing !== value) {
+            this._lineSpacing = value;
+            this.invalidateText();
+        }
+    }
+    get wordWrap() {
+        return this._wordWrap;
+    }
+    set wordWrap(value) {
+        if (this._wordWrap !== value) {
+            if (this._displayAsPassword)
+                return;
+            this._wordWrap = value;
+            this.invalidateText();
+        }
+    }
+    get multiline() {
+        return this._multiline;
+    }
+    set multiline(value) {
+        if (this._multiline !== value) {
+            this._multiline = value;
+            this.invalidateText();
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        if (this._type === value)
+            return;
+        this._type = value;
+        if (value === TextFieldType.INPUT) {
+            if (!this._inputController) {
+                this._inputController = new InputController(this);
+            }
+            this.touchEnabled = true;
+            // Set default size if not explicitly set, matching old Egret behaviour
+            if (isNaN(this.$explicitWidth))
+                this.width = 100;
+            if (isNaN(this.$explicitHeight))
+                this.height = 30;
+            if (this.stage) {
+                this._inputController.addStageText();
+            }
+            // Sync the raw text to StageText so the native input shows the
+            // current value (the text setter may have run before the
+            // InputController was created).
+            this._inputController.setText(this._text);
+        }
+        else {
+            if (this._inputController) {
+                this._inputController.removeStageText();
+                this._inputController = undefined;
+            }
+            this.touchEnabled = false;
+        }
+        this.$markDirty();
+    }
+    get inputType() {
+        return this._inputType;
+    }
+    set inputType(value) {
+        this._inputType = value;
+    }
+    get text() {
+        if (this._type === TextFieldType.INPUT && this._inputController) {
+            return this._inputController.getText();
+        }
+        return this._text;
+    }
+    set text(value) {
+        // Keep the runtime API compatible with Egret/DOM text setters. JavaScript
+        // callers and EXML bindings can provide numbers, objects, or null despite
+        // the TypeScript declaration; line layout must always receive a string.
+        const normalized = value == null ? '' : String(value);
+        if (this._text === normalized)
+            return;
+        this._text = normalized;
+        this._textFlow = undefined;
+        if (this._inputController) {
+            this._inputController.setText(normalized);
+        }
+        this.invalidateText();
+    }
+    get displayAsPassword() {
+        return this._displayAsPassword;
+    }
+    set displayAsPassword(value) {
+        if (this._displayAsPassword !== value) {
+            this._displayAsPassword = value;
+            this.invalidateText();
+        }
+    }
+    get maxChars() {
+        return this._maxChars;
+    }
+    set maxChars(value) {
+        this._maxChars = value;
+    }
+    get scrollV() {
+        return Math.min(Math.max(this._scrollV, 1), this.maxScrollV);
+    }
+    set scrollV(value) {
+        value = Math.max(value, 1);
+        if (this._scrollV !== value) {
+            this._scrollV = value;
+            this.$markDirty();
+        }
+    }
+    get maxScrollV() {
+        this.ensureLines();
+        return Math.max(1, this._numLines - this.getScrollNum() + 1);
+    }
+    get numLines() {
+        this.ensureLines();
+        return this._numLines;
+    }
+    get restrict() {
+        return this._restrict;
+    }
+    set restrict(value) {
+        this._restrict = value;
+        if (value === undefined) {
+            this._restrictAnd = undefined;
+            this._restrictNot = undefined;
+        }
+        else {
+            // Find the first unescaped '^'
+            let index = -1;
+            let i = 0;
+            while (i < value.length) {
+                const pos = value.indexOf('^', i);
+                if (pos < 0)
+                    break;
+                if (pos === 0 || value.charAt(pos - 1) !== '\\') {
+                    index = pos;
+                    break;
+                }
+                i = pos + 1;
+            }
+            if (index === 0) {
+                this._restrictAnd = undefined;
+                this._restrictNot = value.substring(1);
+            }
+            else if (index > 0) {
+                this._restrictAnd = value.substring(0, index);
+                this._restrictNot = value.substring(index + 1);
+            }
+            else {
+                this._restrictAnd = value;
+                this._restrictNot = undefined;
+            }
+        }
+    }
+    /** @internal Parsed whitelist portion of restrict. */
+    get restrictAnd() {
+        return this._restrictAnd;
+    }
+    /** @internal Parsed blacklist portion of restrict. */
+    get restrictNot() {
+        return this._restrictNot;
+    }
+    get border() {
+        return this._border;
+    }
+    set border(value) {
+        if (this._border !== value) {
+            this._border = value;
+            this.$markDirty();
+        }
+    }
+    get borderColor() {
+        return this._borderColor;
+    }
+    set borderColor(value) {
+        if (this._borderColor !== value) {
+            this._borderColor = value;
+            this.$markDirty();
+        }
+    }
+    get background() {
+        return this._background;
+    }
+    set background(value) {
+        if (this._background !== value) {
+            this._background = value;
+            this.$markDirty();
+        }
+    }
+    get backgroundColor() {
+        return this._backgroundColor;
+    }
+    set backgroundColor(value) {
+        if (this._backgroundColor !== value) {
+            this._backgroundColor = value;
+            this.$markDirty();
+        }
+    }
+    get textFlow() {
+        return this._textFlow;
+    }
+    set textFlow(value) {
+        this._textFlow = value;
+        if (value) {
+            this._text = value.map(e => e.text).join('');
+        }
+        this.invalidateText();
+    }
+    get textWidth() {
+        this.ensureLines();
+        return this._textWidth;
+    }
+    get textHeight() {
+        this.ensureLines();
+        // INPUT single-line: height is always fontSize, matching Egret behaviour
+        if (this._type === TextFieldType.INPUT && !this._multiline) {
+            return this._fontSize;
+        }
+        return this._textHeight + (this._numLines - 1) * this._lineSpacing;
+    }
+    /** @internal Font string for Canvas 2D rendering. */
+    get fontString() {
+        return this._fontString;
+    }
+    get selectionBeginIndex() {
+        return this._selectionAnchor;
+    }
+    get selectionEndIndex() {
+        return this._selectionActive;
+    }
+    get caretIndex() {
+        return this._selectionActive;
+    }
+    /** @internal Whether the user is currently typing (INPUT mode). Used by renderer. */
+    get isTyping() {
+        return this._isTyping;
+    }
+    /** @internal Computed line layout data. */
+    getLinesArr() {
+        this.ensureLines();
+        return this._linesArr ?? [];
+    }
+    /** @internal Y offset in pixels for the current scrollV position. */
+    getScrollYOffset() {
+        if (this._scrollV <= 1)
+            return 0;
+        this.ensureLines();
+        const lines = this._linesArr ?? [];
+        let offset = 0;
+        const startLine = Math.min(this._scrollV - 1, lines.length - 1);
+        for (let i = 0; i < startLine; i++) {
+            offset += lines[i].height + this._lineSpacing;
+        }
+        return offset;
+    }
+    // ── Public methods ────────────────────────────────────────────────────────
+    appendText(text) {
+        this.appendElement({ text });
+    }
+    appendElement(element) {
+        if (this._displayAsPassword) {
+            // In password mode, only update the raw text, don't expose textFlow
+            this.text = this._text + element.text;
+            return;
+        }
+        const flow = this._textFlow
+            ? [...this._textFlow]
+            : this._text
+                ? [{ text: this._text, style: undefined }]
+                : [];
+        flow.push(element);
+        this.textFlow = flow;
+        if (this._inputController) {
+            this._inputController.setText(this._text);
+        }
+    }
+    setFocus() {
+        if (this._type === TextFieldType.INPUT && this.stage && this._inputController) {
+            this._inputController.focus(true);
+        }
+    }
+    setSelection(beginIndex, endIndex) {
+        this._selectionAnchor = beginIndex;
+        this._selectionActive = endIndex;
+    }
+    /** @internal Called by InputController when typing state changes. */
+    setIsTyping(value) {
+        this._isTyping = value;
+        this.$renderDirty = true;
+        this.$markDirty();
+    }
+    getLineHeight() {
+        return this._fontSize + this._lineSpacing;
+    }
+    // ── Internal methods ──────────────────────────────────────────────────────
+    $onAddToStage(stage, $nestLevel) {
+        super.$onAddToStage(stage, $nestLevel);
+        if (this._type === TextFieldType.INPUT && this._inputController) {
+            this._inputController.addStageText();
+        }
+        this.addEventListener(TouchEvent.TOUCH_TAP, this.onTapHandler);
+    }
+    $onRemoveFromStage() {
+        super.$onRemoveFromStage();
+        if (this._inputController) {
+            this._inputController.removeStageText();
+        }
+        this.removeEventListener(TouchEvent.TOUCH_TAP, this.onTapHandler);
+    }
+    $measureContentBounds(bounds) {
+        this.ensureLines();
+        const w = !isNaN(this.$explicitWidth) ? this.$explicitWidth : this._textWidth;
+        const h = !isNaN(this.$explicitHeight) ? this.$explicitHeight : this.textHeight;
+        bounds.setTo(0, 0, w, h);
+    }
+    // ── Private methods ───────────────────────────────────────────────────────
+    invalidateText() {
+        this._textDirty = true;
+        this._linesArr = undefined;
+        this.invalidateFontString();
+        this.$renderDirty = true;
+        this.$markDirty();
+    }
+    invalidateFontString() {
+        this._fontString = getFontString(this._fontSize, this._fontFamily, this._bold, this._italic);
+    }
+    ensureLines() {
+        if (!this._textDirty && this._linesArr)
+            return;
+        this._textDirty = false;
+        this._linesArr = this.calculateLines();
+        this._numLines = this._linesArr.length;
+        let maxWidth = 0;
+        let totalHeight = 0;
+        for (let i = 0; i < this._linesArr.length; i++) {
+            const line = this._linesArr[i];
+            if (line.width > maxWidth)
+                maxWidth = line.width;
+            totalHeight += line.height;
+        }
+        this._textWidth = maxWidth;
+        // Store raw sum of line heights (without lineSpacing); textHeight getter adds spacing.
+        this._textHeight = totalHeight;
+    }
+    /** Number of fully-visible lines in the current explicit height (mirrors Egret's $getScrollNum). */
+    getScrollNum() {
+        if (!this._multiline)
+            return 1;
+        if (isNaN(this.$explicitHeight))
+            return this._numLines;
+        const lineH = this._fontSize + this._lineSpacing;
+        if (lineH <= 0)
+            return this._numLines;
+        let scrollNum = Math.floor(this.$explicitHeight / lineH);
+        const leftH = this.$explicitHeight - lineH * scrollNum;
+        if (leftH > this._fontSize / 2)
+            scrollNum++;
+        return Math.max(1, scrollNum);
+    }
+    calculateLines() {
+        const elements = this._textFlow ?? [{ text: this.getDisplayText() }];
+        const maxWidth = !isNaN(this.$explicitWidth) ? this.$explicitWidth : NaN;
+        const isInput = this._type === TextFieldType.INPUT;
+        const lines = [];
+        // Width == 0: return empty placeholder (matches old behaviour)
+        if (!isNaN(maxWidth) && maxWidth === 0) {
+            return [{ width: 0, height: 0, charNum: 0, hasNextLine: false, elements: [] }];
+        }
+        let currentLine = [];
+        let lineWidth = 0;
+        // INPUT mode: line height is always fontSize, not per-style max
+        let lineHeight = this._fontSize;
+        let lineCharNum = 0;
+        const flushLine = (hasNext) => {
+            lines.push({
+                width: lineWidth,
+                height: lineHeight,
+                charNum: lineCharNum + (hasNext ? 1 : 0),
+                hasNextLine: hasNext,
+                elements: currentLine,
+            });
+            currentLine = [];
+            lineWidth = 0;
+            lineHeight = this._fontSize;
+            lineCharNum = 0;
+        };
+        for (const element of elements) {
+            if (!element.text)
+                continue;
+            const style = element.style ?? {};
+            const fontSize = typeof style.size === 'number' ? style.size : this._fontSize;
+            const fontFamily = style.fontFamily ?? this._fontFamily;
+            const bold = style.bold ?? this._bold;
+            const italic = style.italic ?? this._italic;
+            // Split by line breaks first (\r\n, \r, \n)
+            const segments = element.text.split(/\r\n|\r|\n/);
+            for (let si = 0; si < segments.length; si++) {
+                const seg = segments[si];
+                const isLastSeg = si === segments.length - 1;
+                if (seg === '') {
+                    if (!isLastSeg) {
+                        // explicit newline
+                        flushLine(true);
+                    }
+                    continue;
+                }
+                if (isNaN(maxWidth)) {
+                    // No width constraint — whole segment goes on current line
+                    const w = measureText(seg, fontFamily, fontSize, bold, italic);
+                    currentLine.push({ text: seg, width: w, style: element.style });
+                    lineWidth += w;
+                    if (!isInput)
+                        lineHeight = Math.max(lineHeight, fontSize);
+                    lineCharNum += seg.length;
+                    if (!isLastSeg)
+                        flushLine(true);
+                }
+                else {
+                    // Width constrained — need to break the segment
+                    const totalSegWidth = measureText(seg, fontFamily, fontSize, bold, italic);
+                    if (lineWidth + totalSegWidth <= maxWidth || !this._multiline) {
+                        // Fits on current line
+                        currentLine.push({ text: seg, width: totalSegWidth, style: element.style });
+                        lineWidth += totalSegWidth;
+                        if (!isInput)
+                            lineHeight = Math.max(lineHeight, fontSize);
+                        lineCharNum += seg.length;
+                        if (!isLastSeg)
+                            flushLine(true);
+                    }
+                    else {
+                        // Need to break — tokenize into words/spaces, then wrap by width
+                        const tokenTexts = this._wordWrap ? tokenize(seg) : (seg.match(/[\s\S]/gu) ?? seg.split(''));
+                        let ww = 0;
+                        let charNum = 0;
+                        for (const token of tokenTexts) {
+                            const w = measureText(token, fontFamily, fontSize, bold, italic);
+                            if (lineWidth !== 0 && lineWidth + w > maxWidth) {
+                                // Flush current line and start new one
+                                flushLine(false);
+                            }
+                            if (w > maxWidth) {
+                                // Single token wider than field — break char by char
+                                const chars = splitGraphemes(token);
+                                for (const ch of chars) {
+                                    const cw = measureText(ch, fontFamily, fontSize, bold, italic);
+                                    if (lineWidth !== 0 && lineWidth + cw > maxWidth) {
+                                        flushLine(false);
+                                    }
+                                    currentLine.push({ text: ch, width: cw, style: element.style });
+                                    lineWidth += cw;
+                                    if (!isInput)
+                                        lineHeight = Math.max(lineHeight, fontSize);
+                                    lineCharNum++;
+                                    charNum++;
+                                }
+                            }
+                            else {
+                                currentLine.push({ text: token, width: w, style: element.style });
+                                lineWidth += w;
+                                if (!isInput)
+                                    lineHeight = Math.max(lineHeight, fontSize);
+                                lineCharNum += token.length;
+                                charNum += token.length;
+                                ww += w;
+                            }
+                        }
+                        if (!isLastSeg)
+                            flushLine(true);
+                    }
+                }
+            }
+        }
+        if (currentLine.length > 0) {
+            lines.push({
+                width: lineWidth,
+                height: lineHeight,
+                charNum: lineCharNum,
+                hasNextLine: false,
+                elements: currentLine,
+            });
+        }
+        if (lines.length === 0) {
+            lines.push({ width: 0, height: this._fontSize, charNum: 0, hasNextLine: false, elements: [] });
+        }
+        return lines;
+    }
+    getDisplayText() {
+        if (this._displayAsPassword)
+            return '*'.repeat(this._text.length);
+        return this._text;
+    }
+    onTapHandler = (e) => {
+        if (this._type === TextFieldType.INPUT)
+            return;
+        const te = e;
+        const element = this.getTextElementAt(te.localX, te.localY);
+        if (!element?.style?.href)
+            return;
+        const href = element.style.href;
+        if (href.startsWith('event:')) {
+            TextEvent.dispatchTextEvent(this, TextEvent.LINK, href.substring('event:'.length));
+        }
+        else {
+            open(href, element.style.target ?? '_blank');
+        }
+    };
+    /** @internal Hit-test to find the ITextElement at a given local coordinate. */
+    getTextElementAt(x, y) {
+        this.ensureLines();
+        const lines = this._linesArr ?? [];
+        const width = !isNaN(this.$explicitWidth) ? this.$explicitWidth : this._textWidth;
+        const height = !isNaN(this.$explicitHeight) ? this.$explicitHeight : this.textHeight;
+        // Compute total text height for vertical alignment offset
+        let totalTextHeight = 0;
+        for (let i = 0; i < lines.length; i++) {
+            totalTextHeight += lines[i].height;
+            if (i > 0)
+                totalTextHeight += this._lineSpacing;
+        }
+        // Vertical alignment offset (mirrors renderTextField)
+        let verticalOffset = 0;
+        if (this._verticalAlign === VerticalAlign.MIDDLE) {
+            verticalOffset = Math.max(0, (height - totalTextHeight) / 2);
+        }
+        else if (this._verticalAlign === VerticalAlign.BOTTOM) {
+            verticalOffset = Math.max(0, height - totalTextHeight);
+        }
+        // ScrollV offset
+        const scrollOffset = this.getScrollYOffset();
+        // Adjust y into text-local space (line-top coordinates)
+        const localY = y - verticalOffset + scrollOffset;
+        let lineY = 0;
+        for (const line of lines) {
+            if (localY < lineY)
+                break;
+            if (localY <= lineY + line.height) {
+                // Horizontal alignment offset
+                let lineX = 0;
+                if (this._textAlign === HorizontalAlign.RIGHT) {
+                    lineX = width - line.width;
+                }
+                else if (this._textAlign === HorizontalAlign.CENTER) {
+                    lineX = (width - line.width) / 2;
+                }
+                for (const el of line.elements) {
+                    if (x >= lineX && x < lineX + el.width)
+                        return el;
+                    lineX += el.width;
+                }
+                break;
+            }
+            lineY += line.height + this._lineSpacing;
+        }
+        return undefined;
+    }
+}
+//# sourceMappingURL=TextField.js.map