@shijiu/jsview-vue 1.9.888 → 1.9.921

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/BrowserApic.vue

@@ -5,11 +5,12 @@
  * @LastEditTime: 2021-10-13 17:13:24
  * @Description: file content
 -->
-<script>
+<script setup>
 import Viewer from "./Viewer";
 import WebpData from "./WebpData";
 import GifData from "./GifData";
 import { LoopType } from "./LoopToolBase";
+import { onMounted, shallowRef } from "vue";
 
 const loadImage = (url) => {
   return new Promise((resolve, reject) => {
@@ -51,74 +52,75 @@ const getUrl = (base_url) => {
   }
 };
 
-let TOKEN = 0;
-
-export default {
-  props: {
-    src: String,
-    style: Object,
-    autoPlay: {
-      type: Boolean,
-      default: true,
-    },
-    loopType: {
-      type: Number,
-      default: LoopType.LOOP_DEFAULT,
-    },
-    loopInfo: {
-      type: Array,
-      default: () => [[-1, -1, -1]],
-    },
-    onStart: Function,
-    onEnd: Function,
-    onLoad: Function,
+const props = defineProps({
+  src: String,
+  style: Object,
+  autoPlay: {
+    type: Boolean,
+    default: true,
   },
-  setup() {
-    return {
-      viewId: -1,
-      viewer: null,
-      canvasId: "JsvApic" + TOKEN++,
-    };
+  loopType: {
+    type: Number,
+    default: LoopType.LOOP_DEFAULT,
   },
-  methods: {
-    play() {
-      this.viewer?.play();
-    },
-    stop() {
-      this.viewer?.stop();
-    },
+  loopInfo: {
+    type: Array,
+    default: () => [[-1, -1, -1]],
   },
-  mounted() {
-    let canvas = window.originDocument.getElementById(this.canvasId);
-    if (canvas) {
-      loadImage(getUrl(this.src))
-        .then((data) => {
-          let listener = {
-            onstart: this.onStart,
-            onend: this.onEnd,
-          };
-          this.viewer = new Viewer(
-            data,
-            canvas,
-            listener,
-            this.autoPlay,
-            this.loopType,
-            this.loopInfo
-          );
-          if (this.onLoad) {
-            this.onLoad();
-          }
-        })
-        .catch((err) => console.error(err));
-    } else {
-      console.error("apic get canvas failed.");
-    }
+  onStart: Function,
+  onEnd: Function,
+  onLoad: Function,
+});
+
+let viewer = null;
+let canvasProxyRef = shallowRef(null);
+
+onMounted(() => {
+  let domLayoutView = canvasProxyRef.value.jsvGetProxyView();
+  domLayoutView.RegisterOnProxyReady(() => {
+    // 制作canvas
+    let canvas = window.originDocument.createElement("canvas");
+    canvas.style.width = props.style.width + "px";
+    canvas.style.height = props.style.height + "px";
+    domLayoutView.HtmlGetElement().appendChild(canvas);
+
+    loadImage(getUrl(props.src))
+      .then((data) => {
+        let listener = {
+          onstart: props.onStart,
+          onend: props.onEnd,
+        };
+        viewer = new Viewer(
+          data,
+          canvas,
+          listener,
+          props.autoPlay,
+          props.loopType,
+          props.loopInfo
+        );
+        if (props.onLoad) {
+          props.onLoad();
+        }
+      })
+      .catch((err) => console.error(err));
+  });
+});
+
+defineExpose({
+  play: () => {
+    viewer?.play();
   },
-};
+  stop: () => {
+    viewer?.stop();
+  },
+});
+</script>
 
+<script>
+import { LoopType } from "./LoopToolBase";
 export { LoopType };
 </script>
 
 <template>
-  <jsve-canvas :id="canvasId" :style="style" />
-</template>
+  <div ref="canvasProxyRef" :style="props.style" />
+</template>

package/utils/JsViewVueWidget/JsvApic/JsvApic.vue

@@ -68,59 +68,34 @@ export default {
   methods: {
     play() {
       if (this.$refs.element) {
-        let main_view = this.$refs.element.jsvGetProxyView();
-        if (main_view && main_view.ChildViews.length > 0) {
-          let target_view = main_view.ChildViews[0];
-          if (
-            target_view.TextureSetting &&
-            target_view.TextureSetting.Texture &&
-            target_view.TextureSetting.Texture.RenderTexture
-          ) {
-            let params = {
-              LT: this.loopType,
-              LI: this.loopInfo,
-            };
-            ForgeExtension.TextureManager.DispatchCommand(
-              target_view.TextureSetting.Texture.RenderTexture.IdToken,
-              0,
-              JSON.stringify(params)
-            );
-            target_view.TextureSetting.Texture.unregisterOnStart(
-              this.onStartId
-            );
-            if (this.onStart) {
-              this.onStartId =
-                target_view.TextureSetting.Texture.registerOnStart(
-                  this.onStart
-                );
-            }
-            target_view.TextureSetting.Texture.unregisterOnEnd(this.onEndId);
-            if (this.onEnd) {
-              this.onEndId = target_view.TextureSetting.Texture.registerOnEnd(
-                this.onEnd
-              );
-            }
-          }
+        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+          ForgeExtension.TextureManager
+        );
+
+        let params = {
+          LT: this.loopType,
+          LI: this.loopInfo,
+        };
+        mainViewTexture.DispatchCommand(
+          Forge.NativeConstant.APIC_PLAY,
+          JSON.stringify(params)
+        );
+        mainViewTexture.unregisterOnStart(this.onStartId);
+        if (this.onStart) {
+          this.onStartId = mainViewTexture.registerOnStart(this.onStart);
+        }
+        mainViewTexture.unregisterOnEnd(this.onEndId);
+        if (this.onEnd) {
+          this.onEndId = mainViewTexture.registerOnEnd(this.onEnd);
         }
       }
     },
     stop() {
       if (this.$refs.element) {
-        let main_view = this.$refs.element.jsvGetProxyView();
-        if (main_view && main_view.ChildViews.length > 0) {
-          let target_view = main_view.ChildViews[0];
-          if (
-            target_view.TextureSetting &&
-            target_view.TextureSetting.Texture &&
-            target_view.TextureSetting.Texture.RenderTexture
-          ) {
-            ForgeExtension.TextureManager.DispatchCommand(
-              target_view.TextureSetting.Texture.RenderTexture.IdToken,
-              1,
-              ""
-            );
-          }
-        }
+        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+          ForgeExtension.TextureManager
+        );
+        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, "");
       }
     },
   },
@@ -130,44 +105,26 @@ export default {
     }
     if (this.onLoad) {
       if (this.$refs.element) {
-        let main_view = this.$refs.element.jsvGetProxyView();
-        if (main_view && main_view.ChildViews.length > 0) {
-          let target_view = main_view.ChildViews[0];
-          if (
-            target_view.TextureSetting &&
-            target_view.TextureSetting.Texture &&
-            target_view.TextureSetting.Texture.RenderTexture
-          ) {
-            target_view.TextureSetting.Texture.RegisterLoadImageCallback(
-              null,
-              this.onLoad,
-              null
-            );
-          }
-        }
+        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+          ForgeExtension.TextureManager
+        );
+        mainViewTexture.RegisterLoadImageCallback(null, this.onLoad, null);
       }
     }
   },
   beforeUnmount() {
     this.stop();
     if (this.$refs.element) {
-      let main_view = this.$refs.element.jsvGetProxyView();
-      if (main_view && main_view.ChildViews.length > 0) {
-        let target_view = main_view.ChildViews[0];
-        if (
-          target_view.TextureSetting &&
-          target_view.TextureSetting.Texture &&
-          target_view.TextureSetting.Texture.RenderTexture
-        ) {
-          if (this.onStart) {
-            target_view.TextureSetting.Texture.unregisterOnStart(
-              this.onStartId
-            );
-          }
-          if (this.onEnd) {
-            target_view.TextureSetting.Texture.unregisterOnEnd(this.onEndId);
-          }
-        }
+      let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+        ForgeExtension.TextureManager
+      );
+
+      if (this.onStart) {
+        mainViewTexture.unregisterOnStart(this.onStartId);
+      }
+
+      if (this.onEnd) {
+        mainViewTexture.unregisterOnEnd(this.onEndId);
       }
     }
   },
@@ -175,5 +132,11 @@ export default {
 </script>
 
 <template>
-  <img jsv_disable_apic_autoplay alt="" ref="element" :src="src" :style="style" />
-</template>
+  <img
+    data-jsv-disable-apic-autoplay
+    alt=""
+    ref="element"
+    :src="src"
+    :style="style"
+  />
+</template>

package/utils/JsViewVueWidget/JsvFilterView.vue

@@ -32,22 +32,17 @@ const props = defineProps({
   filterType: {
     type: String,
     default: null,
-  }
+  },
 });
 
 let filterView = new Forge.FilterView();
-const view_store = ForgeExtension.RootActivity
-  ? ForgeExtension.RootActivity.ViewStore
-  : Forge.sViewStore;
 
-let viewId = view_store.add(
-  new Forge.ViewInfo(filterView)
-);
+let viewId = Forge.sViewStore.add(new Forge.ViewInfo(filterView, null));
 
 // 监控filter改变
 watchEffect(() => {
   if (filterView) {
-    console.log(`filterType change to ${props.filterType}`)
+    console.log(`filterType change to ${props.filterType}`);
     switch (props.filterType) {
       case "gray-down":
         filterView.FilterSwitch(true);
@@ -59,23 +54,23 @@ watchEffect(() => {
 });
 
 onBeforeUnmount(() => {
-  const view_store = ForgeExtension.RootActivity
-      ? ForgeExtension.RootActivity.ViewStore
-      : Forge.sViewStore;
-  view_store.remove(viewId);
+  if (viewId > 0) {
+    Forge.sViewStore.remove(viewId);
+    viewId = -1;
+  }
 });
-
 </script>
 
 <template>
-  <div 
+  <div
     :style="{
       left: left,
       top: top,
       width: width,
-      height: height
-      }"
-    :jsv_innerview="viewId">
+      height: height,
+    }"
+    :data-jsv-vw-innerview="viewId"
+  >
     <slot></slot>
   </div>
 </template>

package/utils/JsViewVueWidget/JsvGrid.vue

@@ -66,7 +66,7 @@
 -->
 <script>
 import { reactive } from "vue";
-import { EdgeDirection, FocusMoveType } from "../JsViewEngineWidget";
+import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
 
 const TAG = "JsvGrid";
 
@@ -93,6 +93,14 @@ class LineType extends UpdateType {
   }
 }
 
+const FocusMoveType = {
+  NO_ADJUST: 0x00000000,
+  COLUMN_LOOP: 0x00000001,
+  ROW_LOOP: 0x00000001 << 1,
+  COLUMN_FIND_NEAR: 0x00000001 << 2,
+  ROW_FIND_NEAR: 0x00000001 << 3,
+};
+
 export { PageType, LineType, FocusMoveType };
 
 export default {
@@ -660,4 +668,4 @@ export default {
       ></slot>
     </div>
   </jsv-focus-block>
-</template>
+</template>

package/utils/JsViewVueWidget/JsvInput/Cursor.vue

@@ -1,16 +1,18 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-20 10:37:01
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-02 13:28:59
+ * @LastEditTime: 2023-02-01 13:47:13
  * @Description: file content
 -->
 <script>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 export default {
   props: {
-    left: Number,
-    top: Number,
+    left: {
+      type: Number,
+      default: 0,
+    },
+    top: { type: Number, default: 0 },
     width: Number,
     height: Number,
     color: String,

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -1,13 +1,12 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-20 10:35:56
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-02 13:44:56
+ * @LastEditTime: 2023-02-01 13:47:26
  * @Description: file content
 -->
 <script>
+import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
 import { Forge, ForgeExtension } from "@shijiu/jsview/dom/jsv-forge-define";
-import { EdgeDirection } from "../../JsViewEngineWidget";
 import CursorVue from "./Cursor.vue";
 
 const InputType = {
@@ -279,52 +278,6 @@ export default {
       return Forge.sTextUtils.GetTextWidth(this._getStringWithFont(str));
     },
 
-    // _dispatchEvent(event) {
-    //   if (!event || this.readonly) {
-    //     return;
-    //   }
-
-    //   const pre_full_str = this.fullString;
-    //   const pre_index = this.curOffset;
-    //   switch (event.type) {
-    //     case InputDispatcher.Type.add:
-    //       if (this.type === Input.type.NUMBER && !ifDigital(event.data)) {
-    //         console.log(`The input data:${event.data} is not number`);
-    //         break;
-    //       }
-    //       if (this.fullString.length < this.maxlength) {
-    //         const new_str =
-    //           pre_full_str.slice(0, pre_index) +
-    //           event.data +
-    //           pre_full_str.slice(pre_index);
-    //         const new_index = pre_index + event.data.length;
-    //         this._onTextChanged(new_str, new_index);
-    //       } else {
-    //         if (this.onTextOverflow) {
-    //           this.onTextOverflow();
-    //         }
-    //       }
-    //       break;
-    //     case InputDispatcher.Type.delete:
-    //       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);
-    //       }
-    //       break;
-    //     case InputDispatcher.Type.clear:
-    //       this._onTextChanged("", 0);
-    //       break;
-    //     case InputDispatcher.Type.replace:
-    //       this._onTextChanged(event.data, event.data.length);
-    //       break;
-    //     default:
-    //       break;
-    //   }
-    // },
-
     add(string) {
       if (this.type === InputType.NUMBER && !ifDigital(string)) {
         // console.log(`The input data:${string} is not number`);
@@ -710,10 +663,8 @@ export default {
     this.editControlView = new Forge.EditControlView();
     this.editControlView.OnTextChanged = this._onTextChanged;
     this.editControlView.OnStatusChanged = this._onStatusChanged;
-    const view_store = ForgeExtension.RootActivity
-      ? ForgeExtension.RootActivity.ViewStore
-      : Forge.sViewStore;
-    this.editControlViewId = view_store.add(
+
+    this.editControlViewId = Forge.sViewStore.add(
       new Forge.ViewInfo(this.editControlView)
     );
     const cur_position = this._calculateCursorPosition(
@@ -735,10 +686,7 @@ export default {
   },
   beforeUnmount() {
     if (this.editControlViewId != -1) {
-      const view_store = ForgeExtension.RootActivity
-        ? ForgeExtension.RootActivity.ViewStore
-        : Forge.sViewStore;
-      view_store.remove(this.editControlViewId);
+      Forge.sViewStore.remove(this.editControlViewId);
       this.editControlViewId = -1;
     }
     this.clearCursorPauseTimer();
@@ -773,7 +721,7 @@ export default {
           left: this.textLeft,
           width: this.textWidth,
           height: height,
-          lineHeight: `${height}px`,
+          lineHeight: height,
           ...this.fontStyle,
         }"
       >
@@ -785,7 +733,7 @@ export default {
           left: 0,
           width: width,
           height: height,
-          lineHeight: `${height}px`,
+          lineHeight: height,
           ...fontStyle,
           color: placeholderColor,
         }"
@@ -801,6 +749,6 @@ export default {
       :color="cursorColorInner"
       :width="cursorWidth"
     />
-    <div :jsv_innerview="editControlViewId" />
+    <div :data-jsv-vw-innerview="editControlViewId" />
   </jsv-focus-block>
 </template>

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -10,21 +10,15 @@
 
 <script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import { getTextWidth } from "./utils";
-import {
-  shallowRef,
-  computed,
-  toRaw,
-  onMounted,
-  onBeforeUnmount,
-} from "vue";
+import { getTextWidth } from "../JsViewVueTools/JsvTextTools";
+import { shallowRef, computed, toRaw, onMounted, onBeforeUnmount } from "vue";
 
 const defaultFontStyle = () => {
   return {
     color: "rgba(255,255,255,1.0)",
     fontSize: 10,
     textAlign: "start",
-    lineHeight: "20px",
+    lineHeight: 20,
     whiteSpace: "nowrap",
     direction: "ltr",
   };
@@ -45,7 +39,7 @@ const props = defineProps({
         color: "rgba(255,255,255,1.0)",
         fontSize: 10,
         textAlign: "start",
-        lineHeight: "20px",
+        lineHeight: 20,
         whiteSpace: "nowrap",
         direction: "ltr",
       };
@@ -214,8 +208,11 @@ onBeforeUnmount(() => {
     >
       <div
         ref="textDiv"
-        :style="{ ...fontStyle, height: style.height }"
-        :jsv_text_align_minwidth="style.width"
+        :style="{
+          ...fontStyle,
+          height: style.height,
+          JsvTextAlignMinWidth: style.width,
+        }"
       >
         {{ text }}
       </div>

package/utils/JsViewVueWidget/JsvMaskClipDiv.vue

@@ -107,34 +107,40 @@ export default {
       this.cache.maskHeight = this.maskHeight;
     },
     _initForHtml() {
-      const canvas = window.originDocument.createElement("canvas");
-      canvas.style.width = this.style.width + "px";
-      canvas.style.height = this.style.height + "px";
-      this.$refs.innerView?.jsvGetProxyView(true).Element.appendChild(canvas);
+      let _this = this;
+      this.$refs.innerView?.jsvGetProxyView(true).RegisterOnProxyReady(() => {
+        const canvas = window.originDocument.createElement("canvas");
+        canvas.style.width = _this.style.width + "px";
+        canvas.style.height = _this.style.height + "px";
+        _this.$refs.innerView
+          ?.jsvGetProxyView(true)
+          .HtmlGetElement()
+          .appendChild(canvas);
 
-      const clip_image = new Image();
-      const bg_image = new Image();
-      clip_image.src = this.maskSrc;
-      bg_image.src = this.viewSrc;
-      let clip_ready = false;
-      let bg_ready = false;
+        const clip_image = new Image();
+        const bg_image = new Image();
+        clip_image.src = _this.maskSrc;
+        bg_image.src = _this.viewSrc;
+        let clip_ready = false;
+        let bg_ready = false;
 
-      clip_image.onload = () => {
-        clip_ready = true;
-        this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
-      };
+        clip_image.onload = () => {
+          clip_ready = true;
+          _this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
+        };
 
-      bg_image.onload = () => {
-        bg_ready = true;
-        this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
-      };
+        bg_image.onload = () => {
+          bg_ready = true;
+          _this._drawClip(canvas, clip_image, clip_ready, bg_image, bg_ready);
+        };
+      });
     },
     _updateInnerView() {
       if (this.innerView === null) {
         // 初始化View
         this.innerView = new Forge.LayoutView();
-        this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
-          new Forge.ViewInfo(this.innerView)
+        this.innerViewId = Forge.sViewStore.add(
+          new Forge.ViewInfo(this.innerView, null)
         );
       }
 
@@ -187,7 +193,7 @@ export default {
   beforeUnmount() {
     // 清理View管理缓存
     if (this.innerViewId !== -1) {
-      ForgeExtension.RootActivity.ViewStore.remove(this.innerViewId);
+      Forge.sViewStore.remove(this.innerViewId);
       this.innerViewId = -1;
       this.innerView = null;
     }
@@ -207,12 +213,12 @@ export default {
   <div
     v-else
     ref="innerView"
-    :jsv_innerview="innerViewId"
+    :data-jsv-vw-innerview="innerViewId"
     :style="{
       top: style.top,
       left: style.left,
       width: style.width,
-      height: style.height
+      height: style.height,
     }"
   ></div>
-</template>
+</template>

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -100,4 +100,4 @@ export default {
   <div v-else :style="{ ...style }">
     <slot />
   </div>
-</template>
+</template>