Diagram - Resize

#Usage

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

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

Select a resizable node before running the command. Pointer handles and numeric actions use the same editing policy.

Create WidenSelection.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 { shallowRef } from 'vue';
import { useDiagramContext } from '@primeui/vue-diagram';

const { session } = useDiagramContext();
const feedback = shallowRef('');

function run() {
    const result = session.value.edit({ kind: 'resize', scaleX: 1.2, scaleY: 1, anchor: 'nw' });
    feedback.value = result.status;
}
</script>

<template>
    <button type="button" @click="run">Widen selection</button>
    <output aria-live="polite">{{ feedback }}</output>
</template>

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

Select a node and drag a corner handle to resize it. The editor previews the size while dragging and commits one change on release. Numeric dimensions provide an alternative to dragging; both paths use the same editing policies and Undo.

#Basic resize

Click Resize me, then drag a corner. To use a numeric size, enter positive width and height in world units and choose Apply size. The numeric command selects the example's resizable node and keeps its northwest corner fixed. Choose Undo to restore its previous geometry.

A numeric size is converted to scale factors from the current authored bounds:

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();

const result = session.value.edit({
    kind: 'resize',
    scaleX: width / node.bounds.width,
    scaleY: height / node.bounds.height,
    anchor: 'nw'
});

Check result.status and result.diagnostics. A policy rejection does not commit a smaller substitute size. Use session.value.availability(command) if your control needs a disabled state and reason before execution.

#Minimum, maximum and aspect ratio

Use editingOptions.constraints, keyed by node ID, to restrict a node. This example allows width 120–300 and height 60–180, and preserves its initial 1.8:1 aspect ratio. Enter width 310 to try an out-of-range resize: the model stays at its last accepted size and feedback explains the rejection.

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

const editingOptions: DiagramEditingOptions = {
    constraints: new Map([
        [
            'resizable',
            {
                minWidth: 120,
                minHeight: 60,
                maxWidth: 300,
                maxHeight: 180,
                aspectRatio: true
            }
        ]
    ])
};

Limits are checked after aspect preservation. They reject, rather than clamp, out-of-range geometry. Constraint values must be positive and finite. A per-node resize: false, a lock or whole-editor readOnly can also make the operation unavailable. These are editing policies; host transactions remain application-owned.

#Rotated nodes and connected edges

The next node begins at 25 degrees. Drag a corner or apply numeric dimensions, then Undo. Watch its rotated border, clipped content and outgoing connector. The rotation stays unchanged; its dynamic port and attached edge follow the new geometry. No separate rotation command is needed for this example.

Resize axes are local to the rotated node. The corner opposite a dragged handle stays fixed in world space. Numeric resizing here uses the northwest anchor; other anchors include n, ne, e, se, s, sw, w and center. A parent resize does not automatically scale children. Intrinsic measured nodes and layout-owned lanes can reject ordinary resize; use their owning APIs.

#Defaults and cancellation

For keyboard input, select the node, Tab to a resize handle and press Enter or Space: the built-in handle grows both axes by 10% around the opposite corner. Use the numeric controls for an exact size or a smaller size. Undo is available through the command row and the default Command/Ctrl+Z shortcut when focus is in the canvas. Native numeric inputs retain their own keyboard behavior.

The examples cover mouse and keyboard paths. Touch, pen and assistive-technology behavior need device-specific verification; the runtime accepts pointer input.

#Related Docs

• First Diagram
• Architecture
• Create connections
• Events and commands