当前期刊数: 265

磁贴布局三部曲:功能分析、实现分析、性能优化的第一部 - 功能分析。

因为需要做自由布局与磁贴布局混排,以及磁贴布局嵌套,所以要实现一套磁贴分析功能,所以本系列不是简单的介绍使用 react-grid-layout 这个库就行了,而是深入分析磁贴布局的特性,以及重头实现一遍。

对磁贴布局不熟悉的话,react-grid-layout 也是个很好的 Demo 体验页,大家可以先体验一下再阅读文章。

精读

简单碰撞

磁贴布局最重要的就是碰撞了,用过 Demo 就会发现,磁贴左右不会碰撞,只有上下会产生碰撞,这是因为网页天然是从上而下阅读的,因此垂直碰撞比水平碰撞更自然。

那么垂直的碰撞方向是什么样的呢?实际上只有自上而下的碰撞,没有自下而上的碰撞

为了讲清楚这个原理,先看下面的例子:

1
2
3
[-----]   [-----]
| A | → | B |
[-----] [-----]

如上所示,将方块 A 移动到方块 B 的位置,如果此时 A 的 Y 轴位置小于等于 B,则会将 B 挤下去。结果如下所示:

1
2
3
4
5
6
[-----]
| A |
[-----]
[-----]
| B |
[-----]

如果 A 的 Y 轴位置比 B 大,则碰撞结果是 A 跑到了 B 的下面:

1
2
3
4
          [-----]
[-----] | B |
| A | → [-----]
[-----]

结果如下所示:

1
2
3
4
5
6
[-----]
| B |
[-----]
[-----]
| A |
[-----]

如果 A 挤到 B 和 C 中间会如何呢?见下图:

1
2
3
4
5
6
          [-----]
[-----] | B |
| A | → [-----]
[-----] [-----]
[ C ]
[-----]

很容易想到,A 会落到 B 与 C 的中间位置。那问题来了,实现的时候,当时 A 放到 B 的下方,还是认为 A 放到 C 的上方?

乍一看会觉得,这不一样吗?对这个例子来说是的,但对其他例子就不同了。实际上应该始终认为是 A 放到了 B 的下方。原因的话,我们举一个反例就行,假设认为 A 放到了 C 的上方,那么看下面的例子:

1
2
3
4
5
6
7
          [-----]
[-----] | B |
| A | → [-----]
[-----] [ X ]
[-----]
[ C ]
[-----]

如上图所示,B 和 C 中间夹了一个狭长的 X,此时 A 拖入 B 和 C 的中间,并未与 X 产生碰撞,那结果一定是 A 落在了 B 的下方。如果落在 C 的上方,A 就悬空了。

所以磁贴布局模式下,组件始终只能落在另一个组件下面,除了 Y 轴为 0 的情况下,可以定到组件上方。

连续碰撞

连续碰撞是指当磁贴布局产生碰撞而导致位置变化后,需要重新调整整体位置,或者继续与其他组件位置产生碰撞的情况,首先看下面这个简单例子:

1
2
3
4
5
6
7
8
9
10
[-----]
| A |
[-----]

[-----]
| B |
[-----]
[-----]
| C |
[-----]

如果把 A 拖动到 B 位置,遵循简单碰撞原理,必须 Y 轴高于 B 的 Y 轴才会置于 B 下方,此时会把 C 顶上去。但仅做到这一步,A 原来的位置会产生空缺,需要重新吸附到顶部,这就是连续碰撞:

1
2
3
4
5
6
7
8
9
10
11
12
[     ]                    [-----]
|Empty| | B |
[ ] [-----]
[-----] [-----]
| B | [ A ]
[-----] → Remove Empty [-----]
[-----] [-----]
| A | [ C ]
[-----] [-----]
[-----]
| C |
[-----]

这时候你可能会想,结果不就是 B 和 A 交换了位置嘛,实际上用 react-grid-layout 看起来效果也是如此,那么代码实现时是不是不用这么麻烦?直接判断 A 与 B 是否产生位置交换,如果交换了,按照交换的方式处理不就行了吗?

听上去很美好,因为按照 A 与 B 交换的思路处理效果一致,而且性能更优,因为不用重新计算 C 组件被挤走,然后 A、B、C 再重新挤上去。但实际上交换方案是不可行的,我们看下面的例子:

1
2
3
4
5
6
7
8
9
10
        [-----]
| A |
[-----]

[-------------]
| B |
[-------------]
[-----]
| C |
[-----]

如果把 A 和 B 位置交换,会发现 C 悬空了。之所以上面的例子可以用交换思路,是因为 A 与 B 交换后,A 还可以 “挡住” C 的上移。但这个例子因为 B 很长,但 A 很短,A、B 交换后,A 就挡不住 C 的上移了:

1
2
3
4
5
6
[-------------]
| B |
[-------------]
[-----] [-----]
| C | | A |
[-----] [-----]

所以为了保证任何时候位移都不会产生 BUG,需要老老实实的分两步来判断:1. 判断 A 移到 B 的底部。2. 新的 A 把下面组件挤走,同时如果上面还有空位置,需要整体向上位移。

看起来还是比较消耗性能的,但通过一些优化手段是可以极大减少计算量的,我们到系列的 “性能优化” 部分再说。

碰撞边界 case

我们再考虑两个极端情况,第一种是要碰撞的组件过于矮的时候,第二种是要碰撞的组件过高的时候。

首先是过矮的情况,我们看下面 5 种情况:

1
2
3
4
5
6
7
8
9
10
[-----]
| | ← [ A ]
| B |
| |
[-----]
[-----]
| |
| C |
| |
[-----]

上面的情况插入到 B 的上方(假设 B 上方没有元素了,如果有的话,假设 B 上方为 X,那么应该认为 A 插入到 X 的底部)。

1
2
3
4
5
6
7
8
9
10
[-----]
| |
| B |
| | ← [ A ]
[-----]
[-----]
| |
| C |
| |
[-----]

上面的情况插入到 B 的下方。

1
2
3
4
5
6
7
8
9
10
[-----]
| |
| B |
| |
[-----]
[-----]
| | ← [ A ]
| C |
| |
[-----]

上面的情况插入到 B 的下方。

1
2
3
4
5
6
7
8
9
10
[-----]
| |
| B |
| |
[-----]
[-----]
| |
| C |
| | ← [ A ]
[-----]

上面的情况插入到 C 的下方。

1
2
3
4
5
6
7
8
9
10
[-----]
| |
| B |
| | [---]
[-----] ← [ A ]
[-----] [---]
| |
| C |
| |
[-----]

上面的情况和简单碰撞里提到的例子一样,碰撞位置在 B 与 C 之间,还是会认为插入到 B 的下方。

总结一下,过矮的情况下很多时候拖动组件只会与一个组件产生碰撞,当拖拽中心点在碰撞组件中心点上方时,插入到碰撞组件上方的组件下面(如果上方没有组件则插入到顶部)。当然插入到上方组件下面也不是真的找到上方组件是什么,具体如何做我们等到【实现分析】篇再讲。反之,如果中心点相对在下方,就插入到碰撞组件的下方。如果同时碰撞了多个组件,则忽略中心点偏移量靠上的碰撞,仅考虑中心点偏移量靠下的碰撞。

关于中心点上方其实也可以进一步优化,比如当目标碰撞组件太长的时候,可能比较难移到下方,此时在还没有拖拽到中心点下方时就要做下方碰撞判定了,此时判断依据可以优化为:碰撞时,拖拽组件的 Y 只要比目标组件的 Y 大(或者再加一个常数阈值,该阈值由拖拽组件高度决定,比如是高度的 1/3),那么就认为拖入到目标组件底部,比如:

1
2
3
4
5
6
7
[-----]
| | [---]
| | ← [ A ]
| B | [---]
| |
| |
[-----]

如上图所示,虽然 A 的中心点在 B 中心点上方,但因为 A.y - B.y > A.height / 3,所以判定插入到 B 的下方。当然这也会导致拖入超高组件上方很困难,所以要不要这么设定看用户喜好。

再看组件过高的情况:

1
2
3
4
5
6
7
          [---]
[-----] [ ]
| B | ← [ A ]
[-----] [ ]
[-----] [---]
| C |
[-----]

上面的情况插入 B 的上方(如果 B 上面还有组件 X,则判定为插入该 X 下方)。

1
2
3
4
5
6
[-----]   [---]
| B | [ ]
[-----] ← [ A ]
[-----] [ ]
| C | [---]
[-----]

上面的情况插入 B 的下方。

1
2
3
4
5
6
7
8
[-----]
| B |
[-----]
[-----] [---]
| C | [ ]
[-----] ← [ A ]
[ ]
[---]

上面的情况插入 C 的下方。

总结一下,当拖拽组件过高时,还是维持中心点判断规则,但更可能同时碰撞到多个组件,此时沿用 “中心点偏移量靠上的碰撞” 的原则就行了。但这里有一个较大的区别,拖拽组件矮的时候最多同时和两个组件碰撞,但拖拽组件高的时候,可能同时和 N 个组件碰撞,如下图所示:

1
2
3
4
5
6
7
8
9
10
11
12
[-----]   [---]
| B | [ ]
[-----] [ ]
[-----] [ ]
| C | [ ]
[-----] ← [ A ]
[-----] [ ]
| D | [ ]
[-----] [ ]
[-----] [ ]
| E | [---]
[-----]

此时就要看和哪个组件碰撞的优先级最高了。我们单从 B、C、D、E 的角度看,A 分别应该放在 B 下方、C 下方、D 上方、E 上方,其中 B 下方与 C 上方是同一个位置,但与 D 上方、E 上方都不是同一个位置,此时就要看拖拽到哪个位置产生的位移最小了,因为最小的位移是最不突兀的,最符合用户的预期。

另一个边界情况就是拖拽组件过高时,如果中心点还未移动到下方,但高度却超出了下面组件下方,也要视为拖拽到下方:

1
2
3
4
5
6
7
8
9
10
11
12
13
[-----]
| |
| |
| |
| A |
| |
| |
| |
[-----]

[-----]
| B |
[-----]

如上图所示,A 非常高,B 很矮,当 A 往下移动时,可能 A 的底部都超出 B 底部了(可以优化为 B 的中间),但 A 的中心点仍然在 B 中心点上方,此时在用户已经认为可以交换位置了,所以判断是否移动到下方多了一个优先判断条件:拖拽组件底部超出目标组件底部。同理拖拽到上方也类似。

要注意的是,这个例子与下面的例子表现并不一致,下面的例子 A 向左移时,应该放置 B 的上方,而上面的例子却放置 B 的下方:

1
2
3
4
5
6
7
8
9
          [-----]
| |
| |
| |
← | A |
[-----] | |
| B | | |
[-----] | |
[-----]

发现了吗?单从垂直位置来看,都是 A 的底部超过了 B 底部,但有时候和 B 互换,有时候却不互换。区分方法就是该碰撞发生时,这两个区块是否已经发生过碰撞。如果未发生过碰撞则严格根据中心点偏移量判断,偏移量靠上则放在上方,反之下方;已经处于碰撞状态则根据顶部或底部判断,顶部超出目标中心点则放上方,底部超出目标中心点则放下方。

碰撞边界与静态区块

如果没有静态组件,碰撞边界就只有容器顶部。加上静态组件后,产生位移时要判断加上一段位移是否会把静态组件挤走,如果会挤走,则该拖拽位置无效。

固定步长

磁贴布局为了方便对齐,往往会把父容器切割为 12 或者 6 等分,此时拖拽位置就不会完全跟手,当拖拽没有超过临界点的时候,实际拖拽位置不会跟随移动。

总结

磁贴布局的功能主要聚焦在组件间碰撞逻辑上,目标是让用户能够自然的布局,所以组件间碰撞逻辑也要尽可能自然,符合直觉。

讨论地址是:精读《磁贴布局 - 功能分析》· Issue ##458 · dt-fe/weekly

如果你想参与讨论,请 点击这里,每周都有新的主题,周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权声明:自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证


本站由 钟意 使用 Stellar 1.28.1 主题创建。
又拍云 提供CDN加速/云存储服务
vercel 提供托管服务
湘ICP备2023019799号-1
总访问 次 | 本页访问