课程 26 - 选择工具

在课程 14 - 选择模式中我们仅实现了简单的点击图形单独选中的功能。本节课我们会继续完善这个选择工具，增加多选、框选和套索功能。

多选

在点击单独选择的基础上，通过按住 Shift 可以在当前选择的基础上，新增/删除另外的图形。

Hold Shift to select multiple layers in Figma

在选择模式中，我们根据 input.shiftKey 即 Shift 的按下状态，决定是否需要保留当前的选择：如果未按下则切换单选；如果按下则将目标图形加入已有的选择中：

ts

if (selection.mode === SelectionMode.SELECT) {
    if (layersSelected.length > 1 && layersSelected.includes(selected.id)) {
        // deselect if already selected in a group
        api.deselectNodes([selected]);
    } else {
        api.selectNodes([selected], input.shiftKey); // whether to add to existed selection
    }
}

在课程 21 - Transformer 中我们实现了单个图形，接下来需要为多个选中的图形增加一个 Group 展示。和单选的 Transformer 不同，多选形成的 Group 不需要考虑 rotation 和 scale。

ts

export class RenderTransformer extends System {
    getOBB(camera: Entity): OBB {
        const { selecteds } = camera.read(Transformable);

        // Single selected, keep the original OBB include rotation & scale.
        if (selecteds.length === 1 && selecteds[0].has(ComputedBounds)) {
            const { obb } = selecteds[0].read(ComputedBounds);
            return obb;
        }

        if (selecteds.length > 1) {
        }
    }
}

效果如下，Resize 时对选中的所有图形进行变换的逻辑已经在课程 21 - 变换图形中介绍过，这里不再赘述：

框选

套索工具