VL Agent x vxeditor Demo

App

Sections

Component Sync

Maps

File Sections/ApprovalCenter.sc

Selection LeaveApprovalForm

vxeditor tab Stage

Layout Intent

Files can collapse left, vxeditor can collapse right, and the middle stays large enough for real VL work.

The center uses a single active surface. You switch between VL Code and VL Map; they do not compete for width.

Selection link: code -> vxeditor tree Selection link: map -> vxeditor stage Import path: VL output -> visual preview

Current Sync

LeaveApprovalForm

The form block is focused in VL Code and highlighted on the right-side visual stage.

Bridge Event

VL Code -> vxeditor selected component

The right object tree and preview stay aligned with the selected VL component.

Sections/ApprovalCenter.sc Click any component block below. The right-side vxeditor object tree and stage preview will follow that selection.

Selected line 48

VL Map

Map is a separate center surface, not another permanent pane.

Use it when relations are easier to understand visually, then jump back to code or push the current node into vxeditor for exact visual inspection.

Focused Node

LeaveApprovalForm

This node is selected in the map, the same component is active in the right-side object tree.

Import Path

Map -> vxeditor preview

The demo treats the current node as an importable visual scope for the right-side stage.

ApprovalCenter UI Map Map view and code view are mutually exclusive in the center. Both can drive the same selection bridge into vxeditor.

Bridge ready

Section Shell

Summary + Detail

Records + Action

vxeditor

Embedded vxeditor Host The actual `vxeditor5` can mount here later. This demo focuses on docking, width usage, and selection sync.

Stage Preview

LeaveApprovalForm

Imported from ApprovalCenter.sc line 48

Approval Center Future iframe / webview mount point for vxeditor5

LeaveApprovalForm

Object Tree

Selection Detail

LeaveApprovalForm is selected from VL Code. The modal block is highlighted in stage preview and ready for visual adjustment.

Fast Actions

Logic Flow

LeaveApprovalForm -> onApprove

Synced from current VL selection

Trigger Modal submit fires the selected component event.

Service ApprovalDomain.ApproveLeave() executes the action chain.

UI Result Close the modal, refresh pending approvals, and update summary cards.

Selection

LeaveApprovalForm

Linked Line

ApprovalCenter.sc:48

Round Trip

Import visual edits, then export back to VL once validated.

Tree Browser

Inspector Snapshot

LeaveApprovalForm Modal form for leave approval with confirm action and data validation.

Linked VL Line ApprovalCenter.sc line 48

Round Trip Note This block can be imported for visual check and then exported back to VL after adjustment.

Bridge message: VL Code -> vxeditor stage aligned

Host API sketch: selectComponent / importToVx / exportToVl / revealSource

AI

AI Chat Can minimize to the bottom-right corner.

Describe intent here first. Keep the center wide for VL Code or VL Map, and only open vxeditor when direct manipulation is faster.

I need to tweak the leave approval form layout and confirm the visual result.

Select the component in VL, import it to the right panel, inspect visually, then export the result back to VL.

AI chat stays floating and can collapse into a bottom-right pill.