@shijiu/jsview-vue-samples 2.1.25 → 2.1.200

package/MindMap/Item.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  handler: Object,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  console.log("item onfocus", props.data.id)
+  focused.value = true;
+};
+const onBlur = () => {
+  console.log("item onblur", props.data.id)
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      backgroundColor: focused ? '#aa0000aa' : '#007788aa',
+    }"
+  >
+    {{ data.id }}
+  </div>
+</template>

package/MindMap/data.js

@@ -0,0 +1,86 @@
+let id = 0;
+const n = (left, top) => {
+  return {
+    left,
+    top,
+    width: 50,
+    height: 50,
+    id: id++,
+  };
+};
+export const data = {
+  ...n(400, 500),
+  moveType: "star",
+  children: [
+    {
+      ...n(300, 500),
+      children: [
+        {
+          ...n(200, 400)
+        },
+        {
+          ...n(200, 600),
+          children: [
+            {
+              ...n(100, 600,)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      ...n(400, 400),
+      children: [
+        {
+          ...n(400, 300),
+          children: [
+            {
+              ...n(300, 200),
+              children: {
+                ...n(300, 100)
+              }
+            },
+            {
+              ...n(400, 200)
+            },
+            {
+              ...n(500, 200)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      ...n(500, 500),
+      children: [
+        {
+          ...n(600, 400),
+          children: [
+            {
+              ...n(700, 400)
+            }
+          ]
+        },
+        {
+          ...n(600, 500)
+        },
+        {
+          ...n(600, 600)
+        },
+      ]
+    },
+    {
+      ...n(400, 600),
+      children: [
+        {
+          ...n(400, 700),
+          children: [
+            {
+              ...n(400, 800)
+            }
+          ]
+        }
+      ]
+    },
+  ]
+}

package/Preload/App.vue

@@ -11,14 +11,14 @@ import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
 import { data } from "./data.js";
 import Item from "./Item.vue";
-import { ref } from "vue";
+import { ref,reactive } from "vue";
 import { useRouter } from "vue-router";
 
 const name = "/preload";
 const focusHub = useFocusHub();
 const text = ref("");
 let preloadInfo = ref([]);
-let downloadInfo = ref([]);
+let downloadInfo = reactive([]);
 
 const router = useRouter();
 
@@ -37,9 +37,10 @@ const _onDownloadDone = (urls, extra) => {
 
 const _measures = () => {
   return {
-    width: 180,
+    width: 240,
     height: 90,
     focusable: true,
+    marginRight: 20
   };
 };
 
@@ -54,22 +55,16 @@ const _onFocus = () => {
   focusHub.setFocus(name);
 };
 
-setTimeout(() => {
+setTimeout(() => { 
   console.log("change data")
-  const preload = []
   for (const item of data) {
-    preload.push(buildPreloadInfo(item.url));
-    preload.push(buildPreloadInfo(item.focusUrl));
+    preloadInfo.value.push(buildPreloadInfo(item.url));
+    preloadInfo.value.push(buildPreloadInfo(item.focusUrl));
   }
-  preload.push(null); // 测试item为null的加载
-  preloadInfo.value = preload;
-
-  const download = [
-    buildDownloadInfo(awesome, null, true),
-    buildDownloadInfo(cat, null, true),
-    buildDownloadInfo(null), // 测试URL为null的加载
-  ];
-  downloadInfo.value = download;
+  preloadInfo.value.push(null,null,buildPreloadInfo(null)); // 测试item为null的加载
+  downloadInfo.push(buildDownloadInfo(awesome, null, true),buildDownloadInfo(cat, null, true))
+  //测试null
+  downloadInfo.push(buildDownloadInfo(null),buildDownloadInfo(null),buildDownloadInfo(cat, null, true),null,null,null)
 }, 1000);
 </script>
 
@@ -101,10 +96,22 @@ setTimeout(() => {
     >
       预加载后，图片(按钮焦点切换)切换不闪屏
     </div>
-    <div :style="{ top: 200, left: 300 }">
+    <div 
+       :style="{
+         textAlign: 'center',
+         fontSize: 30,
+         lineHeight: 50,
+         left: 100,
+         top: 120,
+         width: 1280 - 200,
+         height: 50,
+       }">
+        按左右键移动
+      </div>
+    <div :style="{ top: 200, left: 260 }">
       <metro-widget
         :name="name"
-        :width="540"
+        :width="760"
         :height="90"
         :direction="HORIZONTAL"
         :data="data"

package/Preload/Item.vue

@@ -41,7 +41,7 @@ watch(focus, () => {
     <img
       :src="imgUrl"
       :style="{
-        width: 166,
+        width: 240,
         height: 90,
       }"
     />

package/Preload/data.js

@@ -1,22 +1,22 @@
-import rank from "./images/rank.png";
-import rankF from "./images/rank_focus.png";
-import rule from "./images/rule.png";
-import ruleF from "./images/rule_focus.png";
-import start from "./images/start.png";
-import startF from "./images/start_focus.png";
+import redBtn from "./images/bg_btn.png";
+import redBtnF from "./images/bg_btn_focus.png";
+import blueBtn from "./images/btn_cancle.png";
+import blueBtnF from "./images/btn_ok.png";
+import greenBtn from "./images/tease_lock.png";
+import greenBtnF from "./images/tease.png";
 
 const data = [
     {
-        url: rank,
-        focusUrl: rankF,
+        url: redBtn,
+        focusUrl: redBtnF,
     },
     {
-        url: start,
-        focusUrl: startF
+        url: blueBtn,
+        focusUrl: blueBtnF
     },
     {
-        url: rule,
-        focusUrl: ruleF,
+        url: greenBtn,
+        focusUrl: greenBtnF,
     },
 ];
 

package/SecTorTest/App.vue

@@ -0,0 +1,106 @@
+<template>
+  <jsv-focus-block autoFocus :onAction="actionDefines">
+    <div class="bgStyle">
+      <JsvPieChart
+        :centerPosition="center"
+        :radius="360"
+        :data="data"
+      ></JsvPieChart>
+      <!-- 文字说明 -->
+      <div class="text">
+        {{
+          "图为圆心在(400,400)位置，半径为360的饼图。"
+        }}
+      </div>
+      <!-- 操作说明 -->
+      <div class="text1">
+        {{ "按上方向键随机板块增加百分比，按下方向键随机减小板块百分比" }}
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { JsvPieChart } from "jsview";
+const center = {
+  x: 400,
+  y: 400,
+};
+
+let data = reactive([
+  {
+    percent: 23.33,
+    color: "#0000FF",
+  },
+  {
+    percent: 24.67,
+    color: "#FFFF00",
+  },
+  {
+    percent: 15,
+    color: "#FF12FF",
+  },
+  {
+    percent: 13,
+    color: "#FF1213",
+  },
+  {
+    percent: 24,
+    color: "#6EFFE1",
+  },
+]);
+
+// 生成随机整数
+const randomNumber = () => {
+  const randomInt = Math.floor(Math.random() * 4) + 1;
+  return randomInt;
+};
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 38) {
+    let total = 0;
+    for (let i = 0; i < data.length - 1; i++) {
+      data[i].percent += randomNumber();
+      total += data[i].percent;
+    }
+    data[4].percent = 100 - total;
+  } else if (ev.keyCode === 40) {
+    // 随机减;
+    let total = 0;
+    for (let i = 0; i < data.length - 1; i++) {
+      data[i].percent -= randomNumber();
+      total += data[i].percent;
+    }
+    data[4].percent = 100 - total;
+  }
+};
+let actionDefines = {
+  onKeyDown,
+};
+</script>
+
+<style lang="css" scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.text {
+  width: 280;
+  height: 60;
+  left: 700;
+  top: 300;
+  background-color: rgba(255, 255, 255, 0.5);
+  font-size: 24;
+  line-height: 28;
+}
+.text1 {
+  width: 500;
+  height: 60;
+  left: 700;
+  top: 440;
+  background-color: rgba(255, 255, 255, 0.5);
+  font-size: 24;
+  line-height: 28;
+}
+</style>

package/TextureStoreTest/App.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="bgStyle">
+    <!-- 半圆 -->
+    <div
+      class="logo-bg"
+      :style="{
+        left: 200,
+      }"
+    >
+      <img :src="`jsvtexturestore://${sourceId}`" class="logo-size" :style="{
+        left:50,
+        top:50
+      }" />
+    </div>
+    <!-- 圆框点九 -->
+    <div
+      class="logo-bg"
+      :style="{
+        left: 700,
+        top: 0,
+      }"
+    >
+      <div
+        class="logo-size"
+        :style="{
+          borderRadius: 60,
+          left: 50,
+          backgroundColor: '#FF1213',
+          top: 50,
+        }"
+      >
+        <JsvNinePatch
+          :style="{
+            left: 0,
+            top: 0,
+            width: 200,
+            height: 200,
+          }"
+          :imageUrl="`jsvtexturestore://${sourceId2}`"
+          :imageWidth="136"
+          :centerWidth="1"
+          :imageDspWidth="136"
+          :borderOutset="8"
+          :animTime="0"
+        />
+      </div>
+    </div>
+    <!-- 方框点九 -->
+    <div class="logo-bg" :style="{ left: 200, top: 360 }">
+      <div
+        class="logo-size"
+        :style="{
+          left: 50,
+          backgroundColor: '#FF1213',
+          top: 50,
+        }"
+      >
+        <JsvNinePatch
+          :style="{
+            left: 0,
+            top: 0,
+            width: 200,
+            height: 200,
+          }"
+          :imageUrl="`jsvtexturestore://${sourceId3}`"
+          :imageWidth="136"
+          :centerWidth="1"
+          :imageDspWidth="136"
+          :borderOutset="6"
+          :animTime="0"
+        />
+      </div>
+    </div>
+    <!-- 文字说明 -->
+    <div class="text" :style="{top:320,left:200}">{{ '半圆' }}</div>
+    <div class="text" :style="{top:320,left:700}">{{ '圆角NinePatch' }}</div>
+    <div class="text" :style="{top:680,left:200}">{{ '直角NinePatch' }}</div>
+  </div>
+</template>
+
+<script setup>
+import JsvNinePatch from "@shijiu/jsview-vue/utils/JsViewVueWidget/JsvNinePatch.vue";
+import { shallowRef, onBeforeUnmount } from "vue";
+import { JsvTextureStoreApi } from "jsview";
+let canvasRef;
+let canvasRef2;
+let canvasRef3;
+let sourceId = shallowRef("");
+let sourceId2 = shallowRef("");
+let sourceId3 = shallowRef("");
+let bitmap = {
+  width: 150,
+  height: 150,
+};
+let bitmap2 = {
+  width: 136,
+  height: 136,
+};
+let bitmap3 = {
+  width: 136,
+  height: 136,
+};
+canvasRef = JsvTextureStoreApi.canvasTexture(bitmap.width, bitmap.height);
+canvasRef2 = JsvTextureStoreApi.canvasTexture(bitmap2.width, bitmap2.height);
+canvasRef3 = JsvTextureStoreApi.canvasTexture(bitmap3.width, bitmap3.height);
+//第一个图
+let centerX = bitmap.width / 2;
+let centerY = bitmap.height / 2;
+let radius = 50;
+
+let startAngle = 0; // 起始角度
+let sweepAngle = 180; // 扫描角度
+let customPath = canvasRef.customPath();
+customPath.arcTo(
+  centerX - radius,
+  centerY - radius,
+  centerX + radius,
+  centerY + radius,
+  startAngle,
+  sweepAngle
+);
+// 闭合路径，绘制实心扇形
+customPath.close();
+customPath.fill("#FF0000");
+
+sourceId.value = canvasRef.commit();
+
+//第二个图
+let radius2 = 60;
+let customPath2 = canvasRef2.circlePath(68, 68, radius2);
+customPath2.stroke(6, "#87CEEB");
+sourceId2.value = canvasRef2.commit();
+//第三个图
+let customPath3 = canvasRef3.rectPath(3, 3, 133, 133);
+customPath3.stroke(6, "#87CEEB");
+sourceId3.value = canvasRef3.commit();
+
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId.value);
+  JsvTextureStoreApi.deleteTexture(sourceId2.value);
+  JsvTextureStoreApi.deleteTexture(sourceId3.value);
+});
+</script>
+
+<style lang="css" scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.logo-size {
+  width: 200;
+  height: 200;
+}
+.logo-bg {
+  width: 300;
+  height: 300;
+  background-color: #007f00;
+}
+.text{
+  width:300;
+  height:30;
+  font-size: 28;
+  line-height: 30;
+  color: #FFFFFF;
+  text-align: center;
+}
+</style>

package/VisibleSensorDemo/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { watch, reactive, onMounted, ref } from "vue";
+import { watch, reactive, onMounted, onUnmounted, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
 
@@ -10,31 +10,46 @@ const VISIBLE_RANGE = 0.25;
 
 const router = useRouter();
 
-const containerRef = ref(null);
-let case_config = ref(null);
+const containerRef = shallowRef(null);
+let case_config = shallowRef(null);
 let status_text = reactive({
   oldH: "false",
   newH: "false",
   oldV: "false",
   newV: "false",
 });
+let testCaseType = shallowRef(0);
+let testBlinkType = shallowRef(false);
+let altVisible = shallowRef("visible");
+let altVisibleTimer = -1;
 
-let test_case_type = ref(0);
+// window.LudlTestCase = testCaseType;
 
-window.LudlTestCase = test_case_type;
+case_config.value = getTestCase(testCaseType.value);
 
-case_config.value = getTestCase(test_case_type.value);
-
-watch(test_case_type, () => {
-  case_config.value = getTestCase(test_case_type.value);
+watch(testCaseType, () => {
+  case_config.value = getTestCase(testCaseType.value);
 });
 
 onMounted(() => {
+  altVisibleTimer = setInterval(() => {
+    if (testBlinkType.value) {
+      altVisible.value = altVisible.value == "visible" ? "hidden" : "visible";
+    }
+  }, 500);
+
   jJsvRuntimeBridge.notifyPageLoaded();
 });
 
+onUnmounted(() => {
+  if (altVisibleTimer != -1) {
+    clearInterval(altVisible);
+    altVisibleTimer = -1;
+  }
+});
+
 // const onAnimDone = () => {
-//   test_case_type.value = (test_case_type.value + 1) % 2;
+//   testCaseType.value = (testCaseType.value + 1) % 2;
 // };
 
 // 内部接口
@@ -52,7 +67,11 @@ const onKeyDown = (ev) => {
     return true;
   }
   if (ev.keyCode == 13) {
-    test_case_type.value = (test_case_type.value + 1) % 2;
+    testCaseType.value = (testCaseType.value + 1) % 2;
+  }
+  if (ev.keyCode == 38) {
+    testBlinkType.value = testBlinkType.value ? false : true;
+    altVisible.value = "visible";
   }
   return false;
 };
@@ -68,7 +87,7 @@ function getTestCase(test_index) {
   switch (test_index) {
     case 0: {
       // 上到下
-      test_config.animation = "visibleSensor_upDown 8s infinite linear";
+      test_config.animation = "visibleSensor_upDown 12s infinite linear";
       test_config.text = "从上到下";
       test_config.horizon = 1.0;
       test_config.vertical = VISIBLE_RANGE;
@@ -76,7 +95,7 @@ function getTestCase(test_index) {
     }
     case 1: {
       // 左到右
-      test_config.animation = "visibleSensor_leftRight 8s infinite linear";
+      test_config.animation = "visibleSensor_leftRight 12s infinite linear";
       test_config.text = "从左到右";
       test_config.horizon = VISIBLE_RANGE;
       test_config.vertical = 1.0;
@@ -103,7 +122,7 @@ function getTestCase(test_index) {
         }"
       >
         {{
-          `按OK键切换方向
+          `按OK键切换方向, 按UP键切换显隐测试
 new horizon: ${status_text.newH}
 new vertical: ${status_text.newV}
 -------
@@ -128,7 +147,7 @@ old vertical: ${status_text.oldV}`
             width: 200,
             height: 200,
             backgroundColor: '#00AAAA',
-            zIndex: test_case_type == 0 ? -22 : 0,
+            zIndex: testCaseType == 0 ? -22 : 0,
           }"
         />
 
@@ -139,7 +158,7 @@ old vertical: ${status_text.oldV}`
             width: 140,
             height: 240,
             backgroundColor: '#0000AA',
-            zIndex: test_case_type == 0 ? -33 : 0,
+            zIndex: testCaseType == 0 ? -33 : 0,
           }"
         />
 
@@ -147,6 +166,7 @@ old vertical: ${status_text.oldV}`
           :style="{
             left: 0,
             top: 0,
+            visibility: altVisible,
             animation: case_config.animation,
           }"
         >
@@ -159,7 +179,7 @@ old vertical: ${status_text.oldV}`
             :container="containerRef"
             :callback="onBeVisible"
           >
-            <div v-if="test_case_type == 0">
+            <div v-if="testCaseType == 0">
               <div
                 :style="{
                   width: BOX_WIDTH,
@@ -231,4 +251,4 @@ old vertical: ${status_text.oldV}`
     transform: translate3d(330, 75, 0);
   }
 }
-</style>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.25",
+  "version": "2.1.200",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",