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

package/DemoForOperator/Resize/App.vue

@@ -0,0 +1,157 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      left: 300,
+      top: 100,
+    }"
+  >
+    <Resize
+      name="resize"
+      :provideData="provideData"
+      :measures="measures"
+      :initFocusId="0"
+      :layout="widgetLayout"
+      :padding="padding"
+      :onEdge="onEdge"
+      :anim="anim"
+    >
+      <template #itemLarge="{ data }">
+        <div
+          :style="{
+            width: 400,
+            height: 120,
+            backgroundColor: '#0F0',
+            fontSize: 30,
+            transition,
+          }"
+        >
+          {{ "测试文字" + data.content + "测试文字" }}
+        </div>
+      </template>
+      <template #itemSmall="{ data, focused }">
+        <div
+          :style="{
+            width: focused ? 120 : 100,
+            height: focused ? 120 : 100,
+            backgroundColor: '#F00',
+            fontSize: 30,
+            transition,
+          }"
+        >
+          {{ data.content + (data.resizable ? "展开" : "不展开") }}
+        </div>
+      </template>
+      <template #itemLeftEdge>
+        <div
+          :style="{
+            width: 10,
+            height: 10,
+            backgroundColor: '#00F',
+          }"
+        ></div>
+      </template>
+      <template #itemRightEdge>
+        <div
+          :style="{
+            left: 90,
+            width: 10,
+            height: 10,
+            backgroundColor: '#00F',
+          }"
+        ></div>
+      </template>
+    </Resize>
+  </div>
+</template>
+
+<script setup>
+import Resize from "./Resize/Resize.vue";
+import { useFocusHub } from "jsview";
+import { onMounted } from "vue";
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const anim = {
+  duration: 200,
+  easing: "jsv-ease(0.2, 0.6, 2)",
+};
+
+const transition = `left ${anim.duration / 1000}s ${anim.easing}, top ${
+  anim.duration / 1000
+}s ${anim.easing}, width ${anim.duration / 1000}s ${anim.easing}, height ${
+  anim.duration / 1000
+}s ${anim.easing}`;
+
+const focusHub = useFocusHub();
+const dataLength = 15;
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < dataLength; ++i) {
+    data.push({
+      width: 100,
+      height: 100,
+      marginRight: 10,
+      color: randomColor(),
+      content: i,
+      resizable: i !== 5,
+      resizeDelay: 1000,
+      blurSize: {
+        w: 100,
+        h: 100,
+      },
+      focusSize: {
+        w: 120,
+        h: 120,
+      },
+      expandSize: {
+        w: 400,
+        h: 120,
+      },
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+const onEdge = (edgeInfo) => {
+  console.log("onEdge");
+};
+
+const widgetLayout = {
+  left: 0,
+  top: 0,
+  width: 700,
+  height: 200,
+};
+
+const padding = {
+  left: 80,
+  top: 50,
+  right: 80,
+  bottom: 50,
+};
+
+onMounted(() => {
+  focusHub.setFocus("resize");
+});
+</script>

package/DemoForOperator/Resize/Resize/Item.vue

@@ -0,0 +1,234 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script>
+let animToken = 0;
+</script>
+<script setup>
+import { ref, onBeforeUnmount, computed } from "vue";
+import { getKeyFramesGroup } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  query: Object,
+  animSetting: Object,
+  itemOnClick: Function,
+  itemOnGaze: Function,
+  itemOnIgnore: Function,
+  itemOnFocus: Function,
+  itemOnBlur: Function,
+  widgetLayout: Object,
+  widgetPadding: Object,
+});
+
+const focused = ref(false);
+
+const blurSize = props.data.blurSize;
+const focusSize = props.data.focusSize;
+const expandSize = props.data.expandSize;
+const duration = props.animSetting.duration;
+const easing = props.animSetting.easing;
+const width = ref(blurSize.w);
+const height = ref(blurSize.h);
+const top = computed(() => (blurSize.h - height.value) / 2);
+
+let timeoutHandler = -1;
+
+const animInfo = {
+  duration: duration,
+  easing: easing,
+  onEnd: () => {},
+};
+
+const isLarge = ref(false);
+const showLarge = ref(false);
+
+const transitionStr = `left ${duration / 1000}s ${easing}, top ${
+  duration / 1000
+}s ${easing}, width ${duration / 1000}s ${easing}, height ${
+  duration / 1000
+}s ${easing}`;
+const animation = ref(null);
+const scaleupAnim = `resize_item_scale_up_keep_center_${animToken++}`;
+const scaledownAnim = `resize_item_scale_down_keep_center_${animToken++}`;
+
+const xOffset = (focusSize.w - expandSize.w) / 2;
+const yOffset = (focusSize.h - expandSize.h) / 2;
+const scaleupBody = `@keyframes ${scaleupAnim} { from {transform: translate3d(${xOffset}, ${yOffset}, 0);} to {transform: translate3d(0, 0, 0);} }`;
+const scaledownBody = `@keyframes ${scaledownAnim} { from {transform: translate3d(0, 0, 0);} to {transform: translate3d(${xOffset}, ${yOffset}, 0);}}`;
+
+const styleSheets = getKeyFramesGroup();
+styleSheets.insertRule(scaleupBody);
+styleSheets.insertRule(scaledownBody);
+function onAnimEnd() {
+  animation.value = null;
+}
+function onTransitionDone() {
+  if (!isLarge.value) {
+    showLarge.value = false;
+  }
+}
+
+const edgeTransition = `left ${duration / 1000}s ${easing}, top ${
+  duration / 1000
+}s ${easing}`;
+const rightSlotLeft = computed(() => {
+  return width.value - blurSize.w;
+});
+
+function getAnchor(targetWidth) {
+  const curPosition = props.query.position(props.query.index);
+  //position是相对于布局区域的,所以加上padding
+  let curRect = [curPosition.left + props.widgetPadding.left, curPosition.left + props.widgetPadding.left + curPosition.width];
+  //留个20不贴边
+  let targetRect = [props.widgetLayout.width - targetWidth - 20, props.widgetLayout.width];
+  console.log("ccht get anchor", curRect, targetRect);
+  if (targetRect[0] > curRect[0]) {
+    //右边有足够空间
+    return 0;
+  } else {
+    //[a,b] 映射到 [c,d] 的不动点公式 x = (ad-bc)/(a+d-b-c)
+    let fixPoint = (curRect[0] * targetRect[1] - curRect[1] * targetRect[0]) / (curRect[0] + targetRect[1] - curRect[1] - targetRect[0]);
+    console.log("ccht get anchor 2", fixPoint);
+    return (fixPoint - curRect[0]) / curPosition.width;
+  }
+}
+
+const onFocus = () => {
+  focused.value = true;
+  if (width.value == blurSize.w) {
+    //立即放大
+    width.value = focusSize.w;
+    height.value = focusSize.h;
+    props.query.updateItemSize(
+      props.query.index,
+      {
+        width: width.value,
+        height: blurSize.h, //布局的高度不需要改变, 只需要改宽
+      },
+      animInfo
+    );
+
+    if (props.data.resizable && !isLarge.value) {
+      //延迟展开
+      timeoutHandler = setTimeout(() => {
+        isLarge.value = true;
+        showLarge.value = true;
+        animation.value = `${scaleupAnim} ${duration / 1000}s ${easing}`;
+        let anchor = getAnchor(expandSize.w);
+        width.value = expandSize.w;
+        height.value = expandSize.h;
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: blurSize.h, //布局的高度不需要改变, 只需要改宽
+          },
+          { ...animInfo, anchor: anchor }
+        );
+      }, props.data.resizeDelay ?? 1500);
+    }
+  }
+  props.itemOnFocus?.();
+};
+
+const onBlur = () => {
+  focused.value = false;
+  if (width.value != blurSize.w) {
+    if (isLarge.vue) {
+      animation.value = `${scaledownAnim} ${duration / 1000}s linear`;
+    }
+    isLarge.value = false;
+    let anchor = getAnchor(blurSize.w);
+    width.value = blurSize.w;
+    height.value = blurSize.h;
+    props.query.updateItemSize(
+      props.query.index,
+      {
+        width: width.value,
+        height: blurSize.h, //布局的高度不需要改变, 只需要改宽
+      },
+      { ...animInfo, anchor: anchor }
+    );
+  }
+
+  clearTimeout(timeoutHandler);
+  timeoutHandler = -1;
+  props.itemOnBlur?.();
+};
+
+const onClick = () => {
+  props.itemOnClick?.();
+};
+
+const onGaze = () => {
+  props.itemOnGaze?.();
+};
+
+const onIgnore = () => {
+  props.itemOnIgnore?.();
+};
+
+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);
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutHandler);
+  timeoutHandler = -1;
+  styleSheets.removeRule(scaleupAnim);
+  styleSheets.removeRule(scaledownAnim);
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      top: top,
+      width: width,
+      height: height,
+      transition: transitionStr,
+      overflow: 'hidden',
+    }"
+    @transitionend="onTransitionDone"
+  >
+    <div
+      :style="{
+        width: width,
+        height: height,
+        animation: animation,
+      }"
+      @animationend="onAnimEnd"
+    >
+      <div v-if="showLarge">
+        <slot name="large"></slot>
+      </div>
+      <div v-else>
+        <slot name="small" :focused="focused"></slot>
+      </div>
+    </div>
+  </div>
+  <div
+    :style="{
+      top: top,
+      transition: edgeTransition,
+    }"
+  >
+    <slot name="left"></slot>
+  </div>
+
+  <div
+    :style="{
+      left: rightSlotLeft,
+      top: top,
+      transition: edgeTransition,
+    }"
+  >
+    <slot name="right"></slot>
+  </div>
+</template>

package/DemoForOperator/Resize/Resize/Resize.vue

@@ -0,0 +1,96 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import {
+  ListWidget,
+  HORIZONTAL,
+  FixPositionSlide,
+} from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const props = defineProps({
+  name: String,
+  provideData: Function,
+  measures: Function,
+  initFocusId: Number,
+  layout: Object,
+  onEdge: Function,
+  anim: Object,
+  padding: Object,
+  itemOnClick: Function,
+  itemOnGaze: Function,
+  itemOnIgnore: Function,
+  itemOnFocus: Function,
+  itemOnBlur: Function,
+});
+
+const animSetting = {
+  duration: props.anim.duration ?? 200,
+  easing: props.anim.easing ?? "jsv-ease(0.2, 0.6, 2)",
+};
+
+const fixPositionSlide = new FixPositionSlide({
+  fixPercent: 0,
+  align: "start",
+  ...animSetting,
+});
+
+const onEdge = (edgeInfo) => {
+  props.onEdge(edgeInfo);
+};
+
+onMounted(() => {});
+</script>
+
+<template>
+  <list-widget
+    :name="name"
+    :left="layout.left"
+    :top="layout.top"
+    :width="layout.width"
+    :height="layout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :slideSetting="fixPositionSlide"
+    :measures="measures"
+    :padding="padding"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <item
+        :data="data"
+        :onAction="onAction"
+        :query="query"
+        :animSetting="animSetting"
+        :itemOnClick="itemOnClick"
+        :itemOnGaze="itemOnGaze"
+        :itemOnIgnore="itemOnIgnore"
+        :itemOnFocus="itemOnFocus"
+        :itemOnBlur="itemOnBlur"
+        :widgetLayout="layout"
+        :widgetPadding="padding"
+      >
+        <template #small="{ focused }">
+          <slot name="itemSmall" :data="data" :focused="focused"></slot>
+        </template>
+        <template #large>
+          <slot name="itemLarge" :data="data"></slot>
+        </template>
+        <template #right="{ width }">
+          <slot
+            name="itemRightEdge"
+            :itemSmallWidth="width"
+            :data="data"
+          ></slot>
+        </template>
+        <template #left>
+          <slot name="itemLeftEdge" :data="data"></slot>
+        </template>
+      </item>
+    </template>
+  </list-widget>
+</template>

package/DemoForOperator/Ripple/Ripple.vue

@@ -13,7 +13,16 @@
 <script setup>
 import { JsvRipple, JsvRippleShape } from "jsview";
 import { shallowRef } from "vue";
+
 const props = defineProps({
+  /**
+   * 布局配置对象
+   * @prop {Object} layout
+   * @property {string} layout.left 左侧位置（带单位）
+   * @property {string} layout.top 顶部位置（带单位）
+   * @property {string|number} layout.width 宽度（带单位或数字）
+   * @property {string|number} layout.height 高度（带单位或数字）
+   */
   layout: {
     type: Object,
     required: true,
@@ -23,7 +32,13 @@ const props = defineProps({
 const rippleViewRef = shallowRef();
 
 defineExpose({
-  /* position: 位置, duration: 时长(秒) */
+  /**
+   * 添加涟漪效果
+   * @param {Object} position 涟漪起始位置
+   * @param {number} position.left 起始位置左坐标
+   * @param {number} position.top 起始位置顶坐标
+   * @param {number} [duration=3] 涟漪持续时间（单位：秒）
+   */
   addRipple(position, duration = 3) {
     //duration = ln(amplitude) / timeDecay => timeDecay = ln(amplitude) / duration
     const amplitude = 50;

package/DemoForOperator/ScreenShootScale/App.vue

@@ -0,0 +1,96 @@
+<template>
+  <Back />
+  <Front v-if="frontShow" @hidden="onFrontHidden" />
+  <ScreenShootScale
+    v-if="showScale"
+    :from="from"
+    :to="to"
+    :duration="duration"
+    :easing="easing"
+    :fromSource="fromSource"
+    :toSource="toSource"
+    @animationend="onAnimEnd"
+  />
+</template>
+<script setup>
+import Front from "./Front.vue";
+import Back from "./Back.vue";
+import ScreenShootScale from "./ScreenShootScale.vue";
+import { useFocusHub, JsvTextureStoreApi } from "jsview";
+import { onMounted, ref, provide } from "vue";
+
+const showScale = ref(false);
+function capture(divRef) {
+  return new Promise((resolve, reject) => {
+    JsvTextureStoreApi.capture2Texture(
+      divRef.value,
+      (textureName, autoRecycle, w, h) => {
+        if (textureName) {
+          resolve({
+            url: `jsvtexturestore://${textureName}`,
+            release: () => {
+              console.log("release", textureName);
+              JsvTextureStoreApi.deleteTexture(textureName);
+            },
+          });
+        } else {
+          reject();
+        }
+        if (autoRecycle) {
+          // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
+        }
+      },
+      false // 自动回收, 不填也行，默认为true
+    );
+  });
+}
+let from, to, duration, easing, fromSource, toSource, releaseFunc;
+function start(
+  _from,
+  _to,
+  _duration,
+  _easing,
+  _fromSource,
+  _toSource,
+  _releaseFunc
+) {
+  showScale.value = true;
+  from = _from;
+  to = _to;
+  duration = _duration;
+  easing = _easing;
+  fromSource = _fromSource;
+  toSource = _toSource;
+  releaseFunc = _releaseFunc;
+}
+function onAnimEnd() {
+  showScale.value = false;
+  releaseFunc?.();
+}
+provide("capture", capture);
+provide("start", start);
+
+let targetPosition = {};
+provide("setTarget", (l, t, w, h) => {
+  targetPosition.left = l;
+  targetPosition.top = t;
+  targetPosition.width = w;
+  targetPosition.height = h;
+});
+provide("getTarget", () => {
+  return Object.assign({}, targetPosition);
+});
+
+const focusHub = useFocusHub();
+const frontShow = ref(true);
+
+const onFrontHidden = () => {
+  console.log("onHidden");
+  focusHub.setFocus("backmw");
+  frontShow.value = false;
+};
+
+onMounted(() => {
+  focusHub.setFocus("frontmw");
+});
+</script>

package/DemoForOperator/ScreenShootScale/Back.vue

@@ -0,0 +1,86 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL } from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+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: 200,
+      height: 100,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: i,
+    });
+  }
+  data[0].imgUrl =
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {};
+
+const onFocus = () => {};
+
+const onBlur = () => {};
+
+const widgetLayout = {
+  left: 50,
+  top: 450,
+  width: 1000,
+  height: 120,
+};
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  />
+  <metro-widget
+    name="backmw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>