Visual Dialog Tree Editor for Mobile Apps

On iOS, a UIScrollView with contentSize 5000×5000 pt is a simple start. Nodes are UIViews inside a contentView. Zoom via minimumZoomScale/maximumZoomScale. Drawback: text becomes unreadable when zoomed. Fix: invert the transform on labels in scrollViewDidZoom. A custom canvas using CATransform3D gives more control: zoom-to-fit, snap-to-grid. Gesture conflicts are resolved with UIGestureRecognizerDelegate: pan on a node = drag, pan on empty space = panning.

In Jetpack Compose, use Modifier.graphicsLayer with pointerInput for detectTransformGestures.

Why Proper Gesture Management Matters

The editor simultaneously uses pan, pinch, long press, and tap. Without clear prioritization, user actions will be misinterpreted. On iOS we use UIGestureRecognizerDelegate with shouldRecognizeSimultaneouslyWith for pan and pinch, and hit-test at gesture start determines whether a node or canvas is being dragged. On Android we use GestureDetector with different listeners. This approach eliminates false triggers during intensive work.

Rendering Edges (Arrows)

Bezier curves for connections between nodes look better than straight lines. A cubic curve from an output handle to an input handle:

let path = UIBezierPath() path.move(to: startPoint) let controlPoint1 = CGPoint(x: startPoint.x + (endPoint.x - startPoint.x) * 0.5, y: startPoint.y) let controlPoint2 = CGPoint(x: startPoint.x + (endPoint.x - startPoint.x) * 0.5, y: endPoint.y) path.addCurve(to: endPoint, controlPoint1: controlPoint1, controlPoint2: controlPoint2) edgeLayer.path = path.cgPath 

Each edge is a CAShapeLayer with strokeColor and an arrowhead. When a node moves, we recalculate all CAShapeLayer.path for its incoming and outgoing edges. Use CATransaction.begin(); CATransaction.setDisableActions(true) for instant updates. When there are many edges (50+), render them via a single CALayer with a draw method: one CGContext.addPath() for all edges is faster than 50 separate layers.

Interactive Edge Creation

The user drags from an output handle of one node to an input handle of another to create a new edge. Implementation:

1. UILongPressGestureRecognizer (duration 0.0) on the handle view — start drag
2. On .began, create a temporaryEdgeLayer, start point fixed on the handle
3. On .changed, update the end of temporaryEdgeLayer to the finger position
4. Hit-test on each .changed: canvas.hitTest(location, with: nil) — if we hit an input handle, highlight it
5. On .ended, if under the finger there is an input handle, create a permanent edge; otherwise remove the temporary layer

Prevent invalid connections: cannot connect a node to itself, cannot create duplicate edges, cannot create cycles (if the graph must be a DAG). Cycle check: DFS from the target node. O(V + E) — fast for typical dialog trees.

Editing Nodes

Tap on a node opens an inline editor. For a dialog node of type "Message": a UITextView with rich text support for the message content, a type switcher (text/media/buttons), and a button list with add/remove capability.

Bottom sheet (iOS 15+ UISheetPresentationController with .medium and .large detents) — the user sees both the graph and editor in medium mode. Keyboard avoidance: when the keyboard appears, increase the bottom padding of the UIScrollView inside the sheet by keyboardFrame.height - sheet.frame.height + sheetMaxHeight. Handle via UIKeyboardWillShowNotification.

Undo/Redo

Command Pattern — every action (move node, create/delete edge, edit content) is implemented as a command object with execute() and undo() methods.

protocol GraphCommand { func execute() func undo() } struct MoveNodeCommand: GraphCommand { let node: GraphNode let fromPosition: CGPoint let toPosition: CGPoint func execute() { node.position = toPosition } func undo() { node.position = fromPosition } } 

UndoManager — built into iOS UIKit, works with registerUndo(withTarget:handler:). Or a custom CommandStack with undoStack: [GraphCommand] and redoStack: [GraphCommand]. Grouping: moving multiple selected nodes is one undo operation.

Selection and Multiple Selection

Lasso selection: pan on empty space while holding down — draws a selection rectangle via CAShapeLayer with fillColor = UIColor.blue.withAlphaComponent(0.1) and strokeColor = UIColor.blue. On gesture end, check all nodes for intersection. Selected nodes get a blue border via layer.borderColor. Pan on selection moves all selected nodes simultaneously. Delete removes all selected nodes and incident edges.

Serialization and Synchronization

Graph → JSON with a complete description of nodes and edges. Auto-save every 30 seconds or on each change with a 2-second debounce. On iOS, use Combine.debounce(for: .seconds(2), scheduler: RunLoop.main) on a graph change publisher, then URLSession.shared.dataTask to send to the server.

Conflict resolution for collaborative editing: Last-Write-Wins at the node level with a server timestamp. Each node has updatedAt: Date — during merge, take the version with the later timestamp.

What's Included in the Work

• Research and design of the node structure for your chatbot
• Implementation of a custom canvas with infinite scroll and zoom
• Undo/redo system and multiple selection
• Integration with your backend via REST/GraphQL
• Support for all node types (text, media, buttons, conditions)
• Testing on target devices and publication to stores
• Documentation and training for your team

Timeline: from 1 week to 3 months. Pricing is determined individually after analyzing your requirements. Development costs start from $5,000 for a basic web-based version and can range up to $50,000 for a full native solution with advanced features. Contact us — we’ll evaluate your project and propose the optimal solution.