@shijiu/jsview-vue 2.2.201 → 2.2.426-test.0

package/utils/JsViewVueWidget/JsvInput/EditVisibleArea.ts

@@ -0,0 +1,255 @@
+import { calculateCursorPosition, calculateCursorPositionCached, recycleCursorMeasureCache } 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; // 光标在整段文字的第几个像素上
+
+    // 管理Cursor measure的cache
+    private _CursorMeasureCachedId: number = 0;
+    private _CursorMeasuredToken: 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;
+    }
+
+    releaseResource() {
+        if (this._CursorMeasureCachedId > 0) {
+            recycleCursorMeasureCache(this._CursorMeasureCachedId);
+            this._CursorMeasureCachedId = 0;
+        }
+    }
+
+    calculateSlide(
+        pre_str: string, target_str: string,
+        pre_str_dsp_width: number, target_str_dsp_width: number, // 使用外部缓存，减少本地计算
+        cur_index: number, moved: boolean, text_info_token: number): 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;
+        let current_cursor_position = 0;
+        if (cur_index == target_str.length) {
+            // calculateCursorPosition 无法计算最后一个字的位置，所以在此支持返回文字的边缘
+            current_cursor_position = target_str_dsp_width;
+        } else {
+            // 使用 calculateCursorPosition 获得光标显示位置
+            if (this._CursorMeasuredToken == text_info_token && this._CursorMeasureCachedId > 0) {
+                current_cursor_position = calculateCursorPositionCached(
+                    cur_index,
+                    this._CursorMeasureCachedId
+                )
+            } else {
+                if (this._CursorMeasureCachedId > 0) {
+                    recycleCursorMeasureCache(this._CursorMeasureCachedId);
+                    this._CursorMeasureCachedId = 0;
+                }
+
+                let measure_result = calculateCursorPosition(
+                    target_str,
+                    cur_index,
+                    target_str_dsp_width,
+                    this._AreaHeight,
+                    this._AreaHeight,
+                    this._FontStyle
+                );
+                current_cursor_position = measure_result.x;
+                this._CursorMeasureCachedId = measure_result.cachedId; // 注意cached资源需要手动释放
+                this._CursorMeasuredToken = text_info_token; // 记录此token的数据已经有measure cache
+            }
+        }
+        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);
+    }
+}