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

package/utils/JsViewVueWidget/JsvInput/Cursor.vue

@@ -4,50 +4,54 @@
  * @LastEditTime: 2023-02-01 13:47:13
  * @Description: file content
 -->
-<script>
-import { ref } from "vue";
-export default {
-  props: {
-    left: {
-      type: Number,
-      default: 0,
-    },
-    top: { type: Number, default: 0 },
-    width: Number,
-    height: Number,
-    color: String,
-  },
-  setup() {
-    return {
-      intervalToken: -1,
-      visible: ref(false),
-    };
-  },
-  methods: {
-    _cleanInterval() {
-      if (this.intervalToken > 0) {
-        clearInterval(this.intervalToken);
-        this.intervalToken = -1;
-      }
-    },
-    startBlink() {
-      this._cleanInterval();
-      this.intervalToken = setInterval(() => {
-        this.visible = !this.visible;
-      }, 750);
-    },
-    stopBlink(show) {
-      this._cleanInterval();
-      this.visible = show;
-    },
-  },
-  mounted() {
-    this.startBlink();
-  },
-  beforeUnmount() {
-    this._cleanInterval();
+<script setup>
+import { shallowRef, onUnmounted, onMounted } from "vue";
+
+const rProps = defineProps({
+  left: {
+    type: Number,
+    default: 0,
   },
-};
+  top: { type: Number, default: 0 },
+  width: Number,
+  height: Number,
+  color: String,
+});
+
+let vIntervalToken = -1;
+let rVisible = shallowRef(false);
+
+function _CleanInterval() {
+  if (vIntervalToken > 0) {
+    clearInterval(vIntervalToken);
+    vIntervalToken = -1;
+  }
+}
+
+function startBlink() {
+  _CleanInterval();
+  vIntervalToken = setInterval(() => {
+    rVisible.value = !rVisible.value;
+  }, 750);
+}
+
+function stopBlink(show) {
+  _CleanInterval();
+  rVisible.value = show;
+}
+
+onMounted(() => {
+  startBlink();
+});
+
+onUnmounted(() => {
+  _CleanInterval();
+});
+
+defineExpose({
+  startBlink,
+  stopBlink,
+});
 </script>
 
 <template>
@@ -58,7 +62,7 @@ export default {
       width,
       height,
       backgroundColor: color,
-      visibility: visible ? 'inherit' : 'hidden',
+      visibility: rVisible ? 'inherit' : 'hidden',
     }"
   />
-</template>
+</template>

package/utils/JsViewVueWidget/JsvInput/EditViewOperator.ts

@@ -0,0 +1,353 @@
+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;
+
+    private _TextChangedCount: number = 0; // 记录文字变化的次数，可用于确认文字是否变化，当style变化或者文字内容变化时+1
+
+    // 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,
+                        Math.ceil(-this._TextLeft),
+                        0
+                    );
+                }
+            }
+        } 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,
+            Math.ceil(-this._TextLeft),
+            0
+        );
+    }
+
+    updateInputConfig(
+        box_width: number, box_height: number,
+        cursor_width: number,
+        font_style: FontStyleDefine,
+        input_type: number,
+        max_input_lenth: number,
+        text_read_only: boolean,
+        editorTextColor: string,
+        editorBackground: string
+    ) {
+
+        // 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"
+        );
+
+        this._EditViewHandle.setEditorStyle(
+            this._FontStyle.fontSize,
+            this._FontStyle.textAlign,
+            editorTextColor,
+            editorBackground
+        )
+    }
+
+    generateView(): number {
+        // 构建EditControlView来处理输入
+        this._EditViewHandle = new Forge.EditControlView();
+        this._EditViewHandle.addImeEventListener({
+            OnTextChanged: this._OnTextChanged.bind(this),
+            OnStatusChanged: this._OnStatusChanged.bind(this),
+            OnEditAction: null
+        });
+
+        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._TextChangedCount
+                );
+                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() {
+        this._EditViewHandle?.releaseResource();
+        this._EditVisibleArea!.releaseResource();
+        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, scroll_left?: number) {
+        let p = {
+            text,
+            cursor_index,
+            scroll_left
+        }
+        if (typeof text != 'string' || text.length >= this._MaxInputLenth) {
+            // 非法输入或者输入限制，超输入限制，文字内容不改变
+            if (this._EditViewHandle && this._IsFocus) {
+                this._EditViewHandle.updateCursorOffset(
+                    this._CurrentDspText,
+                    this._CurrentCursorOffset,
+                    Math.ceil(-this._TextLeft),
+                    0
+                );
+            }
+            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,
+                    Math.ceil(-this._TextLeft),
+                    0
+                );
+                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!);
+            this._TextChangedCount++; // 记录文字信息发生了变化
+        } else {
+            // 仅由EditView发出来的光标移动事件
+        }
+
+        // 在文字信息更新后，重算显示位置
+        let new_text_left = this._EditVisibleArea!.calculateSlide(
+            origin_dsp_text,
+            this._CurrentDspText,
+            origin_dsp_width,
+            this._CurrentDspWith,
+            cursor_index,
+            false,
+            this._TextChangedCount
+        );
+
+        this._UpdateDispay(new_text_left, cursor_index);
+
+        if (text_changed) {
+            this._OnTextChangedCallback?.(this._CurrentFullText, this._CurrentDspText);
+        }
+    }
+
+    private _OnStatusChanged(visible: boolean) {
+    }
+
+    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);
+    }
+}