Control Schemes

Description

A control scheme is the mapping between input gestures and canvas actions — which button pans, what the wheel does, how selection starts. Provide one through provideFFlow(withControlScheme(...)) and it drives dragging, panning, zooming and the selection area together; switch it at runtime through FControlSchemeController.

Pick a preset from the toolbar and try it on the canvas.

Example

Presets

• F_DEFAULT_CONTROL_SCHEME (default) — a drag pans the canvas, the wheel zooms, Shift+drag draws a selection rectangle. Matches the library's behavior without the feature.
• F_SCROLL_PAN_CONTROL_SCHEME (Miro-like) — the wheel and two-finger trackpad scroll pan, Ctrl/Cmd+wheel or pinch zooms, a drag on the empty canvas selects, a middle-mouse drag pans.
• F_DRAG_SELECT_CONTROL_SCHEME (draw.io-like) — the wheel zooms, a drag on the empty canvas selects, a middle-mouse drag pans.

Usage

Switch or tweak the scheme at runtime through the controller:

A scheme is a plain IFControlScheme object — every gesture is an FEventTrigger predicate, so you can start from a preset and override individual gestures, or build your own from scratch. See the Control Scheme guide for the full field reference and custom-scheme recipes.

Supported gestures

• nodeMove, canvasMove, selection, createConnection, reassignConnection, nodeResize, nodeRotate: FEventTrigger predicates deciding when each interaction starts.
• scrollPan: routes the wheel — true pans on plain scroll and zooms on Ctrl/Cmd+wheel or pinch.
• zoom: gates wheel zoom.
• The per-instance inputs (fNodeMoveTrigger, fCanvasMoveTrigger, fWheelTrigger, f-selection-area fTrigger, …) override the active scheme when set.