- Describe complete Fig archive, conversion, instance, and metadata ownership\n- Refresh contributor paths across localized development guides\n- Mark Track D complete in the local master plan
4.1 KiB
4.1 KiB
Współtworzenie
Struktura projektu
packages/
core/ @open-pencil/core — silnik (zero zależności DOM)
src/ Graf sceny, renderer, layout, kodek, kiwi, typy
cli/ @open-pencil/cli — headless CLI do operacji .fig
src/commands/ info, tree, find, export, eval, analyze
mcp/ @open-pencil/mcp — serwer MCP dla narzędzi AI
src/ Transporty stdio + HTTP (Hono), 87 narzędzi
src/
components/ Vue SFCs (canvas, panele, pasek narzędzi, wybieracz kolorów)
properties/ Sekcje panelu właściwości (Wygląd, Wypełnienie, Obrys, itp.)
composables/ Wejście canvasu, skróty klawiszowe, hooki renderowania
stores/ Stan edytora (reaktywność Vue)
engine/ Shimy re-eksportu z @open-pencil/core
kiwi/ Shimy re-eksportu z @open-pencil/core
types.ts Współdzielone typy (re-eksportowane z core)
constants.ts Kolory UI, wartości domyślne, progi
desktop/ Tauri v2 (Rust + config)
tests/
e2e/ Regresja wizualna Playwright
engine/ Testy jednostkowe (bun:test)
docs/ Strona dokumentacji VitePress
specs/ Specyfikacje możliwości (źródło prawdy)
changes/ Aktywne i zarchiwizowane zmiany
Konfiguracja deweloperska
bun install
bun run dev # Edytor na localhost:1420
bun run docs:dev # Dokumentacja na localhost:5173
Styl kodu
Narzędzia
| Narzędzie | Polecenie | Cel |
|---|---|---|
| oxlint | bun run lint |
Linting (oparty na Rust, szybki) |
| oxfmt | bun run format |
Formatowanie kodu |
| tsgo | bun run typecheck |
Sprawdzanie typów (checker TypeScript oparty na Go) |
Uruchom wszystkie sprawdzenia:
bun run check
Konwencje
- Nazwy plików — kebab-case (
scene-graph.ts,use-canvas-input.ts) - Komponenty — PascalCase Vue SFCs (
EditorCanvas.vue,NumberField.vue) - Stałe — SCREAMING_SNAKE_CASE
- Funkcje/zmienne — camelCase
- Typy/interfejsy — PascalCase
Konwencje dla agentów AI
Deweloperzy i agenci AI powinni przeczytać AGENTS.md w katalogu głównym repo (zobacz na GitHub). Obejmuje renderowanie, graf sceny, komponenty i instancje, layout, UI, format pliku, konwencje Tauri i znane problemy.
Wprowadzanie zmian
- Zaimplementować zmianę
- Uruchomić
bun run checkibun run test - Wysłać pull request
Kluczowe pliki
Kod źródłowy silnika core znajduje się w packages/core/src/. Kod aplikacyjny edytora, dokumentów, AI, współpracy, shella, demo i automatyzacji znajduje się w src/app/*; SDK Vue zawiera wielokrotnego użytku kod canvasu i composable w packages/vue/src/.
| Plik | Cel |
|---|---|
packages/scene-graph/src/ |
Graf sceny: węzły, zmienne, instancje, hit testing i cofanie |
packages/core/src/canvas/renderer.ts |
Pipeline renderowania CanvasKit |
packages/core/src/layout/ |
Adapter layoutu Yoga |
packages/core/src/clipboard.ts |
Schowek kompatybilny z Figmą |
packages/core/src/vector/ |
Model sieci wektorowej |
packages/core/src/io/formats/raster/render.ts |
Eksport obrazu offscreen (PNG/JPG/WEBP) |
packages/kiwi/src/schema-runtime/ |
Runtime schematu i kodek binarny Kiwi |
packages/fig/src/node-change/ |
Konwersja między SceneGraph i Figma NodeChange |
packages/core/src/io/formats/fig/ |
Orkiestracja odczytu/zapisu .fig dla aplikacji |
packages/cli/src/index.ts |
Punkt wejścia CLI |
packages/core/src/tools/ |
Ujednolicone definicje narzędzi (AI, MCP, CLI) |
packages/core/src/figma-api/ |
Implementacja Figma Plugin API |
packages/mcp/src/server.ts |
Fabryka serwera MCP |
packages/cli/src/commands/ |
Polecenia CLI (info, tree, find, export, eval, analyze) |
src/app/editor/session/create.ts |
Editor session assembly |
packages/vue/src/canvas/CanvasRoot.vue |
Composable renderowania canvasu |
packages/vue/src/canvas/useCanvasInput.ts |
Obsługa wejścia mysz/dotyk |
src/app/shell/keyboard/use.ts |
Obsługa skrótów klawiszowych |