@shijiu/jsview-vue-samples 2.1.448-test.0 → 2.1.476-test.0

package/BasicFocusControl/App.vue

@@ -35,9 +35,8 @@
 
 <script setup>
 import { useRouter } from "vue-router";
-import { onMounted } from "vue"
 import MainArea from "./components/MainArea.vue";
-import { useFocusHub } from "jsview"
+import { useFocusHub } from "jsview";
 
 const router = useRouter();
 const onKeyDown = (ev) => {
@@ -51,12 +50,7 @@ const onKeyDown = (ev) => {
 };
 
 window.DebugMyHub = useFocusHub();
-
-onMounted(()=>{
-  // 通过NameSpace进行全局设置
-  window.DebugMyHub.setFocus("main.R1C1");
-});
-
+window.DebugMyHub.enableFocusTrace(); // 激活焦点变化堆栈
 </script>
 
 <template>
@@ -64,7 +58,7 @@ onMounted(()=>{
   <jsv-focus-block :onKeyDown="onKeyDown">
     <div class="title">可上下左右切换焦点</div>
     <div class="body">
-      <MainArea/>
+      <MainArea />
     </div>
   </jsv-focus-block>
 </template>
@@ -86,4 +80,4 @@ onMounted(()=>{
   left: 100;
   top: 120;
 }
-</style>
+</style>

package/FilterDemo/VideoLayer.vue

@@ -1,5 +1,8 @@
 <script setup>
-import { JsvPlayer, globalLoadJsvPlayerPlugin } from "jsview";
+import {
+  JsvPlayer,
+  globalLoadJsvPlayerPlugin,
+} from "@shijiu/jsview-vue/utils/JsViewPlugin/JsvPlayer";
 
 const props = defineProps({
   top: {
@@ -20,9 +23,9 @@ const props = defineProps({
   },
 });
 
-globalLoadJsvPlayerPlugin((status)=>{
+globalLoadJsvPlayerPlugin((status) => {
   console.log("JsvPlayer plugin load status: " + status);
-})
+});
 
 // const video_url = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20210207/52fae4231350c85fec605b47bbe479c5.mp4";
 const video_url =
@@ -63,4 +66,4 @@ const video_url =
       }"
     />
   </div>
-</template>
+</template>

package/MindMap/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { JsvMindMap } from "jsview";
+import { onMounted } from "vue"
+import { JsvMindMap, useFocusHub } from "jsview";
 import Item from "./Item.vue";
 import { data } from "./data"
 
@@ -7,6 +8,8 @@ const provideData = () => {
   return data;
 };
 
+const focusHub = useFocusHub();
+
 const lineColor = {
   0: "#ff0000",
   1: "#00ff00",
@@ -33,10 +36,16 @@ const formatNode = (item, depth) => {
 const onEdge = (info) => {
   console.log("onEdge ", info);
 };
+
+const componentName = "mindMapDemo";
+onMounted(() => {
+  focusHub.setFocus(componentName);
+})
 </script>
 
 <template>
   <jsv-mind-map
+    :name="componentName"
     :left="200"
     :top="100"
     :width="500"

package/SceneTransition/App.vue

@@ -7,6 +7,7 @@
     <div class="bgStyle">
       <div :style="{ width: 640, height: 360, backgroundImage: bg, top: 100 }">
         <JsvSceneTransition
+          ref="control"
           v-show="isShow"
           :imageUrl="fly1"
           :ArraySet="SelectArray"
@@ -21,7 +22,7 @@
       </div>
       <div class="text" :style="{ left: 810, top: 20 }">{{ "素材展示" }}</div>
       <div class="text" :style="{ left: 400, top: 500 }">
-        {{ "按需采用碎片式的图片来进行遮罩，此例只展示一组遮罩素材。" }}
+        {{ "按需采用碎片式的图片来进行遮罩，此例只展示当前随机这组遮罩素材。" }}
       </div>
       <!-- 报错小框 -->
       <div v-if="boxSwitch" class="smallBox">
@@ -49,111 +50,13 @@
         }"
       ></div>
       <div
+        v-for="(item, index) in SelectArray"
         :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[0].url,
-          top: 500,
-          left: 700,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[1].url,
-          top: 500,
-          left: 800,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[2].url,
-          top: 500,
-          left: 920,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[3].url,
-          top: 550,
-          left: 700,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[4].url,
-          top: 550,
-          left: 820,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[5].url,
-          top: 550,
-          left: 920,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[6].url,
-          top: 600,
-          left: 700,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          backgroundImage: ArraySet1[7].url,
-          top: 600,
-          left: 770,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 80,
-          height: 60,
-          backgroundImage: ArraySet1[8].url,
-          top: 600,
-          left: 860,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 60,
-          height: 60,
-          backgroundImage: ArraySet1[9].url,
-          top: 600,
-          left: 930,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 30,
-          height: 30,
-          backgroundImage: ArraySet1[10].url,
-          top: 590,
-          left: 950,
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 40,
-          height: 60,
-          backgroundImage: ArraySet1[11].url,
-          top: 600,
-          left: 980,
+          width: Math.round((item.width / 1280) * 320),
+          height: Math.round((item.height / 720) * 180),
+          backgroundImage: item.url,
+          top: 500 + Math.round(((item.top * 1.05) / 720) * 180),
+          left: 700 + Math.round(((item.left * 1.05) / 1280) * 320),
         }"
       ></div>
     </div>
@@ -163,7 +66,7 @@
 <script setup>
 import { shallowRef, onBeforeUnmount } from "vue";
 import { JsvPreload, buildPreloadInfo } from "jsview";
-import JsvSceneTransition from "./jsvSceneTransition.vue";
+import JsvSceneTransition from "./JsvSceneTransition.vue";
 import { ArraySet1 } from "./maskConfig/config1";
 import { ArraySet2 } from "./maskConfig/config2";
 import { ArraySet3 } from "./maskConfig/config3";
@@ -213,15 +116,18 @@ const randomSelect = () => {
   }
 };
 const SelectArray = randomSelect();
-
+let control = shallowRef(null);
+let down = shallowRef(false);
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
-    case 13:
-      if (isDone.value == true) {
+    //按方向键下，开始调用下垂运动状态的函数
+    case 40:
+      if (isDone.value == true && down.value == false) {
         bg.value = fly2;
-        onOff.value = true;
         isShow.value = true;
-      } else {
+        control.value.sag();
+        down.value = true;
+      } else if (isDone.value == false) {
         boxSwitch.value = true;
         timer.id = setTimeout(() => {
           boxSwitch.value = false;
@@ -230,6 +136,13 @@ const onKeyDown = (ev) => {
 
       break;
 
+    //按方向键上调用组件的恢复函数
+    case 38:
+      if (down.value == true) {
+        control.value.fireNeEvent();
+        down.value = false;
+      }
+      break;
     default:
       break;
   }

package/SceneTransition/JsvSceneTransition.vue

@@ -6,7 +6,9 @@
  *          displayWidth {Number}    (必填) 想要展示的宽度
  *          ArraySet     {Array}     (必填) 模板配置项，包括：每个模块的width,height,left,top,url
  *          style        {Object}    (必填) 模板配置总长度和总宽度。(width,height)
- *          onOff       {Boolean}   (必填) 组件挂载好后是否立即动画的开关，后续可通过改值为true开启。
+ *      defineExpose说明:
+ *          sag          {Function}  控制组件变成碎片进行下垂运动的方法
+ *          recover      {Function}  控制碎片还原的方法
 -->
 
 <template>
@@ -47,16 +49,17 @@
 </template>
 
 <script setup>
-import { JsvMaskClipDiv, JsvFreeMoveActor } from "jsview";
-import { onMounted, watch } from "vue";
+import { JsvMaskClipDiv, JsvFreeMoveActor, FreeMoveFunc } from "jsview";
+import { onMounted } from "vue";
 
 const props = defineProps({
   imageUrl: { type: String, require: true },
   displayWidth: { type: Number, require: true },
   ArraySet: { type: Array, require: true },
   style: { type: Object, require: true },
-  onOff: { type: Boolean, require: true },
 });
+
+let interactNexus = FreeMoveFunc.newNexus();
 //FreeMove引用
 const refArray = [];
 const controlArray = new Array(props.ArraySet.length).fill(null);
@@ -76,16 +79,9 @@ props.ArraySet.forEach((item, index) => {
     y: centerY,
   });
 });
+//召回点坐标队列
+let recallArray = new Array(props.ArraySet.length);
 
-//监听控制开关的值
-watch(
-  () => props.onOff,
-  (n, o) => {
-    if (n == true) {
-      MoveFunc();
-    }
-  }
-);
 //Y轴方向随机初速度
 const randomYArray = [-60, -70, -80];
 const randomSelect = () => {
@@ -98,8 +94,8 @@ const randomSelect = () => {
     return randomYArray[2];
   }
 };
-//运动函数
-const MoveFunc = () => {
+//往下运动函数
+const sag = () => {
   centerItemArray.forEach((item, index) => {
     if (center.x - item.x <= Math.abs(60)) {
       controlArray[index].run([
@@ -149,19 +145,65 @@ const MoveFunc = () => {
         controlArray[index]
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([
+            controlArray[index].action().stopMoving(),
+          ]),
       ]);
     }
+    //给所有运动物体创建onNexusEvent条件以便召回
+    controlArray[index].run([
+      controlArray[index]
+        .condition()
+        .onNexusEvent(interactNexus, 1001 + index)
+        .then([
+          (a) => {
+            //给还原数组赋值
+            recallArray[index] = {
+              x: a.xPos,
+              y: a.yPos,
+            };
+            recover(index);
+          },
+        ]),
+    ]);
+  });
+};
+
+const fireNeEvent = () => {
+  controlArray.forEach((item, index) => {
+    item.run([
+      item.action().stopMoving(),
+      item.state().fireNexusEvent(interactNexus, 1001 + index),
+    ]);
   });
 };
+//往回恢复的函数
+const recover = (index) => {
+  controlArray[index].run([
+    controlArray[index]
+      .action()
+      .moveTo(
+        0,
+        0,
+        (Math.abs(recallArray[index].x) * (recallArray[index].y / 15)) /
+          Math.abs(recallArray[index].y),
+        recallArray[index].y / 15,
+        () => {
+          controlArray[index].run([
+            controlArray[index].action().teleportTo(0, 0),
+            controlArray[index].state().clearAllConditions(),
+          ]);
+        }
+      ),
+  ]);
+};
+
 onMounted(() => {
   for (let i = 0; i < refArray.length; i++) {
     controlArray[i] = refArray[i].control;
   }
-  if (props.onOff == true) {
-    MoveFunc();
-  }
 });
+defineExpose({ sag, fireNeEvent });
 </script>
 
 <style scoped></style>

package/SpriteImage/App.vue

@@ -23,10 +23,15 @@
  -->
 
 <script setup>
-import { JsvSpriteAnim, JsvSpriteLoader } from "jsview";
+import {
+  JsvSpriteAnim,
+  JsvSpriteLoader,
+  JsvSpriteStatic,
+  JsvSpriteTools,
+} from "jsview";
 import localSpriteImage from "./images/egg_break.png";
 import localConfigJson from "./images/egg_break.json";
-import { shallowRef } from "vue";
+import { shallowRef, watchEffect } from "vue";
 import { useRouter } from "vue-router";
 
 console.log(
@@ -40,7 +45,11 @@ let useLocalData = shallowRef(true);
 let animateImage = shallowRef(null);
 let preloadJsonUrl = shallowRef(null);
 let preloadCallback = shallowRef(null);
-let spriteJsonIfno = shallowRef(null);
+let spriteJsonInfo = shallowRef(null);
+let spriteOriginSize = shallowRef(null);
+let spriteStaticJsonInfo1 = shallowRef(null);
+let spriteStaticJsonInfo2 = shallowRef(null);
+let spriteStaticJsonInfo3 = shallowRef(null);
 
 const _UseLocalData = () => {
   console.log("using local data");
@@ -48,19 +57,29 @@ const _UseLocalData = () => {
   animateImage.value = `url(${localSpriteImage})`;
   preloadJsonUrl.value = null;
   preloadCallback.value = null;
-  spriteJsonIfno.value = _formatInfo(localConfigJson).info;
+  spriteJsonInfo.value = _formatInfo(localConfigJson).info;
+  _applyStaticInfo(spriteJsonInfo.value, currentStatiIndex);
+
+  // 调整设置的原图尺寸设置
+  const guessSize = JsvSpriteTools.guessOriginSize(spriteJsonInfo.value);
+  spriteOriginSize.value = guessSize;
 };
 
 const _UseRemoteData = () => {
   const testRemoteImageUrl = "http://192.168.2.179:8077/images/egg_break.png";
   const testRemoteConfigUrl = "http://192.168.2.179:8077/images/egg_break.json";
 
-  console.log("using remote data");
   useLocalData.value = false;
   animateImage.value = testRemoteImageUrl;
   preloadJsonUrl.value = testRemoteConfigUrl;
   preloadCallback.value = (config_json, resolve_set) => {
-    spriteJsonIfno.value = _formatInfo(config_json).info;
+    spriteJsonInfo.value = _formatInfo(config_json).info;
+    _applyStaticInfo(spriteJsonInfo.value, currentStatiIndex);
+
+    // 调整设置的原图尺寸设置
+    const guessSize = JsvSpriteTools.guessOriginSize(spriteJsonInfo.value);
+    spriteOriginSize.value = guessSize;
+
     resolve_set(); // 通知loader数组设置完成
   };
 };
@@ -82,9 +101,51 @@ const _formatInfo = (config_json) => {
       source: config_json.frames[i].frame,
     });
   }
+
   return { info };
 };
 
+const _applyStaticInfo = (wholeJsonInfo, index) => {
+  let length = wholeJsonInfo.frames.length;
+  // 设置第一张静图
+  let useIndex = index % length;
+  spriteStaticJsonInfo1.value = {
+    frames: [wholeJsonInfo.frames[useIndex]],
+    meta: {
+      size: wholeJsonInfo.meta.size,
+    },
+  };
+
+  // 设置第二张静图
+  useIndex = (index + 1) % length;
+  spriteStaticJsonInfo2.value = {
+    frames: [wholeJsonInfo.frames[useIndex]],
+    meta: {
+      size: wholeJsonInfo.meta.size,
+    },
+  };
+
+  // 设置第三张静图
+  useIndex = (index + 2) % length;
+  spriteStaticJsonInfo3.value = {
+    frames: [wholeJsonInfo.frames[useIndex]],
+    meta: {
+      size: wholeJsonInfo.meta.size,
+    },
+  };
+};
+
+let staticFromIndex = shallowRef(0);
+let currentStatiIndex = 0;
+watchEffect(() => {
+  if (staticFromIndex.value != currentStatiIndex) {
+    currentStatiIndex = staticFromIndex.value;
+    if (spriteJsonInfo.value != null) {
+      _applyStaticInfo(spriteJsonInfo.value, currentStatiIndex);
+    }
+  }
+});
+
 const spriteController = shallowRef(null);
 
 let show = shallowRef(true);
@@ -96,6 +157,9 @@ const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router?.go(-1); // 有router时，是从DemoHomepage进入，回退
     return true;
+  } else if (ev.keyCode == 13) {
+    // 静态引用信息变化
+    staticFromIndex.value++;
   }
   return true;
 };
@@ -114,28 +178,75 @@ _UseLocalData();
       onKeyDown: onKeyDown,
     }"
   >
+    <div class="bgStyle" />
+
+    <!-- 静态精灵图测试 -->
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: 30,
+        lineHeight: 50,
+        color: '#ffffff',
+        left: 100,
+        top: 75,
+        width: 280,
+        height: 100,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      {{ "精灵图效果(静态)\nOK键切换图组" }}
+    </div>
+    <JsvSpriteLoader
+      :imageUrl="animateImage"
+      :configUrl="preloadJsonUrl"
+      :noNeedResource="useLocalData"
+    >
+      <div :style="{ left: 140, top: 175 }">
+        <JsvSpriteStatic
+          :spriteInfo="spriteStaticJsonInfo1"
+          :viewSize="{ w: 200 }"
+          :spriteFrameSize="spriteOriginSize"
+          :imageUrl="animateImage"
+        />
+      </div>
+      <div :style="{ left: 140, top: 325 }">
+        <JsvSpriteStatic
+          :spriteInfo="spriteStaticJsonInfo2"
+          :viewSize="{ w: 200 }"
+          :spriteFrameSize="spriteOriginSize"
+          :imageUrl="animateImage"
+        />
+      </div>
+      <div :style="{ left: 140, top: 505 }">
+        <JsvSpriteStatic
+          :spriteInfo="spriteStaticJsonInfo3"
+          :viewSize="{ w: 200 }"
+          :spriteFrameSize="spriteOriginSize"
+          :imageUrl="animateImage"
+        />
+      </div>
+    </JsvSpriteLoader>
+
+    <!-- 动态精灵图测试 -->
     <div
       :style="{
         textAlign: 'center',
         fontSize: 30,
         lineHeight: 50,
         color: '#ffffff',
-        left: 200,
+        left: 460,
         top: 100,
-        width: 434,
+        width: 280,
         height: 50,
         backgroundColor: 'rgba(27,38,151,0.8)',
       }"
     >
-      精灵图效果
+      精灵图效果(动态)
     </div>
     <!--
                 通过show进行 清理精灵图，用于验证精灵图清理后，StyleSheet中cssRules的keyFrame清理工作能正常完成
             -->
-    <div
-      v-if="show"
-      :style="{ left: 200, top: 150, transform: 'scale3d(2.5, 2.5, 1)' }"
-    >
+    <div v-show="show" :style="{ left: 460, top: 150 }">
       <JsvSpriteLoader
         :imageUrl="animateImage"
         :configUrl="preloadJsonUrl"
@@ -144,9 +255,11 @@ _UseLocalData();
       >
         <JsvSpriteAnim
           ref="spriteController"
-          :spriteInfo="spriteJsonIfno"
+          :spriteInfo="spriteJsonInfo"
           :loop="3"
           :duration="0.8"
+          :viewSize="{ w: 280 }"
+          :spriteFrameSize="spriteOriginSize"
           :autostart="true"
           :onAnimEnd="spriteAnimEnd"
           :imageUrl="animateImage"
@@ -160,7 +273,7 @@ _UseLocalData();
         fontSize: 30,
         lineHeight: 50,
         color: '#ffffff',
-        left: 700,
+        left: 800,
         top: 100,
         width: 434,
         height: 50,
@@ -171,7 +284,7 @@ _UseLocalData();
     </div>
     <div
       :style="{
-        left: 700,
+        left: 800,
         top: 150,
         width: 434,
         height: 372,
@@ -180,3 +293,11 @@ _UseLocalData();
     />
   </jsv-focus-block>
 </template>
+
+<style scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #4d5e8c;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.448-test.0",
+  "version": "2.1.476-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",