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

package/DemoForOperator/Sprite/App.vue

@@ -0,0 +1,33 @@
+<script setup>
+import Sprite from "./Sprite.vue";
+
+const spriteSrc = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/sprite/egg_break.png";
+const repeat = 3;
+const layout = {
+  width: 600,
+  height: 600,
+};
+const onEnd = () => {
+  console.log("play end");
+};
+const duration = 0.8;
+</script>
+
+<template>
+  <div class="bgStyle"></div>
+  <Sprite
+    :spriteSrc="spriteSrc"
+    :repeat="repeat"
+    :layout="layout"
+    :onEnd="onEnd"
+    :duration="duration"
+  ></Sprite>
+</template>
+
+<style scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #4d5e8c;
+}
+</style>

package/DemoForOperator/Sprite/Sprite.vue

@@ -0,0 +1,90 @@
+<template>
+  <JsvSpriteLoader
+    v-if="show"
+    :imageUrl="spriteSrc"
+    :configUrl="jsonUrl"
+    :onConfigReady="preloadCallback"
+    :noNeedResource="false"
+  >
+    <JsvSpriteAnim
+      ref="spriteController"
+      :spriteInfo="spriteJsonInfo"
+      :loop="repeat"
+      :duration="duration"
+      :imageUrl="spriteSrc"
+      :spriteFrameSize="spriteOriginSize"
+      :viewSize="{ w: layout.width, h: layout.height }"
+      :onAnimEnd="onAnimEnd"
+      :autostart="true"
+    />
+  </JsvSpriteLoader>
+</template>
+
+<script setup>
+import { computed, shallowRef, onMounted } from "vue";
+import { JsvSpriteAnim, JsvSpriteLoader, JsvSpriteTools } from "jsview";
+
+const props = defineProps({
+  spriteSrc: {
+    type: String,
+  },
+  repeat: {
+    type: Number,
+  },
+  layout: {
+    type: Object,
+  },
+  onEnd: {
+    type: Function,
+  },
+  duration: {
+    type: Number,
+  },
+});
+
+const spriteController = shallowRef();
+const show = shallowRef(true);
+
+const jsonUrl = computed(() => {
+  return props.spriteSrc + ".json";
+});
+
+const _formatInfo = (config_json) => {
+  const info = {
+    frames: [],
+    meta: {
+      size: config_json.meta.size,
+    },
+  };
+
+  let frames_ref = info.frames;
+
+  for (let i = 0; i < config_json.frames.length; i++) {
+    const target = config_json.frames[i].spriteSourceSize;
+    frames_ref.push({
+      target,
+      source: config_json.frames[i].frame,
+    });
+  }
+
+  return { info };
+};
+
+function onAnimEnd() {
+  show.value = false;
+  props.onEnd?.();
+}
+
+const spriteJsonInfo = shallowRef();
+const spriteOriginSize = shallowRef();
+const preloadCallback = (config_json, resolve_set) => {
+  spriteJsonInfo.value = _formatInfo(config_json).info;
+
+  // 调整设置的原图尺寸设置
+  const guessSize = JsvSpriteTools.guessOriginSize(spriteJsonInfo.value);
+  spriteOriginSize.value = guessSize;
+  resolve_set(); // 通知loader数组设置完成
+};
+
+onMounted(() => {});
+</script>

package/DemoForOperator/Stretch/App.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      left: 300,
+      top: 100,
+    }"
+  >
+    <Stretch
+      name="stretch"
+      :itemSizeInfo="itemSizeInfo"
+      :datas="datas"
+      :layout="layout"
+      :onItemClick="onItemClick"
+      :onEdge="onEdge"
+      :duration="0.3"
+      :initLargeIndex="0"
+    >
+      <template #itemLarge>
+        <div
+          :style="{
+            width: 320,
+            height: 180,
+            backgroundColor: '#0F0',
+            fontSize: 30,
+            lineHeight: 180,
+          }"
+        >
+          测试文字测试文字测试文字
+        </div></template
+      >
+      <template #itemSmall>
+        <div
+          :style="{
+            width: 100,
+            height: 180,
+            backgroundColor: '#F00',
+            fontSize: 30,
+            lineHeight: 180,
+          }"
+        >
+          测试文字
+        </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>
+    </Stretch>
+  </div>
+</template>
+
+<script setup>
+import Stretch from "./Stretch/Stretch.vue";
+import { useFocusHub } from "jsview";
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+const itemSizeInfo = {
+  smallWidth: 100,
+  largeWidth: 320,
+  marginRight: 10,
+  height: 180,
+};
+const datas = [{}, {}, {}];
+const layout = {
+  width: 540,
+  height: 180,
+};
+
+const onItemClick = (index) => {
+  console.log("onItemClick", index);
+};
+
+const onEdge = (edgeInfo) => {
+  console.log("onEdge");
+};
+
+onMounted(() => {
+  focusHub.setFocus("stretch");
+});
+</script>

package/DemoForOperator/Stretch/Stretch/Item.vue

@@ -0,0 +1,192 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script>
+let animToken = 0;
+</script>
+<script setup>
+import { ref, watch, inject, computed, onBeforeUnmount } from "vue";
+import { getKeyFramesGroup } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  query: Object,
+  size: {
+    type: Object,
+  },
+  largeSize: {
+    type: Object,
+  },
+  duration: {
+    type: Number,
+    default: 200,
+  },
+  resizeDelay: {
+    type: Number,
+    default: 0,
+  },
+  onItemClick: {
+    type: Function,
+  },
+});
+
+const focused = ref(false);
+const largeItemIndex = inject("largeItemIndex");
+
+const isLarge = ref(props.query.index == largeItemIndex.value);
+const showLarge = ref(isLarge.value);
+const width = ref(isLarge.value ? props.largeSize.width : props.size.width);
+const height = ref(isLarge.value ? props.largeSize.height : props.size.height);
+const duration = props.duration;
+const transitionStr = `left ${duration / 1000}s, width ${duration / 1000}s`;
+const animInfo = {
+  anchor: 0.5,
+  duration: duration,
+  onEnd: () => {
+    console.log("resize end", props.query.index);
+  },
+};
+
+const animation = ref(null);
+const scaleupAnim = `stretch_item_scale_up_keep_center_${animToken++}`;
+const scaledownAnim = `stretch_item_scale_down_keep_center_${animToken++}`;
+
+const xOffset = (props.size.width - props.largeSize.width) / 2;
+const yOffset = (props.size.height - props.largeSize.height) / 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;
+}
+
+const rightEdgeTransition = `left ${duration / 1000}s linear`;
+const rightSlotPosition = computed(() => {
+  return {
+    top: 0,
+    left: isLarge.value ? props.largeSize.width - props.size.width : 0,
+  };
+});
+watch(
+  () => largeItemIndex.value,
+  (newV) => {
+    if (newV == props.query.index) {
+      if (!isLarge.value) {
+        isLarge.value = true;
+        showLarge.value = true;
+        animation.value = `${scaleupAnim} ${duration / 1000}s linear`;
+
+        width.value = props.largeSize.width;
+        height.value = props.largeSize.height;
+
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: height.value,
+          },
+          animInfo
+        );
+      }
+    } else {
+      if (isLarge.value) {
+        isLarge.value = false;
+        width.value = props.size.width;
+        height.value = props.size.height;
+        animation.value = `${scaledownAnim} ${duration / 1000}s linear`;
+
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: height.value,
+          },
+          animInfo
+        );
+      }
+    }
+  }
+);
+
+function onTransitionDone() {
+  if (!isLarge.value) {
+    showLarge.value = false;
+  }
+}
+
+let timeoutHandler = -1;
+const onFocus = () => {
+  focused.value = true;
+  timeoutHandler = setTimeout(() => {
+    largeItemIndex.value = props.query.index;
+  }, props.resizeDelay);
+};
+
+const onBlur = () => {
+  focused.value = false;
+  clearTimeout(timeoutHandler);
+  timeoutHandler = -1;
+};
+
+const onClick = () => {
+  props.onItemClick(props.query.index);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+onBeforeUnmount(() => {
+  styleSheets.removeRule(scaleupAnim);
+  styleSheets.removeRule(scaledownAnim);
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      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"></slot>
+      </div>
+    </div>
+  </div>
+  <div :style="{ width: size.width, hieght: size.height }">
+    <slot name="left"></slot>
+  </div>
+
+  <div
+    :style="{
+      left: rightSlotPosition.left,
+      top: rightSlotPosition.top,
+      width: size.width,
+      hieght: size.height,
+      transition: rightEdgeTransition,
+    }"
+  >
+    <slot name="right"></slot>
+  </div>
+</template>

package/DemoForOperator/Stretch/Stretch/Stretch.vue

@@ -0,0 +1,168 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import {
+  ListWidget,
+  HORIZONTAL,
+  useFocusHub,
+  FixPositionSlide,
+  EdgeDirection,
+} from "jsview";
+import Item from "./Item.vue";
+import { ref, provide, onMounted } from "vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  // { smallWidth: 0, largeWidth: 0, height: 0, marginRight: 10}
+  itemSizeInfo: {
+    type: Object,
+    required: true,
+  },
+  datas: {
+    type: Array,
+    required: true,
+  },
+  layout: {
+    type: Object,
+    required: true,
+  },
+  initLargeIndex: {
+    type: Number,
+    default: 0,
+  },
+  onFocus: {
+    type: Function,
+  },
+  onBlur: {
+    type: Function,
+  },
+  onEdge: {
+    type: Function,
+  },
+  onItemClick: {
+    type: Function,
+  },
+  //动画时长, 单位秒
+  duration: {
+    type: Number,
+    default: 0.2,
+  },
+});
+
+//一大多小
+const itemMargin = props.itemSizeInfo.marginRight ?? 10;
+const itemWidthSum =
+  props.itemSizeInfo.largeWidth +
+  props.itemSizeInfo.smallWidth * (props.datas.length - 1) +
+  (props.datas.length - 1) * itemMargin;
+if (props.layout.width < itemWidthSum) {
+  console.error(
+    "Stretch: sum of item size must be smaller than component layout width."
+  );
+}
+if (props.layout.height < props.itemSizeInfo.height) {
+  console.error(
+    "Stretch: item height must be smaller than component layout height."
+  );
+}
+const padding = {
+  left: (props.layout.width - itemWidthSum) / 2,
+  right: (props.layout.width - itemWidthSum) / 2,
+  top: (props.layout.height - props.itemSizeInfo.height) / 2,
+  bottom: (props.layout.height - props.itemSizeInfo.height) / 2,
+};
+
+const fixPositionSlide = new FixPositionSlide();
+const largeItemIndex = ref(props.initLargeIndex);
+provide("largeItemIndex", largeItemIndex);
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < props.datas.length; ++i) {
+    data.push({
+      width:
+        i == props.initLargeIndex
+          ? props.itemSizeInfo.largeWidth
+          : props.itemSizeInfo.smallWidth,
+      height: props.itemSizeInfo.height,
+      marginRight: props.itemSizeInfo.marginRight,
+      data: props.datas[i],
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+  };
+};
+
+const _onEdge = (edgeInfo) => {
+  props.onEdge?.(edgeInfo);
+};
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div>
+    <list-widget
+      :name="name"
+      :left="layout.left"
+      :top="layout.top"
+      :width="layout.width"
+      :height="layout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :initFocusId="props.initLargeIndex"
+      :slideSetting="fixPositionSlide"
+      :measures="measures"
+      :padding="padding"
+      :onEdge="_onEdge"
+      :disableClip="true"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <item
+          :data="data"
+          :onAction="onAction"
+          :query="query"
+          :size="{
+            width: itemSizeInfo.smallWidth,
+            height: itemSizeInfo.height,
+          }"
+          :largeSize="{
+            width: itemSizeInfo.largeWidth,
+            height: itemSizeInfo.height,
+          }"
+          :duration="duration * 1000"
+          :onItemClick="onItemClick"
+        >
+          <template #small>
+            <slot name="itemSmall" :data="data.data"></slot>
+          </template>
+          <template #large>
+            <slot name="itemLarge" :data="data.data"></slot>
+          </template>
+          <template #right="{ width }">
+            <slot
+              name="itemRightEdge"
+              :itemSmallWidth="width"
+              :data="data.data"
+            ></slot>
+          </template>
+          <template #left>
+            <slot name="itemLeftEdge" :data="data.data"></slot>
+          </template>
+        </item>
+      </template>
+    </list-widget>
+  </div>
+</template>

package/DemoForOperator/TabContent/App.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <tab-content
+    :name="name"
+    :data="testData"
+    :tabLayout="{ width: 1200, height: 90 }"
+    :tabPadding="{ left: 20, right: 20, top: 20, height: 20 }"
+    :contentLayout="{ left: 20, top: 100, width: 1280, height: 500 }"
+    :tagItemGap="10"
+    :contentDataLoader="pageDataLoader"
+    :initFocusId="2"
+    :contentOnFocus="contentOnFocus"
+    :contentOnBlur="contentOnBlur"
+    creepFocusColor="#e26c44"
+  >
+    <template #tabItem="{ data, onAction, query }">
+      <item :data="data" :onAction="onAction" :query="query"></item>
+    </template>
+    <template #content="{ data, onEdge }">
+      <content-page
+        name="contentPage"
+        :pageData="data"
+        :onEdge="onEdge"
+      ></content-page>
+    </template>
+  </tab-content>
+</template>
+
+<script setup>
+import TabContent from "./TabContent/TabContent.vue";
+import { onMounted } from "vue";
+import { useFocusHub } from "jsview";
+/** 注意, tab数据中有子tab的, 子tab的数据必须在childTab字段下, 类似这里的testData */
+import { testData } from "./testData.js";
+import Item from "./Item.vue";
+import ContentPage from "./ContentPage.vue";
+
+const focusHub = useFocusHub();
+const name = "tab-content";
+
+const ironmanSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/ironman_small.png";
+const spidermanSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/spiderman_small.png";
+const captainSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/captain_small.png";
+
+async function pageDataLoader(tabId) {
+  return {
+    title: "page " + tabId,
+    list: [
+      {
+        width: 370,
+        height: 300,
+        img: ironmanSmall,
+      },
+      {
+        width: 370,
+        height: 300,
+        img: spidermanSmall,
+      },
+      {
+        width: 370,
+        height: 300,
+        img: captainSmall,
+      },
+    ],
+  };
+}
+
+function contentOnFocus() {
+  console.log("content on focus");
+  focusHub.setFocus("contentPage");
+}
+
+function contentOnBlur() {
+  console.log("content on blur");
+}
+
+onMounted(() => {
+  focusHub.setFocus(name);
+});
+</script>