@shijiu/jsview-vue 1.9.731 → 1.9.747

package/samples/ThrowMoveDemo/TargetDemo.vue

@@ -1,116 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 14:11:39
- * @Description: file content
--->
-<script>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode === 13) {
-        let preDirection = this.direction;
-        this.direction = -this.direction;
-        this.moveControl.moveToX(195 * this.direction, 250, (x, y) => {
-          console.log(`Move end with x=${x} y=${y}`);
-        });
-        const position = (-100 * preDirection) / 2;
-        this.throwControl.throwAlongY(
-          -500 * preDirection,
-          750 * preDirection,
-          {
-            type: "catch",
-            position,
-            direction: -1 * preDirection,
-          },
-          (x, y) => {
-            console.log(`Throw end with x=${x} y=${y}`);
-          }
-        );
-        return true;
-      }
-      return false;
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      key="sample1"
-      class="detail-font"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
-      拐点前触碰目标点
-    </div>
-    <div
-      key="DirectText"
-      class="font"
-      :style="{ top: 250, left: 425, width: 430, height: 40 }"
-    >
-      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div
-            :style="{ backgroundColor: '#0916ff', width: 30, height: 30 }"
-          ></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32px;
-  color: #73665c;
-  line-height: 40px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32px;
-  color: #f7f7eb;
-  line-height: 30px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/samples/ThrowMoveDemo/UDParabolicDemo.vue

@@ -1,121 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:07:16
- * @Description: file content
--->
-<script>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  computed: {
-    directionDetail() {
-      return this.direction < 0 ? "上" : "下";
-    },
-    detail() {
-      return this.direction < 0 ? "向上抛物" : "向下掷物并弹起";
-    },
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      let preDirection = this.direction;
-      switch (ev.keyCode) {
-        case 13:
-          this.direction = -this.direction;
-          this.throwControl.throwAlongY(
-            -400 * preDirection,
-            550 * preDirection,
-            {
-              type: "catch",
-              position: 100 * preDirection,
-              direction: preDirection,
-            },
-            (x, y) => {
-              console.log(`Throw end with x=${x} y=${y}`);
-            }
-          );
-          return true;
-      }
-      return false;
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      key="sample1"
-      class="detail-font"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
-      {{ detail }}
-    </div>
-    <div
-      key="DirectText"
-      class="font"
-      :style="{ top: 250, left: 425, width: 430, height: 40 }"
-    >
-      {{ `当前方向:${directionDetail}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div
-            :style="{ backgroundColor: '#ffb915', width: 30, height: 30 }"
-          ></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32px;
-  color: #73665c;
-  line-height: 40px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32px;
-  color: #f7f7eb;
-  line-height: 30px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/samples/TouchSample/App.vue

@@ -1,136 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:20:39
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 14:12:05
- * @Description: file content
--->
-<script>
-import MetroWidgetHorizontal from "./MetroWidgetHorizontal.vue";
-import MetroWidgetVertical from "./MetroWidgetVertical.vue";
-import TouchContainerHorizontal from "./TouchContainerHorizontal.vue";
-import TouchContainerVertical from "./TouchContainerVertical.vue";
-import { jJsvRuntimeBridge, JsvTouchContainer } from "jsview";
-
-export default {
-  components: {
-    MetroWidgetHorizontal,
-    MetroWidgetVertical,
-    TouchContainerHorizontal,
-    JsvTouchContainer,
-    TouchContainerVertical,
-  },
-  data() {
-    return {
-      metroVerticalVisible: false,
-      metroHorizontalVisible: true,
-      touchContainerHorizontalVisible: false,
-      touchContainerVerticalVisible: false,
-      head: "SimpleWidget 横向",
-    };
-  },
-  setup() {
-    const tabList = [
-      "SimpleWidget 横向",
-      "SimpleWidget 纵向",
-      "TouchContainer 横向",
-      "TouchContainer 纵向",
-    ];
-    return {
-      tabList,
-    };
-  },
-  methods: {
-    _onClick(id) {
-      switch (id) {
-        case 0:
-          this.head = "SimpleWidget 横向";
-          this.metroVerticalVisible = false;
-          this.metroHorizontalVisible = true;
-          this.touchContainerHorizontalVisible = false;
-          this.touchContainerVerticalVisible = false;
-          break;
-        case 1:
-          this.head = "SimpleWidget 纵向";
-          this.metroVerticalVisible = true;
-          this.metroHorizontalVisible = false;
-          this.touchContainerHorizontalVisible = false;
-          this.touchContainerVerticalVisible = false;
-          break;
-        case 2:
-          this.head = "TouchContainer 横向";
-          this.metroVerticalVisible = false;
-          this.metroHorizontalVisible = false;
-          this.touchContainerHorizontalVisible = true;
-          this.touchContainerVerticalVisible = false;
-          break;
-        case 3:
-          this.head = "TouchContainer 纵向";
-          this.metroVerticalVisible = false;
-          this.metroHorizontalVisible = false;
-          this.touchContainerHorizontalVisible = false;
-          this.touchContainerVerticalVisible = true;
-          break;
-        default:
-          break;
-      }
-      return true;
-    },
-  },
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      width: 1280,
-      height: 720 * 2,
-      backgroundColor: '#1b2697',
-    }"
-  >
-    <jsv-touch-container
-      v-for="(title, index) of tabList"
-      :key="'tab' + index"
-      :style="{
-        left: 50 + 300 * index,
-        top: 10,
-        width: 280,
-        height: 50,
-        backgroundColor: '#ff0000',
-        fontSize: 18,
-        lineHeight: '50px',
-      }"
-      :onClick="
-        () => {
-          return this._onClick(index);
-        }
-      "
-      :direction="DIRECTION_DISABLE"
-    >
-      {{ title }}
-    </jsv-touch-container>
-
-    <div
-      :style="{
-        left: 30,
-        top: 60,
-        width: 400,
-        height: 50,
-        fontSize: 30,
-        lineHeight: '50px',
-        color: '#f0ef29',
-      }"
-    >
-      {{ head }}
-    </div>
-    <div :style="{ left: 30, top: 120 }">
-      <metro-widget-horizontal v-if="metroHorizontalVisible" />
-      <metro-widget-vertical v-if="metroVerticalVisible" />
-      <touch-container-horizontal v-if="touchContainerHorizontalVisible" />
-      <touch-container-vertical v-if="touchContainerVerticalVisible" />
-    </div>
-  </div>
-</template>

package/samples/TouchSample/Item.vue

@@ -1,103 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:21:43
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-10 21:21:44
- * @Description: file content
--->
-<script>
-import { getPositionRelativeToView } from "jsview";
-function randomColor() {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-}
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    test: Object,
-  },
-  data() {
-    return {
-      focused: false,
-    };
-  },
-  setup() {
-    return {
-      randomColor,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        width: this.data.width,
-        height: this.data.height,
-        color: "#FFFFFF",
-        backgroundColor: this.focused ? "#FF0000" : this.data.color,
-      };
-    },
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-      console.log("cchtest item onfocus", this.data);
-    },
-
-    onBlur() {
-      this.focused = false;
-    },
-
-    onClick() {
-      console.log(`item ${this.query.id} clicked`);
-    },
-  },
-  created() {
-    // console.log("cchtest item created", this.data.content)
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-  mounted() {
-    // console.log("cchtest item mounted", this.data.content)
-  },
-  beforeUnmount() {
-    // console.log("cchtest item unmount", this.data.content)
-  },
-  updated() {
-    // console.log("cchtest item update", this.data.content)
-  },
-};
-</script>
-
-<template>
-  <div ref="element" :class="focused ? 'focus' : 'blur'" :style="style">
-    {{ data.content }}
-  </div>
-  <div
-    :style="{
-      left: data.width / 2,
-      top: data.height / 2,
-      width: 10,
-      height: 10,
-      backgroundColor: focused ? '#000000' : '#FF0000',
-    }"
-  />
-</template>
-
-<style scoped>
-.focus {
-  transform: scale3d(1, 1, 1);
-  transition: transform 0.25s linear;
-  font-size: 30px;
-}
-
-.blur {
-  transform: scale3d(1, 1, 1);
-  transition: transform 0.25s linear;
-  font-size: 30px;
-}
-</style>

package/samples/TouchSample/MetroWidgetHorizontal.vue

@@ -1,144 +0,0 @@
-<script>
-import {
-  HORIZONTAL,
-  MetroWidget,
-  WholePageSlide,
-  SeamlessSlide,
-  FixPositionSlide,
-} from "jsview";
-
-import Item from "./Item.vue";
-
-import { metroWidgetH, measures } from "./data.js";
-import { ref, shallowRef } from "vue";
-
-export default {
-  components: {
-    MetroWidget,
-    Item,
-  },
-  setup() {
-    return {
-      measures,
-      name: "/metroWidgetH",
-      direction: HORIZONTAL,
-      wholePageSlide: new WholePageSlide({
-        speed: 1.5,
-      }),
-      seamlessSlide: new SeamlessSlide({
-        startPercent: 0.4,
-        endPercent: 0.6,
-        speed: 0.5,
-      }),
-      fixPositionSlide: new FixPositionSlide({
-        fixPercent: 0.5,
-        speed: 0.5,
-      }),
-      token: ref(0),
-      CONST_ITEM_WIDTH: 100,
-      CONST_ITEM_HEIGHT: 200,
-    };
-  },
-  methods: {
-    _provideData() {
-      return metroWidgetH;
-    },
-  },
-
-  mounted() {},
-};
-</script>
-
-<template>
-  <div class="rootSize">
-    <div :style="{ width: 1280, height: 720, left: 50 }">
-      <div
-        :style="{
-          top: 0,
-          width: 200,
-          height: 40,
-          fontSize: 25,
-          lineHeight: '40px',
-          color: '#fff753',
-        }"
-      >
-        整页滑动
-      </div>
-      <div
-        :style="{
-          top: 50,
-          width: CONST_ITEM_WIDTH * 10 + 20,
-          height: CONST_ITEM_HEIGHT + 20,
-          backgroundColor: '#ff0000',
-        }"
-      >
-        <metro-widget
-          name="simpleWidgetHorizontal1"
-          :width="CONST_ITEM_WIDTH * 10 + 20"
-          :height="CONST_ITEM_HEIGHT + 20"
-          :direction="direction"
-          :measures="measures"
-          :provideData="_provideData"
-          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
-          :enableTouch="true"
-          :flingPageWidth="CONST_ITEM_WIDTH * 10"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            /> </template
-        ></metro-widget>
-      </div>
-      <div
-        :style="{
-          top: CONST_ITEM_HEIGHT + 100,
-          width: 200,
-          height: 40,
-          fontSize: 25,
-          lineHeight: '40px',
-          color: '#fff753',
-        }"
-      >
-        普通滑动
-      </div>
-      <div
-        :style="{
-          top: CONST_ITEM_HEIGHT + 100 + 50,
-          width: CONST_ITEM_WIDTH * 10 + 20,
-          height: CONST_ITEM_HEIGHT + 20,
-          backgroundColor: '#ff0000',
-        }"
-      >
-        <metro-widget
-          name="simpleWidgetHorizontal2"
-          :width="CONST_ITEM_WIDTH * 10 + 20"
-          :height="CONST_ITEM_HEIGHT + 20"
-          :direction="direction"
-          :measures="measures"
-          :provideData="_provideData"
-          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
-          :enableTouch="true"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            /> </template
-        ></metro-widget>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1920;
-  height: 1080;
-  background-color: #334c4c;
-}
-</style>