@shijiu/jsview-vue 2.2.128 → 2.2.201

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -16,6 +16,7 @@ interface ItemConfig {
   normalZIndex: number,
   itemSlide: number,
   permanent: boolean,
+  showSkeleton: boolean,
 }
 
 interface CustomerCallbackMap {
@@ -38,6 +39,7 @@ export class RenderItem {
   public touchInit: boolean = false;
   public rootDiv: HTMLDivElement | null = null;
   public enableTap: boolean = false;
+  public renderKey: Ref<number> = ref(0);
 
   private customerCallbackMap: CustomerCallbackMap = {};
   private onRef: (() => void) | null;
@@ -70,6 +72,14 @@ export class RenderItem {
     return this.templateInfo.index;
   }
 
+  public updateCustomData(newCustomData: object, newItemConfig: ItemConfig) {
+    this.customerData = newCustomData;
+    this.itemConfig = newItemConfig;
+    this.customerCallbackMap = {};
+    this.mounted.value = false;
+    this.renderKey.value++;
+  }
+
   //TODO item的div ref 会调用多次, 待调查
   public divRef = (ele: HTMLDivElement | null) => {
     this.rootDiv = ele;
@@ -162,5 +172,6 @@ export class RenderItem {
   private onDivUnmounted(): void {
     this.touchInit = false;
     this.divMountedCallback.clear();
+    this.customerCallbackMap = {};
   }
 }

package/utils/JsViewEngineWidget/MetroWidget/TaskManager.ts

@@ -211,4 +211,12 @@ export class TaskManager {
     this.cancellableRunnerList.push(cancellableRunner);
     cancellableRunner.run();
   }
+
+  public cancelAllTask() {
+    this.cleanTaskCache();
+    this.cancellableRunnerList.forEach(t => {
+      t.cancel();
+    });
+    this.cancellableRunnerList = [];
+  }
 }

package/utils/JsViewEngineWidget/TemplateParser/CommonMetroTemplate.ts

@@ -794,18 +794,28 @@ class CommonMetroTemplate extends MetroTemplate {
         endIndex = baseItem.index;
       }
       if (Math.abs(startIndex - endIndex) <= 1) {
-        const tailItem = this.templateList[this.getTailItemIndex()];
-        let tailInfo: any = null;
-        if (tailItem) {
-          tailInfo = {
-            left: tailItem.left,
-            top: tailItem.top,
-            width: tailItem.width,
-            height: tailItem.height,
+        const startItem = this.templateList[startIndex];
+        const endItem = this.templateList[endIndex];
+        if (visible(startItem[posKey], startItem[posKey] + startItem[sizeKey])) {
+          baseItem = startItem;
+          break;
+        } else if (visible(endItem[posKey], endItem[posKey] + endItem[sizeKey])) {
+          baseItem = endItem;
+          break;
+        } else {
+          const tailItem = this.templateList[this.getTailItemIndex()];
+          let tailInfo: any = null;
+          if (tailItem) {
+            tailInfo = {
+              left: tailItem.left,
+              top: tailItem.top,
+              width: tailItem.width,
+              height: tailItem.height,
+            }
           }
+          console.log("MetroWidget: can not find visible item", visibleStart, visibleEnd, tailInfo);
+          return [-1, -1];
         }
-        console.log("MetroWidget: can not find visible item", visibleStart, visibleEnd, tailInfo);
-        return [-1, -1];
       } else {
         baseItem = this.templateList[Math.round((startIndex + endIndex) / 2)];
       }

package/utils/JsViewEngineWidget/TemplateParser/ListMetroTemplate.ts

@@ -157,6 +157,23 @@ class ListMetroTemplate extends MetroTemplate {
     return [start, end];
   }
 
+  private cleanResizeChangeItem(i: TemplateItem) {
+    i.neighborIndexList.left = [];
+    i.neighborIndexList.top = [];
+    i.neighborIndexList.right = [];
+    i.neighborIndexList.bottom = [];
+
+    i.tmpNeighborIndexList.left = [];
+    i.tmpNeighborIndexList.top = [];
+    i.tmpNeighborIndexList.right = [];
+    i.tmpNeighborIndexList.bottom = [];
+
+    i.pathHistory.left = -1;
+    i.pathHistory.top = -1;
+    i.pathHistory.right = -1;
+    i.pathHistory.bottom = -1;
+  }
+
   public updateItemSize(index: number, newSize: { width: number, height: number }): void {
     const item = this.templateList[index];
     if (!item || (item.width == newSize.width && item.height == newSize.height)) {
@@ -173,6 +190,7 @@ class ListMetroTemplate extends MetroTemplate {
     }
     //TODO 不是一次性加载全部, 可视区域外的懒惰加载
     for (let i of needChangeList) {
+      this.cleanResizeChangeItem(i);
       this._addTemplateItem(i);
       i.layoutCache.cache({
         left: i.left,

package/utils/JsViewEngineWidget/TemplateParser/TemplateItemAdder.ts

@@ -55,6 +55,8 @@ class TemplateItemAdder {
   }
 
   public tryAddItem(cur_item: TemplateItem | null = null, page_num: number = 1) {
+    if (!this._Data || this._Data.length <= 0) { return; }
+
     let added = false;
     if (
       this._CurIndex < this._Data.length &&
@@ -86,6 +88,8 @@ class TemplateItemAdder {
   }
 
   tryAddItemByPosition(position: number) {
+    if (!this._Data || this._Data.length <= 0) { return; }
+
     const page_num = Math.ceil(position / this._PageRange + 1);
     if (page_num > this._CurPage) {
       this.tryAddItem(null, page_num - this._CurPage);
@@ -94,6 +98,7 @@ class TemplateItemAdder {
   }
 
   tryAddItemByIndex(index: number) {
+    if (!this._Data || this._Data.length <= 0) { return; }
     let _index = Math.min(index, this._Data.length - 1);
     let added = false;
     while (this._CurIndex <= _index) {
@@ -121,6 +126,7 @@ class TemplateItemAdder {
   }
 
   tryAddItemById(id: number) {
+    if (!this._Data || this._Data.length <= 0) { return; }
     let _id = Math.min(id, this._Data.length - 1); // id小于等于index, 因此为了避免过界取小值
     const last_id = this._MetroTemplate.focusableSize - 1;
     if (last_id < _id) {
@@ -153,6 +159,7 @@ class TemplateItemAdder {
   }
 
   tryAddItemByUid(uid: string) {
+    if (!this._Data || this._Data.length <= 0) { return; }
     if (this._MetroTemplate.getItemByUid(uid)) {
       //已经添加
       return;

package/utils/JsViewEngineWidget/{index.js → index.ts}

@@ -11,7 +11,7 @@ export * from "./MetroWidget/Dispatcher";
 export { default as SimpleWidget } from "./MetroWidget/MetroWidget.vue";
 export { default as MetroWidget } from "./MetroWidget/MetroWidget.vue";
 export { default as ListWidget } from "./MetroWidget/ListWidget.vue";
-export { METRO_WIDGET, METRO_WIDGET_CONST } from "./MetroWidget/Const.ts";
+export { METRO_WIDGET, METRO_WIDGET_CONST } from "./MetroWidget/Const";
 
 export { default as JsvFocusBlock } from "./JsvFocus/JsvFocusBlock.vue";
 export { jsvCreateFocusManager, useFocusHub } from "./JsvFocus/JsvFocusManager";

package/utils/JsViewPlugin/JsvAudio/AudioProxy.js

@@ -11,7 +11,7 @@ import { ScreenLockManager } from "./ScreenLockManager.js";
 
 let sPluginLoader = GetPluginLoader();
 
-const TAG = "JsvAudio";
+const TAG = "JsvAudio:";
 
 let keyToken = 0;
 const getKeyToken = () => {
@@ -77,6 +77,8 @@ class AudioProxy {
     this._created = false;
     this._eventListener = {};
     this._propCache = {};
+    this._unloaded = false;
+    this._visibility = window.JsView?.getVisibility();
     this._onVisibilityChange = this.onVisibilityChange.bind(this);
     window.JsView?.onVisibilityChange(this._onVisibilityChange);
   }
@@ -207,18 +209,33 @@ class AudioProxy {
 
   /** control */
   load() {
+    if (this._unloaded) {
+      console.warn(TAG, "Instead of calling load() after unload(), please update component's key to create a new JsvAudio.");
+      return;
+    }
     this.setProperty("enablePlayer", true);
   }
 
   play() {
-    this.setProperty("paused", false);
+    if (this._visibility) {
+      this.setProperty("paused", false);
+      if (typeof this._propCache["customerPause"] !== "undefined") {
+        this._propCache["customerPause"] = false;
+      }
+    } else {
+      console.warn(TAG, "JsvAudio can not play when it is invisible.");
+    }
   }
 
   pause() {
     this.setProperty("paused", true);
+    if (typeof this._propCache["customerPause"] !== "undefined") {
+      this._propCache["customerPause"] = true;
+    }
   }
 
   unload() {
+    this._unloaded = true;
     this.pause();
     this.setProperty("enablePlayer", false);
   }
@@ -321,6 +338,7 @@ class AudioProxy {
   onVisibilityChange(state) {
     console.log(TAG, "audio visibility change", JSON.stringify(state));
     if (state.status == "show") {
+      this._visibility = true;
       if (typeof this._propCache["customerPause"] != "undefined") {
         const customerPause = this._propCache["customerPause"];
         delete this._propCache["customerPause"];
@@ -330,6 +348,7 @@ class AudioProxy {
       }
     } else {
       // pause when invisible
+      this._visibility = false;
       this._propCache["customerPause"] = this._propCache["paused"];
       this.pause();
     }

package/utils/JsViewVueTools/ConstSymbol.ts

@@ -1,3 +1,3 @@
 
-export const VERTICAL: Symbol = Symbol("vertical");
-export const HORIZONTAL: Symbol = Symbol("horizontal");
+export const VERTICAL = Symbol("vertical");
+export const HORIZONTAL = Symbol("horizontal");

package/utils/JsViewVueTools/JsvPreDownloader.ts

@@ -74,7 +74,7 @@ abstract class JsvPreDownloaderBase {
           } else {
             this.downloadInner(url[i].url, url[i].netSetting, !!url[i].isImage)
               .then(
-                (info) => {
+                (info: any) => {
                   downloadResult[i] = {
                     succeed: true,
                     info: info,
@@ -82,7 +82,7 @@ abstract class JsvPreDownloaderBase {
                   workNumber += 1
                   check();
                 },
-                (errorInfo) => {
+                (errorInfo: any) => {
                   downloadResult[i] = {
                     succeed: false,
                     info: errorInfo,
@@ -119,7 +119,7 @@ class JsvPreDownloaderInJsView extends JsvPreDownloaderBase {
           netSetting,
           fileType: isImage ? "image" : "notImage",
         };
-        (window as any).jJsvInnerUtils.downloadResource(url, JSON.stringify(setting), (info) => {
+        (window as any).jJsvInnerUtils.downloadResource(url, JSON.stringify(setting), (info: any) => {
           try {
             const obj: CallbackInfo = JSON.parse(info);
             const result = JSON.parse(obj.info);

package/utils/JsViewVueTools/JsvTextureStore/JsvTextureStore.ts

@@ -26,7 +26,7 @@ let sJsvTextureConst = {
     BOTTOM: 4,
 }
 
-let sTextureStoreApi: Object = {
+let sTextureStoreApi = {
     /**
      * canvasTexture
      * 创建CanvasTexture句柄，执行commit()后, 获取访问名(访问名规则: 输入参数 baseName + 分配id)

package/utils/JsViewVueTools/index.js

@@ -5,24 +5,24 @@
  */
 
 export * from "./JsvHashHistory";
-export * from "./JsvDynamicCssStyle.js";
-export * from "./JsvDynamicKeyFrames.ts";
-export * from "./JsvRuntimeBridge.js";
+export * from "./JsvDynamicCssStyle";
+export * from "./JsvDynamicKeyFrames";
+export * from "./JsvRuntimeBridge";
 export * from "./NinePatchHelper";
 export * from "./TypeCheckAndSet";
-export * from "./JsvRefTaker.js";
-export * from "./JsvStyleClass.js";
-export * from "./JsvStyleSheetsDeclarer.js";
-export * from "./DebugContentShellJBridge.js";
-export * from "./DebugTool.js";
-export * from "./JsvImpactTracer.js";
-export * from "./JsvTextTools.js";
-export * from "./JsvPreDownloader.ts"
-export { default as DefaultKeyCodeMap } from "./DefaultKeyMap.js";
-export * from "./JsvDemoTester.js"
-export * from "./JsvPerformance.ts"
-export * from "./JsvTextureStore/JsvTextureStore.ts"
-export * from "./JsvTextureDefines.ts"
-export * from "./JsvFederationTools.ts"
-export * from "./ConstSymbol.ts"
-export * from "./ForgeConstDefine.ts"
+export * from "./JsvRefTaker";
+export * from "./JsvStyleClass";
+export * from "./JsvStyleSheetsDeclarer";
+export * from "./DebugContentShellJBridge";
+export * from "./DebugTool";
+export * from "./JsvImpactTracer";
+export * from "./JsvTextTools";
+export * from "./JsvPreDownloader"
+export { default as DefaultKeyCodeMap } from "./DefaultKeyMap";
+export * from "./JsvDemoTester"
+export * from "./JsvPerformance"
+export * from "./JsvTextureStore/JsvTextureStore"
+export * from "./JsvTextureDefines"
+export * from "./JsvFederationTools"
+export * from "./ConstSymbol"
+export * from "./ForgeConstDefine"

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

@@ -81,8 +81,8 @@ const play = () => {
   viewer?.play(props.loopType, props.loopInfo);
 };
 
-const stop = () => {
-  viewer?.stop();
+const stop = (frameCount = -1) => {
+  viewer?.stop(frameCount);
 };
 
 onMounted(() => {

package/utils/JsViewVueWidget/JsvApic/JsvApic/JsvApic.vue

@@ -79,12 +79,12 @@ export default {
         }
       }
     },
-    stop() {
+    stop(frameCount = -1) {
       if (this.$refs.element) {
         let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
           ForgeHandles.TextureManager
         );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, "");
+        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
       }
     },
   },
@@ -102,7 +102,7 @@ export default {
     }
   },
   beforeUnmount() {
-    this.stop();
+    this.stop(0);
     if (this.$refs.element) {
       let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
         ForgeHandles.TextureManager

package/utils/JsViewVueWidget/JsvApic/JsvApic2/BrowserApic2.vue

@@ -104,8 +104,8 @@ defineExpose({
     waitForPlayInfo = args;
     viewer?.play(...args);
   },
-  stop: () => {
-    viewer?.stop();
+  stop: (frameCount = -1) => {
+    viewer?.stop(frameCount);
   },
 });
 </script>

package/utils/JsViewVueWidget/JsvApic/JsvApic2/JsvApic2.vue

@@ -88,12 +88,12 @@ export default {
         }
       }
     },
-    stop() {
+    stop(frameCount = -1) {
       if (this.$refs.element) {
         let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
           ForgeHandles.TextureManager
         );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, "");
+        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
       }
     },
   },
@@ -108,7 +108,7 @@ export default {
     }
   },
   beforeUnmount() {
-    this.stop();
+    this.stop(0);
     if (this.$refs.element) {
       let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
         ForgeHandles.TextureManager

package/utils/JsViewVueWidget/JsvApic/JsvBrowserApicLib/Viewer.js

@@ -23,7 +23,7 @@ class Viewer {
     this._Listener = listener;
     this._TimeoutId = -1;
     this._EndState = ApicEndState.LAST_FRAME;
-    // this.renderFrame(0);
+    this._CurrentIndex = -1;
   }
 
   _createLoopTool(loop_type, loop_info) {
@@ -59,8 +59,12 @@ class Viewer {
     this._LoopTool.setApicInfo(this._ApicData.FrameCount, this._ApicData.LoopCount);
   }
 
-  stop() {
+  stop(frameCount = -1) {
     clearTimeout(this._TimeoutId);
+    if (frameCount >= 0 && this._CurrentIndex !== frameCount) {
+      this._CurrentIndex = frameCount;
+      this.renderFrame(frameCount)
+    }
     if (this._Listener?.onend) {
       this._Listener.onend();
     }
@@ -88,7 +92,8 @@ class Viewer {
 
   renderLoop() {
     if (this._LoopTool.hasNext()) {
-      let duration = this.renderFrame(this._LoopTool.next());
+      this._CurrentIndex = this._LoopTool.next()
+      let duration = this.renderFrame(this._CurrentIndex);
       this._TimeoutId = setTimeout(() => {
         this.renderLoop();
       }, duration);

package/utils/JsViewVueWidget/JsvClipDiv/JsvClipDiv.vue

@@ -0,0 +1,42 @@
+<!--
+ * 【模块 export 内容】
+ * JsvClipDiv: Vue高阶组件，overhidden:true的div，附带有其他clip设定能力
+ *  props说明:
+        style:  {Object}    (必选, 响应式) 同div的style, 提供top, left, width, height, transition, transform信息，
+                            但目前不支持borderRaduis
+ *
+ *  expose函数说明:
+ *
+-->
+
+<template>
+  <div v-bind="rMergedDivProps">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef, watchEffect, defineProps, withDefaults } from "vue";
+
+const rProps = withDefaults(
+  defineProps<{
+    style: object;
+  }>(),
+  {}
+);
+
+// 响应式变量
+let rMergedDivProps = shallowRef({});
+
+watchEffect(() => {
+  let divStyle = {
+    ...rProps.style,
+    overflow: "hidden",
+  };
+  rMergedDivProps.value = {
+    style: divStyle,
+  };
+
+  // TODO: 未来补充补充其他 data-jsv-vw-xxxx 设置
+});
+</script>

package/utils/JsViewVueWidget/JsvClipDiv/index.ts

@@ -0,0 +1 @@
+export { default as JsvClipDiv } from "./JsvClipDiv.vue"

package/utils/JsViewVueWidget/JsvConnectLine/JsvConnectLine.vue

@@ -75,7 +75,7 @@
 <script setup>
 import  JsvLine  from "../JsvLine/index";
 import { createTexture } from "./ArcLineManager";
-import { shallowRef } from "vue";
+import { shallowRef, onBeforeUnmount } from "vue";
 const props = defineProps({
   startPos: {
     type: Object,
@@ -349,6 +349,10 @@ if (props.radius) {
     ? InflectionPoint.y + startPos3Extra
     : props.endPos.y;
 }
+
+onBeforeUnmount(() => {
+  myLineTexture.UnRef()
+})
 </script>
 
 <style scoped></style>

package/utils/JsViewVueWidget/JsvDriftScope/JsvDriftScope.vue

@@ -0,0 +1,82 @@
+<!--
+ * 【模块 export 内容】
+ * JsvDriftScope: Vue高阶组件，放大镜或者望远镜效果, 分为 frame 区域和 scene 区域，frame是游离的ClipView, scene是被Clip部分
+ *  props说明:
+        top {Number}  (可选, 响应式)组件的top, 不填写时默认值为0
+        left {Number}  (可选, 响应式)组件的left, 不填写时默认值为0
+        frameStyle: {Object}  (可选, 响应式) 透视(裁剪)区域外框的style, 此层次无色透明，但是决定Frame层的变化, 支持以下属性
+                            {top, left, width, height, transition, animation, transform, transformOrigin}
+        scopeStyle: {Object}  (必选, 响应式) 透视(裁剪)区域的div的尺寸style, 会叠加frameStyle已经做的形变, 支持以下属性
+                            {width, height, transition, animation, transform, transformOrigin}
+                            做动画时，frameStyle负责位置变化，scope则主要负责尺寸变化
+ *
+ *  template说明:
+        Frame   透视窗(裁剪层)的外框的装饰层
+        Scene   被透视的内容
+ *  expose函数说明:
+ *
+-->
+
+<template>
+  <div
+    :style="{
+      top: rProps.top,
+      left: rProps.left,
+    }"
+  >
+    <div :style="rMergedFrameStyle" data-jsv-vw-mask-drift="true">
+      <!-- clip div -->
+      <jsv-clip-div :style="rProps.scopeStyle">
+        <!-- scene层, 坐标不跟随clip div, 只从属于主div -->
+        <div data-jsv-vw-mask-dock="true">
+          <slot name="Scene" />
+        </div>
+      </jsv-clip-div>
+      <!-- frame层, 坐标跟随clip div -->
+      <slot name="Frame" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef, watchEffect, defineProps, withDefaults } from "vue";
+import JsvClipDiv from "../JsvClipDiv/JsvClipDiv.vue";
+
+interface FrameStyleDefine {
+  top?: number;
+  left?: number;
+  width?: number;
+  height?: number;
+  transition?: string;
+  animation?: string;
+  transform?: string;
+  transformOrigin?: string;
+}
+
+interface ScopeStyleDefine {
+  width: number;
+  height: number;
+  transition?: string;
+  animation?: string;
+  transform?: string;
+  transformOrigin?: string;
+}
+
+const rProps = withDefaults(
+  defineProps<{
+    top?: number;
+    left?: number;
+    frameStyle?: Object; // FrameStyleDefine
+    scopeStyle: Object; // ScopeStyleDefine
+  }>(),
+  { top: 0, left: 0 }
+);
+
+const rMergedFrameStyle = shallowRef({});
+
+watchEffect(() => {
+  rMergedFrameStyle.value = {
+    ...rProps.frameStyle,
+  };
+});
+</script>

package/utils/JsViewVueWidget/JsvDriftScope/index.ts

@@ -0,0 +1 @@
+export { default as JsvDriftScope } from "./JsvDriftScope.vue"

package/utils/JsViewVueWidget/JsvFragShaderView/BrowserJsvFragShaderView.vue

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+  style: {
+    type: Object,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: -1,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  shaderStr: {
+    type: String,
+    required: true,
+  },
+  // [{ name: string, value: number }]
+  uniforms: {
+    type: Array,
+  },
+  // [{ name: string, type: number, resource: object/string }]
+  textures: {
+    type: Array,
+  },
+});
+
+defineExpose({
+  startAnim: () => {},
+  stopAnim: () => {},
+});
+</script>
+<template>
+  <div :style="{
+    left: style.left,
+    top: style.top,
+    width: style.width,
+    height: style.height,
+    backgroundColor: '#00000077',
+    fontSize: 50,
+    color: '#ffffff',
+    textAlign: 'center',
+    lineHeight: style.height,
+  }">
+    浏览器端未支持JsvFragShaderView
+  </div>
+</template>