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

package/DemoForOperator/FlipPage/FlipPage/FlipPage.vue

@@ -0,0 +1,150 @@
+<template>
+  <div
+    :style="{
+      left: layout.left,
+      top: layout.top,
+    }"
+  >
+    <jsv-frag-shader-view
+      v-if="showFbo"
+      :key="keyCount"
+      ref="shaderViewRef"
+      :style="{
+        width: layout.width,
+        height: layout.height,
+      }"
+      :duration="shaderSetting.duration"
+      :shaderStr="shaderSetting.shader"
+      :autoplay="true"
+      :textures="shaderSetting.textures"
+      :onEnd="onAnimEnd"
+    ></jsv-frag-shader-view>
+
+    <div
+      v-if="!showOrigin"
+      :style="{
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        ref="slotRootRef"
+        :style="{
+          width: layout.width,
+          height: layout.height,
+        }"
+      >
+        <slot></slot>
+      </div>
+    </div>
+    <div
+      v-else
+      ref="slotRootRef"
+      :style="{
+        width: layout.width,
+        height: layout.height,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import flipOutShader from "./flipOut.glsl?raw";
+import flipInShader from "./flipIn.glsl?raw";
+
+import { onMounted, onUnmounted, shallowRef, ref, computed } from "vue";
+import {
+  JsvFragShaderView,
+  getKeyFramesGroup,
+  JsvTextureStoreApi,
+} from "jsview";
+
+const props = defineProps({
+  layout: {
+    type: Object,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 1,
+  },
+  initShow: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const showOrigin = shallowRef(props.initShow);
+const showFbo = shallowRef(false);
+const slotRootRef = shallowRef();
+const keyCount = ref(0);
+const shaderViewRef = ref();
+let state = props.initShow ? 1 : 0;
+
+let shaderSetting = {
+  name: "flipPage",
+  shader: "",
+  uniforms: [],
+  textures: [
+    {
+      name: "iChannel0",
+      resource: "",
+    },
+  ],
+  duration: Math.round(props.duration * 1000),
+};
+let _onEnd = null;
+
+function animOut() {
+  shaderSetting.shader = flipOutShader;
+  _onEnd = () => {
+    showOrigin.value = false;
+  };
+  capture();
+}
+
+function animIn() {
+  shaderSetting.shader = flipInShader;
+  _onEnd = () => {
+    showOrigin.value = true;
+  };
+  capture();
+}
+
+function onAnimEnd() {
+  showFbo.value = false;
+  _onEnd();
+}
+
+function capture() {
+  JsvTextureStoreApi.capture2Texture(
+    slotRootRef.value,
+    (textureName, autoRecycle, w, h) => {
+      shaderSetting.textures[0].resource = `jsvtexturestore://${textureName}`;
+
+      if (autoRecycle) {
+        // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
+      }
+      showOrigin.value = false;
+      ++keyCount.value;
+      showFbo.value = true;
+    },
+    true // 自动回收, 不填也行，默认为true
+  );
+}
+
+defineExpose({
+  switch() {
+    if (state == 0) {
+      state = 1;
+      animIn();
+    } else {
+      state = 0;
+      animOut();
+    }
+  },
+});
+</script>

package/DemoForOperator/FlipPage/FlipPage/flipIn.glsl

@@ -0,0 +1,41 @@
+//https://andrewhungblog.wordpress.com/2018/04/29/page-curl-shader-breakdown/
+#define pi 3.14159265359
+#define radius .1
+
+float fastAsin(float x) {
+  float x2 = x * x;
+  float x3 = x2 * x;
+  float x5 = x3 * x2;
+  float x7 = x5 * x2;
+  return x + (1.0 / 6.0) * x3 + (3.0 / 40.0) * x5 + (5.0 / 112.0) * x7;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 aspect = iResolution.xy / iResolution.y;
+  vec2 uv = fragCoord * aspect / iResolution.xy;
+  vec2 anchor = aspect;
+  vec2 mouse = anchor - abs(1. - iTime / iDuration) * anchor;
+  vec2 mouseDir = normalize(anchor - mouse);
+  vec2 origin = mouse - mouseDir * mouse.x / abs(mouseDir.x);
+  float mouseDist = length(mouse - origin);
+
+  float proj = dot(uv - origin, mouseDir);
+  float dist = proj - mouseDist;
+  vec2 linePoint = uv - dist * mouseDir;
+  if(dist > radius) {
+    fragColor = vec4(0.0, 0.0, 0.0, 0.0);
+    fragColor.rgb *= pow(clamp(dist - radius, 0., 1.) * 1.5, .2);
+  } else if(dist >= 0.) {
+    // map to cylinder point
+    float theta = fastAsin(dist / radius);
+    vec2 p2 = linePoint + mouseDir * (pi - theta) * radius;
+    vec2 p1 = linePoint + mouseDir * theta * radius;
+    uv = (p2.x <= aspect.x && p2.y <= aspect.y && p2.x > 0. && p2.y > 0.) ? p2 : p1;
+    fragColor = jsvTexture2D(iChannel0, uv / aspect);
+    fragColor.rgb *= pow(clamp((radius - dist) / radius, 0., 1.), .2);
+  } else {
+    vec2 p = linePoint + mouseDir * (abs(dist) + pi * radius);
+    uv = (p.x <= aspect.x && p.y <= aspect.y && p.x > 0. && p.y > 0.) ? p : uv;
+    fragColor = jsvTexture2D(iChannel0, uv / aspect);
+  }
+}

package/DemoForOperator/FlipPage/FlipPage/flipOut.glsl

@@ -0,0 +1,41 @@
+//https://andrewhungblog.wordpress.com/2018/04/29/page-curl-shader-breakdown/
+#define pi 3.14159265359
+#define radius .1
+
+float fastAsin(float x) {
+  float x2 = x * x;
+  float x3 = x2 * x;
+  float x5 = x3 * x2;
+  float x7 = x5 * x2;
+  return x + (1.0 / 6.0) * x3 + (3.0 / 40.0) * x5 + (5.0 / 112.0) * x7;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 aspect = iResolution.xy / iResolution.y;
+  vec2 uv = fragCoord * aspect / iResolution.xy;
+  vec2 anchor = aspect;
+  vec2 mouse = anchor - abs(iTime / iDuration) * anchor;
+  vec2 mouseDir = normalize(anchor - mouse);
+  vec2 origin = mouse - mouseDir * mouse.x / abs(mouseDir.x);
+  float mouseDist = length(mouse - origin);
+
+  float proj = dot(uv - origin, mouseDir);
+  float dist = proj - mouseDist;
+  vec2 linePoint = uv - dist * mouseDir;
+  if(dist > radius) {
+    fragColor = vec4(0.0, 0.0, 0.0, 0.0);
+    fragColor.rgb *= pow(clamp(dist - radius, 0., 1.) * 1.5, .2);
+  } else if(dist >= 0.) {
+    // map to cylinder point
+    float theta = fastAsin(dist / radius);
+    vec2 p2 = linePoint + mouseDir * (pi - theta) * radius;
+    vec2 p1 = linePoint + mouseDir * theta * radius;
+    uv = (p2.x <= aspect.x && p2.y <= aspect.y && p2.x > 0. && p2.y > 0.) ? p2 : p1;
+    fragColor = jsvTexture2D(iChannel0, uv / aspect);
+    fragColor.rgb *= pow(clamp((radius - dist) / radius, 0., 1.), .2);
+  } else {
+    vec2 p = linePoint + mouseDir * (abs(dist) + pi * radius);
+    uv = (p.x <= aspect.x && p.y <= aspect.y && p.x > 0. && p.y > 0.) ? p : uv;
+    fragColor = jsvTexture2D(iChannel0, uv / aspect);
+  }
+}

package/DemoForOperator/Focus/Alpha/AlphaFocusBox.vue

@@ -0,0 +1,70 @@
+<template>
+  <JsvNinePatch
+    :style="layout"
+    :imageUrl="`jsvtexturestore://${sourceId}`"
+    :imageWidth="sampleImageWidth"
+    :centerWidth="2"
+    :imageDspWidth="sampleImageWidth"
+    :borderOutset="borderWidth"
+    animation="breath 2s infinite"
+  />
+</template>
+<script setup>
+import { JsvNinePatch, JsvTextureStoreApi } from "jsview";
+import { onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  color: {
+    type: String,
+  },
+  layout: {
+    type: Object,
+  },
+  borderWidth: {
+    type: Number,
+  },
+  duration: {
+    type: Number
+  },
+  borderRadius: {
+    type: Number,
+    default: 10,
+  }
+});
+
+let canvasRef;
+let circleRadius = props.borderRadius;
+let sampleImageWidth = circleRadius * 2 + props.borderWidth + 2;
+canvasRef = JsvTextureStoreApi.canvasTexture(
+  sampleImageWidth,
+  sampleImageWidth
+); // 创建画布
+
+let circleLineWidth = props.borderWidth;
+let customPath = canvasRef.circlePath(
+  Math.floor(sampleImageWidth / 2),
+  Math.floor(sampleImageWidth / 2),
+  circleRadius
+); // 创建圆环绘制路径，圆形在画布的中心点位置
+canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
+customPath.stroke(circleLineWidth, props.color); // 以给定线宽绘制圆环
+const sourceId = canvasRef.commit(); // texture和div的textureStore绑定
+
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>
+
+<style scopped>
+@keyframes breath {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

package/DemoForOperator/Focus/Alpha/AlphaPage.vue

@@ -0,0 +1,40 @@
+<template>
+  <metro-widget
+    name="alpha"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import { MetroWidget, HORIZONTAL } from "jsview";
+import Item from "./Item.vue";
+import { widgetLayout, padding, data } from "../CommonPageSetting";
+
+const props = defineProps({
+  onEdge: Function
+})
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+</script>

package/DemoForOperator/Focus/Alpha/Item.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import AlphaFocusBox from "./AlphaFocusBox.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/Alpha/Item/background.png";
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+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,
+      transition: 'transform 0.2s',
+      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
+    }"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundImage: bgImage,
+        lineHeight: data.height,
+        textAlign: 'center',
+      }"
+    >
+      明暗
+    </div>
+    <alpha-focus-box
+      v-if="focused"
+      color="#ffffff"
+      :layout="{
+        width: data.width,
+        height: data.height,
+      }"
+      :borderWidth="5"
+      :borderRadius="10"
+    />
+  </div>
+</template>

package/DemoForOperator/Focus/App.vue

@@ -0,0 +1,124 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }"></div>
+  <div
+    :style="{
+      left: (1280 - 600) / 2,
+    }"
+  >
+    <normal-page v-if="pageId == 0" :onEdge="pageOnEdge" />
+    <light-page v-else-if="pageId == 1" :onEdge="pageOnEdge" />
+    <alpha-page v-else-if="pageId == 2" :onEdge="pageOnEdge" />
+    <swipe-light-page v-else-if="pageId == 3" :onEdge="pageOnEdge" />
+  </div>
+
+  <div
+    :style="{
+      left: (1280 - 240) / 2,
+      top: 400,
+    }"
+  >
+    <metro-widget
+      name="btn"
+      :width="widgetLayout.width"
+      :height="widgetLayout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :measures="measures"
+      :onEdge="onEdge"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <item
+          :data="data"
+          :onAction="onAction"
+          :onItemFocus="onItemFocus"
+          :query="query"
+        />
+      </template>
+    </metro-widget>
+    <div
+      :style="{
+        top: 60,
+        fontSize: 25,
+        color: '#000000',
+      }"
+    >
+      切换焦点样式
+    </div>
+  </div>
+</template>
+
+<script setup>
+import NormalPage from "./Normal/NormalPage.vue";
+import LightPage from "./Light/LightPage.vue";
+import AlphaPage from "./Alpha/AlphaPage.vue";
+import SwipeLightPage from "./SwipeLight/SwipeLightPage.vue";
+import Item from "./Item.vue";
+import { useFocusHub, MetroWidget, HORIZONTAL, EdgeDirection } from "jsview";
+import { onMounted, ref } from "vue";
+
+const focusHub = useFocusHub();
+
+const pageId = ref(0);
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 4; ++i) {
+    data.push({
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      content: i,
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+const pageOnEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus("btn");
+  }
+};
+// callbacks
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    let name = null;
+    switch (pageId.value) {
+      case 0:
+        name = "normal";
+        break;
+      case 1:
+        name = "light";
+        break;
+      case 2:
+        name = "alpha";
+        break;
+      case 3:
+        name = "swipeLight";
+        break;
+    }
+    focusHub.setFocus(name);
+  }
+};
+const onItemFocus = (index) => {
+  pageId.value = index;
+};
+
+const widgetLayout = {
+  width: 500,
+  height: 50,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("btn");
+});
+</script>

package/DemoForOperator/Focus/CommonPageSetting.js

@@ -0,0 +1,30 @@
+
+export const widgetLayout = {
+  left: 50,
+  top: 50,
+  width: 600,
+  height: 300,
+};
+export const padding = {
+  left: 50,
+  right: 50,
+  top: 50,
+  bottom: 50,
+};
+export const data = [
+  {
+    width: 100,
+    height: 200,
+    marginRight: 10,
+  },
+  {
+    width: 200,
+    height: 200,
+    marginRight: 10,
+  },
+  {
+    width: 100,
+    height: 200,
+    marginRight: 10,
+  },
+];

package/DemoForOperator/Focus/Item.vue

@@ -0,0 +1,46 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  onItemFocus: Function,
+  query: Object,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+  props.onItemFocus(props.query.index);
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+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,
+      fontSize: 30,
+      color: '#000000',
+      backgroundColor: focused ? '#00ff00' : '#ff000033',
+      lineHeight: data.height,
+      textAlign: 'center',
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/DemoForOperator/Focus/Light/Item.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import LightFocusBox from "./LightFocusBox.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/Light/Item/background.png";
+const lightImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/Light/Item/blackWhiteTurntable.png";
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+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,
+      transition: 'transform 0.2s',
+      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
+    }"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundImage: bgImage,
+        lineHeight: data.height,
+        textAlign: 'center',
+      }"
+    >
+      旋转光
+    </div>
+    <light-focus-box
+      v-if="focused"
+      :src="lightImage"
+      :layout="{
+        width: data.width,
+        height: data.height,
+      }"
+      :borderWidth="2"
+      :borderRadius="10"
+      :withHalo="true"
+      :circleTime="2"
+    />
+  </div>
+</template>