# zx971020/agv-map-editor architecture

> Architecture diagram of the GitHub repository zx971020/agv-map-editor, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zx971020/agv-map-editor
- Repository: https://github.com/zx971020/agv-map-editor

## Overview

AGV Map Editor is a browser-based visual editor for composing and managing layered AGV maps. The intended workflow is to choose a map, drag map elements onto the canvas, arrange and inspect them, and adjust map or element properties; canvas zooming and panning support that editing. The README also documents layered maps and element selection/movement. Canvas, map-list, and property-panel implementation details are only partly sampled, so their interactions are shown at the documented capability level; no persistence or export backend is evidenced.

Main entry points: [`src/App.vue`](https://github.com/zx971020/agv-map-editor/blob/master/src/App.vue) (Editor composition), [`src/components/workspace/CanvasArea.vue`](https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/CanvasArea.vue) (Canvas workspace), [`src/components/sidebar/ElementPanel.vue`](https://github.com/zx971020/agv-map-editor/blob/master/src/components/sidebar/ElementPanel.vue) (Element palette), [`src/components/sidebar/MapList.vue`](https://github.com/zx971020/agv-map-editor/blob/master/src/components/sidebar/MapList.vue) (Map list)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Editor shell"]
  node_entry["Vue entry<br/>[main.ts]"]
  node_app["Editor composition<br/>[App.vue]"]
  node_layout["Three-panel layout<br/>[AppLayout.vue]"]
end

subgraph group_editing["Map editing"]
  node_canvas["Canvas workspace<br/>[CanvasArea.vue]"]
  node_toolbar["Canvas tools<br/>[CanvasToolbar.vue]"]
  node_header["Workspace header"]
  node_bottom["Workspace status<br/>[BottomBar.vue]"]
  node_properties["Map and element properties"]
end

subgraph group_mapdomain["Map structure"]
  node_elements["Element palette<br/>[ElementPanel.vue]"]
  node_maps["Map list<br/>[MapList.vue]"]
  node_elementdata["Element catalog<br/>[element-list.json]"]
end

subgraph group_foundation["UI foundation"]
  node_config["Map and canvas settings<br/>[index.ts]"]
  node_types["Map data types<br/>[index.ts]"]
  node_theme["Theme preference<br/>[useDarkMode.ts]"]
end

node_user(("Map editor user"))
node_store[("Browser local storage")]

node_user -->|"opens editor"| node_entry
node_entry -->|"mounts"| node_app
node_app -->|"composes"| node_layout
node_app -->|"renders workspace"| node_canvas
node_app -->|"renders tools"| node_toolbar
node_app -->|"renders header"| node_header
node_app -->|"renders status"| node_bottom
node_app -->|"renders properties"| node_properties
node_app -->|"renders palette"| node_elements
node_app -->|"renders map list"| node_maps
node_elementdata -->|"loads catalog"| node_elements
node_user -->|"chooses map"| node_maps
node_user -->|"drags element"| node_elements
node_elements -->|"transfers element"| node_canvas
node_user -->|"selects and moves"| node_canvas
node_user -->|"sets zoom and pan"| node_toolbar
node_user -->|"edits properties"| node_properties
node_config -->|"configures canvas"| node_canvas
node_types -->|"defines map model"| node_maps
node_types -->|"defines elements"| node_canvas
node_user -.->|"sets appearance"| node_theme
node_theme -.->|"reads and writes theme"| node_store

click node_entry "https://github.com/zx971020/agv-map-editor/blob/master/src/main.ts"
click node_app "https://github.com/zx971020/agv-map-editor/blob/master/src/App.vue"
click node_layout "https://github.com/zx971020/agv-map-editor/blob/master/src/components/layout/AppLayout.vue"
click node_canvas "https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/CanvasArea.vue"
click node_toolbar "https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/CanvasToolbar.vue"
click node_header "https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/WorkspaceHeader.vue"
click node_bottom "https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/BottomBar.vue"
click node_properties "https://github.com/zx971020/agv-map-editor/blob/master/src/components/properties/PropertiesPanel.vue"
click node_elements "https://github.com/zx971020/agv-map-editor/blob/master/src/components/sidebar/ElementPanel.vue"
click node_maps "https://github.com/zx971020/agv-map-editor/blob/master/src/components/sidebar/MapList.vue"
click node_elementdata "https://github.com/zx971020/agv-map-editor/blob/master/src/assets/element-list.json"
click node_config "https://github.com/zx971020/agv-map-editor/blob/master/src/config/index.ts"
click node_types "https://github.com/zx971020/agv-map-editor/blob/master/src/types/index.ts"
click node_theme "https://github.com/zx971020/agv-map-editor/blob/master/src/composables/useDarkMode.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app,node_layout,node_user toneBlue
class node_canvas,node_toolbar,node_header,node_bottom,node_properties,node_store toneAmber
class node_elements,node_maps,node_elementdata toneMint
class node_config,node_types,node_theme toneRose
```

## Components

### Editor shell

- [Vue entry](https://github.com/zx971020/agv-map-editor/blob/master/src/main.ts): `src/main.ts`
- [Editor composition](https://github.com/zx971020/agv-map-editor/blob/master/src/App.vue): `src/App.vue`
- [Three-panel layout](https://github.com/zx971020/agv-map-editor/blob/master/src/components/layout/AppLayout.vue): `src/components/layout/AppLayout.vue`

### Map editing

- [Canvas workspace](https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/CanvasArea.vue): `src/components/workspace/CanvasArea.vue`
- [Canvas tools](https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/CanvasToolbar.vue): `src/components/workspace/CanvasToolbar.vue`
- [Workspace header](https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/WorkspaceHeader.vue): `src/components/workspace/WorkspaceHeader.vue`
- [Workspace status](https://github.com/zx971020/agv-map-editor/blob/master/src/components/workspace/BottomBar.vue): `src/components/workspace/BottomBar.vue`
- [Map and element properties](https://github.com/zx971020/agv-map-editor/blob/master/src/components/properties/PropertiesPanel.vue): `src/components/properties/PropertiesPanel.vue`

### Map structure

- [Element palette](https://github.com/zx971020/agv-map-editor/blob/master/src/components/sidebar/ElementPanel.vue): `src/components/sidebar/ElementPanel.vue`
- [Map list](https://github.com/zx971020/agv-map-editor/blob/master/src/components/sidebar/MapList.vue): `src/components/sidebar/MapList.vue`
- [Element catalog](https://github.com/zx971020/agv-map-editor/blob/master/src/assets/element-list.json): `src/assets/element-list.json`

### UI foundation

- [Map and canvas settings](https://github.com/zx971020/agv-map-editor/blob/master/src/config/index.ts): `src/config/index.ts`
- [Map data types](https://github.com/zx971020/agv-map-editor/blob/master/src/types/index.ts): `src/types/index.ts`
- [Theme preference](https://github.com/zx971020/agv-map-editor/blob/master/src/composables/useDarkMode.ts): `src/composables/useDarkMode.ts`

### Other components

- **Map editor user**
- **Browser local storage**

## Connections

- Map editor user → Vue entry: opens editor
- Vue entry → Editor composition: mounts
- Editor composition → Three-panel layout: composes
- Editor composition → Canvas workspace: renders workspace
- Editor composition → Canvas tools: renders tools
- Editor composition → Workspace header: renders header
- Editor composition → Workspace status: renders status
- Editor composition → Map and element properties: renders properties
- Editor composition → Element palette: renders palette
- Editor composition → Map list: renders map list
- Element catalog → Element palette: loads catalog
- Map editor user → Map list: chooses map
- Map editor user → Element palette: drags element
- Element palette → Canvas workspace: transfers element
- Map editor user → Canvas workspace: selects and moves
- Map editor user → Canvas tools: sets zoom and pan
- Map editor user → Map and element properties: edits properties
- Map and canvas settings → Canvas workspace: configures canvas
- Map data types → Map list: defines map model
- Map data types → Canvas workspace: defines elements
- Map editor user → Theme preference: sets appearance
- Theme preference → Browser local storage: reads and writes theme