@shijiu/jsview-vue 2.1.6-alpha.0 → 2.1.23

package/utils/JsViewVueWidget/JsvRipple/JsvRipple.vue

@@ -0,0 +1,134 @@
+<!--
+ * 【模块 export 内容】
+ * JsvRipple: 波纹组件
+ *      组件说明:
+ *        只在盒子端支持, 浏览器端无效果
+ *        出于性能考虑, 最多同时有5个波纹
+ *        波的函数为 f(x, t) = amplitude * exp(-timeDecay * t) * (1.0 / (1.0 + distanceDecay * x * x))  
+                                * sin(PI_2 * frequency * (x / speed - t))
+ *      props说明:
+ *          width   {int}   宽
+ *          height  {int}   高
+ *          left    {int}   left位置
+ *          top     {int}   top位置
+ *          enable  {boolean} 是否启用特效
+ *      method说明:
+ *          addSource {(x, y, amplitude, shapeParams, mediumParams) => number}
+ *            返回值: token
+ *            参数: 
+ *              x {int}: 波纹中心x坐标
+ *              y {int}: 波纹中心y坐标
+ *              amplitude {int}: 波幅
+ *              shapeParams {{type: number, width?: number, height?: number, radius?: number}}:
+ *                type: 波纹类型, 目前只有两种
+ *                  JsvRippleShape.CIRCLE 圆形波
+ *                  JsvRippleShape.RECTANGLE 圆角矩形波
+ *                width: JsvRippleShape.RECTANGLE 时设置, 矩形的宽
+ *                height: JsvRippleShape.RECTANGLE 时设置, 矩形的高
+ *                radius: JsvRippleShape.RECTANGLE 时设置, 圆角半径
+ *              mediumParams {{timeDecay: number, distanceDecay: nubmer, speed: number, frequency: number, waveNum: number}}:
+ *                timeDecay: 时间衰减因子, 在公式中的影响为 exp(-timeDecay * t), 一般认为amplitude * exp(-timeDecay * t) < 1 时波消失, 所以要控制波的时长可以计算 ln(amplitude) / timeDecay
+ *                distanceDecay: 距离衰减因子, 公式中的影响为 (1.0 / (1.0 + distanceDecay * x * x))
+ *                speed: 波速 px/s
+ *                frequency: 频率 次/s
+ *                waveNum: 波的个数
+ *          removeSource {(token) => void}
+ *            参数:
+ *              token: 波源的token
+-->
+<script setup>
+import { Forge, ForgeExtension } from "@shijiu/jsview/dom/jsv-forge-define";
+import { onBeforeUnmount, watchEffect } from "vue";
+import { JsvRippleShape } from "./Constant";
+
+const props = defineProps({
+  width: {
+    type: Number,
+  },
+  height: {
+    type: Number,
+  },
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+  enable: {
+    type: Boolean,
+    default: true,
+  },
+});
+const TAG = "JsvRipple";
+
+let filterView = new Forge.FilterView(null, Forge.FilterView.Type.WAVE);
+let viewId = Forge.sViewStore.add(new Forge.ViewInfo(filterView, null));
+
+// 监控filter改变
+watchEffect(() => {
+  if (filterView) {
+    filterView.FilterSwitch(!!props.enable);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (viewId > 0) {
+    Forge.sViewStore.remove(viewId);
+    viewId = -1;
+  }
+});
+
+const defaultMediumParams = {
+  timeDecay: 3,
+  distanceDecay: 8,
+  speed: 100,
+  frequency: 8,
+  waveNum: 2,
+};
+const addSource = (
+  x,
+  y,
+  amplitude,
+  shapeParams = {
+    type: JsvRippleShape.CIRCLE,
+  },
+  mediumParams = {}
+) => {
+  if (filterView) {
+    const defObj = Object.assign({}, defaultMediumParams);
+    const m = Object.assign(defObj, mediumParams);
+    return filterView.AddWaveSourceSingle(x, y, amplitude, shapeParams, m);
+  } else {
+    console.warn(TAG, "addSource while filterView is null.");
+  }
+};
+
+const removeSource = (id) => {
+  if (filterView) {
+    filterView.RemoveSource(id);
+  } else {
+    console.warn(TAG, "removeSource while filterView is null");
+  }
+};
+
+defineExpose({
+  addSource,
+  removeSource,
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+    }"
+    :data-jsv-vw-innerview="viewId"
+  >
+    <slot></slot>
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvRipple/index.js

@@ -0,0 +1,7 @@
+import JsvRipple from "./JsvRipple.vue";
+import { JsvRippleShape } from "./Constant";
+
+export {
+  JsvRipple as default,
+  JsvRippleShape
+}

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -307,16 +307,16 @@ export default {
         }, this.autoplayInterval);
       }
     },
-    slideTo(id, direction) {
+    slideTo(id, direction = 0) {
       const curId = modToRange(this.firstFrame + this.offset, this.totalFrame);
       if (curId != id) {
-        if (direction > 0) {
-          this._trigger(modToRange(id - curId, this.totalFrame));
+        let d;
+        if (direction != 0) {
+          d = direction
         } else {
-          this._trigger(
-            modToRange(id - curId, this.totalFrame, -this.totalFrame + 1)
-          );
+          d = id - curId;
         }
+        this._trigger(modToRange(id - curId, this.totalFrame, d > 0 ? 0 : -this.totalFrame + 1));
       }
     },
     _onKeyDown(ev) {
@@ -388,7 +388,7 @@ export default {
       this.startAutoplay();
       this.onBlur?.();
     },
-    _startNormalAnimation(direction) {
+    _startAnimation(direction, smooth = false) {
       let duration = this.animation.duration;
       // let easing = this.animation.easing ? this.animation.easing : "linear";
 
@@ -396,22 +396,52 @@ export default {
       let preViewAnimation;
       switch (this.swipeType) {
         case "translate":
-          curViewAnimation = new Forge.TranslateAnimation(
-            this.vertical ? 0 : direction * this.layoutInfo.width,
-            0,
-            this.vertical ? direction * this.layoutInfo.height : 0,
-            0,
-            duration,
-            null
-          );
-          preViewAnimation = new Forge.TranslateAnimation(
-            this.vertical ? 0 : direction * this.layoutInfo.width,
-            0,
-            this.vertical ? direction * this.layoutInfo.height : 0,
-            0,
-            duration,
-            null
-          );
+          if (smooth) {
+            const speed =
+              ((this.vertical
+                ? this.layoutInfo.height
+                : this.layoutInfo.width) /
+                this.animation.duration) *
+              1000;
+            curViewAnimation = new Forge.TranslateFrameAnimation(
+              this.vertical
+                ? direction * this.layoutInfo.height
+                : direction * this.layoutInfo.width,
+              0,
+              speed,
+              !this.vertical,
+              this.vertical ? 0 : direction * this.layoutInfo.width,
+              this.vertical ? direction * this.layoutInfo.height : 0
+            );
+
+            preViewAnimation = new Forge.TranslateFrameAnimation(
+              this.vertical
+                ? direction * this.layoutInfo.height
+                : direction * this.layoutInfo.width,
+              0,
+              speed,
+              !this.vertical,
+              this.vertical ? 0 : direction * this.layoutInfo.width,
+              this.vertical ? direction * this.layoutInfo.height : 0
+            );
+          } else {
+            curViewAnimation = new Forge.TranslateAnimation(
+              this.vertical ? 0 : direction * this.layoutInfo.width,
+              0,
+              this.vertical ? direction * this.layoutInfo.height : 0,
+              0,
+              duration,
+              null
+            );
+            preViewAnimation = new Forge.TranslateAnimation(
+              this.vertical ? 0 : direction * this.layoutInfo.width,
+              0,
+              this.vertical ? direction * this.layoutInfo.height : 0,
+              0,
+              duration,
+              null
+            );
+          }
           break;
         case "opacity":
           break;
@@ -430,36 +460,11 @@ export default {
         ?.jsvGetProxyView(true)
         .StartAnimation(preViewAnimation);
     },
-    _startSmoothTranslateAnimation() {
-      let curController = this.controllerList[this.currentViewIndex];
-      let preController =
-        this.controllerList[modToRange(this.currentViewIndex - 1, VIEW_NUM)];
-      if (this.vertical) {
-        let speed = (this.layoutInfo.height / this.animation.duration) * 1000;
-        curController.jumpTo(0, this.layoutInfo.height);
-        curController.moveToY(0, speed, this._onAnimationEnd);
-        preController.jumpTo(0, this.layoutInfo.height);
-        preController.moveToY(0, speed);
-      } else {
-        let speed = (this.layoutInfo.width / this.animation.duration) * 1000;
-        curController.jumpTo(this.layoutInfo.width, 0);
-        curController.moveToX(0, speed, this._onAnimationEnd);
-        preController.jumpTo(this.layoutInfo.width, 0);
-        preController.moveToX(0, speed);
-      }
-    },
-    _startAnimation(direction) {
-      if (this.smoothTranslate) {
-        this._startSmoothTranslateAnimation();
-      } else {
-        this._startNormalAnimation(direction);
-      }
-    },
     _trigger(direction) {
       if (this.totalFrame <= 1) return;
       this.preOffset = this.offset;
       this.offset += direction;
-      this._startAnimation(direction > 0 ? 1 : -1);
+      this._startAnimation(direction > 0 ? 1 : -1, this.smoothTranslate);
     },
     onBeVisible(old_h, new_h, old_v, new_v) {
       if ((old_h && !new_h) || (old_v && !new_h)) {
@@ -526,25 +531,7 @@ export default {
           zIndex: 0,
         }"
       >
-        <div v-if="smoothTranslate">
-          <jsv-actor-move
-            v-for="(item, index) in viewInfoList"
-            :key="index"
-            :style="item.style"
-            :control="controllerList[index]"
-          >
-            <!-- 为了保证slot中的页面刷新。不加这个div slot中的img标签不会更新，vue或者是dom的bug？ -->
-            <div :key="item.dataIndex">
-              <slot
-                name="itemView"
-                :currentIndex="currentDataIndex"
-                :dataIndex="item.dataIndex"
-                :focused="focused"
-              ></slot>
-            </div>
-          </jsv-actor-move>
-        </div>
-        <div v-else>
+        <div>
           <div
             v-for="(item, index) in viewInfoList"
             :key="index"

package/utils/JsViewVueWidget/index.js

@@ -6,6 +6,7 @@
  * @Description: file content
  */
 export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
+export { default as JsvFreeMoveActor } from "./JsvFreeMoveActor";
 export { default as JsvApic, LoopType } from "./JsvApic";
 export { default as JsvInput, InputType } from "./JsvInput";
 export {
@@ -42,3 +43,4 @@ export { default as JsvTransparentDiv } from "./JsvTransparentDiv.vue";
 export { default as JsvVideo } from "./JsvVideo.vue";
 export { default as JsvSystemAudio } from "./JsvSystemAudio.vue";
 export { default as JsvRadarChart} from "./JsvRadarChart.vue";
+export { default as JsvRipple, JsvRippleShape } from "./JsvRipple"