@shijiu/jsview-vue 2.1.25 → 2.1.200

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -7,6 +7,8 @@
  *          slideSpeed    {int}      滚动速度 px/s, 默认60
  *          slideDirection{String}   滚动方向 ste(start to end)/ets(end to start)/ltr/rtl
  *          forceSlide    {boolean}  短文字是否滚动，默认false
+ *          timeGap       {int}      每次完整移动的时间间隔 单位:ms
+ *          textGap       {int}      两屏之间的文字宽度间隔。 
  * 说明
  * JsvMarquee会识别阿拉伯字符自动设置direction
 -->
@@ -14,7 +16,15 @@
 <script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import { TextTools } from "../JsViewVueTools/JsvTextTools";
-import { shallowRef, computed, toRaw, onMounted, onBeforeUnmount } from "vue";
+import { getTextWidth, JsvVisibleSensor } from "jsview";
+import {
+  shallowRef,
+  computed,
+  toRaw,
+  onMounted,
+  onBeforeUnmount,
+  watchEffect,
+} from "vue";
 
 const defaultFontStyle = () => {
   return {
@@ -63,12 +73,37 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  timeGap: {
+    type: Number,
+    default: 1000,
+  },
+  textGap: {
+    type: Number,
+  },
 });
+
+let myTextGap = shallowRef(0);
+if (props.textGap == undefined) {
+  myTextGap.value = props.style.width;
+} else {
+  myTextGap.value = props.textGap;
+}
+
+const text1 = shallowRef(props.text);
+const text2 = shallowRef(null);
 const slideDiv = shallowRef(null);
+const slideDiv2 = shallowRef(null);
 const textDiv = shallowRef(null);
-let animState = 0;
+const textDiv2 = shallowRef(null);
+const MoreLong = shallowRef(false);
+const longWidth2 = shallowRef(0);
+const rightLeft = shallowRef(0);
+const noSlide = shallowRef(false);
+const normalSlide = shallowRef(false);
 let animIdleHandler = -1;
-let asyncStartHandler = -1;
+
+//文字left值
+let myTextLeft = shallowRef(0);
 
 const _direction = computed(() => {
   if (props.style?.direction == "rtl" || props.style.direction == "ltr") {
@@ -79,7 +114,7 @@ const _direction = computed(() => {
 });
 
 const fontStyle = computed(() => {
-  let { left, top, width, height, ...rest } = props.style;
+  let { top, width, height, ...rest } = props.style;
   let r = defaultFontStyle();
   Object.assign(r, rest);
   if (props.forceSlide) {
@@ -90,191 +125,333 @@ const fontStyle = computed(() => {
   return r;
 });
 
-//rtl文字需要先获得文字宽度
-let textWidth =
-  fontStyle.value.direction == "rtl"
-    ? TextTools.getOneLineTextDrawWidth(props.text, fontStyle.value).totalWidth
-    : 0;
+//先获得文字宽度
+let textWidth = shallowRef(getTextWidth(props.text, fontStyle.value));
+
 const slideDivLeft = computed(() =>
-  fontStyle.value.direction == "rtl" && props.style.width < textWidth
-    ? props.style.width - textWidth
-    : 0
+  fontStyle.value.direction == "rtl" ? 0 : 0
 );
+//最终确定数值
+const sureNum = () => {
+  if (textWidth.value > 2.5 * props.style.width) {
+    MoreLong.value = true;
+    noSlide.value = false;
+    normalSlide.value = false;
+    let halfLength = Math.floor(props.text.length / 2);
+    text1.value = props.text.slice(0, halfLength);
+    text2.value = props.text.slice(halfLength);
+    textWidth.value = TextTools.getOneLineTextDrawWidth(
+      text1.value,
+      fontStyle.value
+    ).totalWidth;
+    longWidth2.value =
+      TextTools.getOneLineTextDrawWidth(text2.value, fontStyle.value)
+        .totalWidth + myTextGap.value;
 
-const getAnimInfo = (state) => {
-  const info = {
-    start: 0,
-    end: 0,
-  };
-  const isRtl = _direction.value == "rtl";
-  if (state == 0) {
-    //滚出
-    if (isRtl) {
-      if (props.slideDirection == "rtl" || props.slideDirection == "ste") {
-        info.end = textWidth;
-      } else {
-        //反向滚动
-        info.end = -props.style.width;
-      }
+    //判断文字Left
+    if (_direction.value == "rtl") {
+      myTextLeft.value = props.style.width - textWidth.value;
     } else {
-      if (props.slideDirection == "ltr" || props.slideDirection == "ste") {
-        info.end = -textWidth;
-      } else {
-        //反向滚动
-        info.end = props.style.width;
-      }
+      myTextLeft.value = 0;
     }
-  } else {
-    //滚入
-    if (isRtl) {
-      if (props.slideDirection == "rtl" || props.slideDirection == "ste") {
-        info.start = -props.style.width;
+  } else if (textWidth.value + myTextGap.value < props.style.width) {
+    text1.value = props.text;
+    text2.value = null;
+    noSlide.value = true;
+    MoreLong.value = false;
+    normalSlide.value = false;
+  } else if (
+    props.forceSlide ||
+    (textWidth.value < 2.5 * props.style.width &&
+      textWidth.value > props.style.width)
+  ) {
+    textWidth.value = textWidth.value + myTextGap.value;
+    text1.value = props.text;
+    text2.value = props.text;
+    MoreLong.value = false;
+    noSlide.value = false;
+    normalSlide.value = true;
+
+    if (
+      TextTools.getOneLineTextDrawWidth(props.text, fontStyle.value)
+        .totalWidth > props.style.width
+    ) {
+      //rtl文字本身大于一个组件宽度时需要更改left
+      if (_direction.value == "rtl") {
+        myTextLeft.value =
+          props.style.width - textWidth.value + myTextGap.value;
       } else {
-        //反向滚动
-        info.start = textWidth;
+        myTextLeft.value = 0;
       }
     } else {
-      if (props.slideDirection == "ltr" || props.slideDirection == "ste") {
-        info.start = props.style.width;
-      } else {
-        //反向滚动
-        info.start = -textWidth;
-      }
+      myTextLeft.value = 0;
     }
+  } else {
+    text1.value = props.text;
+    text2.value=null
+    noSlide.value = true;
+    MoreLong.value = false;
+    normalSlide.value = false;
   }
-  return info;
+};
+sureNum();
+//基础移动
+const baseSlide = (refObj, startPos, endPos, callback) => {
+  const anim = new Forge.TranslateFrameAnimation(
+    startPos,
+    endPos,
+    props.slideSpeed,
+    true,
+    0,
+    0
+  );
+  anim.SetAnimationListener(
+    new Forge.AnimationListener(
+      null,
+      (ended) => {
+        if (ended) {
+          callback?.();
+        }
+      },
+      null
+    )
+  );
+  anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
+  toRaw(refObj.value)?.jsvGetProxyView(true).StartAnimation(anim);
 };
 
-const slideStep = () => {
-  let animInfo = getAnimInfo(animState);
-  if (animState == 0) {
-    // 文字从原始位置，移动出屏幕(每次完整移动，停顿1秒)
-    animIdleHandler = setTimeout(() => {
-      animIdleHandler = -1;
-      const anim = new Forge.TranslateFrameAnimation(
-        animInfo.start,
-        animInfo.end,
-        props.slideSpeed,
-        true,
-        0,
-        0
-      );
-      anim.SetAnimationListener(
-        new Forge.AnimationListener(
-          null,
-          (ended) => {
-            if (ended) {
-              // 正常结束，非Cancel时，进行下一个动作
-              slideStep();
-            }
-          },
-          null
-        )
-      );
-      anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-      toRaw(slideDiv.value).jsvGetProxyView(true).StartAnimation(anim);
-      animState = 1;
-    }, 1000);
-  } else {
-    // 文字从屏幕外部，移动回屏幕中的文字原始位置
-    const anim = new Forge.TranslateFrameAnimation(
-      animInfo.start,
-      animInfo.end,
-      props.slideSpeed,
-      true,
-      props.style.width,
-      0
-    );
-    anim.SetAnimationListener(
-      new Forge.AnimationListener(
-        null,
-        (ended) => {
-          if (ended) {
-            // 正常结束，非Cancel时，进行下一个动作
-            slideStep();
-          }
-        },
-        null
-      )
-    );
-    toRaw(slideDiv.value.jsvGetProxyView(true)).StartAnimation(anim);
-    animState = 0;
-  }
+//小于2.5屏的计时器
+const slideTimer = () => {
+  animIdleHandler = -1;
+  animIdleHandler = setTimeout(() => {
+    if (_direction.value == "ltr" && props.slideDirection == "ste") {
+      slideAllStep();
+    } else if (_direction.value == "ltr" && props.slideDirection == "ets") {
+      slideAllStepTurn();
+    } else if (_direction.value == "rtl" && props.slideDirection == "ste") {
+      slideAllStep2();
+    } else if (_direction.value == "rtl" && props.slideDirection == "ets") {
+      slideAllStep2Turn();
+    }
+  }, props.timeGap);
+};
+//大于2.5屏的计时器
+const longSlideTimer = () => {
+  animIdleHandler = -1;
+  animIdleHandler = setTimeout(() => {
+    if (_direction.value == "ltr" && props.slideDirection == "ste") {
+      slideAllStepLong();
+    } else if (_direction.value == "ltr" && props.slideDirection == "ets") {
+      slideAllStepLongTurn();
+    } else if (_direction.value == "rtl" && props.slideDirection == "ste") {
+      slideAllStep2Long();
+    } else if (_direction.value == "rtl" && props.slideDirection == "ets") {
+      slideAllStep2LongTurn();
+    }
+  }, props.timeGap);
+};
+
+//小于2.5屏向左移动
+const slideAllStep = () => {
+  baseSlide(slideDiv, 0, -textWidth.value, null);
+  baseSlide(slideDiv2, 0, -textWidth.value, slideTimer);
+};
+
+//反向
+const slideAllStepTurn = () => {
+  baseSlide(slideDiv, 0, textWidth.value, null);
+  baseSlide(slideDiv2, -2 * textWidth.value, -textWidth.value, slideTimer);
+};
+
+//向右移动(阿拉伯2.5屏内)
+const slideAllStep2 = () => {
+  baseSlide(slideDiv, 0, textWidth.value, null);
+  baseSlide(slideDiv2, 0, textWidth.value, slideTimer);
+};
+//反向
+const slideAllStep2Turn = () => {
+  baseSlide(slideDiv, 0, -textWidth.value, null);
+  baseSlide(slideDiv2, 2 * textWidth.value, textWidth.value, slideTimer);
+};
+//向左移动(大于2.5屏)
+const slideAllStepLong = () => {
+  baseSlide(slideDiv, 0, -textWidth.value, () => {
+    baseSlide(slideDiv, longWidth2.value, 0, longSlideTimer);
+  });
+  baseSlide(slideDiv2, 0, -(longWidth2.value + textWidth.value), null);
+};
+//反向
+const slideAllStepLongTurn = () => {
+  baseSlide(slideDiv, 0, textWidth.value, () => {
+    baseSlide(slideDiv, -longWidth2.value, 0, longSlideTimer);
+  });
+  baseSlide(slideDiv2, -(longWidth2.value + textWidth.value), 0, null);
 };
 
+//向右移动(阿拉伯大于2.5屏)
+const slideAllStep2Long = () => {
+  baseSlide(slideDiv, 0, textWidth.value, () => {
+    baseSlide(slideDiv, -longWidth2.value, 0, longSlideTimer);
+  });
+  baseSlide(slideDiv2, 0, longWidth2.value + textWidth.value, null);
+};
+//反向
+const slideAllStep2LongTurn = () => {
+  baseSlide(slideDiv, 0, -textWidth.value, () => {
+    baseSlide(slideDiv, longWidth2.value, 0, longSlideTimer);
+  });
+  baseSlide(slideDiv2, longWidth2.value + textWidth.value, 0, null);
+};
+
+//停止运动
 const stopSlide = () => {
   if (animIdleHandler > 0) {
     clearTimeout(animIdleHandler);
     animIdleHandler = -1;
   }
-  animState = 0;
   toRaw(slideDiv.value?.jsvGetProxyView(true))?.StopAnimation();
+  toRaw(slideDiv2.value?.jsvGetProxyView(true))?.StopAnimation();
+};
+//公共不满足条件部分
+const commonFailState = () => {
+  if (props.forceSlide) {
+    console.error("请注意文字长度和间隙加起来必须大于组件宽度");
+    text1.value = props.text;
+  } else {
+    text1.value = props.text;
+  }
 };
 
-const asyncStartAnim = () => {
-  stopSlide();
-  // 稍进行延迟，以等待JsView的native端描绘文字并回传文字宽度
-  if (asyncStartHandler > 0) {
-    clearTimeout(asyncStartHandler);
+//公共
+const commonState = (callback1, callback2) => {
+  if (props.slideDirection == "ets") {
+    callback1();
+  } else {
+    callback2();
   }
-  asyncStartHandler = setTimeout(() => {
-    if (textWidth <= 0) {
-      textWidth = textDiv.value.clientWidth;
-    }
-    if (props.forceSlide || textWidth > props.style.width) {
-      slideStep();
-    }
-    asyncStartHandler = -1;
-  }, 500);
 };
 
-onMounted(() => {
+const stateCallback = (old_h, new_h, old_v, new_v) => {
+  if (new_h || new_v) {
+    runAnimation();
+  } else if (!new_h && !new_v) {
+    stopSlide();
+  }
+};
+const runAnimation = () => {
   if (fontStyle.value.direction == "ltr") {
-    //普通的ltr文字异步通过clientWidth获取文字宽度
-    asyncStartAnim();
+    //再根据文字宽度决定视图
+    if (MoreLong.value) {
+      commonState(slideAllStepLongTurn, slideAllStepLong);
+    } else if (noSlide.value) {
+      commonFailState();
+    } else if (normalSlide.value) {
+      commonState(slideAllStepTurn, slideAllStep);
+    } else {
+      text1.value = props.text;
+    }
   } else {
-    if (props.forceSlide || textWidth > props.style.width) {
-      slideStep();
+    if (MoreLong.value) {
+      commonState(slideAllStep2LongTurn, slideAllStep2Long);
+      rightLeft.value = slideDivLeft.value - longWidth2.value + myTextGap.value;
+    } else if (noSlide.value) {
+      commonFailState();
+    } else if (normalSlide.value) {
+      commonState(slideAllStep2Turn, slideAllStep2);
+      rightLeft.value = slideDivLeft.value - textWidth.value;
+    } else {
+      text1.value = props.text;
     }
   }
+};
+watchEffect(() => {
+  //获取最新数据
+  if (props.text !== text1.value) {
+    const newText = props.text;
+    const newTextGap = props.textGap;
+    const newTextWidth = TextTools.getOneLineTextDrawWidth(
+      newText,
+      fontStyle.value
+    ).totalWidth;
+    textWidth.value = newTextWidth;
+    myTextGap.value = newTextGap == undefined ? myTextGap.value : newTextGap;
+    sureNum();
+    stopSlide();
+    runAnimation();
+  }
 });
 
 onBeforeUnmount(() => {
-  clearTimeout(asyncStartHandler);
-  asyncStartHandler = -1;
   stopSlide();
 });
 </script>
 
 <template>
-  <div
-    :style="{
-      left: style.left,
-      top: style.top,
-      width: style.width,
-      height: style.height,
-      overflow: 'hidden',
-    }"
+  <JsvVisibleSensor
+    :horizonShown="1"
+    :verticalShown="1"
+    :left="props.style.left"
+    :top="props.style.top"
+    :width="props.style.width"
+    :height="props.style.height"
+    :container="null"
+    :callback="stateCallback"
   >
     <div
-      ref="slideDiv"
       :style="{
-        left: slideDivLeft,
+        left: 0,
         top: 0,
         width: style.width,
         height: style.height,
+        overflow: 'hidden',
       }"
     >
       <div
-        ref="textDiv"
+        ref="slideDiv"
+        :style="{
+          left: slideDivLeft,
+          top: 0,
+          width: style.width,
+          height: style.height,
+        }"
+      >
+        <div
+          ref="textDiv"
+          :style="{
+            ...fontStyle,
+            height: style.height,
+            JsvTextAlignMinWidth: style.width,
+            left: myTextLeft,
+            top: 0,
+          }"
+        >
+          {{ text1 }}
+        </div>
+      </div>
+      <div
+        ref="slideDiv2"
         :style="{
-          ...fontStyle,
+          left: _direction == 'ltr' ? textWidth : rightLeft,
+          top: 0,
+          width: MoreLong ? longWidth2 - myTextGap : style.width,
           height: style.height,
-          JsvTextAlignMinWidth: style.width,
         }"
       >
-        {{ text }}
+        <div
+          ref="textDiv2"
+          :style="{
+            ...fontStyle,
+            height: style.height,
+            left: myTextLeft,
+            top: 0,
+            JsvTextAlignMinWidth: MoreLong
+              ? longWidth2 - myTextGap
+              : style.width,
+          }"
+        >
+          {{ text2 }}
+        </div>
       </div>
     </div>
-  </div>
+  </JsvVisibleSensor>
 </template>

package/utils/JsViewVueWidget/JsvMindMap/CommonType.ts

@@ -0,0 +1 @@
+export type Direction = "left" | "top" | "right" | "bottom"

package/utils/JsViewVueWidget/JsvMindMap/Constant.ts

@@ -0,0 +1,20 @@
+
+export const LEFT = "left";
+export const TOP = "top";
+export const RIGHT = "right";
+export const BOTTOM = "bottom";
+
+export const LEFT_BIT = 0b0001;
+export const TOP_BIT = 0b0010;
+export const RIGHT_BIT = 0b0100;
+export const BOTTOM_BIT = 0b1000;
+
+export function dirStrToBit(dir: string): number {
+  switch (dir) {
+    case LEFT: return LEFT_BIT;
+    case RIGHT: return RIGHT_BIT;
+    case TOP: return TOP_BIT;
+    case BOTTOM: return BOTTOM_BIT;
+    default: return 0;
+  }
+}