@shijiu/jsview-vue 2.3.151-test.0 → 2.3.728-alpha.0

package/utils/JsViewEngineWidget/SpatialNavigator/SpatialNavigationAlgorithm.ts

@@ -0,0 +1,260 @@
+import { EdgeDirection } from "../WidgetCommon";
+export interface Rect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  centerX: number;
+  centerY: number;
+}
+
+export interface SpatialNavigationCandidate<T> {
+  data: T;
+  rect: Rect;
+}
+
+interface CandidateScore<T> {
+  candidate: SpatialNavigationCandidate<T>;
+  primaryDistance: number;
+  secondaryDistance: number;
+  secondaryOverlapRange: number;
+  centerDistance: number;
+}
+
+/**
+ *
+ * @param current 当前元素
+ * @param candidates 候选元素列表
+ * @param direction 移动方向
+ * @description 寻找逻辑（以往下找为例子）：
+ *  1. 先寻找主方向最近的元素（item.top - cur.bottom 为正且最小的）tagItem
+ *  2. 寻找与tagItem在主方向重叠的元素（与tagItem纵向有重叠的元素，构成一个待选行）
+ *  3. 选择待选行中的离current副方向最近的元素(x距离最小的)
+ */
+export function findNextLayerFirst<T>(
+  current: SpatialNavigationCandidate<T>,
+  candidates: SpatialNavigationCandidate<T>[],
+  direction: Symbol
+): SpatialNavigationCandidate<T> | null {
+  const scored: CandidateScore<T>[] = [];
+
+  for (const candidate of candidates) {
+    const primaryDistance = getPrimaryDistance(
+      current.rect,
+      candidate.rect,
+      direction
+    );
+    //在direction相反方向的，全部忽略
+    if (primaryDistance < 0) {
+      continue;
+    }
+    const sInfo = getSecondaryDistance(current.rect, candidate.rect, direction);
+    let secondaryDistance = 0;
+    if (sInfo.type == 1 || sInfo.type == 2) {
+      secondaryDistance = sInfo.distance;
+    } else {
+      secondaryDistance = 0;
+    }
+    scored.push({
+      candidate,
+      primaryDistance,
+      secondaryDistance,
+      secondaryOverlapRange: sInfo.type === 0 ? sInfo.distance : 0,
+      centerDistance: getCenterDistance(current.rect, candidate.rect),
+    });
+  }
+  if (scored.length === 0) {
+    return null;
+  }
+  let minItem = scored[0];
+  for (let i = 1; i < scored.length; i++) {
+    if (scored[i].primaryDistance < minItem.primaryDistance) {
+      minItem = scored[i];
+    }
+  }
+  const filteredScored = scored
+    .filter(
+      (item) =>
+        getPrimaryOverlay(
+          minItem.candidate.rect,
+          item.candidate.rect,
+          direction
+        ) > 0
+    )
+    .sort((a, b) => {
+      if (a.secondaryOverlapRange != b.secondaryOverlapRange) {
+        return b.secondaryOverlapRange - a.secondaryOverlapRange;
+      }
+      if (Math.abs(a.secondaryDistance) != Math.abs(b.secondaryDistance)) {
+        return Math.abs(a.secondaryDistance) - Math.abs(b.secondaryDistance);
+      }
+      if (a.centerDistance != b.centerDistance) {
+        return a.centerDistance - b.centerDistance;
+      }
+      return 0;
+    });
+
+  return filteredScored[0]?.candidate ?? null;
+}
+
+export function findNextCandidate<T>(
+  current: SpatialNavigationCandidate<T>,
+  candidates: SpatialNavigationCandidate<T>[],
+  direction: Symbol
+): SpatialNavigationCandidate<T> | null {
+  const scored: CandidateScore<T>[] = [];
+
+  for (const candidate of candidates) {
+    const primaryDistance = getPrimaryDistance(
+      current.rect,
+      candidate.rect,
+      direction
+    );
+    if (primaryDistance < 0) {
+      continue;
+    }
+    const secondaryDistance = getSecondaryDistance(
+      current.rect,
+      candidate.rect,
+      direction
+    );
+    // 必须要在次方向（与主方向垂直的方向）上与当前元素有重叠才能被视为是可移动的
+    if (secondaryDistance.type !== 0) {
+      continue;
+    }
+
+    scored.push({
+      candidate,
+      primaryDistance,
+      secondaryDistance:
+        secondaryDistance.type === 0 ? 0 : secondaryDistance.distance,
+      secondaryOverlapRange:
+        secondaryDistance.type === 0 ? secondaryDistance.distance : 0,
+      centerDistance: getCenterDistance(current.rect, candidate.rect),
+    });
+  }
+
+  if (scored.length === 0) {
+    return null;
+  }
+
+  //选择逻辑
+  //选择primaryDistance最近的item，待选的item中与其在primary方向有重叠的认为是同一行的元素，获取同一行中占比最大的item
+  let baseItem = scored[0];
+  for (const item of scored) {
+    if (item.primaryDistance < baseItem.primaryDistance) {
+      baseItem = item;
+    }
+  }
+
+  const filteredScored = scored
+    .filter(
+      (item) =>
+        getPrimaryOverlay(
+          baseItem.candidate.rect,
+          item.candidate.rect,
+          direction
+        ) > 0
+    )
+    .sort((a, b) => {
+      if (a.secondaryOverlapRange != b.secondaryOverlapRange) {
+        return b.secondaryOverlapRange - a.secondaryOverlapRange;
+      }
+      if (Math.abs(a.secondaryDistance) != Math.abs(b.secondaryDistance)) {
+        return Math.abs(a.secondaryDistance) - Math.abs(b.secondaryDistance);
+      }
+      if (a.centerDistance != b.centerDistance) {
+        return a.centerDistance - b.centerDistance;
+      }
+      return 0;
+    });
+  return filteredScored[0]?.candidate ?? null;
+}
+
+function getPrimaryDistance(
+  current: Rect,
+  candidate: Rect,
+  direction: Symbol
+): number {
+  switch (direction) {
+    case EdgeDirection.left:
+      return current.left - candidate.right;
+    case EdgeDirection.right:
+      return candidate.left - current.right;
+    case EdgeDirection.top:
+      return current.top - candidate.bottom;
+    case EdgeDirection.bottom:
+      return candidate.top - current.bottom;
+    default:
+      return -1;
+  }
+}
+
+function getPrimaryOverlay(current: Rect, candidate: Rect, direction: Symbol) {
+  if (direction === EdgeDirection.left || direction === EdgeDirection.right) {
+    return Math.max(
+      0,
+      Math.min(current.right, candidate.right) -
+        Math.max(current.left, candidate.left)
+    );
+  }
+  return Math.max(
+    0,
+    Math.min(current.bottom, candidate.bottom) -
+      Math.max(current.top, candidate.top)
+  );
+}
+
+function getSecondaryDistance(
+  current: Rect,
+  candidate: Rect,
+  direction: Symbol
+) {
+  if (direction === EdgeDirection.left || direction === EdgeDirection.right) {
+    return getAxisDistance(
+      current.top,
+      current.bottom,
+      candidate.top,
+      candidate.bottom
+    );
+  }
+  return getAxisDistance(
+    current.left,
+    current.right,
+    candidate.left,
+    candidate.right
+  );
+}
+
+function getCenterDistance(current: Rect, candidate: Rect) {
+  return Math.hypot(
+    current.centerX - candidate.centerX,
+    current.centerY - candidate.centerY
+  );
+}
+
+function getAxisDistance(
+  startA: number,
+  endA: number,
+  startB: number,
+  endB: number
+) {
+  const overlapStart = Math.max(startA, startB);
+  const overlapEnd = Math.min(endA, endB);
+  if (overlapStart <= overlapEnd) {
+    return {
+      type: 0,
+      distance: overlapEnd - overlapStart,
+    };
+  }
+  if (endB < startA) {
+    return {
+      type: 1,
+      distance: startA - endB,
+    };
+  }
+  return {
+    type: 2,
+    distance: startB - endA,
+  };
+}

package/utils/JsViewEngineWidget/SpatialNavigator/SpatialNavigationNode.ts

@@ -0,0 +1,32 @@
+import type { Ref } from "vue";
+import type { Rect } from "./SpatialNavigationAlgorithm";
+export class SpatialNavigationNode {
+  private mRect: Rect | undefined;
+  constructor(
+    private getPosition: (token: number,div: unknown) => Rect | undefined,
+    public getMwInfo: () => {
+      mwChain: any[],
+      itemIndex: number,
+    },
+    private mOnFocus: () => void,
+    private mOnBlur: () => void,
+  ) {
+    this.mRect = undefined;
+  }
+
+  public onFocus() {
+    this.mOnFocus();
+  }
+
+  public onBlur() {
+    this.mOnBlur();
+  }
+
+  public updateRect(token: number,root: unknown) {
+    this.mRect = this.getPosition(token, root);
+  }
+
+  public getRect() {
+    return this.mRect;
+  }
+}

package/utils/JsViewEngineWidget/SpatialNavigator/SpatialNavigator.ts

@@ -0,0 +1,236 @@
+import { EdgeDirection } from "../WidgetCommon";
+import {
+  findNextCandidate,
+  Rect,
+  findNextLayerFirst,
+  SpatialNavigationCandidate,
+} from "./SpatialNavigationAlgorithm";
+import { SpatialNavigationNode } from "./SpatialNavigationNode";
+import type { Ref } from "vue";
+
+export const SPATIAL_NAV_PROVIDER_NAME = "__jsv_spatialNavProvider";
+
+type MoveType = "normal" | "layerFirst";
+export interface MoveOptions {
+  xMoveType?: MoveType;
+  yMoveType?: MoveType;
+  moveType?: MoveType;
+}
+export class SpatialNavigator {
+  private nodes = new Set<SpatialNavigationNode>();
+  private currentNode: SpatialNavigationNode | undefined = undefined;
+  private divRef: Ref<unknown> | undefined = undefined;
+  private mFocusHub: any;
+  private mFindNextToken: number = 0;
+  private mOnEdge: Function | undefined = undefined;
+  private mXDefaultMoveType: MoveType = "normal";
+  private mYDefaultMoveType: MoveType = "normal";
+
+  constructor(divRef: Ref<unknown>, focusHub: any, onEdge: Function) {
+    this.divRef = divRef;
+    this.mFocusHub = focusHub;
+    this.mOnEdge = onEdge;
+  }
+
+  public getDiv() {
+    return this.divRef?.value;
+  }
+
+  /**
+   * 
+   * @param moveType 默认移动方式：normal(默认)、layerFirst
+   */
+  public setDefaultMoveType(xMoveType: MoveType, yMoveType: MoveType) {
+    if (xMoveType !== "normal" && xMoveType !== "layerFirst") {
+      console.warn("SpatialNavigator: xMoveType is not valid");
+      return;
+    }
+    if (yMoveType !== "normal" && yMoveType !== "layerFirst") {
+      console.warn("SpatialNavigator: yMoveType is not valid");
+      return;
+    }
+    this.mXDefaultMoveType = xMoveType;
+    this.mYDefaultMoveType = yMoveType;
+  }
+
+  public setFocus(node: SpatialNavigationNode) {
+    if (!node) {
+      return;
+    }
+    if (this.currentNode === node) {
+      return;
+    }
+    this.currentNode?.onBlur();
+    this.currentNode = node;
+    this.currentNode.onFocus();
+  }
+
+  public registerNode(node: SpatialNavigationNode) {
+    if (!node) {
+      return;
+    }
+    this.nodes.add(node);
+    if (!this.currentNode) {
+      this.currentNode = node;
+      this.currentNode.onFocus();
+    }
+  }
+
+  public unregisterNode(node: SpatialNavigationNode) {
+    if (!node) {
+      return;
+    }
+    if (this.currentNode === node) {
+      this.currentNode.onBlur();
+      this.currentNode = undefined;
+    }
+    this.nodes.delete(node);
+  }
+
+  /**
+   * 
+   * @param direction 移动方向
+   * @param options 移动选项
+   * @param options.xMoveType x方向移动方式：normal(默认)、layerFirst
+   * @param options.yMoveType y方向移动方式：normal(默认)、layerFirst
+   * @param options.moveType 移动方式：normal(默认)、layerFirst
+   * @returns 
+   */
+  public moveTo(direction: Symbol, options?: MoveOptions) {
+    if (!this.divRef?.value) {
+      console.warn("SpatialNavigator: divRef is not set");
+      return;
+    }
+    let xMoveType = options?.moveType ?? options?.xMoveType ?? this.mXDefaultMoveType;
+    let yMoveType = options?.moveType ?? options?.yMoveType ?? this.mYDefaultMoveType;
+    let moveType =
+      direction == EdgeDirection.top || direction == EdgeDirection.bottom
+        ? yMoveType
+        : xMoveType;
+    const nextNode = this.findNode(direction, this.divRef?.value, moveType);
+    if (!nextNode || nextNode === this.currentNode) {
+      const rect = this.currentNode?.getRect();
+      let exportRect = null;
+      if (rect) {
+        exportRect = {
+          x: rect.left,
+          y: rect.top,
+          width: rect.right - rect.left,
+          height: rect.bottom - rect.top,
+        };
+      }
+      this.mOnEdge?.({
+        direction: direction,
+        rect: exportRect,
+      });
+      return;
+    }
+    let preNode = this.currentNode;
+    // this.currentNode?.onBlur();
+    this.currentNode = nextNode;
+    // this.currentNode.onFocus();
+    this.updateMetroWidgetFocus(preNode, this.currentNode);
+  }
+
+  private updateMetroWidgetFocus(
+    oldNode: SpatialNavigationNode | undefined,
+    newNode: SpatialNavigationNode
+  ) {
+    let newIndex = -1;
+    let oldIndex = -1;
+    const newMwChain = newNode.getMwInfo().mwChain;
+    const newItemIndex = newNode.getMwInfo().itemIndex;
+
+    if (!oldNode) {
+      newIndex = 0;
+      oldIndex = 0;
+    } else {
+      const oldMwChain = oldNode.getMwInfo().mwChain;
+      for (let i = newMwChain.length - 1; i >= 0; i--) {
+        const index = oldMwChain.findIndex(
+          (item) => item.id === newMwChain[i].id
+        );
+        if (index !== -1) {
+          newIndex = i;
+          oldIndex = index;
+          break;
+        }
+      }
+    }
+
+    const preFocusToken = this.mFocusHub.getFocusCallToken();
+    const headIndex = Math.max(0, newIndex);
+    for (let i = newMwChain.length - 1; i >= headIndex; i--) {
+      const item = newMwChain[i];
+      if (i == newMwChain.length - 1) {
+        item.handler.setFocusId(newItemIndex, false, false);
+      } else {
+        const childItem = newMwChain[i + 1];
+        const childIndex = childItem.getSelfChildIndex();
+        item.handler.setFocusId(childIndex, false, false);
+      }
+    }
+    const postFocusToken = this.mFocusHub.getFocusCallToken();
+    const currentFocusStack = this.mFocusHub.getCurrentFocusStack();
+    const targetFocusName = newMwChain[newMwChain.length - 1].handler.getName();
+    //检查setFocusId操作有没有设置焦点
+    /**
+     * 不直接setFocus的原由：
+     * 南传epg楼层中有自定义的focusable组件时，发现这里会在custom设置了焦点后又把焦点抢到楼层MetroWidget上
+     *
+     * 修改逻辑：
+     * focusToken不变，说明在custom没有更改焦点，可以直接设置
+     * focusToken改变，说明在custom更改了焦点，但要保证targetFocusName在焦点链中，所以不在焦点链时可以设置，否则就不设置以防抢焦点
+     */
+    if (preFocusToken === postFocusToken) {
+      this.mFocusHub.setFocus(targetFocusName);
+    } else {
+      if (
+        !currentFocusStack.some((item: any) => item.name === targetFocusName)
+      ) {
+        this.mFocusHub.setFocus(targetFocusName);
+      }
+    }
+  }
+
+  private findNode(
+    direction: Symbol,
+    root: unknown,
+    moveType?: "normal" | "layerFirst"
+  ) {
+    const currentNode = this.currentNode;
+    if (!currentNode) {
+      return null;
+    }
+    this.mFindNextToken++;
+    for (const node of this.nodes) {
+      node.updateRect(this.mFindNextToken, root);
+    }
+    const currentRect = currentNode.getRect();
+    if (!currentRect) {
+      return undefined;
+    }
+    const candidates = Array.from(this.nodes)
+      .filter((node) => node !== currentNode && node.getRect() !== undefined)
+      .map((node) => ({
+        data: node,
+        rect: node.getRect() as Rect,
+      }));
+    let targetNode: SpatialNavigationCandidate<SpatialNavigationNode> | null =
+      null;
+    if (moveType === "layerFirst") {
+      targetNode = findNextLayerFirst(
+        { data: currentNode, rect: currentRect },
+        candidates,
+        direction
+      );
+    } else {
+      targetNode = findNextCandidate(
+        { data: currentNode, rect: currentRect },
+        candidates,
+        direction
+      );
+    }
+    return targetNode?.data ?? null;
+  }
+}