@shijiu/jsview-vue 2.1.367-test.0 → 2.1.428

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -26,8 +26,8 @@ import {
 import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
 import { WidgetRectInfo } from "./WidgetRectInfo";
-import { TaskType, MacroEndTaskManager, AnimationManager } from "./AnimationManager.ts"
 import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
+import { TaskType, SlideAnimWrapper, TaskManager, AnimationManager } from "./TaskManager.ts";
 
 const TAG = "MetroWidget";
 
@@ -108,6 +108,7 @@ export const setup = (
     FLING: 3,
   };
 
+  const modeForExport = ref(FOCUS_MODE);
   const mode = {
     _mode: FOCUS_MODE,
     _touchState: TouchState.IDLE,
@@ -116,6 +117,7 @@ export const setup = (
     _duringFling: false,
     touchStart() {
       this._mode = TOUCH_MODE;
+      modeForExport.value = TOUCH_MODE;
       this._touchState = TouchState.TAP;
     },
     touchEnd() {
@@ -131,6 +133,7 @@ export const setup = (
     dragEnd() { },
     keyDown() {
       this._mode = FOCUS_MODE;
+      modeForExport.value = FOCUS_MODE;
       this._touchState = TouchState.IDLE;
     },
     duringFling() {
@@ -179,7 +182,7 @@ export const setup = (
       && item.templateInfo[pos_key] + item.templateInfo[size_key] - 1 < visibleInfo.end;
   }
 
-  const animationManager = new AnimationManager();
+  let templateCacheFrameCount = -1;
   const onMacroTaskEnd = (taskList) => {
     let resizeList = [];
     let resizeTaskMap = {};
@@ -187,6 +190,7 @@ export const setup = (
     //统一处理itemResize和slide动画
     let minIndex = Infinity;
     let slideInfo = null;
+    let mergeTmp = false;
     let anchorInfo = null;
     let duration = 200;
     let easing = null;
@@ -196,8 +200,21 @@ export const setup = (
     let doAnim = false;
 
     let existOnFocusChange = false;
+    let targetVisibleStart = visibleInfo.start;
+    //先遍历寻找slide task, 确认目标位置. 有多个slide task时取最后一个
+    taskList.forEach(i => {
+      if (i.type == TaskType.SLIDE) {
+        slideTask = i;
+        mergeTmp = mergeTmp || i.params?.updateParam?.mergeTmp;
+        if (!isNaN(i.params?.target)) {
+          targetVisibleStart = -i.params.target;
+        }
+      }
+    });
+
     for (let task of taskList) {
       if (task.type == TaskType.RESIZE_ITEM) {
+        mergeTmp = mergeTmp || task.params?.updateParam?.mergeTmp;
         resizeTaskMap[task.params.index] = task;
         resizeList.push(task);
         const { index, animInfo } = task.params;
@@ -211,13 +228,10 @@ export const setup = (
           //记录锚点信息
           const item = getItemByIndex(index);
           anchorInfo = {
-            anchorPosition: item.templateInfo[pos_key] + item.templateInfo[size_key] * animInfo.anchor - 1 - visibleInfo.start,
+            anchorPosition: item.templateInfo[pos_key] + item.templateInfo[size_key] * animInfo.anchor - 1 - targetVisibleStart,
             anchor: animInfo.anchor,
           }
         }
-      } else if (task.type == TaskType.SLIDE) {
-        //滚动动画取最后一个
-        slideTask = task;
       } else if (task.type == TaskType.ON_FOCUS_CHANGE) {
         existOnFocusChange = true;
       }
@@ -234,7 +248,10 @@ export const setup = (
     if (resizeList.length > 0) {
       existItemResize = true;
       //TODO 应该是尺寸变化后的可视item需要记录位置, 但暂时先记录20个
-      metroTemplate.cacheLayout(minIndex, minIndex + 20);
+      if (templateCacheFrameCount != Forge.sFrameCount.count) {
+        metroTemplate.cacheLayout(minIndex, minIndex + 20);
+        templateCacheFrameCount = Forge.sFrameCount.count;
+      }
       //resize
       resizeList.forEach(task => {
         metroTemplate.updateItemSize(task.params.index, {
@@ -242,24 +259,19 @@ export const setup = (
           height: task.params.height,
         })
       });
-      let preVisibleStart = visibleInfo.start;
       //保持anchor
       if (anchorInfo) {
         const focusItem = getItemById(focusId);
         const start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
-        visibleInfo.start = normalizeVisibleStart(start, focusItem.templateInfo);
-
-        // resize的item不能完整显示时不需要调整
-        // if (!isItemVisible(focusItem)) {
-        //   visibleInfo.start = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
-        // }
+        targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo);
       } else {
-        visibleInfo.start = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
+        targetVisibleStart = _calculateVisibleStart(getItemById(focusId).templateInfo, preSlideDirection);
       }
-      if (preVisibleStart != visibleInfo.start) {
+
+      if (visibleInfo.start != targetVisibleStart) {
         //只有resize引起的slide动画时, 动画时长使用resize设置, 否者使用slideSetting设置
         slideInfo = {
-          target: -visibleInfo.start,
+          target: -targetVisibleStart,
         };
         if (doAnim) {
           slideInfo.animObj = {
@@ -267,8 +279,6 @@ export const setup = (
             onStart: null,
             speed: null,
             duration,
-            onEnd: (animDone) => {
-            },
           }
         } else {
           //resize无动画时正常slide
@@ -287,15 +297,42 @@ export const setup = (
           }
         }
       }
-      const handler = pageUpdater.update(
+    }
+
+    if (targetVisibleStart != visibleInfo.start) {
+      taskManager.run(() => {
+        const preVisibleStart = visibleInfo.start;
+        visibleInfo.start = targetVisibleStart;
+        return () => {
+          visibleInfo.start = preVisibleStart;
+        }
+      });
+    }
+    //updatePage
+    let updateHandler
+    taskManager.run(() => {
+      updateHandler = pageUpdater.update(
         metroTemplate,
-        visibleInfo.startWithPadding,
-        visibleInfo.endWithPadding,
+        visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+        Math.min(
+          visibleInfo.startMax +
+          visibleInfo.range +
+          visibleInfo.padding.end -
+          1,
+          visibleInfo.endWithPadding + props.keepTraceRange * pageRange
+        ),
         focusId,
-        true,
+        mergeTmp,
         permanentItemList
       );
-      handler.applyTmp();
+      return () => {
+        updateHandler.recover();
+      }
+    })
+
+    // resize item 动画
+    if (resizeList.length > 0) {
+      updateHandler.applyTmp();
       if (doAnim) {
         const visibleIndexList = Array.from(pageUpdater.getTmpRange());
         //创建item slide anim
@@ -304,22 +341,31 @@ export const setup = (
           const { left, top } = renderItem.templateInfo;
           if (index >= minIndex) {
             const layoutCache = renderItem.templateInfo.layoutCache;
-            if (renderItem.mounted.value) {
-              animationManager.startSlideAnim(renderItem.rootDiv,
-                [layoutCache.left - left, layoutCache.top - top],
-                [0, 0],
-                resizeTaskMap[index] ?
-                  resizeTaskMap[index].params.animInfo
-                  : { duration: duration });
-            } else {
-              renderItem.addDivMountedListener((div) => {
-                animationManager.startSlideAnim(div,
+            const doItemSlide = (div) => {
+              taskManager.run(() => {
+                const cancel = animationManager.startSlideAnim(
+                  div,
                   [layoutCache.left - left, layoutCache.top - top],
                   [0, 0],
                   resizeTaskMap[index] ?
                     resizeTaskMap[index].params.animInfo
-                    : { duration: duration });
-              })
+                    : { duration: duration }
+                )
+                return () => {
+                  cancel()
+                }
+              });
+            }
+
+            if (renderItem.mounted.value) {
+              doItemSlide(renderItem.rootDiv);
+            } else {
+              taskManager.run(() => {
+                const unregister = renderItem.addDivMountedListener((div) => {
+                  doItemSlide(div);
+                });
+                return unregister;
+              });
             }
           }
         }
@@ -329,75 +375,81 @@ export const setup = (
     //处理滚动动画
     let viewSlid = false;
     if (slideInfo) {
-      const target = slideInfo.target;
-      viewSlid = executeSlide(target, slideInfo);
+      viewSlid = executeSlide(slideInfo, updateHandler);
     }
 
     //回调
-    if (existItemResize) {
-      props.onAllItemResizeDone?.();
+    if (existItemResize && props.onAllItemResizeDone) {
+      taskManager.run(() => {
+        const handler = setTimeout(() => {
+          props.onAllItemResizeDone();
+        }, 0);
+        return () => {
+          clearTimeout(handler);
+        }
+      })
     }
-    if (viewSlid || existOnFocusChange) {
-      props.onFocusRectChange?.();
+    if ((viewSlid || existOnFocusChange) && props.onFocusRectChange) {
+      taskManager.run(() => {
+        const handler = setTimeout(() => {
+          props.onFocusRectChange();
+        }, 0);
+        return () => {
+          clearTimeout(handler);
+        }
+      })
     }
   }
+  const taskManager = new TaskManager(onMacroTaskEnd);
+  const animationManager = new AnimationManager();
 
-  const executeSlide = (target, slideInfo) => {
+  const executeSlide = (slideInfo, updateHandler) => {
     let preLeft = slideDivLeft.value;
     let preTop = slideDivTop.value;
-    slideDivLeft.value = vertical ? 0 : target;
-    slideDivTop.value = vertical ? target : 0;
+    taskManager.run(() => {
+      slideDivLeft.value = vertical ? 0 : -visibleInfo.start;
+      slideDivTop.value = vertical ? -visibleInfo.start : 0;
+      return () => {
+        slideDivLeft.value = preLeft;
+        slideDivTop.value = preTop;
+      }
+    });
     let viewSlid = preLeft != slideDivLeft.value || preTop != slideDivTop.value;
-    visibleInfo.start = -target;
-    const updater = pageUpdater.update(
-      metroTemplate,
-      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-      Math.min(
-        visibleInfo.startMax +
-        visibleInfo.range +
-        visibleInfo.padding.end -
-        1,
-        visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-      ),
-      focusId,
-      true,
-      permanentItemList
-    );
     if (slideInfo.animObj) {
-      updater.applyTmp();
-      animationManager.startSlideAnim(
-        slideDiv.value,
-        vertical ? [0, preTop - slideDivTop.value] : [preLeft - slideDivLeft.value, 0],
-        [0, 0],
-        {
-          ...slideInfo.animObj,
-          onEnd: () => {
-            updater.apply()
+      updateHandler.applyTmp();
+      taskManager.run(() => {
+        const from = vertical ? [0, preTop - slideDivTop.value] : [preLeft - slideDivLeft.value, 0];
+        const cancel = animationManager.startSlideAnim(
+          slideDiv.value,
+          from,
+          [0, 0],
+          {
+            ...slideInfo.animObj,
+            onEnd: () => {
+              updateHandler.apply()
+            }
           }
-        });
+        );
+        return () => {
+          cancel()
+        }
+      });
     } else {
-      updater.apply();
-    }
-    _onScroll();
+      updateHandler.apply();
+    }
+    taskManager.run(() => {
+      const handler = setTimeout(() => {
+        _onScroll();
+      }, 0);
+      return () => {
+        clearTimeout(handler);
+      }
+    })
     return viewSlid
   }
 
-  const onMacroEndTaskBreak = (list) => {
-    if (list) {
-      list.forEach(task => {
-        if (task.type == TaskType.RESIZE_ITEM) {
-          metroTemplate.updateItemSize(task.params.index, {
-            width: task.params.width,
-            height: task.params.height,
-          })
-        }
-      })
-    }
-  }
-  const macroEndTaskManager = new MacroEndTaskManager(onMacroTaskEnd, onMacroEndTaskBreak);
-
   const updateItemSize = (index, newSize, animInfo) => {
-    macroEndTaskManager.addTask(TaskType.RESIZE_ITEM,
+    taskManager.addTask(TaskType.RESIZE_ITEM,
       {
         index,
         width: newSize.width,
@@ -406,11 +458,11 @@ export const setup = (
       });
   }
 
-  const _slideTo = (target, animObj) => {
+  const _slideTo = (target, animObj, updateParam = { mergeTmp: false }) => {
     if (slideLock) {
       return
     };
-    macroEndTaskManager.addTask(TaskType.SLIDE, { target: -target, animObj })
+    taskManager.addTask(TaskType.SLIDE, { target: -target, animObj, updateParam });
   };
 
   let callFocusAfterUpdate = false;
@@ -630,20 +682,8 @@ export const setup = (
     templateItemAdder.tryAddItemByPosition(position);
     if (
       typeof position !== "undefined" &&
-      position != null &&
-      visibleInfo.start !== position
+      position != null
     ) {
-      visibleInfo.start = position;
-
-      const updater = pageUpdater.update(
-        metroTemplate,
-        visibleInfo.startWithPadding,
-        visibleInfo.endWithPadding,
-        focusId,
-        false,
-        permanentItemList
-      );
-
       let animObj = null;
       if (doAnim) {
         animObj = {
@@ -651,15 +691,9 @@ export const setup = (
           onStart: null,
           speed: props.slideSetting.Speed,
           duration: props.slideSetting.Duration,
-          onEnd: () => {
-            updater.apply();
-          },
         };
-        pageUpdater.applyTmp();
-      } else {
-        pageUpdater.apply();
       }
-      _slideTo(visibleInfo.start, animObj);
+      _slideTo(position, animObj);
     }
   };
 
@@ -1261,31 +1295,17 @@ export const setup = (
 
       let cur_slide = _calculateVisibleStart(fakeItem.templateInfo, direction);
       if (cur_slide != visibleInfo.start) {
-        visibleInfo.start = cur_slide;
-        const updater = pageUpdater.update(
-          metroTemplate,
-          visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-          Math.min(
-            visibleInfo.startMax +
-            visibleInfo.range +
-            visibleInfo.padding.end -
-            1,
-            visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-          ),
-          focusId,
-          true,
-          permanentItemList
-        );
-        updater.applyTmp();
-        _slideTo(visibleInfo.start, {
-          easing: "",
-          onStart: null,
-          speed: props.slideSetting.Speed,
-          duration: props.slideSetting.Duration,
-          onEnd: () => {
-            updater.apply();
+        _slideTo(
+          cur_slide,
+          {
+            easing: "",
+            onStart: null,
+            speed: props.slideSetting.Speed,
+            duration: props.slideSetting.Duration,
           },
-        });
+          {
+            mergeTmp: true
+          });
         return true;
       }
     }
@@ -1296,7 +1316,7 @@ export const setup = (
     preFocusId = cache_pre ? focusId : -1;
     focusId = id;
     currentFocusIndex.value = id2Index(id);
-    macroEndTaskManager.addTask(TaskType.ON_FOCUS_CHANGE);
+    taskManager.addTask(TaskType.ON_FOCUS_CHANGE);
   }
 
   const _bubbleCustomEvent = (event) => {
@@ -1384,32 +1404,13 @@ export const setup = (
       let cur_visible_start = _calculateVisibleStart(next_focus_item.templateInfo, vertical ? vertical_direction : horizontal_direction);
       if (visibleInfo.start !== cur_visible_start) {
         if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
-          visibleInfo.start = cur_visible_start;
-          const updater = pageUpdater.update(
-            metroTemplate,
-            visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-            Math.min(
-              visibleInfo.startMax +
-              visibleInfo.range +
-              visibleInfo.padding.end -
-              1,
-              visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-            ),
-            next_focus_item.id,
-            false,
-            permanentItemList
-          );
-          updater.applyTmp();
           let animObj = {
             easing: "",
             onStart: null,
             speed: props.slideSetting.Speed,
             duration: props.slideSetting.Duration,
-            onEnd: (animDone) => {
-              updater.apply();
-            },
           };
-          _slideTo(visibleInfo.start, animObj);
+          _slideTo(cur_visible_start, animObj, { mergeTmp: false });
         } else {
           const updater = pageUpdater.update(
             metroTemplate,
@@ -1731,11 +1732,16 @@ export const setup = (
   const reachAnchorGroup = 2;
   const wallConditionGroup = 1;
 
+  let divPos = -1;
+  let frameCount = -1;
   const getVisibleStart = (moveInfo) => {
+    if (frameCount != Forge.sFrameCount.count) {
+      divPos = vertical ? slideDivTop.value : slideDivLeft.value;
+    }
     if (vertical) {
-      return -(slideDivTop.value + Math.round(moveInfo.yPos));
+      return -(divPos + Math.round(moveInfo.yPos));
     } else {
-      return -(slideDivLeft.value + Math.round(moveInfo.xPos));
+      return -(divPos + Math.round(moveInfo.xPos));
     }
   }
 
@@ -1762,10 +1768,28 @@ export const setup = (
     mode.touchStart();
     mode.flingEnd();
 
+    const t = 100;
+    const offsetThreshold = {
+      left: vertical ? undefined : t,
+      right: vertical ? undefined : t,
+      top: vertical ? t : undefined,
+      bottom: vertical ? t : undefined,
+    }
+    actorController.run([
+      actorController
+        .condition(undefined, false)
+        .offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom)
+        .then([actorController.state().touchLockSwitch(true, vertical ? 1 : 2, t)]),
+      actorController
+        .condition(undefined, false)
+        .startMove(true, true)
+        .then([onDragStart]),
+    ])
+
     //blur item
     onItemBlur(getItemById(focusId));
 
-    visibleInfo.start = getVisibleStart(data);
+    // visibleInfo.start = getVisibleStart(data);
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
 
     const updater = pageUpdater.update(
@@ -1803,7 +1827,6 @@ export const setup = (
   const onTouchRelease = () => {
     if (mode.getTouchState() == TouchState.TAP) {
       //只点击, 没有移动或者fling
-      mergeTouchSlideToSlideDiv();
       updateRenderItems(false, false);
       mode.touchEnd();
     }
@@ -1816,7 +1839,6 @@ export const setup = (
 
   const onDragEnd = (data) => {
     visibleInfo.start = getVisibleStart(data);
-
     actorController.run([
       actorController.state().removeConditionByGroup(reachAnchorGroup),
     ]);
@@ -1905,10 +1927,10 @@ export const setup = (
         .condition(undefined, true)
         .onTouchDown()
         .then([onTouchDown]),
-      actorController
-        .condition(undefined, true)
-        .onDragStart()
-        .then([onDragStart]),
+      // actorController
+      //   .condition(undefined, true)
+      //   .onDragStart()
+      //   .then([onDragStart]),
       actorController
         .condition(undefined, true)
         .onDragEnd()
@@ -1925,6 +1947,10 @@ export const setup = (
         .condition(undefined, true)
         .onFlingEnd()
         .then([onFlingEnd]),
+      actorController
+        .condition(undefined, true)
+        .onTouchRelease()
+        .then([actorController.state().touchLockSwitch(false, vertical ? 1 : 2)]),
 
       actorController
         .condition(wallConditionGroup, true)
@@ -1979,7 +2005,7 @@ export const setup = (
   focusId = init_focus_id;
   visibleInfo.start = cur_visible_start;
 
-  const updater = pageUpdater.update(
+  const initUpdater = pageUpdater.update(
     metroTemplate,
     visibleInfo.startWithPadding,
     visibleInfo.endWithPadding,
@@ -1987,7 +2013,7 @@ export const setup = (
     false,
     permanentItemList
   );
-  updater.apply();
+  initUpdater.apply();
 
   onMounted(() => {
     _changeFocusId(focusId, false);
@@ -2004,7 +2030,7 @@ export const setup = (
         itemRender.value = true;
       });
     }
-    if (props.enableTouch) {
+    if (props.touchFlag === 1) {
       initTouch();
     }
   });
@@ -2027,5 +2053,6 @@ export const setup = (
     onTouchDown,
     onTouchRelease,
     currentFocusIndex,
+    modeForExport,
   }
 }

package/utils/JsViewEngineWidget/MetroWidget/PageUpdater.ts

@@ -32,7 +32,7 @@ export class PageUpdater {
     mergeTmp: boolean,
     permanentList: Array<PermanentItemInfo> | null,
     extensionRange: number = 0
-  ): {apply: Function, applyTmp: Function} {
+  ): { apply: Function, applyTmp: Function, recover: Function } {
     this.count++;
     const [visibleStart, visibleEnd] = template.getVisibleItemList(
       start - extensionRange,
@@ -63,13 +63,14 @@ export class PageUpdater {
         this.rangeSet.add(pItem.index);
       }
     }
+    
     if (preRangeSet.size > 0) {
       this.tmpRangeSet = new Set([...this.rangeSet, ...preRangeSet]);
     }
+    
     if (mergeTmp) {
       this.tmpRangeSet = new Set([...this.tmpRangeSet, ...preTmpRangeSet]);
     }
-
     const c = this.count;
     return {
       apply: () => {
@@ -86,11 +87,14 @@ export class PageUpdater {
           // console.log("apply tmp expired data")
         }
       },
+      recover: () => {
+        this.rangeSet = preRangeSet;
+        this.tmpRangeSet = preTmpRangeSet;
+      }
     }
   }
 
   private apply(): void {
-    this.tmpRangeSet.clear();
     this.updateFunc(this.rangeSet);
   }
 

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -26,7 +26,7 @@ interface CustomerCallbackMap {
 }
 
 export class RenderItem {
-  private divMountedCallback: Array<(div: HTMLDivElement) => void> = [];
+  private divMountedCallback: Set<(div: HTMLDivElement) => void> = new Set();
 
   public customerData: object;
   public templateInfo: TemplateItem;
@@ -137,18 +137,21 @@ export class RenderItem {
   }
 
   public addDivMountedListener(cbk: (div: HTMLDivElement) => void) {
-    this.divMountedCallback.push(cbk);;
+    this.divMountedCallback.add(cbk);
+    return () => {
+      this.divMountedCallback.delete(cbk);
+    }
   }
 
   private onDivMounted(): void {
-    if (this.divMountedCallback.length > 0) {
+    if (this.divMountedCallback.size > 0) {
       this.divMountedCallback.forEach((cbk: (ele: HTMLDivElement) => void) => {
         if (this.rootDiv) {
           cbk(this.rootDiv);
         }
       })
     }
-    this.divMountedCallback = [];
+    this.divMountedCallback.clear();
     if (this.enableTap && this.rootDiv) {
       const divView = (this.rootDiv as any).jsvGetProxyView();
       divView.DragEnables?.(0x01); // 只激活tap
@@ -157,6 +160,6 @@ export class RenderItem {
 
   private onDivUnmounted(): void {
     this.touchInit = false;
-    this.divMountedCallback = [];
+    this.divMountedCallback.clear();
   }
 }