@shijiu/jsview-vue 0.9.602 → 0.9.684

package/samples/MetroWidgetDemos/Item.vue

@@ -2,11 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 17:00:58
+ * @LastEditTime: 2022-11-01 15:24:26
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, inject } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -14,11 +14,28 @@ const props = defineProps({
   onAction: Object,
 });
 
+const divRef = ref(null);
 const focused = ref(false);
 
+const focusSize = inject("focusSize");
+
 // 自身的焦点状态自己记录, 通过回调来改变
 const onFocus = () => {
   focused.value = true;
+  if (focusSize) {
+    divRef.value?.getBoundingClientRect().then(
+      (data) => {
+        console.log("testtest focus size", data)
+        focusSize.width = data.width;
+        focusSize.height = data.height;
+        focusSize.left = data.left;
+        focusSize.top = data.top;
+      },
+      (error) => {
+        console.log("testtest abs failed", error);
+      }
+    );
+  }
 };
 const onBlur = () => {
   focused.value = false;
@@ -53,6 +70,7 @@ props.onAction.register("onClick", onClick);
       }"
     ></div>
     <div
+      ref="divRef"
       :style="{
         width: data.width,
         height: data.height,

package/samples/MetroWidgetDemos/PingPong/App.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-12-21 15:36:29
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 16:11:32
+ * @LastEditTime: 2022-09-01 17:08:21
  * @Description: file content
 -->
 <script>
@@ -20,13 +20,13 @@ for (let i = 0; i < 5; i++) {
     width: 100,
     height: 50,
     marginRight: 10,
-    content: "Tab-" + i,
+    content: "Tab_" + i,
     color: randomColor(),
   });
 
   let data = JSON.parse(JSON.stringify(advanceMetroWidget));
   data.forEach((item) => {
-    item.name = "testPage-" + i + "-" + item.name;
+    item.name = "testPage_" + i + "-" + item.name;
   });
   pageList.push({
     width: 600,

package/samples/MetroWidgetDemos/PingPong/AppPage.vue

@@ -2,13 +2,13 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:38
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 14:43:49
+ * @LastEditTime: 2022-09-01 17:04:31
  * @Description: file content
 -->
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
 import WidgetItem from "../WidgetItem.vue";
-import { reactive } from "vue";
+import { ref, watch, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   data: {
@@ -24,6 +24,8 @@ const props = defineProps({
   },
 });
 
+const widgetRef = ref(null);
+
 const provideData = () => {
   return props.data.data;
 };
@@ -34,10 +36,23 @@ const measures = (item) => {
     doSlide: false,
   };
 };
+
+const watcher = watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    widgetRef.value?.refreshData();
+  }
+);
+
+onBeforeUnmount(() => {
+  watcher();
+})
+
 </script>
 
 <template>
   <metro-widget
+    ref="widgetRef"
     :name="name"
     :width="data.width"
     :height="data.height"

package/samples/MetroWidgetDemos/PingPong/AppTab.vue

@@ -2,19 +2,12 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:19
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 15:39:29
+ * @LastEditTime: 2022-09-01 16:19:51
  * @Description: file content
 -->
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-12-21 17:18:58
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-12-28 10:58:25
- * @Description: 标题 tab
--->
 <script setup>
 import { HORIZONTAL, MetroWidget } from "jsview";
-import Item from "./Item.vue";
+import TabItem from "./TabItem.vue";
 
 const props = defineProps({
   data: {
@@ -62,7 +55,7 @@ const provideData = () => {
       }"
     >
       <template #renderItem="{ data, query, onAction }">
-        <item :data="data" :query="query" :onAction="onAction"></item>
+        <tab-item :data="data" :query="query" :onAction="onAction"></tab-item>
       </template>
     </metro-widget>
   </jsv-focus-block>

package/samples/MetroWidgetDemos/PingPong/{Item.vue → TabItem.vue}

@@ -2,14 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 14:52:53
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 16:08:56
- * @Description: file content
--->
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 17:00:58
+ * @LastEditTime: 2022-09-01 17:10:14
  * @Description: file content
 -->
 <script setup>
@@ -33,13 +26,12 @@ const onFocus = () => {
   active.value = false;
 };
 const onBlur = () => {
-  console.log("cchtest item onblur");
   focused.value = false;
   active.value =
     props.query.getCurrentFocusId().id === props.query.id ? true : false;
 };
 const onClick = () => {
-  console.log("item onclick ", props.data);
+  console.log("tab item onclick ", props.data);
 };
 
 // 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -2,13 +2,13 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:30:33
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-13 10:50:43
+ * @LastEditTime: 2022-09-01 17:05:07
  * @Description: file content
 -->
 <script>
 import AppPage from "./AppPage.vue";
 import { getKeyFramesGroup } from "jsview";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 
 export default {
   components: {

package/samples/MetroWidgetDemos/Simple/AbsoluteTemplate.vue

@@ -10,7 +10,7 @@ import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
 import { useFocusHub } from "jsview";
 import { simpleDataAbs } from "../data";
 import Item from "../Item.vue";
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
 
 const wholePageSlide = new WholePageSlide();
 
@@ -29,7 +29,7 @@ const measuresAbs = (item) => {
 };
 const onEdgeAbs = (edgeInfo) => {
   if (edgeInfo.direction == EdgeDirection.left) {
-    foucsHub.setFocus("mw");
+    focusHub.setFocus("mw");
   }
 };
 </script>

package/samples/MetroWidgetDemos/Simple/App.vue

@@ -13,10 +13,10 @@ import AbsoluteTemplate from "./AbsoluteTemplate.vue";
 import RelativeTemplate from "./RelativeTemplate.vue";
 
 const router = useRouter();
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
 
 const onFocus = () => {
-  foucsHub.setFocus("button");
+  focusHub.setFocus("button");
 };
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {

package/samples/MetroWidgetDemos/Simple/RelativeTemplate.vue

@@ -12,7 +12,7 @@ import { useFocusHub } from "jsview";
 import { simpleData } from "../data";
 import Item from "../Item.vue";
 
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
 const mwRef = ref(null);
 
 const wholePageSlide = new WholePageSlide();
@@ -34,9 +34,9 @@ const onEdge = (edgeInfo) => {
   // MetroWidget焦点到达边缘后的回调
   if (edgeInfo.direction == EdgeDirection.top) {
     buttonFocus.value = true;
-    foucsHub.setFocus("button");
+    focusHub.setFocus("button");
   } else if (edgeInfo.direction == EdgeDirection.right) {
-    foucsHub.setFocus("mwAbs");
+    focusHub.setFocus("mwAbs");
   }
 };
 
@@ -45,7 +45,7 @@ const buttonOnKeyDown = (ev) => {
   switch (ev.keyCode) {
     case 40:
       buttonFocus.value = false;
-      foucsHub.setFocus("mw");
+      focusHub.setFocus("mw");
       return true;
     case 13:
       if (innerData.length == simpleData.length) {

package/samples/MetroWidgetDemos/data.js

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 14:00:33
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-12 14:35:01
+ * @LastEditTime: 2022-11-02 15:23:08
  * @Description: file content
  */
 
@@ -177,6 +177,7 @@ for (let i = 0; i < 10; i++) {
     height: 170,
     name: "widget_" + i,
     marginBottom: 10,
+    index: i,
   });
 }
 

package/samples/Preload/App.vue

@@ -5,6 +5,7 @@ import {
   JsvPreload,
   buildPreloadInfo,
   buildDownloadInfo,
+  useFocusHub,
 } from "jsview";
 import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
@@ -14,11 +15,11 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 const name = "/preload";
+const focusHub = useFocusHub();
 const text = ref("");
-let = preloadInfo = [];
-let = downloadInfo = [];
+let preloadInfo = [];
+let downloadInfo = [];
 const router = useRouter();
-let focusNode = ref(null);
 
 const _onPreloading = (percent) => {
   console.log("preloading ", percent);
@@ -28,9 +29,9 @@ const _onPreloadDone = (imageInfo) => {
   console.log("PRELOAD DONE!", imageInfo);
 };
 
-const _onDownloadDone = () => {
-  console.log("DOWNLOAD DONE!");
-  this.text = `图片下载完成\n${awesome}\n${cat}`;
+const _onDownloadDone = (urls, extra) => {
+  console.log("DOWNLOAD DONE!", urls, extra);
+  text.value = `图片下载完成\n${awesome}\n${cat}`;
 };
 
 const _measures = () => {
@@ -43,13 +44,13 @@ const _measures = () => {
 
 const _onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
   }
   return true;
 };
 
 const _onFocus = () => {
-  focusNode.value.findBlockByName(name).requestFocus();
+  focusHub.setFocus(name);
 };
 
 for (const item of data) {
@@ -58,16 +59,20 @@ for (const item of data) {
 }
 preloadInfo.push(null); // 测试item为null的加载
 downloadInfo = [
-  buildDownloadInfo(awesome),
-  buildDownloadInfo(cat),
+  buildDownloadInfo(awesome, null, true),
+  buildDownloadInfo(cat, null, true),
   buildDownloadInfo(null), // 测试URL为null的加载
 ];
 </script>
 
 <template>
   <jsv-focus-block
-    ref="focusNode"
     autoFocus
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#FFFFFF',
+    }"
     :onAction="{
       onKeyDown: _onKeyDown,
       onFocus: _onFocus,

package/samples/ScaleDownNeon/App.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-10-24 13:19:41
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-10-24 13:50:18
+ * @Description: file content
+-->
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const test1 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
+const test2 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
+const test3 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_3.jpeg)";
+const test4 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_4.jpeg)";
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    if (window.JsView) {
+      window.JsView.setGlobalConfig({
+        texCache: -1,
+      });
+    }
+
+    router.go(-1); // 有router时，回退
+    return true;
+  }
+  return false;
+};
+
+const style1 = {
+  left: 0,
+  top: 0,
+  width: 250,
+  height: 250,
+  borderRadius: "15px",
+};
+
+const style2 = {
+  left: 0,
+  top: 260,
+  width: 250,
+  height: 250,
+  borderRadius: "15px",
+};
+</script>
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div class="allBgc">
+      <div class="block">
+        <div :style="{ left: 0, top: 0 }">
+          <div class="leftFont top0">
+            {{ `原图加载` }}
+          </div>
+          <div class="leftFont top250">
+            {{ `使用缩小算法优化` }}
+          </div>
+        </div>
+
+        <div :style="{ left: 120, top: 0 }">
+          <img alt="" :style="style1" :src="test4" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test4" />
+        </div>
+
+        <div :style="{ left: 380, top: 0 }">
+          <img alt="" :style="style1" :src="test1" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test1" />
+        </div>
+
+        <div :style="{ left: 640, top: 0 }">
+          <img alt="" :style="style1" :src="test2" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test2" />
+        </div>
+
+        <div :style="{ left: 900, top: 0 }">
+          <img alt="" :style="style1" :src="test3" />
+          <img alt="" :style="style2" jsvImgScaledownTex :src="test3" />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+<style scoped>
+.allBgc {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+.block {
+  left: 20;
+  top: 50;
+}
+.leftFont {
+  left: 0;
+  width: 100;
+  height: 200;
+  color: #ffffff;
+  font-size: 25px;
+}
+.top0 {
+  top: 0;
+}
+.top250 {
+  top: 250;
+}
+</style>

package/samples/TextBox/App.vue

@@ -7,19 +7,14 @@
  * JsvTextBox：Vue高阶组件，文字的垂直对齐方式显示控件
  *      props说明:
  *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
- *          stylesList {array}    布局样式(必需)，数组中可包含样式对象或者JsvStyleClass，或者JsvTextStyleClass对象，
- *                                  样式对象内容为{left:0, top:0, width:xxx, height:xxx}，
- *                                  布局样式为数组中所有样式的合并。
- *          styleToken {string}     类似于vue html元素的key，当style变化时，由使用者改变此Token通知hoc进行style重新识别。
- *                                  Token不变的场景，props变化不会引起render，以提高渲染性能
+ *          style {object}          样式(必需)
  *
  * 【技巧说明】
  * Q: 如何实现文字居中对齐方式显示?
  * A: verticalAlign属性设置为middle
  *
  * Q: 如何触发控件重绘?
- * A: 1. 变更styleToken属性，将触发控件重新解析styles并重绘
- *    2. 变更文字内容，将触发控件重绘，但不会重新解析styles
+ * A: 1. 变更文字内容，将触发控件重绘，但不会重新解析styles
  -->
 
  <script setup>
@@ -27,7 +22,6 @@ import RenderLeft from "./RenderLeft.vue";
 import RenderRight from "./RenderRight.vue";
 import RenderCenter from "./RenderCenter.vue";
 import RenderOneLine from "./RenderOneLine.vue";
-import { JsvTextStyleClass, JsvStyleClass } from "jsview";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
@@ -41,53 +35,7 @@ const text = `静夜思 --唐李白
 const text_latex = `静夜思 --唐李白
 床前\\textcolor{#FF0000}{明月光}，疑是地上霜；
 举头\\textcolor{#0000FF}{望明月}，低头思故乡。`;
-const sLayoutSet = new JsvStyleClass({
-  width: 400,
-  height: 300,
-  backgroundColor: "rgba(255,255,0,0.5)",
-});
-const sFontSetLeft40Top = new JsvTextStyleClass({
-  fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-  textAlign: "left",
-  lineHeight: "40px",
-});
-const sFontSetLeft40Center = new JsvTextStyleClass({
-  fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-  textAlign: "left",
-  lineHeight: "40px",
-});
-const sFontSetLeft40Bottom = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "left",
-  lineHeight: "40px",
-});
-const sFontSetLeft80 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "left",
-  lineHeight: "80px",
-});
-const sFontSetCenter40 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "center",
-  lineHeight: "40px",
-});
-const sFontSetCenter80 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "center",
-  lineHeight: "80px",
-});
-const sFontSetRight40 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "right",
-  lineHeight: "80px",
-});
-const sFontSetRight80 = new JsvTextStyleClass({
-  fontSize: "30px",
-  textAlign: "right",
-  lineHeight: "80px",
-});
-const sStyleToken = "v1.0";
-const rootRef = ref(null);
+
 const moveCount = ref(0);
 
 const onKeyDown = (ev) => {
@@ -133,32 +81,10 @@ const onBlur = () => {
     }"
   >
     <div :style="{ top: offsetY, left: offsetX }">
-      <RenderLeft
-        :text="text"
-        :moveCount="moveCount"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetLeft40Top="sFontSetLeft40Top"
-        :sFontSetLeft40Center="sFontSetLeft40Center"
-        :sFontSetLeft40Bottom="sFontSetLeft40Bottom"
-        :sFontSetLeft80="sFontSetLeft80"
-      />
-      <RenderRight
-        :text="text"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetRight40="sFontSetRight40"
-        :sFontSetRight80="sFontSetRight80"
-      />
-      <RenderCenter
-        :text="text"
-        :text_latex="text_latex"
-        :sStyleToken="sStyleToken"
-        :sLayoutSet="sLayoutSet"
-        :sFontSetCenter40="sFontSetCenter40"
-        :sFontSetCenter80="sFontSetCenter80"
-      />
-      <RenderOneLine :text="onLineText" :sStyleToken="sStyleToken" />
+      <RenderLeft :text="text" :moveCount="moveCount" />
+      <RenderRight :text="text" />
+      <RenderCenter :text="text" :text_latex="text_latex" />
+      <RenderOneLine :text="onLineText" />
     </div>
   </jsv-focus-block>
 </template>

package/samples/TextBox/RenderCenter.vue

@@ -4,10 +4,6 @@ export default {
   props: {
     text: String,
     text_latex: String,
-    sStyleToken: String,
-    sLayoutSet: Object,
-    sFontSetCenter40: Object,
-    sFontSetCenter80: Object,
   },
   components: { JsvTextBox },
 };
@@ -31,8 +27,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'top'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 0, top: 0 }]"
+      :style="{
+        left: 0,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
     >
       {{ `[TC]${text}` }}
     </JsvTextBox>
@@ -52,8 +56,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 410, top: 0 }]"
+      :style="{
+        left: 410,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
       :enableLatex="true"
     >
       {{ `[MC]${text_latex}` }}
@@ -74,8 +86,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'bottom'"
-      :styleToken="sStyleToken"
-      :stylesList="[sLayoutSet, sFontSetCenter40, { left: 820, top: 0 }]"
+      :style="{
+        left: 820,
+        top: 0,
+        width: 400,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
     >
       {{ `[BC]${text}` }}
     </JsvTextBox>
@@ -96,12 +116,16 @@ export default {
     </div>
     <JsvTextBox
       :verticalAlign="'middle'"
-      :styleToken="sStyleToken"
-      :stylesList="[
-        sLayoutSet,
-        sFontSetCenter80,
-        { left: 1240, top: 0, width: 500 },
-      ]"
+      :style="{
+        left: 1240,
+        top: 0,
+        width: 500,
+        height: 300,
+        backgroundColor: 'rgba(255,255,0,0.5)',
+        fontSize: '30px',
+        textAlign: 'center',
+        lineHeight: '80px',
+      }"
     >
       {{ `[MC]${text}` }}
     </JsvTextBox>