@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/SimpleWidgetDemo/data.js

@@ -1,124 +0,0 @@
-// const data = [
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#000022",
-//         content: 0
-//     },
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#003300",
-//         content: 1
-//     },
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#000044",
-//         content: 2
-//     },
-//     {
-//         blocks: {
-//             w: 400,
-//             h: 320
-//         },
-//         focusable: true,
-//         color: "#000055",
-//         content: 3
-//     },
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#000066",
-//         content: 4
-//     },
-//     {
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#0000CD",
-//         content: 5
-//     },
-// ];
-
-// let content = 6;
-// for (let i = 0; i < 10; i++) {
-//     data.push({
-//         blocks: {
-//             w: 200,
-//             h: 320
-//         },
-//         focusable: true,
-//         color: "#000022",
-//         content: content++
-//     });
-//     data.push({
-//         blocks: {
-//             w: 200,
-//             h: 160
-//         },
-//         focusable: true,
-//         color: "#003300",
-//         content: content++
-//     });
-// }
-
-let data1 = [];
-
-// 添加300个模拟数据
-for (let i = 0; i < 40; i++) {
-  data1.push({
-    index: i,
-    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
-    prize: `${Math.floor(Math.random() * 200) +
-      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
-    savePrize: `${i}`,
-    soldTotal: `${Math.floor(Math.random() * 50000)}`,
-    pictUrl:
-      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
-  });
-}
-
-let data2 = [];
-for (let i = 0; i < 50; i++) {
-  data2.push({
-    index: i,
-    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
-    prize: `${Math.floor(Math.random() * 200) +
-      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
-    savePrize: `${i}`,
-    soldTotal: `${Math.floor(Math.random() * 50000)}`,
-    pictUrl:
-      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
-  });
-}
-
-let data3 = [];
-for (let i = 0; i < 30; i++) {
-  data3.push({
-    index: i,
-    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
-    prize: `${Math.floor(Math.random() * 200) +
-      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
-    savePrize: `${i}`,
-    soldTotal: `${Math.floor(Math.random() * 50000)}`,
-    pictUrl:
-      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
-  });
-}
-
-export { data1, data2, data3 };

package/utils/JsViewEngineWidget/MetroWidget/ContentView.vue

@@ -1,63 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-22 13:47:23
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-03-02 10:15:03
- * @Description: file content
--->
-<script>
-import ItemView from "./ItemView.vue";
-
-export default {
-  props: {
-    tokenForRefresh: Number,
-    dataUpdateToken: Number,
-    onItemEdge: Function,
-    loadAll: Boolean,
-    enableTouch: Boolean,
-    onLoad: Function,
-    widgetHandler: Object,
-    enableItemRenderBreak: Boolean,
-    placeHolderSetting: Object,
-  },
-  setup() {
-    return {
-      innerData: [],
-    };
-  },
-  methods: {
-    updateData(data) {
-      this.innerData = data;
-    },
-  },
-  components: {
-    ItemView,
-  },
-  mounted() {
-    this.onLoad();
-  },
-  updated() {
-    this.onLoad();
-  },
-};
-</script>
-
-<template>
-  <item-view
-    v-for="item in innerData"
-    :key="dataUpdateToken + '_' + item.index"
-    :index="item.index"
-    :data="item.data"
-    :loadAll="loadAll"
-    :enableTouch="enableTouch"
-    :onEdge="onItemEdge"
-    :controlObj="item.controller"
-    :widgetHandler="widgetHandler"
-    :enableItemRenderBreak="enableItemRenderBreak"
-    :placeHolderSetting="placeHolderSetting"
-  >
-    <template v-slot:renderItem="slotProps">
-      <slot name="renderItem" v-bind="slotProps"></slot>
-    </template>
-  </item-view>
-</template>

package/utils/JsViewEngineWidget/MetroWidget/DivWrapper.vue

@@ -1,51 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-01-14 18:18:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-03-24 16:57:36
- * @Description: file content
--->
-<script>
-export default {
-  props: [
-    "data",
-    "onEdge",
-    "onAction",
-    "queryObj",
-    "widgetHandler",
-    "index",
-    "onFocus",
-    "onmounted",
-  ],
-  mounted() {
-    // this.widgetHandler.updateMounted(this.index, true);
-    this.onmounted?.();
-    const curFocus = this.widgetHandler.getCurrentFocusId();
-    if (this.widgetHandler.isFocus() && curFocus.index === this.index) {
-      //unmount 后导致的onFocus 在 mount 前，onFocus 为生效的问题
-      this.onFocus(this.widgetHandler.getPreEdgeRect());
-    }
-  },
-  beforeUnmount() {
-    // this.widgetHandler.updateMounted(this.index, false);
-  },
-};
-</script>
-
-<template>
-  <div
-    ref="element"
-    :style="{
-      width: data.width,
-      height: data.height,
-    }"
-  >
-    <slot
-      name="renderItem"
-      :data="data.data"
-      :onEdge="onEdge"
-      :onAction="onAction"
-      :query="queryObj"
-    ></slot>
-  </div>
-</template>

package/utils/JsViewEngineWidget/MetroWidget/ItemView.vue

@@ -1,213 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-18 14:34:20
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-02 16:21:15
- * @Description: file content
--->
-<script>
-import Forge from "../ForgeDefine";
-import DivWrapper from "./DivWrapper.vue";
-import { EdgeDirection } from "../WidgetCommon";
-
-import { ref } from "vue";
-const DirectionMap = (direction) => {
-  switch (direction) {
-    case EdgeDirection.left:
-      return "left";
-    case EdgeDirection.right:
-      return "right";
-    case EdgeDirection.top:
-      return "top";
-    case EdgeDirection.bottom:
-      return "bottom";
-  }
-};
-export default {
-  components: { DivWrapper },
-  props: {
-    data: Object,
-    loadAll: Boolean,
-    enableTouch: Boolean,
-    controlObj: Object,
-    onEdge: Function,
-    widgetHandler: Object,
-    index: Number,
-    enableItemRenderBreak: Boolean,
-    placeHolderSetting: {
-      type: Object,
-      default() {
-        return {
-          backgroundColor: "rgba(255,255,255,0.5)",
-        };
-      },
-    },
-  },
-  setup() {
-    let onAction = {
-      register(name, func) {
-        this[name] = func;
-      },
-      unregister(name) {
-        delete this[name];
-      },
-    };
-    let mounted = ref(false);
-    return {
-      onAction,
-      queryObj: null,
-      touchTested: false,
-      mounted,
-    };
-  },
-  computed: {
-    placeHolderGap() {
-      return this.placeHolderSetting.gap ? this.placeHolderSetting.gap : 0;
-    },
-  },
-  methods: {
-    onFocus(preEdge) {
-      this.widgetHandler.onFocusChange(this.data.id);
-      if (this.onAction.onFocus) {
-        this.onAction.onFocus(preEdge);
-      }
-      let event = {
-        type: "focusRect",
-        direction: DirectionMap(preEdge?.direction),
-        element: this.getDivElement(),
-      };
-      this.widgetHandler.sendCustomerEvent(event);
-    },
-    onBlur() {
-      if (this.onAction.onBlur) {
-        this.onAction.onBlur();
-      }
-    },
-    onClick() {
-      if (this.onAction.onClick) {
-        return this.onAction.onClick();
-      } else {
-        return false;
-      }
-    },
-    reachEdge(edgeInfo) {
-      if (this.onAction.onWidgetEdge) {
-        this.onAction.onWidgetEdge(edgeInfo);
-      }
-    },
-    getDivElement() {
-      return this.$refs.itemDiv;
-    },
-    testTouchEnable() {
-      
-      if (this.enableTouch) {
-        if (this.$refs.itemDiv) {
-          if (!this.touchTested) {
-            // 为view添加触控处理
-            let view = this.$refs.itemDiv.jsvMaskView;
-            let dragSetting = new Forge.DragSetting(
-              Forge.DragSetting.DIRECTION_DISABLE,
-              20,
-              false,
-              new Forge.RectArea(0, 0, 0, 0),
-              -1,
-              3 / 4
-            );
-            let callback = {
-              OnTap: (msg) => {
-                console.log("Item View Container OnTap:", msg);
-                return this.onClick(this.data.id);
-              },
-            };
-            view.EnableDrag(dragSetting, callback, "translateMat(dx,dy,0)");
-            this.touchTested = true;
-          }
-        } else {
-          // 元素消失后要重新设置Touch处理
-          this.touchTested = false;
-        }
-      }
-    },
-    onDivMounted() {
-      this.mounted = true;
-    },
-  },
-  created() {
-    this.queryObj = {
-      id: this.data.id,
-      index: this.index,
-      position: this.widgetHandler.getPosition,
-      templatePosition: this.widgetHandler.getTemplatePosition,
-      absolutePosition: this.widgetHandler.getAbsolutePosition,
-      getCurrentFocusId: this.widgetHandler.getCurrentFocusId,
-      slideTo: this.widgetHandler.customerSlide,
-    };
-    this.widgetHandler.registerItemRef(this.index, this);
-    //export handlers
-    this.widgetHandler.registerItemFunc(this.index, {
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onClick: this.onClick,
-      reachEdge: this.reachEdge,
-    });
-  },
-  mounted() {
-    this.widgetHandler.updateMounted(this.index, true);
-    this.testTouchEnable();
-  },
-  updated() {
-    this.testTouchEnable();
-  },
-  beforeUnmount() {
-    this.widgetHandler.updateMounted(this.index, false);
-  },
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      zIndex: controlObj.zIndex,
-    }"
-  >
-    <div
-      ref="itemDiv"
-      :style="{
-        left: data.xPos,
-        top: data.yPos,
-        width: data.width,
-        height: data.height,
-      }"
-    >
-      <div
-        v-if="enableItemRenderBreak && placeHolderSetting && !mounted"
-        :style="{
-          width: data.width - placeHolderGap,
-          height: data.height - placeHolderGap,
-          backgroundColor: placeHolderSetting.backgroundColor,
-          borderRadius: placeHolderSetting.borderRadius,
-        }"
-      ></div>
-      <div-wrapper
-        v-if="
-          !enableItemRenderBreak || mounted || widgetHandler.handler.itemRender
-        "
-        ref="divWrapper"
-        :key="data.index"
-        :data="data"
-        :onEdge="onEdge"
-        :onAction="onAction"
-        :queryObj="queryObj"
-        :widgetHandler="widgetHandler"
-        :index="index"
-        :onFocus="onFocus"
-        :allowRenderBreak="enableItemRenderBreak"
-        :onmounted="onDivMounted"
-      >
-        <template v-slot:renderItem="slotProps">
-          <slot name="renderItem" v-bind="slotProps"></slot>
-        </template>
-      </div-wrapper>
-    </div>
-  </div>
-</template>

package/utils/JsViewEngineWidget/MetroWidget/RootView.vue

@@ -1,154 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-22 14:03:32
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-12 09:14:22
- * @Description: file content
--->
-<script>
-import ContentView from "./ContentView.vue";
-import Forge from "../ForgeDefine";
-
-export default {
-  props: {
-    tokenForRefresh: Number,
-    dataUpdateToken: Number,
-    onItemEdge: Function,
-    onLoad: Function,
-    register: Function,
-    widgetHandler: Object,
-    placeHolderSetting: Object,
-
-    x: Number,
-    y: Number,
-    width: Number,
-    height: Number,
-
-    loadAll: Boolean,
-    enableTouch: Boolean,
-    touchListener: Object,
-    flingPageWidth: Number,
-    flingPageEdge: Number,
-    slidePile: Object,
-    direction: Number, //Forge.DragSetting的方向是数字类型
-    enableItemRenderBreak: Boolean,
-  },
-  components: {
-    ContentView,
-  },
-  data() {
-    return {
-      innerX: 0,
-      innerY: 0,
-    };
-  },
-  setup() {
-    let element = {};
-    return {
-      element,
-    };
-  },
-  methods: {
-    $_rootView_initTouch_() {
-      if (this.touchListener && this.$refs.element) {
-        let view = this.$refs.element.jsvMaskView;
-        let page_width = this.flingPageWidth;
-        let page_edge = this.flingPageEdge;
-        let slide_pile = this.slidePile;
-        var drag_setting = new Forge.DragSetting(
-          this.direction,
-          20,
-          false,
-          slide_pile,
-          page_width,
-          page_edge
-        );
-        view.EnableDrag(
-          drag_setting,
-          this.touchListener,
-          "translateMat(dx,dy,0)"
-        );
-      }
-    },
-    updatePosition(x, y, anim_info) {
-      if (this.$refs.element) {
-        let pre_pos = this.$refs.element.jsvMaskView.GetLayoutParams();
-        //jsvMaskView的位置更新时会被设置位0，因此不能通过ResetLayoutParams设置位置
-        this.innerX = x;
-        this.innerY = y;
-        if (anim_info) {
-          let delta_x = Math.abs(pre_pos.MarginLeft - x);
-          let delta_y = Math.abs(pre_pos.MarginTop - y);
-          let duration = Math.round(
-            delta_x === 0
-              ? delta_y / anim_info.speed
-              : delta_x / anim_info.speed
-          );
-          let slide_animation = new Forge.TranslateAnimation(
-            pre_pos.MarginLeft - x,
-            0,
-            pre_pos.MarginTop - y,
-            0,
-            duration,
-            anim_info.easing
-          );
-          slide_animation.SetAnimationListener(
-            new Forge.AnimationListener(
-              anim_info.onstart,
-              anim_info.onend,
-              null
-            )
-          );
-          this.$refs.element.jsvMaskView.StartAnimation(slide_animation);
-        }
-      }
-    },
-    updateData(data) {
-      this.$refs?.contentView?.updateData(data);
-    },
-    getLocateDiv() {
-      return this.$refs.locateDiv;
-    },
-  },
-  created() {
-    if (this.register) {
-      this.register(this);
-    }
-  },
-  mounted() {
-    //TODO 触控的处理有待添加
-    this.$_rootView_initTouch_();
-    //window.touchDiv = this.$refs.element
-  },
-};
-</script>
-
-<template>
-  <div :style="{ left: x, top: y }">
-    <div
-      key="touchcontainer"
-      ref="element"
-      :style="{ left: innerX, top: innerY, width: width, height: height }"
-    >
-      <!-- 用于定位的div -->
-      <div ref="locateDiv">
-        <content-view
-          ref="contentView"
-          :tokenForRefresh="tokenForRefresh"
-          :dataUpdateToken="dataUpdateToken"
-          :onItemEdge="onItemEdge"
-          :loadAll="loadAll"
-          :enableTouch="enableTouch"
-          :onLoad="onLoad"
-          :widgetHandler="widgetHandler"
-          :enableItemRenderBreak="enableItemRenderBreak"
-          :placeHolderSetting="placeHolderSetting"
-        >
-          <template v-slot:renderItem="slotProps">
-            <slot name="renderItem" v-bind="slotProps"></slot>
-          </template>
-        </content-view>
-      </div>
-    </div>
-  </div>
-</template>