@shijiu/jsview-vue 0.9.426 → 0.9.490

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -7,6 +7,10 @@
 -->
 <script>
 import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
+import { numberCheckSet, urlCheckSet } from "../../JsViewVueTools/TypeCheckAndSet";
+import { toNinePatchForgeViewSet } from "../../JsViewVueTools/NinePatchHelper"
+import { DECORATE_BORDER_RADIUS, DECORATE_NINEPATCH_ALPHA_MIX } from "./CommonType"
+
 /*
  * JsvTextureAnim：对view的内容进行动画的控件
  *      props说明:
@@ -16,6 +20,30 @@ import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
  *         width {number}               view的宽
  *         height {number}              view的高
  *         borderRadius {string}        view的圆角设置
+ *         decorate {Object}            view的渲染修饰
+ *                                      BorderRadius view圆角
+ *                                      {
+ *                                        type {string}: // (必填)装饰类型，固定值"BroderRaidus"
+ *                                        topLeft {number}: // (选填)左上角圆弧半径 默认 0
+ *                                        topRight {number}: // 右上角圆弧半径 默认 0
+ *                                        bottomLeft {number}: // 左下角圆弧半径 默认 0
+ *                                        bottomRight {number}: // 右下角圆弧半径 默认 0
+ *                                      }
+ * 
+ *                                      NinePatchAlphaMix NinePatch图片的alpha叠加
+ *                                      {
+ *                                        type {string}: // 装饰类型，固定值"NinePatchAlphaMix"
+ *                                        url {string}: // (必填)Alpha mix叠加的图片
+ *                                        imageWidth {int} // (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
+ *                                        centerWidth  {int} // (必填)原图信息: .9图的中心区域宽度(repeat区域)
+ *                                        imageDspWidth {int} // (选填)原图缩放后的显示宽度，计算方法: 
+ *                                                              四角为90度圆弧时: imageDspWidth = 显示图形的圆弧半径 / 原图中圆弧的半径 * 原图宽度
+ *                                                                              原图中圆弧半径 = (原图宽度 - borderOutset * 2) / 2
+ *                                                              四角为其他形状时，原图.9图的四角区域，缩放到要和显示图形重合后的宽度。
+ *                                        borderOutset {int} // (必填)原图信息: 图片边缘到中心内容区域边缘的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
+ *                                        animTime {int} // (必填)缩放动画的时长(单位毫秒)
+ *                                      }
+ * 
  *         animation {string}           texture的动画, 为keyframe的格式
  *         duration {number}            动画时长, 毫秒 
  *         onAnimationEnd {function}    动画结束回调
@@ -39,6 +67,7 @@ export default {
     width: Number,
     height: Number,
     borderRadius: String,
+    decorate: Object,
     animation: String,
     duration: Number,
     transform: String,
@@ -64,57 +93,142 @@ export default {
   setup() {
     return {
       forgeAnimation: null,
+      innerViewId: -1,
+      viewStoreRef: null,
     };
   },
   methods: {
+    _createForgeView(view_texture, decorate_setting) {
+      if (decorate_setting) {
+        return this._createLayoutViewWithDecorate(view_texture, decorate_setting);
+      } else {
+        // 无特异修饰类型的view
+        let texture_set = new Forge.ExternalTextureSetting(view_texture);
+        return new Forge.LayoutView(texture_set);
+      }
+    },
+
     _readRadius(setting) {
       if (setting) {
         const pattern = /\d+/g;
         let match = setting.match(pattern);
         if (match.length > 0) {
-          const topLeft = match[0];
-          const topRight = match.length > 1 ? match[1] : topLeft;
-          const bottomRight = match.length > 2 ? match[2] : topLeft;
-          const bottomLeft = match.length > 3 ? match[3] : topRight;
-          return new Forge.ViewRoundCornerMask(
-            topLeft,
-            topRight,
-            bottomLeft,
-            bottomRight
-          );
+          let top_left = match[0];
+          let top_right = match.length > 1 ? match[1] : top_left;
+          return {
+            type: DECORATE_BORDER_RADIUS,
+            topLeft: top_left,
+            topRight: top_right,
+            bottomRight: match.length > 2 ? match[2] : top_left,
+            bottomLeft: match.length > 3 ? match[3] : top_right
+          }
         }
       }
       return null;
     },
+
+    _createLayoutViewWithDecorate(view_texture, decorate_setting) {
+      if (decorate_setting && typeof decorate_setting == 'object') {
+        switch(decorate_setting.type) {
+          case DECORATE_NINEPATCH_ALPHA_MIX: {
+            // NinePatch alpha mix view
+            return this._createNinePatchAlphaMixView(view_texture, decorate_setting);
+          };
+          case DECORATE_BORDER_RADIUS: {
+            // 圆角view
+            return this._createBorderRadius(view_texture, decorate_setting);
+          };
+          default:
+            console.error("Unknown set=", decorate_setting);
+            return null;
+        }
+      }
+    },
+
+    _createNinePatchAlphaMixView(view_texture, decorate_setting) {
+      const textureManager = ForgeExtension.TextureManager;
+
+      // NinePatch alpha mix view
+      let texture_set = new Forge.ExternalTextureSetting(view_texture);
+
+      let nine_patch_view = new Forge.NinePatchView(texture_set);
+
+      // alpha mix
+      if (decorate_setting.url) {
+        let converted_url = urlCheckSet(decorate_setting.url);
+        let view_texture = textureManager.GetImage2(converted_url);
+
+        nine_patch_view.EnableAlphaMix(view_texture, true);
+      } else {
+        console.error("ninepatch url not set");
+        return null;
+      }
+
+      // calculate padding and repeat
+      let view_set = toNinePatchForgeViewSet(
+                    numberCheckSet(decorate_setting.imageWidth),
+                    numberCheckSet(decorate_setting.centerWidth),
+                    decorate_setting.imageDspWidth, 
+                    numberCheckSet(decorate_setting.borderOutset));
+      nine_patch_view.SetPadding(view_set.padding, view_set.padding); // 方图横纵一致
+      nine_patch_view.SetRepeat(view_set.repeat, view_set.repeat); // 方图横纵一致
+      nine_patch_view.SetImageDspSize(view_set.imageDspSize, view_set.imageDspSize); // 方图横纵一致
+
+      return nine_patch_view;
+    },
+
+    _createBorderRadius(view_texture, decorate_setting) {
+      // 圆角view
+      let texture_mask = new Forge.ViewRoundCornerMask(
+                  numberCheckSet(decorate_setting.topLeft),
+                  numberCheckSet(decorate_setting.topRight),
+                  numberCheckSet(decorate_setting.bottomLeft),
+                  numberCheckSet(decorate_setting.bottomRight));
+      let texture_set = new Forge.ExternalTextureSetting(view_texture, texture_mask);
+      return new Forge.LayoutView(texture_set);
+    },
+
     _onAnimationEnd() {
       this.onAnimationEnd?.();
     },
+
     start() {
       if (this.forgeAnimation && this.innerView) {
         this.innerView.StartTextureAnimation(this.forgeAnimation);
       }
     },
+
+    getTransition() {
+      let transition = "";
+      let decorate = this.$props.decorate;
+
+      if (decorate && decorate.type == DECORATE_NINEPATCH_ALPHA_MIX && decorate.animTime > 0) {
+        // Ninepatch模式可以设置长宽的过渡动画
+        transition = `left ${this.animTime}s, top ${this.animTime}s, width ${this.animTime}s, height ${this.animTime}s`;
+      }
+
+      return transition;
+    }
   },
+
   created() {
     if (window.JsView) {
       const textureManager = ForgeExtension.TextureManager;
 
-      let image_url = this.src;
-      if (this.src && this.src.indexOf("http") === 0) {
-        image_url = this.src;
-      } else if (window.JsView.React.UrlRef) {
-        image_url = new window.JsView.React.UrlRef(this.src).href;
+      // 1.获得主view的展示内容图片 texture
+      let image_url = urlCheckSet(this.src);
+      let view_texture = textureManager.GetImage2(image_url, false, null, "RGB_8888", null);
+
+      // 1.1 兼容border转为decorate
+      let decorate = this.$props.decorate;
+      if (this.$props.borderRadius) {
+        decorate = this._readRadius(this.$props.borderRadius);
       }
-      let imageTexture = new Forge.ExternalTextureSetting(
-        textureManager.GetImage2(image_url, false, null, "RGB_8888", null),
-        this._readRadius(this.borderRadius)
-      );
 
-      this.innerView = new Forge.LayoutView(imageTexture);
-      const view_store = ForgeExtension.RootActivity
-        ? ForgeExtension.RootActivity.ViewStore
-        : Forge.sViewStore;
+      // 2.创建view
+      this.innerView = this._createForgeView(view_texture, decorate);
 
+      // 3.设置texture基本形变
       if (this.transform) {
         this.innerView.ResetTextureCssTransform(
           this.transform,
@@ -122,14 +236,7 @@ export default {
         );
       }
 
-      this.innerViewId = view_store.add(
-        new Forge.ViewInfo(this.innerView, {
-          x: 0,
-          y: 0,
-          width: this.width,
-          height: this.height,
-        })
-      );
+      // 4.设置texture的动画形变
       this.forgeAnimation = new Forge.CssKeyframeAnimation(
         "@keyframes test" + this.animation,
         this.duration,
@@ -139,12 +246,32 @@ export default {
       );
       this.forgeAnimation.EnableDelay(this.delay).SetRepeat(this.repeat);
       this.forgeAnimation.SetAnimationListener(
-			new Forge.AnimationListener(
-				null,
-				this._onAnimationEnd,
-				null
-			)
-		);
+        new Forge.AnimationListener(
+          null,
+          this._onAnimationEnd,
+          null
+        )
+  		);
+
+      // 5. inner view标准处理
+      this.viewStoreRef = ForgeExtension.RootActivity
+        ? ForgeExtension.RootActivity.ViewStore
+        : Forge.sViewStore;
+
+      this.innerViewId = this.viewStoreRef.add(
+        new Forge.ViewInfo(this.innerView, {
+          x: 0,
+          y: 0,
+          width: this.width,
+          height: this.height,
+        })
+      );
+    }
+  },
+  beforeUnmount() {
+    if (this.innerViewId !== -1) {
+      this.viewStoreRef.remove(this.innerViewId);
+      this.innerViewId = -1;
     }
   },
   mounted() {
@@ -156,5 +283,11 @@ export default {
 </script>
 
 <template>
-  <div :jsv_innerview="innerViewId"></div>
+  <div 
+    :style="{
+      transition: getTransition(),
+    }"
+    :jsv_innerview="innerViewId">
+
+  </div>
 </template>

package/utils/JsViewVueWidget/JsvTextureAnim/index.js

@@ -12,5 +12,6 @@ let _JsvTextureAnim = JsvTextureAnim;
 if (window.JsvWidgetWrapperGroup && window.JsvWidgetWrapperGroup.BrowserTextureAnim) {
   _JsvTextureAnim = window.JsvWidgetWrapperGroup.BrowserTextureAnim;
 }
-let component = _JsvTextureAnim.default;
-export default component;
+
+export * from "./CommonType"
+export default _JsvTextureAnim.default

package/utils/JsViewVueWidget/JsvTouchContainer.vue

@@ -0,0 +1,184 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 20:46:53
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-10 23:07:54
+ * @Description: file content
+-->
+<script>
+import { Forge } from "../../dom/jsv-forge-define";
+
+const DIRECTION_HORIZONTAL = Forge.DragSetting.DIRECTION_HORIZONTAL;
+const DIRECTION_VERTICAL = Forge.DragSetting.DIRECTION_VERTICAL;
+const DIRECTION_DISABLE = Forge.DragSetting.DIRECTION_DISABLE;
+const DIRECTION_AUTO = Forge.DragSetting.DIRECTION_AUTO;
+export {
+  DIRECTION_HORIZONTAL,
+  DIRECTION_VERTICAL,
+  DIRECTION_DISABLE,
+  DIRECTION_AUTO,
+};
+
+export default {
+  props: {
+    style: {
+      type: Object,
+      default() {
+        return {
+          left: 0,
+          top: 0,
+          width: 1920,
+          height: 600,
+        };
+      },
+    },
+    direction: DIRECTION_DISABLE,
+    dragLimitArea: {
+      type: Object,
+      default() {
+        return { x: 0, y: 0, width: 0, height: 0 };
+      },
+    },
+    flingPageWidth: { type: Number, default: -1 }, // 滑动页的宽度，即开启整平滑动模式
+    flingPageEdge: { type: Number, default: 1 / 5 }, // 触发整屏滑动页的边界，默认为1/5
+    triggerMovedDistance: { type: Number, default: 20 }, // 触发onmoved的最小距离
+    onClick: { type: Function },
+    onDragStart: { type: Function },
+    onMoved: { type: Function },
+    onDragEnd: { type: Function },
+    onFling: { type: Function },
+    onRelease: { type: Function },
+  },
+  data() {
+    return {
+      innerLeft: 0,
+      innerTop: 0,
+    };
+  },
+  setup() {},
+  methods: {
+    _innerStyle() {
+      const { left, top, ...others } = this.style;
+      others.left = this.innerLeft;
+      others.top = this.innerTop;
+      return others;
+    },
+  },
+  created() {},
+  mounted() {
+    if (this.$refs.touchContainer && this.$refs.touchContainer.jsvMaskView) {
+      const view = this.$refs.touchContainer.jsvMaskView;
+      const view_lp = view.GetLayoutParams();
+      const page_width = this.flingPageWidth;
+      const page_edge = this.flingPageEdge;
+      const direction = this.direction;
+      // 整屏滑动（启动tab模式，即flingPageWidth设置相应参数），dragLimitArea为固定值
+      let drag_limit_area = this.dragLimitArea;
+      if (page_width !== -1) {
+        if (direction === Forge.DragSetting.DIRECTION_HORIZONTAL) {
+          drag_limit_area = {
+            x: 0,
+            y: 0,
+            width: page_width,
+            height: view_lp.Height,
+          };
+        } else {
+          drag_limit_area = {
+            x: 0,
+            y: 0,
+            width: view_lp.Width,
+            height: page_width,
+          };
+        }
+      }
+
+      const drag_setting = new Forge.DragSetting(
+        direction,
+        this.triggerMovedDistance,
+        false,
+        new Forge.RectArea(
+          drag_limit_area.x,
+          drag_limit_area.y,
+          drag_limit_area.width,
+          drag_limit_area.height
+        ),
+        page_width,
+        page_edge
+      );
+      let callback = {};
+      if (direction === Forge.DragSetting.DIRECTION_DISABLE) {
+        callback.OnTap = (msg) => {
+          console.log("Container OnTap:", msg);
+          if (this.onClick) {
+            return this.onClick(msg);
+          }
+          return false;
+        };
+      } else {
+        callback = {
+          OnTap: (msg) => {
+            console.log("Container OnTap:", msg);
+            if (this.onClick) {
+              return this.onClick(msg);
+            }
+            return false;
+          },
+          OnDragStart: (msg) => {
+            console.log("Container OnDragStart:", msg);
+            if (this.onDragStart) {
+              return this.onDragStart(msg);
+            }
+            return false;
+          },
+          OnMoved: (msg) => {
+            console.log("Container OnMoved:", msg);
+            if (this.onMoved) {
+              return this.onMoved(msg);
+            }
+            return false;
+          },
+          OnDragEnd: (msg) => {
+            console.log("Container OnDragEnd:", msg);
+            if (this.onDragEnd) {
+              return this.onDragEnd(msg);
+            }
+            return false;
+          },
+          OnFling: (msg) => {
+            console.log("Container OnFling:", msg);
+            if (this.onFling) {
+              return this.onFling(msg);
+            }
+            return false;
+          },
+          OnRelease: (msg) => {
+            console.log("Container OnRelease:", msg);
+            if (this.onRelease) {
+              return this.onRelease(msg);
+            }
+            return false;
+          },
+        };
+      }
+      view.EnableDrag(drag_setting, callback, "translateMat(dx,dy,0)");
+    }
+  },
+};
+</script>
+
+<template>
+  <div
+    key="containerPos"
+    :style="{
+      left: style.left,
+      top: style.top,
+      width: dragLimitArea.width ? dragLimitArea.width : style.width,
+      height: dragLimitArea.height ? dragLimitArea.height : style.height,
+      overflow: 'hidden',
+    }"
+  >
+    <div key="container" ref="touchContainer" :style="_innerStyle()">
+      <slot></slot>
+    </div>
+  </div>
+</template>