@shijiu/jsview-vue 0.9.490 → 0.9.590

package/samples/SoundPool/App.vue

@@ -2,121 +2,92 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-25 09:56:46
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-25 10:23:53
+ * @LastEditTime: 2022-07-08 18:09:10
  * @Description: file content
 -->
-<script>
+<script setup>
 import coin from "./coin.mp3";
 import lose from "./lose.mp3";
-import bgm from "./bgmusic.mp3";
-import { JsvSoundPool } from "jsview/utils/JsViewVueWidget/JsvSoundPool";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import bgmusic from "./bgmusic.mp3";
+import { JsvSoundPool, jJsvRuntimeBridge } from "jsview";
+import { onMounted, onBeforeUnmount, ref } from "vue";
+import { useRouter } from "vue-router";
 
-export default {
-  setup() {
-    return {
-      soundPool: null,
-      coinController1: null,
-      coinController2: null,
-      loseController1: null,
-      loseController2: null,
-      bgm,
-    };
-  },
-  created() {
-    this.soundPool = new JsvSoundPool(10);
-    this.soundPool.request(
-      `url(${coin})`,
-      null,
-      1,
-      (state, audioController) => {
-        console.log("cchtest load succeed", audioController);
-        if (state === 0) {
-          this.coinController1 = audioController;
-        }
+const router = useRouter();
+const soundPool = new JsvSoundPool(10);
+let coinController1 = null;
+let coinController2 = null;
+let loseController1 = null;
+let loseController2 = null;
+let bgm = ref(null);
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+  switch (ev.keyCode) {
+    case 37:
+      if (loseController1) {
+        loseController1.play();
       }
-    );
-    this.soundPool.request(
-      `url(${coin})`,
-      null,
-      1,
-      (state, audioController) => {
-        if (state === 0) {
-          this.coinController2 = audioController;
-          this.coinController2.setLoop(0);
-        }
+      break;
+    case 38:
+      if (coinController1) {
+        coinController1.play();
       }
-    );
-
-    this.soundPool.request(
-      `url(${lose})`,
-      null,
-      1,
-      (state, audioController) => {
-        if (state === 0) {
-          this.loseController1 = audioController;
-        }
-      }
-    );
-    this.soundPool.request(
-      `url(${lose})`,
-      null,
-      1,
-      (state, audioController) => {
-        if (state === 0) {
-          this.loseController2 = audioController;
-        }
-      }
-    );
-  },
-  methods: {
-    _onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
+      break;
+    case 39:
+      if (loseController2) {
+        loseController2.play();
       }
-      switch (ev.keyCode) {
-        case 37:
-          if (this.loseController1) {
-            this.loseController1.play();
-          }
-          break;
-        case 38:
-          if (this.coinController1) {
-            this.coinController1.play();
-          }
-          break;
-        case 39:
-          if (this.loseController2) {
-            this.loseController2.play();
-          }
-          break;
-        case 40:
-          if (this.coinController2) {
-            this.coinController2.play();
-          }
-          break;
-        case 13:
-          this.$refs.bgm?.play();
-          break;
+      break;
+    case 40:
+      if (coinController2) {
+        coinController2.play();
       }
-      return true;
-    },
-  },
-  mounted() {
-    // 调试接口，对接JSCenter平台去掉启动图的处理
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
-  beforeUnmount() {
-    this.coinController1 = null;
-    this.coinController2 = null;
-    this.loseController1 = null;
-    this.loseController2 = null;
-    this.soundPool.destroy();
-    this.$refs.bgm?.pause();
-    this.$refs.bgm?.unload();
-  },
+      break;
+    case 13:
+      bgm.value?.play();
+      break;
+  }
+  return true;
 };
+soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
+  console.log("cchtest load succeed", audioController);
+  if (state === 0) {
+    coinController1 = audioController;
+  }
+});
+soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
+  if (state === 0) {
+    coinController2 = audioController;
+    coinController2.setLoop(0);
+  }
+});
+
+soundPool.request(`url(${lose})`, null, 1, (state, audioController) => {
+  if (state === 0) {
+    loseController1 = audioController;
+  }
+});
+soundPool.request(`url(${lose})`, null, 1, (state, audioController) => {
+  if (state === 0) {
+    loseController2 = audioController;
+  }
+});
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+onBeforeUnmount(() => {
+  coinController1 = null;
+  coinController2 = null;
+  loseController1 = null;
+  loseController2 = null;
+  soundPool.destroy();
+  bgm.value?.pause();
+  bgm.value?.unload();
+});
 </script>
 
 <template>
@@ -157,7 +128,7 @@ export default {
           `[确定]: 播放背景音乐\n[左]: 播放失败音乐1\n[右]: 播放失败音乐2\n[上]: 播放硬币音乐1\n[下]: 播放硬币音乐2`
         }}
       </div>
-      <audiotrack ref="bgm" :src="bgm" loop="loop" />
+      <audiotrack ref="bgm" :src="bgmusic" loop="loop" />
     </div>
   </jsv-focus-block>
 </template>

package/samples/SprayView/App.vue

@@ -2,11 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-13 11:19:26
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-18 14:21:18
+ * @LastEditTime: 2022-07-08 17:09:58
  * @Description: file content
 -->
 <script>
-import JsvSpray from "jsview/utils/JsViewVueWidget/JsvSpray";
+import { JsvSpray } from "jsview";
 import snow from "./assets/snow.png";
 const sprayOk = {
   type: 0,
@@ -114,7 +114,7 @@ export default {
       }
       return true;
     },
-  }
+  },
 };
 </script>
 
@@ -158,11 +158,13 @@ export default {
         </div>
       </div>
       <div :style="{ top: 20, left: 400 }">
-        <div :style="{
-          width: 40,
-          height: 40,
-          animation: 'cycle 3s linear infinite',
-        }">
+        <div
+          :style="{
+            width: 40,
+            height: 40,
+            animation: 'cycle 3s linear infinite',
+          }"
+        >
           <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayCycle" />
         </div>
         <div

package/samples/SpriteImage/App.vue

@@ -26,8 +26,7 @@
  -->
 
 <script>
-import JsvSpriteAnim from "../../utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue";
-import { SpriteController } from "../../utils/JsViewVueWidget/JsvSpriteAnim/SpriteController";
+import { SpriteController, JsvSpriteAnim } from "jsview";
 import spriteImage from "./images/egg_break.png";
 import config_json from "./images/egg_break.json";
 export default {

package/samples/TextBox/App.vue

@@ -22,120 +22,105 @@
  *    2. 变更文字内容，将触发控件重绘，但不会重新解析styles
  -->
 
- <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+ <script setup>
 import RenderLeft from "./RenderLeft.vue";
 import RenderRight from "./RenderRight.vue";
 import RenderCenter from "./RenderCenter.vue";
 import RenderOneLine from "./RenderOneLine.vue";
-import {
-  JsvTextStyleClass,
-  JsvStyleClass,
-} from "jsview/utils/JsViewVueTools/JsvStyleClass.js";
+import { JsvTextStyleClass, JsvStyleClass } from "jsview";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 
-@Options({
-  components: {
-    RenderLeft,
-    RenderRight,
-    RenderCenter,
-    RenderOneLine,
-  },
-})
-export default class App extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-
-  private offsetX: any = 0;
-  private offsetY: any = 0;
-  private onLineText = "abcdefghigk";
-  private text: any = `静夜思 --唐李白
+const router = useRouter();
+let offsetX = ref(0);
+let offsetY = ref(0);
+const onLineText = "abcdefghigk";
+const text = `静夜思 --唐李白
 床前明月光，疑是地上霜；
 举头望明月，低头思故乡。`;
-  private text_latex: String = `静夜思 --唐李白
+const text_latex = `静夜思 --唐李白
 床前\\textcolor{#FF0000}{明月光}，疑是地上霜；
 举头\\textcolor{#0000FF}{望明月}，低头思故乡。`;
-  private sLayoutSet: any = new JsvStyleClass({
-    width: 400,
-    height: 300,
-    backgroundColor: "rgba(255,255,0,0.5)",
-  });
-  private sFontSetLeft40Top: any = new JsvTextStyleClass({
-    fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft40Center: any = new JsvTextStyleClass({
-    fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft40Bottom: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "left",
-    lineHeight: "80px",
-  });
-  private sFontSetCenter40: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "center",
-    lineHeight: "40px",
-  });
-  private sFontSetCenter80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "center",
-    lineHeight: "80px",
-  });
-  private sFontSetRight40: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "right",
-    lineHeight: "80px",
-  });
-  private sFontSetRight80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "right",
-    lineHeight: "80px",
-  });
-  private sStyleToken: String = "v1.0";
-  private rootRef: any = null;
-  private moveCount: any = 0;
+const sLayoutSet = new JsvStyleClass({
+  width: 400,
+  height: 300,
+  backgroundColor: "rgba(255,255,0,0.5)",
+});
+const sFontSetLeft40Top = new JsvTextStyleClass({
+  fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
+  textAlign: "left",
+  lineHeight: "40px",
+});
+const sFontSetLeft40Center = new JsvTextStyleClass({
+  fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
+  textAlign: "left",
+  lineHeight: "40px",
+});
+const sFontSetLeft40Bottom = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "left",
+  lineHeight: "40px",
+});
+const sFontSetLeft80 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "left",
+  lineHeight: "80px",
+});
+const sFontSetCenter40 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "center",
+  lineHeight: "40px",
+});
+const sFontSetCenter80 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "center",
+  lineHeight: "80px",
+});
+const sFontSetRight40 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "right",
+  lineHeight: "80px",
+});
+const sFontSetRight80 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "right",
+  lineHeight: "80px",
+});
+const sStyleToken = "v1.0";
+const rootRef = ref(null);
+const moveCount = ref(0);
 
-  onKeyDown(ev: any) {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    }
-    switch (ev.keyCode) {
-      case 37:
-        this.offsetX += 30;
-        this.moveCount++;
-        break;
-      case 39:
-        this.offsetX -= 30;
-        this.moveCount++;
-        break;
-      case 38:
-        this.offsetY += 30;
-        this.moveCount++;
-        break;
-      case 40:
-        this.offsetY -= 30;
-        this.moveCount++;
-        break;
-    }
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
     return true;
   }
-  onFocus() {
-    console.log("TextBox getFocus");
-  }
-  onBlur() {
-    console.log("TextBox loseFocus");
+  switch (ev.keyCode) {
+    case 37:
+      offsetX.value += 30;
+      moveCount.value++;
+      break;
+    case 39:
+      offsetX.value -= 30;
+      moveCount.value++;
+      break;
+    case 38:
+      offsetY.value += 30;
+      moveCount.value++;
+      break;
+    case 40:
+      offsetY.value -= 30;
+      moveCount.value++;
+      break;
   }
-}
+  return true;
+};
+const onFocus = () => {
+  console.log("TextBox getFocus");
+};
+const onBlur = () => {
+  console.log("TextBox loseFocus");
+};
 </script>
 
  <template>

package/samples/TextBox/RenderCenter.vue

@@ -1,5 +1,5 @@
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,

package/samples/TextBox/RenderLeft.vue

@@ -1,5 +1,5 @@
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,

package/samples/TextBox/RenderOneLine.vue

@@ -1,5 +1,5 @@
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,

package/samples/TextBox/RenderRight.vue

@@ -1,5 +1,5 @@
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,

package/samples/TextShadowDemo/App.vue

@@ -2,8 +2,7 @@
 * 当TextData数据中有blur为0（不显示阴影）时，为了测试会报“StyleFormatCheck.js?058c:447 textShadow: blur shadow above 0(now=2 2 0 #00FF00)”错误
 -->
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
-import { JsvTextStyleClass } from "jsview/utils/JsViewVueTools/JsvStyleClass";
+import { JsvTextStyleClass, JsvTextBox } from "jsview";
 
 export default {
   components: {

package/samples/TextureAnimation/App.vue

@@ -1,8 +1,9 @@
 <script>
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import JsvTextureAnim from "jsview/utils/JsViewVueWidget/JsvTextureAnim";
-import { getKeyFramesGroup } from "jsview/utils/JsViewVueTools/JsvDynamicKeyFrames";
-
+import {
+  jJsvRuntimeBridge,
+  getKeyFramesGroup,
+  JsvTextureAnim,
+} from "jsview";
 import img from "./assets/php2.png";
 import swipLight from "./assets/swipLight.png";
 
@@ -319,15 +320,17 @@ export default {
     </div>
 
     <!-- 说明文字 -->
-    <div :style="{
-      left: 100,
-      top: 620,
-      width: 1920,
-      height: 200,
-      fontSize: 30,
-      color: '#000000'
-    }">
-    {{"1. 注意圆角\n2. 红色半透明的view为标准, 图片的动画需要与其一致"}}
+    <div
+      :style="{
+        left: 100,
+        top: 620,
+        width: 1920,
+        height: 200,
+        fontSize: 30,
+        color: '#000000',
+      }"
+    >
+      {{ "1. 注意圆角\n2. 红色半透明的view为标准, 图片的动画需要与其一致" }}
     </div>
   </jsv-focus-block>
 </template>

package/samples/TextureSize/App.vue

@@ -1,36 +1,26 @@
-<script>
-import { Vue } from "vue-class-component";
+<script setup>
 import jpegDemo from "./jpegDemo.jpeg";
 import pngDemo from "./pngDemo.png";
 import pngNoAlphaDemo from "./pngNoAlphaDemo.png";
 import bmpDemo from "./bmpDemo.bmp";
+import { useRouter } from "vue-router";
 
-class App extends Vue {
-  constructor(props) {
-    super(props);
+const router = useRouter();
 
-    this.jpegDemo = jpegDemo;
-    this.pngDemo = pngDemo;
-    this.pngNoAlphaDemo = pngNoAlphaDemo;
-    this.bmpDemo = bmpDemo;
-  }
-
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      if (window.JsView) {
-        window.JsView.setGlobalConfig({
-          texCache: -1,
-        });
-      }
-
-      this.$router?.go(-1); // 有router时，回退
-      return true;
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    if (window.JsView) {
+      window.JsView.setGlobalConfig({
+        texCache: -1,
+      });
     }
-    return false;
+
+    router.go(-1); // 有router时，回退
+    return true;
   }
-}
-export default App;
+  return false;
+};
 </script>
 <template>
   <jsv-focus-block autoFocus :onKeyDown="onKeyDown">

package/samples/ThrowMoveDemo/AccelerateDemo.vue

@@ -2,13 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-20 18:27:25
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:51:53
+ * @LastEditTime: 2022-07-08 14:11:05
  * @Description: file content
 -->
 <script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
 export default {
   components: {
     JsvActorMove,

package/samples/ThrowMoveDemo/LRParabolicDemo.vue

@@ -6,9 +6,8 @@
  * @Description: file content
 -->
 <script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
+
 export default {
   components: {
     JsvActorMove,

package/samples/ThrowMoveDemo/TargetDemo.vue

@@ -2,13 +2,12 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-20 18:27:25
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:40:47
+ * @LastEditTime: 2022-07-08 14:11:39
  * @Description: file content
 -->
 <script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
+
 export default {
   components: {
     JsvActorMove,

package/samples/ThrowMoveDemo/UDParabolicDemo.vue

@@ -6,9 +6,8 @@
  * @Description: file content
 -->
 <script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
+
 export default {
   components: {
     JsvActorMove,