create-jsview 2.1.367-test.0 → 2.1.428

package/template-vue-vite/dist-test-jsview-chunk/js/DispersedItemSample.9696c982.js

@@ -0,0 +1,534 @@
+import { u as useFocusHub } from "./jsview-vue-entry.415721d8.js";
+import { s as shallowRef, o as openBlock, e as createElementBlock, O as createTextVNode, G as toDisplayString, f as createBaseVNode, g as normalizeStyle, u as unref, a as ref, b as resolveComponent, A as createBlock, l as withCtx, F as Fragment, m as renderList, j as renderSlot, t as onMounted, k as createVNode } from "./vue.889a9b8b.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const _sfc_main$2 = {
+  __name: "Item",
+  props: {
+    data: Object,
+    onAction: Object,
+    query: Object
+  },
+  setup(__props) {
+    const props = __props;
+    let focused = shallowRef(false);
+    let clicked = shallowRef(false);
+    const onFocus = () => {
+      focused.value = true;
+    };
+    const onBlur = () => {
+      focused.value = false;
+      clicked.value = false;
+    };
+    const onClick = () => {
+      clicked.value = !clicked.value;
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onClick", onClick);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          width: props.data.width,
+          height: props.data.height,
+          backgroundColor: unref(clicked) ? "#0000FF" : unref(focused) ? props.data.color : "#FFFFFF",
+          left: props.data.left,
+          top: props.data.top,
+          fontSize: 30
+        })
+      }, [
+        createTextVNode(toDisplayString(props.query.id) + " ", 1),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            width: props.data.width,
+            height: 68,
+            fontSize: 24,
+            top: 32
+          })
+        }, toDisplayString(`left: ${props.data.left}
+top: ${props.data.top}`), 5)
+      ], 4);
+    };
+  }
+};
+class MyRenderItem {
+  divMountedCallback = [];
+  customerData;
+  mounted = ref(false);
+  touchInit = false;
+  rootDiv = null;
+  customerCallbackMap = {};
+  onRef;
+  registerObj;
+  query;
+  constructor(customerData, onRef, query) {
+    this.customerData = customerData;
+    this.onRef = onRef;
+    const register = this.register.bind(this);
+    const unregister = this.unregister.bind(this);
+    this.registerObj = { register, unregister };
+    this.query = query;
+  }
+  //TODO item的div ref 会调用多次, 待调查
+  divRef = (ele) => {
+    this.rootDiv = ele;
+    if (ele) {
+      this.onDivMounted();
+    } else {
+      this.onDivUnmounted();
+    }
+  };
+  slotRef = (ele) => {
+    if (!this.mounted.value && ele) {
+      this.mounted.value = true;
+      this.onRef?.();
+    } else if (!ele && this.mounted.value) {
+      this.mounted.value = false;
+    }
+  };
+  register(name, callback) {
+    this.customerCallbackMap[name] = callback;
+  }
+  unregister(name) {
+    delete this.customerCallbackMap[name];
+  }
+  onFocus(rect) {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onFocus?.(rect);
+      return true;
+    } else {
+      return false;
+    }
+  }
+  onBlur() {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onBlur?.();
+      return true;
+    } else {
+      return false;
+    }
+  }
+  onClick() {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onClick?.();
+      return true;
+    } else {
+      return false;
+    }
+  }
+  onWidgetEdge(rect) {
+    if (this.mounted.value) {
+      this.customerCallbackMap.onWidgetEdge?.(rect);
+      return true;
+    } else {
+      return false;
+    }
+  }
+  addDivMountedListener(cbk) {
+    this.divMountedCallback.push(cbk);
+  }
+  onDivMounted() {
+    if (this.divMountedCallback.length > 0) {
+      this.divMountedCallback.forEach((cbk) => {
+        if (this.rootDiv) {
+          cbk(this.rootDiv);
+        }
+      });
+    }
+    this.divMountedCallback = [];
+  }
+  onDivUnmounted() {
+    this.touchInit = false;
+    this.divMountedCallback = [];
+  }
+}
+const _sfc_main$1 = {
+  __name: "DispersedItemWidget",
+  props: {
+    data: {
+      type: Array,
+      require: true
+    },
+    initFocusId: {
+      type: Number
+    },
+    onEdge: {
+      type: Function
+    },
+    SpecIndex: {
+      type: Object
+    },
+    name: {
+      type: String,
+      require: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    let focusNode = shallowRef(null);
+    let focusId = 0;
+    let id = 0;
+    let index = 0;
+    let innerData = [];
+    let preFocusId = -1;
+    const onItemFocus = (focusIndex) => {
+      innerData[focusIndex].customerCallbackMap.onFocus();
+      return innerData[focusIndex];
+    };
+    const onItemBlur = (blurIndex) => {
+      innerData[blurIndex].customerCallbackMap.onBlur();
+      return innerData[blurIndex];
+    };
+    const getItemByIndex = (index2) => {
+      return innerData[index2];
+    };
+    const _getPosition = (index2) => {
+      let templateInfo = getItemByIndex(index2);
+      return {
+        left: templateInfo.customerData.left,
+        top: templateInfo.customerData.top,
+        width: templateInfo.customerData.width,
+        height: templateInfo.customerData.height
+      };
+    };
+    const draw = (customerData) => {
+      const item = new MyRenderItem(
+        customerData,
+        () => {
+        },
+        //query object
+        {
+          id: id++,
+          index: index++,
+          position: _getPosition
+        }
+      );
+      innerData.push(item);
+    };
+    const onItemClick = (focusIndex) => {
+      innerData[focusIndex].customerCallbackMap.onClick();
+    };
+    const getAngleRange = (direction) => {
+      switch (direction) {
+        case "up":
+          return [5 * Math.PI / 4, 7 * Math.PI / 4];
+        case "left":
+          return [3 * Math.PI / 4, 5 * Math.PI / 4];
+        case "down":
+          return [Math.PI / 4, 3 * Math.PI / 4];
+        case "right":
+          return [7 * Math.PI / 4, Math.PI / 4];
+        default:
+          console.log("direction无效值！");
+      }
+    };
+    const isAngleInRange = (angle, range) => {
+      const [start, end] = range;
+      if (start < end) {
+        return angle >= start && angle <= end;
+      } else {
+        return angle >= start || angle <= end;
+      }
+    };
+    const calculateAngle = (currentCenter, nextCenter) => {
+      const deltaX = nextCenter.x - currentCenter.x;
+      const deltaY = nextCenter.y - currentCenter.y;
+      let angle = Math.atan2(deltaY, deltaX);
+      if (angle < 0) {
+        angle += 2 * Math.PI;
+      }
+      return angle;
+    };
+    const changeFocus = (currentIndex, nextIndex) => {
+      onItemBlur(currentIndex);
+      focusId = nextIndex;
+      onItemFocus(nextIndex);
+    };
+    const _moveToNext = (direction) => {
+      const currentIndex = focusId;
+      let nextIndex = -1;
+      let centerList = [];
+      let minDistance = Infinity;
+      innerData.forEach((item, index2) => {
+        centerList.push({
+          x: item.customerData.left + item.customerData.width / 2,
+          y: item.customerData.top + item.customerData.height / 2
+        });
+      });
+      const currentCenter = centerList[currentIndex];
+      const angleRange = getAngleRange(direction);
+      for (let i = 0; i < centerList.length; i++) {
+        if (i === currentIndex)
+          continue;
+        const nextCenter = centerList[i];
+        const angle = calculateAngle(currentCenter, nextCenter);
+        const distance = calculateDistance(currentCenter, nextCenter);
+        if (isMovingInDirection(currentCenter, nextCenter, direction) && isAngleInRange(angle, angleRange) && distance < minDistance) {
+          minDistance = distance;
+          nextIndex = i;
+        }
+      }
+      if (nextIndex !== -1) {
+        changeFocus(currentIndex, nextIndex);
+      } else {
+        props?.onEdge();
+      }
+    };
+    const _appointToNext = (direction) => {
+      const currentIndex = focusId;
+      let nextIndex;
+      switch (direction) {
+        case "up":
+          nextIndex = innerData[currentIndex].customerData.SpecIndex.up;
+          changeFocus(currentIndex, nextIndex);
+          break;
+        case "left":
+          nextIndex = innerData[currentIndex].customerData.SpecIndex.left;
+          changeFocus(currentIndex, nextIndex);
+          break;
+        case "down":
+          nextIndex = innerData[currentIndex].customerData.SpecIndex.down;
+          changeFocus(currentIndex, nextIndex);
+          break;
+        case "right":
+          nextIndex = innerData[currentIndex].customerData.SpecIndex.right;
+          changeFocus(currentIndex, nextIndex);
+          break;
+        default:
+          return false;
+      }
+    };
+    const calculateDistance = (currentCenter, nextCenter) => {
+      const deltaX = nextCenter.x - currentCenter.x;
+      const deltaY = nextCenter.y - currentCenter.y;
+      return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    };
+    const isMovingInDirection = (currentCenter, nextCenter, direction) => {
+      switch (direction) {
+        case "up":
+          return nextCenter.y < currentCenter.y;
+        case "left":
+          return nextCenter.x < currentCenter.x;
+        case "down":
+          return nextCenter.y > currentCenter.y;
+        case "right":
+          return nextCenter.x > currentCenter.x;
+        default:
+          return false;
+      }
+    };
+    const focusBlockOnKeyDown = (ev) => {
+      switch (ev.keyCode) {
+        case 37:
+          if (innerData[focusId].customerData.SpecIndex && innerData[focusId].customerData.SpecIndex.left >= 0) {
+            _appointToNext("left");
+          } else {
+            _moveToNext("left");
+          }
+          break;
+        case 38:
+          if (innerData[focusId].customerData.SpecIndex && innerData[focusId].customerData.SpecIndex.up >= 0) {
+            _appointToNext("up");
+          } else {
+            _moveToNext("up");
+          }
+          break;
+        case 39:
+          if (innerData[focusId].customerData.SpecIndex && innerData[focusId].customerData.SpecIndex.right >= 0) {
+            _appointToNext("right");
+          } else {
+            _moveToNext("right");
+          }
+          break;
+        case 40:
+          if (innerData[focusId].customerData.SpecIndex && innerData[focusId].customerData.SpecIndex.down >= 0) {
+            _appointToNext("down");
+          } else {
+            _moveToNext("down");
+          }
+          break;
+        case 13:
+          onItemClick(focusId);
+          break;
+        default:
+          return false;
+      }
+      return true;
+    };
+    props.data.forEach((item, index2) => {
+      draw(item);
+    });
+    const focusBlockOnFocus = () => {
+      preFocusId = -1;
+      if (innerData.length === 0) {
+        console.log(`MetroWidget: ${props.name} get focus while data is empty.`);
+        return;
+      }
+      if (props.initFocusId < 0 || props.initFocusId > innerData.length - 1) {
+        console.error("initFocusId无效！");
+      }
+      let focus_id = props.initFocusId ? props.initFocusId : 0;
+      focusId = focus_id;
+      onItemFocus(focusId);
+      props.onFocus?.();
+    };
+    const focusBlockOnBlur = () => {
+      preFocusId = focusId;
+      onItemBlur(preFocusId);
+      props.onBlur?.();
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        ref_key: "focusNode",
+        ref: focusNode,
+        name: props.name,
+        onAction: {
+          onFocus: focusBlockOnFocus,
+          onBlur: focusBlockOnBlur,
+          onKeyDown: focusBlockOnKeyDown
+        }
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(innerData), (item, index2) => {
+            return openBlock(), createElementBlock("div", {
+              key: "_" + item.index,
+              ref_for: true,
+              ref: item.divRef,
+              style: normalizeStyle({
+                left: item.left,
+                top: item.top,
+                width: item.width,
+                height: item.height
+              })
+            }, [
+              (openBlock(), createElementBlock("div", {
+                key: `${props.name}_${index2}`,
+                id: `${props.name}_${index2}`
+              }, [
+                renderSlot(_ctx.$slots, "renderItem", {
+                  data: item.customerData,
+                  onAction: item.registerObj,
+                  query: item.query
+                })
+              ], 8, ["id"]))
+            ], 4);
+          }), 128))
+        ]),
+        _: 3
+      }, 8, ["name", "onAction"]);
+    };
+  }
+};
+const DispersedItemSample_vue_vue_type_style_index_0_scoped_b834de3c_lang = "";
+const _sfc_main = {
+  __name: "DispersedItemSample",
+  setup(__props) {
+    let focusHub = useFocusHub();
+    const data = [
+      {
+        width: 200,
+        height: 100,
+        left: 60,
+        top: 400,
+        color: "#FF1213"
+      },
+      {
+        width: 200,
+        height: 100,
+        left: 380,
+        top: 420,
+        color: "#FF1213"
+      },
+      {
+        width: 200,
+        height: 100,
+        left: 700,
+        top: 360,
+        color: "#FF1213",
+        SpecIndex: {
+          right: 6
+        }
+      },
+      {
+        width: 300,
+        height: 200,
+        left: 900,
+        top: 500,
+        color: "#FF1213"
+      },
+      {
+        width: 200,
+        height: 100,
+        left: 1060,
+        top: 200,
+        color: "#FF1213"
+      },
+      {
+        width: 200,
+        height: 100,
+        left: 760,
+        top: 60,
+        color: "#FF1213"
+      },
+      {
+        width: 200,
+        height: 100,
+        left: 1060,
+        top: 380,
+        color: "#FF1213"
+      }
+    ];
+    const mainFocus = () => {
+      focusHub.setFocus("dispersed");
+    };
+    const onEdge = () => {
+      console.log("到边缘了无法移动");
+    };
+    onMounted(() => {
+      focusHub.setFocus("main");
+    });
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        onAction: { onFocus: mainFocus },
+        name: "main"
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { class: "bgStyle" }, [
+            createVNode(_sfc_main$1, {
+              name: "dispersed",
+              data,
+              initFocusId: 2,
+              onEdge
+            }, {
+              renderItem: withCtx(({ data: data2, query, onEdge: onEdge2, onAction }) => [
+                createVNode(_sfc_main$2, {
+                  data: data2,
+                  query,
+                  onEdge: onEdge2,
+                  onAction
+                }, null, 8, ["data", "query", "onEdge", "onAction"])
+              ]),
+              _: 1
+            }),
+            createBaseVNode("div", { class: "focusText" }, toDisplayString("初始聚焦: 第2项")),
+            createBaseVNode("div", { class: "opText" }, toDisplayString("操作提示：按上下左右键进行焦点切换，按【OK】键对当前聚焦项进行变色，按【返回】键退出。")),
+            createBaseVNode("div", { class: "specialText" }, toDisplayString("第2项正常情况按右键应为第3项，通过SpecIndex重新设置到了第6项。"))
+          ])
+        ]),
+        _: 1
+      }, 8, ["onAction"]);
+    };
+  }
+};
+const styleSheetsContent = { "b834de3c": { ".bgStyle": '{"width":1280,"height":720,"backgroundColor":"#007788"}', ".focusText": '{"width":200,"height":26,"fontSize":24,"color":"#ffffff","lineHeight":26,"left":30}', ".opText": '{"width":400,"height":90,"fontSize":24,"color":"#ffffff","lineHeight":26,"top":40,"left":30}', ".specialText": '{"width":400,"height":90,"fontSize":24,"color":"#ffffff","lineHeight":26,"top":150,"left":30}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const DispersedItemSample = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b834de3c"]]);
+export {
+  DispersedItemSample as default
+};
+//# sourceMappingURL=http://localhost:57245/map/DispersedItemSample.9696c982.js.map
+
+/*jsvmd5:663adaeae5244f1667df9b29c07a6eed*/