@shijiu/jsview-vue 0.9.602 → 0.9.684

package/utils/JsViewVueTools/JsvImpactTracer.js

@@ -0,0 +1,113 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-08-30 10:54:42
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-30 10:54:44
+ * @Description: file content
+ */
+/**
+ * Created by donglin.lu@qcast.cn on 4/30/2020.
+ */
+
+/*
+ * 【模块 export 内容】
+ * createImpactTracer: 函数，创建碰撞跟踪对象
+ * createImpactCallback: 函数，创建碰撞发生后的回调函数
+ * createImpactAutoFroze: 函数，注册碰撞发生后，控制动画立刻停止的管理对象
+ * updateImpactAutoFroze: 函数，更新 createImpactAutoFroze 创建的碰撞即停管理对象中管理的运动元素列表
+ */
+
+import { Forge } from "../../dom/jsv-forge-define";
+
+/*
+ * createImpactCallback 参数说明:
+ *      on_contact      (function[]) 接受碰撞事件的回调
+ *      on_dis_contact  (function[]) 接受物体分离事件的回调
+ *  返回值:
+ *      Object  句柄，用于传输给 createImpactTracer
+ */
+function createImpactCallback(on_contact, on_dis_contact) {
+  return new Forge.sImpactSensorManager.Callback(on_contact, on_dis_contact);
+}
+
+/*
+ * createImpactTracer 参数说明:
+ *      ele1        (Element)   html element句柄，1号碰撞体
+ *      ele2        (Element)   html element句柄，2号碰撞体
+ *      callback    (Object)   由 createImpactCallback 创建的回调构造体句柄
+ *      auto_froze  (Object)   由 createImpactAutoFroze 创建的碰撞即停构造体句柄
+ *  返回值:
+ *      Object  句柄，提供 Recycle() 函数用于停止碰撞检测，需要再componentWillUnmount进行调用(清理)
+ */
+function createImpactTracer(ele1, ele2, callback, auto_froze) {
+  return Forge.sImpactSensorManager.StartTrace(ele1.jsvMainView, ele2.jsvMainView, callback, auto_froze);
+}
+
+// 创建用于设置碰撞即停管理对象的参数
+// 结果用于函数 createImpactAutoFroze 和 updateImpactAutoFroze
+function _ConvertToViewsList(elements_array) {
+  const views_array = [];
+  if (elements_array) {
+    for (const ele of elements_array) {
+      views_array.push(ele.jsvMainView);
+    }
+  }
+  return views_array;
+}
+
+/*
+ * createImpactAutoFroze 参数说明:
+ *      element_auto_froze_pre_impact   (Array<Element>)    关联运动元素的列表,这些元素碰撞前一帧停止运动
+ *      element_auto_froze_on_impact    (Array<Element>)    关联运动元素的列表,这些元素碰撞当前帧停止运动
+ *  返回值:
+ *      Object  句柄，用于传输给 createImpactTracer，也用于 updateImpactAutoFroze 调整关联元素
+ *
+ *  【注意点】
+ *        多个碰撞对可以共享同一个碰撞管理对象，并且建议共享同一个对象以提升效率
+ *        该管理对象中的view的列表可以通过 updateImpactAutoFrozeHandler进行更新，
+ *        更新后立刻在对所有的共享此管理对象的碰撞对中生效
+ */
+function createImpactAutoFroze(element_auto_froze_pre_impact, element_auto_froze_on_impact) {
+  if (!element_auto_froze_pre_impact && !element_auto_froze_on_impact) {
+    // Nothing to set
+    return;
+  }
+
+  const pre_impact_list = _ConvertToViewsList(element_auto_froze_pre_impact);
+  const on_impact_list = _ConvertToViewsList(element_auto_froze_on_impact);
+
+  return new Forge.sImpactSensorManager.AutoFroze(
+    (pre_impact_list.length > 0 ? pre_impact_list : null),
+    (on_impact_list.length > 0 ? on_impact_list : null));
+}
+
+/*
+ * updateImpactAutoFroze 参数说明:
+ *      handler                         (Object)            由 createImpactAutoFroze 创建的句柄
+ *      element_auto_froze_pre_impact   (Array<Element>)    关联运动元素的列表,这些元素碰撞前一帧停止运动
+ *      element_auto_froze_on_impact    (Array<Element>)    关联运动元素的列表,这些元素碰撞当前帧停止运动
+ *  返回值:
+ *      无
+ */
+function updateImpactAutoFroze(handler, element_auto_froze_pre_impact, element_auto_froze_on_impact) {
+  if (handler instanceof Forge.sImpactSensorManager.AutoFroze) {
+    console.error("Error: handler type error");
+    return;
+  }
+
+  const pre_impact_list = _ConvertToViewsList(element_auto_froze_pre_impact);
+  const on_impact_list = _ConvertToViewsList(element_auto_froze_on_impact);
+
+  // 更新碰撞即停列表
+  handler.UpdatePreImpactList((pre_impact_list.length > 0 ? pre_impact_list : null));
+
+  // 更新接触接触即停列表
+  handler.UpdateOnImpactList((on_impact_list.length ? on_impact_list : null));
+}
+
+export {
+  createImpactCallback,
+  createImpactTracer,
+  createImpactAutoFroze,
+  updateImpactAutoFroze,
+};

package/utils/JsViewVueTools/index.js

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-05 14:09:55
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-06 11:03:34
+ * @LastEditTime: 2022-08-30 10:58:14
  * @Description: file content
  */
 
@@ -16,4 +16,5 @@ export * from "./JsvRefTaker.js";
 export * from "./JsvStyleClass.js";
 export * from "./DebugContentShellJBridge.js";
 export * from "./DebugTool.js";
+export * from "./JsvImpactTracer.js";
 export { default as DefaultKeyCodeMap } from "./DefaultKeyMap.js";

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserPreload.vue

@@ -10,6 +10,8 @@ export default {
   setup() {
     return {
       preloadResultMap: {},
+      downloadResultMap: {},
+      downloadUrlList: [],
       unmountStatus: {unmount:false}
     };
   },
@@ -70,16 +72,19 @@ export default {
     },
     getDownloadList() {
       this.downloadStateList = new Array(this.downloadList.length).fill(false);
+      this.downloadUrlList = new Array(this.downloadStateList.length);
       let downloadListData = this.downloadList;
       for (let i = 0; i < downloadListData.length; i++) {
         if (!downloadListData[i].url) {
           this.downloadStateList[i] = true;
+          this.downloadUrlList[i] = "invalid";
           // downloadListData.splice(i, 1);
         }
       }
       this._DownloadViewList = downloadListData.map((item, index) => {
         if (!item.url) {
           this.downloadStateList[index] = true;
+          this.downloadUrlList[index] = "invalid";
           return null;
         }
         const image = new Image();
@@ -91,6 +96,11 @@ export default {
           }
 
           this.downloadStateList[index] = true;
+          this.downloadUrlList[index] = item.url;
+          this.downloadResultMap[item.url] = {
+            width: image.width,
+            height: image.height
+          }
           console.log(`pre download succeed ${item.url}`);
           if (this.onDownloadDone) {
             let downloadNum = 0;
@@ -98,7 +108,7 @@ export default {
               downloadNum += item ? 1 : 0;
             });
             if (downloadNum == this.downloadStateList.length) {
-              this.onDownloadDone?.();
+              this.onDownloadDone?.(this.downloadUrlList, this.downloadResultMap);
             }
           }
         };

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserTextureAnim.vue

@@ -2,19 +2,81 @@
  * @Author: ChenChanghua
  * @Date: 2022-02-08 09:29:17
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-03-08 14:08:39
+ * @LastEditTime: 2022-08-22 16:00:50
  * @Description: file content
 -->
 <script>
+import { ref } from "vue";
 import { getKeyFramesGroup } from "jsview/utils/JsViewVueTools/JsvDynamicKeyFrames";
 
+const DECORATE_BORDER_RADIUS = "BroderRaidus";
+const DECORATE_NINEPATCH_ALPHA_MIX = "NinePatchAlphaMix";
+
+const TexAlignAnchor = {
+  LEFT_TOP: 1,
+  CENTER_TOP: 2,
+  RIGHT_TOP: 3,
+  LEFT_MIDDLE: 4,
+  CENTER: 5,
+  RIGHT_MIDDLE: 6,
+  LEFT_BOTTOM: 7,
+  CENTER_BOTTOM: 8,
+  RIGHT_BOTTOM: 9,
+};
+
+const getOffset = (type, viewW, viewH, texLeft, texTop) => {
+  let extraLeft, extraTop;
+  switch (type) {
+    case TexAlignAnchor.LEFT_TOP:
+      extraLeft = 0;
+      extraTop = 0;
+      break;
+    case TexAlignAnchor.CENTER_TOP:
+      extraLeft = viewW / 2;
+      extraTop = 0;
+      break;
+    case TexAlignAnchor.RIGHT_TOP:
+      extraLeft = viewW;
+      extraTop = 0;
+      break;
+    case TexAlignAnchor.LEFT_MIDDLE:
+      extraLeft = 0;
+      extraTop = viewH / 2;
+      break;
+    case TexAlignAnchor.RIGHT_MIDDLE:
+      extraLeft = viewW;
+      extraTop = viewH / 2;
+      break;
+    case TexAlignAnchor.LEFT_BOTTOM:
+      extraLeft = 0;
+      extraTop = viewH;
+      break;
+    case TexAlignAnchor.CENTER_BOTTOM:
+      extraLeft = viewW / 2;
+      extraTop = viewH;
+      break;
+    case TexAlignAnchor.RIGHT_BOTTOM:
+      extraLeft = viewW;
+      extraTop = viewH;
+      break;
+    case TexAlignAnchor.CENTER:
+    default:
+      extraLeft = viewW / 2;
+      extraTop = viewH / 2;
+      break;
+  }
+  return [texLeft + extraLeft, texTop + extraTop];
+};
 let TOKEN = 0;
 export default {
   props: {
     src: String,
+    top: Number,
+    left: Number,
     width: Number,
     height: Number,
     borderRadius: String,
+    decorate: Object,
     animation: String,
     duration: Number,
     transform: String,
@@ -36,13 +98,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    texCoord: {
+      type: Object,
+    },
   },
-  setup() {
+  setup(props) {
     let styleShell = getKeyFramesGroup();
     return {
       styleShell,
       animName: "browser-texture-anim-" + TOKEN++,
       animDiv: null,
+      watcherHandlerList: [],
     };
   },
   computed: {
@@ -51,6 +117,104 @@ export default {
         this.delay / 1000
       }s ${this.repeat === -1 ? "infinite" : this.repeat}`;
     },
+    textureLayout() {
+      if (!isNaN(this.texCoord?.width) && !isNaN(this.texCoord?.height)) {
+        const texLeft = !isNaN(this.texCoord.left)
+          ? this.texCoord.left
+          : -this.texCoord.width / 2;
+        const texTop = !isNaN(this.texCoord.top)
+          ? this.texCoord.top
+          : -this.texCoord.height / 2;
+        const type = !isNaN(this.texCoord.alignAnchor)
+          ? this.texCoord.alignAnchor
+          : 5;
+        const offset = getOffset(
+          type,
+          this.width,
+          this.height,
+          texLeft,
+          texTop
+        );
+        const transition = this.decorate?.animTime
+          ? `left ${this.decorate.animTime}s, top ${this.decorate.animTime}s`
+          : "";
+        return {
+          position: "absolute",
+          left: offset[0] + "px",
+          top: offset[1] + "px",
+          transition,
+          width: this.texCoord.width + "px",
+          height: this.texCoord.height + "px",
+        };
+      } else {
+        return {
+          position: "absolute",
+          left: 0 + "px",
+          top: 0 + "px",
+          width: this.width + "px",
+          height: this.height + "px",
+        };
+      }
+    },
+    maskStyle() {
+      if (this.borderRadius) {
+        return {
+          left: this.left + "px",
+          top: this.top + "px",
+          borderRadius: this.borderRadius,
+          width: this.width + "px",
+          height: this.height + "px",
+          overflow: 'hidden',
+        };
+      } else if (this.decorate) {
+        if (this.decorate.type == DECORATE_NINEPATCH_ALPHA_MIX) {
+          const imageDspWidth =
+            this.decorate.imageDspWidth > 0
+              ? this.decorate.imageDspWidth
+              : this.decorate.imageWidth;
+          const slideWidth =
+            (this.decorate.imageWidth - this.decorate.centerWidth) / 2;
+          const outset = Math.ceil(
+            (this.decorate.borderOutset * imageDspWidth) /
+              this.decorate.imageWidth
+          );
+          console.log("get mask style");
+          const transitionTime = this.decorate.animTime;
+          return {
+            left: this.left + "px",
+            top: this.top + "px",
+            width: this.width + "px",
+            height: this.height + "px",
+            transition: `left ${transitionTime}s, top ${transitionTime}s, width ${transitionTime}s, height ${transitionTime}s`,
+            webkitMaskBoxImageSource: this.decorate.url,
+            webkitMaskBoxImageSlice: slideWidth,
+            webkitMaskBoxImageWidth:
+              Math.ceil(
+                (slideWidth * imageDspWidth) / this.decorate.imageWidth
+              ) + "px",
+            webkitMaskBoxImageOutset: outset + "px",
+            position: "absolute",
+          };
+        } else if (this.decorate.type == DECORATE_BORDER_RADIUS) {
+          return {
+            left: this.left + "px",
+            top: this.top + "px",
+            borderRadius: `${this.decorate.topLeft}px ${this.decorate.topRight}px ${this.decorate.bottomRight}px ${this.decorate.bottomLeft}`,
+            width: this.width + "px",
+            height: this.height + "px",
+            overflow: 'hidden',
+          };
+        }
+      } else {
+        return {
+          left: this.left + "px",
+          top: this.top + "px",
+          width: this.width + "px",
+          height: this.height + "px",
+          overflow: 'hidden',
+        };
+      }
+    },
   },
   methods: {
     start() {
@@ -65,28 +229,22 @@ export default {
         "@keyframes " + this.animName + " " + this.animation
       );
     }
-
+    //绕过 jsview 对document 的 hook
     const clipDiv = window.originDocument.createElement("div");
-    clipDiv.style.width = this.width + "px";
-    clipDiv.style.height = this.height + "px";
-    clipDiv.style.position = "absolute";
-    clipDiv.style.borderRadius = this.borderRadius;
-    clipDiv.style.overflow = "hidden";
+    Object.assign(clipDiv.style, this.maskStyle);
 
+    const textureLayout = this.textureLayout;
     this.animDiv = window.originDocument.createElement("div");
-    this.animDiv.style.width = this.width + "px";
-    this.animDiv.style.height = this.height + "px";
-    this.animDiv.style.position = "absolute";
+    Object.assign(this.animDiv.style, textureLayout);
     this.animDiv.onanimationend = () => {
       this.animDiv.style.animation = null;
       this.onAnimationEnd?.();
     };
 
     const imgDiv = window.originDocument.createElement("div");
-    imgDiv.style.width = this.width + "px";
-    imgDiv.style.height = this.height + "px";
+    imgDiv.style.width = textureLayout.width;
+    imgDiv.style.height = textureLayout.height;
     imgDiv.style.backgroundImage = `url(${this.src})`;
-    // imgDiv.style.backgroundColor = "#FF0000"
     imgDiv.style.transform = this.transform;
     imgDiv.style.transformOrigin = this.transformOrigin;
 
@@ -94,6 +252,33 @@ export default {
     clipDiv.appendChild(this.animDiv);
     this.$refs.root.jsvMaskView.Element.appendChild(clipDiv);
 
+    this.watcherHandlerList.push(
+      this.$watch("left", (newValue) => {
+        clipDiv.style.left = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("top", (newValue) => {
+        clipDiv.style.top = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("width", (newValue) => {
+        clipDiv.style.width = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("height", (newValue) => {
+        clipDiv.style.height = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("textureLayout", (newValue) => {
+        Object.assign(this.animDiv.style, newValue);
+        imgDiv.style.width = newValue.width;
+        imgDiv.style.height = newValue.height;
+      })
+    );
     if (this.autoStart) {
       setTimeout(() => {
         this.start();
@@ -102,6 +287,10 @@ export default {
   },
   beforeUnmount() {
     this.styleShell.removeRule(this.animName);
+    for (let handler of this.watcherHandlerList) {
+      handler?.();
+    }
+    this.watcherHandlerList = [];
   },
 };
 </script>

package/utils/JsViewVueWidget/JsvActorMove/JsvActorMove.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-20 17:21:21
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-11-18 16:45:05
+ * @LastEditTime: 2022-08-31 11:14:13
  * @Description: file content
 -->
 
@@ -48,7 +48,7 @@ export default {
     if (this.refDefine) {
       const type = typeof this.refDefine;
       if (type === "object") {
-        type.current = this.$refs.element;
+        this.refDefine.current = this.$refs.element;
       } else if (type === "function") {
         this.refDefine(this.$refs.element);
       }

package/utils/JsViewVueWidget/JsvInput/Cursor.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-20 10:37:01
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-20 17:07:17
+ * @LastEditTime: 2022-09-02 13:28:59
  * @Description: file content
 -->
 <script>
@@ -39,7 +39,9 @@ export default {
       this.visible = show;
     },
   },
-  mounted() {},
+  mounted() {
+    this.startBlink();
+  },
   beforeUnmount() {
     this._cleanInterval();
   },

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-20 10:35:56
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-02-21 10:17:42
+ * @LastEditTime: 2022-09-02 13:44:56
  * @Description: file content
 -->
 <script>
@@ -228,9 +228,9 @@ export default {
           !ifDigital(add_text) &&
           this.type === InputType.NUMBER
         ) {
-          console.log(
-            `onTextChanged add text failed, add_text:${add_text}, when input type is number!`
-          );
+          // console.log(
+          //   `onTextChanged add text failed, add_text:${add_text}, when input type is number!`
+          // );
           if (this.editControlView) {
             this.editControlView.updateCursorOffset(
               this.fullString,
@@ -255,7 +255,7 @@ export default {
 
     // 1:shown 0:hidden
     _onStatusChanged(status) {
-      console.log("OnStatusChanged status", status);
+      // console.log("OnStatusChanged status", status);
     },
 
     _getStringWithFont(str) {
@@ -327,7 +327,7 @@ export default {
 
     add(string) {
       if (this.type === InputType.NUMBER && !ifDigital(string)) {
-        console.log(`The input data:${string} is not number`);
+        // console.log(`The input data:${string} is not number`);
         return;
       }
       const pre_full_str = this.fullString;
@@ -573,8 +573,9 @@ export default {
     },
 
     onFocus() {
-      console.log("Input Focus");
+      // console.log("Input Focus");
       this.isFocus = true;
+      this.$refs.cursor?.startBlink();
       if (this.editControlView && !this.readonly) {
         this.editControlView.showIme(
           this.type,
@@ -586,7 +587,7 @@ export default {
 
     onBlur() {
       this.isFocus = false;
-      console.log("Input Blur");
+      // console.log("Input Blur");
       if (this.editControlView && !this.readonly) {
         this.editControlView.hideIme();
       }
@@ -604,9 +605,7 @@ export default {
       }
       this.clearCursorPauseTimer();
       this.cursorPauseTimeoutToken = setTimeout(() => {
-        if (this.$refs.cursor) {
-          this.$refs.cursor?.startBlink();
-        }
+        this.$refs.cursor?.startBlink();
       }, 500);
     },
     onKeyDown(keyEvent) {
@@ -731,7 +730,9 @@ export default {
     this.textWidth = cur_position > this.width ? cur_position : this.width;
     this.textLeft = this._calculateSlide("", this.value, this.value.length);
   },
-  mounted() {},
+  mounted() {
+    this.$refs.cursor?.startBlink();
+  },
   beforeUnmount() {
     if (this.editControlViewId != -1) {
       const view_store = ForgeExtension.RootActivity