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

package/DemoForOperator/DominantColor/App.vue

@@ -0,0 +1,187 @@
+<script setup>
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { JsvTextureStoreApi, JsvPreload, buildPreloadInfo } from "jsview";
+
+const Image1 =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+const Image2 =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";
+
+const vToCapture = shallowRef(null);
+const colorList1 = shallowRef([]);
+const colorList2 = shallowRef([]);
+const isPreloadDone = shallowRef(false);
+
+let cancelHandel1 = null;
+let cancelHandel2 = null;
+
+const preloadList = [buildPreloadInfo(Image1)];
+
+function handlePreloadDone() {
+  console.log("图片预加载完成");
+  isPreloadDone.value = true;
+  catpure();
+}
+
+function catpure() {
+  try {
+    cancelHandel1 = JsvTextureStoreApi.capture2Texture(
+      vToCapture.value,
+      (textureName, autoRecycle, w, h) => {
+        console.log("ccht captureBlurTexture", textureName, autoRecycle, w, h);
+        if (textureName) {
+          cancelHandel1 = JsvTextureStoreApi.getDominantColor(
+            `jsvtexturestore://${textureName}`,
+            (info) => {
+              console.log("ccht getDominantColor", info);
+              if (info.dominantColors) {
+                colorList1.value = info.dominantColors.map((color) => {
+                  return "#" + color;
+                });
+              }
+            }
+          );
+        }
+      },
+      true
+    );
+  } catch (error) {
+    console.error("captureTexture error", error, new Error().stack);
+  }
+}
+
+onMounted(() => {
+  cancelHandel2 = JsvTextureStoreApi.getDominantColor(Image2, (info) => {
+    console.log("ccht getDominantColor2", info);
+    if (info.dominantColors) {
+      colorList2.value = info.dominantColors.map((color) => {
+        return "#" + color;
+      });
+    }
+  });
+});
+
+onBeforeUnmount(() => {
+  cancelHandel1?.();
+  cancelHandel2?.();
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 0,
+      top: 0,
+      width: 1280,
+      height: 720,
+      backgroundColor: '#FFFFFF',
+    }"
+  ></div>
+  <jsv-preload
+    :preloadList="preloadList"
+    :onPreloadDone="handlePreloadDone"
+  ></jsv-preload>
+  <div
+    ref="vToCapture"
+    :style="{
+      left: 0,
+      top: 50,
+      width: 640, // 截屏区域的宽
+      height: 360, // 截屏区域的高
+    }"
+  >
+    <div
+      :style="{
+        width: 640,
+        height: 360,
+        backgroundImage: `url(${Image1})`,
+      }"
+    />
+    <div
+      :style="{
+        width: 300,
+        height: 300,
+        backgroundColor: '#007788',
+      }"
+    ></div>
+  </div>
+  <div
+    :style="{
+      left: 50,
+      top: 420,
+    }"
+    v-if="colorList1.length > 0"
+  >
+    <div
+      v-for="(color, index) in colorList1"
+      :style="{
+        left: 60 * index,
+        width: 50,
+        height: 50,
+        backgroundColor: color,
+      }"
+    ></div>
+    <div
+      :style="{
+        top: 50,
+        width: 480,
+        height: 40,
+        fontSize: 20,
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
+    >
+      截图取主色调
+    </div>
+  </div>
+
+  <div
+    :style="{
+      left: 640,
+      top: 50,
+      width: 640,
+      height: 360,
+      backgroundImage: `url(${Image2})`,
+    }"
+  />
+  <div
+    :style="{
+      top: 420,
+      left: 690,
+    }"
+    v-if="colorList2.length > 0"
+  >
+    <div
+      v-for="(color, index) in colorList2"
+      :style="{
+        left: 60 * index,
+        width: 50,
+        height: 50,
+        backgroundColor: color,
+      }"
+    ></div>
+    <div
+      :style="{
+        top: 50,
+        width: 480,
+        height: 40,
+        fontSize: 20,
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
+    >
+      图片取主色调
+    </div>
+  </div>
+</template>
+
+<style>
+@keyframes rotate {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/DemoForOperator/EpisodeList/App.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <EpisodeList
+    :name="name"
+    :listLayout="listLayout"
+    :groupLayout="groupLayout"
+    :numPerPage="numPerPage"
+    :listMeasures="listMeasures"
+    :groupMeasures="groupMeasures"
+    :totalNumber="totalNumber"
+    :listPadding="listPadding"
+  >
+    <template #listItem="{ data, onAction, query }">
+      <list-item :data="data" :onAction="onAction" :query="query" />
+    </template>
+    <template #groupItem="{ data, onAction, query }">
+      <group-item :data="data" :onAction="onAction" :query="query" />
+    </template>
+  </EpisodeList>
+</template>
+
+<script setup>
+import EpisodeList from "./EpisodeList/EpisodeList.vue";
+import ListItem from "./ListItem.vue";
+import GroupItem from "./GroupItem.vue";
+import { onMounted } from "vue";
+import { useFocusHub } from "jsview";
+
+const focusHub = useFocusHub();
+const name = "episodeList";
+const listLayout = {
+  left: 80,
+  top: 100,
+  width: 940,
+  height: 120,
+};
+const groupLayout = {
+  left: 100,
+  top: 220,
+  width: 900,
+  height: 50,
+};
+const numPerPage = 10;
+function listMeasures(index) {
+  return {
+    width: 80,
+    height: 80,
+    marginRight: 10,
+    data: {
+      content: index,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffffffaa",
+    },
+  };
+}
+function groupMeasures(index) {
+  return {
+    width: 150,
+    height: 50,
+    marginRight: 10,
+  };
+}
+const totalNumber = 400;
+const listPadding = {
+  left: 20,
+  right: 20,
+  top: 20,
+  bottom: 20,
+};
+onMounted(() => {
+  focusHub.setFocus(name);
+});
+</script>

package/DemoForOperator/EpisodeList/EpisodeList/Controller.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, useFocusHub, EdgeDirection } from "jsview";
+import { ref } from "vue";
+
+const widget = ref();
+const props = defineProps({
+  name: String,
+  number: Number,
+  widgetHandler: Object,
+  numPerPage: Number,
+  measures: Function,
+  listName: String,
+  layout: Object,
+});
+
+const focusHub = useFocusHub();
+
+let data = [];
+const provideData = () => {
+  data = [];
+  const c = Math.ceil(props.number / props.numPerPage);
+  for (let i = 0; i < c; ++i) {
+    const m = props.measures(i);
+    data.push({
+      width: m.width,
+      height: m.height,
+      marginRight: m.marginRight,
+      from: i * props.numPerPage,
+      to: Math.min((i + 1) * props.numPerPage - 1, props.number - 1),
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus(props.listName);
+  }
+};
+
+const onBlur = () => {
+  firstLock = false;
+};
+
+let targetFocus = 0;
+
+let firstLock = false;
+const setFocusId = (index) => {
+  targetFocus = index;
+  firstLock = true;
+  widget.value.setFocusId(index, true, true);
+};
+
+function onFocusItemChange(id) {
+  if (firstLock) {
+    firstLock = false;
+    return;
+  }
+
+  let itemData = data[id];
+
+  if (itemData) {
+    props.widgetHandler.widget.value?.setFocusId(itemData.from, false);
+    const itemPos = props.widgetHandler.widget.value?.getTemplatePosition(
+      itemData.from
+    );
+    props.widgetHandler.widget.value?.slideTo(itemPos.left);
+    targetFocus = itemData.from;
+  }
+}
+
+defineExpose({
+  setFocusId,
+});
+</script>
+
+<template>
+  <metro-widget
+    ref="widget"
+    :name="name"
+    :left="layout.left"
+    :top="layout.top"
+    :width="layout.width"
+    :height="layout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onBlur="onBlur"
+    :onFocusChange="onFocusItemChange"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <slot name="item" :onAction="onAction" :query="query" :data="data"></slot>
+    </template>
+  </metro-widget>
+</template>

package/DemoForOperator/EpisodeList/EpisodeList/EpisodeList.vue

@@ -0,0 +1,250 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script>
+/**
+ * @slot listItem - 渲染单个列表项
+ * @property {Object} data - 项数据
+ * @property {Function} onAction - 动作处理函数
+ * @property {Object} query - 查询参数
+ * 
+ * @slot groupItem - 渲染分页组项
+ * @property {Object} item - 分页组项数据
+ * @property {number} index - 分页组项索引
+ */
+let TOKEN = 0;
+</script>
+<script setup>
+import {
+  MetroWidget,
+  HORIZONTAL,
+  useFocusHub,
+  SeamlessSlide,
+  EdgeDirection,
+  SlideSetting,
+} from "jsview";
+import Controller from "./Controller.vue";
+import { onMounted, ref } from "vue";
+
+const props = defineProps({
+  /**
+   * 组件名称标识
+   * @type {string}
+   * @required
+   */
+  name: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * 列表布局配置
+   * @type {Object}
+   * @required
+   * @property {number} left - 列表左侧位置
+   * @property {number} top - 列表顶部位置
+   * @property {number} width - 列表宽度
+   * @property {number} height - 列表高度
+   */
+  listLayout: {
+    type: Object,
+    required: true,
+  },
+
+  /**
+   * 分页器布局配置
+   * @type {Object}
+   * @required
+   * @property {number} left - 分页器左侧位置
+   * @property {number} top - 分页器顶部位置
+   * @property {number} width - 分页器宽度
+   * @property {number} height - 分页器高度
+   */
+  groupLayout: {
+    type: Object,
+    required: true,
+  },
+
+  /**
+   * 每页显示项数
+   * @type {number}
+   * @default 10
+   */
+  numPerPage: {
+    type: Number,
+    default: 10,
+  },
+
+  /**
+   * 列表项测量函数
+   * @type {Function}
+   * @required
+   * @param {number} index - 当前项索引
+   * @returns {Object} 包含尺寸和数据的对象
+   * @returns {number} return.width - 项宽度
+   * @returns {number} return.height - 项高度
+   * @returns {number} [return.marginRight] - 右侧间距
+   * @returns {Object} return.data - 项数据
+   */
+  listMeasures: {
+    type: Function,
+  },
+
+  /**
+   * 分页组测量函数
+   * @type {Function}
+   * @required
+   */
+  groupMeasures: {
+    type: Function,
+  },
+
+  /**
+   * 总项数
+   * @type {number}
+   * @required
+   */
+  totalNumber: {
+    type: Number,
+  },
+
+  /**
+   * 列表内边距配置
+   * @type {Object}
+   * @optional
+   */
+  listPadding: {
+    type: Object,
+  }
+});
+
+const controller = ref(null);
+const widget = ref(null);
+const handler = {
+  widget,
+};
+
+const slideObj = {
+  headRange: 0.5,
+  tailRange: 0.5,
+};
+const defaultSlide = new SeamlessSlide(slideObj);
+
+const slide1 = new SeamlessSlide({
+  ...slideObj,
+  boundaryProtect: SlideSetting.START_PROTECT,
+});
+
+const focusHub = useFocusHub();
+
+let t = TOKEN++;
+const listName = props.name + "_list_" + t;
+const controllerName = props.name + "_controller_" + t;
+let curFocusName = listName;
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < props.totalNumber; i++) {
+    const item = props.listMeasures(i);
+    data.push({
+      index: i,
+      data: item.data,
+      width: item.width,
+      height: item.height,
+      marginRight: item.marginRight,
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+  };
+};
+
+function onItemFocus(index) {
+  const ctrlItemIndex = Math.floor(index / props.numPerPage);
+  controller.value?.setFocusId(ctrlItemIndex);
+}
+
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus(controllerName);
+    curFocusName = controllerName;
+  }
+};
+
+const onBlur = () => {
+  widget.value?.setSlideSetting(slide1);
+};
+
+const onFocus = () => {
+  widget.value?.setSlideSetting(null);
+};
+
+onMounted(() => {});
+
+/**
+ * 处理组件获取焦点时的操作
+ */
+function componentOnFocus() {
+  focusHub.setFocus(curFocusName);
+}
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onFocus: componentOnFocus,
+    }"
+  >
+    <metro-widget
+      ref="widget"
+      :name="listName"
+      :left="listLayout.left"
+      :top="listLayout.top"
+      :width="listLayout.width"
+      :height="listLayout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :measures="measures"
+      :onEdge="onEdge"
+      :onBlur="onBlur"
+      :onFocus="onFocus"
+      :initFocusId="0"
+      :slideSetting="defaultSlide"
+      :onFocusChange="onItemFocus"
+      :padding="listPadding"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <slot
+          name="listItem"
+          :data="data.data"
+          :onAction="onAction"
+          :query="query"
+        ></slot>
+      </template>
+    </metro-widget>
+
+    <controller
+      ref="controller"
+      :name="controllerName"
+      :number="totalNumber"
+      :widgetHandler="handler"
+      :numPerPage="numPerPage"
+      :measures="groupMeasures"
+      :listName="listName"
+      :layout="groupLayout"
+    >
+      <template #item="slotProps">
+        <slot name="groupItem" v-bind="slotProps"></slot>
+      </template>
+    </controller>
+  </jsv-focus-block>
+</template>

package/DemoForOperator/EpisodeList/GroupItem.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  /* 固定格式 {width: Number, hieght: Number, from: Number, to: Number} */
+  data: Object,
+  onAction: Object,
+  query: Object,
+});
+
+const focused = ref(false);
+const gazed = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onGaze = () => {
+  gazed.value = true;
+};
+const onIgnore = () => {
+  gazed.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+props.onAction.register("onGaze", onGaze);
+props.onAction.register("onIgnore", onIgnore);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      lineHeight: data.height,
+      textAlign: 'center',
+      backgroundColor: '#6789fd',
+      fontSize: 30,
+      color: gazed ? '#ffffff' : '#aaaaaa',
+    }"
+  >
+    {{ data.from + "-" + data.to }}
+  </div>
+  <div
+    v-if="focused"
+    :style="{
+      top: data.height - 3,
+      width: data.width,
+      height: 3,
+      backgroundColor: '#0000ff',
+    }"
+  ></div>
+</template>