naviix/how-it-works.md

Spatial navigation. Arrow key navigation.

# 原理

计算元素某一方向上距离最近的元素，距离相等时，优先考虑平行的投影距离，偏移 45 度以内算作同一方向。

## 整体导航

以下面的矩形为例，关闭整体导航，则 1 的下方向是矩形 2，开启后，1 的下方向是矩形 3。

```
   +------------+
   |      1     |
   |            |
   +------------+
 +---+  +---+ +---+
 | 2 |  | 3 | | 4 |
 +---+  +---+ +---+
```

矩形 2 和矩形 1 是部分投影关系，在有部份投影关系的时候，程序会多向后找 1 个矩形，如果下一个矩形是完整投影，则结果为下一个矩形，否则为上一个部份投影矩形。

## 入参类型

simple:

```json
[
  [4, 3, 2, 1],
  { "id": "x", "loc": [1, 2, 3, 4] }
]
```

output:

```json
[{
  "locs": [{
    "id": [4, 3, 2, 1],
    "loc": [4, 3, 2, 1]
  }, {
    "id": "x",
    "loc": [1, 2, 3, 4]
  }]
}]
```

obj:

```json
{
  "locs": [[1, 2, 3, 4], [3, 2, 1, 4]],
  "subs": [{
    "locs": [[1, 2, 3, 4], { "id": "z", "loc": [3, 3, 3, 3] }],
    "wrap": {
      "id": "x",
      "loc": [4, 4, 4, 4]
    },
    "subs": {
        "locs": [[6, 6, 6, 6], [7 ,7 ,7 ,7]],
        "wrap": [9, 9, 9, 9]
    }
  }, {
    "locs": [[2, 2, 2, 2], [1, 1, 1, 1]],
    "wrap": {
      "id": "y",
      "loc": [2, 2, 2, 2]
    },
  }]
}
```

output:

```json
[{
  "locs": [{
    "id": [1, 2, 3, 4],
    "loc": [1, 2, 3, 4]
  }, {
    "id": [3, 2, 1, 4],
    "loc": [3, 2, 1, 4]
  }],
  "subs": [{
    "locs": [{
      "id": [1, 2, 3, 4],
      "loc": [1, 2, 3, 4]
    }, {
      "id": "z",
      "loc": [3, 3, 3, 3]
    }],
    "wrap": {
      "id": "x",
      "loc": [4, 4, 4, 4]
    },
    "subs": [{
      "locs": [
        {
          "id": [6, 6, 6, 6],
          "loc": [6, 6, 6, 6]
        }, {
          "id": [7, 7, 7, 7],
          "loc": [7, 7, 7, 7]
        }
      ],
      "wrap": {
        "loc": [9, 9, 9, 9],
        "id": [9, 9, 9, 9]
      }
    }]
  }, {
    "locs": [{
      "id": [2, 2, 2, 2],
      "loc": [2, 2, 2, 2]
    }, {
      "id": [1, 1, 1, 1],
      "loc": [1, 1, 1, 1]
    }],
    "wrap": {
      "id": "y",
      "loc": [2, 2, 2, 2]
    }
  }]
}]
```

array:

```json
[{
  "locs": [],
  "wrap": {
    "id": "x",
    "loc": []
  }
}, {
  "locs": [],
  "wrap": {
    "id": "y",
    "loc": []
  }
}]
```