@shijiu/jsview-vue 0.9.359-alpha.0 → 0.9.422

package/utils/JsViewEngineWidget/MetroWidget/ItemView.vue

@@ -0,0 +1,220 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-18 14:34:20
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-03-25 14:30:24
+ * @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.element) {
+          if (!this.touchTested) {
+            // 为view添加触控处理
+            let view = this.$refs.element.jsvMaskView;
+            var 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);
+    //TODO 触控的处理有待添加
+    // this.testTouchEnable();
+    // this.widgetHandler.updateMounted(this.index, true);
+    // const curFocus = this.widgetHandler.getCurrentFocusId();
+    // if (this.widgetHandler.isFocus() && curFocus.index === this.index) {
+    //   //unmount 后导致的onFocus 在 mount 前，onFocus 为生效的问题
+    //   this.onFocus();
+    // }
+  },
+  updated() {
+    //TODO 触控的处理有待添加
+    // 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>