Diagram - Selection

#Usage

import { Diagram } from '@primeui/vue-diagram';
import ClearSelection from './ClearSelection.vue';

<Diagram.Root :store="store" page-id="page">
    <ClearSelection />
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

Use session.select(ids, mode) for application selection. Selection and graph focus are session state; neither changes the saved model.

Create ClearSelection.vue and mount it under the root as above. The handler reads the current session when activated, including after a page or source change.

<script setup lang="ts">
import { useDiagramContext } from '@primeui/vue-diagram';

const { session } = useDiagramContext();

function run() {
    session.value.select([]);
}
</script>

<template>
    <button type="button" @click="run">Clear selection</button>
</template>

This skeleton assumes an initialized store with page page. Use First Diagram for model creation, style imports and store disposal.

Selection identifies the records a command should act on. Keyboard focus identifies the item reached by canvas navigation. They are separate session state; neither is saved in the model or creates an Undo entry.

#Select one or several items

Click a node or connector to select it. Shift, Command or Ctrl-click toggles that item in the existing selection. Drag from empty canvas space to draw a marquee. Use the selectors below to try the same selection modes programmatically.

The following action reads the current session in a child component rendered inside Diagram.Root. In setup, context refs require .value.

import { useDiagramContext } from '@primeui/vue-diagram';

const { session } = useDiagramContext();

session.value.select(['first']); // replace
session.value.select(['second', 'link'], 'add');
session.value.select(['second'], 'toggle');
session.value.select([]); // clear

replace is the default; it clears the previous set and adds valid supplied IDs. add retains existing members. toggle removes existing members and adds new ones. IDs must identify visible records on the current page. Visibility follows the scene's layer, container and notation rules; it does not require the item to be mounted in the viewport. Invalid or hidden IDs are omitted.

A plain click on an unselected item replaces the selection. Pressing an already selected node preserves the selected group so you can move it together. An unmodified click on empty canvas space clears selection. A mouse marquee selects nodes and connectors returned by the scene's rectangle query; it is an intersection query, not a requirement that each entire item be enclosed. With an additive modifier it extends the previous selection.

Moving, resizing and rotating transform node roots, not a selected connector's independent body. A selected ancestor absorbs its selected descendants for those operations. Selecting a connector remains useful for connection-specific commands.

#Navigate without selecting

Choose Focus next, then use the canvas keyboard. Watch focus change separately from the selected items. Select first card and Clear selection change the selection without replacing the focused item.

import { useDiagramContext } from '@primeui/vue-diagram';

const { session } = useDiagramContext();

session.value.focus('link');
session.value.navigate('next');
session.value.focus(null);

A child under the root reads the readonly interaction ref from useDiagramContext(), including selectedIds and focusedId. focus changes the session's focused record; navigate finds and reveals a navigation target without selecting it. When a toolbar hands control back to the canvas, call the public viewport's focus() as the example does. Focusing an application input keeps its native keyboard behavior.

These defaults apply when focus is in the canvas; native interactive descendants retain their input behavior. Custom shortcut configuration can change the editing shortcuts. Escape outside a gesture does not clear the selected set.

#Cancellation and limits

A pointer gesture previews its operation. Escape, pointer cancellation, lost capture or window blur cancels the unfinished gesture and restores its starting selection state. Selection itself is independent of model history. Read-only and editing constraints may prevent an edit while still allowing selection.

Blank-space mouse dragging starts a marquee after the drag threshold. Blank-space touch dragging pans the viewport; it is not the mouse marquee workflow. The examples are authored for mouse and keyboard. Touch, pen and assistive-technology behavior remain device-specific verification work.

For a live count, mount this child inside Diagram.Root:

<script setup lang="ts">
import { useDiagramContext } from '@primeui/vue-diagram';

const { interaction } = useDiagramContext();
</script>

<template>
    <output>{{ interaction.selectedIds.length }} selected</output>
</template>

Use interaction.value in setup. A store commit subscription does not report selection-only changes; use this context ref or a session subscription.

#Related Docs

• Permissions
• Drag and Drop
• Resize
• Rotate
• Keyboard and input