@shijiu/jsview-vue 2.1.200 → 2.1.339-test.0

package/bin/browser/BrowserTextureAnim.vue.mjs

@@ -0,0 +1,324 @@
+import { openBlock, createElementBlock } from 'vue';
+import { _ as _export_sfc } from '../export-sfc.mjs';
+
+//!
+//! utils/JsViewVueWidget/JsvTextureAnim/BrowserTextureAnim.vue;
+//!
+/*! <!--
+ * @Author: ChenChanghua
+ * @Date: 2022-02-08 09:29:17
+ * @LastEditTime: 2023-02-21 10:51:22
+ * @Description: file content
+-->
+
+
+ */
+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;
+const _sfc_main = {
+  props: {
+    src: String,
+    top: Number,
+    left: Number,
+    width: Number,
+    height: Number,
+    borderRadius: [String, Number],
+    decorate: Object,
+    animation: String,
+    duration: Number,
+    transform: String,
+    transformOrigin: String,
+    repeat: {
+      type: Number,
+      default: 1
+    },
+    delay: {
+      type: Number,
+      default: 0
+    },
+    easing: {
+      type: String,
+      default: "linear"
+    },
+    onAnimationEnd: Function,
+    autoStart: {
+      type: Boolean,
+      default: false
+    },
+    texCoord: {
+      type: Object
+    }
+  },
+  setup(props) {
+    return {
+      animName: "browser-texture-anim-" + TOKEN++,
+      animDiv: null,
+      clipDiv: null,
+      imgDiv: null,
+      watcherHandlerList: []
+    };
+  },
+  computed: {
+    animSet() {
+      return `${this.animName} ${this.duration / 1e3}s ${this.easing} ${this.delay / 1e3}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: "0px",
+          top: "0px",
+          width: this.width + "px",
+          height: this.height + "px"
+        };
+      }
+    },
+    maskStyle() {
+      if (this.borderRadius) {
+        const radiusObj = this._readRadius(this.borderRadius);
+        return {
+          left: this.left + "px",
+          top: this.top + "px",
+          borderRadius: `${radiusObj.topLeft}px ${radiusObj.topRight}px ${radiusObj.bottomLeft}px ${radiusObj.bottomRight}px`,
+          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: {
+    _readRadius(setting) {
+      if (typeof setting == "number") {
+        return {
+          type: DECORATE_BORDER_RADIUS,
+          topLeft: setting,
+          topRight: setting,
+          bottomRight: setting,
+          bottomLeft: setting
+        };
+      } else if (typeof setting == "string" && setting.length > 0) {
+        const pattern = /\d+/g;
+        let match = setting.match(pattern);
+        if (match.length > 0) {
+          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;
+    },
+    start() {
+      if (this.animDiv && this.animation) {
+        this.animDiv.style.animation = this.animSet;
+      }
+    },
+    insertKeyframe(animDefine) {
+      const index = document.styleSheets[0].cssRules.length;
+      document.styleSheets[0].insertRule(animDefine, index);
+    },
+    removeKeyframe(animName) {
+      const styleSheetRef = document.styleSheets[0];
+      const cssRulesRef = styleSheetRef.cssRules;
+      for (let i = cssRulesRef.length - 1; i >= 0; i--) {
+        if (cssRulesRef[i].name === animName) {
+          styleSheetRef.deleteRule(i);
+          break;
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.animation) {
+      this.insertKeyframe("@keyframes " + this.animName + " " + this.animation);
+    }
+    this.$refs.root.jsvGetProxyView().RegisterOnProxyReady(() => {
+      const root = this.$refs.root.jsvGetProxyView().HtmlGetElement();
+      this.clipDiv = window.originDocument.createElement("div");
+      Object.assign(this.clipDiv.style, this.maskStyle);
+      const textureLayout = this.textureLayout;
+      this.animDiv = window.originDocument.createElement("div");
+      Object.assign(this.animDiv.style, textureLayout);
+      this.animDiv.onanimationend = () => {
+        this.animDiv.style.animation = null;
+        this.onAnimationEnd?.();
+      };
+      this.imgDiv = window.originDocument.createElement("div");
+      this.imgDiv.style.width = textureLayout.width;
+      this.imgDiv.style.height = textureLayout.height;
+      this.imgDiv.style.backgroundImage = `url(${this.src})`;
+      this.imgDiv.style.transform = this.transform;
+      this.imgDiv.style.transformOrigin = this.transformOrigin;
+      this.animDiv.appendChild(this.imgDiv);
+      this.clipDiv.appendChild(this.animDiv);
+      root.appendChild(this.clipDiv);
+    });
+    this.watcherHandlerList.push(
+      this.$watch("left", (newValue) => {
+        this.clipDiv.style.left = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("top", (newValue) => {
+        this.clipDiv.style.top = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("width", (newValue) => {
+        this.clipDiv.style.width = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("height", (newValue) => {
+        this.clipDiv.style.height = newValue + "px";
+      })
+    );
+    this.watcherHandlerList.push(
+      this.$watch("textureLayout", (newValue) => {
+        Object.assign(this.animDiv.style, newValue);
+        this.imgDiv.style.width = newValue.width;
+        this.imgDiv.style.height = newValue.height;
+      })
+    );
+    if (this.autoStart) {
+      setTimeout(() => {
+        this.start();
+      }, 0);
+    }
+  },
+  beforeUnmount() {
+    this.removeKeyframe(this.animName);
+    for (let handler of this.watcherHandlerList) {
+      handler?.();
+    }
+    this.watcherHandlerList = [];
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", { ref: "root" }, null, 512);
+}
+const BrowserTextureAnim = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { BrowserTextureAnim as default };

package/bin/export-sfc.mjs

@@ -0,0 +1,12 @@
+//!
+//! plugin-vue:export-helper;
+//!
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+export { _export_sfc as _ };

package/bin/jsview-common.mjs

@@ -0,0 +1,39 @@
+//!
+//! utils/JsViewVueWidget/JsvApic/JsvCommonLoopToolBase.js;
+//!
+class LoopToolBase {
+  constructor() {
+    this.mFrameIndex = -1;
+    this.mTotalFrameNum = -1;
+    this.mNextFrameIndex = -1;
+    this.mValide = false;
+  }
+  getNextIndex(curIndex) {
+    return -1;
+  }
+  hasNext() {
+    return this.mNextFrameIndex != -1;
+  }
+  next() {
+    this.mFrameIndex = this.mNextFrameIndex;
+    this.mNextFrameIndex = this.getNextIndex(this.mFrameIndex);
+    return this.mFrameIndex;
+  }
+  setApicInfo(frameNum, loopNum) {
+    this.mTotalFrameNum = frameNum;
+    this.mLoopNum = loopNum;
+  }
+}
+const LoopType = {
+  LOOP_DEFAULT: 0,
+  LOOP_INFINITE: 1,
+  LOOP_FINITE: 2,
+  LOOP_PART: 3,
+  LOOP_SINGLE: 4
+};
+const ApicEndState = {
+  HIDE: 1,
+  LAST_FRAME: 2
+};
+
+export { ApicEndState as A, LoopType as L, LoopToolBase as a };