@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/DemoHomepage/router.js

@@ -14,357 +14,390 @@ let routeList = [
   {
     name: '基础示例合集',
     path: '/feature/Basic',
-    component: () => import('jsview-vue-samples/Basic/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/Basic/App.vue'),
   },
   // {
   //   name: 'FreeMoveResize',
   //   path: '/feature/FreeMoveResize',
-  //   component: () => import('jsview-vue-samples/FreeMoveResize/App.vue'),
+  //   component: () => import('@shijiu/jsview-vue-samples/FreeMoveResize/App.vue'),
   // },
+  {
+    name: '烟花行进特效',
+    path: '/Operations/SprayMove',
+    component: () => import('jsview-vue-samples/SprayMove/App.vue'),
+  },
+  {
+    name: '海报图收放组件',
+    path: '/Operations/PosterPacker',
+    component: () => import('jsview-vue-samples/PosterPacker/App.vue'),
+  },
   {
     name: 'div快照功能',
     path: '/feature/BakeViewDemo',
-    component: () => import('jsview-vue-samples/BakeViewDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/BakeViewDemo/App.vue'),
   },
   {
     name: 'FlexDemo',
     path: '/feature/FlexDemo',
-    component: () => import('jsview-vue-samples/FlexCellDemo/App.vue')
-
+    component: () => import('@shijiu/jsview-vue-samples/FlexCellDemo/App.vue')
+  },
+  {
+    name: 'ScreenFlex',
+    path: '/feature/ScreenFlex',
+    component: () => import('@shijiu/jsview-vue-samples/FullScreenFlex/App.vue')
   },
   {
     name: '连接线Demo',
     path: '/feature/ConnectLine',
-    component: () => import('jsview-vue-samples/ConnectLine/App.vue')
-
+    component: () => import('@shijiu/jsview-vue-samples/ConnectLine/App.vue')
+  },
+  {
+    name: '离散焦点自动处理',
+    path: '/feature/DispersedFocusControl',
+    component: () => import('@shijiu/jsview-vue-samples/DispersedFocusControl/App.vue'),
   },
   {
     name: '离散焦点分布',
     path: '/feature/DispersedItemSample',
-    component: () => import('jsview-vue-samples/DispersedItemSample/DispersedItemSample.vue')
+    component: () => import('@shijiu/jsview-vue-samples/DispersedItemSample/DispersedItemSample.vue')
   },
   {
     name: '饼图测试',
     path: '/feature/SecTorTest',
-    component: () => import('jsview-vue-samples/SecTorTest/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/SecTorTest/App.vue'),
   },
   {
     name: 'TextureStore测试',
     path: '/feature/TextureStoreTest',
-    component: () => import('jsview-vue-samples/TextureStoreTest/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TextureStoreTest/App.vue'),
   },
   {
     name: 'NinePatch对齐测试',
     path: '/feature/NinePatchTester',
-    component: () => import('jsview-vue-samples/NinePatchTester/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/NinePatchTester/App.vue'),
   },
   {
     name: 'NativeSharedView测试',
     path: '/feature/TestNativeSharedView',
-    component: () => import('jsview-vue-samples/TestNativeSharedView/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TestNativeSharedView/App.vue'),
   },
   {
     name: 'CSS预处理',
     path: '/feature/CssPreprocessor',
-    component: () => import('jsview-vue-samples/CssPreprocessor/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/CssPreprocessor/App.vue'),
   },
   {
     name: '可视化变化通知',
     path: '/feature/VisibleSensorDemo',
-    component: () => import('jsview-vue-samples/VisibleSensorDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/VisibleSensorDemo/App.vue'),
   },
   {
     name: '快速刷新的表格布局组件',
     path: '/feature/GridDemo',
-    component: () => import('jsview-vue-samples/GridDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/GridDemo/App.vue'),
   },
   {
     name: '有命名空间的焦点切换',
     path: '/feature/BasicFocusControl',
-    component: () => import('jsview-vue-samples/BasicFocusControl/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/BasicFocusControl/App.vue'),
   },
   {
     name: 'Hash方式路由切换',
     path: '/feature/HashHistory',
     props: { routePath: '/feature/HashHistory' },
-    component: () => import('jsview-vue-samples/HashHistory/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/HashHistory/App.vue'),
   },
   {
     name: '翻牌游戏',
     path: '/Game/FlipCard',
-    component: () => import('jsview-vue-samples/FlipCard/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/FlipCard/App.vue'),
   },
   {
     name: '设置颜色空间',
     path: '/feature/ColorSpace',
-    component: () => import('jsview-vue-samples/ColorSpace/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/ColorSpace/App.vue'),
   },
   {
     name: '制定Texture尺寸',
     path: '/feature/TextureSize',
-    component: () => import('jsview-vue-samples/TextureSize/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TextureSize/App.vue'),
   },
   {
     name: '长文字',
     path: '/feature/LongText',
-    component: () => import('jsview-vue-samples/LongText/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/LongText/App.vue'),
   },
   {
     name: '长文字Latex',
     path: '/feature/LongTextLatex',
-    component: () => import('jsview-vue-samples/LongTextLatex/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/LongTextLatex/App.vue'),
   },
   {
     name: '二维码',
     path: '/feature/QrcodeDemo',
-    component: () => import('jsview-vue-samples/QrcodeDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/QrcodeDemo/App.vue'),
   },
   {
     name: '文字阴影',
     path: '/feature/TextShadowDemo',
-    component: () => import('jsview-vue-samples/TextShadowDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TextShadowDemo/App.vue'),
   },
   {
     name: '多行文字区域内对齐',
     path: '/feature/TextBox',
-    component: () => import('jsview-vue-samples/TextBox/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TextBox/App.vue'),
   },
   // TODO: 改为FreeMove后再激活
   // {
   //   name: '抛物运动写法样例',
   //   path: '/Game/ThrowMoveDemo',
-  //   component: () => import('jsview-vue-samples/ThrowMoveDemo/App.vue'),
+  //   component: () => import('@shijiu/jsview-vue-samples/ThrowMoveDemo/App.vue'),
   // },
   {
     name: '精灵图',
     path: '/Game/SpriteImage',
-    component: () => import('jsview-vue-samples/SpriteImage/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/SpriteImage/App.vue'),
   },
   {
     name: '文字滚动(标题跑马灯)',
     path: '/feature/Marquee',
-    component: () => import('jsview-vue-samples/Marquee/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/Marquee/App.vue'),
   },
   {
     name: '文字输入',
     path: '/feature/Input',
-    component: () => import('jsview-vue-samples/Input/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/Input/App.vue'),
   },
   {
     name: '情景主题效果:雨',
     path: '/Operations/TombSweepingDayTest',
-    component: () => import('jsview-vue-samples/TombSweepingDayTest/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TombSweepingDayTest/App.vue'),
   },
   {
     name: '.9图焦点框漂移',
     path: '/Operations/NinePatchDemo',
-    component: () => import('jsview-vue-samples/NinePatchDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/NinePatchDemo/App.vue'),
   },
   {
     name: '动图',
     path: '/Operations/AnimPicture',
-    component: () => import('jsview-vue-samples/AnimPicture/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/AnimPicture/App.vue'),
   },
   {
     name: '粒子效果',
     path: '/Operations/SprayView',
-    component: () => import('jsview-vue-samples/SprayView/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/SprayView/App.vue'),
   },
   {
     name: '长图片',
     path: '/Operations/LongImage',
-    component: () => import('jsview-vue-samples/LongImage/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/LongImage/App.vue'),
   },
   {
     name: '拼图demo',
     path: '/Operations/MaskClip',
-    component: () => import('jsview-vue-samples/MaskClip/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/MaskClip/App.vue'),
   },
   {
     name: 'SoundPool',
     path: '/Game/SoundPool',
-    component: () => import('jsview-vue-samples/SoundPool/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/SoundPool/App.vue'),
   },
   {
     name: 'TextureAnimation',
     path: '/Operations/TextureAnimation',
-    component: () => import('jsview-vue-samples/TextureAnimation/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TextureAnimation/App.vue'),
   },
   {
     name: '焦点框旋转光效果',
     path: '/Operations/TextureAnimation2',
-    component: () => import('jsview-vue-samples/TextureAnimation/App2.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TextureAnimation/App2.vue'),
   },
   {
     name: '公祭日黑白效果',
     path: '/Operations/GrayDown',
-    component: () => import('jsview-vue-samples/FilterDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/FilterDemo/App.vue'),
   },
   {
     name: '水波特效',
     path: '/Operations/Ripple',
-    component: () => import('jsview-vue-samples/Ripple/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/Ripple/App.vue'),
   },
   {
     name: '预加载',
     path: '/feature/Preload',
-    component: () => import('jsview-vue-samples/Preload/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/Preload/App.vue'),
   },
   {
     name: '单图片透明',
     path: '/feature/ViewOpacity',
-    component: () => import('jsview-vue-samples/ViewOpacity/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/ViewOpacity/App.vue'),
   },
   {
     name: '图片缩小算法',
     path: '/feature/ScaleDownNeon',
-    component: () => import('jsview-vue-samples/ScaleDownNeon/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/ScaleDownNeon/App.vue'),
   },
   {
     name: '渐变Texture',
     path: '/feature/GradientTexture',
-    component: () => import('jsview-vue-samples/GradientTexture/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/GradientTexture/App.vue'),
   },
   {
     name: '碰撞检测',
     path: '/Game/Collision',
-    component: () => import('jsview-vue-samples/Collision/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/Collision/App.vue'),
   },
   {
     name: '碰撞即停',
     path: '/Game/ImpactStop',
-    component: () => import('jsview-vue-samples/ImpactStop/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/ImpactStop/App.vue'),
   },
   {
     name: '滚动图',
     path: '/Operations/Swiper',
-    component: () => import('jsview-vue-samples/Swiper/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/Swiper/App.vue'),
   },
   {
     name: '下载接口示例',
     path: '/feature/JsvPreDownloader',
-    component: () => import('jsview-vue-samples/JsvPreDownloader/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/JsvPreDownloader/App.vue'),
   },
   {
     name: '焦点移动样式',
     path: '/Operations/FocusMoveStyle',
-    component: () => import('jsview-vue-samples/FocusMoveStyle/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/FocusMoveStyle/App.vue'),
   },
   {
     name: 'Mockjs测试',
     path: '/feature/MockjsDemo',
-    component: () => import('jsview-vue-samples/MockjsDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/MockjsDemo/App.vue'),
   },
   {
     name: '红包雨',
     path: '/Game/GiftRain',
-    component: () => import('jsview-vue-samples/GiftRain/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/GiftRain/App.vue'),
   },
   {
     name: '雷达图',
     path: '/Game/RadarChart',
-    component: () => import('jsview-vue-samples/JsvRadarChart/App.vue')
+    component: () => import('@shijiu/jsview-vue-samples/JsvRadarChart/App.vue')
   },
   // TODO: 等改为对接FreeMoveActor后再恢复
   // {
   //   name: '跑酷游戏',
   //   path: '/Game/Parkour',
-  //   component: () => import('jsview-vue-samples/Parkour/App.vue')
+  //   component: () => import('@shijiu/jsview-vue-samples/Parkour/App.vue')
   // },
   {
     name: 'Hash参数',
     path: '/feature/HashParams',
-    component: () => import('jsview-vue-samples/HashParams/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/HashParams/App.vue'),
   },
   {
     name: '按键打断描画',
     path: '/feature/BreakRender',
-    component: () => import('jsview-vue-samples/BreakRender/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/BreakRender/App.vue'),
   },
   {
     name: 'latex示例',
     path: '/feature/LatexDemo',
-    component: () => import('jsview-vue-samples/LatexDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/LatexDemo/App.vue'),
   },
   {
     name: 'GetRect示例',
     path: '/feature/GetRect',
-    component: () => import('jsview-vue-samples/GetBoundingClientRect/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/GetBoundingClientRect/App.vue'),
   },
   {
     name: '动态Class示例',
     path: '/feature/DynamicClass',
-    component: () => import('jsview-vue-samples/DynamicClass/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/DynamicClass/App.vue'),
   },
   {
     name: 'Class动态切换示例',
     path: '/feature/ClassDynamicSwitching',
-    component: () => import('jsview-vue-samples/ClassDynamicSwitching/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/ClassDynamicSwitching/App.vue'),
   },
   {
     name: 'JsvLine示例',
     path: '/feature/JsvLine',
-    component: () => import('jsview-vue-samples/JsvLine/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/JsvLine/App.vue'),
   },
   // {
   //   name: 'FreeMove示例',
   //   path: '/feature/FreeMove',
-  //   component: () => import('jsview-vue-samples/FreeMove/App.vue'),
+  //   component: () => import('@shijiu/jsview-vue-samples/FreeMove/App.vue'),
   // },
   {
     name: '思维导图示例',
     path: '/feature/MindMap',
-    component: () => import('jsview-vue-samples/MindMap/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/MindMap/App.vue'),
   },
   {
     name: 'latex公式',
     path: '/feature/LatexFormula',
-    component: () => import('jsview-vue-samples/LatexFormula/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/LatexFormula/App.vue'),
   },
   {
     name: 'Swiper3dTest',
     path: '/Operations/Swiper3D',
-    component: () => import('jsview-vue-samples/SwiperTest/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/SwiperTest/App.vue'),
   },
   {
     name: '进度条',
     path: '/Operations/ProgressBar',
-    component: () => import('jsview-vue-samples/ProgressBar/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/ProgressBar/App.vue'),
   },
   {
     name: '春联测试',
     path: '/Operations/CoupletsTest',
-    component: () => import('jsview-vue-samples/CoupletsTest/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/CoupletsTest/App.vue'),
   },
   {
     name: '场景过渡',
     path: '/Operations/SceneTransition',
-    component: () => import('jsview-vue-samples/SceneTransition/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/SceneTransition/App.vue'),
   },
   {
     name: '点击Div',
     path: '/touch/ClickDivDemo',
-    component: () => import('jsview-vue-samples/ClickDivDemo/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/ClickDivDemo/App.vue'),
   },
   {
     name: '触控示例',
     path: '/touch/TouchWidget',
-    component: () => import('jsview-vue-samples/TouchWidget/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/TouchWidget/App.vue'),
+  },
+  {
+    name: 'DragBox',
+    path: '/touch/Box',
+    component: () => import('@shijiu/jsview-vue-samples/DragBox/App.vue'),
   },
   // {
   //   name: 'FreeMove触控磁吸',
   //   path: '/touch/FreeMoveChildAttract',
-  //   component: () => import('jsview-vue-samples/FreeMoveChildAttract/App.vue'),
+  //   component: () => import('@shijiu/jsview-vue-samples/FreeMoveChildAttract/App.vue'),
   // },
   // {
   //   name: 'FreeMoveLink',
   //   path: '/touch/FreeMoveLink',
-  //   component: () => import('jsview-vue-samples/FreeMoveLink/App.vue'),
+  //   component: () => import('@shijiu/jsview-vue-samples/FreeMoveLink/App.vue'),
   // },
   {
     name: '可拖拽进度条',
     path: '/touch/ScrollBoxTest',
-    component: () => import('jsview-vue-samples/ScrollBoxTest/App.vue'),
+    component: () => import('@shijiu/jsview-vue-samples/ScrollBoxTest/App.vue'),
+  },
+  // {
+  //   name: '透视镜效果样例',
+  //   path: '/Operations/DriftScopeTest',
+  //   component: () => import('@shijiu/jsview-vue-samples/DriftScopeTest/App.vue'),
+  // },
+  {
+    name: '自定义shader',
+    path: '/Operations/CustomShader',
+    component: () => import('@shijiu/jsview-vue-samples/CustomShader/App.vue'),
   },
 ];
 

package/DispersedFocusControl/App.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="root">
+    <!-- 提示 -->
+    <div class="title">{{ "离散焦点控制" }}</div>
+    <div class="prompt">
+      {{
+        "操作提示：按上下左右键进行焦点切换，\n" +
+        "按【OK】键对当前聚焦项进行变色，\n" +
+        "按【返回】键退出。"
+      }}
+    </div>
+
+    <div class="group">
+    <!-- namespace 使用autoFocus有bug, 移动时不能定位currentFocusNode -->
+    <!-- <jsv-focus-block namespace="focus-group"> -->
+        <Button v-for="(style, index) in data"
+          :style="style"
+          :auto-focus="index == 0"
+          @click="(button) => onClick(button, index)"
+          @focus="(button, focused) => onFocusChange(button, focused, index)">
+          {{ ` index: ${index}\n pos: ${style.left}/${style.top}\n size: ${style.width}/${style.height}` }}
+        </Button>
+    <!-- </jsv-focus-block> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { data } from "./data.js";
+import Button from "./Button.vue";
+
+const onClick = (button, index) => {
+  console.log("onClick triggered. Button " + index);
+}
+
+const onFocusChange = (button, focused, index) => {
+  console.log("onFocusChange triggered. Button " + index + " change to " + focused);
+}
+</script>
+
+<style lang="scss" scoped>
+.root {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.title {
+  width: 200;
+  height: 26;
+  font-size: 24;
+  color: #ffffff;
+  line-height: 26;
+  left: 30;
+}
+.prompt {
+  width: 500;
+  height: 90;
+  font-size: 24;
+  color: #ffffff;
+  line-height: 26;
+  top: 40;
+  left: 30;
+}
+.group {
+  top: 80;
+}
+</style>

package/DispersedFocusControl/Button.vue

@@ -0,0 +1,76 @@
+<template>
+  <jsv-focus-block
+    :style="style"
+    :autoFocus="autoFocus"
+    :onAction="onAction">
+    <div
+      :class="(clicking ? 'clicking' : (focused ? 'focused' : 'normal'))"
+      :style="{ ...style,
+        left: 0, top: 0,
+      }">
+      <slot></slot>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { getCurrentInstance, shallowRef } from "vue";
+
+const props = defineProps({
+  style: {},
+  autoFocus: false,
+});
+
+const self = getCurrentInstance();
+const emit = defineEmits(['click', 'focus']);
+
+const focused = shallowRef(false);
+const clicking = shallowRef(false);
+
+const onAction = {
+  onFocus: () => {
+    focused.value = true;
+    emit('focus', self, true);
+  },
+  onBlur: () => {
+    focused.value = false;
+    emit('focus', self, false);
+  },
+
+  onKeyDown: (ev) => {
+    if (ev.keyCode == 13) {
+      clicking.value = true;
+      emit('click', self);
+      return true;
+    }
+
+    return false;
+  },
+  onKeyUp: (ev) => {
+    if (ev.keyCode == 13) {
+      clicking.value = false;
+      return true;
+    }
+
+    return false;
+  }
+}
+
+</script>
+
+<style scoped>
+.clicking {
+  background-color: #00FFFF;
+  font-size: 25;
+}
+
+.focused {
+  background-color: #FF00FF;
+  font-size: 25;
+}
+
+.normal {
+  background-color: #FFFFFF;
+  font-size: 20;
+}
+</style>

package/DispersedFocusControl/data.js

@@ -0,0 +1,44 @@
+export const data = [
+  {
+    width: 200,
+    height: 100,
+    left: 60,
+    top: 400,
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 380,
+    top: 420,
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 700,
+    top: 360,
+  },
+  {
+    width: 300,
+    height: 200,
+    left: 900,
+    top: 500,
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 1060,
+    top: 200,
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 760,
+    top: 60,
+  },
+  {
+    width: 200,
+    height: 100,
+    left: 1060,
+    top: 380,
+  },
+];