@shijiu/jsview-vue 0.9.783 → 0.9.804

package/dom/target_core_revision.js

@@ -3,11 +3,11 @@
  */
 
 const TargetRevision = {
-  "CoreRevision": 1021277,
-  "CoreRevisionAndBranch": "1021277",
-  "JseRevision": "1.0.830",
+  "CoreRevision": 1021336,
+  "CoreRevisionAndBranch": "1021336",
+  "JseRevision": "1.0.882",
   "JseUrl":
-    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r830.jsv.9e271859.js"
+    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_react_r882.jsv.d4cae49e.js"
 };
 
 // 不要用export default，update-env脚本不能解析

package/package.json

@@ -7,7 +7,7 @@
     "./dom/*.js",
     "./loader/*.js"
   ],
-  "version": "0.9.783",
+  "version": "0.9.804",
   "bin": {
     "jsview-post-build": "./scripts/jsview-post-build.js",
     "jsview-post-install": "./scripts/jsview-post-install.js",

package/samples/Basic/components/anim/AnimTransition.vue

@@ -105,7 +105,7 @@ onBeforeUnmount(() => {
           transformOrigin: state.transformOrigin,
         }"
       >
-        移动缩放旋转
+        {{"移动缩放旋转"}}
       </div>
       <div
         class="content-font"
@@ -117,7 +117,7 @@ onBeforeUnmount(() => {
           transform: state.transformTranslate,
         }"
       >
-        移动
+      {{"移动"}}
       </div>
       <div
         class="content-font"
@@ -130,7 +130,7 @@ onBeforeUnmount(() => {
           transform: state.transformScale,
         }"
       >
-        缩放
+      {{"缩放"}}
       </div>
       <div
         class="content-font"
@@ -143,7 +143,7 @@ onBeforeUnmount(() => {
           transform: state.transformRotate,
         }"
       >
-        旋转
+      {{"旋转"}}
       </div>
     </div>
   </div>

package/samples/DemoHomepage/router.js

@@ -181,6 +181,11 @@ let routeList = [
     component: () =>
       import("jsview/samples/FocusBlockDemos/AutoFocus/App"),
   },
+  {
+    name:"红包雨",
+    path:"/feature/GiftRain",
+    component:()=>import("jsview/samples/GiftRain/App"),
+  }
 ];
 
 //添加MetroWidget demo

package/samples/FilterDemo/VideoLayer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { JsvVideo } from "jsview";
+import  JsvPlayer  from "jsview/utils/JsViewPlugin/JsvPlayer";
 
 const props = defineProps({
   top: {
@@ -47,7 +47,7 @@ const video_url =
       animation: 'opacityVideoDemo_CompositeOpacity 3s infinite',
     }"
   >
-    <jsv-video
+    <JsvPlayer
       :src="video_url"
       autoplay="autoplay"
       loop="loop"

package/samples/FocusBlockDemos/AutoFocus/App.vue

@@ -15,11 +15,11 @@
   
 
 <script setup>
-import { shallowRef, watch, onMounted } from "vue"
+import { shallowRef, watch, onMounted, onUnmounted } from "vue"
 import { useFocusHub, jJsvRuntimeBridge } from "jsview"
 import PlaneBlock from "./PlaneBlock.vue"
 import DialogBlock from "./DialogBlock.vue"
-import { CreateDialogControl } from "./DialogContorls.js"
+import { CreateDialogControl, ReleaseDialogControl } from "./DialogContorls.js"
 import FocusNames from "./FocusNamesDefine.js"
 
 // 获取 FocusHub 操作句柄
@@ -37,6 +37,11 @@ watch(showDialog, ()=>{
     }
 })
 
+onUnmounted(()=>{
+    // 退出时释放control全局引用
+    ReleaseDialogControl();
+})
+
 onMounted(()=>{
   // 启动后先让主区域获得焦点
   focusHub.setFocus(FocusNames.MainPlane);

package/samples/FocusBlockDemos/AutoFocus/DialogContorls.js

@@ -14,6 +14,10 @@ function CreateDialogControl(switcherRef) {
     return dialogConfigRef;
 }
 
+function ReleaseDialogControl() {
+    dialogConfigRef = null;
+}
+
 function ShowDialog(message) {
     if (dialogConfigRef) {
         console.log("通过showDialog开启对话框");
@@ -36,6 +40,7 @@ function GetDialogControl() {
 
 export {
     CreateDialogControl,
+    ReleaseDialogControl,
     ShowDialog,
     CloseDialog,
     GetDialogControl

package/samples/FocusBlockDemos/AutoFocus/PlaneBlock.vue

@@ -38,7 +38,7 @@ const onKeyDownFunc = (ev)=>{
 
 const leftRightFunc = (action)=>{
   if (action == "left") {
-    if (lastIndex >= 0) {
+    if (lastIndex > 0) {
       lastIndex--;
       console.log(`父节点 ${planeName} 收到left指令 切换子节点到"${ChildBlockNames[lastIndex]}`);
       focusHub.setFocus(ChildBlockNames[lastIndex]);

package/samples/FocusBlockDemos/ProgressiveFocusControl/App.vue

@@ -44,10 +44,16 @@ const onKeyDownFunc = (ev)=>{
   let keyConsumed = true;
   switch(ev.keyCode) {
     case DefaultKeyCodeMap.Up:
-      focusHub.setFocus("UpPlane");
+      // 通过第二个参数 焦点pass to child,回避掉对焦点链上父节点设置focus会使使其子焦点失焦的问题
+      // pass to child功能:
+      // 1. 当子焦点在焦点链上时,对父节点进行setFocus操作,不会让子焦点失焦(不会抢子节点的焦点状态)
+      // 2. 当父节点从失焦状态，通过setFocus获焦时，若此父节点上一次失焦时，其子节点有焦点状态，
+      //    则此次父节点获焦也会让这个子焦点获焦
+      focusHub.setFocus("UpPlane", true);
       break;
     case DefaultKeyCodeMap.Down:
-      focusHub.setFocus("DownPlane");
+      // 同UpPlane, 设置第二个参数 焦点pass to child, 回避掉对焦点链上父节点设置focus会使使其子焦点失焦的问题
+      focusHub.setFocus("DownPlane", true);
       break;
     default:
       keyConsumed = false;

package/samples/GiftRain/App.vue

@@ -0,0 +1,248 @@
+<template>
+  <jsv-focus-block autoFocus ref="App" :onAction="actionDefines">
+    <div
+      :style="{ width: 1920, height: 1080, overflow: 'hidden', transform: 'scale3d(0.67,0.67,1)', left: -220 * 1.5 + 8, top: -170 - 8 }">
+      <JsvPreload :preloadList="preload_info"></JsvPreload>
+      <div
+        :style="{ backgroundImage: bg, width: 1920, height: 1080, overflow: 'hidden' }">
+        <Score :score="score"></Score>
+        <JsvActorMove key="JsvSpriteTranslate" :style="{
+          top: 476 * 1.5,
+          left: 220 * 1.5,
+          width: 194 * 1.5,
+          height: 244 * 1.5,
+        }" :control=_TranslateControl>
+          <div key="kimi" :style="{
+            top: 0,
+            left: 0,
+            width: 194 * 1.5,
+            height: 244 * 1.5,
+            backgroundImage: kimi,
+          }">
+            <div key="MoneyBag" ref="moneyBag" :style="{
+              top: 22 * 1.3,
+              left: 7,
+              width: 180 * 1.5,
+              height: 100 * 1.5,
+              backgroundColor: 'rgba(0,0,0,0)'
+            }"></div>
+            <div :style="{
+              top: 0,
+              left: 40 * 1.5,
+              width: 81 * 1.5,
+              height: 74 * 1.5,
+              visibility: scoreMinAnim !== null ? 'visible' : 'hidden',
+              backgroundImage: min_score_image,
+              animation: scoreMinAnim,
+            }" @animationend=_ScoreMinAnimationEnd />
+            <div :style="{
+              top: 0,
+              left: 40 * 1.5,
+              width: 81 * 1.5,
+              height: 74 * 1.5,
+              visibility: scoreAddAnim !== null ? 'visible' : 'hidden',
+              backgroundImage: add_score_image,
+              animation: scoreAddAnim,
+            }" @animationend=_ScoreAddAnimationEnd />
+          </div>
+        </JsvActorMove>
+        <RedPacket :MoneyBag="moneyBag" :onImpactTracer="_onImpactTracer" :_ScoreMinAnimationEnd="_ScoreMinAnimationEnd"
+          :_ScoreAddAnimationEnd="_ScoreAddAnimationEnd" />
+
+      </div>
+      <!-- 音频 -->
+      <JsvAudio key="AudioBg" :src="_AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
+
+      <JsvAudio v-if="!_DisableEffectSound" :onRef="onRef2" :loop="true" />
+
+
+    </div>
+  </jsv-focus-block>
+</template>
+<script setup>
+/* eslint-disable */
+import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo } from "jsview";
+import JsvAudio, { globalLoadJsvAudioPlugin } from "jsview/utils/JsViewPlugin/JsvAudio"
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import Score from "./components/Score.vue";
+import RedPacket from "./components/RedPacket.vue";
+import Sound from "./common/Sound.js"
+//音频Sound
+const MySound = new Sound()
+//加载音频插件  jsview/utils/JsViewPlugin/JsvAudio
+globalLoadJsvAudioPlugin((status) => {
+  console.log("Audio plugin load status", status);
+});
+//预加载信息
+const kimi_normal = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png';
+const kimi_smile = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png';
+const kimi_boom = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png';
+const red_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
+const bigRed_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png'
+const boom_image = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png'
+const bg = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bg.jpg'
+const preload_info = [
+  buildPreloadInfo(kimi_normal),
+  buildPreloadInfo(kimi_smile),
+  buildPreloadInfo(kimi_boom),
+  buildPreloadInfo(red_packet),
+  buildPreloadInfo(bigRed_packet),
+  buildPreloadInfo(boom_image),
+  buildPreloadInfo(bg)
+];
+//定义不需要响应式的变量
+let _CurrentRain = null;
+//音频ref
+let _Audio = null;
+let _AudioBgUrl = "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewAudio/MiniGameBackgroundMusic-redpack.mp3";
+//背景音频ref
+let _BgAudio = null;
+let _IsRunning = false;
+let _DisableEffectSound = true;
+let _TranslateControl = new JsvActorMoveControl()
+//定义需要响应式的变量
+let kimi = shallowRef("http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png")
+let score = shallowRef(0)
+let min_score_image = shallowRef(null)
+let add_score_image = shallowRef(null)
+let scoreAddAnim = shallowRef(null)
+let scoreMinAnim = shallowRef(null)
+let moneyBag = shallowRef(null)
+
+//定义扣分结束动画
+const _ScoreAddAnimationEnd = (event) => {
+  // event.stopPropagation();
+  scoreAddAnim.value = null
+  console.log(" _ScoreAddAnimationEnd event:", event);
+}
+//定义加分结束动画
+const _ScoreMinAnimationEnd = (event) => {
+  // event.stopPropagation();
+  scoreMinAnim.value = null
+  console.log(" _ScoreMinAnimationEnd event:", event);
+}
+
+//定义碰撞函数
+const _onImpactTracer = (rain) => {
+  if (rain !== null && rain !== _CurrentRain) {
+    _CurrentRain = rain;
+    console.log("_onImpactTracer rain:", rain);
+    switch (rain.type) {
+      case 0:
+        scoreAddAnim.value = "scoreUp 0.2s";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png";
+        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add1.png";
+        score.value += 1;
+        MySound.playGetSound()
+        break;
+      case 1:
+        scoreAddAnim.value = "scoreUp 0.2s";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png";
+        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add5.png";
+        MySound.playGetSound()
+        score.value += 5;
+        break;
+      case 2:
+        scoreMinAnim.value = "scoreUp 0.2s";
+        min_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/min1.png";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png";
+        score.value -= 1;
+        MySound.playBoomSound()
+        if (score.value < 0) {
+          score.value = 0;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+}
+//键盘松开时应该暂停动作
+const onKeyUp = (ev) => {
+  console.log("onKeyUp in : ", ev);
+  if (ev.keyCode === 37 || ev.keyCode === 39) {
+    _IsRunning = false;
+    _TranslateControl.pause((x, y) => {
+      console.log(`_TranslateControl pause x:${x}`);
+    });
+    return true;
+  }
+
+  return false;
+}
+const router = useRouter();
+//定义键盘按下
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1)
+  } else if (ev.keyCode === 37) {
+    console.log(" ev.keyCode === 37 ");
+    if (!_IsRunning) {
+      _TranslateControl.moveToX(0, 400 * 1.5, null);
+      _IsRunning = true;
+    }
+  } else if (ev.keyCode === 39) {
+    console.log(" ev.keyCode === 39");
+    if (!_IsRunning) {
+      _TranslateControl.moveToX((1280 - 220 - 194) * 1.5, 400 * 1.5, null);
+      _IsRunning = true;
+    }
+  }
+  return true;
+}
+
+//注册
+const actionDefines = {
+  onKeyDown,
+  onKeyUp
+}
+//定义音频回调
+const onRef1 = (ref) => {
+  _BgAudio = ref
+}
+const onRef2 = (ref) => {
+  _Audio = ref
+}
+const audioOnLoad = () => {
+  console.log("audio on load")
+  _BgAudio.play()
+}
+onMounted(() => {
+  //初始化音效
+  MySound.initSound();
+  //摘画布
+  jJsvRuntimeBridge.notifyPageLoaded();
+  window.BgAudio = _BgAudio;
+})
+
+//卸载之前摧毁音效
+onBeforeUnmount(() => {
+  MySound.destroy();
+});
+</script>
+  
+<style scoped>
+@keyframes scoreUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, -20, 0);
+  }
+}
+
+@keyframes rainDown {
+  from {
+    transform: translate3d(0, -780, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+;
+;
+</style>

package/samples/GiftRain/common/Sound.js

@@ -0,0 +1,48 @@
+import { JsvSoundPool } from "jsview";
+import getAudio from "../audio/get.mp3";
+import boomAudio from "../audio/boom.mp3";
+
+class Sound {
+    initSound() {
+       this.soundPool = new JsvSoundPool(10);
+       this.soundPool.request(
+           `url(${getAudio})`,
+           null,
+           1,
+           (state, audioController) => {
+               console.log("load get audio ", state)
+               if (state === 0) {
+                   Sound._AudioController1 = audioController;
+               }
+           }
+       );
+       this.soundPool.request(
+           `url(${boomAudio})`,
+           null,
+           1,
+           (state, audioController) => {
+               console.log("load boom audio ", state)
+               if (state === 0) {
+                   Sound._AudioController2 = audioController;
+               }
+           }
+       );
+   }
+
+    playGetSound() {
+       if (Sound._AudioController1) {
+           Sound._AudioController1.play();
+       }
+   }
+
+   playBoomSound() {
+       if (Sound._AudioController2) {
+           Sound._AudioController2.play();
+       }
+   }
+   destroy () {
+       this.soundPool.destroy()
+   }
+
+}
+export default Sound ;

package/samples/GiftRain/components/RedPacket.vue

@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <div key="timer" :style="{
+            width: 140*1.5,
+            height: 140*1.5,
+            backgroundImage: _ScoreBg,
+            top: 40*1.5,
+            left: 40*1.5,
+            textAlign: 'center',
+            lineHeight: 140*1.5,
+            color: 'rgba(255,0,0,1.0)',
+            fontSize: 72*1.5
+        }">{{ timer }}</div>
+        <SpriteTranslate v-for="(item, index) in itemList" :MoneyBag="props.MoneyBag" :onImpactTracer="onImpactTracer"
+            :onDestory="_RemoveItem" :key="`spritetranslate${item.key}`" :item=item />
+</div>
+</template>
+
+<script setup>
+import { shallowRef, defineProps, onMounted, onBeforeUnmount } from 'vue';
+import SpriteTranslate from './SpriteTranslate.vue';
+//定义props
+const props = defineProps({
+    onImpactTracer: Function,
+    MoneyBag: Object,
+    _ScoreMinAnimationEnd:Function,
+    _ScoreAddAnimationEnd:Function
+})
+let _Index = 0;
+// 随机生成列表
+const _RedImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
+const _BigRedImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png';
+const _BoomImage = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png';
+const _ScoreBg = "http://oss.image.qcast.cn/demo_images/red_packet_rain/score_bg.png";
+let itemList =shallowRef([])
+let timer = shallowRef(60)
+const onImpactTracer = props.onImpactTracer;
+let _TimerOutId = null;
+let _GameTimerID = null;
+let _IsRunning = shallowRef(false);
+
+//定义随机加入的item
+const addRandomItemList = () => {
+    const total_num = 1;
+    let ret_obj = "";
+    for (let i = 0; i < total_num; i++) {
+        const random_index = Math.floor(Math.random() * 3);
+        const duration = 2 + Math.floor(Math.random() * 2);
+        const index = ++_Index;
+        const left = 300 * 1.5 + Math.floor(Math.random() * (1280 - 500) * 1.5);
+        const top = -20 * 1.5;
+
+        switch (random_index) {
+            case 0:
+                ret_obj = {
+                    key: index.toString(), type: 0, src: _RedImage, left, top, width: 87, height: 118, duration,
+                };
+                break;
+            case 1:
+                ret_obj = {
+                    key: index.toString(), type: 1, src: _BigRedImage, left, top, width: 210, height: 114, duration,
+                };
+                break;
+            case 2:
+                ret_obj = {
+                    key: index.toString(), type: 2, src: _BoomImage, left, top, width: 100, height: 116, duration
+                };
+                break;
+            default:
+                break;
+        }
+
+        console.log("initRandomItemList ret_obj:", ret_obj);
+        itemList.value.push(ret_obj);
+    }
+}
+// addRandomItemList();
+
+
+
+const startTimer = () => {
+    _TimerOutId = setInterval(() => {
+        console.log('timmmm', timer.value);
+        timer.value = timer.value - 1;
+        if (timer.value === 0) {
+            stopGame();
+            itemList.value = []
+        }
+    }, 1000);
+}
+
+const startGame = () => {
+    console.log("startGame ");
+    _IsRunning.value = true;
+    _Refresh();
+}
+
+const stopGame = () => {
+    console.log("stopGame ");
+    _IsRunning.value = false;
+    if (_TimerOutId !== null) {
+        clearInterval(_TimerOutId);
+        _TimerOutId = null;
+    }
+    //停止游戏时动画也应该停止
+    props._ScoreMinAnimationEnd()
+    props._ScoreAddAnimationEnd()
+}
+
+const _RemoveItem = (key) => {
+    console.log("_RemoveItem in itemList.length:", itemList.value.length);
+    for (let i = 0; i < itemList.value.length; i++) {
+        if (itemList.value[i].key === key) {
+            const item = itemList.value[i];
+            if (item.sensor) {
+                item.sensor.Recycle();
+            }
+            console.log("_RemoveItem key:", itemList.value[i].key);
+            itemList.value.splice(i, 1);
+            break;
+        }
+    }
+    console.log("_RemoveItem out itemList.length:", itemList.value.length);
+}
+
+const _Refresh = () => {
+    if (_IsRunning.value === false) {
+        return;
+    }
+    const delay = 500;// Math.floor(Math.random()*600);
+    _GameTimerID = setTimeout(() => {
+        if (_IsRunning.value === true) {
+            addRandomItemList();
+            _Refresh();
+        }
+    }, delay);
+}
+
+
+onMounted(() => {
+    console.log("render itemList.length:", itemList.value.length);
+    startGame();
+    startTimer();
+})
+
+onBeforeUnmount(() => {
+    if (_GameTimerID !== null) {
+        clearInterval(_GameTimerID);
+        _GameTimerID = null;
+    }
+
+    if (_TimerOutId !== null) {
+        clearInterval(_TimerOutId);
+        _TimerOutId = null;
+    }
+
+    stopGame();
+})
+</script>
+
+<style scoped></style>

package/samples/GiftRain/components/Score.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <div key="progress-container" :style="{
+            width: 40 * 1.5,
+            height: 400 * 1.5,
+            top: 200 * 1.5,
+            left: (40 + 70 - 20) * 1.5,
+            backgroundColor: 'rgba(255,255,255,0.2)'
+        }">
+            <div key="progress" :style="{
+                top: process_top * 1.5,
+                width: 40 * 1.5,
+                height: score_height * 1.5,
+                backgroundColor: '#ffd050'
+            }">
+            </div>
+        </div>
+        <div key="score" :style="{
+            width: 140 * 1.5,
+            height: 40 * 1.5,
+            color: '#ffd050',
+            fontSize: 24 * 1.5,
+            top: 620 * 1.5,
+            left: 40 * 1.5,
+            lineHeight: 40 * 1.5,
+            textOverflow: 'clip',
+            textAlign: 'center'
+        }">{{ `分数:${score}` }}</div>
+    </div>
+</template>
+
+<script setup type="text/javascript">
+/* eslint-disable */
+import { shallowRef, defineProps, watch} from 'vue';
+//定义props
+const props = defineProps({
+    score: Number
+})
+//定义得分
+let score_height = shallowRef(0);
+// let score = toRef(props, 'score');
+let process_top = shallowRef(0)
+
+
+//监听分数
+watch(props, (n, o) => {
+    score_height.value = (props.score * 400 / 200)
+    if (score_height.value > 400) {
+        score_height.value = 400;
+    }
+    process_top.value = 400 - score_height.value;
+})
+</script>
+
+<style scoped></style>