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

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -27,9 +27,10 @@ import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
 import { WidgetRectInfo } from "./WidgetRectInfo";
 import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
-import { TaskType, SlideAnimWrapper, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.ts";
+import { TaskType, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.ts";
 import { getDirectionByRect, RectCache } from "./Slide.ts";
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
+import { FeatureNames, JsvUseFeature } from "../../JsViewVueTools/FeatureActive.ts";
 
 const TAG = "MetroWidget";
 
@@ -117,6 +118,9 @@ export const setup = (
     innerKeepTraceRange = props.keepTraceRange;
   } else {
     if (props.touchFlag > 0) {
+      // 激活引擎功能的支持
+      JsvUseFeature('MetroWidget', FeatureNames.TouchReceiver);
+
       //触控默认3屏
       innerKeepTraceRange = 3;
     } else {
@@ -177,6 +181,9 @@ export const setup = (
     },
     getTouchState() {
       return this._touchState;
+    },
+    getTouchCount() {
+      return this._touchCount;
     }
   }
 
@@ -238,7 +245,6 @@ export const setup = (
     let slideDoAnim = false;
 
     mRectCache.cacheManually();
-
     /**
      * 处理resize
      */
@@ -266,6 +272,9 @@ export const setup = (
         })
       });
 
+      //更新touch的size
+      updateTouchDivSize();
+
       //使用上一帧的状态计算anchorPosition
       if (resizeTaskMap[id2Index(focusId)]) {
         const task = resizeTaskMap[id2Index(focusId)];
@@ -370,7 +379,7 @@ export const setup = (
         preInfo = mRectCache.getPreRect();
         if (preInfo) {
           let totalSize = metroTemplate.getBoundingBoxSize();
-          v.start = Math.min(Math.max(0, targetRect[pos_key] - preInfo[pos_key] + v.start), totalSize[size_key] - v.range);
+          v.start = Math.min(Math.max(0, targetRect[pos_key] - preInfo[pos_key] + v.start), Math.max(0, totalSize[size_key] - v.range));
           preInfo[pos_key] += (v.start - visibleInfo.start);
         }
       }
@@ -661,7 +670,7 @@ export const setup = (
 
   const onItemFocus = (focusItem, rect) => {
     //触控模式不触发item的onFocus
-    if (!focusItem || mode.getMode() != FOCUS_MODE) return;
+    if (!focusItem) return;
     setItemZIndex(focusItem, innerData.length, true);
     if (isFocus) {
       _itemOnFocusSideEffect(focusItem, rect);
@@ -852,6 +861,20 @@ export const setup = (
     }
   }
 
+  function ifLayoutChange(type, oldMeasureItem, newMeasureItem) {
+    let changed = newMeasureItem.width !== oldMeasureItem.width
+      || newMeasureItem.height !== oldMeasureItem.height
+      || newMeasureItem.focusable !== oldMeasureItem.focusable
+      || newMeasureItem.marginRight !== oldMeasureItem.marginRight
+      || newMeasureItem.marginBottom !== oldMeasureItem.marginBottom;
+    if (type !== "relative") {
+      changed = changed
+        || newMeasureItem.left !== oldMeasureItem.left
+        || newMeasureItem.top !== oldMeasureItem.top
+    }
+    return changed;
+  }
+
   const DATA_ID_KEY = "jsvKey";
   const refreshData = (forceUpdate) => {
     //由于data不支持reactive, 因此数据的更新只通过provideData
@@ -881,11 +904,7 @@ export const setup = (
               } else {
                 const newMeasureItem = props.measures(newItem);
                 const oldMeasureItem = props.measures(oldItem);
-                if (props.layoutType == "relative") {
-                  layoutChange = newMeasureItem.width !== oldMeasureItem.width || newMeasureItem.height !== oldMeasureItem.height;
-                } else {
-                  layoutChange = newMeasureItem.width !== oldMeasureItem.width || newMeasureItem.height !== oldMeasureItem.height || newMeasureItem.left !== oldMeasureItem.left || newMeasureItem.top !== oldMeasureItem.top;
-                }
+                layoutChange = ifLayoutChange(props.layoutType, oldMeasureItem, newMeasureItem);
                 if (layoutChange) {
                   break;
                 } else {
@@ -956,6 +975,7 @@ export const setup = (
             for (let i of onlyDataChangeList) {
               if (i.index < innerData.length) {
                 innerData[i.index].updateCustomData(i.data, _getItemConfigFromMeasursObj(i.measureObj));
+                innerData[i.index].enableTap = i.measureObj.enableTap ?? false;
               } else {
                 //之后的数据未布局, 尚未添加到innerData中
                 break;
@@ -1026,10 +1046,6 @@ export const setup = (
     return id2Index(focusId);
   }
 
-  const getCurMode = () => {
-    return mode.getMode();
-  }
-
   const getTemplatePosition = (index) => {
     return _getTemplatePosition(index);
   }
@@ -1050,6 +1066,13 @@ export const setup = (
     }
   }
 
+  const tryCancelDelayLoad = () => {
+    if (delayLoadHandler > 0) {
+      clearTimeout(delayLoadHandler);
+      delayLoadHandler = -1;
+    }
+  }
+
   const exportObject = {
     lockSlide,
     unlockSlide,
@@ -1069,9 +1092,10 @@ export const setup = (
     getVisibleItems,
     getCustomerDataSize,
     getCurrentFocusIndex,
-    getCurMode,
     getTemplatePosition,
-    setSlideSetting
+    setSlideSetting,
+    cancelDelayLoad: tryCancelDelayLoad,
+    setSensorSensitivity,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1269,6 +1293,24 @@ export const setup = (
     }
   };
 
+  const onDispatchKeyDown = (ev) => {
+    if (mode.getMode() == TOUCH_MODE && !mode.duringTouch()) {
+      if (ev.keyCode == 37 || ev.keyCode == 38 || ev.keyCode == 39 || ev.keyCode == 40) {
+        //只有在上下左右键切换为focus_mode
+        mode.keyDown();
+        //touch切换为focus的首次按键只显示焦点
+        const focusItem = _getVisibleFocusableItem();
+        const preFocusItem = getItemById(focusId);
+        _changeFocusId(focusItem.id, false);
+        if (preFocusItem.id !== focusItem.id) {
+          onItemBlur(preFocusItem);
+        }
+        onItemFocus(focusItem);
+      }
+    }
+    return false;
+  }
+
   const focusBlockOnKeyDown = (ev) => {
     if (onKeyDownLock) {
       return true;
@@ -1278,14 +1320,6 @@ export const setup = (
       if (mode.duringTouch()) {
         //touch过程中的按键不处理
         return true;
-      } else {
-        //切换为focus_mode
-        mode.keyDown();
-        //touch切换为focus的首次按键只显示焦点
-        const focusItem = _getVisibleFocusableItem();
-        _changeFocusId(focusItem.id, false);
-        onItemFocus(focusItem);
-        return true;
       }
     }
 
@@ -1319,14 +1353,11 @@ export const setup = (
     );
   };
 
-  const _onTemplateAddDone = () => {
-    //update slideDiv size
+  function updateTouchDivSize() {
     const lastTemplateInfo = getItemByIndex(
       metroTemplate.getTailItemIndex()
     )?.templateInfo;
     if (lastTemplateInfo) {
-      let preTouchW = touchDivSize.width;
-      let preTouchH = touchDivSize.height;
       if (vertical) {
         touchDivSize.width = props.width;
         touchDivSize.height = lastTemplateInfo.top + lastTemplateInfo.height - 1;
@@ -1334,9 +1365,16 @@ export const setup = (
         touchDivSize.width = lastTemplateInfo.left + lastTemplateInfo.width - 1;
         touchDivSize.height = props.height;
       }
-      if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
-        updateTouchBoxCondition();
-      }
+    }
+  }
+
+  const _onTemplateAddDone = () => {
+    //update slideDiv size
+    let preTouchW = touchDivSize.width;
+    let preTouchH = touchDivSize.height;
+    updateTouchDivSize();
+    if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
+      updateTouchBoxCondition();
     }
   }
 
@@ -1644,11 +1682,10 @@ export const setup = (
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.START_PROTECT) > 0) {
       if (vInfo.start >= 0) {
         let boundary = 0;
-        //首个元素是占位符时, 在保证获焦区域完全展示的前提下要保证首个不可获焦元素的完全展示
         const headTemplateInfo = getItemByIndex(0).templateInfo;
         if (
           targetRect
-          && (!headTemplateInfo.focusable || index == headTemplateInfo.index)
+          && (index == headTemplateInfo.index)
           && targetRect[pos_key] + targetRect[size_key] <=
           vInfo.range
         ) {
@@ -1669,7 +1706,7 @@ export const setup = (
         let boundary = lastVisibleStart;
         if (
           targetRect
-          && (!lastTemplateInfo.focusable || index == lastTemplateInfo.index)
+          && (index == lastTemplateInfo.index)
           && targetRect[pos_key] - lastVisibleStart >= 0
         ) {
           boundary = lastTemplateInfo[pos_key] - vInfo.range;
@@ -1961,13 +1998,16 @@ export const setup = (
 
   //touch setting
   let actorController = null;
-  const touchLoadItemRect = visibleInfo.range;
   const reachAnchorGroup = 2;
   const wallConditionGroup = 1;
-  const touchCountGroup = 3;
+  const ScensorCondigionGroup = 3;
+  const TouchDownConditionGroup = 4;
 
   let divPos = -1;
   let frameCount = -1;
+  const DEFAULT_SENSITIVITY = 10;
+  let onMoveSensitivity = -1;
+
   const getVisibleStart = (moveInfo) => {
     divPos = vertical ? slideDivTop.value + freeMoveSlideGapTop : slideDivLeft.value + freeMoveSlideGapLeft;
     if (vertical) {
@@ -1977,6 +2017,51 @@ export const setup = (
     }
   }
 
+  function onSensor(pos) {
+    const lastTemplateInfo = getItemByIndex(
+      metroTemplate.getTailItemIndex()
+    )?.templateInfo;
+    let totalWidth = 0;
+    if (lastTemplateInfo) {
+      if (vertical) {
+        totalWidth = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+      } else {
+        totalWidth = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+      }
+    }
+    props.onScroll?.(
+      vertical ? -(pos.yPos + slideDivTop.value + freeMoveSlideGapTop) : -(pos.xPos + slideDivLeft.value + freeMoveSlideGapLeft),
+      visibleInfo.range,
+      totalWidth
+    );
+  }
+
+  function setOnMovement(sensitivity) {
+    onMoveSensitivity = sensitivity;
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(ScensorCondigionGroup),
+      cmds
+        .condition(ScensorCondigionGroup, true)
+        .onMovement(sensitivity) // 设置x或y移动超过10时才触发回调，以此减少回调的频次，规避js的性能影响
+        .then([onSensor]),
+    ]);
+  }
+
+  function setSensorSensitivity(sensitivity = DEFAULT_SENSITIVITY) {
+    if (!actorController) { return }
+    if (sensitivity <= 0) {
+      actorController.run((cmds) => [
+        cmds.state().removeConditionByGroup(ScensorCondigionGroup),
+      ]);
+      return;
+    }
+
+    if (sensitivity != onMoveSensitivity) {
+      setOnMovement(sensitivity)
+    }
+  }
+
+
   const getTouchCount = (nexusCustomData) => {
     let touchCount = -1;
     if (nexusCustomData) {
@@ -2017,15 +2102,19 @@ export const setup = (
       ])
     ]);
   }
+  function onTouchActionDone(touchCount) {
+    //一次触控动作结束
+    mergeTouchSlideToSlideDiv(touchCount);
+    //由于movement的监听是有帧数间隔的, 所以结束时需要再调用一次onScroll
+    _onScroll();
+  }
 
   const onTouchDown = (data, customData, nexusCustomData) => {
     touchRecorder.reset();
     let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.setTouchCount(touchCount);
-    if (mode.getMode() == FOCUS_MODE) {
-      //模式切换, 更新boxPosition
-      updateTouchBoxCondition();
-    }
+    updateTouchBoxCondition();
+
     mode.touchStart(touchCount);
     // console.log("touchtest", `${props.name} animId:${debugAnimId} viewId:${debugViewId}`,
     //  "onTouchDown", data, customData, nexusCustomData)
@@ -2044,18 +2133,18 @@ export const setup = (
     let passDownTouchInfo = nexusCustomData;
     actorController.run((cmds) => [
       cmds
-        .condition(undefined, false)
+        .condition(TouchDownConditionGroup, false)
         .offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom)
         .then([
           cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold)]),
       cmds
-        .condition(undefined, false)
+        .condition(TouchDownConditionGroup, false)
         .startMove(true, true)
         .then([SliderEditFuncReOrderWrap((d) => { onDragStart(d, null, passDownTouchInfo) })]),
     ])
 
     //blur item
-    onItemBlur(getItemById(focusId));
+    // onItemBlur(getItemById(focusId));
 
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
 
@@ -2100,19 +2189,26 @@ export const setup = (
       mode.touchEnd(touchCount);
     } else {
       if (touchRecorder.moved && !mode.duringFling()) {
-        mergeTouchSlideToSlideDiv(touchRecorder.touchCount);
+        onTouchActionDone(touchRecorder.touchCount);
         updateRenderItems(false, false);
         mode.touchEnd(touchCount)
       }
     }
+    actorController.run((cmds) => [
+      cmds.state().removeConditionByGroup(TouchDownConditionGroup),
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
+    ])
   }
 
   const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
 
   const onDragStart = (data, customData, nexusCustomData) => {
-    let touchCount = getTouchCount(nexusCustomData); // 注意，由startMove触发的onDragStart是没有touchCount的
+    let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    mode.dragStart(touchCount)
+    if (!(mode.getTouchCount() == touchCount && mode.duringFling())) {
+      //dragStart event may be triggered after fling event because of sending it when startMove condition is satisfied
+      mode.dragStart(touchCount)
+    }
     visibleInfo.start = getVisibleStart(data);
   }
 
@@ -2140,12 +2236,11 @@ export const setup = (
   }
 
   const onFlingEnd = (data, customData, nexusCustomData) => {
-    let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
     //记录拖拽的距离
     if (mode.duringFling()) {
       let touchCount = getTouchCount(nexusCustomData);
-      mergeTouchSlideToSlideDiv(touchCount);
+      onTouchActionDone(touchCount);
       updateRenderItems(false, false);
       mode.flingEnd(touchCount);
       mode.touchEnd(touchCount);
@@ -2166,13 +2261,13 @@ export const setup = (
       bottom: 0,
     }
     if (vertical) {
-      wall.top = -boxSize.height + props.height - slideDivTop.value;
+      wall.top = -boxSize.height + props.height - slideDivTop.value - (widgetRectInfo.padding.top + widgetRectInfo.padding.bottom);
       wall.bottom = -slideDivTop.value;
       if (wall.top > wall.bottom) {
         wall.top = wall.bottom;
       }
     } else {
-      wall.left = -boxSize.width + props.width - slideDivLeft.value;
+      wall.left = -boxSize.width + props.width - slideDivLeft.value - (widgetRectInfo.padding.left + widgetRectInfo.padding.right);
       wall.right = -slideDivLeft.value;
       if (wall.left > wall.right) {
         wall.left = wall.right;
@@ -2239,11 +2334,12 @@ export const setup = (
     }
   }
 
-
   //TODO debug
   // let debugAnimId = -1;
   // let debugViewId = -1
+  let touchInited = false;
   const initTouch = () => {
+    touchInited = true;
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
@@ -2266,7 +2362,6 @@ export const setup = (
       }
     )
 
-
     // debugAnimId = actorController.debugGetAnimId();
     // debugViewId = divView.ViewId;
     // console.log("testtest", props.name, `animId:${debugAnimId} viewId:${debugViewId}`);
@@ -2310,6 +2405,17 @@ export const setup = (
         .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
         .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
     ]);
+
+    if (props.onScroll) {
+      setOnMovement(DEFAULT_SENSITIVITY);
+    }
+  }
+
+  function cleanTouch() {
+    actorController.run((cmds) => [
+      cmds.state().clearAllConditions(),
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
+    ])
   }
 
   //init
@@ -2369,20 +2475,20 @@ export const setup = (
     permanentItemList
   );
   initUpdater.apply();
-  //延时加载剩余屏
-  const delayLoadHandler = setTimeout(() => {
-    const updateHandler = pageUpdater.update(
-      metroTemplate,
-      initVisibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
-      initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
-      focusId,
-      false,
-      permanentItemList
-    );
-    updateHandler.apply();
-  }, 200);
-  const tryCancelDelayLoad = () => {
-    clearTimeout(delayLoadHandler);
+  //触控时, 延时加载剩余屏
+  let delayLoadHandler = -1;
+  if (props.touchFlag > 0) {
+    delayLoadHandler = setTimeout(() => {
+      const updateHandler = pageUpdater.update(
+        metroTemplate,
+        initVisibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+        initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+        focusId,
+        false,
+        permanentItemList
+      );
+      updateHandler.apply();
+    }, 200);
   }
 
   onMounted(() => {
@@ -2411,6 +2517,9 @@ export const setup = (
     taskManager.cancelAllTask();
     tryCancelDelayLoad();
     mounted = false;
+    if (touchInited) {
+      cleanTouch();
+    }
   });
 
   return {
@@ -2426,5 +2535,6 @@ export const setup = (
     onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
     modeForExport,
+    onDispatchKeyDown
   }
 }

package/utils/JsViewEngineWidget/MetroWidget/TaskManager.ts

@@ -1,4 +1,4 @@
-import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
 
 interface AnimSetting {
   easing?: string | null;

package/utils/JsViewEngineWidget/TemplateParser/Fence.ts

@@ -1,4 +1,4 @@
-interface GapInfo {
+export interface GapInfo {
   readonly GapStart: number,
   readonly GapEnd: number,
 }
@@ -132,4 +132,4 @@ class Fence {
     return newFence;
   }
 }
-export { Fence, GapInfo }
+export { Fence }

package/utils/JsViewEngineWidget/TemplateParser/ListMetroTemplate.ts

@@ -83,7 +83,7 @@ class ListMetroTemplate extends MetroTemplate {
     hOffset: number, moveType: number): TemplateItem | null {
     const item = this.getItemById(baseId) as any;
     if (item) {
-      let neighborDirection: string | null = null;
+      let neighborDirection: "left" | "right" | "bottom" | "top" | null = null;
       if (this.direction == VERTICAL) {
         if (vOffset > 0) {
           neighborDirection = "bottom";
@@ -97,16 +97,22 @@ class ListMetroTemplate extends MetroTemplate {
           neighborDirection = "left";
         }
       }
-      if (!neighborDirection) return null;
-      let target = this.getItemByIndex(item.neighborIndexList[neighborDirection]?.[0]);
-      while (target) {
-        if (target.focusable) {
-          break;
-        } else {
-          target = this.getItemByIndex(item.neighborIndexList[neighborDirection]?.[0]);
+      if (neighborDirection !== null) {
+        if (item.neighborIndexList[neighborDirection].length === 0) return null;
+        let target = this.getItemByIndex(item.neighborIndexList[neighborDirection][0]);
+        while (target) {
+          if (target.focusable) {
+            break;
+          } else {
+            if (target.neighborIndexList[neighborDirection].length > 0) {
+              target = this.getItemByIndex(target.neighborIndexList[neighborDirection][0]);
+            } else {
+              return null;
+            }
+          }
         }
+        return target;
       }
-      return target;
     }
     return null;
   }

package/utils/JsViewEngineWidget/TemplateParser/MetroTemplate.ts

@@ -137,7 +137,7 @@ interface FindNextAnchor {
   bottom: number,
 }
 
-interface TemplateItem {
+export interface TemplateItem {
   id: number,
   index: number,
   left: number,
@@ -165,7 +165,7 @@ interface TemplateItem {
   uid?: string,
 }
 
-interface MeasureInfo {
+export interface MeasureInfo {
   left?: number,
   top?: number,
   width: number,
@@ -291,12 +291,12 @@ abstract class MetroTemplate {
       if (this.direction == VERTICAL) {
         return {
           width: this.lineMax,
-          height: lastItem.height + lastItem.top - 1,
+          height: lastItem.height + lastItem.top - 1 + 1,
         }
       } else {
         return {
           height: this.lineMax,
-          width: lastItem.width + lastItem.left - 1,
+          width: lastItem.width + lastItem.left - 1 + 1,
         }
       }
     } else {
@@ -386,7 +386,5 @@ abstract class MetroTemplate {
 }
 
 export {
-  MeasureInfo,
   MetroTemplate,
-  TemplateItem,
 }

package/utils/JsViewPlugin/JsvLatex/BrowserDomBuilder.js

@@ -2,10 +2,18 @@ export const getHtmlStr = (libPath, latexStr, fontSize, width, height, color) =>
   return (
     `<html>
       <head>
+        <style>
+          mjx-container[display="true"] {
+            margin: 0 0 !important;
+          }
+          body {
+            margin: 0 !important;
+          }
+        </style>
         <script type="text/javascript">
           MathJax = {
             tex: {
-              inlineMath: [['$', '$'], ['\\(', '\\)']]
+              inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]
             },
             svg: {
               fontCache: 'global'
@@ -16,13 +24,15 @@ export const getHtmlStr = (libPath, latexStr, fontSize, width, height, color) =>
             divElement.style.display = "inline-block";
             divElement.style.fontSize = "${fontSize}px";
             divElement.style.color = "${color}";
-            divElement.innerHTML = String.raw\`$$${latexStr}$$\`;
+            divElement.innerHTML = String.raw\`${latexStr}\`;
+            //divElement.style.width = ${width} + "px";
             document.body.appendChild(divElement);
             
             MathJax.typesetPromise().then(() => {
               // modify the DOM here
               let formulaMetrics = MathJax.getMetricsFor(divElement, true);
-              let scale = ${width} / divElement.clientWidth;
+              let w = Math.min(${width}, divElement.clientWidth);
+              let scale = w / divElement.clientWidth;
               divElement.style.fontSize = Math.floor(scale * ${fontSize}) + "px";
               MathJax.typeset();
             }).catch((err) => console.error(err.message));