@shijiu/jsview-vue 0.9.602 → 1.9.627

package/utils/JsViewEngineWidget/JsvFocusBlock.vue

@@ -64,47 +64,45 @@ if (props.name && props.name.indexOf(".") >= 0) {
       '". name must not contains "."'
   );
 }
-let actionCallback = {};
-let fDivRef = ref(null);
 
 //methods
-const getName = () => {
-  return toRaw(fDivRef.value)?.FocusNodeRef.getName();
+function getName() {
+  return toRaw(_fDivRef.value)?.FocusNodeRef.getName();
 };
 
-const getNamespace = () => {
-  let focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
+function getNamespace() {
+  let focusNode = toRaw(_fDivRef.value)?.FocusNodeRef;
   if (focusNode?.AsHub) {
     // hub的getHub返回的是自己
-    focusNode = toRaw(fDivRef.value)?.FocusNodeRef.GetParentPage();
+    focusNode = toRaw(_fDivRef.value)?.FocusNodeRef.GetParentPage();
   }
   const namespace = focusNode.getName();
   return namespace !== ".__AppRoot__" ? namespace : "";
 };
 
-const findBlockByName = (name) => {
-  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef.getNodeByName(name);
+function findBlockByName(name) {
+  const focusNode = toRaw(_fDivRef.value)?.FocusNodeRef.getNodeByName(name);
   return focusNode?.jsvVueComponent;
 };
 
-const requestFocus = (passToChild) => {
-  toRaw(fDivRef.value)?.FocusNodeRef.requestFocus(passToChild);
+function requestFocus(passToChild) {
+  toRaw(_fDivRef.value)?.FocusNodeRef.requestFocus(passToChild);
 };
 
-const returnFocusToParent = () => {
-  toRaw(fDivRef.value)?.FocusNodeRef.ReturnFocusToParent();
+function returnFocusToParent() {
+  toRaw(_fDivRef.value)?.FocusNodeRef.ReturnFocusToParent();
 };
 
-const bubbleCustomerEvent = (ev) => {
-  toRaw(fDivRef.value)?.FocusNodeRef.bubbleCustomerEvent(ev);
+function bubbleCustomerEvent(ev) {
+  toRaw(_fDivRef.value)?.FocusNodeRef.bubbleCustomerEvent(ev);
 };
 
-const debugPrintFocusChain = () => {
-  toRaw(fDivRef.value)?.FocusNodeRef.printFocusNodeList();
+function debugPrintFocusChain() {
+  toRaw(_fDivRef.value)?.FocusNodeRef.printFocusNodeList();
 };
 
-const debugPrintLastFocus = () => {
-  toRaw(fDivRef.value)?.FocusNodeRef.printGlobalLastFocus();
+function debugPrintLastFocus() {
+  toRaw(_fDivRef.value)?.FocusNodeRef.printGlobalLastFocus();
 };
 
 const exportObject = {
@@ -117,47 +115,48 @@ const exportObject = {
   debugPrintFocusChain,
   debugPrintLastFocus,
 };
-const _mountToFocusSystem = () => {
-  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
+
+function _mountToFocusSystem() {
+  const focusNode = toRaw(_fDivRef.value)?.FocusNodeRef;
 
   // 保存self，find用, 通过exportObject代表自己的instance
   focusNode.jsvVueComponent = exportObject;
 
   // 注册回调函数
-  actionCallback.onDispatchKeyDown =
+  _actionCallback.onDispatchKeyDown =
     props.onDispatchKeyDown || props.onAction?.onDispatchKeyDown;
-  if (actionCallback.onDispatchKeyDown) {
+  if (_actionCallback.onDispatchKeyDown) {
     focusNode.setDispatchKeyDown(_onDispatchKeyDown);
   }
-  actionCallback.onDispatchKeyUp =
+  _actionCallback.onDispatchKeyUp =
     props.onDispatchKeyUp || props.onAction?.onDispatchKeyUp;
-  if (actionCallback.onDispatchKeyUp) {
+  if (_actionCallback.onDispatchKeyUp) {
     focusNode.setDispatchKeyUp(_onDispatchKeyUp);
   }
-  actionCallback.onKeyDown = props.onKeyDown || props.onAction?.onKeyDown;
-  if (actionCallback.onKeyDown) {
+  _actionCallback.onKeyDown = props.onKeyDown || props.onAction?.onKeyDown;
+  if (_actionCallback.onKeyDown) {
     focusNode.setOnKeyDown(_onKeyDown);
   }
-  actionCallback.onKeyUp = props.onKeyUp || props.onAction?.onKeyUp;
-  if (actionCallback.onKeyUp) {
+  _actionCallback.onKeyUp = props.onKeyUp || props.onAction?.onKeyUp;
+  if (_actionCallback.onKeyUp) {
     focusNode.setOnKeyUp(_onKeyUp);
   }
-  actionCallback.onFocus = props.onFocus || props.onAction?.onFocus;
-  if (actionCallback.onFocus) {
+  _actionCallback.onFocus = props.onFocus || props.onAction?.onFocus;
+  if (_actionCallback.onFocus) {
     focusNode.setOnFocus(_onFocus);
   }
-  actionCallback.onBlur = props.onBlur || props.onAction?.onBlur;
-  if (actionCallback.onBlur) {
+  _actionCallback.onBlur = props.onBlur || props.onAction?.onBlur;
+  if (_actionCallback.onBlur) {
     focusNode.setOnBlur(_onBlur);
   }
 
-  actionCallback.onCustomerEvent =
+  _actionCallback.onCustomerEvent =
     props.onCustomerEvent || props.onAction?.onCustomerEvent;
-  if (actionCallback.onCustomerEvent) {
+  if (_actionCallback.onCustomerEvent) {
     focusNode.setOnCustomerEvent(_onCustomerEvent);
   }
   // 建立父子关系链
-  let self = toRaw(fDivRef.value);
+  let self = toRaw(_fDivRef.value);
   let parent = self.parentElement;
   while (parent) {
     if (self.FocusNodeRef.GetParentPage()) {
@@ -174,32 +173,35 @@ const _mountToFocusSystem = () => {
   }
 };
 
-const _onDispatchKeyDown = (ev) => {
+function _onDispatchKeyDown(ev) {
   ev.ownerNode = exportObject;
-  return actionCallback?.onDispatchKeyDown(ev) || false;
+  return _actionCallback?.onDispatchKeyDown(ev) || false;
 };
-const _onDispatchKeyUp = (ev) => {
+function _onDispatchKeyUp(ev) {
   ev.ownerNode = exportObject;
-  return actionCallback?.onDispatchKeyUp(ev) || false;
+  return _actionCallback?.onDispatchKeyUp(ev) || false;
 };
-const _onKeyDown = (ev) => {
+function _onKeyDown(ev) {
   ev.ownerNode = exportObject;
-  return actionCallback?.onKeyDown(ev) || false;
+  return _actionCallback?.onKeyDown(ev) || false;
 };
-const _onKeyUp = (ev) => {
+function _onKeyUp(ev) {
   ev.ownerNode = exportObject;
-  return actionCallback?.onKeyUp(ev) || false;
+  return _actionCallback?.onKeyUp(ev) || false;
 };
-const _onFocus = () => {
-  actionCallback?.onFocus(exportObject);
+function _onFocus() {
+  _actionCallback?.onFocus(exportObject);
 };
-const _onBlur = () => {
-  actionCallback?.onBlur(exportObject);
+function _onBlur() {
+  _actionCallback?.onBlur(exportObject);
 };
-const _onCustomerEvent = (ev) => {
-  return actionCallback?.onCustomerEvent(ev) || false;
+function _onCustomerEvent(ev) {
+  return _actionCallback?.onCustomerEvent(ev) || false;
 };
 
+let _actionCallback = {};
+let _fDivRef = ref(null);
+
 onMounted(() => {
   _mountToFocusSystem();
 
@@ -209,7 +211,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  const focusNode = toRaw(fDivRef.value)?.FocusNodeRef;
+  const focusNode = toRaw(_fDivRef.value)?.FocusNodeRef;
   focusNode?.onUnMount();
   if (focusNode?.jsvVueComponent) {
     focusNode.jsvVueComponent = undefined;
@@ -220,7 +222,9 @@ defineExpose(exportObject);
 </script>
 
 <template>
-  <fdiv ref="fDivRef" :fname="name" :new-namespace="namespace">
+<div>
+  <fdiv ref="_fDivRef" :fname="name" :new-namespace="namespace">
     <slot></slot>
   </fdiv>
+</div>
 </template>

package/utils/JsViewEngineWidget/JsvFocusManager.js

@@ -13,7 +13,7 @@ export class JsvFocusManager {
   constructor() {}
 
   install(app, ...options) {
-    console.log("JsvFocusManager install");
+    // console.log("JsvFocusManager install");
     if (typeof options[0] !== "string") {
       throw new Error(
         "JsvFocusManager Error: 2nd argument is required. Such as: app.use(FocusManager, '#app')"

package/utils/JsViewPlugin/JsvPlayer/JsvPlayer.vue

@@ -49,7 +49,7 @@ export default {
 		/**
 		 * 属性，Boolean类型，是否保留最后一帧，true保留，false不保留。
 		 */
-		keepLastFrame: {type: Boolean, default: false},
+		keepLastFrame: {type: Boolean, default: true},
 		/**
 		 * 属性，String类型，视频显示比例，origin原始比例显示，full全屏显示，x:y按照指定比例显示。
 		 */
@@ -255,7 +255,7 @@ export default {
 						this.video.loop = this.loop;
 					}
 
-					if(this.keepLastFrame){
+					if(!this.keepLastFrame){
 						this.video.keepLastFrame = this.keepLastFrame;
 					}
 
@@ -279,6 +279,7 @@ export default {
 	unmounted(){
 		if(this.video != null){
 			this.video.releasePlayer();
+
 			this.onRef?.(null)
 		}
 	},

package/utils/JsViewPlugin/JsvPlayer/version.js

@@ -2,16 +2,16 @@ let PluginInfo={
     // downloadUrl:"http://192.168.0.63:8080/plugin/JsvPlayer-164.zip", //插件下载地址
     packageName:"com.qcode.jsvplayer",
     name:"播放器插件",
-    version:"1.6.5",  //插件需要的版本号
-    versionCodeMin:165,
-    versionCodeMax:165,
+    version:"1.6.6",  //插件需要的版本号
+    versionCodeMin:166,
+    versionCodeMax:166,
     bridgeName:"jsvPlayerBridge", //插件bridge注册到jsview的名称
     className:"com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
     initMethod:"createInstance",   //插件初始化方法
     listener:"top.JsvPlayerPluginLoadResult",  //插件加载结果回调
     listener2: "top.JsvPlayerPluginStatus",
     // debug:true,
-    md5:"1d06b3a8acba255efb4826a15a7fb480"
+    md5:"b08edbe68f22ba93855a2016d9372858"
 };
 
 // 不要用export default，update-env脚本不能解析

package/utils/JsViewVueTools/JsvHashHistory.js

@@ -5,10 +5,10 @@ class JsvHashHistory {
     if(window.jsvIsBrowserDebug) {
       this.#history = createWebHashHistory(base)
     } else {
-      this.#history = this.#createMockHashHistory(base);
+      this.#history = this._createMockHashHistory(base);
     }
   }
-
+  
   get location() {
     return this.#history.location;
   }
@@ -31,24 +31,24 @@ class JsvHashHistory {
 
   replace(to, data) {
     this.#history.replace(to, data);
-    this.#updateLocation(this.#history.location);
+    this._updateLocation(this.#history.location);
   } 
 
   push(to, data) {
     this.#history.push(to, data);
-    this.#updateLocation(this.#history.location);
+    this._updateLocation(this.#history.location);
   }
 
   go(delta, triggerListeners) {
     this.#history.go(delta, triggerListeners);
-    this.#updateLocation(this.#history.location);
+    this._updateLocation(this.#history.location);
   }
 
   destroy() {
     this.#history.destroy();
   }
 
-  #createMockHashHistory(base) {
+  _createMockHashHistory(base) {
     // 抄 createWebHashHistory 作业
     base = location.host ? base || location.pathname + location.search : '';
     if (!base.includes('#'))
@@ -60,7 +60,7 @@ class JsvHashHistory {
     this.baseURL = window.location.origin + base;
 
     const history = createMemoryHistory(base)
-    const initHash = this.#getInitHash();
+    const initHash = this._getInitHash();
     if(initHash) {
       // 已设置hash，替换到hash页面
       history.replace({
@@ -69,13 +69,13 @@ class JsvHashHistory {
       });
     } else {
       // 未设置hash定位，追加hash根的显示
-      this.#updateLocation(null);
+      this._updateLocation(null);
     }
 
     return history;
   }
 
-  #getInitHash() {
+  _getInitHash() {
     let initHash;
 
     // 抓取history hash在启动过程中的变更, 用于warmUp/warmLoad不一致的情况。
@@ -94,7 +94,7 @@ class JsvHashHistory {
     return initHash;
   }
 
-  #updateLocation(location) {
+  _updateLocation(location) {
     if(!window.jsvIsBrowserDebug) {
       const url = new window.JsView.Dom.UrlRef(
         location ? this.baseURL + location : this.baseURL,
@@ -107,8 +107,8 @@ class JsvHashHistory {
   #history;
 }
 
-function createJsvHashHistory(base) {
+function jsvCreateHashHistory(base) {
   return new JsvHashHistory(base)
 }
 
-export { createJsvHashHistory }
+export { jsvCreateHashHistory }

package/utils/JsViewVueTools/index.d.ts

@@ -1,3 +1,7 @@
+// 添加jsvCreateHashHistory的声明
+export declare function jsvCreateHashHistory(): RouterHistory;
+
+
 declare module '@shijiu/jsview-vue/utils/JsViewVueTools/JsvRuntimeBridge' {
   export const jJsvRuntimeBridge: {
     notifyPageLoaded();
@@ -10,4 +14,4 @@ declare module 'jsview/utils/JsViewVueTools/JsvRuntimeBridge' {
   }
 }
 
-declare module '*.js'
+declare module '*.js'

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>