119 lines
2.3 KiB
Markdown
119 lines
2.3 KiB
Markdown
# AstralView Editor (goView-like)
|
||
|
||
A canvas-first BI dashboard *screen editor* (selection, multi-select transform, layers, context menu, inspector) built with React + Vite.
|
||
|
||
This package is meant to be **directly runnable** as a product-ish demo.
|
||
|
||
## A) Runnable dev demo
|
||
|
||
### Prereqs
|
||
|
||
- Node.js (repo uses `pnpm@9.x`)
|
||
- `pnpm` enabled
|
||
|
||
### Install
|
||
|
||
From repo root:
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### Run the editor (dev)
|
||
|
||
```bash
|
||
pnpm -C packages/editor dev
|
||
```
|
||
|
||
Then open the URL printed by Vite (typically `http://localhost:5173`).
|
||
|
||
### Default screen size
|
||
|
||
New screens default to **1920×1080** (1080p). Import/export preserves `screen.width`/`screen.height`.
|
||
|
||
## B) Publishable build artifact
|
||
|
||
### Build
|
||
|
||
From repo root:
|
||
|
||
```bash
|
||
pnpm -C packages/editor build
|
||
```
|
||
|
||
Build output is written to:
|
||
|
||
- `packages/editor/dist/`
|
||
|
||
### Preview the built artifact locally
|
||
|
||
```bash
|
||
pnpm -C packages/editor preview
|
||
```
|
||
|
||
This serves the `dist/` folder via Vite preview (URL printed in terminal).
|
||
|
||
> Alternative: `npx serve packages/editor/dist`.
|
||
|
||
## C) goView-like UX acceptance checklist (current status)
|
||
|
||
Legend: ✅ done / 🟡 partial / ❌ missing
|
||
|
||
### Canvas / screen
|
||
|
||
- ✅ Default screen size is 1920×1080
|
||
- ✅ Export/import preserves screen size
|
||
- ✅ Pan + zoom (mouse wheel + drag)
|
||
- ✅ Bounds clamp for widget moves/resizes (keeps widgets inside screen)
|
||
|
||
### Selection
|
||
|
||
- ✅ Single select
|
||
- ✅ Multi-select (Shift)
|
||
- ✅ Box select (drag)
|
||
- ✅ Right-click selection parity (context menu works on targets)
|
||
|
||
### Transform
|
||
|
||
- ✅ Move selected
|
||
- ✅ Multi-select group bbox resize (scales selection)
|
||
- ✅ Min sizes enforced (no negative/degenerate)
|
||
|
||
### Layers
|
||
|
||
- ✅ Reorder layers (drag reorder)
|
||
- ✅ Lock / unlock
|
||
- ✅ Hide / show
|
||
|
||
### Context menu
|
||
|
||
- ✅ Copy / paste
|
||
- ✅ Z-order: bring to front / forward / backward / to back
|
||
- ✅ Align: left/center/right + top/middle/bottom
|
||
- ✅ Distribute: horizontal / vertical
|
||
|
||
### Hotkeys
|
||
|
||
- ✅ Delete
|
||
- ✅ Nudge (arrow keys)
|
||
- ✅ Duplicate
|
||
- ✅ Copy / paste
|
||
- ✅ Undo / redo
|
||
|
||
### Inspector
|
||
|
||
- ✅ Edit x/y/w/h (live)
|
||
- ✅ Media src (iframe/image/video) live update
|
||
|
||
### Demo content
|
||
|
||
- ✅ Minimal BI-like sample screen included on first load
|
||
|
||
---
|
||
|
||
If you are working on goView parity, keep the repo green:
|
||
|
||
```bash
|
||
pnpm -r lint && pnpm -r typecheck && pnpm -r build
|
||
```
|