@shijiu/jsview-vue 2.2.201 → 2.2.373

package/utils/JsViewVueWidget/JsvInput/EditViewOperator.ts

@@ -0,0 +1,320 @@
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+import { EditVisibleArea } from "./EditVisibleArea";
+import { FontStyleDefine, InputType } from "./SharedDefine";
+import { getTextDisplayWidth } from "./SystemTextTools";
+
+export const CHAR_CODE_OF_0 = "0".charCodeAt(0);
+export const CHAR_CODE_OF_9 = "9".charCodeAt(0);
+
+function ifDigital(char: string) {
+    let char_code = char.charCodeAt(0);
+    return CHAR_CODE_OF_0 <= char_code && char_code <= CHAR_CODE_OF_9
+}
+
+declare interface CursorOperater {
+    startBlink: () => void;
+    stopBlink: (show: boolean) => void;
+}
+
+declare type TextChangedFunc = (final_text: string, dsp_text: string) => void;
+declare type CursorMovedFunc = (new_text_start_index: number, new_cursor_left: number) => void;
+declare type TextOverflowFunc = (origin_text: string, new_text: string) => void;
+
+export class EditViewOperator {
+    private _EditViewHandle: any = null;
+    private _CursorHandle: CursorOperater | null = null;
+    private _EditViewId: number = -1;
+    private _CursorResumeTimeoutToken: number = -1;
+
+    private _InputType: number = 0;
+    private _FontStyle: FontStyleDefine | null = null
+    private _TextLeft: number = 0;  // 文字在可视区域内的左坐标, 超出部分被视觉上clip掉
+    private _MaxInputLenth: number = 128;
+    private _TextReadOnly: boolean = false;
+    private _CurrentFullText: string = "";
+    private _CurrentDspText: string = "";
+    private _CurrentDspWith: number = 0;
+
+    private _CurrentCursorOffset: number = 0; // 相对可视区域的左边缘的焦点显示位置
+
+    private _IsFocus: boolean = false;
+
+    private _EditVisibleArea?: EditVisibleArea;
+
+    // Callback
+    private _OnTextChangedCallback: TextChangedFunc;
+    private _OnCursorMoved: CursorMovedFunc;
+    private _TextOverflowFunc: TextOverflowFunc | undefined;
+
+    constructor(
+        text_changed_callback: TextChangedFunc,
+        cursor_moved: CursorMovedFunc,
+        text_overflow: TextOverflowFunc | undefined = undefined
+    ) {
+        this._OnTextChangedCallback = text_changed_callback;
+        this._OnCursorMoved = cursor_moved;
+        this._TextOverflowFunc = text_overflow;
+    }
+
+    // 当前是否为焦点
+    // 焦点状态显示光标并激活输入状态
+    updateFocus(is_focus: boolean) {
+        if (is_focus) {
+            if (!this._IsFocus) {
+                // 非聚焦转化为聚焦状态
+                this._IsFocus = true;
+                this._CursorHandle?.startBlink();
+                if (this._EditViewHandle && !this._TextReadOnly) {
+                    this._EditViewHandle.showIme(
+                        this._InputType,
+                        this._CurrentFullText,
+                        this._CurrentCursorOffset
+                    );
+                }
+            }
+        } else {
+            if (this._IsFocus) {
+                // 变为非聚焦状态
+                this._IsFocus = false;
+                // console.log("Input Blur");
+                if (this._EditViewHandle && !this._TextReadOnly) {
+                    this._EditViewHandle.hideIme();
+                }
+            }
+        }
+    }
+
+    showSoftIme() {
+        this._EditViewHandle.showIme(
+            this._InputType,
+            this._CurrentFullText,
+            this._CurrentCursorOffset
+        );
+    }
+
+    updateInputConfig(
+        box_width: number, box_height: number,
+        cursor_width: number,
+        font_style: FontStyleDefine,
+        input_type: number, max_input_lenth: number,
+        text_read_only: boolean) {
+
+        // format fontStyle
+        this._FontStyle = {
+            fontSize: !font_style.fontSize || isNaN(font_style.fontSize) ? Forge.TextUtils.sDefaultFontSize : font_style.fontSize,
+            fontFamily: !font_style.fontFamily ? Forge.TextUtils.sDefaultFontSize : font_style.fontFamily,
+            textAlign: font_style.textAlign,
+            fontStyle: font_style.fontStyle,
+            fontWeight: font_style.fontWeight
+        }
+        this._FontStyle = font_style;
+        this._InputType = input_type;
+        this._MaxInputLenth = max_input_lenth;
+        this._TextReadOnly = text_read_only;
+
+        this._EditVisibleArea = new EditVisibleArea(
+            box_width, box_height,
+            cursor_width,
+            font_style,
+            font_style.textAlign === "right"
+        );
+    }
+
+    generateView(): number {
+        // 构建EditControlView来处理输入
+        this._EditViewHandle = new Forge.EditControlView();
+        this._EditViewHandle.OnTextChanged = this._OnTextChanged.bind(this);
+        this._EditViewHandle.OnStatusChanged = this._OnStatusChanged.bind(this);
+
+        this._EditViewId = Forge.sViewStore.add(
+            new Forge.ViewInfo(this._EditViewHandle)
+        );
+
+        return this._EditViewId;
+    }
+
+    setCursorRef(cursor_ref: any) {
+        this._CursorHandle = cursor_ref;
+    }
+
+    moveCursorOffset(moved_gap: number): boolean {
+        let cursor_moved = false;
+
+        if (moved_gap != 0) {
+            this._PauseCursorBlink(); // 开始移动后停止光标闪动
+
+            let pre_cursor_index = this._CurrentCursorOffset;
+            let new_cursor_index = pre_cursor_index + moved_gap;
+
+            // 控制边界
+            if (new_cursor_index < 0) {
+                new_cursor_index = 0;
+            }
+            if (new_cursor_index > this._CurrentFullText.length) {
+                new_cursor_index = this._CurrentFullText.length;
+            }
+
+            cursor_moved = (pre_cursor_index != new_cursor_index);
+
+            if (cursor_moved) {
+                let new_text_left = this._EditVisibleArea!.calculateSlide(
+                    this._CurrentDspText,
+                    this._CurrentDspText,
+                    this._CurrentDspWith,
+                    this._CurrentDspWith,
+                    new_cursor_index,
+                    true
+                );
+                this._UpdateDispay(new_text_left, new_cursor_index)
+            }
+        }
+
+        return cursor_moved;
+    }
+
+    private _UpdateDispay(new_text_start_index: number, new_cursor_left: number) {
+        if (this._TextLeft != new_text_start_index || this._CurrentCursorOffset != new_cursor_left) {
+            this._TextLeft = new_text_start_index;
+            this._CurrentCursorOffset = new_cursor_left;
+            this._OnCursorMoved?.(this._TextLeft, this._EditVisibleArea!.getCursorPosition());
+        }
+    }
+
+    onUnmounted() {
+        if (this._EditViewId != -1) {
+            Forge.sViewStore.remove(this._EditViewId);
+            this._EditViewId = -1;
+        }
+        this._ClearCursorResumeTimer();
+    }
+
+    private _PauseCursorBlink() {
+        // 暂停光标闪动，暂停800ms
+
+        this._CursorHandle?.stopBlink(true);
+
+        // reset cursor timer
+        this._ClearCursorResumeTimer();
+        this._CursorResumeTimeoutToken = setTimeout(() => {
+            this._CursorHandle?.startBlink();
+        }, 800);
+    }
+
+    private _ClearCursorResumeTimer() {
+        if (this._CursorResumeTimeoutToken) {
+            clearTimeout(this._CursorResumeTimeoutToken);
+            this._CursorResumeTimeoutToken = -1;
+        }
+    }
+
+    // EditControlView当输入变化时的回调
+    private _OnTextChanged(text: string, cursor_index: number) {
+        if (typeof text != 'string' || text.length >= this._MaxInputLenth) {
+            // 非法输入或者输入限制，超输入限制，文字内容不改变
+            if (this._EditViewHandle && this._IsFocus) {
+                this._EditViewHandle.updateCursorOffset(
+                    this._CurrentDspText,
+                    this._CurrentCursorOffset
+                );
+            }
+            return;
+        }
+
+        if (text.length > 0) {
+            const start = cursor_index - 1;
+            const end = cursor_index;
+            const add_text = text.slice(start, end);
+            if (add_text && !ifDigital(add_text) && this._InputType === InputType.NUMBER) {
+                // console.log(
+                //   `onTextChanged add text failed, add_text:${add_text}, when input type is number!`
+                // );
+                // 输入内容非法，不更换内容
+                this._EditViewHandle!.updateCursorOffset(
+                    this._CurrentDspText,
+                    this._CurrentCursorOffset
+                );
+                return;
+            }
+        }
+
+        // 更新文字记录信息
+        let text_changed = this._CurrentFullText != text;
+        let origin_dsp_text = this._CurrentDspText;
+        let origin_dsp_width = this._CurrentDspWith;
+        if (text_changed) {
+            this._CurrentFullText = text;
+            // 更新显示字符串信息
+            if (this._InputType === Forge.TextInputType.PASSWORD) {
+                // password
+                this._CurrentDspText = text.replace(/\w/g, "*");
+            } else {
+                this._CurrentDspText = text;
+            }
+            this._CurrentDspWith = getTextDisplayWidth(this._CurrentDspText, this._FontStyle!);
+        } else {
+            // 仅由EditView发出来的光标移动事件
+        }
+
+        // 在文字信息更新后，重算显示位置
+        let new_text_left = this._EditVisibleArea!.calculateSlide(
+            origin_dsp_text,
+            this._CurrentDspText,
+            origin_dsp_width,
+            this._CurrentDspWith,
+            cursor_index,
+            false
+        );
+
+        this._UpdateDispay(new_text_left, cursor_index);
+
+        if (text_changed) {
+            this._OnTextChangedCallback?.(this._CurrentFullText, this._CurrentDspText);
+        }
+    }
+
+    private _OnStatusChanged() {
+        // console.log("OnStatusChanged status", status);
+    }
+
+    public addText(text: string) {
+        if (this._InputType === InputType.NUMBER && !ifDigital(text)) {
+            // console.log(`The input data:${string} is not number`);
+            return;
+        }
+        const pre_full_str = this._CurrentFullText;
+        const pre_index = this._CurrentCursorOffset;
+
+        const new_str =
+            pre_full_str.slice(0, pre_index) +
+            text +
+            pre_full_str.slice(pre_index);
+
+        if (new_str.length > this._MaxInputLenth) {
+            this._TextOverflowFunc?.(pre_full_str, new_str);
+            return;
+        }
+
+        const new_index = pre_index + text.length;
+        this._OnTextChanged(new_str, new_index);
+    }
+
+    public deleteText() {
+        const pre_full_str = this._CurrentFullText;
+        const pre_index = this._CurrentCursorOffset;
+        if (pre_index > 0) {
+            const new_str =
+                pre_full_str.slice(0, pre_index - 1) + pre_full_str.slice(pre_index);
+            const new_index = pre_index - 1;
+            this._OnTextChanged(new_str, new_index);
+        }
+    }
+
+    public clearText() {
+        this._OnTextChanged("", 0);
+    }
+
+    public replaceText(text: string) {
+        // 全部内容替换
+        this._OnTextChanged(text, text?.length);
+    }
+}

package/utils/JsViewVueWidget/JsvInput/EditVisibleArea.ts

@@ -0,0 +1,222 @@
+import { calculateCursorPosition } from "./SystemTextTools";
+import { FontStyleDefine, MAX_WIDTH } from "./SharedDefine";
+
+export class EditVisibleArea {
+    private _AreaWidth: number;
+    private _AreaHeight: number;
+    private _IsRightAlign: boolean;
+    private _TextLeft: number = 0;
+    private _CursorWidth: number = 0;
+    private _FontStyle: FontStyleDefine;
+
+    private _TextVisibleStartPos: number = 0; // 显示区域的起点是整段文字第几个像素上
+    private _TextVisibleEndPos: number = 0; // 显示区域的末尾是整段文字第几个像素上
+    private _VisibleAreaCurPos: number = 0; // 光标在整段文字的第几个像素上
+
+    constructor(area_width: number, area_height: number,
+        cursor_width: number,
+        font_style: FontStyleDefine,
+        is_right_align: boolean) {
+
+        this._CursorWidth = cursor_width;
+        this._FontStyle = font_style;
+        this._AreaWidth = area_width;
+        this._AreaHeight = area_height;
+        this._IsRightAlign = is_right_align;
+    }
+
+    getTextLeft(): number {
+        return this._TextLeft;
+    }
+
+    getCursorPosition(): number {
+        return this._VisibleAreaCurPos;
+    }
+
+    calculateSlide(
+        pre_str: string, target_str: string,
+        pre_str_dsp_width: number, target_str_dsp_width: number, // 使用外部缓存，减少本地计算
+        cur_index: number, moved: boolean): number {
+        if (target_str.length === 0) {
+            // 当字符内容清空的场景
+            this._VisibleAreaCurPos = 0;
+            this._updateVisibleAreaPos(0, target_str_dsp_width);
+            return this._caculateTextLeft(target_str_dsp_width);
+        }
+
+        let new_left = this._TextLeft;
+        const current_cursor_position = calculateCursorPosition(
+            target_str,
+            cur_index,
+            target_str_dsp_width,
+            this._AreaHeight,
+            this._AreaHeight,
+            this._FontStyle
+        );
+        let option_mode = "op_vis_normal"; // 可视区域内移动
+        // 计算模式
+        if (pre_str.length > target_str.length) {
+            option_mode = "op_del"; // 字符删除
+        } else if (pre_str.length < target_str.length) {
+            option_mode = "op_add"; // 字符追加
+        } else {
+            if (current_cursor_position < this._VisibleAreaCurPos) {
+                option_mode = "op_move_left"; // 边界左移动
+            } else if (current_cursor_position > this._VisibleAreaCurPos) {
+                option_mode = "op_move_right"; // 边界右移动
+            }
+        }
+
+        // 根据用户动作，区分计算方法
+        switch (option_mode) {
+            case "op_del":
+                new_left = this._getLeftWithDelChar(
+                    current_cursor_position,
+                    target_str_dsp_width
+                );
+                break;
+            case "op_add":
+                new_left = this._getLeftWithAddChar(
+                    current_cursor_position,
+                    target_str_dsp_width
+                );
+                break;
+            case "op_move_left":
+                new_left = this._getLeftWithMoveLeft(
+                    current_cursor_position,
+                    target_str_dsp_width);
+                break;
+            case "op_move_right":
+                new_left = this._getLeftWithMoveRight(
+                    current_cursor_position,
+                    target_str_dsp_width);
+                break;
+            case "op_vis_normal":
+            default:
+                break;
+        }
+
+        // 更新可视区域光标位置
+        this._VisibleAreaCurPos = current_cursor_position;
+        if (this._VisibleAreaCurPos == 2000) {
+            debugger;
+        }
+        this._TextLeft = new_left;
+
+        return new_left;
+    }
+
+    private _updateVisibleAreaPos(area_start_pos: number, target_str_dsp_width: number) {
+        if (target_str_dsp_width <= this._AreaWidth) {
+            this._TextVisibleStartPos = 0;
+            this._TextVisibleEndPos = target_str_dsp_width;
+        } else {
+            if (area_start_pos < 0) {
+                area_start_pos = 0;
+            }
+            this._TextVisibleStartPos = area_start_pos;
+            this._TextVisibleEndPos = this._TextVisibleStartPos + this._AreaWidth;
+            if (this._TextVisibleEndPos > target_str_dsp_width) {
+                // 到底，反推start
+                this._TextVisibleEndPos = target_str_dsp_width;
+                this._TextVisibleStartPos = this._TextVisibleEndPos - this._AreaWidth;
+            }
+        }
+
+        console.log("_updateVisibleAreaPos new start=" + this._TextVisibleStartPos + " end=" + this._TextVisibleEndPos);
+    }
+
+    private _caculateTextLeft(target_str_dsp_width: number): number {
+        // 根据左右对齐原则，推到textLeft
+        if (target_str_dsp_width > this._AreaWidth) {
+            // 整体区域可填充，则以VisibleStartPos和0点对齐的left即可
+            return -this._TextVisibleStartPos;
+        } else {
+            if (this._IsRightAlign) {
+                return (this._AreaWidth - target_str_dsp_width);
+            } else {
+                return 0;
+            }
+        }
+    }
+
+    private _getLeftWithAddChar(
+        current_cursor_position: number,
+        target_str_dsp_width: number) {
+        let new_start: number;
+
+        if (this._IsRightAlign) {
+            // 右对齐场景，向左边移动光标(保持后端)
+            let end_range = this._TextVisibleEndPos - this._VisibleAreaCurPos;
+            new_start = current_cursor_position + end_range - this._AreaWidth;
+        } else {
+            // 左对齐场景，向右边移动光标(保持前端)
+            let start_range = this._VisibleAreaCurPos - this._TextVisibleStartPos;
+            new_start = current_cursor_position - start_range;
+        }
+
+        this._updateVisibleAreaPos(new_start, target_str_dsp_width);
+        return this._caculateTextLeft(target_str_dsp_width);
+    }
+
+    private _getLeftWithDelChar(current_cursor_position: number, target_str_dsp_width: number) {
+        let new_start: number;
+
+        if (target_str_dsp_width >= this._AreaWidth) {
+            // 删除动作一般为backSpace驱动，带动右边的东西向左边移动更形象
+            // 除非前端可视区域不足时，才进行前端保持
+            let front_range = Math.floor((this._TextVisibleEndPos - this._TextVisibleStartPos) / 3);
+            if (this._VisibleAreaCurPos - front_range > this._TextVisibleStartPos) {
+                // 前端充足，向右移动，start不动
+                new_start = this._TextVisibleStartPos;
+            } else {
+                // 前端(左)不足，保持左边
+                let start_range = this._VisibleAreaCurPos - this._TextVisibleStartPos;
+                new_start = current_cursor_position - start_range;
+            }
+        } else {
+            new_start = 0; // 长度不够，归0处理
+        }
+
+
+        // 刷新可视区域段
+        this._updateVisibleAreaPos(new_start, target_str_dsp_width);
+        return this._caculateTextLeft(target_str_dsp_width);
+    }
+
+    private _getLeftWithMoveRight(current_cursor_position: number, target_str_dsp_width: number) {
+        let new_start: number;
+
+        let end_range = Math.floor(this._AreaWidth / 3);
+        if (this._VisibleAreaCurPos + end_range < this._TextVisibleEndPos) {
+            // 不到最后的1/3区域时，移动光标，保持Start位置    
+            new_start = this._TextVisibleStartPos;
+        } else {
+            // 最后的1/3区域时，保持光标
+            let cursor_offset = current_cursor_position - this._VisibleAreaCurPos;
+            new_start = this._TextVisibleStartPos + cursor_offset;
+        }
+
+        // 刷新可视区域段
+        this._updateVisibleAreaPos(new_start, target_str_dsp_width);
+        return this._caculateTextLeft(target_str_dsp_width);
+    }
+
+    private _getLeftWithMoveLeft(current_cursor_position: number, target_str_dsp_width: number) {
+        let new_start: number;
+
+        let start_range = Math.floor(this._AreaWidth / 3);
+        if (this._VisibleAreaCurPos - start_range > this._TextVisibleStartPos) {
+            // 不到最后的1/3区域时，移动光标，保持Start位置
+            new_start = this._TextVisibleStartPos;
+        } else {
+            // 最后的1/3区域时，保持光标
+            let cursor_offset = current_cursor_position - this._VisibleAreaCurPos;
+            new_start = this._TextVisibleStartPos + cursor_offset;
+        }
+
+        // 刷新可视区域段
+        this._updateVisibleAreaPos(new_start, target_str_dsp_width);
+        return this._caculateTextLeft(target_str_dsp_width);
+    }
+}