Interactive Node Resizing with Drag Handles

Functional Overview

This example demonstrates how to enable interactive node resizing through drag handles. When a node is selected, resize handles appear at the corners and edges, allowing users to drag to adjust the node’s dimensions. The demo showcases different resize controller styles and demonstrates how resizing integrates with other editing features.

Implementation of Key Features

Resize Controller Component

The RGEditingResize component provides resize functionality:

<RGSlotOnView>
    <RGEditingNodeController>
        <RGEditingResize />
    </RGEditingNodeController>
</RGSlotOnView>

The resize controller appears automatically when nodes are set as editing nodes.

Activating Resize Mode

Resize mode is activated by setting nodes as editing nodes:

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    console.log('onNodeClick:', nodeObject);
    graphInstance.setEditingNodes([nodeObject]);
};

Clicking a node activates the resize handles. Clicking on the canvas clears the selection.

Customizable Resize Controller Styles

The demo allows switching between different visual styles:

<SimpleUISelect
    data={[
        {value: '', text: 'Default'},
        {value: 'my-graph-style-01', text: 'Customize Style 1'},
        {value: 'my-graph-style-02', text: 'Customize Style 2'},
    ]}
    currentValue={myGraphStyle}
    onChange={setMyGraphStyle}
/>

Different CSS classes on the parent container style the resize handles differently, allowing for visual customization.

Canvas Click Handler

Clicking outside nodes clears the editing state:

const onCanvasClick = () => {
    graphInstance.setEditingNodes([]);
};

This provides intuitive interaction where clicking empty space deselects nodes.

Drag Event Action Configuration

The graph is configured for drag mode:

const graphOptions: RGOptions = {
    dragEventAction: 'move'
};

This ensures that dragging nodes moves them rather than triggering other actions.

Creative Use Cases

UI Mockup and Wireframe Tools

Build wireframing tools where designers can create and resize interface elements. The ability to precisely control component sizes helps create accurate mockups.

Card and Dashboard Layout Designers

Create tools for designing card-based layouts or dashboard configurations. Resizing helps designers find the right proportions for different content areas.

Organization Chart Tools

Use for org charts where positions in different hierarchical levels may need different sizes. Resizing allows visual emphasis of more important positions.

Mind Mapping with Variable Node Sizes

Create mind maps where node size indicates importance or amount of content. Users can resize nodes to reflect their significance or to accommodate more text.

Presentation and Poster Design

Build tools for creating visual presentations where elements need to be sized appropriately. The resize handles help achieve balanced compositions.

Form and Survey Builders

Implement form builders where question boxes, input fields, and other elements need to be sized to fit their content. Resizing provides flexibility for different form layouts.

Infographic and Chart Creation

Create infographic tools where charts, text boxes, and graphical elements need to be sized relative to each other. Resizing helps achieve visual balance and hierarchy.

Database Schema and ER Diagram Tools

Use in database design tools where table sizes should reflect the number of fields or complexity. Resizing allows the schema to communicate structural information visually.