Interactive Editing

This document describes the interactive editing system that enables users to modify nodes and lines in the graph through direct manipulation. The editing system provides visual controllers for resizing nodes, repositioning elements, adjusting line paths, and editing text labels.

For information about user interaction events (clicking, dragging, expanding/collapsing), see User Interaction & Events. For layout and positioning algorithms, see Layout System.

---

Editing System Architecture

The editing system is implemented in RelationGraphWith91Editing and consists of four specialized controllers that manage different aspects of interactive editing:

1. editingController: Node selection, multi-node bounding box, and resize operations
2. editingLineController: Line vertex manipulation, control points, and text editing
3. nodeConnectController: Connection target highlighting during line creation
4. editingReferenceLine: Alignment guides with optional snapping during node drag

Diagram: Editing System Components and Data Flow

graph TB
    subgraph "Core Implementation"
        With91Editing["RelationGraphWith91Editing
packages/.../RelationGraphWith91Editing.ts"]
        With7Event["RelationGraphWith7Event
packages/.../RelationGraphWith7Event.ts"]
    end
    
    subgraph "Four Editing Controllers"
        editingController["options.editingController
nodes: RGNode[]
show, x, y, width, height"]
        editingLineController["options.editingLineController
line: RGLine | null
startPoint, endPoint
ctrlPoint1, ctrlPoint2
line44Splits: RGCtrlPointForLine44[]
line49Points: RGPosition[]
text: {x, y, width, height}"]
        nodeConnectController["options.nodeConnectController
node: RGLineTarget
show, x, y, width, height"]
        editingReferenceLine["options.editingReferenceLine
show, directionV, directionH
v_x, v_y, v_height
h_x, h_y, h_width"]
    end
    
    subgraph "Public API Methods"
        setEditingNodes["setEditingNodes(nodes)"]
        addEditingNode["addEditingNode(node)"]
        setEditingLine["setEditingLine(line)"]
        onResizeStart["onResizeStart(type, e)"]
        startMoveLineVertex["startMoveLineVertex(type, e, cb)"]
        startMoveLine6CtrlPoint["startMoveLine6CtrlPoint(idx, e, cb)"]
        startMoveLine44CtrlPoint["startMoveLine44CtrlPoint(split, e, cb)"]
    end
    
    subgraph "Internal Update Methods"
        updateEditingControllerView["_updateEditingControllerView()"]
        updateEditingLineView["_updateEditingLineView()"]
        updateEditingConnectControllerView["_updateEditingConnectControllerView()"]
        updateReferenceLineView["updateReferenceLineView(node, x, y, buff_x, buff_y)"]
    end
    
    With91Editing --> editingController
    With91Editing --> editingLineController
    With91Editing --> nodeConnectController
    With91Editing --> editingReferenceLine
    
    setEditingNodes --> updateEditingControllerView
    addEditingNode --> updateEditingControllerView
    setEditingLine --> updateEditingLineView
    onResizeStart --> updateEditingControllerView
    
    With7Event --> With91Editing
    With7Event -.provides.-> startMoveLineVertex
    With7Event -.provides.-> startMoveLine6CtrlPoint
    
    editingController -.read by.-> updateEditingControllerView
    editingLineController -.read by.-> updateEditingLineView
    nodeConnectController -.read by.-> updateEditingConnectControllerView
    editingReferenceLine -.read by.-> updateReferenceLineView

Sources: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:1-1087, packages/relation-graph-models/models/RelationGraphWith7Event.ts:36-1056

---

Node Selection and Editing

Selection State

The editing system maintains a collection of currently selected nodes in options.editingController.nodes. Nodes can be added or removed from the editing set programmatically or through user interaction.

graph LR
    subgraph "Selection API"
        setEditingNodes["setEditingNodes(nodes)
RelationGraphWith91Editing:36"]
        addEditingNode["addEditingNode(node)
RelationGraphWith91Editing:52"]
        removeEditingNode["removeEditingNode(node)
RelationGraphWith91Editing:66"]
        toggleEditingNode["toggleEditingNode(node)
RelationGraphWith91Editing:76"]
    end
    
    subgraph "Internal State"
        editingController["editingController
nodes: RGNode[]
show: boolean
x, y, width, height"]
    end
    
    subgraph "View Update"
        updateView["_updateEditingControllerView()
RelationGraphWith91Editing:98
Calculate bounding box
Position overlay"]
    end
    
    setEditingNodes --> editingController
    addEditingNode --> editingController
    removeEditingNode --> editingController
    toggleEditingNode --> editingController
    
    editingController --> updateView

The controller’s position and size are automatically calculated from the bounding box of all selected nodes, with an optional padding applied when multiple nodes are selected.

Sources: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:36-92, packages/relation-graph-models/models/RelationGraphWith91Editing.ts:98-133

---

Node Resizing

When nodes are selected, resize handles appear at eight positions around the editing controller defined by RGResizeHandlePosition type. Users drag these handles to resize selected nodes proportionally.

Handle Position	Adjusts	Implementation Logic
't'	Y position, height	newY = startEventXy + buff_y newHeight = startHeight * scale - buff_y
'r'	Width only	newWidth = startWidth * scale + buff_x
'b'	Height only	newHeight = startHeight * scale + buff_y
'l'	X position, width	newX = startEventXy + buff_x newWidth = startWidth * scale - buff_x
'tl'	X, Y, width, height	Combines top and left logic
'tr'	Y, width, height	Combines top and right logic
'bl'	X, width, height	Combines bottom and left logic
'br'	Width, height	Combines bottom and right logic

Diagram: Resize Operation Flow

graph TB
    subgraph "Resize Method Calls"
        onResizeStart["onResizeStart(type: RGResizeHandlePosition, e)
Line 150"]
        setupListeners["Setup mousemove/mouseup listeners
_onResizing, _onResizeEnd"]
        startRAF["Start requestAnimationFrame loop
_resizeDraggingTimer"]
        onResizingRequest["onResizingRequest()
Line 204
Called each frame"]
        applyResizeScale["_applyResizeScale(e)
Line 272
Calculate scale_x, scale_y
Update all selected nodes"]
        emitBeforeResize["Emit RGEventNames.beforeNodeResize
Per node, can cancel"]
        updateNodes["dataProvider.updateNode(id, {x, y, width, height})"]
        onResizeEnd["onResizeEnd(e)
Line 327
Cancel RAF, cleanup listeners"]
    end
    
    subgraph "State Variables"
        startPoint["_startPoint: {x, y}"]
        startSize["_startSize: {x, y, width, height,
widthOnCanvas, heightOnCanvas}"]
        nodeStartSizeMap["_nodeStartSizeMap
WeakMap<RGNode, size>"]
        resizeType["_resizeType: RGResizeHandlePosition"]
        resizeDraggingEvent["_resizeDraggingEvent: RGUserEvent"]
    end
    
    onResizeStart --> startPoint
    onResizeStart --> startSize
    onResizeStart --> nodeStartSizeMap
    onResizeStart --> resizeType
    onResizeStart --> setupListeners
    onResizeStart --> startRAF
    
    setupListeners --> resizeDraggingEvent
    startRAF --> onResizingRequest
    onResizingRequest --> applyResizeScale
    applyResizeScale --> emitBeforeResize
    emitBeforeResize --> updateNodes
    onResizingRequest --> onResizingRequest
    setupListeners --> onResizeEnd

The resize system uses requestAnimationFrame for smooth rendering and stores initial node dimensions in _nodeStartSizeMap (WeakMap). Scale factors are computed independently for X and Y axes based on the resize handle type. The RGEventNames.beforeNodeResize event allows custom logic to modify or cancel individual node resizing.

Sources: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:150-340

---

Node Dragging with Reference Lines

The dragging system provides visual alignment guides through editingReferenceLine state. When options.showReferenceLine is enabled, the system displays vertical and horizontal lines when the dragged node aligns with nearby nodes.

Diagram: Reference Line Calculation Flow

graph TB
    subgraph "Drag Event Flow"
        onNodeDragStart["onNodeDragStart(willMoveNode, e)
RelationGraphWith7Event:80"]
        draggingCallback["draggingCallback()
Called each RAF tick"]
        draggingSelectedNodes["draggingSelectedNodes(node, newX, newY, buff_x, buff_y)
RelationGraphWith91Editing:347"]
        updateReferenceLineView["updateReferenceLineView(node, x, y, buff_x, buff_y)
RelationGraphWith91Editing:429
Returns: {showV, fixedX, showH, fixedY} | undefined"]
    end
    
    subgraph "Alignment Detection"
        filterNearNodes["Filter nodes within 600px
Exclude dragging nodes
Sort by distance to draggedNode"]
        checkAlignments["For each nearNode:
Check 6 alignments:
- XStart, XCenter, XEnd
- YStart, YCenter, YEnd
matchDistance: 5px"]
        setLineState["Update options.editingReferenceLine:
directionV, directionH
v_x, v_y, v_height
h_x, h_y, h_width"]
        applySnap["If options.referenceLineAdsorption:
Return fixedX, fixedY
to snap position"]
    end
    
    onNodeDragStart --> draggingCallback
    draggingCallback --> draggingSelectedNodes
    draggingSelectedNodes --> updateReferenceLineView
    
    updateReferenceLineView --> filterNearNodes
    filterNearNodes --> checkAlignments
    checkAlignments --> setLineState
    checkAlignments --> applySnap
    applySnap --> draggingSelectedNodes

Alignment Detection Logic:

Alignment Type	Comparison	Reference Line Position
XStart	abs(draggedNode.x - node.x) < 5	Vertical line at node.x
XCenter	abs(draggedNode.centerX - node.centerX) < 5	Vertical line at node.centerX
XEnd	abs(draggedNode.endX - node.endX) < 5	Vertical line at node.endX
YStart	abs(draggedNode.y - node.y) < 5	Horizontal line at node.y
YCenter	abs(draggedNode.centerY - node.centerY) < 5	Horizontal line at node.centerY
YEnd	abs(draggedNode.endY - node.endY) < 5	Horizontal line at node.endY

The system uses getNodeDistance() from RGGraphMath to sort candidate nodes by proximity. When options.referenceLineAdsorption is true, the returned fixedX and fixedY values override the dragged position to snap nodes to alignment.

Sources: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:347-588, packages/relation-graph-models/models/RelationGraphWith7Event.ts:80-234, packages/relation-graph-models/utils/RGGraphMath.ts

---

Line Editing Components

Line Editing Controller Overview

The RGEditingLineController component provides interactive controls for modifying line properties. It displays draggable handles at line vertices, control points for curves, split points for orthogonal lines, and an editable text label.

graph TB
    subgraph "Line Editing State"
        EditingLine["editingLineController.line
RGLine object being edited"]
        StartEnd["startPoint: x, y
endPoint: x, y"]
        CtrlPoints["ctrlPoint1: x, y
ctrlPoint2: x, y
For lineShape 6"]
        Splits["line44Splits[]
RGCtrlPointForLine44[]
For lineShape 44, 49"]
        TextPos["text: x, y
Text label position"]
    end
    
    subgraph "Visual Elements"
        StartDot["Start Vertex Handle
class: rg-line-ctrl-dot start-dot"]
        EndDot["End Vertex Handle
class: rg-line-ctrl-dot end-dot"]
        CtrlDot["Control Point Handles
class: rg-line-ctrl-dot ctrl-dot"]
        SplitDot["Split Point Handles
class: rg-line-ctrl-dot ctrl-split"]
        TextEditor["Text Editor
class: rg-line-ctrl-text
Double-click to edit"]
        CtrlLines["SVG Guide Lines
Connect vertices to control points"]
    end
    
    EditingLine --> StartEnd
    EditingLine --> CtrlPoints
    EditingLine --> Splits
    EditingLine --> TextPos
    
    StartEnd --> StartDot
    StartEnd --> EndDot
    CtrlPoints --> CtrlDot
    Splits --> SplitDot
    TextPos --> TextEditor
    CtrlPoints --> CtrlLines

The controller’s visibility is controlled by editingLineController.show. When a line is set for editing using graphInstance.setEditingLine(line), the controller automatically positions all handles and updates the view.

Sources: packages/platforms/vue3/src/relation-graph/src/core4vue3/editing/RGEditingLineController.vue:1-198, packages/platforms/react/src/relation-graph/src/core4react/editing/RGEditingLineController.tsx:1-199

---

Vertex Manipulation

Line start and end vertices can be dragged to reconnect lines. The startMoveLineVertex() method implements vertex dragging with target detection.

Diagram: Vertex Drag and Drop Flow

graph TB
    subgraph "Drag Initiation"
        mousedown["User mousedown on vertex handle
.rg-line-ctrl-dot.start-dot
.rg-line-ctrl-dot.end-dot"]
        startMoveLineVertex["startMoveLineVertex(type, e, callback)
type: 'start' | 'end'
Line 718"]
        setupDrag["RGDragUtils.startDrag()
Setup mousemove/mouseup"]
    end
    
    subgraph "Dragging Loop"
        updatePreviewLine["Update newLinkTemplate
fromNode or toNode position
Follow mouse cursor"]
        detectTarget["Check event.target:
- isNode(element)?
- .rg-connect-target?
- Canvas point"]
        showConnectCtrl["Show nodeConnectController
if hovering over node"]
    end
    
    subgraph "Drop Handling"
        onLineVertexBeDropped["onLineVertexBeDropped(e)
Line 755"]
        determineTarget["Determine drop target:
- RGNode
- RGConnectTarget (targetType, targetData)
- {x, y} canvas position"]
        createLineJson["Create JsonLine:
from: fromNode.id | position
to: toNode.id | position
Copy line properties"]
        invokeCallback["callback(fromNode, toNode, lineJson)
Or defaultLineVertexBeChangedHandler"]
    end
    
    mousedown --> startMoveLineVertex
    startMoveLineVertex --> setupDrag
    setupDrag --> updatePreviewLine
    updatePreviewLine --> detectTarget
    detectTarget --> showConnectCtrl
    setupDrag --> onLineVertexBeDropped
    onLineVertexBeDropped --> determineTarget
    determineTarget --> createLineJson
    createLineJson --> invokeCallback

Target Type Determination:

// From RelationGraphWith91Editing.ts:755-820
if (isNode(targetElement)) {
    // Node connection
    toNode = targetElement as RGNode;
    toNodeTargetType = RGInnerConnectTargetType.Node;
} else if (targetElement.closest('.rg-connect-target')) {
    // Custom connect target
    const targetData = connectTargetElement.dataset.targetData;
    const targetType = connectTargetElement.dataset.targetType;
    toNodeTargetType = targetType;
} else {
    // Canvas point
    const canvasXy = getCanvasXyByClientXy(clientXy);
    toNode = canvasXy;
    toNodeTargetType = RGInnerConnectTargetType.CanvasPoint;
}

The defaultLineVertexBeChangedHandler (line 1029) automatically removes the old line and adds the new line to the graph. Custom callbacks can override this behavior.

Sources: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:718-900, packages/relation-graph-models/models/RelationGraphWith91Editing.ts:1029-1087

---

Control Point Manipulation

For curve line shapes (lineShape = 6), two Bezier control points allow path adjustment. The startMoveLine6CtrlPoint() method handles control point dragging.

Diagram: Bezier Control Point Editing

graph TB
    subgraph "Control Point State"
        ctrlPoint1["editingLineController.ctrlPoint1
{x, y} on view coordinates"]
        ctrlPoint2["editingLineController.ctrlPoint2
{x, y} on view coordinates"]
    end
    
    subgraph "Drag Method"
        startMoveLine6CtrlPoint["startMoveLine6CtrlPoint(ctrlPointIndex, e, callback)
ctrlPointIndex: 1 | 2
Line 902"]
        dragLoop["RGDragUtils.startDrag()
Update control point position"]
        calcOffset["Calculate offset from default position
Relative to link junction points"]
        storeInData["Store in line.data:
cp1_offsetX, cp1_offsetY
cp2_offsetX, cp2_offsetY"]
        invokeCallback["callback(line, ctrlPointIndex)"]
    end
    
    subgraph "Path Regeneration"
        updateLine["dataProvider.updateLine(line.id, {data})"]
        createLineDrawInfo["createLineDrawInfo(link, line)
Reads control point offsets
Generates new SVG path"]
    end
    
    ctrlPoint1 -.user drags.-> startMoveLine6CtrlPoint
    ctrlPoint2 -.user drags.-> startMoveLine6CtrlPoint
    startMoveLine6CtrlPoint --> dragLoop
    dragLoop --> calcOffset
    calcOffset --> storeInData
    storeInData --> invokeCallback
    invokeCallback --> updateLine
    updateLine --> createLineDrawInfo

Control Point Storage Schema:

// Stored in line.data object
interface Line6CtrlData {
    cp1_offsetX?: number;  // Control point 1 X offset from default
    cp1_offsetY?: number;  // Control point 1 Y offset from default
    cp2_offsetX?: number;  // Control point 2 X offset from default
    cp2_offsetY?: number;  // Control point 2 Y offset from default
}

Default control point positions are calculated in generateLineForCurve() based on junction point directions. User offsets are applied on top of these defaults.

Sources: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:902-953, packages/relation-graph-models/utils/line/generateLineForCurve.ts

---

Orthogonal Line Split Points

For orthogonal lines (lineShape 44 and 49), the system displays draggable split points at segment junctions. The startMoveLine44CtrlPoint() method implements split point manipulation.

Diagram: Orthogonal Line Split Point Editing

graph TB
    subgraph "Split Point Data Structure"
        RGCtrlPointForLine44["RGCtrlPointForLine44
pIndex: number (segment index)
optionName: string (fd/td/cx/cy/cp-N)
direction: 'v' | 'h'
x, y: number (view coordinates)
startDirection, endDirection
hide?: boolean"]
    end
    
    subgraph "Line 44 Split Types"
        fd["'fd' - From Distance
Distance from start node"]
        td["'td' - To Distance
Distance from end node"]
        cx["'cx' - Center X
Vertical center line"]
        cy["'cy' - Center Y
Horizontal center line"]
    end
    
    subgraph "Manipulation Flow"
        startMoveLine44CtrlPoint["startMoveLine44CtrlPoint(split, e, callback)
Line 956"]
        dragLogic["RGDragUtils.startDrag()
Constrain movement:
- Vertical: X only
- Horizontal: Y only"]
        updateLinePoints["updateLinePoints(line, points)
From RGLinePath.ts
Recalculate path with new split position"]
        storeData["Store in line.data.pathPoints
Array of RGPosition"]
        invokeCallback["callback(line)
Update complete"]
    end
    
    RGCtrlPointForLine44 --> fd
    RGCtrlPointForLine44 --> td
    RGCtrlPointForLine44 --> cx
    RGCtrlPointForLine44 --> cy
    
    startMoveLine44CtrlPoint --> dragLogic
    dragLogic --> updateLinePoints
    updateLinePoints --> storeData
    storeData --> invokeCallback

Split Point Naming for 3-Segment Lines:

Segment Count	Split Positions	optionName Values
3 segments	2 split points	Determined by topology: - Center line: 'cx' or 'cy' - Near start: 'fd' - Near end: 'td'
4 segments	3 split points	split[1] = 'fd' split[2] = 'td'
5 segments	4 split points	split[1] = 'fd' split[2] = 'cx' or 'cy' split[3] = 'td'

The direction field constrains drag movement: vertical splits move horizontally (changing X), horizontal splits move vertically (changing Y). Updated paths are stored in line.data.pathPoints and used by generateLineFor49() for rendering.

Sources: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:956-1013, packages/relation-graph-models/models/RelationGraphWith91Editing.ts:615-796, packages/relation-graph-models/utils/line/RGLinePath.ts:33-47, packages/relation-graph-models/types.ts:710-722

---

Text Label Editing

Line text labels support drag repositioning and inline editing via double-click. The startMoveLineText() method handles text position dragging.

Diagram: Text Label Manipulation

graph TB
    subgraph "Text Drag Flow"
        startMoveLineText["startMoveLineText(e, callback)
Line 1015"]
        dragLoop["RGDragUtils.startDrag()
Update text position"]
        calcTextOffset["Calculate offset from default:
textOffset_x = dragX - defaultX
textOffset_y = dragY - defaultY"]
        updateLineData["Store in line:
line.textOffsetX
line.textOffsetY"]
        invokeCallback["callback(line)"]
    end
    
    subgraph "Text Edit Flow"
        detectDoubleClick["Click detection
If clicks < 500ms apart:
Enter edit mode"]
        showInput["Display input element
over text label"]
        onTextChange["onLineTextChange(newText)
dataProvider.updateLine(id, {text})"]
        hideInput["Exit edit mode
Hide input element"]
    end
    
    subgraph "Text Position Calculation"
        defaultPos["Default position from
lineDrawInfo.textPosition
(center of path)"]
        applyOffset["Applied offset:
finalX = defaultX + textOffsetX
finalY = defaultY + textOffsetY"]
        viewCoords["Convert to view coordinates
editingLineController.text.x, .y"]
    end
    
    startMoveLineText --> dragLoop
    dragLoop --> calcTextOffset
    calcTextOffset --> updateLineData
    updateLineData --> invokeCallback
    
    detectDoubleClick --> showInput
    showInput --> onTextChange
    onTextChange --> hideInput
    
    defaultPos --> applyOffset
    applyOffset --> viewCoords

Text Position Storage:

Text offsets are stored directly on the line object, not in line.data:

interface RGLine {
    textOffsetX?: number;  // Offset from default X position
    textOffsetY?: number;  // Offset from default Y position
    text?: string;         // Text content
}

The default text position is calculated in createLineDrawInfo() at the path midpoint. User-applied offsets are added to this default position during rendering.

Sources: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:1015-1087, packages/relation-graph-models/models/RelationGraphWith91Editing.ts:615-908

---

Interactive Line Creation

The line creation workflow allows users to interactively create connections by selecting source and target nodes. The startCreatingLinePlot() method initiates this mode.

Diagram: Line Creation State Machine

graph TB
    subgraph "Initiation"
        startCreatingLinePlot["startCreatingLinePlot(e, setting)
Line 487
Set options.creatingLinePlot = true"]
        setupTemplate["Create newLineTemplate
from setting.template
Create newLinkTemplate"]
        setFromNode["If setting.fromNode:
Set newLinkTemplate.fromNode
Skip step 1"]
        addListeners["Add mousemove listener:
onMovingWhenCreatingLinePlot"]
    end
    
    subgraph "Step 1: Select From Node"
        clickNode1["User clicks node
onNodeClickWhenCreatingLinePlot
Line 828"]
        setFromNode1["Set newLinkTemplate.fromNode
Record _step1EventTime"]
    end
    
    subgraph "Step 2: Mouse Move"
        onMovingWhenCreatingLinePlot["onMovingWhenCreatingLinePlot($event)
Line 580
Update toNode.x, toNode.y"]
        detectHover["Detect hover target:
- isNode() → show nodeConnectController
- .rg-connect-target → parse targetType/Data
- else → canvas point"]
        updateJunctionPoint["Update toJunctionPoint
based on hover element"]
        updateTempLink["Update newLinkTemplate.toNode
Follow mouse position"]
    end
    
    subgraph "Step 3: Select To Target"
        clickTarget["User clicks target
onNodeClickWhenCreatingLinePlot (node)
OR onCanvasClickWhenCreatingLinePlot (canvas)"]
        onReadyToCreateLine["onReadyToCreateLine(fromNode, toNode)
Line 867"]
        createLineJson["Create JsonLine from template
Set from/to based on isReverse"]
        emitEvent["Emit RGEventNames.onLineBeCreated
{fromNode, toNode, lineJson}"]
        callbackHandler["Call _onCreateLineCallback
OR listener.onLineBeCreated"]
        stopCreatingLinePlot["stopCreatingLinePlot()
Line 553
Clean up state and listeners"]
    end
    
    startCreatingLinePlot --> setupTemplate
    setupTemplate --> setFromNode
    setFromNode --> addListeners
    addListeners --> clickNode1
    clickNode1 --> setFromNode1
    setFromNode1 --> onMovingWhenCreatingLinePlot
    onMovingWhenCreatingLinePlot --> detectHover
    detectHover --> updateJunctionPoint
    updateJunctionPoint --> updateTempLink
    updateTempLink --> clickTarget
    clickTarget --> onReadyToCreateLine
    onReadyToCreateLine --> createLineJson
    createLineJson --> emitEvent
    emitEvent --> callbackHandler
    callbackHandler --> stopCreatingLinePlot

Creation Mode State:

// Key state properties during creation
interface CreatingLineState {
    creatingLinePlot: boolean;           // Mode active flag
    newLineTemplate: RGLine;             // Line appearance template
    newLinkTemplate: {                   // Connection state
        fromNode: RGLineTarget | null;   // Source node/position
        toNode: RGLineTarget;            // Target (follows mouse)
        toNodeObject: RGNode | null;     // Final target node
    };
    nodeConnectController: {             // Connection UI
        show: boolean;
        node: RGLineTarget;
        x, y, width, height: number;
    };
}

The nodeConnectController displays junction point handles when hovering over nodes. For custom connection targets, use the RGConnectTarget component with data-target-type and data-target-data attributes.

Sources: packages/relation-graph-models/models/RelationGraphWith7Event.ts:486-870, packages/relation-graph-models/models/RelationGraphWith91Editing.ts:383-412

---

Editing State Persistence

Editing state is stored in the RGOptionsFull object and synchronized with the framework-specific data providers.

State Property	Type	Purpose
editingController.nodes	RGNode[]	Currently selected nodes for editing
editingController.show	boolean	Whether the node editing controller is visible
editingController.x, y, width, height	number	Position and size of the editing overlay
editingLineController.line	RGLine	Currently edited line
editingLineController.show	boolean	Whether the line editing controller is visible
editingLineController.startPoint	{x, y}	Start vertex handle position on view
editingLineController.endPoint	{x, y}	End vertex handle position on view
editingLineController.ctrlPoint1	{x, y}	First bezier control point position
editingLineController.ctrlPoint2	{x, y}	Second bezier control point position
editingLineController.line44Splits	RGCtrlPointForLine44[]	Orthogonal line split points
editingLineController.text	{x, y}	Text label position on view
editingReferenceLine	Object	Alignment guide configuration
showReferenceLine	boolean	Whether to show reference lines during drag
referenceLineAdsorption	boolean	Whether to snap to reference lines

Updates to these properties trigger view updates through the reactive data provider system. The _updateEditingControllerView() and _updateEditingLineView() methods recalculate positions and sync the state with the UI components.

Sources: packages/relation-graph-models/types.ts:640-685, packages/relation-graph-models/models/RelationGraphWith91Editing.ts:98-133, packages/relation-graph-models/models/RelationGraphWith91Editing.ts:615-700