@shijiu/jsview-vue 2.2.128 → 2.2.201

package/utils/JsViewVueWidget/JsvScrollBox/JsvScrollFollow.vue

@@ -0,0 +1,468 @@
+<!--
+ * 【模块 export 内容】
+ * JsvScrollFollow：Vue高阶组件，响应并同步JsvScrollBox的移动的div/ninePatch特殊类型的进度展示组件
+ *  props说明:
+ *      proxyType {ScorllBoxStyle.*} (必填,非响应式!!) 下面的几个类型中选一种：
+                                      SizeDiv: 一个普通的div, 进度信息影响div的width/height, proxyProps里面主要设置backgroundColor
+                                      SizeClip: 对子内容进行剪切的div, 此类型不支持proxyProps的设置, 只有varWidth和varHeight能为变量
+                                        (本组件会额外赋予overflow:hidden, 以及剪切区域自由移动的data-jsv-vw-mask-separate)
+                                      JsvNinePatch: JsvNinePatch组件类型
+ *      proxyProps {Object}  (选填,响应式) 传给代理类型的props，例如JsvNinePatch时，JsvNinePatch的props设置
+ *      varLeft/varTop/varWidth/varHeight(number|Object): 
+                                        (选填, 但至少有一个值, 响应式) 当为number时为固定值，
+                                        TODO: 响应式改动后立即同步进度处理还没完成
+                                        为Object时必须是{start:number, end:number}格式
+                                        其中start对应 JsvScrollBox 进度起始值时的位置，end对应 JsvScrollBox 进度终点值的位置
+                                        特别注意: left/Top, width/height分别是两种变换，不能这两组不能同时都为变值
+ *      syncWith {String} (必填，响应式)  进度联动组件来源，内容为联动来源的linkName 
+ *      syncType {ScrollBoxStyle.*}
+ *                        (选填，响应式)  决定syncWith的联动模式，当syncWith设置后才能生效, 默认为 SyncForward
+ *                                      SyncForward(默认值): 同进同退, mySelf = sourcePercent
+ *                                      SyncReverse: 进退反向, mySelf = (1 - sourcePercent)
+ *
+ *  template说明:
+        当proxyType为clipDiv可以放置<template>子节点，所有子节点不做改变直接作为本节点的子，以slot形式
+ *  expose函数说明:
+ *      setSensor(sensitivity:number, callback:Function<percent:number, x:number, y:number>) 设置运动后触发的回调
+ *                             sensitivity为回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低  
+ *
+-->
+
+<template>
+  <div v-if="cProxyType == ScrollBoxStyle.SizeClip" v-bind="rSizeClipOutProps">
+    <div ref="rSliderViewRef" v-bind="rSizeClipInnerProps">
+      <div data-jsv-vw-mask-dock="true">
+        <slot />
+      </div>
+    </div>
+  </div>
+  <div
+    v-else-if="cProxyType == ScrollBoxStyle.SizeDiv"
+    ref="rSliderViewRef"
+    v-bind="rSizeDivProps"
+  />
+  <JsvNinePatch
+    :onDivRef="onNinePatchRef"
+    v-else-if="cProxyType == ScrollBoxStyle.JsvNinePatch"
+    v-bind="rNinePatchMergedProps"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  shallowRef,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+  defineExpose,
+  withDefaults,
+  defineProps,
+} from "vue";
+import ActControl from "../JsvFreeMoveActor/ActorControl";
+import { ScrollBoxStyle } from "./ScrollSymbol";
+import { GetSyncLinkManager } from "../JsvFreeMoveActor/SyncLinkManager";
+import { NexusNode } from "../JsvFreeMoveActor/NexusNode";
+import { ScrollInnerStyle } from "./ScrollInnerSymbol";
+import JsvNinePatch from "../JsvNinePatch.vue";
+
+const rProps = withDefaults(
+  defineProps<{
+    // 所代理节点的类型
+    // 取值范围: ScrollBoxStyle.SizeClip, ScrollBoxStyle.JsvNinePatch, ScrollBoxStyle.SizeDiv
+    proxyType: symbol;
+
+    // 传给所代理节点的props
+    proxyProps?: Object;
+
+    // left的值或者跟随scroll进度信息的变化范围
+    varLeft?: number | object;
+
+    // top的值或者跟随scroll进度信息的变化范围
+    varTop?: number | object;
+
+    // width的值或者跟随scroll进度信息的变化范围
+    varWidth?: number | object;
+
+    // height的值或者跟随scroll进度信息的变化范围
+    varHeight?: number | object;
+
+    // 进度同步源的linkName
+    syncWith: string;
+
+    // 进度同步的模式(同向还是反向)
+    // 取值范围: ScrollBoxStyle.SyncForward, ScrollBoxStyle.SyncReverse
+    syncType?: symbol;
+  }>(),
+  {
+    varMode: ScrollBoxStyle.Position,
+    varLeft: 0,
+    varTop: 0,
+    varWidth: 0,
+    varHeight: 0,
+    syncType: ScrollBoxStyle.SyncForward,
+  }
+);
+
+/** 本地类型定义 **/
+interface PosSizeType {
+  start: number;
+  end: number;
+}
+
+/** 本地常量 **/
+const cProxyType = rProps.proxyType;
+
+// SizeClip和JsvNinePatch都是size调整模式
+// TODO: 其他模式可能会有Position模式，后续再补充
+const cVarMode = ScrollBoxStyle.Size;
+
+const cSyncLinkManager = GetSyncLinkManager();
+const cSliderActor = new ActControl();
+
+// Actor condition group id(1~9可任意用)
+const cSensorConditionGroup = 1;
+const cLinkConditionGroup = 2;
+
+/** 本地非响应式变量 **/
+let vSyncWithNameCache: String | null = null; // 当前关联的SyncLinkSource的名称
+let vSyncTypeCache: Symbol = ScrollBoxStyle.SyncForward;
+let vWaitMasterLinkSourceReady: Promise<void> | null = null;
+let vSyncLinkNexusNode: NexusNode | null = null;
+let vTargetViewReady = false;
+let vCurrentPercent: number = 0;
+
+// 设置同步区域
+let vMainDivTop: PosSizeType = {
+  start: NaN,
+  end: NaN,
+};
+let vMainDivLeft: PosSizeType = {
+  start: NaN,
+  end: NaN,
+};
+let vMainDivWidth: PosSizeType = {
+  start: NaN,
+  end: NaN,
+};
+let vMainDivHeight: PosSizeType = {
+  start: NaN,
+  end: NaN,
+};
+
+/** 本地响应式变量 **/
+let rSliderViewRef = shallowRef(null);
+let rSizeClipOutProps: any = shallowRef(null);
+let rSizeClipInnerProps: any = shallowRef(null);
+let rNinePatchMergedProps: any = shallowRef(null);
+let rSizeDivProps: any = shallowRef(null);
+
+function resetPosSizeInfo(
+  source: number | Object,
+  varRef: PosSizeType,
+  allowVar: boolean
+): boolean {
+  let tmpVal = { start: 0, end: 0 };
+
+  if (typeof source == "number") {
+    tmpVal.start = source;
+    tmpVal.end = source;
+  } else {
+    tmpVal.start = (source as any).start ? (source as any).start : 0;
+    tmpVal.end = (source as any).end ? (source as any).end : 0;
+  }
+
+  if (tmpVal.start != varRef.start || tmpVal.end != varRef.start) {
+    varRef.start = tmpVal.start;
+    varRef.end = tmpVal.end;
+    if (varRef.start != varRef.end && allowVar) {
+      if (!allowVar) {
+        return false;
+      }
+    }
+    return true;
+  } else {
+    return false;
+  }
+}
+
+// rProps变化的watchEffect
+watchEffect(() => {
+  // 其余属性变化
+  let reactChangedMerged: boolean = false;
+  {
+    let changed: boolean = false;
+    changed = resetPosSizeInfo(
+      rProps.varTop,
+      vMainDivTop,
+      cVarMode == ScrollBoxStyle.Position
+    );
+    reactChangedMerged ||= changed;
+    changed = resetPosSizeInfo(
+      rProps.varLeft,
+      vMainDivLeft,
+      cVarMode == ScrollBoxStyle.Position
+    );
+    reactChangedMerged ||= changed;
+    changed = resetPosSizeInfo(
+      rProps.varWidth,
+      vMainDivWidth,
+      cVarMode == ScrollBoxStyle.Size
+    );
+    reactChangedMerged ||= changed;
+    changed = resetPosSizeInfo(
+      rProps.varHeight,
+      vMainDivHeight,
+      cVarMode == ScrollBoxStyle.Size
+    );
+    reactChangedMerged ||= changed;
+  }
+
+  if (reactChangedMerged) {
+    rebuildAckSync();
+  }
+
+  // 在 rebuildAckSync 之后，确认syncWith是否变化，变化则重建参照的SyncLinkSource
+  if (
+    vSyncWithNameCache != rProps.syncWith ||
+    vSyncTypeCache != rProps.syncType
+  ) {
+    vSyncWithNameCache = rProps.syncWith;
+    vSyncTypeCache = rProps.syncType;
+    changeSyncLink(vSyncWithNameCache);
+  }
+
+  // slider div属性变化(放在最后，因为style里面的top/left要参考varTop/varLeft/varWidth/varHeight)
+  {
+    let divStyle = {
+      // 对应模式的动态变量设置为0(width/height设置为100为了进行测试)，否则使用其start作为固定值
+      top: cVarMode == ScrollBoxStyle.Position ? 0 : vMainDivTop.start,
+      left: cVarMode == ScrollBoxStyle.Position ? 0 : vMainDivLeft.start,
+      width: cVarMode == ScrollBoxStyle.Size ? 0 : vMainDivWidth.start,
+      height: cVarMode == ScrollBoxStyle.Size ? 0 : vMainDivHeight.start,
+    };
+    switch (cProxyType) {
+      // SizeClip
+      case ScrollBoxStyle.SizeClip:
+        {
+          if (rProps.proxyProps) {
+            console.warn("clipDiv not support proxyProps");
+          }
+          rSizeClipOutProps.value = {
+            style: {
+              top: divStyle.top,
+              left: divStyle.left,
+            },
+          };
+          rSizeClipInnerProps.value = {
+            style: {
+              width: divStyle.width,
+              height: divStyle.height,
+              overflow: "hidden",
+            },
+            "data-jsv-vw-mmask-drift": "true", // 将clip视窗做成drift模式
+          };
+        }
+        break;
+
+      // JsvNinePatch
+      case ScrollBoxStyle.JsvNinePatch:
+        {
+          rNinePatchMergedProps.value = {
+            ...rProps.proxyProps,
+            style: {
+              ...divStyle,
+            },
+          };
+        }
+        break;
+
+      // SizeDiv
+      case ScrollBoxStyle.SizeDiv:
+        {
+          let proxyStyle: any = null;
+          if ((rProps.proxyProps as any)?.style) {
+            proxyStyle = (rProps.proxyProps as any)?.style;
+          }
+          rProps.proxyProps;
+          rSizeDivProps.value = {
+            style: {
+              ...proxyStyle,
+              ...divStyle,
+            },
+          };
+        }
+        break;
+
+      default:
+        // Unknown types
+        console.error("unknown proxy type=" + cProxyType?.toString());
+        return;
+    }
+  }
+});
+
+function changeSyncLink(newSyncSourceName: String) {
+  // 清理原Link nexusNode
+  vSyncLinkNexusNode = null;
+  rebuildAckSync();
+
+  if (newSyncSourceName != null) {
+    // 创建新Source的Ready promise, 在确认目标节点存在后再获取NexusNode来创建condition
+    // 注意此Promise要在unMounted时通过UnListen进行反注册，才能规避内存泄漏
+    vWaitMasterLinkSourceReady = cSyncLinkManager
+      .WaitSourceMounted(newSyncSourceName)
+      .then(() => {
+        // 获取Link nexusNode。此引用不用专门释放，没有内存泄漏问题
+        vSyncLinkNexusNode =
+          cSyncLinkManager.GetSourceNexusNode(newSyncSourceName);
+        rebuildAckSync();
+      });
+  }
+}
+
+function rebuildAckSync() {
+  if (!vTargetViewReady) return;
+
+  // 清理老设定
+  cSliderActor.run((cmds) => [
+    cmds.state().removeConditionByGroup(cLinkConditionGroup),
+  ]);
+
+  if (vSyncLinkNexusNode != null) {
+    // 创建运动跟随的condition
+    let vertSet: PosSizeType, horiSet: PosSizeType;
+    if (cVarMode == ScrollBoxStyle.Position) {
+      vertSet = vMainDivTop;
+      horiSet = vMainDivLeft;
+    } else {
+      vertSet = vMainDivHeight;
+      horiSet = vMainDivWidth;
+    }
+
+    cSliderActor.run((cmds) => [
+      cmds
+        .condition(cLinkConditionGroup, true)
+        .movementSync(vSyncLinkNexusNode!)
+        .then([
+          cmds
+            .action()
+            .ackMovementSync(
+              horiSet.start,
+              horiSet.end,
+              vertSet.start,
+              vertSet.end,
+              0b11,
+              vSyncTypeCache == ScrollBoxStyle.SyncForward ? 1 : 2
+            ),
+        ]),
+      cmds
+        .condition(cLinkConditionGroup, true)
+        .onNexusEvent(
+          vSyncLinkNexusNode!,
+          ScrollInnerStyle.UpdatePercentNexusCode
+        )
+        .then([
+          (pointInfo: any) => {
+            vCurrentPercent = positionToPercent(pointInfo);
+          },
+        ]),
+    ]);
+  }
+}
+
+// setSensor 函数声明
+function setSensor(callback: Function, sensitivity: number) {
+  cSliderActor.run((cmds) => [
+    cmds.state().removeConditionByGroup(cSensorConditionGroup),
+  ]);
+  if (callback != null) {
+    cSliderActor.run((cmds) => [
+      cmds
+        .condition(cSensorConditionGroup, true)
+        .onMovement(sensitivity) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
+        .then([
+          (pointInfo: any) => {
+            let percent: number = positionToPercent(pointInfo);
+            vCurrentPercent = percent;
+            callback(percent, pointInfo.xPos, pointInfo.yPos);
+          },
+        ]),
+    ]);
+  }
+}
+
+function positionToPercent(pointInfo: any): number {
+  let percent = 0;
+  if (cVarMode == ScrollBoxStyle.Position) {
+    if (vMainDivTop.start != vMainDivTop.end) {
+      percent = pointInfo.yPos / (vMainDivTop.end - vMainDivTop.start);
+    } else if (vMainDivLeft.start != vMainDivLeft.end) {
+      percent = pointInfo.xPos / (vMainDivLeft.end - vMainDivLeft.start);
+    }
+  } else {
+    if (vMainDivHeight.start != vMainDivHeight.end) {
+      percent = pointInfo.yPos / (vMainDivHeight.end - vMainDivHeight.start);
+    } else if (vMainDivWidth.start != vMainDivWidth.end) {
+      percent = pointInfo.xPos / (vMainDivWidth.end - vMainDivWidth.start);
+    }
+  }
+  return percent;
+}
+
+function onNinePatchRef(divRef: any) {
+  // 理论上此回调会在本组件onMounted前调用
+  // 这样在onMounted中就可以正常使用
+  rSliderViewRef.value = divRef;
+
+  initViewControl();
+}
+
+function initViewControl() {
+  if (rSliderViewRef.value == null) {
+    return;
+  }
+
+  if (vTargetViewReady) {
+    // already inited, not allow init twice
+    return;
+  }
+
+  vTargetViewReady = true;
+
+  // 构建slider的FreeMove控制对象
+  let sliderView = (rSliderViewRef.value as any).jsvGetProxyView(
+    cProxyType != ScrollBoxStyle.SizeDiv
+  );
+  if (cVarMode == ScrollBoxStyle.Size) {
+    cSliderActor.asSizeMode();
+  }
+  cSliderActor.bindForgeView(sliderView, true);
+
+  // 设置关联区域
+  rebuildAckSync();
+}
+
+function currentPercent(): number {
+  return vCurrentPercent;
+}
+
+onMounted(() => {
+  initViewControl();
+});
+
+onUnmounted(() => {
+  /** 关于LinkSource的释放 **/
+  // 释放作为linkSource slave时的句柄
+  if (vWaitMasterLinkSourceReady != null) {
+    cSyncLinkManager.UnListen(vWaitMasterLinkSourceReady);
+    vWaitMasterLinkSourceReady = null;
+  }
+});
+
+defineExpose({
+  setSensor,
+  currentPercent,
+});
+</script>
+
+<style lang="scss" scoped></style>

package/utils/JsViewVueWidget/JsvScrollBox/ScrollInnerSymbol.ts

@@ -0,0 +1,9 @@
+
+
+const ScrollInnerStyle = {
+    UpdatePercentNexusCode: 10001,
+}
+
+export {
+    ScrollInnerStyle
+}

package/utils/JsViewVueWidget/JsvScrollBox/ScrollSymbol.ts

@@ -1,15 +1,24 @@
 
 
-const ScrollStyle = {
+const ScrollBoxStyle = {
     // 运动模式
     DrawerMode: Symbol("DrawerMode"),
     PinMode: Symbol("PinMode"),
 
     // 同步模式
-    SyncParallel: Symbol("AckParallel"),  // 百分比完全对齐的同步模式
-    SyncRevert: Symbol("SyncRevert"), // (1-百分比)的同步模式
+    SyncForward: Symbol("SyncForward"),  // 百分比完全对齐的同步模式
+    SyncReverse: Symbol("SyncReverse"), // (1-百分比)的同步模式
+
+    // Follow的同步模式
+    Position: Symbol("Position"),
+    Size: Symbol("Size"),
+
+    // Follow的类型定义
+    SizeDiv: Symbol("SizeDiv"),
+    SizeClip: Symbol("SizeClip"),
+    JsvNinePatch: Symbol("JsvNinePatch"),
 }
 
 export {
-    ScrollStyle
+    ScrollBoxStyle
 }

package/utils/JsViewVueWidget/JsvScrollBox/index.ts

@@ -0,0 +1,3 @@
+export { default as JsvScrollBox } from "./JsvScrollBox.vue"
+export { default as JsvScrollFollow } from "./JsvScrollFollow.vue"
+export * from "./ScrollSymbol"

package/utils/JsViewVueWidget/index.js

@@ -58,3 +58,6 @@ export {
 export { default as JsvEnableRenderBreak } from "./JsvEnableRenderBreak.vue";
 export { JsvMindMap } from "./JsvMindMap"
 export * from "./JsvScrollBox"
+export { default as JsvFragShaderView } from "./JsvFragShaderView"
+export * from "./JsvClipDiv"
+export * from "./JsvDriftScope"

package/utils/JsViewEngineWidget/MetroWidget/Dispatcher.js

@@ -1,19 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2021-09-22 16:50:09
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-26 10:17:47
- * @Description: file content
- */
-import { BaseDispatcher } from "../WidgetCommon";
-
-class Dispatcher extends BaseDispatcher {}
-Dispatcher.Type = {
-  setFocusId: Symbol("setFocusId"),
-  updateItem: Symbol("updateItem"),
-  slideToItem: Symbol("slideTo"),
-  setEnterFocusId: Symbol("setEnterFocusId"),
-  setEnterFocusRect: Symbol("setEnterFocusRect"),
-};
-export { Dispatcher as SWidgetDispatcher };
-export default Dispatcher;

package/utils/JsViewVueWidget/JsvScrollBox/index.js

@@ -1,2 +0,0 @@
-export { default as JsvScrollBox } from "./JsvScrollBox.vue"
-export * from "./ScrollSymbol.ts"