@shijiu/jsview-vue-samples 2.3.151-test.0 → 2.3.728-alpha.0

package/SpringFestival/SpringFestivalScene/FreeMoveBuilder.js

@@ -59,8 +59,8 @@ const sWallConditionName = "wallCond";
 export function buildBounce(
     cmds,// FreeMove的cmds句柄
     condGroupId,
-    startX, // 起始位置和目标位置的偏差, 单位px
-    startY, // 起始位置和目标位置的偏差, 单位px
+    startX, // 起始位置和目标位置的偏差, 单位px, 目标位置固定为0
+    startY, // 起始位置和目标位置的偏差, 单位px, 目标位置固定为0
     times, // 整数，落点数(弹起次数-1)
     gravity, // y轴的加速度, 建议设置成0.8
     onEnd,
@@ -119,7 +119,7 @@ export function buildBounce(
         cmds.state().removeConditionByGroup(condGroupId),
 
         // wallPosition用于规避运动路程计算超出(times越大超出越多)时，解决动画结尾的回弹问题
-        cmds.condition(condGroupId, true, sWallConditionName).wallPosition(wallname, 0, undefined).then([
+        cmds.condition(condGroupId, true, sWallConditionName).wallPosition(wallname, 0).then([
             cmds.action().teleportTo(0, undefined),
             cmds.action().setSpdAndAccel(0, undefined, undefined, undefined),
         ]),

package/SyncDecode/App.vue

@@ -0,0 +1,137 @@
+<template>
+  <jsv-focus-block
+    :onAction="{ onKeyDown }"
+    autoFocus
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  >
+    <JsvPreload :downloadList="downloadInfo" :onDownloadDone="onDownloadDone" />
+    <div
+      :style="{
+        left: rootLeft,
+        transition: 'left 0.5s ease-in-out',
+      }"
+      @transitionend="onTransitionEnd"
+    >
+      <JsvPosterImage
+        v-if="showImg == 0"
+        :style="{
+          left: 0,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImageLongmao"
+      >
+      </JsvPosterImage>
+      <JsvPosterImage
+        v-if="showImg == 1"
+        :style="{
+          left: 1280,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImageOwl"
+      >
+      </JsvPosterImage>
+      <JsvPosterImage
+        v-if="showImg == 2"
+        :style="{
+          left: 2560,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImagePanda"
+      >
+      </JsvPosterImage>
+    </div>
+
+    <div
+      :style="{
+        width: 1280,
+        height: 40,
+        backgroundColor: '#00000088',
+        top: 100,
+        color: '#ffffff',
+        fontSize: 30,
+        textAlign: 'center',
+      }"
+    >
+      按左右键, 看图片解码时间的延迟
+    </div>
+
+    <div
+      :style="{
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        backgroundColor: '#ff0000',
+        animation: 'rotate 5s linear infinite',
+      }"
+    ></div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { JsvPosterImage, JsvPreload, buildDownloadInfo } from "jsview";
+
+const rootLeft = ref(0);
+const showImg = ref(0);
+const ImageLongmao =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg";
+const ImagePanda =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+const ImageOwl =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";
+
+const downloadInfo = [
+  buildDownloadInfo(ImageLongmao),
+  buildDownloadInfo(ImagePanda),
+  buildDownloadInfo(ImageOwl),
+];
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      if (showImg.value > 0) {
+        showImg.value = showImg.value - 1;
+        rootLeft.value = rootLeft.value + 1280;
+      }
+      break;
+    case 39:
+      if (showImg.value < 2) {
+        showImg.value = showImg.value + 1;
+        rootLeft.value = rootLeft.value - 1280;
+      }
+      break;
+  }
+};
+
+const onDownloadDone = (info) => {
+  console.log("onDownloadDone", info);
+};
+
+const onTransitionEnd = () => {
+  console.log("onAnimationEnd clear resource");
+  window.JsvCoreApi?.triggerTextureRecycle?.();
+};
+
+</script>
+
+<style>
+@keyframes rotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/TextSizeLimit/App.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { JsvTextBox, JsvFlexDiv } from "jsview";
+</script>
+
+<template>
+  <div :style="{
+    width: 1280,
+    height: 720,
+    backgroundColor: '#007788',
+  }"></div>
+  <jsv-flex-div
+    :style="{
+      left: 20,
+      top: 20,
+      width: 700,
+      height: 60,
+      backgroundColor: '#030303',
+    }"
+  >
+    <jsv-text-box
+      syncDraw="sync"
+      :enableLatex="true"
+      :style="{
+        backgroundColor: '#999999',
+        fontSize: 20,
+        color: '#00ff00',
+        textOverflow: 'clip',
+        height: 26,
+        lineHeight: 26,
+      }"
+      :minWidth="400"
+    >
+      {{ "\\textcolor{#FF0000}{最小宽度400},顶住后方的flex div" }}
+    </jsv-text-box>
+    <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 20,
+      top: 90,
+      width: 700,
+      height: 60,
+      backgroundColor: '#030303',
+    }">
+    <jsv-text-box
+      syncDraw="sync"
+      :enableLatex="true"
+      :style="{
+        backgroundColor: '#999999',
+        fontSize: 20,
+        color: '#00ff00',
+        textOverflow: 'clip',
+        lineHeight: 26,
+      }"
+      :maxWidth="500"
+    >
+      {{ "\\textcolor{#FF0000}{最大宽度500},文字不足500时,以实际为主" }}
+    </jsv-text-box>
+    <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 20,
+      top: 160,
+      width: 700,
+      height: 60,
+      backgroundColor: '#030303',
+    }">
+    <jsv-text-box
+      syncDraw="sync"
+      :enableLatex="true"
+      :style="{
+        backgroundColor: '#999999',
+        fontSize: 20,
+        color: '#00ff00',
+        textOverflow: 'clip',
+        lineHeight: 26,
+      }"
+      :maxWidth="500"
+    >
+      {{ "\\textcolor{#FF0000}{最大宽度500},文字超过500时,自动换行显示,补充文字1,补充文字2,补充文字3" }}
+    </jsv-text-box>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 20,
+      top: 230,
+      width: 200,
+      height: 300,
+      backgroundColor: '#030303',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    }">
+      <jsv-text-box
+        syncDraw="sync"
+        :enableLatex="true"
+        :style="{
+          backgroundColor: '#999999',
+          width: 200,
+          fontSize: 20,
+          color: '#00ff00',
+          textOverflow: 'clip',
+          lineHeight: 26,
+        }"
+        :minHeight="200"
+      >
+        {{ "宽度固定200,\\textcolor{#FF0000}{最小高度200},文字不足以撑起高度时,自动补足高度,顶住下面的flex div" }}
+      </jsv-text-box>
+      <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 300,
+      top: 230,
+      width: 200,
+      height: 300,
+      backgroundColor: '#030303',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    }">
+      <jsv-text-box
+        syncDraw="sync"
+        :enableLatex="true"
+        :style="{
+          backgroundColor: '#999999',
+          width: 200,
+          fontSize: 20,
+          color: '#00ff00',
+          textOverflow: 'clip',
+          lineHeight: 26,
+        }"
+        :maxHeight="200"
+      >
+      {{ "宽度固定200,\\textcolor{#FF0000}{最大高度200},文字不足以撑起高度时,按照实际高度绘制,顶住下面的flex div" }}
+      </jsv-text-box>
+      <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 520,
+      top: 230,
+      width: 200,
+      height: 300,
+      backgroundColor: '#030303',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    }">
+      <jsv-text-box
+        syncDraw="sync"
+        :enableLatex="true"
+        :style="{
+          backgroundColor: '#999999',
+          width: 200,
+          fontSize: 20,
+          color: '#00ff00',
+          textOverflow: 'ellipsis',
+          lineHeight: 26,
+        }"
+        :maxHeight="200"
+      >
+        {{ "宽度固定200,\\textcolor{#FF0000}{最大高度200},文字超过最大高度,进行超出处理,\\textcolor{#FF0000}{高度为整行的倍数(以不超过200的7*26=182)},补充文字1,补充文字2,补充文字3,补充文字4,补充文字5,补充文字6,补充文字7,补充文字8,补充文字9,补充文字10" }}
+    </jsv-text-box>  
+    <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+</template>

package/TextureAnimation/App3.vue

@@ -4,7 +4,7 @@ import { useRouter } from "vue-router";
 import img from "./assets/blackWhiteTurntable.png";
 import img2 from "./assets/light.png";
 import { getDataUrl } from "../CommonUtils/ResourceData";
-import RotateFrame from "./utils/RotateFrame.vue";
+import { GradientFrame, RotateFrame } from "@shijiu/jsview-vue-plus";
 //无网络环境下使用
 const DemoResourceBase = getDataUrl();
 
@@ -18,6 +18,7 @@ const height = ref(200);
 const left = ref(50);
 const top = ref(80);
 
+// const targetBorderRadius = "0 35 80 80"; // 测试各角不同
 const targetBorderRadius = 35;
 const targetLineWidth = 2;
 const texCoord = {
@@ -95,6 +96,15 @@ onBeforeUnmount(() => {});
         :lineWidth="targetLineWidth"
         :withHalo="true"
       />
+      <!-- <gradient-frame
+        :imageUrl="img"
+        :left="left"
+        :top="top"
+        :width="width"
+        :height="height"
+        :borderRadius="targetBorderRadius"
+        :lineWidth="10"
+      /> -->
     </div>
   </jsv-focus-block>
 </template>

package/TouchWidget/App.vue

@@ -4,9 +4,16 @@
  * @Description: file content
 -->
 <script setup>
-import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST, JsvTouchModeSwitcher } from "jsview";
+import {
+  MetroWidget,
+  VERTICAL,
+  useFocusHub,
+  METRO_WIDGET_CONST,
+  JsvTouchModeSwitcher,
+  ForgeConst,
+} from "jsview";
 import WidgetItem from "./WidgetItem.vue";
-import { onMounted, ref, onBeforeUnmount, provide } from "vue";
+import { onMounted, ref, onBeforeUnmount, provide, shallowRef, watch, nextTick } from "vue";
 
 const focusHub = useFocusHub();
 focusHub.enableFocusTrace()
@@ -56,10 +63,59 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   modeSwitchRef.value.unregisterCallback(onModeChange);
-})
+});
+
+const showOverlay = ref(false);
+const overlayRef = shallowRef(null);
+
+const setupOverlayEventConsume = () => {
+  const overlay = overlayRef.value;
+  if (!overlay) {
+    return;
+  }
+  let emptyListener = () => {};
+
+  // 屏蔽所有触控事件
+  overlay.jsvSetTapListener({
+    onClick: emptyListener,
+    onTouchStart: emptyListener,
+    onTouchEnd: emptyListener,
+    onLongPress: emptyListener,
+    onLongPressRelease: emptyListener,
+    onCancel: emptyListener,
+  });
+  // 屏蔽所有鼠标事件
+  overlay.jsvConsumeMouseEvent({ hover: true, scroll: true });
+};
+
+const teardownOverlayEventConsume = () => {
+  
+};
+
+watch(showOverlay, async (visible) => {
+  if (visible) {
+    await nextTick();
+    setupOverlayEventConsume();
+  } else {
+    teardownOverlayEventConsume();
+  }
+});
+
+const onDispatchKeyDown = (ev) => {
+  if (ev.keyCode === 13) {
+    showOverlay.value = !showOverlay.value;
+    return true;
+  }
+  return false;
+};
 </script>
 
 <template>
+  <jsv-focus-block
+    autoFocus
+    :style="{ width: 1280, height: 720 }"
+    :onAction="{ onDispatchKeyDown }"
+  >
   <jsv-touch-mode-switcher
     ref="modeSwitchRef"
     :width="1280"
@@ -70,13 +126,13 @@ onBeforeUnmount(() => {
       :style="{
         left: 100,
         top: 20,
-        width: 800,
+        width: 1200,
         height: 400,
         fontSize: 30,
         color: '#FFFFFF',
       }"
     >
-      {{ `MetroWidget的item是包含MetroWidget的组件` }}
+      {{ `MetroWidget的item是包含MetroWidget的组件, OK键可开启屏蔽蒙层` }}
     </div>
     <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
     <metro-widget
@@ -91,6 +147,7 @@ onBeforeUnmount(() => {
       :direction="VERTICAL"
       :measures="measures"
       :touchFlag="1"
+      :mouseFlag="1"
       :onScroll="onScroll"
     >
       <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
@@ -120,6 +177,34 @@ onBeforeUnmount(() => {
   }">
     {{ modeString }}
   </div>
+
+  <div
+    v-if="showOverlay"
+    ref="overlayRef"
+    :style="{
+      left: 0,
+      top: 0,
+      width: 1280,
+      height: 720,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    }"
+  >
+    <div
+      :style="{
+        left: 0,
+        top: 320,
+        width: 1280,
+        height: 80,
+        lineHeight: 80,
+        fontSize: 36,
+        color: '#FFFFFF',
+        textAlign: 'center',
+      }"
+    >
+      按 OK 键可关闭蒙层
+    </div>
+  </div>
+  </jsv-focus-block>
 </template>
 
 <style scoped>

package/TouchWidget/WidgetItem.vue

@@ -84,6 +84,7 @@ props.onAction.register("onBlur", onBlur);
     :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
     :touchFlag="1"
+    :mouseFlag="1"
     :enableItemRenderBreak="true"
     :placeHolderSetting="{
       backgroundColor: 'rgba(78,105,127, 0.8)',

package/TransitPage/App.vue

@@ -4,6 +4,8 @@ import ActivityApp from "../MetroWidgetDemos/PerformanceTest/App.vue"; // TODO
 import { jJsvRuntimeBridge } from "jsview";
 import { ref, onMounted } from "vue";
 
+// 本用例测试deepLink启动场景
+
 const getShowMode = () => {
   let showMode = 0;
   // showMode信息可被URL中的?后缀信息替换

package/package.json

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