@shijiu/jsview-vue 0.0.1-beta.0

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -0,0 +1,197 @@
+<script>
+import { Forge } from "../../dom/jsv-forge-define";
+import {
+  JsvStyleClass,
+  JsvTextStyleClass,
+  combinedStyles,
+} from "../JsViewVueTools/JsvStyleClass";
+export default {
+  props: {
+    text: {
+      type: String,
+      default: "",
+    },
+    layoutStyles: {
+      type: Array,
+      default: () => [this.sDefaultLayoutStyle],
+    },
+    fontStyles: {
+      type: Array,
+      default: () => [this.sDefaultFontStyle],
+    },
+    styleToken: String,
+    slideSpeed: {
+      // 60px per second
+      type: Number,
+      default: 60,
+    },
+    forceSlide: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      asyncTextLenTimer: -1,
+      rollTimeId: -1,
+      animationCount: 0,
+      LayoutStyle: null,
+      FontStyle: null,
+      FontStyleClass: null,
+      TokenProcessed: null,
+      sDefaultLayoutStyle: new JsvStyleClass({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 20,
+      }),
+      sDefaultFontStyle: new JsvTextStyleClass({
+        color: "rgba(255,255,255,1.0)",
+        fontSize: 10,
+        textAlign: "center",
+        lineHeight: "20px",
+      }),
+      sCommonFontStyle: new JsvTextStyleClass({
+        whiteSpace: "nowrap",
+      }),
+    };
+  },
+  methods: {
+    _asyncStartSlider() {
+      // 清理之前的Slider处理
+      this._resetSlider();
+
+      // 稍进行延迟，以等待JsView的native端描绘文字并回传文字宽度
+      if (this.asyncTextLenTimer < 0) {
+        this.asyncTextLenTimer = setTimeout(() => {
+          if (
+            this.forceSlide ||
+            this.$refs.textRef.clientWidth > this.LayoutStyle.width
+          ) {
+            this._slideNextStep();
+          }
+          this.asyncTextLenTimer = -1;
+        }, 500);
+      }
+    },
+    _resetSlider() {
+      if (this.rollTimeId >= 0) {
+        clearTimeout(this.rollTimeId);
+        this.rollTimeId = -1;
+      }
+      this.animationCount = 0;
+      this.$refs.sliderRef?.jsvMaskView?.StopAnimation();
+    },
+    _slideNextStep() {
+      const text_width = this.$refs.textRef.clientWidth;
+      if (this.animationCount % 2 === 0) {
+        // 文字从原始位置，向左移动出屏幕(每次完整移动，停顿1秒)
+        this.rollTimeId = setTimeout(() => {
+          this.rollTimeId = -1;
+          const anim = new Forge.TranslateFrameAnimation(
+            0,
+            -text_width,
+            this.$props.slideSpeed,
+            true,
+            0,
+            0
+          );
+          anim.SetAnimationListener(
+            new Forge.AnimationListener(
+              null,
+              (ended) => {
+                if (ended) {
+                  // 正常结束，非Cancel时，进行下一个动作
+                  this._slideNextStep();
+                }
+              },
+              null
+            )
+          );
+          anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
+          this.$refs.sliderRef.jsvMaskView.StartAnimation(anim);
+          this.animationCount += 1;
+        }, 1000);
+      } else {
+        // 文字从右边屏幕外部，移动回屏幕中的文字原始位置
+        const anim = new Forge.TranslateFrameAnimation(
+          this.LayoutStyle.width,
+          0,
+          this.$props.slideSpeed,
+          true,
+          this.LayoutStyle.width,
+          0
+        );
+        anim.SetAnimationListener(
+          new Forge.AnimationListener(
+            null,
+            (ended) => {
+              if (ended) {
+                // 正常结束，非Cancel时，进行下一个动作
+                this._slideNextStep();
+              }
+            },
+            null
+          )
+        );
+        this.$refs.sliderRef.jsvMaskView.StartAnimation(anim);
+        this.animationCount += 1;
+      }
+    },
+    _AnalyzeStyleChange() {
+      if (this.$props.styleToken !== this.TokenProcessed) {
+        // Token变化时，重新解析style array
+        const layout_set = combinedStyles(this.$props.layoutStyles, true);
+        const font_set = combinedStyles([
+          ...this.$props.fontStyles,
+          this.sCommonFontStyle,
+        ]);
+        this.LayoutStyle = layout_set.combinedStyle;
+        this.FontStyle = font_set.combinedStyle;
+        this.FontStyleClass = font_set.combinedClass;
+        if (this.FontStyleClass.length === 0) {
+          this.FontStyleClass = null;
+        }
+        this.TokenProcessed = this.$props.styleToken;
+      }
+    },
+  },
+  created() {
+    this._AnalyzeStyleChange();
+  },
+  mounted() {
+    this._asyncStartSlider();
+  },
+  unmounted() {
+    // 清理所有异步处理，并停止Slider动作
+    if (this.asyncTextLenTimer >= 0) {
+      clearTimeout(this.asyncTextLenTimer);
+      this.asyncTextLenTimer = -1;
+    }
+    this._resetSlider();
+  },
+};
+</script>
+
+<template>
+  <div :style="{ ...this.LayoutStyle, overflow: 'hidden' }">
+    <div
+      ref="sliderRef"
+      :style="{
+        left: 0,
+        top: 0,
+        width: this.LayoutStyle.width,
+        height: this.LayoutStyle.height,
+      }"
+    >
+      <div
+        ref="textRef"
+        :className="this.FontStyleClass"
+        :style="{ ...this.FontStyle, height: this.LayoutStyle.height }"
+        :jsv_text_align_minwidth="this.LayoutStyle.width"
+      >
+        {{ this.$props.text }}
+      </div>
+    </div>
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvNativeSharedDiv.vue

@@ -0,0 +1,92 @@
+<!--
+ * 【控件介绍】
+ * JsvNativeSharedDiv：创建一个Native端可以跟进显示位置的div，用于Native端外挂插件的开发
+ *                  style {Object}  布局样式(必须)，必须包含的信息为{left, top, width, height}
+ *                  getId {function} 回调函数，用于接收ID信息，ID信息用于Native端对该view进行跟踪的标识
+ -->
+
+ <script>
+import { Forge, ForgeExtension } from "../../dom/jsv-forge-define";
+
+export default {
+  props: {
+    style: {
+      type: Object,
+      default: () => { return {} }
+    },
+    getId: Function,
+  },
+  setup() {
+    return {
+      isBrowserDebug: window.jsvIsBrowserDebug,
+      jsvMainView: undefined,
+      innerViewId: undefined,
+    }
+  },
+  beforeMount() {
+    if(this.isBrowserDebug) {
+      return;
+    }
+
+    // 初始化View
+
+    // 创建JsView图层穿透的texture，抠洞处理
+    const seeThroughTexture = ForgeExtension.TextureManager.GetColorTexture(
+      "rgba(0,0,0,0)"
+    );
+    const textureSetting = new Forge.TextureSetting(
+      seeThroughTexture,
+      null,
+      null,
+      false
+    );
+
+    // 通过内置函数构造定制的NativeSharedView
+    this.jsvMainView = new Forge.NativeSharedView(textureSetting);
+    this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
+      new Forge.ViewInfo(this.jsvMainView, null)
+    );
+
+    // 更新宽高
+    this.jsvMainView.ResetLayoutParams({
+      width: this.style.width,
+      height: this.style.height,
+    });
+
+    this.getId?.(this.jsvMainView?.GetTrackId());
+  },
+  beforeUnmount() {
+    if(this.isBrowserDebug) {
+      return;
+    }
+
+    // 清理View管理缓存
+    if (this.innerViewId !== -1) {
+      ForgeExtension.RootActivity.ViewStore.remove(this.innerViewId);
+      this.innerViewId = -1;
+      this.jsvMainView = null;
+    }
+  },
+  updated() {
+    // 更新宽高
+    this.jsvMainView.ResetLayoutParams({
+      width: this.style.width,
+      height: this.style.height,
+    });
+  }
+};
+</script>
+
+ <template>
+  <div v-if="!isBrowserDebug"
+    :style="{left: style.left, top: style.top}"
+    :jsv_innerview="innerViewId"
+  >
+    <slot/>
+  </div> <div v-else
+    :style="{...style, backgroundColor: '#000000'}"
+  >
+    <slot/>
+  </div>
+</template>
+

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -0,0 +1,76 @@
+<!--
+ * 【模块 export 内容】
+ * JsvNinePatch：Vue高阶组件，.9图展示控件，该控件的原图要求为正方形，延展后可为长方形
+ *      props说明:
+ *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
+ *          imageUrl    {String}    (必填)显示图片的加载地址
+ *          imageWidth  {int}       (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
+ *          contentWidth {int}      (必填)原图信息: 原图内用来装内容区域的宽度(由于正方形,宽高相同)
+ *          borderOutset {int}      在目标显示中，边框的显示宽度，默认值为0(由于正方形,宽高相同)，
+ *                                  边框显示在目标区域的外缘，而非内缘
+ *          animTime    {int}       (必填)缩放动画的时长(单位毫秒)
+ *          waitForInit {boolean}  尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
+-->
+
+<script>
+export default {
+  name: "JsvNinePatch",
+  props: {
+    style: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    top: { type: Number, default: 0 },
+    left: { type: Number, default: 0 },
+    borderOutset: { type: Number, default: 0 },
+    waitForInit: { type: Boolean, default: true },
+
+    imageUrl: String,
+    imageWidth: Number,
+    contentWidth: Number,
+    animTime: Number,
+  },
+
+  methods: {
+    isReady() {
+      if (!this.waitForInit) {
+        return true;
+      }
+
+      return this.style && this.style.width !== 0 && this.style.height !== 0;
+    },
+    getTransition() {
+      let transition = "";
+      if (this.animTime) {
+        transition = `left ${this.animTime}s, top ${this.animTime}s, width ${this.animTime}s, height ${this.animTime}s`;
+      }
+
+      return transition;
+    },
+  },
+
+  data() {
+    return {
+      sliceWidth: Math.ceil((this.imageWidth - this.contentWidth) / 2),
+    };
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="isReady"
+    :style="{
+      ...style,
+      transition: getTransition(),
+      borderImage: `url(${imageUrl}) ${sliceWidth} fill`,
+      borderImageWidth: `${sliceWidth}px`,
+      borderImageOutset: `${borderOutset}px`,
+    }"
+  />
+</template>
+
+<style scoped>
+</style>