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

package/Input/InputPanel.vue

@@ -8,7 +8,7 @@
 <script setup>
 import FullKeyboard from "./FullKeyboard.vue";
 import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
-import { shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
 
 const blurColor = "#AAAAAA";
 const focusColor = "#FFFF00";
@@ -17,6 +17,8 @@ let input = shallowRef(null);
 let showCursor = shallowRef(false);
 const focusHub = useFocusHub();
 let cursorColor = shallowRef(blurColor);
+let imeAction = shallowRef(null);
+let imeActionColor = shallowRef("#ffffff");
 const props = defineProps({
   name: String,
   type: Number,
@@ -24,6 +26,44 @@ const props = defineProps({
   placeHolder: String,
   onEdge: Function,
 });
+const _randomHexColor = () => {
+  const r = Math.floor(Math.random() * 256)
+    .toString(16)
+    .padStart(2, "0");
+  const g = Math.floor(Math.random() * 256)
+    .toString(16)
+    .padStart(2, "0");
+  const b = Math.floor(Math.random() * 256)
+    .toString(16)
+    .padStart(2, "0");
+  return `#${r}${g}${b}`;
+};
+const _imeActionLabel = (action) => {
+  switch (action) {
+    case 0:
+      return "UNSPECIFIED";
+    case 1:
+      return "NONE";
+    case 2:
+      return "GO";
+    case 3:
+      return "SEARCH";
+    case 4:
+      return "SEND";
+    case 5:
+      return "NEXT";
+    case 6:
+      return "DONE";
+    case 7:
+      return "PREVIOUS";
+    default:
+      return "UNKNOWN";
+  }
+};
+const imeActionInfo = computed(() => {
+  if (imeAction.value === null || imeAction.value === undefined) return "-";
+  return `${imeAction.value} (${_imeActionLabel(imeAction.value)})`;
+});
 const _onFocus = () => {
   showCursor.value = true;
   cursorColor.value = blurColor;
@@ -58,7 +98,13 @@ const _onTextOverflow = () => {
   console.log(props.name + " text overflow.");
 };
 const _onBackKey = (isUp) => {
-  return true; // 无论是key-down还是key-up都consume，防止软键盘有时候返回会吐出导致界面回退的问题
+  // 无论是key-down还是key-up都consume，防止软键盘有时候用返回键关闭时引起界面退出的问题
+  return true;
+};
+const _onImeAction = (action) => {
+  imeAction.value = action;
+  imeActionColor.value = _randomHexColor();
+  console.log(props.name + " ime action:", action);
 };
 const _inputOnEdge = (edgeInfo) => {
   if (edgeInfo.direction === EdgeDirection.bottom) {
@@ -110,9 +156,23 @@ const _inputOnEdge = (edgeInfo) => {
       :onTextOverflow="_onTextOverflow"
       :cursorColor="cursorColor"
       :onBackKey="_onBackKey"
+      :onImeAction="_onImeAction"
     />
 
-    <div :style="{ top: 100 }">
+    <div
+      :style="{
+        left: 50,
+        top: 95,
+        width: 300,
+        height: 20,
+        color: imeActionColor,
+        fontSize: 16,
+      }"
+    >
+      IME action: {{ imeActionInfo }}
+    </div>
+
+    <div :style="{ top: 110 }">
       <full-keyboard
         :name="`${props.name}/keyboard`"
         :onClick="_keyboardOnClick"

package/JsvLine/App.vue

@@ -16,60 +16,75 @@
 </template>
 
 <script setup>
+import { shallowRef, onMounted, onBeforeUnmount } from "vue"
 import { JsvLine } from "jsview"
 import bg from "./bgimage.jpg"
 
-const startPos1={
-    x:340,
-    y:40
+const startPos1 = {
+    x: 340,
+    y: 40
 }
-const endPos1={
-    x:340,
-    y:160
+const endPos1 = {
+    x: 340,
+    y: 160
 }
 
-const startPos2={
-    x:840,
-    y:150
-}
-const endPos2={
-    x:1040,
-    y:50
-}
+// 修改为响应式并定时切换
+const states = [
+    { start: { x: 840, y: 150 }, end: { x: 1040, y: 50 } },
+    { start: { x: 840, y: 150 }, end: { x: 1140, y: 100 } }
+];
+const startPos2 = shallowRef({ ...states[0].start });
+const endPos2 = shallowRef({ ...states[0].end });
+
+let posIndex = 0;
+let timer = null;
+
+onMounted(() => {
+    timer = setInterval(() => {
+        posIndex = (posIndex + 1) % states.length;
+        startPos2.value = { ...states[posIndex].start };
+        endPos2.value = { ...states[posIndex].end };
+    }, 1500);
+});
+onBeforeUnmount(() => {
+    clearInterval(timer);
+});
 
-const startPos3={
-    x:340,
-    y:300
+// 其它样例保持不变
+const startPos3 = {
+    x: 340,
+    y: 300
 }
-const endPos3={
-    x:560,
-    y:400
+const endPos3 = {
+    x: 560,
+    y: 400
 }
 
-const startPos4={
-    x:760,
-    y:400
+const startPos4 = {
+    x: 760,
+    y: 400
 }
-const endPos4={
-    x:980,
-    y:300
+const endPos4 = {
+    x: 980,
+    y: 300
 }
 
-const startPos5={
-    x:240,
-    y:550
+const startPos5 = {
+    x: 240,
+    y: 550
 }
-const endPos5={
-    x:500,
-    y:520
+const endPos5 = {
+    x: 500,
+    y: 520
 }
-const startPos6={
-    x:840,
-    y:520
+const startPos6 = {
+    x: 840,
+    y: 520
 }
-const endPos6={
-    x:1100,
-    y:550
+const endPos6 = {
+    x: 1100,
+    y: 550
 }
 </script>
 

package/LatexDemo/App.vue

@@ -10,6 +10,8 @@ const baseStyle = {
 
 //TODO 此字符串直接写在双花括号内编译出错, 待调查
 const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
+
+const testText = `测试\\textcolor{#FF0000}{{红色}试花括号{ 文字 }}文字`
 </script>
 
 <template>
@@ -19,7 +21,7 @@ const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
     :style="{ top: 50, ...baseStyle }"
     class="textStyle"
   >
-    {{ "测试\\textcolor{#FF0000}{红色}文字" }}
+    {{ testText }}
   </jsv-text-box>
   <jsv-text-box
     :enableLatex="true"

package/LatexFormula/App.vue

@@ -78,8 +78,189 @@ const stringList = [
 
 这个角的正切值是 \\(0.75\\)，余切值是 \\(1.33333333\\)。`,
   },
+  {
+    width: 1100,
+    detail: '说明：超长的公式文本不会描画',
+    str: `
+    测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\`,
+  },
 ];
 const dataIndex = ref(0);
+const testDetail = ref("");
 const width = computed(() => {
   return stringList[dataIndex.value].width;
 });
@@ -90,6 +271,10 @@ const latexStr = computed(() => {
   return processLatexStr(s);
 });
 
+const detail = computed(() => {
+  return stringList[dataIndex.value].detail || '';
+});
+
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
     case 37:
@@ -117,6 +302,17 @@ const onKeyDown = (ev) => {
       backgroundColor: '#007788',
     }"
   ></jsv-focus-block>
+  <div
+    :style="{
+      width: 320,
+      left: 1280 - 320,
+      top: 30,
+      height: 200,
+      fontSize: 20,
+    }"
+  >
+    {{ detail }}
+  </div>
   <jsv-latex
     :key="dataIndex"
     :latexStr="latexStr"

package/LongImage/App.vue

@@ -4,7 +4,7 @@
  * 带下拉条的长图片展示样例
  *
  * 【控件介绍】
- * SimpleWidget：见simpleMetrowidget
+ * MetroWidget：见MetroWidget.vue的头说明
  *
  * 【技巧说明】
  * Q: 如何让图片的高度自适应？

package/LongImage/LongImageScroll.vue

@@ -1,7 +1,13 @@
 <script setup>
 import Scroll from "./Scroll.vue";
 import { ref, shallowRef, onMounted } from "vue";
-import { useFocusHub } from "jsview";
+import {
+  useFocusHub,
+  JsvFlexDiv,
+  VERTICAL,
+  JsvScrollBox,
+  ScrollBoxStyle,
+} from "jsview";
 
 const props = defineProps({
   step: Number,
@@ -11,41 +17,48 @@ const props = defineProps({
   imageSrc: String,
 });
 
-const focusHub = useFocusHub();
-const element = shallowRef(null);
+
+const rootRef = ref(null);
+const element = ref(null);
 const scrollY = ref(0);
-const textY = ref(0);
+
+const focusHub = useFocusHub();
+
+let imageY = 0;
+let rScrollHeight = shallowRef(0);
+let rJsvScrollBox = shallowRef(null);
+let imageTotalHeight = 0;
+const onSizeReady = (width, height) => {
+  imageTotalHeight = height;
+  rScrollHeight.value = height;
+  console.log(`size ready width=${width} height=${height}`);
+};
+
 const onAction = {
   onKeyDown: (ev) => {
-    const valid =
-      element.value &&
-      element.value.clientHeight &&
-      element.value.clientHeight > props.style.height;
+    const valid = element.value && imageTotalHeight > 0;
     // let keyUsed = true;
     if (valid) {
-      let text_y;
+      // 测试用比对代码，正式场景不需要
+      // if (imageTotalHeight != element.value.clientHeight) {
+      //   console.error("Error: height miss match");
+      // }
+
+      let image_y;
       switch (ev.keyCode) {
         case 38:
-          if (textY.value !== 0) {
-            text_y =
-              textY.value + props.step >= 0 ? 0 : textY.value + props.step;
-            (textY.value = text_y),
-              (scrollY.value =
-                (-text_y / (element.value.clientHeight - props.style.height)) *
-                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          if (imageY !== 0) {
+            image_y = imageY + props.step >= 0 ? 0 : imageY + props.step;
+            slideToYByKey(image_y);
           }
           break;
         case 40:
-          if (textY.value !== props.style.height - element.value.clientHeight) {
-            text_y =
-              textY.value - props.step <=
-              props.style.height - element.value.clientHeight
-                ? props.style.height - element.value.clientHeight
-                : textY.value - props.step;
-            (textY.value = text_y),
-              (scrollY.value =
-                (-text_y / (element.value.clientHeight - props.style.height)) *
-                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          if (imageY !== props.style.height - imageTotalHeight) {
+            image_y =
+              imageY - props.step <= props.style.height - imageTotalHeight
+                ? props.style.height - imageTotalHeight
+                : imageY - props.step;
+            slideToYByKey(image_y);
           } else {
             focusHub.setFocus("button");
           }
@@ -53,35 +66,75 @@ const onAction = {
       }
     }
   },
-  onFocus: () => {
-    console.log("LongImageScroll getFocus");
-  },
-  onBlur: () => {
-    console.log("LongImageScroll loseFocus");
-  },
 };
+function slideToYByKey(newY) {
+  // 使用新的Y来调整ScrollBox的显示位置
+  rJsvScrollBox.value.updatePercent(
+    -newY / (imageTotalHeight - props.style.height)
+  );
 
-const onLoad = () => {
-  // 图片加载完成的回调
-  console.log("Image loaded!");
-};
+  recordY(newY);
+
+  // 不再直接更新右边进度条的进度
+  // 将由 JsvScrollBox 的syncWith机制来同步
+  // 注意: 目前这个机制在PC上没有模拟，
+  // 如果PC上也需要看到同步效果，则可通过 window.JsView 是否存在来识别非盒子情况，此时主动改变bar的top
+}
+
+function recordY(newY) {
+  // 记录text Y，为为下次按键的基准坐标
+  imageY = newY;
+}
 
 onMounted(() => {
-  focusHub.setFocus("longImageScroll");
+  rootRef.value.requestFocus();
+
+  // 检测滚动触控触发的移动，
+  // 当 updatePercent 调用后如果移动距离大于阈值也会回调
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    let newY = Math.floor(y);
+    console.log(
+      `onProgress dragged percent=${percent} x=${Math.floor(x)} y=${newY}`
+    );
+    recordY(newY);
+  }, 15 /* 每动15px才接收一次通知，减少js被调用的频率，从而减小对性能的影响 */);
 });
 </script>
 
-
 <template>
-  <jsv-focus-block name="longImageScroll" :onAction="onAction">
+  
+  <jsv-focus-block ref="rootRef" name="longImageScroll" :onAction="onAction">
     <div :style="{ overflow: 'hidden', ...style }">
-      <img
-        alt=""
-        ref="element"
-        :src="imageSrc"
-        :style="{ top: textY, width: style.width }"
-        :onLoad="onLoad"
-      />
+      <jsv-scroll-box
+        ref="rJsvScrollBox"
+        linkName="ScrollBoxTextArea"
+        syncWith="ScrollBarTextArea"
+        :style="{
+          width: style.width,
+          height: style.height,
+        }"
+        :direction="VERTICAL"
+        :mode="ScrollBoxStyle.DrawerMode"
+        :enableFling="true"
+        :sliderSize="{
+          height: rScrollHeight == 0 ? style.height : rScrollHeight,
+        }"
+        :enableMouseWheel="true"
+      >
+        <template #SliderBox>
+          <jsv-flex-div
+            :style="{ width: style.width }"
+            :onSized="onSizeReady"
+          >
+            <img
+              alt=""
+              ref="element"
+              :src="imageSrc"
+              :style="{ top: imageY, width: style.width }"
+            />
+          </jsv-flex-div>
+        </template>
+      </jsv-scroll-box>
     </div>
     <Scroll
       :top="scrollY"
@@ -89,4 +142,4 @@ onMounted(() => {
       :scrollBlockStyle="scrollBlockStyle"
     />
   </jsv-focus-block>
-</template>
+</template>

package/LongImage/Scroll.vue

@@ -1,14 +1,33 @@
-<script setup>
-defineProps({
+<script setup lang="ts">
+import { VERTICAL, JsvScrollBox, SeamlessSlide, ScrollBoxStyle } from "jsview";
+
+let rProps = defineProps({
   scrollStyle: Object,
-  top: Number,
   scrollBlockStyle: Object,
 });
+
+let { left: cScrollLeft, ...cScrollSubStyle } = rProps.scrollStyle as any;
 </script>
 <template>
-  <div :style="{ ...scrollStyle }">
-    <div :style="{ top: top }">
-      <div :style="{ ...scrollBlockStyle }"></div>
-    </div>
-  </div>
-</template>
+  <jsv-scroll-box
+    linkName="ScrollBarTextArea"
+    syncWith="ScrollBoxTextArea"
+    :style="{
+      left: cScrollLeft,
+      width: cScrollSubStyle.width,
+      height: cScrollSubStyle.height,
+    }"
+    :direction="VERTICAL"
+    :mode="ScrollBoxStyle.PinMode"
+    :sliderSize="{
+      height: (rProps.scrollBlockStyle as any).height,
+    }"
+  >
+    <template #FixedBox>
+      <div :style="{ ...cScrollSubStyle }" />
+    </template>
+    <template #SliderBox>
+      <div :style="{ ...rProps.scrollBlockStyle }" />
+    </template>
+  </jsv-scroll-box>
+</template>

package/LongText/LongTextScroll.vue

@@ -124,6 +124,7 @@ onMounted(() => {
         :sliderSize="{
           height: rScrollHeight == 0 ? style.height : rScrollHeight,
         }"
+        :enableMouseWheel="true"
       >
         <template #SliderBox>
           <jsv-flex-div