Selection

Selection lives on the Shape via its selection property, following the same model as CxJS widgets such as Grid, List and Marker. Provide a record binding so the selection can identify each shape; a KeySelection keyed by id is the usual choice. Shapes that bind to the same selection path share a single selection.

Click a shape to select it.
Ctrl+Click to toggle a shape in and out of the selection.
Shift+Click to extend the selection (when multiple is set).

The selected keys are written to the store at the bound path (selection in this example).

interface Model {
    selection: string[];
    $shape: { id: string; text: string; shape: "rectangle" | "circle" | "rhombus" };
}

const m = createModel<Model>();

<Diagram center showGrid>
    <Flow direction="right" gap={2}>
        <Repeater records={shapes} recordAlias={m.$shape}>
            <Cell width={3} height={2}>
                <Shape
                    id={m.$shape.id}
                    text={m.$shape.text}
                    shape={m.$shape.shape}
                    stroke="gray"
                    fill="white"
                    selection={{
                        type: KeySelection,
                        bind: m.selection,
                        keyField: "id",
                        multiple: true,
                        record: m.$shape,
                    }}
                />
            </Cell>
        </Repeater>
    </Flow>
</Diagram>

Selected: