@blakron/core 0.4.1 → 0.4.3

package/dist/heron/text/TextField.js

@@ -1,716 +0,0 @@
-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 { getWordWrapRegex } 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 = undefined;
-    _restrictAnd = undefined;
-    _restrictNot = undefined;
-    _border = false;
-    _borderColor = 0x000000;
-    _background = false;
-    _backgroundColor = 0xffffff;
-    _textFlow = undefined;
-    _textWidth = 0;
-    _textHeight = 0;
-    _numLines = 0;
-    _linesArr = undefined;
-    _textDirty = true;
-    _fontString = '';
-    _selectionAnchor = 0;
-    _selectionActive = 0;
-    _isTyping = false;
-    _inputController = undefined;
-    // ── Constructor ───────────────────────────────────────────────────────────
-    constructor() {
-        super();
-        this.renderObjectType = 5 /* RenderObjectType.TEXT */;
-        this.invalidateFontString();
-    }
-    // ── 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) {
-        if (this._text === value)
-            return;
-        this._text = value;
-        this._textFlow = undefined;
-        if (this._inputController) {
-            this._inputController.setText(value);
-        }
-        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) {
-                        // 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 — split by word or character
-                        let words;
-                        if (this._wordWrap) {
-                            words = seg.split(getWordWrapRegex());
-                        }
-                        else {
-                            words = seg.match(/[\s\S]/gu) ?? seg.split('');
-                        }
-                        let ww = 0;
-                        let charNum = 0;
-                        for (let k = 0; k < words.length; k++) {
-                            const word = words[k];
-                            if (!word)
-                                continue;
-                            const w = measureText(word, fontFamily, fontSize, bold, italic);
-                            if (lineWidth !== 0 && lineWidth + w > maxWidth) {
-                                // Flush current line and start new one
-                                flushLine(false);
-                            }
-                            if (w > maxWidth) {
-                                // Single word wider than field — break char by char
-                                const chars = word.match(/[\s\S]/gu) ?? word.split('');
-                                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: word, width: w, style: element.style });
-                                lineWidth += w;
-                                if (!isInput)
-                                    lineHeight = Math.max(lineHeight, fontSize);
-                                lineCharNum += word.length;
-                                charNum += word.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
-        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