@shijiu/jsview-vue 0.9.766 → 0.9.804

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>

package/samples/GiftRain/components/SpriteTranslate.vue

@@ -0,0 +1,72 @@
+<template>
+    <JsvActorMove :key="`translate${item.key}`" ref="translateF"
+        :style="{ left: item.left, top: item.top, width: item.width, height: item.height }" :control="_Control">
+        <div :key="`bg${item.key}`" ref="translate"
+            :style="{ backgroundImage: `url(${item.src})`, left: 0, top: 0, width: item.width, height: item.height }" />
+    </JsvActorMove>
+</template>
+
+<script setup>
+import { shallowRef, defineProps, onMounted, onBeforeMount } from 'vue';
+import { JsvActorMove, JsvActorMoveControl, createImpactTracer, createImpactCallback, createImpactAutoFroze } from 'jsview'
+//定义子ref
+let translate = shallowRef(null)
+//定义父ref
+let translateF=shallowRef(null)
+//定义props
+const props = defineProps({
+    onDestory: Function,
+    item: Object,
+    onImpactTracer: Function,
+    MoneyBag: Object
+})
+const control = new JsvActorMoveControl();
+const _Control = control;
+const item = props.item;
+//销毁方法
+const _onDestroy = () => {
+    if (props.onDestory) {
+        props.onDestory(props.item.key);
+    }
+}
+
+let sensor = null;
+
+const _InitItemEle = (item, ele) => {
+    if (ele && !item.ele) {
+        item.ele = ele;
+        if (props.MoneyBag) {
+            const giftrain_sensor = createImpactTracer(props.MoneyBag, ele, createImpactCallback(
+                () => {
+                    props.onImpactTracer(item);
+                    _onDestroy();
+                },
+            ),        //碰撞即停
+                createImpactAutoFroze(
+                    [props.MoneyBag,translateF.value.mainDiv],
+                    null
+                )
+            );
+            sensor = giftrain_sensor;
+        }
+    }
+}
+
+
+//挂载时初始化
+onMounted(() => {
+    _InitItemEle(item, translate.value)
+    _Control.moveToY(720 * 1.5 + 30, 720 * 1.5 / item.duration, () => {
+        _onDestroy();
+    });
+})
+//卸载之前释放碰撞监听者
+onBeforeMount(()=>{
+    if(sensor!=null){
+    sensor.Recycle()
+    sensor=null
+    }
+})
+</script>
+
+<style lang="scss" scoped></style>

package/samples/GridDemo/Item.vue

@@ -69,6 +69,7 @@ onMounted(() => {
       height: 50,
       fontSize: '30px',
       color: '#FFFFFF',
+      whiteSpace: 'nowrap',
     }"
   >
     {{ userData.content }}

package/samples/ImpactStop/App.vue

@@ -362,7 +362,7 @@ onBeforeUnmount(() => {
       class="text"
       :style="{ top: 528, left: 40, width: 405, height: 40 }"
     >
-      JSV下,立刻起跳会精确到边缘
+    {{ "JSV下,立刻起跳会精确到边缘" }}
     </div>
 
     <div
@@ -370,7 +370,7 @@ onBeforeUnmount(() => {
       class="text"
       :style="{ top: 625, left: 370, width: 540, height: 40 }"
     >
-      左右键调整跳跃起点，按OK键进行跳跃
+    {{ "左右键调整跳跃起点，按OK键进行跳跃" }}
     </div>
     <div
       key="DirectText"

package/samples/Marquee/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-18 18:24:18
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-10 15:29:12
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 13:43:43
  * @Description: file content
 -->
 <script setup>
@@ -168,7 +168,6 @@ onMounted(() => {
           lineHeight: 70,
           fontSize: 50,
           color: '#000000',
-          direction: 'rtl',
         }"
         text="انجليزي"
         :slideSpeed="slideSpeed"
@@ -243,5 +242,37 @@ onMounted(() => {
         超长rtl文字
       </div>
     </div>
+    <div
+      :style="{
+        left: 50,
+        top: 610,
+        width: width,
+        height: height,
+        backgroundColor: '#FFFFFF',
+      }"
+    >
+      <jsv-marquee
+        :style="{
+          width,
+          height,
+          lineHeight: 70,
+          fontSize: 50,
+          color: '#000000',
+        }"
+        text="测试文字"
+        :forceSlide="true"
+        :slideSpeed="slideSpeed"
+        slideDirection="ets"
+      />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        反向滚动示例
+      </div>
+    </div>
   </jsv-focus-block>
 </template>

package/samples/MetroWidgetDemos/PingPong/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-12-21 15:36:29
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:08:21
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 16:28:50
  * @Description: file content
 -->
 <script>
@@ -10,12 +10,18 @@ import ViewSwiper from "./ViewSwiper.vue";
 import AppTab from "./AppTab.vue";
 import { reactive } from "vue";
 import { EdgeDirection } from "jsview";
-import { advanceMetroWidget, randomColor } from "../data.js";
 
 const pageList = [];
 const tabData = [];
 
-for (let i = 0; i < 5; i++) {
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+for (let i = 0; i < 10; ++i) {
   tabData.push({
     width: 100,
     height: 50,
@@ -23,15 +29,20 @@ for (let i = 0; i < 5; i++) {
     content: "Tab_" + i,
     color: randomColor(),
   });
-
-  let data = JSON.parse(JSON.stringify(advanceMetroWidget));
-  data.forEach((item) => {
-    item.name = "testPage_" + i + "-" + item.name;
-  });
+  const pageData = [];
+  for (let j = 0; j < 10; ++j) {
+    pageData.push({
+      width: 500,
+      height: 170,
+      name: "testPage_" + i + "-" + "widget_" + j,
+      marginBottom: 10,
+      index: j,
+    });
+  }
   pageList.push({
     width: 600,
     height: 600,
-    data: data,
+    data: pageData,
     name: "testPage-" + i,
   });
 }
@@ -112,7 +123,7 @@ export default {
       <app-tab
         :data="tabData"
         :name="appTabName"
-        :layout="{ width: 1920, height: 100 }"
+        :layout="{ width: 600, height: 100 }"
         :onEdge="$_app_tabOnEdge"
         :style="{
           top: 15,

package/samples/MetroWidgetDemos/PingPong/AppPage.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:38
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:04:31
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 16:27:44
  * @Description: file content
 -->
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
-import WidgetItem from "../WidgetItem.vue";
+import WidgetItem from "./WidgetItem.vue";
 import { ref, shallowRef, watch, onBeforeUnmount } from "vue";
 
 const props = defineProps({

package/samples/MetroWidgetDemos/{Item.vue → PingPong/Item.vue}

@@ -1,8 +1,6 @@
 <!--
  * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-12-02 16:12:43
+ * @Date: 2023-03-09 16:28:25
  * @Description: file content
 -->
 <script setup>

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:30:33
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:05:07
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 16:00:38
  * @Description: file content
 -->
 <script>
 import AppPage from "./AppPage.vue";
 import { getKeyFramesGroup } from "jsview";
-import { reactive, ref, shallowRef } from "vue";
+import { reactive } from "vue";
 
 export default {
   components: {

package/samples/MetroWidgetDemos/{WidgetItem.vue → PingPong/WidgetItem.vue}

@@ -1,3 +1,8 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 16:27:38
+ * @Description: file content
+-->
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
@@ -43,7 +48,7 @@ const onFocus = (rect) => {
 };
 const onBlur = () => {
   //onBlur时需要返还焦点给父MetroWidget
-  mwRef.value?.getFocusBlockRef().returnFocusToParent();
+  focusHub.returnFocusToParent();
 };
 
 props.onAction.register("onFocus", onFocus);

package/samples/MetroWidgetDemos/basic/App.vue

@@ -0,0 +1,162 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const provideData = () => {
+  const data = [
+    {
+      width: 90,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: 0,
+    },
+    {
+      width: 90,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: 1,
+    },
+    {
+      width: 90,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: 2,
+    },
+    {
+      width: 190,
+      height: 190,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: 3,
+    },
+    {
+      width: 90,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: 4,
+    },
+    {
+      width: 90,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: 5,
+    },
+  ];
+
+  for (let i = 0; i < 5; i++) {
+    data.push(
+      {
+        width: 90,
+        height: 190,
+        marginRight: 10,
+        marginBottom: 10,
+        color: randomColor(),
+        content: 6 + i * 2,
+      },
+      {
+        width: 90,
+        height: 90,
+        marginRight: 10,
+        marginBottom: 10,
+        color: randomColor(),
+        content: 6 + i * 2 + 1,
+      }
+    );
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  console.log(TAG, "onEdge", edgeInfo);
+};
+
+const onFocus = () => {
+  console.log(TAG, "onFocus");
+};
+
+const onBlur = () => {
+  console.log(TAG, "onBlur");
+};
+
+const onScroll = (start, range, totalSize) => {
+  console.log(TAG, "onScroll", start, range, totalSize);
+};
+
+const widgetLayout = {
+  left: 50,
+  top: 50,
+  width: 500,
+  height: 300,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <metro-widget
+    name="mainMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+    :onScroll="onScroll"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>