@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewVueWidget/JsvTextureAnim/JsvTextureAnim.vue

@@ -6,6 +6,25 @@
  * @Description: file content
 -->
 <script>
+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,
+};
+export { TexAlignAnchor };
+export default {
+  TexAlignAnchor,
+};
+</script>
+
+<script setup>
+import { ref, shallowRef, watch, onMounted, onBeforeUnmount, onActivated, onDeactivated } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 import {
@@ -71,324 +90,321 @@ import {
  *        start
  *          @description 开始动画
  */
-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,
-};
-export { TexAlignAnchor };
-
 const STATE_IDLE = 0;
 const STATE_RUNNING = 1;
 const STATE_PAUSED = 2;
 const STATE_END = 3;
 
-export default {
-  props: {
-    src: String,
-    top: Number,
-    left: Number,
-    width: Number,
-    height: Number,
-    borderRadius: [String, Number],
-    decorate: Object,
-    animation: String,
-    duration: Number,
-    transform: String,
-    transformOrigin: String,
-    onAnimationEnd: Function,
-    repeat: {
-      type: Number,
-      default: 0,
-    },
-    delay: {
-      type: Number,
-      default: 0,
-    },
-    easing: {
-      type: String,
-      default: "linear",
-    },
-    autoStart: {
-      type: Boolean,
-      default: false,
-    },
-    texCoord: {
-      type: Object,
-    },
+const props = defineProps({
+  src: String,
+  top: Number,
+  left: Number,
+  width: Number,
+  height: Number,
+  borderRadius: [String, Number],
+  decorate: Object,
+  animation: String,
+  duration: Number,
+  transform: String,
+  transformOrigin: String,
+  onAnimationEnd: Function,
+  repeat: {
+    type: Number,
+    default: 0,
   },
-  watch: {
-    texCoord: {
-      handler(newValue, oldValue) {
-        this._updateTexCoord();
-      },
-      deep: true,
-    },
+  delay: {
+    type: Number,
+    default: 0,
   },
-  setup() {
-    return {
-      runningState: STATE_IDLE, // 0:未开始, 1:运行中, 2:暂停, 3:正常结束
-      innerViewId: -1,
-    };
+  easing: {
+    type: String,
+    default: "linear",
   },
-  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 (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;
-    },
-
-    _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 = ForgeHandles.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);
-      } 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(normal_end) {
-      if (normal_end) {
-        this.runningState = STATE_END;
-      }
-      this.onAnimationEnd?.();
-    },
-
-    _updateTexCoord() {
-      if (this.texCoord) {
-        if (this.texCoord.width > 0 && this.texCoord.height > 0) {
-          const offsetLeft = !isNaN(this.texCoord.left)
-            ? this.texCoord.left
-            : -this.texCoord.width / 2;
-          const offsetTop = !isNaN(this.texCoord.top)
-            ? this.texCoord.top
-            : -this.texCoord.height / 2;
-          const anchor = Number.isInteger(this.texCoord.alignAnchor)
-            ? this.texCoord.alignAnchor
-            : 5;
-          this.innerView.SetTextureCoord(
-            offsetLeft,
-            offsetTop,
-            this.texCoord.width,
-            this.texCoord.height,
-            anchor
-          );
-        } else {
-          console.error("JsvTextureAnim");
-        }
-      }
-    },
-
-    _buildAnimation() {
-      if (this.animation) {
-        let anim = new Forge.CssKeyframeAnimation(
-          "@keyframes texAnimDef" + this.animation,
-          this.duration,
-          null,
-          1,
-          1
-        );
-        anim.EnableDelay(this.delay).SetRepeat(this.repeat);
-        anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-        anim.SetAnimationListener(
-          new Forge.AnimationListener(null, this._onAnimationEnd, null)
-        );
-
-        return anim;
-      } else {
-        return null;
-      }
-    },
-
-    start() {
-      if (this.innerView) {
-        let anim = this._buildAnimation();
-        if (anim) {
-          this.runningState = STATE_RUNNING;
-          this.innerView.StartTextureAnimation(anim);
-        }
-      }
-    },
-
-    getTransition() {
-      let transition = "";
-      let decorate = this.decorate;
-
-      if (
-        decorate &&
-        decorate.type == DECORATE_NINEPATCH_ALPHA_MIX &&
-        decorate.animTime > 0
-      ) {
-        // Ninepatch模式可以设置长宽的过渡动画
-        let anim_time = decorate.animTime;
-        transition = `left ${anim_time}s, top ${anim_time}s, width ${anim_time}s, height ${anim_time}s`;
-      }
-
-      return transition;
-    },
+  autoStart: {
+    type: Boolean,
+    default: false,
   },
+  texCoord: {
+    type: Object,
+  },
+});
+
+const runningState = ref(STATE_IDLE);
+const innerViewId = ref(-1);
+const innerView = shallowRef(null);
 
-  created() {
-    const textureManager = ForgeHandles.TextureManager;
-
-    // 1.获得主view的展示内容图片 texture
-    let image_url = urlCheckSet(this.src);
-    let view_texture = textureManager.GetImage2(
-      image_url,
-      false,
-      null,
-      "RGB_8888",
-      null
+function _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;
+}
+
+function _resolveDecorate() {
+  let decorate = props.decorate;
+  if (props.borderRadius) {
+    decorate = _readRadius(props.borderRadius);
+  }
+  return decorate;
+}
+
+function _createTextureSetting(view_texture, decorate_setting) {
+  if (decorate_setting?.type === DECORATE_BORDER_RADIUS) {
+    let texture_mask = new Forge.ViewRoundCornerMask(
+      numberCheckSet(decorate_setting.topLeft),
+      numberCheckSet(decorate_setting.topRight),
+      numberCheckSet(decorate_setting.bottomLeft),
+      numberCheckSet(decorate_setting.bottomRight)
     );
-    // 1.1 兼容border转为decorate
-    let decorate = this.$props.decorate;
-    if (this.$props.borderRadius) {
-      decorate = this._readRadius(this.$props.borderRadius);
+    return new Forge.ExternalTextureSetting(view_texture, texture_mask);
+  }
+  return new Forge.ExternalTextureSetting(view_texture);
+}
+
+function _createTextureSettingFromSrc(src) {
+  if (!src) {
+    return null;
+  }
+  let image_url = urlCheckSet(src);
+  let view_texture = textureManager.GetImage2(
+    image_url,
+    false,
+    null,
+    "RGB_8888",
+    null
+  );
+  return _createTextureSetting(view_texture, _resolveDecorate());
+}
+
+function _createBorderRadius(view_texture, decorate_setting) {
+  let texture_set = _createTextureSetting(view_texture, decorate_setting);
+  return new Forge.LayoutView(texture_set);
+}
+
+function _createNinePatchAlphaMixView(view_texture, decorate_setting) {
+  const textureManager = ForgeHandles.TextureManager;
+
+  let texture_set = new Forge.ExternalTextureSetting(view_texture);
+  let nine_patch_view = new Forge.NinePatchView(texture_set);
+
+  if (decorate_setting.url) {
+    let converted_url = urlCheckSet(decorate_setting.url);
+    let alpha_texture = textureManager.GetImage2(converted_url);
+    nine_patch_view.EnableAlphaMix(alpha_texture);
+  } else {
+    console.error("ninepatch url not set");
+    return null;
+  }
+
+  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;
+}
+
+function _createLayoutViewWithDecorate(view_texture, decorate_setting) {
+  if (decorate_setting && typeof decorate_setting == "object") {
+    switch (decorate_setting.type) {
+      case DECORATE_NINEPATCH_ALPHA_MIX:
+        return _createNinePatchAlphaMixView(view_texture, decorate_setting);
+      case DECORATE_BORDER_RADIUS:
+        return _createBorderRadius(view_texture, decorate_setting);
+      default:
+        console.error("Unknown set=", decorate_setting);
+        return null;
     }
+  }
+}
+
+function _createForgeView(view_texture, decorate_setting) {
+  if (decorate_setting) {
+    return _createLayoutViewWithDecorate(view_texture, decorate_setting);
+  }
+  return new Forge.LayoutView(_createTextureSetting(view_texture, null));
+}
 
-    // 2.创建view
-    this.innerView = this._createForgeView(view_texture, decorate);
-    // 3.设置texture基本形变
-    if (this.transform) {
-      this.innerView.ResetTextureCssTransform(
-        this.transform,
-        this.transformOrigin
+function _onAnimationEnd(normal_end) {
+  if (normal_end) {
+    runningState.value = STATE_END;
+  }
+  props.onAnimationEnd?.(normal_end);
+}
+
+function _updateTexCoord() {
+  if (props.texCoord) {
+    if (props.texCoord.width > 0 && props.texCoord.height > 0) {
+      const offsetLeft = !isNaN(props.texCoord.left)
+        ? props.texCoord.left
+        : -props.texCoord.width / 2;
+      const offsetTop = !isNaN(props.texCoord.top)
+        ? props.texCoord.top
+        : -props.texCoord.height / 2;
+      const anchor = Number.isInteger(props.texCoord.alignAnchor)
+        ? props.texCoord.alignAnchor
+        : 5;
+      innerView.value.SetTextureCoord(
+        offsetLeft,
+        offsetTop,
+        props.texCoord.width,
+        props.texCoord.height,
+        anchor
       );
+    } else {
+      console.error("JsvTextureAnim");
     }
-    this._updateTexCoord();
+  }
+}
 
-    // 4. inner view标准处理
-    this.innerViewId = Forge.sViewStore.add(new Forge.ViewInfo(this.innerView));
-  },
-  beforeUnmount() {
-    if (this.innerViewId !== -1) {
-      Forge.sViewStore.remove(this.innerViewId);
-      this.innerViewId = -1;
-    }
-  },
-  mounted() {
-    if (this.autoStart) {
-      this.start();
-    }
-  },
-  activated() {
-    if (this.innerView && this.runningState == STATE_PAUSED) {
-      // 动画未正常结束，重新开始动画
-      let anim = this._buildAnimation();
-      this.innerView.StartTextureAnimation(anim); // pause状态，一定有值
+function _buildAnimation(a) {
+  if (a) {
+    let anim = new Forge.CssKeyframeAnimation(
+      "@keyframes texAnimDef" + a,
+      props.duration,
+      Forge.Easing.str2Easing(props.easing),
+      1,
+      1
+    );
+    anim.EnableDelay(props.delay).SetRepeat(props.repeat);
+    anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
+    anim.SetAnimationListener(
+      new Forge.AnimationListener(null, _onAnimationEnd, null)
+    );
+    return anim;
+  }
+  return null;
+}
+
+function start(customAnim) {
+  if (innerView.value) {
+    const a = customAnim ?? props.animation;
+    let anim = _buildAnimation(a);
+    if (anim) {
+      runningState.value = STATE_RUNNING;
+      innerView.value.StartTextureAnimation(anim);
     }
+  }
+}
+
+function getTransition() {
+  let transition = "";
+  let decorate = props.decorate;
+
+  if (
+    decorate &&
+    decorate.type == DECORATE_NINEPATCH_ALPHA_MIX &&
+    decorate.animTime > 0
+  ) {
+    let anim_time = decorate.animTime;
+    transition = `left ${anim_time}s, top ${anim_time}s, width ${anim_time}s, height ${anim_time}s`;
+  }
+
+  return transition;
+}
+
+watch(
+  () => props.texCoord,
+  () => {
+    _updateTexCoord();
   },
-  deactivated() {
-    if (this.innerView) {
-      this.innerView.StopTextureAnimation();
-      if (this.runningState == STATE_RUNNING) {
-        this.runningState = STATE_PAUSED;
-      }
+  { deep: true }
+);
+
+watch(
+  () => props.transform,
+  (newValue) => {
+    innerView.value?.ResetTextureCssTransform(newValue, props.transformOrigin);
+  }
+);
+
+watch(
+  () => props.src,
+  (newSrc) => {
+    innerView.value?.ResetTexture(_createTextureSettingFromSrc(newSrc));
+  }
+);
+
+// 初始化 innerView（等价于原 created 钩子）
+const textureManager = ForgeHandles.TextureManager;
+let image_url = urlCheckSet(props.src);
+let view_texture = textureManager.GetImage2(
+  image_url,
+  false,
+  null,
+  "RGB_8888",
+  null
+);
+let decorate = _resolveDecorate();
+innerView.value = _createForgeView(view_texture, decorate);
+if (props.transform) {
+  innerView.value.ResetTextureCssTransform(
+    props.transform,
+    props.transformOrigin
+  );
+}
+_updateTexCoord();
+innerViewId.value = Forge.sViewStore.add(new Forge.ViewInfo(innerView.value));
+
+onBeforeUnmount(() => {
+  if (innerViewId.value !== -1) {
+    Forge.sViewStore.remove(innerViewId.value);
+    innerViewId.value = -1;
+  }
+});
+
+onMounted(() => {
+  if (props.autoStart) {
+    start();
+  }
+});
+
+onActivated(() => {
+  if (innerView.value && runningState.value == STATE_PAUSED) {
+    let anim = _buildAnimation(props.animation);
+    innerView.value.StartTextureAnimation(anim);
+    runningState.value = STATE_RUNNING;
+  }
+});
+
+onDeactivated(() => {
+  if (innerView.value) {
+    innerView.value.StopTextureAnimation();
+    if (runningState.value == STATE_RUNNING) {
+      runningState.value = STATE_PAUSED;
     }
-  },
-};
+  }
+});
+
+defineExpose({ start });
 </script>
 
 <template>