JavaScript is required

Edit Element

Element Line Editing

Demonstrates line editing capabilities for interactive modification of line properties, shapes, and connections.

Element Line Editing

Functional Overview

This example demonstrates how to enable line editing capabilities, allowing users to modify line properties, shapes, and connections interactively.

Implementation of Key Features

Line Editing Configuration

Enable line editing through the editing controller:

<RGSlotOnView>
    <RGEditingLineController />
</RGSlotOnView>

Line Selection

Click to select lines for editing:

const onLineClick = (lineObject: RGLine, linkObject: RGLink) => {
    graphInstance.setEditingLine(lineObject);
};

Creative Use Cases

  • Process Design: Modify workflow connections dynamically
  • Circuit Design: Adjust electrical connections
  • Network Planning: Update network topologies
  • Data Flow: Modify pipeline connections
  • Mind Mapping: Rework idea relationships