create-jsview 2.1.428 → 2.1.435

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

@@ -1,534 +0,0 @@
-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*/