大家好，我是前端西瓜哥。
因为在做开源的 suika 图形编辑器，交互参考了 Figma，所以我总结了 Figma 的选中交互设计。
我正在开发的 suika 图形设计工具，欢迎 star。
点选
按下鼠标，此时有多种场景。
1、鼠标在控制点上，此时拖拽，控制点便会跟随鼠标位置移动，对选中图形进行属性上的更新。
2、鼠标在未选中图形上，按下时该图形设置为选中态，其他图形失去选中态。此时如果拖拽，选中图形会跟随移动。
3、鼠标在选中框（多个图形已被选中，会出现的包裹这些图形的矩形框）上，此时拖拽，选中图形会跟随移动。
如果还按住 Shift 键，图形保持相对原始位置的水平或垂直移动。
4、如果鼠标在选中框上按下，且在一个图形上，且 "没有拖拽"，释放鼠标后，该图形进入选中态，其他图形取消选中。
有点类似场景 2，但这里是 释放鼠标后才设置选中态。
没有鼠标按下时就立即处理，而是做一个延迟，是因为用户可能会进行拖拽行为，这时候就要走场景 3 的逻辑了。
框选
5、鼠标在空白区域按下，所有图形会退出选中态，并进入框选模式。此时拖拽，会绘制矩形选区，与选区相交的图形进入选中态。鼠标释放时结束。
连选 / 取消选中
鼠标在图形上，按下时 已按住了 Shift，会进入连续选中/取消选中的模式。此时会将一些新的图形增加到选择集合中，或将一些图形从选择集合中剔除。
6、按住 Shift，在图形上按下鼠标，如果图形不是选中态，立即进入选中态。此时如果拖拽，进入场景 3 逻辑，移动选中图形。
7、全程按住 Shift，在图形上按下鼠标。如果图形是选中态，不拖拽，然后释放鼠标，图形退出选中态。
这里没有鼠标按下时就退出选中态，而是鼠标释放的时机，同样是因为我们不知道用户是否会有拖拽行为。
前面场景 3 提到，Shift + 拖拽会执行水平或垂直移动图形的操作，所以这里要延后到释放鼠标时再判断是否发生了拖拽，没有才让图形退出选中态。
另外，如果在释放鼠标前，就释放了 Shift，就不进行任何操作。
8、按住 Shift，在空白区域按下鼠标，进行框选。框选中的图形，如果不在初始选中集，将其添加到选中集。如果在初始选中集，将其剔除。
Group 和 Frame
前面的逻辑还比较简单，下面引入编组的场景，这时候要考虑节点存在父子关系的情况。
这里有一个非常重要的规定：一个节点和它的祖先节点不能同时为选中态，它们中同时只能有一个选中态。
Figma 的父节点有两种类型。
一种是 group（编组），会将多个子节点紧密包裹为一个整体。比如图标由多个不同部分的形状组成，用 group 将它们放在一起就是不错的选择。
group 或其子节点 rezise 时，它们会自动调整属性让 group 依旧紧密包裹子节点。
另一种是 frame（画板），一般会有自己的宽高，不会紧密包裹子节点。frame 可以理解为一个和其他图形隔离的单独区域，比如一个 App 的某个页面。frame 还可以进行自动布局，让自己的宽度自适应子节点。
Group（编组）
group 本身不是没有渲染内容，这是将多个子节点整合为一个整体。
9、如果鼠标在 group 的子节点上按下，group 会进入选中态，子节点不会。
或者可以理解为 group 的点击区域为子节点的点击区域的叠加，然后子节点不能被选中。
10、如果在 group 的子节点上，双击鼠标，会选中 group 的直接子节点。如果继续连击，会不断进入子节点中，直到根节点。
Figma 中，双击表示希望对选中图形进行编辑，比如矢量网格双击就会进入钢笔编辑模式。对于 group，就是进入它的子节点，然后选中它。
此外 按下回车键也表示对选中图形进行编辑，对于 group 来说，就是取消它的选中态，然后让它的直接子节点进入选中态。
前面提到父子节点是不能同时选中的。所以我们什么时候应该选中父节点，什么时候选中子节点，是需要考量的点。父子节点关系存在的情况下，一个节点能否被选中，和当前已经选中的图形有关系。
11、如果一个节点已经是选中态，"该节点和它的所有父节点" 的兄弟节点，才可以被选中。
如果多个节点同时都是选中态，再找出它们所有的父节点，然后它们的兄弟节点才是可以被选中的。
下面示例图中，红色为选中节点，橙色为选中节点的父节点，蓝色的就是此时可以选中的节点了。
看看动图演示，hover 时有高亮轮廓的节点是可以被选中的。
Frame（画板）
frame 左上角的 title 部分是 frame 点击区域的一部分。但矩形区域不一定是。
12、frame 如果没有子节点，frame 矩形区域也属于点击区域。
这样做是方便要拖拽 frame 的位置。
13、frame 如果有子节点，frame 矩形区域则不属于点击区域。点选时，会穿透 frame 选中其直接子节点。
如果 frame 已经是选中态，依旧可以选中它的直接子节点。
设计师往 frame 添加内容后，就意味着 frame 中的世界开始进行构建了。设计师可以操作世界中的物品，但世界本身不应该被轻易误选中。
题外话，如果只有一个图形选中，且它在 frame 上，刻度尺会调整其原点位置，对齐到 frame 左上角，而不再是画布上的原点位置。
透选
14、按住 Ctrl / Command，可以进行透选（Deep Select）直接穿透 group，选中叶子节点。
选中复制
15、按住 Alt 拖拽图形，可以复制移动图形。
锁定和隐藏
16、锁定和隐藏的图形不能在画布上选中，但可以通过点击左侧图层面板的节点 item 来选中。
结尾
Figma 看起来简单的选择操作，里面门道可真的不少啊。
目前只总结了这些，希望对你开发自己的图形编辑器有帮助。
我是前端西瓜哥，关注我，学习更多图形编辑器知识。
相关阅读，