@shijiu/jsview-vue 2.1.25 → 2.1.200-next-vue.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "2.1.25",
+  "version": "2.1.200-next-vue.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/utils/JsViewEngineWidget/JsvFocusBlock.vue

@@ -227,7 +227,7 @@ onActivated(() => {
 });
 
 onDeactivated(() => {
-  focusNodeRef?.onUnMount();
+  focusNodeRef?.onUnMount(true);
   if (focusNodeRef?.jsvVueComponent) {
     focusNodeRef.jsvVueComponent = undefined;
   }

package/utils/JsViewEngineWidget/JsvFocusHub.ts

@@ -0,0 +1,123 @@
+
+
+class FocusHubApi {
+    private _FocusHub: any; // JsvFocusableNode中的class Hub
+
+    constructor(focusableHubRef: any) {
+        this._FocusHub = focusableHubRef;
+    }
+
+    // 内部接口
+    public getOrigin(): Object {
+        return this._FocusHub;
+    }
+
+    /**
+     * setFocus
+     * 
+     * 设置焦点，在焦点对应的 JsvFocusBlock 完成mounted之前设置的话，
+     * 会在JsvFocusBlock完成mounted后立即设上焦点 
+     * 
+     * @param {string} focusName 
+     *         当前命名空间的名字/全局命名空间的名字。
+     *         当前命名空间的名字: 是指和当前节点相同命名空间的名字(首字符不为".")。
+     *         对于二级命名空间，可以使用 "{namespace}.{name}"的方式。
+     *         全局命名空间的名字: 是指通过getName()函数获取后再附加下级节点的名字。
+     *         *请注意: 请避免手写的全局命名空间名字，防止在二次集成时可能会出现名字找不到的问题。
+     * @param {boolean} passToChild 保持/恢复子焦点的聚焦状态(若此焦点的子焦点为聚焦状态，
+     *         当本焦点从失焦状态恢复为聚焦状态时，子焦点也自动回复为聚焦状态)，默认为不保持/恢复。
+     */
+    public setFocus(focusName: string, passToChild: boolean = false) {
+        this._FocusHub.setFocus(focusName, passToChild);
+    }
+
+    /**
+     * returnFocusToParent
+     * 
+     * 将焦点从当前节点还给其父JsvFocusBlock节点 
+     */
+    public returnFocusToParent() {
+        this._FocusHub.returnFocusToParent();
+    }
+
+    /**
+     * getCurrentFocus
+     * 
+     * 获取当前焦点的的 focusName 信息，用于后续的进行的 setFocus 操作
+     * (注意, 不带NameSpace)
+     * 
+     * @return {string} 当前焦点的focusName
+     */
+    public getCurrentFocus(): string {
+        return this._FocusHub.getCurrentFocus();
+    }
+
+    /**
+     * getLastFocus
+     * 
+     * 获得切到到当前焦点前的上一个焦点的name(注意, 不带NameSpace), 
+     * 注意:如果上一次的焦点已经不在dom树时, 返回null
+     * 
+     * @return {string} 焦点的focusName
+     */
+    public getLastFocus(): string {
+        return this._FocusHub.getLastFocus();
+    }
+
+    /**
+     * getDeactivedPageFocus
+     * 
+     * 在对一个keep-alive的界面进行deactive后，为了未来将其active时恢复离开时的焦点时使用。
+     * 在 onDeactive 回调中调用
+     * 注意: 只有当一个有焦点的keep-alive倍deactive时才能获得
+     * 
+     * @return {string} 焦点的focusName
+     */
+    public getDeactivedPageFocus(): string {
+        return this._FocusHub.getDeactivedPageFocus();
+    }
+
+    /**
+     * getNameSpace
+     * 
+     * 获取当前FocusHub的nameSpace
+     * 
+     * @return {string} 当前FocusHub的nameSpace
+     */
+    public getNameSpace(): string {
+        return this._FocusHub.getNameSpace();
+    }
+
+    /**
+     * enableFocusTrace
+     * 
+     * 调试API: 启用焦点变化时的回调日志，通过console.log打出，其中含产生此行为的调用堆栈
+     * 
+     * @param {boolean} needCallStack 是否打印焦点变化时产生变化的api调用的堆栈，例如setFocus, unmount之类
+     */
+    public enableFocusTrace(needCallStack: boolean = true) {
+        this._FocusHub.enableFocusTrace(needCallStack);
+    }
+
+    /**
+     * printAllFocusable
+     * 
+     * 调试API: console.log当前 Hub 中所有的节点引用，只打印当前NameSpace的内容
+     */
+    public printAllFocusable() {
+        this._FocusHub.printAllFocusable();
+    }
+
+    /**
+     * getCurrentFocusStack
+     * 
+     * 调试API: console.log当前焦点的焦点链条(从root到此节点的链条)
+     * 
+     * @return {Array} 当前焦点的链条队列
+     */
+    public getCurrentFocusStack(): Array<Object> {
+        return this._FocusHub.getCurrentFocusStack();
+    }
+}
+
+export default FocusHubApi;

package/utils/JsViewEngineWidget/JsvFocusManager.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-prototype-builtins */
 
 import JsvFocusBlock from "./JsvFocusBlock.vue";
+import JsvFocusHubApi from "./JsvFocusHub.ts";
 import { inject } from "vue";
 
 const ROOT_HUB_PROVIDE_NAME = "__jsvFocusRootHub__";
@@ -11,7 +12,7 @@ const useFocusHub = (withNameSpace) => {
     let nameSpace = inject(HUB_NS_PROVIDE_NAME); // nameSpace变更由JsvFocusBlock设置namespace时变更
     if (nameSpace && nameSpace.length > 0) {
       // 使用带有namespace的hub
-      return (inject(ROOT_HUB_PROVIDE_NAME)).wrapWithNameSpace(nameSpace);    
+      return new JsvFocusHubApi((inject(ROOT_HUB_PROVIDE_NAME)).getOrigin().wrapWithNameSpace(nameSpace));
     }
   }
 
@@ -20,7 +21,7 @@ const useFocusHub = (withNameSpace) => {
 };
 
 export class JsvFocusManager {
-  constructor() {}
+  constructor() { }
 
   install(app, ...options) {
     console.log("JsvFocusManager install");
@@ -41,7 +42,7 @@ export class JsvFocusManager {
     app.config.globalProperties.$jsvFocusManager = this;
 
     app.provide(HUB_NS_PROVIDE_NAME, null);
-    app.provide(ROOT_HUB_PROVIDE_NAME, this.$_topFDiv.getHub());
+    app.provide(ROOT_HUB_PROVIDE_NAME, new JsvFocusHubApi(this.$_topFDiv.getHub()));
   }
 
   getCurrentFocusStack() {

package/utils/JsViewEngineWidget/MetroWidget/AnimationManager.ts

@@ -1,72 +1,166 @@
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { ShallowRef, watch, ref, Ref } from "vue";
 
-export class AnimationManager {
-  private animList: Set<AnimationNode> = new Set();
-  private frameCount: number = 0;
+export enum TaskType {
+  RESIZE_ITEM,
+  SLIDE
+}
 
-  public tryStartAnim(count: number, anim: AnimationNode, index: number) {
-    if (count > this.frameCount) {
-      for (let a of this.animList) {
-        a.stop();
-      }
-      this.animList.clear();
-      this.frameCount = count;
-      this.animList.add(anim);
-      anim.start();
-    } else if (count == this.frameCount) {
-      this.animList.add(anim);
-      anim.start();
+interface Task {
+  frameCount: number,
+  type: TaskType,
+  params: any,
+}
+
+type TaskCallback = (tasks: Array<Task>) => void;
+
+export class MacroEndTaskManager {
+  private taskList: Array<Task> = [];
+  private frameCount: number;
+  private customerOnFlushTakEnd: TaskCallback;
+  private customerOnBreak: TaskCallback;
+  private mTaskToken: Ref<number> = ref(0);
+  private mToken: number = 0;
+
+  constructor(onFlushTask: TaskCallback, onBreak: TaskCallback) {
+    this.customerOnBreak = onBreak;
+    this.customerOnFlushTakEnd = onFlushTask;
+    watch(
+      () => this.mTaskToken.value,
+      () => {
+        this.onFlushTask();
+      },
+      {
+        flush: 'post'
+      })
+  }
+
+  private getToken(): number {
+    if (this.mToken < Number.MAX_SAFE_INTEGER) {
+      ++this.mToken;
     } else {
-      // console.log("anim expired")
+      this.mToken = 1;
     }
+    return this.mToken;
   }
-}
 
-export class AnimationTools {
-  public static getDivSlideAnim(div: any, fromX: number, fromY: number, toX: number, toY: number, animInfo: any): AnimationNode {
-    if (animInfo) {
-      let duration: number;
-      if (typeof animInfo.duration == "number") {
-        duration = animInfo.duration;
-      } else if (typeof animInfo.speed == "number") {
-        const deltaX = Math.abs(fromX - toX);
-        const deltaY = Math.abs(fromY - toY);
-        duration = Math.round(deltaX === 0 ? deltaY / animInfo.speed : deltaX / animInfo.speed);
-      } else {
-        throw new Error("animation duration not set.")
+  public addTask(type: TaskType, params: any) {
+    this.taskList.push({
+      type,
+      params,
+      frameCount: Forge.sFrameCount.count,
+    });
+    if (this.frameCount !== Forge.sFrameCount.count) {
+      this.frameCount = Forge.sFrameCount.count;
+      const breakList: Array<Task> = [];
+      for (let i = this.taskList.length - 1; i >= 0; --i) {
+        if (this.taskList[i].frameCount != this.frameCount) {
+          let t = this.taskList.splice(i, 1);
+          breakList.push(t[0]);
+        }
       }
+      this.onBreak(breakList);
+      this.mTaskToken.value = this.getToken();
+    }
+  }
 
-      let slideAnimation = new Forge.TranslateAnimation(
-        fromX,
-        toX,
-        fromY,
-        toY,
-        duration,
-        animInfo.easing
-      );
-      slideAnimation.SetAnimationListener(
-        new Forge.AnimationListener(animInfo.onStart, animInfo.onEnd, null)
-      );
-      return new AnimationNode(div, slideAnimation);
-    } else {
-      throw new Error("animInfo is null.")
+  private onFlushTask() {
+    if (this.taskList.length > 0) {
+      this.customerOnFlushTakEnd(this.taskList);
+      this.taskList = [];
     }
   }
+
+  private onBreak(taskList: Array<Task>) {
+    this.customerOnBreak(taskList);
+  }
+}
+
+interface AnimSetting {
+  easing?: string | null;
+  onStart?: () => void;
+  onEnd?: (done: boolean) => void;
+  duration?: number,
+  speed?: number,
 }
 
-class AnimationNode {
-  private mDiv: any;
-  private mAnimation: any;
-  constructor(div: any, anim: any) {
-    this.mDiv = div;
-    this.mAnimation = anim;
+class AnimObject {
+  private frameCount: number;
+  private forgeAnim: any;
+  private element: any;
+  private animSetting: AnimSetting;
+
+  constructor(frameCount: number,
+    element: any,
+    from: [number, number],
+    to: [number, number],
+    setting: AnimSetting) {
+    this.frameCount = frameCount;
+    this.animSetting = setting;
+    this.element = element;
+
+    let duration = 0;
+    if (typeof setting.duration == "number") {
+      duration = setting.duration;
+    } else if (typeof setting.speed == "number") {
+      duration = Math.round(Math.max(Math.abs(to[0] - from[0]), Math.abs(to[1] - from[1])) / setting.speed);
+    }
+    this.forgeAnim = new Forge.TranslateAnimation(
+      from[0],
+      to[0],
+      from[1],
+      to[1],
+      duration,
+      setting.easing
+    );
+    this.forgeAnim.SetAnimationListener(
+      new Forge.AnimationListener(this.onStart.bind(this), this.onEnd.bind(this), null)
+    );
   }
 
   public start() {
-    this.mDiv.jsvGetProxyView(true).StartAnimation(this.mAnimation);
+    this.element?.jsvGetProxyView(true).StartAnimation(this.forgeAnim);
   }
 
   public stop() {
-    this.mDiv.jsvGetProxyView(true).StopAnimation();
+    this.element?.jsvGetProxyView(true).StopAnimation();
+  }
+
+  public getFrameCount() {
+    return this.frameCount;
+  }
+
+  private onStart() {
+    this.animSetting?.onStart?.();
+  }
+
+  private onEnd(done: boolean) {
+    this.animSetting?.onEnd?.(done);
+  }
+}
+
+export class AnimationManager {
+  private animList: Array<AnimObject> = [];
+  private frameCount: number = 0;
+
+  public startSlideAnim(element: any, from: [number, number], to: [number, number], setting: AnimSetting) {
+    let curFrameCount = Forge.sFrameCount.count;
+    if (curFrameCount != this.frameCount) {
+      this.tryCleanOldAnim();
+      this.frameCount = curFrameCount;
+    }
+    const obj = new AnimObject(curFrameCount, element, from, to, setting);
+    this.animList.push(obj);
+    obj.start();
+  }
+
+  private tryCleanOldAnim() {
+    for (let i = this.animList.length - 1; i >= 0; --i) {
+      const anim = this.animList[i];
+      if (anim.getFrameCount() != this.frameCount) {
+        this.animList.splice(i, 1);
+        anim.stop();
+      }
+    }
   }
 }

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -3,12 +3,13 @@
 -->
 <script setup>
 import { ref, shallowRef, computed } from "vue";
-import { setup, RENDER_ITEM_BREAK_KEY } from "./MetroWidgetSetup";
+import { setup } from "./MetroWidgetSetup";
 import {
   VERTICAL,
   HORIZONTAL,
   SlideSetting,
   SeamlessSlide,
+  RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
 
 const props = defineProps({
@@ -55,10 +56,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  enableTouch: {
-    type: Boolean,
-    default: false,
-  },
   flingPageWidth: {
     type: Number,
     default: -1,
@@ -67,9 +64,6 @@ const props = defineProps({
     type: Number,
     default: 1 / 4,
   },
-  dispatcher: {
-    type: Object,
-  },
   measures: {
     type: Function,
     required: true,
@@ -149,20 +143,26 @@ const props = defineProps({
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
-const touchContainerW = ref(0);
-const touchContainerH = ref(0);
 const itemRender = ref(!props.enableItemRenderBreak);
 const locateDiv = shallowRef(null);
 const renderData = shallowRef([]);
 const slideDiv = shallowRef(null);
 const slideDivLeft = ref(0);
 const slideDivTop = ref(0);
-const itemResizeSlideDiv = shallowRef(null);
-const itemResizeSlideLeft = ref(0);
-const itemResizeSlideTop = ref(0);
 const focusNode = shallowRef(null);
 const pageUpdateToken = ref(0);
 
+const normalizedPlaceHolder = computed(() => {
+  return {
+    gap: props.placeHolderSetting.gap ?? 0,
+    borderRadius: props.placeHolderSetting.borderRadius ?? 0,
+    backgroundColor: props.placeHolderSetting.backgroundColor,
+    focusBackgroundColor:
+      props.placeHolderSetting.focusBackgroundColor ??
+      props.placeHolderSetting.backgroundColor,
+  };
+});
+
 const {
   widgetRectInfo,
   focusBlockOnFocus,
@@ -173,17 +173,12 @@ const {
   exportObject,
 } = setup(
   props,
-  touchContainerW,
-  touchContainerH,
   itemRender,
   locateDiv,
   renderData,
   slideDiv,
   slideDivLeft,
   slideDivTop,
-  itemResizeSlideDiv,
-  itemResizeSlideLeft,
-  itemResizeSlideTop,
   focusNode,
   pageUpdateToken,
   "list"
@@ -210,13 +205,11 @@ defineExpose(exportObject);
     >
       <div
         id="slideDiv"
-        key="touchcontainer"
+        key="slideDiv"
         ref="slideDiv"
         :style="{
           left: slideDivLeft,
           top: slideDivTop,
-          width: touchContainerW,
-          height: touchContainerH,
         }"
       >
         <div>
@@ -234,55 +227,49 @@ defineExpose(exportObject);
             }"
           >
             <div
-              id="itemResizeSlide"
-              key="itemResizeSlide"
-              ref="itemResizeSlideDiv"
+              v-for="item in renderData"
+              :key="pageUpdateToken + '_' + item.index"
+              :ref="item.divRef"
               :style="{
-                left: itemResizeSlideLeft,
-                top: itemResizeSlideTop,
+                left: item.templateInfo.left,
+                top: item.templateInfo.top,
+                width: item.templateInfo.width,
+                height: item.templateInfo.height,
+                zIndex: item.renderStyle.zIndex,
               }"
             >
               <div
-                v-for="item in renderData"
-                :key="pageUpdateToken + '_' + item.index"
-                :ref="item.divRef"
-                :style="{
-                  ...item.renderStyle,
-                }"
+                v-if="
+                  !enableItemRenderBreak || item.mounted.value || itemRender
+                "
+                :key="renderBreakKey"
+                :ref="item.slotRef"
               >
-                <div
-                  v-if="!enableItemRenderBreak || item.mounted.value || itemRender"
-                  :key="renderBreakKey"
-                  :ref="item.slotRef"
-                >
-                  <slot
-                    name="renderItem"
-                    :key="renderBreakKey"
-                    :data="item.customerData"
-                    :onEdge="_onFocusableItemEdge"
-                    :onAction="item.registerObj"
-                    :query="item.query"
-                    :onItemEdge="_onFocusableItemEdge"
-                  ></slot>
-                </div>
-                <div
-                  v-if="
-                    enableItemRenderBreak &&
-                    placeHolderSetting &&
-                    !item.mounted.value
-                  "
-                  :style="{
-                    width:
-                      item.renderStyle.width -
-                      (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
-                    height:
-                      item.renderStyle.height -
-                      (placeHolderSetting.gap ? placeHolderSetting.gap : 0),
-                    backgroundColor: placeHolderSetting.backgroundColor,
-                    borderRadius: placeHolderSetting.borderRadius,
-                  }"
-                ></div>
+                <slot
+                  name="renderItem"
+                  :data="item.customerData"
+                  :onEdge="_onFocusableItemEdge"
+                  :onAction="item.registerObj"
+                  :query="item.query"
+                  :onItemEdge="_onFocusableItemEdge"
+                ></slot>
               </div>
+              <div
+                v-if="
+                  enableItemRenderBreak &&
+                  placeHolderSetting &&
+                  !item.mounted.value
+                "
+                :style="{
+                  width: item.renderStyle.width - normalizedPlaceHolder.gap,
+                  height: item.renderStyle.height - normalizedPlaceHolder.gap,
+                  backgroundColor:
+                    exportObject.getCurrentFocusIndex() == item.index
+                      ? normalizedPlaceHolder.focusBackgroundColor
+                      : normalizedPlaceHolder.backgroundColor,
+                  borderRadius: normalizedPlaceHolder.borderRadius,
+                }"
+              ></div>
             </div>
           </jsv-focus-block>
         </div>