AstralView/packages/editor

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:

pnpm install

Run the editor (dev)

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:

pnpm -C packages/editor build

Build output is written to:

• packages/editor/dist/

Preview the built artifact locally

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:

pnpm -r lint && pnpm -r typecheck && pnpm -r build