# pangyongsheng/canvas-arc-draw architecture

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

- Interactive diagram: https://gitdiagram.com/pangyongsheng/canvas-arc-draw
- Repository: https://github.com/pangyongsheng/canvas-arc-draw

## Overview

drag-arc is a browser-side, canvas-based draggable arc progress component. A consumer constructs it with a DOM element and options; it initializes drawing and input handling, renders the current value, and reports changes through callbacks. Pointer movement is converted to a progress value and redraws the arc. The graph reflects the sampled runtime source; the README documents configuration and callbacks, but no separate implementations beyond the two source files appear in the tree.

Main entry points: [`src/main.js`](https://github.com/pangyongsheng/canvas-arc-draw/blob/master/src/main.js) (DragArc instance), [`src/index.js`](https://github.com/pangyongsheng/canvas-arc-draw/blob/master/src/index.js) (Public export)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_consumer(("Component consumer"))
node_entry["Public export<br/>[index.js]"]
node_runtime["DragArc instance<br/>[main.js]"]
node_element["DOM element"]
node_input(("Pointer input"))
node_canvas["Canvas API"]
node_geometry["Value and geometry<br/>[main.js]"]
node_callbacks["Consumer callbacks"]

node_consumer -->|"imports and constructs"| node_entry
node_entry -->|"exports"| node_runtime
node_runtime -->|"initializes and binds"| node_element
node_runtime -->|"creates and draws"| node_canvas
node_element -->|"dispatches events"| node_input
node_runtime -->|"converts coordinates"| node_geometry
node_geometry -->|"returns progress"| node_runtime
node_runtime -->|"requests redraw"| node_canvas
node_runtime -->|"invokes change and release"| node_callbacks

click node_entry "https://github.com/pangyongsheng/canvas-arc-draw/blob/master/src/index.js"
click node_runtime "https://github.com/pangyongsheng/canvas-arc-draw/blob/master/src/main.js"
click node_geometry "https://github.com/pangyongsheng/canvas-arc-draw/blob/master/src/main.js"

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_consumer,node_element,node_input,node_callbacks toneIndigo
class node_entry,node_runtime,node_geometry toneTeal
class node_canvas toneMint
```

## Components

### Other components

- **Component consumer**
- [Public export](https://github.com/pangyongsheng/canvas-arc-draw/blob/master/src/index.js): `src/index.js`
- [DragArc instance](https://github.com/pangyongsheng/canvas-arc-draw/blob/master/src/main.js): `src/main.js`
- **DOM element**
- **Pointer input**
- **Canvas API**
- [Value and geometry](https://github.com/pangyongsheng/canvas-arc-draw/blob/master/src/main.js): `src/main.js`
- **Consumer callbacks**

## Connections

- Component consumer → Public export: imports and constructs
- Public export → DragArc instance: exports
- DragArc instance → DOM element: initializes and binds
- DragArc instance → Canvas API: creates and draws
- DOM element → Pointer input: dispatches events
- DragArc instance → Value and geometry: converts coordinates
- Value and geometry → DragArc instance: returns progress
- DragArc instance → Canvas API: requests redraw
- DragArc instance → Consumer callbacks: invokes change and release