@shijiu/jsview-vue 0.9.602 → 0.9.684

package/samples/Marquee/App.vue

@@ -2,23 +2,31 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-18 18:24:18
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 13:41:53
+ * @LastEditTime: 2022-11-10 15:29:12
  * @Description: file content
 -->
 <script setup>
 import { jJsvRuntimeBridge, JsvMarquee } from "jsview";
 import { useRouter } from "vue-router";
 import { onMounted } from "vue";
+import { longLongText, rtlLongLongText } from "./longText";
 
-const width = 600;
-const height = 50;
-const fontStyle = {
-  lineHeight: 50,
+const slideSpeed = 240;
+const width = 600,
+  height = 70;
+const style = {
+  width,
+  height,
+  lineHeight: 70,
   fontSize: 50,
+  color: "#000000",
 };
 const longText =
   "石室诗士施氏，嗜狮，誓食十狮。施氏时时适市视狮。十时，适十狮适市。是时，适施氏适市。施氏视是十狮，恃矢势，使是十狮逝世。氏拾是十狮尸，适石室。石室湿，氏使侍拭石室。石室拭，施氏始试食是十狮尸。食时，始识是十狮尸，实十石狮尸。试释是事。";
 const shortText = "测试文字";
+
+const rtlText = 'ABC انجليزي "abc" سعر الملابس 180 ';
+
 const router = useRouter();
 
 const _onKeyDown = (ev) => {
@@ -37,6 +45,11 @@ onMounted(() => {
     :onAction="{
       onKeyDown: _onKeyDown,
     }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
   >
     <div
       :style="{
@@ -44,68 +57,191 @@ onMounted(() => {
         top: 50,
         width: width,
         height: height,
-        backgroundColor: '#007788',
+        backgroundColor: '#FFFFFF',
       }"
     >
       <jsv-marquee
-        :layoutStyles="{
-          width: width,
-          height: height,
-        }"
-        :fontStyles="fontStyle"
+        :style="style"
         :text="longText"
-        :slideSpeed="120"
+        :slideSpeed="slideSpeed"
         :forceSlide="false"
       />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        长文字滚动
+      </div>
+    </div>
+    <div
+      :style="{
+        left: 50,
+        top: 130,
+        width: width,
+        height: height,
+        backgroundColor: '#FFFFFF',
+      }"
+    >
+      <jsv-marquee :style="style" :text="shortText" :forceSlide="false" />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        短文字不滚动
+      </div>
     </div>
     <div
       :style="{
         left: 50,
-        top: 120,
+        top: 210,
         width: width,
         height: height,
-        backgroundColor: '#007788',
+        backgroundColor: '#FFFFFF',
       }"
     >
       <jsv-marquee
-        :layoutStyles="{
-          width: width,
-          height: height,
-        }"
-        :fontStyles="fontStyle"
+        :style="style"
         :text="shortText"
-        :forceSlide="false"
+        :slideSpeed="slideSpeed"
+        :forceSlide="true"
       />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        短文字滚动
+      </div>
     </div>
     <div
       :style="{
         left: 50,
-        top: 190,
+        top: 290,
         width: width,
         height: height,
-        backgroundColor: '#007788',
+        backgroundColor: '#FFFFFF',
       }"
     >
       <jsv-marquee
-        :layoutStyles="[
-          {
-            width: width,
-            height: height,
-          },
-        ]"
-        :text="shortText"
-        :slideSpeed="60"
+        :style="{
+          width,
+          height,
+          lineHeight: 70,
+          fontSize: 50,
+          color: '#000000',
+          direction: 'rtl',
+        }"
+        :text="rtlText"
+        :slideSpeed="slideSpeed"
+      />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        rtl文字
+      </div>
+    </div>
+    <div
+      :style="{
+        left: 50,
+        top: 370,
+        width: width,
+        height: height,
+        backgroundColor: '#FFFFFF',
+      }"
+    >
+      <jsv-marquee
+        :style="{
+          width,
+          height,
+          lineHeight: 70,
+          fontSize: 50,
+          color: '#000000',
+          direction: 'rtl',
+        }"
+        text="انجليزي"
+        :slideSpeed="slideSpeed"
         :forceSlide="true"
-        className="test-font"
       />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        rtl短文字滚动
+      </div>
+    </div>
+
+    <div
+      :style="{
+        left: 50,
+        top: 450,
+        width: width,
+        height: height,
+        backgroundColor: '#FFFFFF',
+      }"
+    >
+      <jsv-marquee
+        :style="style"
+        :text="longLongText"
+        :slideSpeed="2000"
+        :forceSlide="false"
+      />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        超长文字
+      </div>
     </div>
-  </jsv-focus-block>
-</template>
 
-<style scoped>
-.test-font {
-  font-size: 50;
-  line-height: 50;
-  color: #ff0000;
-}
-</style>
+    <div
+      :style="{
+        left: 50,
+        top: 530,
+        width: width,
+        height: height,
+        backgroundColor: '#FFFFFF',
+      }"
+    >
+      <jsv-marquee
+        :style="{
+          width,
+          height,
+          lineHeight: 70,
+          fontSize: 50,
+          color: '#000000',
+          direction: 'rtl',
+        }"
+        :text="rtlLongLongText"
+        :slideSpeed="2000"
+        :forceSlide="false"
+      />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        超长rtl文字
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/Marquee/longText.js

@@ -0,0 +1,14 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-11-10 15:08:28
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-10 15:21:11
+ * @Description: file content
+ */
+const longLongText =
+  "艾因小萌班用户服务协议及隐私权保护政策特别提示：欢迎您使用“艾因小萌班”。本用户服务协议及隐私权保护政策（下称“本协议”）是您与运营方之间订立的具有法律效力的合同。请您仔细阅读并充分理解本协议各条款内容，特别是涉及免除或者限制责任的条款、权利许可和信息使用的条款、同意开通和使用特殊单项服务的条款、法律适用和争议解决条款等。其中，免除或者限制责任条款等重要内容可能以下划线/加粗进行提示您，您应重点阅读。未成年人用户请在法定监护人陪同下仔细阅读并充分理解本协议，并征得法定监护人的同意后使用“艾因小萌班”。除非您完全接受本协议的全部内容，否则您无权下载、注册、登录、使用（以下统称“使用”）“艾因小萌班”，或者通过任何方式使用“艾因小萌班”服务，或者获得“艾因小萌班”提供的任何服务（本协议中统称“使用”）。若您使用“艾因小萌班”及相关服务，则视为您已充分理解本协议并承诺作为本协议的一方当事人接受协议的约束，您不得以未仔细阅读、未充分理解等理由拒绝接受本协议的约束。本协议内容或不能保证完全符合未来业务发展需求。为此，您同意运营方保留随时修改本协议的权利。本协议条款修改后，运营方将及时公布，您同意予以密切关注。如果您继续使用艾因小萌班，即视为您完全接受修改后的协议。如果您不接受修改后的协议，请立即停止使用艾因小萌班。关于艾因小萌班的使用您使用“艾因小萌班”及相关服务，登录后，系统将为您自动匹配一个不可更改的用户ID,您应妥善保管该用户ID并对以您用户ID所进行的所有活动负法律责任。";
+
+const rtlLongLongText =
+  "مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم ";
+
+export { longLongText, rtlLongLongText };

package/samples/MetroWidgetDemos/Advanced/App.vue

@@ -2,22 +2,21 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:31:36
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-18 10:00:27
+ * @LastEditTime: 2022-11-02 14:51:40
  * @Description: file content
 -->
 <script setup>
-import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
+import { MetroWidget, VERTICAL, EdgeDirection, useFocusHub } from "jsview";
 import { useRouter } from "vue-router";
-import { useFocusHub } from "jsview";
 import Buttons from "./Buttons.vue";
 import Mixed from "./Mixed.vue";
-import Widgets from "./Widgets.vue";
+import Widgets from "./widgets/Widgets.vue";
 
 const router = useRouter();
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
 
 const onFocus = () => {
-  foucsHub.setFocus("mwButton");
+  focusHub.setFocus("mwButton");
 };
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {

package/samples/MetroWidgetDemos/Advanced/ButtonItem.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:26:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 17:00:47
+ * @LastEditTime: 2022-11-02 15:37:33
  * @Description: file content
 -->
 <script setup>

package/samples/MetroWidgetDemos/Advanced/Buttons.vue

@@ -11,7 +11,7 @@ import { useFocusHub } from "jsview";
 import { advanceButton } from "../data";
 import ButtonItem from "./ButtonItem.vue";
 
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
 
 //item为Buttonitem的一些回调
 const provideData = () => {
@@ -27,9 +27,9 @@ const measures = (item) => {
 };
 const onEdge = (edgeInfo) => {
   if (edgeInfo.direction == EdgeDirection.right) {
-    foucsHub.setFocus("mwWidget");
+    focusHub.setFocus("mwWidget");
   } else if (edgeInfo.direction == EdgeDirection.bottom) {
-    foucsHub.setFocus("mwMix");
+    focusHub.setFocus("mwMix");
   }
 };
 </script>
@@ -38,7 +38,7 @@ const onEdge = (edgeInfo) => {
   <div
     :style="{
       left: 50,
-      top: 50,
+      top: 20,
       width: 300,
       height: 400,
       fontSize: 30,
@@ -49,7 +49,7 @@ const onEdge = (edgeInfo) => {
   </div>
   <metro-widget
     name="mwButton"
-    :top="150"
+    :top="120"
     :left="50"
     :provideData="provideData"
     :width="220"

package/samples/MetroWidgetDemos/Advanced/Mixed.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:31:36
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-18 09:57:40
+ * @LastEditTime: 2022-11-02 15:37:40
  * @Description: file content
 -->
 <script setup>
@@ -12,7 +12,7 @@ import { advanceMix } from "../data";
 import ButtonItem from "./ButtonItem.vue";
 import Item from "../Item.vue";
 
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
 
 //item混排的回调
 const provideData = () => {
@@ -28,9 +28,9 @@ const measures = (item) => {
 };
 const onEdge = (edgeInfo) => {
   if (edgeInfo.direction == EdgeDirection.right) {
-    foucsHub.setFocus("mwWidget");
+    focusHub.setFocus("mwWidget");
   } else if (edgeInfo.direction == EdgeDirection.top) {
-    foucsHub.setFocus("mwButton");
+    focusHub.setFocus("mwButton");
   }
 };
 </script>

package/samples/MetroWidgetDemos/Advanced/widgets/Item.vue

@@ -0,0 +1,83 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-11-01 15:30:14
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-02 15:39:17
+ * @Description: file content
+-->
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-05-10 15:21:24
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-01 15:24:26
+ * @Description: file content
+-->
+<script setup>
+import { ref, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  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) => {
+        focusSize.width = data.width;
+        focusSize.height = data.height;
+        focusSize.left = data.left;
+        focusSize.top = data.top;
+      },
+      (error) => {
+        console.log("get absolute position failed", error);
+      }
+    );
+  }
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+
+// 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
+      transition: 'transform 0.2s linear',
+    }"
+  >
+    <div
+      ref="divRef"
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: '30px',
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+        borderRadius: '10px',
+        animation: animation,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/samples/MetroWidgetDemos/Advanced/widgets/WidgetItem.vue

@@ -0,0 +1,89 @@
+
+<script setup>
+import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
+import { ref } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onItemEdge: Function,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+const mwRef = ref(null);
+
+const measures = (item) => {
+  return item;
+};
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: (i + props.data.index) % 2 == 0 ? 90 : 180,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  return data;
+};
+const onFocus = (rect) => {
+  //获得焦点时需要做就近移动的处理, 因此需要通过setEnterFocusRect设置寻找最近焦点的区域
+  mwRef.value?.setEnterFocusRect(rect);
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  mwRef.value?.getFocusBlockRef().returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 900,
+      height: 50,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ data.name }}
+  </div>
+  <!-- sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
+  <!-- onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
+  <metro-widget
+    ref="mwRef"
+    :top="50"
+    :name="data.name"
+    :provideData="provideData"
+    :width="data.width"
+    :height="data.height"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 30,
+      right: 30,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :slideSetting="seamlessSlide"
+    :onEdge="onItemEdge"
+    :sendFocusRectEvent="true"
+  >
+    <template #renderItem="{ data, query, onAction }">
+      <item :data="data" :query="query" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/Advanced/{Widgets.vue → widgets/Widgets.vue}

@@ -2,21 +2,46 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:31:36
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-18 09:59:32
+ * @LastEditTime: 2022-11-02 15:35:12
  * @Description: file content
 -->
 <script setup>
-import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
-import { useFocusHub } from "jsview";
-import { advanceMetroWidget } from "../data";
-import WidgetItem from "../WidgetItem.vue";
+import {
+  MetroWidget,
+  VERTICAL,
+  EdgeDirection,
+  JsvNinePatch,
+  useFocusHub,
+} from "jsview";
+import { advanceMetroWidget } from "../../data";
+import WidgetItem from "../widgets/WidgetItem.vue";
+import focusImg from "./focus1.png";
+import { ref, reactive, provide } from "vue";
 
-const foucsHub = useFocusHub();
+const focusHub = useFocusHub();
+const showFocus = ref(false);
 
-//item为Widgetitem的一些回调
 const provideData = () => {
   return advanceMetroWidget;
 };
+
+const onFocus = () => {
+  console.log("testtest", " widget onfocus");
+  showFocus.value = true;
+};
+
+const onBlur = () => {
+  showFocus.value = false;
+};
+
+const focusSize = reactive({
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+});
+provide("focusSize", focusSize);
+
 // measures中会返回doSlide: false, 既MetroWidget自身不处理滚动, 滚动由子的sendFocusRectEvent控制
 const measures = (item) => {
   return {
@@ -29,7 +54,7 @@ const measures = (item) => {
 };
 const onEdge = (edgeInfo) => {
   if (edgeInfo.direction == EdgeDirection.left) {
-    foucsHub.setFocus("mwButton");
+    focusHub.setFocus("mwButton");
   }
 };
 </script>
@@ -38,7 +63,7 @@ const onEdge = (edgeInfo) => {
   <div
     :style="{
       left: 500,
-      top: 50,
+      top: 20,
       width: 500,
       height: 400,
       fontSize: 30,
@@ -47,16 +72,20 @@ const onEdge = (edgeInfo) => {
   >
     {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
   </div>
+  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
   <metro-widget
     name="mwWidget"
-    :top="150"
+    :top="100"
     :left="400"
     :provideData="provideData"
-    :width="600"
+    :width="660"
     :height="600"
+    :padding="{ left: 30, right: 30 }"
     :direction="VERTICAL"
     :measures="measures"
     :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
   >
     <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口, onItemEdge则是item内部焦点处理到达边缘后, 需要通知MetroWidget时的回调 -->
     <template #renderItem="{ data, query, onAction, onItemEdge }">
@@ -68,4 +97,20 @@ const onEdge = (edgeInfo) => {
       />
     </template>
   </metro-widget>
+  <jsv-nine-patch
+    v-show="showFocus"
+    :style="{
+      width: focusSize.width,
+      height: focusSize.height,
+      top: focusSize.top,
+      left: focusSize.left,
+    }"
+    :imageUrl="focusImg"
+    :imageWidth="55"
+    :centerWidth="1"
+    :borderOutset="13"
+    :imageDspWidth="55"
+    :animTime="0.2"
+    :waitForInit="true"
+  ></jsv-nine-patch>
 </template>