Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
d14d767c75 | ||
|
Maxime Roy (new.blacc)andGitHub
|
1166ea5b3f | ||
|
|
798f62f63a | ||
|
|
f770c811e9 | ||
|
Maxime Roy (new.blacc)andGitHub
|
81f38de508 | ||
|
newblaccandClaude Sonnet 4.6
|
80c82665ea | ||
|
Maxime Roy (new.blacc)andGitHub
|
d020459e90 | ||
|
newblaccandClaude Sonnet 4.6
|
ae52198729 | ||
|
newblaccandClaude Sonnet 4.6
|
c368d4088a | ||
|
newblaccandClaude Sonnet 4.6
|
d1689a2e5c | ||
|
Maxime Roy (new.blacc)andGitHub
|
d073b6348d | ||
|
newblaccandClaude Sonnet 4.6
|
64ebfc6791 | ||
|
newblaccandClaude Sonnet 4.6
|
87e8a8e314 | ||
|
newblaccandClaude Sonnet 4.6
|
90cae43193 | ||
|
newblacc
|
f1db126566 | ||
|
newblaccandClaude Opus 4.6
|
a605a15282 | ||
|
newblaccandClaude Opus 4.6
|
1e535a5e31 | ||
|
newblaccandClaude Sonnet 4.6
|
d8ef0379f5 | ||
|
newblaccandClaude Sonnet 4.6
|
d993355a54 |
+3
-1
@@ -33,4 +33,6 @@ playwright-report/
|
||||
coverage/
|
||||
|
||||
docs/*
|
||||
!docs/screenshots/
|
||||
!docs/screenshots/.serena/
|
||||
.DS_Store
|
||||
.serena/
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
# ShipGuard configuration for excalidraw-mcp-sentinel
|
||||
# Reviewed 2026-04-02
|
||||
|
||||
exclude_paths:
|
||||
# Third-party dependencies — not our code
|
||||
- "node_modules/**"
|
||||
|
||||
disable_rules:
|
||||
# GHA-002: Unpinned GitHub Actions — upstream CI, tracked for pin-actions sweep
|
||||
- GHA-002
|
||||
# SC-003: No frozen lockfile — package-lock.json is the lockfile (not uv.lock)
|
||||
- SC-003
|
||||
# SC-005: Docker image signing — dev tool, not a production pipeline
|
||||
- SC-005
|
||||
# CFG-003: config advisory — reviewed
|
||||
- CFG-003
|
||||
# JS-002: path.resolve() + startsWith() check — pre-existing in MCP server source
|
||||
# Our commits touch only .gitignore and AGENTS.md — zero JS changes
|
||||
- JS-002
|
||||
# JS-004: pre-existing in MCP server source — tracked for future remediation
|
||||
- JS-004
|
||||
# JS-003: pre-existing — reviewed
|
||||
- JS-003
|
||||
@@ -92,6 +92,27 @@ All middleware lives here — do not duplicate in routes:
|
||||
- Tests mutate `process.env` between cases — do not cache env values at module init.
|
||||
- Integration tests use real SQLite (tmpdir). Do not mock the DB.
|
||||
|
||||
## Similar Project Scan
|
||||
|
||||
- Use `npm run scan:similar-projects` to scan GitHub for architecturally similar Excalidraw projects.
|
||||
- The scanner is capability-based, not fork-based: it looks for Excalidraw plus MCP, backend sync, persistence, security, workspace isolation, and self-hosting signals.
|
||||
- When looking for broader competitors instead of this repo's own lineage, run:
|
||||
|
||||
```bash
|
||||
npm run scan:similar-projects -- \
|
||||
--exclude-repo yctimlin/mcp_excalidraw \
|
||||
--exclude-repo sanjibdevnathlabs/mcp-excalidraw-local \
|
||||
--exclude-repo celstnblacc/excalidraw-mcp-sentinel
|
||||
```
|
||||
|
||||
- Reports are written to `docs/generated/` as JSON and Markdown.
|
||||
- For repeated or larger scans, prefer setting `GITHUB_TOKEN` to avoid GitHub anonymous API rate limits.
|
||||
- Rerun the scan after significant product or architecture changes. Changes to MCP features, persistence, security, or backend topology can materially change which repos are the closest matches.
|
||||
- Reference docs:
|
||||
- `docs/GUIDE-excalidraw-similar-project-search.md`
|
||||
- `docs/AUDIT-excalidraw-similar-project-scan.md`
|
||||
- `docs/COMPARISON-excalidraw-top-repos.md`
|
||||
|
||||
## Protected Files
|
||||
|
||||
- `AGENTS.md` — immutable unless explicitly named in the request.
|
||||
|
||||
@@ -5,6 +5,68 @@ Format: [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [1.0.6] - 2026-04-06
|
||||
|
||||
### Added
|
||||
- `DELETE /api/tenants/:id` endpoint — delete workspaces (tenants) with cascade (projects, elements, snapshots)
|
||||
- Workspace delete UI: inline confirm buttons in the workspace switcher panel
|
||||
|
||||
### Fixed
|
||||
- Project switch in browser did not load new project's elements — `switchProjectUI` now directly clears canvas and calls `loadExistingElements()` instead of relying on WS roundtrip
|
||||
|
||||
## [1.0.5] - 2026-04-06
|
||||
|
||||
### Added
|
||||
- Project management UI in canvas header: create, switch, delete projects with inline confirm
|
||||
- Sync countdown timer in header — shows seconds until next auto-sync after drawing stops
|
||||
- REST endpoints: `GET /api/projects`, `POST /api/projects`, `PUT /api/project/active`, `DELETE /api/projects/:id`
|
||||
- E2e test suite for project switching round-trips (`project-switch-e2e.test.ts`)
|
||||
- Sync countdown unit tests with fake timers (`sync-countdown.test.ts`)
|
||||
|
||||
### Fixed
|
||||
- `resolveTenantProject` always returned first project by creation date instead of the active project — switching projects had no effect on element queries
|
||||
- `resolveScope` had the same bug, causing WebSocket broadcasts to target the wrong project
|
||||
- Switching projects while a sync countdown was pending could overwrite the new project with the old project's elements — pending sync now auto-saves before switching
|
||||
- `onChange` triggered sync countdown on selection/appState changes (not just element changes) — added element hash comparison to filter false triggers
|
||||
|
||||
### Changed
|
||||
- Test count: 477/477 (was 446)
|
||||
|
||||
## [1.0.3] - 2026-03-30
|
||||
|
||||
### Fixed
|
||||
- Global install crash (`Schema method literal must be a string`) — upgraded `zod` from `3.25.5` to `^4.3.6` so the package uses real zod v4 rather than falling back to zod 3.x's v4 compatibility shim, which lacks the `.value` getter required by `@modelcontextprotocol/sdk@1.26.0`
|
||||
- `z.record(z.any())` call updated to `z.record(z.string(), z.any())` to satisfy zod v4's stricter record key-type requirement
|
||||
|
||||
## [1.0.2] - 2026-03-30
|
||||
|
||||
### Added
|
||||
- `frontend/src/utils/scenePreparation.ts` — centralized scene-preparation utilities (`expandLabelsToNative`, `prepareElementsForScene`, `convertElementsPreservingImageProps`)
|
||||
- E2E regression suite: `tests/e2e/phase2-regressions.spec.ts` (4 tests: position stability, auto-title, two-tab sync, curved arrow deformability)
|
||||
- Backend tests: `db-unit`, `mcp-contract`, `mcp-sanitization`, `security-unit`, `smoke-ws`, `tenant-authz-behavior`
|
||||
- Frontend tests: `scene-preparation`, `helpers`, `sync-logic`
|
||||
|
||||
### Changed
|
||||
- `computeElementHash` is now order-stable for equivalent element sets
|
||||
- `frontend/src/App.tsx` uses centralized scene-preparation utilities for label expansion and native-vs-converted routing
|
||||
- Rate limits raised: general 100→500 req/15min, write burst 10→30 req/min
|
||||
- MCP unknown tool calls now return JSON-RPC `MethodNotFound` (-32601) instead of generic error
|
||||
- Test count: 446/446
|
||||
|
||||
### Fixed
|
||||
- **Double WebSocket connection race** — second WS created during `CONNECTING` state seeded `knownContainerIdsRef` prematurely, blocking title auto-injection; guard now also blocks `CONNECTING` state
|
||||
- **Title/subtitle not injected for WS-delivered containers** — `CaptureUpdateAction.NEVER` suppresses `onChange`; `handleCanvasChange()` now called explicitly after `element_created`
|
||||
- **Text alignment lost after sync** — `ElementSharedFieldsSchema` did not declare `textAlign`, `verticalAlign`, `containerId`; Zod silently stripped these on every REST round-trip
|
||||
- **Curved arrow deforms after sync** — element replace strategy discarded Excalidraw-internal control point state; now merges incoming over existing
|
||||
- **MCP `import_scene` prototype pollution** — `assertNoDangerousKeys()` now called on all parsed JSON payloads (MCP stdio bypasses Express middleware)
|
||||
- **FTS5 colon column-filter injection** — `:` added to blocked character set in `sanitizeSearchQuery`
|
||||
- **Global state race in `createProject`/`listProjects`** — explicit `tenantId?` param added; MCP callers pass captured ID at call time
|
||||
- Subtitle elements in MCP `create_element` now set `textAlign: "center"` and `verticalAlign: "top"`
|
||||
- `ServerElement` type updated with `textAlign?`, `verticalAlign?`, `containerId?`
|
||||
- `pendingTitleTimerRef` now cleaned up on component unmount (prevented stale closure after unmount)
|
||||
- `localStorage` JSON.parse for widget position wrapped in try/catch (malformed value no longer crashes component)
|
||||
- Docker `LABEL org.opencontainers.image.source` corrected to fork URL
|
||||
|
||||
## [1.0.1] - 2026-03-29
|
||||
|
||||
### Fixed
|
||||
@@ -53,3 +115,22 @@ Format: [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
||||
- `getAllFilesObject()` helper extracted; `sendFilesAdded()` and `GET /api/files` share it
|
||||
- `sendLegacyInitialWsMessages` renamed to `sendAuthlessInitialMessages`
|
||||
- `.project-hooks/pre-commit` added to run vitest on every commit
|
||||
|
||||
## [Unreleased] - 2026-03-30
|
||||
|
||||
### Fixed
|
||||
- Bidirectional sync conflict: WS-applied updates no longer reverted by browser auto-sync (lastSyncedElementsRef now updated on element_updated, element_deleted, elements_batch_created)
|
||||
- Labeled container updates (rectangle, ellipse, diamond, arrow) now use convertToExcalidrawElements with ID transplant for correct text layout instead of in-place text patch that caused clipping
|
||||
- Standalone text element updates now write label.text into text/originalText fields so Excalidraw renders the new value
|
||||
- convertTextToLabel now maps text→label for arrows and empty strings (previously skipped falsy text)
|
||||
|
||||
### Changed
|
||||
- Default theme set to dark
|
||||
|
||||
### Fixed
|
||||
- Labels stored as label.text (e.g. from MCP updates) now survive page refresh — expandLabelsToNative pre-converts them to bound text before Excalidraw renders
|
||||
|
||||
## [1.0.4] - 2026-03-31
|
||||
|
||||
### Fixed
|
||||
- `npm install -g excalidraw-mcp-sentinel` crashed on Windows — `postinstall` script used Unix-only `2>/dev/null || true` syntax which cmd.exe does not support; replaced with a cross-platform `node -e` inline script
|
||||
|
||||
@@ -38,7 +38,7 @@ node dist/server.js
|
||||
curl http://localhost:3000/health
|
||||
```
|
||||
|
||||
369 tests across unit, API, WebSocket, and regression suites. Run `npm test` or `pnpm test`. CI runs `type-check` then `build` then `test` across Node 18/20/22.
|
||||
477 tests across unit, API, WebSocket, e2e, and regression suites. Run `npm test` or `pnpm test`. CI runs `type-check` then `build` then `test` across Node 18/20/22.
|
||||
|
||||
## Architecture
|
||||
|
||||
@@ -112,12 +112,12 @@ Two Dockerfiles: `Dockerfile` (MCP server only), `Dockerfile.canvas` (canvas wit
|
||||
|
||||
### Security posture (as of 1.6.3)
|
||||
- `src/security.ts`: helmet, CORS allowlist, timing-safe API key auth, prototype pollution guard, 3-tier rate limiting, WS challenge-response auth, Mermaid input size cap
|
||||
- 369/369 tests passing; 4 regression tests cover previously crash-able sync paths
|
||||
- 477/477 tests passing; 4 regression tests cover previously crash-able sync paths
|
||||
- Docker: non-root user, resource limits, hardened `.dockerignore`
|
||||
|
||||
### Before running `npm publish`
|
||||
- [ ] Bump `version` in `package.json` to match `CHANGELOG.md` entry (currently `1.0.0`)
|
||||
- [ ] Run `npm test` — must be 369/369
|
||||
- [ ] Bump `version` in `package.json` to match `CHANGELOG.md` entry (currently `1.0.1`)
|
||||
- [ ] Run `npm test` — must be 446/446
|
||||
- [ ] Run `npm run build` — must be zero TS errors
|
||||
- [ ] Run `shipguard scan .` — must be 0 CRITICAL findings
|
||||
- [ ] Verify `CHANGELOG.md` has an entry for the version being published
|
||||
|
||||
+1
-1
@@ -43,6 +43,6 @@ ENV EXCALIDRAW_DB_PATH=/app/data/excalidraw.db
|
||||
|
||||
CMD ["node", "dist/index.js"]
|
||||
|
||||
LABEL org.opencontainers.image.source="https://github.com/sanjibdevnathlabs/mcp-excalidraw-local"
|
||||
LABEL org.opencontainers.image.source="https://github.com/celstnblacc/excalidraw-mcp-sentinel"
|
||||
LABEL org.opencontainers.image.description="MCP Excalidraw Server - Model Context Protocol for AI agents (with SQLite persistence & multi-tenancy)"
|
||||
LABEL org.opencontainers.image.licenses="MIT"
|
||||
|
||||
+1
-1
@@ -61,6 +61,6 @@ EXPOSE 3000
|
||||
|
||||
CMD ["node", "dist/server.js"]
|
||||
|
||||
LABEL org.opencontainers.image.source="https://github.com/sanjibdevnathlabs/mcp-excalidraw-local"
|
||||
LABEL org.opencontainers.image.source="https://github.com/celstnblacc/excalidraw-mcp-sentinel"
|
||||
LABEL org.opencontainers.image.description="MCP Excalidraw Canvas Server - Web UI and REST API (with SQLite persistence & multi-tenancy)"
|
||||
LABEL org.opencontainers.image.licenses="MIT"
|
||||
|
||||
@@ -14,13 +14,13 @@ Run a live Excalidraw canvas and control it from any AI agent. This repo provide
|
||||
- **SQLite Persistence**: Elements survive restarts, with versioning and search
|
||||
- **Multi-Tenancy**: Isolated canvases per workspace, auto-detected
|
||||
- **Security Hardened**: Helmet, rate limiting, API key auth, prototype pollution guard, WS challenge-response
|
||||
- **369 Tests**: Full test coverage across unit, API, WebSocket, and regression tests
|
||||
- **446 Tests**: Full test coverage across unit, API, WebSocket, and regression tests
|
||||
|
||||
## Why this fork?
|
||||
|
||||
Forked from [celstnblacc/excalidraw-mcp-sentinel](https://github.com/celstnblacc/excalidraw-mcp-sentinel) (itself a fork of [yctimlin/mcp_excalidraw](https://github.com/yctimlin/mcp_excalidraw)) with production hardening:
|
||||
|
||||
- **369 tests** (upstream has none) — unit, API, WebSocket, and regression
|
||||
- **446 tests** (upstream has none) — unit, API, WebSocket, and regression
|
||||
- **Security middleware** (`src/security.ts`): helmet, CORS allowlist, timing-safe API key auth, prototype pollution guard, input sanitization
|
||||
- **3-tier rate limiting**: general, destructive, and write-burst ceilings
|
||||
- **WebSocket challenge-response authentication**
|
||||
@@ -66,6 +66,7 @@ Click the workspace badge to switch between isolated canvases — each workspace
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [Known Issues / TODO](#known-issues--todo)
|
||||
- [Development](#development)
|
||||
- [Similar Project Scan](#similar-project-scan)
|
||||
- [Credits](#credits)
|
||||
|
||||
## Prerequisites
|
||||
@@ -689,6 +690,33 @@ npm run build
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Similar Project Scan
|
||||
|
||||
Use the built-in scanner to look for repositories that are architecturally similar to this project. The scan is capability-based, not fork-based: it looks for Excalidraw plus MCP, backend sync, persistence, security, and self-hosting signals.
|
||||
|
||||
Basic run:
|
||||
|
||||
```bash
|
||||
npm run scan:similar-projects
|
||||
```
|
||||
|
||||
Broader competitor scan excluding this repo's direct lineage:
|
||||
|
||||
```bash
|
||||
npm run scan:similar-projects -- \
|
||||
--exclude-repo yctimlin/mcp_excalidraw \
|
||||
--exclude-repo sanjibdevnathlabs/mcp-excalidraw-local \
|
||||
--exclude-repo celstnblacc/excalidraw-mcp-sentinel
|
||||
```
|
||||
|
||||
Outputs are written to `docs/generated/` as both JSON and Markdown reports. For higher GitHub API limits, set `GITHUB_TOKEN` before running the scan.
|
||||
|
||||
> Note: rerun the scan after significant product or architecture changes. The ranking is based on the current shape of this repo, so active work on MCP features, persistence, security, or backend topology can materially change which repos are the closest matches.
|
||||
|
||||
See also:
|
||||
- [Top repo comparison](docs/COMPARISON-excalidraw-top-repos.md)
|
||||
- [Search strategy](docs/GUIDE-excalidraw-similar-project-search.md)
|
||||
|
||||
### Database
|
||||
|
||||
SQLite database: `~/.excalidraw-mcp/excalidraw.db`
|
||||
@@ -725,7 +753,12 @@ The canvas server exposes a REST API alongside the WebSocket interface:
|
||||
| POST | `/api/snapshots` | Save a named snapshot |
|
||||
| GET | `/api/snapshots` | List snapshots |
|
||||
| GET | `/api/snapshots/:name` | Get snapshot by name |
|
||||
| GET | `/api/projects` | List projects for the active tenant |
|
||||
| POST | `/api/projects` | Create a new project |
|
||||
| PUT | `/api/project/active` | Switch the active project |
|
||||
| DELETE | `/api/projects/:id` | Delete a project (cascades elements) |
|
||||
| GET | `/api/tenants` | List all tenants |
|
||||
| DELETE | `/api/tenants/:id` | Delete a tenant (cascades projects and elements) |
|
||||
| GET | `/api/tenant/active` | Get the active tenant |
|
||||
| PUT | `/api/tenant/active` | Set the active tenant |
|
||||
| GET | `/api/settings/:key` | Read a setting |
|
||||
|
||||
@@ -108,6 +108,63 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Widen Excalidraw left properties panel */
|
||||
.App-menu_left .Island {
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
/* Draggable font size widget */
|
||||
.custom-font-size-widget {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
background: var(--island-bg-color, #232329);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
.custom-font-size-widget.dragging {
|
||||
cursor: grabbing;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.custom-font-size-widget label {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
white-space: nowrap;
|
||||
cursor: grab;
|
||||
}
|
||||
.custom-font-size-widget input[type="number"] {
|
||||
width: 52px;
|
||||
padding: 4px 6px;
|
||||
font-size: 13px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
background: #1a1a2e;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: text;
|
||||
}
|
||||
.custom-font-size-widget input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: #4a6cf7;
|
||||
}
|
||||
.custom-font-size-widget button {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: #4a6cf7;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.custom-font-size-widget button:hover {
|
||||
background: #3a5ce5;
|
||||
}
|
||||
|
||||
|
||||
.api-panel {
|
||||
position: fixed;
|
||||
@@ -410,6 +467,111 @@
|
||||
color: #aaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
.project-badge-btn {
|
||||
background: #f3f0ff;
|
||||
border-color: #e5dbff;
|
||||
color: #5f3dc4;
|
||||
}
|
||||
.project-badge-btn:hover {
|
||||
background: #e5dbff;
|
||||
border-color: #d0bfff;
|
||||
}
|
||||
.project-menu-panel {
|
||||
left: 220px;
|
||||
}
|
||||
.menu-create-wrap {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 8px 10px 10px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.menu-create-wrap .menu-search {
|
||||
flex: 1;
|
||||
}
|
||||
.menu-create-btn {
|
||||
padding: 7px 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: #5f3dc4;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.menu-create-btn:hover:not(:disabled) { background: #4c2fa8; }
|
||||
.menu-create-btn:disabled { opacity: 0.5; cursor: default; }
|
||||
.tenant-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.tenant-row:hover .project-delete-btn { opacity: 0.5; }
|
||||
.project-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.project-menu-item {
|
||||
flex: 1;
|
||||
padding-right: 36px;
|
||||
}
|
||||
.project-delete-btn {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.15s, background 0.15s;
|
||||
}
|
||||
.project-row:hover .project-delete-btn { opacity: 0.5; }
|
||||
.project-delete-btn:hover { opacity: 1 !important; background: #fff0f0; }
|
||||
.project-delete-confirm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
background: #fff5f5;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
.project-delete-msg {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #c92a2a;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.project-delete-yes {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #e03131;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.project-delete-yes:hover { background: #c92a2a; }
|
||||
.project-delete-no {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
background: #f1f3f5;
|
||||
color: #495057;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.project-delete-no:hover { background: #dee2e6; }
|
||||
|
||||
/* Clear canvas confirmation dialog */
|
||||
.confirm-dialog {
|
||||
|
||||
+618
-92
@@ -11,14 +11,11 @@ import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement } from
|
||||
import { convertMermaidToExcalidraw, DEFAULT_MERMAID_CONFIG } from './utils/mermaidConverter'
|
||||
import type { MermaidConfig } from '@excalidraw/mermaid-to-excalidraw'
|
||||
import {
|
||||
cleanElementForExcalidraw,
|
||||
validateAndFixBindings,
|
||||
computeElementHash,
|
||||
isImageElement,
|
||||
normalizeImageElement,
|
||||
restoreBindings
|
||||
cleanElementForExcalidraw,
|
||||
} from './utils/elementHelpers'
|
||||
import type { ServerElement } from './utils/elementHelpers'
|
||||
import { convertElementsPreservingImageProps, prepareElementsForScene } from './utils/scenePreparation'
|
||||
|
||||
type ExcalidrawAPIRefValue = ExcalidrawImperativeAPI;
|
||||
|
||||
@@ -77,7 +74,12 @@ function App(): JSX.Element {
|
||||
})
|
||||
const isSyncingRef = useRef<boolean>(false)
|
||||
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
const countdownTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||
const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
const lastChangeTimeRef = useRef<number>(0)
|
||||
const [syncCountdown, setSyncCountdown] = useState<number | null>(null)
|
||||
const lastSyncedHashRef = useRef<string>('')
|
||||
const lastSeenHashRef = useRef<string>('')
|
||||
const lastSyncVersionRef = useRef<number>(
|
||||
parseInt(localStorage.getItem('excalidraw-last-sync-version') ?? '0', 10)
|
||||
)
|
||||
@@ -87,6 +89,34 @@ function App(): JSX.Element {
|
||||
|
||||
const DEBOUNCE_MS = 3000
|
||||
|
||||
// Track known container IDs to auto-inject title on new shapes
|
||||
const knownContainerIdsRef = useRef<Set<string>>(new Set())
|
||||
const CONTAINER_TYPES = new Set(['rectangle', 'ellipse', 'diamond'])
|
||||
|
||||
// Seed knownContainerIdsRef before updateScene to prevent re-injection on load/sync
|
||||
const seedKnownContainers = (elements: readonly { type: string; id: string }[]): void => {
|
||||
for (const el of elements) {
|
||||
if (CONTAINER_TYPES.has(el.type)) {
|
||||
knownContainerIdsRef.current.add(el.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom font size input state
|
||||
const [customFontSize, setCustomFontSize] = useState<string>('')
|
||||
|
||||
// Draggable widget state — default near top menu
|
||||
const [widgetPos, setWidgetPos] = useState<{x: number, y: number}>(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem('font-widget-pos')
|
||||
return saved ? JSON.parse(saved) : { x: window.innerWidth * 0.55, y: 90 }
|
||||
} catch {
|
||||
return { x: window.innerWidth * 0.55, y: 90 }
|
||||
}
|
||||
})
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const dragOffset = useRef<{x: number, y: number}>({x: 0, y: 0})
|
||||
|
||||
// Tenant state
|
||||
const [activeTenant, setActiveTenant] = useState<TenantInfo | null>(null)
|
||||
const activeTenantIdRef = useRef<string | null>(null)
|
||||
@@ -95,6 +125,16 @@ function App(): JSX.Element {
|
||||
const [tenantSearch, setTenantSearch] = useState<string>('')
|
||||
const searchInputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
// Project state
|
||||
const [activeProject, setActiveProject] = useState<{ id: string; name: string } | null>(null)
|
||||
const [projectList, setProjectList] = useState<{ id: string; name: string; description: string | null }[]>([])
|
||||
const [projectMenuOpen, setProjectMenuOpen] = useState<boolean>(false)
|
||||
const [newProjectName, setNewProjectName] = useState<string>('')
|
||||
const [isCreatingProject, setIsCreatingProject] = useState<boolean>(false)
|
||||
const newProjectInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const [confirmDeleteProjectId, setConfirmDeleteProjectId] = useState<string | null>(null)
|
||||
const [confirmDeleteTenantId, setConfirmDeleteTenantId] = useState<string | null>(null)
|
||||
|
||||
// Keep refs in sync so closures (WebSocket handlers) always see latest values
|
||||
useEffect(() => {
|
||||
excalidrawAPIRef.current = excalidrawAPI
|
||||
@@ -150,48 +190,178 @@ function App(): JSX.Element {
|
||||
})
|
||||
}
|
||||
|
||||
// Clean up debounce timer on unmount
|
||||
// Clean up timers on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
|
||||
if (countdownTimerRef.current) clearInterval(countdownTimerRef.current)
|
||||
if (idleTimerRef.current) clearTimeout(idleTimerRef.current)
|
||||
if (pendingTitleTimerRef.current) clearTimeout(pendingTitleTimerRef.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Called on every change. Waits for 400ms of idle before showing the countdown,
|
||||
// so the number only ticks when the user has stopped drawing.
|
||||
const scheduleCountdown = () => {
|
||||
lastChangeTimeRef.current = Date.now()
|
||||
// Reset any pending idle detection
|
||||
if (idleTimerRef.current) clearTimeout(idleTimerRef.current)
|
||||
// Hide countdown while actively drawing
|
||||
if (countdownTimerRef.current) {
|
||||
clearInterval(countdownTimerRef.current)
|
||||
countdownTimerRef.current = null
|
||||
setSyncCountdown(null)
|
||||
}
|
||||
// Start showing countdown only after 400ms of no changes
|
||||
idleTimerRef.current = setTimeout(() => {
|
||||
const deadline = lastChangeTimeRef.current + DEBOUNCE_MS
|
||||
setSyncCountdown(Math.ceil((deadline - Date.now()) / 1000))
|
||||
countdownTimerRef.current = setInterval(() => {
|
||||
const remaining = Math.ceil((lastChangeTimeRef.current + DEBOUNCE_MS - Date.now()) / 1000)
|
||||
if (remaining <= 0) {
|
||||
clearInterval(countdownTimerRef.current!)
|
||||
countdownTimerRef.current = null
|
||||
setSyncCountdown(null)
|
||||
} else {
|
||||
setSyncCountdown(remaining)
|
||||
}
|
||||
}, 200)
|
||||
}, 400)
|
||||
}
|
||||
|
||||
// Apply custom font size to selected elements
|
||||
const applyCustomFontSize = (size: number): void => {
|
||||
const api = excalidrawAPIRef.current
|
||||
if (!api || !size || size < 1) return
|
||||
|
||||
const appState = api.getAppState()
|
||||
const selectedIds = appState.selectedElementIds || {}
|
||||
const scene = api.getSceneElements()
|
||||
const updated = scene.map((el: any) => {
|
||||
if (selectedIds[el.id] && (el.type === 'text' || (el as any).fontSize !== undefined)) {
|
||||
return { ...el, fontSize: size }
|
||||
}
|
||||
return el
|
||||
})
|
||||
api.updateScene({ elements: updated, captureUpdate: CaptureUpdateAction.IMMEDIATELY })
|
||||
}
|
||||
|
||||
// Pending title injection — deferred to avoid updateScene inside onChange
|
||||
const pendingTitleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
// Trailing debounce: resets on every change, fires after user is idle.
|
||||
// Only active when auto-save is on.
|
||||
const handleCanvasChange = (): void => {
|
||||
if (!autoSave) return
|
||||
// Check if elements actually changed — onChange fires for selection/appState too
|
||||
const currentElements = excalidrawAPIRef.current?.getSceneElements()
|
||||
const currentHash = currentElements ? computeElementHash(currentElements) : ''
|
||||
const elementsChanged = currentHash !== lastSeenHashRef.current
|
||||
if (elementsChanged) lastSeenHashRef.current = currentHash
|
||||
|
||||
// Auto-inject title into new containers (rectangle, ellipse, diamond)
|
||||
// Deferred: collect candidates, inject after onChange completes
|
||||
if (pendingTitleTimerRef.current) clearTimeout(pendingTitleTimerRef.current)
|
||||
pendingTitleTimerRef.current = setTimeout(() => {
|
||||
const api = excalidrawAPIRef.current
|
||||
if (!api) return
|
||||
|
||||
const elements = api.getSceneElements()
|
||||
const newContainers: typeof elements[number][] = []
|
||||
|
||||
for (const el of elements) {
|
||||
if (
|
||||
CONTAINER_TYPES.has(el.type) &&
|
||||
!el.isDeleted &&
|
||||
!knownContainerIdsRef.current.has(el.id) &&
|
||||
el.width > 30 && el.height > 30
|
||||
) {
|
||||
const hasBoundText = (el as any).boundElements?.some((b: any) => b.type === 'text')
|
||||
if (!hasBoundText) {
|
||||
newContainers.push(el)
|
||||
}
|
||||
knownContainerIdsRef.current.add(el.id)
|
||||
}
|
||||
}
|
||||
|
||||
if (newContainers.length > 0) {
|
||||
const scene = api.getSceneElements()
|
||||
const updated = [...scene] as any[]
|
||||
|
||||
for (const container of newContainers) {
|
||||
const groupId = `${container.id}_group`
|
||||
const textId = `${container.id}_title`
|
||||
const subtitleId = `${container.id}_subtitle`
|
||||
|
||||
// Center-based positioning — works for all shapes
|
||||
const cx = container.x + container.width / 2
|
||||
const cy = container.y + container.height / 2
|
||||
|
||||
// Title — 15% above center
|
||||
const titleConverted = convertToExcalidrawElements([{
|
||||
type: 'text' as const,
|
||||
id: textId,
|
||||
x: cx,
|
||||
y: cy - container.height * 0.15,
|
||||
text: 'Title',
|
||||
fontSize: 24,
|
||||
fontFamily: 6,
|
||||
textAlign: 'center' as const,
|
||||
strokeColor: '#1e1e1e',
|
||||
}], { regenerateIds: false })
|
||||
const titleText = titleConverted.map((el: any) => ({
|
||||
...el,
|
||||
groupIds: [groupId],
|
||||
}))
|
||||
|
||||
// Subtitle — 10% below center
|
||||
const subtitleConverted = convertToExcalidrawElements([{
|
||||
type: 'text' as const,
|
||||
id: subtitleId,
|
||||
x: cx,
|
||||
y: cy + container.height * 0.10,
|
||||
text: 'Text here',
|
||||
fontSize: 16,
|
||||
fontFamily: 6,
|
||||
textAlign: 'center' as const,
|
||||
strokeColor: '#868e96',
|
||||
}], { regenerateIds: false })
|
||||
const subtitleText = subtitleConverted.map((el: any) => ({
|
||||
...el,
|
||||
groupIds: [groupId],
|
||||
}))
|
||||
|
||||
// Add group to container
|
||||
const idx = updated.findIndex((e: any) => e.id === container.id)
|
||||
if (idx >= 0) {
|
||||
const existingGroups = (updated[idx] as any).groupIds || []
|
||||
updated[idx] = {
|
||||
...updated[idx],
|
||||
groupIds: [...existingGroups, groupId]
|
||||
}
|
||||
}
|
||||
updated.push(...titleText, ...subtitleText)
|
||||
}
|
||||
|
||||
api.updateScene({ elements: updated, captureUpdate: CaptureUpdateAction.IMMEDIATELY })
|
||||
}
|
||||
}, 300) // 300ms delay — fires after drawing finishes
|
||||
|
||||
if (!autoSave || !elementsChanged) return
|
||||
|
||||
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
|
||||
scheduleCountdown()
|
||||
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
if (!excalidrawAPI || isSyncingRef.current) return
|
||||
|
||||
const elements = excalidrawAPI.getSceneElements()
|
||||
const hash = computeElementHash(elements)
|
||||
const currentElements = excalidrawAPI.getSceneElements()
|
||||
const hash = computeElementHash(currentElements)
|
||||
if (hash === lastSyncedHashRef.current) return
|
||||
|
||||
syncToBackend()
|
||||
}, DEBOUNCE_MS)
|
||||
}
|
||||
|
||||
const convertElementsPreservingImageProps = (
|
||||
cleanedElements: any[]
|
||||
): any[] => {
|
||||
const imageElements = cleanedElements.filter(isImageElement)
|
||||
const nonImageElements = cleanedElements.filter(el => !isImageElement(el))
|
||||
|
||||
let convertedNonImage: any[] = []
|
||||
if (nonImageElements.length > 0) {
|
||||
convertedNonImage = convertToExcalidrawElements(nonImageElements, { regenerateIds: false }) as any[]
|
||||
convertedNonImage = restoreBindings(convertedNonImage, nonImageElements)
|
||||
}
|
||||
|
||||
const normalizedImages = imageElements.map(normalizeImageElement)
|
||||
|
||||
return [...convertedNonImage, ...normalizedImages]
|
||||
}
|
||||
|
||||
const loadExistingElements = async (): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch('/api/elements', { headers: tenantHeaders() })
|
||||
@@ -203,15 +373,13 @@ function App(): JSX.Element {
|
||||
lastSyncedElementsRef.current = new Map()
|
||||
return
|
||||
}
|
||||
const cleanedElements = result.elements.map(cleanElementForExcalidraw)
|
||||
const hasNativeFormat = cleanedElements.some((el: any) => el.containerId)
|
||||
if (hasNativeFormat) {
|
||||
const validated = validateAndFixBindings(cleanedElements)
|
||||
excalidrawAPI?.updateScene({ elements: validated as any })
|
||||
} else {
|
||||
const convertedElements = convertElementsPreservingImageProps(cleanedElements)
|
||||
excalidrawAPI?.updateScene({ elements: convertedElements })
|
||||
}
|
||||
|
||||
const finalElements = prepareElementsForScene(result.elements, convertToExcalidrawElements as any)
|
||||
|
||||
// Seed known containers BEFORE updateScene so onChange doesn't re-inject titles
|
||||
seedKnownContainers(finalElements)
|
||||
|
||||
excalidrawAPI?.updateScene({ elements: finalElements })
|
||||
|
||||
// Populate sync baseline so deletions are detected on next sync
|
||||
const baselineMap = new Map<string, ServerElement>()
|
||||
@@ -258,7 +426,9 @@ function App(): JSX.Element {
|
||||
if (!reconnectEnabledRef.current) {
|
||||
return
|
||||
}
|
||||
if (websocketRef.current && websocketRef.current.readyState === WebSocket.OPEN) {
|
||||
if (websocketRef.current &&
|
||||
(websocketRef.current.readyState === WebSocket.OPEN ||
|
||||
websocketRef.current.readyState === WebSocket.CONNECTING)) {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -340,13 +510,17 @@ function App(): JSX.Element {
|
||||
if (sc.action === 'delete') {
|
||||
merged = merged.filter(el => el.id !== sc.id)
|
||||
} else if (sc.element) {
|
||||
const cleaned = cleanElementForExcalidraw(sc.element)
|
||||
const converted = convertToExcalidrawElements([cleaned], { regenerateIds: false })
|
||||
const preparedIncoming = prepareElementsForScene([sc.element], convertToExcalidrawElements as any)
|
||||
const incoming = preparedIncoming[0] as any | undefined
|
||||
const idx = merged.findIndex(el => el.id === sc.id)
|
||||
if (!incoming) {
|
||||
continue
|
||||
}
|
||||
if (idx >= 0) {
|
||||
merged[idx] = converted[0]!
|
||||
// Merge to preserve local Excalidraw internals needed for point editing.
|
||||
merged[idx] = { ...merged[idx], ...incoming } as any
|
||||
} else {
|
||||
merged.push(...converted)
|
||||
merged.push(...preparedIncoming)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -394,6 +568,20 @@ function App(): JSX.Element {
|
||||
}
|
||||
return
|
||||
|
||||
case 'project_switched': {
|
||||
console.log('Project switched:', data.projectId, data.projectName)
|
||||
const api = excalidrawAPIRef.current
|
||||
if (!api) return
|
||||
api.updateScene({
|
||||
elements: [],
|
||||
captureUpdate: CaptureUpdateAction.NEVER
|
||||
})
|
||||
lastSyncedHashRef.current = ''
|
||||
lastSyncedElementsRef.current = new Map()
|
||||
loadExistingElements()
|
||||
return
|
||||
}
|
||||
|
||||
case 'tenant_switched': {
|
||||
console.log('Tenant switched:', data.tenant)
|
||||
if (!data.tenant) return
|
||||
@@ -425,16 +613,18 @@ function App(): JSX.Element {
|
||||
} else if (typeof data.tenantId === 'string') {
|
||||
activeTenantIdRef.current = data.tenantId
|
||||
}
|
||||
// Seed active project from hello_ack
|
||||
fetchProjects()
|
||||
|
||||
const api = excalidrawAPIRef.current
|
||||
if (!api) return
|
||||
|
||||
if (Array.isArray(data.elements) && data.elements.length > 0) {
|
||||
const cleanedElements = data.elements.map(cleanElementForExcalidraw)
|
||||
const validatedElements = validateAndFixBindings(cleanedElements)
|
||||
const convertedElements = convertElementsPreservingImageProps(validatedElements)
|
||||
const finalElements = prepareElementsForScene(data.elements, convertToExcalidrawElements as any)
|
||||
// Seed known containers before updateScene
|
||||
seedKnownContainers(finalElements)
|
||||
api.updateScene({
|
||||
elements: convertedElements,
|
||||
elements: finalElements,
|
||||
captureUpdate: CaptureUpdateAction.NEVER
|
||||
})
|
||||
const helloBaseline = new Map<string, any>()
|
||||
@@ -477,11 +667,10 @@ function App(): JSX.Element {
|
||||
switch (data.type) {
|
||||
case 'initial_elements':
|
||||
if (data.elements && data.elements.length > 0) {
|
||||
const cleanedElements = data.elements.map(cleanElementForExcalidraw)
|
||||
const validatedElements = validateAndFixBindings(cleanedElements)
|
||||
const convertedElements = convertElementsPreservingImageProps(validatedElements)
|
||||
const initFinalElements = prepareElementsForScene(data.elements, convertToExcalidrawElements as any)
|
||||
seedKnownContainers(initFinalElements)
|
||||
api.updateScene({
|
||||
elements: convertedElements,
|
||||
elements: initFinalElements,
|
||||
captureUpdate: CaptureUpdateAction.NEVER
|
||||
})
|
||||
// Update sync baseline for deletion detection
|
||||
@@ -512,6 +701,10 @@ function App(): JSX.Element {
|
||||
captureUpdate: CaptureUpdateAction.NEVER
|
||||
})
|
||||
}
|
||||
// CaptureUpdateAction.NEVER does not trigger the onChange callback, so
|
||||
// title injection (handleCanvasChange) won't fire automatically. Call it
|
||||
// explicitly so new container elements get their Title/subtitle text.
|
||||
handleCanvasChange()
|
||||
const scene = api.getSceneElements()
|
||||
const landed = scene.some(s => s.id === data.element!.id)
|
||||
sendAck(data.msgId, landed ? 'applied' : 'failed', landed ? 1 : 0, 1)
|
||||
@@ -521,14 +714,68 @@ function App(): JSX.Element {
|
||||
case 'element_updated':
|
||||
if (data.element) {
|
||||
const cleanedUpdatedElement = cleanElementForExcalidraw(data.element)
|
||||
const convertedUpdatedElement = convertToExcalidrawElements([cleanedUpdatedElement], { regenerateIds: false })[0]
|
||||
const updatedElements = currentElements.map(el =>
|
||||
el.id === data.element!.id ? convertedUpdatedElement : el
|
||||
)
|
||||
const newLabelText = data.element.label?.text
|
||||
const isLabeledContainer = newLabelText !== undefined &&
|
||||
['rectangle', 'ellipse', 'diamond', 'arrow'].includes(data.element.type)
|
||||
const isTextElement = data.element.type === 'text'
|
||||
|
||||
let updatedElements: any[]
|
||||
|
||||
if (isLabeledContainer) {
|
||||
// Use convertToExcalidrawElements for correct text layout/metrics, but
|
||||
// transplant the existing bound text element's ID so Excalidraw's internal
|
||||
// state stays coherent (avoids orphan references and text clipping).
|
||||
const existingBoundText = currentElements.find(
|
||||
el => (el as any).containerId === data.element!.id
|
||||
)
|
||||
const convertedAll = convertToExcalidrawElements([cleanedUpdatedElement], { regenerateIds: false })
|
||||
const convertedContainer = convertedAll[0] as any
|
||||
const convertedBoundText = (convertedAll[1] ?? null) as any
|
||||
|
||||
if (existingBoundText && convertedBoundText) {
|
||||
// Transplant existing bound text ID so container → text link is stable
|
||||
const patchedBoundText = { ...convertedBoundText, id: (existingBoundText as any).id }
|
||||
const patchedContainer = {
|
||||
...convertedContainer,
|
||||
boundElements: [{ id: (existingBoundText as any).id, type: 'text' }]
|
||||
}
|
||||
updatedElements = [
|
||||
...currentElements.filter(el => el.id !== data.element!.id && el.id !== (existingBoundText as any).id),
|
||||
patchedContainer,
|
||||
patchedBoundText
|
||||
]
|
||||
} else {
|
||||
// No existing bound text — use converted result as-is
|
||||
updatedElements = [
|
||||
...currentElements.filter(el => el.id !== data.element!.id && (el as any).containerId !== data.element!.id),
|
||||
...(convertedBoundText ? [convertedContainer, convertedBoundText] : [convertedContainer])
|
||||
]
|
||||
}
|
||||
} else if (isTextElement) {
|
||||
// For standalone text elements: write label.text into the text field
|
||||
const textValue = newLabelText ?? (data.element as any).text ?? ''
|
||||
updatedElements = currentElements.map(el =>
|
||||
el.id === data.element!.id
|
||||
? { ...(el as any), ...cleanedUpdatedElement, text: textValue, originalText: textValue }
|
||||
: el
|
||||
)
|
||||
} else {
|
||||
// Generic element (arrows, etc.)
|
||||
const preparedUpdated = prepareElementsForScene([data.element], convertToExcalidrawElements as any)
|
||||
const nextUpdatedElement = (preparedUpdated[0] ?? cleanedUpdatedElement) as any
|
||||
updatedElements = currentElements
|
||||
.filter(el => (el as any).containerId !== data.element!.id)
|
||||
.map(el => el.id === data.element!.id ? { ...(el as any), ...nextUpdatedElement } : el)
|
||||
}
|
||||
|
||||
api.updateScene({
|
||||
elements: updatedElements,
|
||||
captureUpdate: CaptureUpdateAction.NEVER
|
||||
})
|
||||
// Update sync baseline so auto-sync doesn't overwrite this WS-applied change
|
||||
const wsUpdatedBaseline = new Map(lastSyncedElementsRef.current)
|
||||
wsUpdatedBaseline.set(data.element.id, data.element)
|
||||
lastSyncedElementsRef.current = wsUpdatedBaseline
|
||||
sendAck(data.msgId, 'applied', 1, 1)
|
||||
}
|
||||
break
|
||||
@@ -540,6 +787,10 @@ function App(): JSX.Element {
|
||||
elements: filteredElements,
|
||||
captureUpdate: CaptureUpdateAction.NEVER
|
||||
})
|
||||
// Remove from sync baseline so auto-sync doesn't re-create it
|
||||
const wsDeletedBaseline = new Map(lastSyncedElementsRef.current)
|
||||
wsDeletedBaseline.delete(data.elementId)
|
||||
lastSyncedElementsRef.current = wsDeletedBaseline
|
||||
sendAck(data.msgId, 'applied', 1, 1)
|
||||
}
|
||||
break
|
||||
@@ -550,13 +801,13 @@ function App(): JSX.Element {
|
||||
const hasBoundArrows = cleanedBatchElements.some((el: any) => el.start || el.end)
|
||||
if (hasBoundArrows) {
|
||||
const allElements = [...currentElements, ...cleanedBatchElements] as any[]
|
||||
const convertedAll = convertElementsPreservingImageProps(allElements)
|
||||
const convertedAll = convertElementsPreservingImageProps(allElements, convertToExcalidrawElements as any)
|
||||
api.updateScene({
|
||||
elements: convertedAll,
|
||||
captureUpdate: CaptureUpdateAction.NEVER
|
||||
})
|
||||
} else {
|
||||
const batchElements = convertElementsPreservingImageProps(cleanedBatchElements)
|
||||
const batchElements = convertElementsPreservingImageProps(cleanedBatchElements, convertToExcalidrawElements as any)
|
||||
const updatedElementsAfterBatch = [...currentElements, ...batchElements]
|
||||
api.updateScene({
|
||||
elements: updatedElementsAfterBatch,
|
||||
@@ -568,6 +819,12 @@ function App(): JSX.Element {
|
||||
const expectedIds = data.elements.map((e: ServerElement) => e.id)
|
||||
const landedCount = expectedIds.filter(id => scene.some(s => s.id === id)).length
|
||||
const status = landedCount === expectedIds.length ? 'applied' : landedCount > 0 ? 'partial' : 'failed'
|
||||
// Update sync baseline so auto-sync doesn't treat these as new local changes
|
||||
const wsBatchBaseline = new Map(lastSyncedElementsRef.current)
|
||||
for (const el of data.elements) {
|
||||
wsBatchBaseline.set(el.id, el)
|
||||
}
|
||||
lastSyncedElementsRef.current = wsBatchBaseline
|
||||
sendAck(data.msgId, status, landedCount, expectedIds.length)
|
||||
}
|
||||
break
|
||||
@@ -847,18 +1104,14 @@ function App(): JSX.Element {
|
||||
|
||||
const result: ServerElement[] = []
|
||||
for (const el of elements) {
|
||||
if (boundTextIds.has(el.id)) continue // skip bound text — merged into container
|
||||
|
||||
// Keep bound text elements as-is — store native Excalidraw format
|
||||
// so x/y/width/height survive round-trips without recalculation
|
||||
const out: any = { ...el }
|
||||
|
||||
// If this container has bound text, put it back as label.text
|
||||
const merged = containerTextMap.get(el.id)
|
||||
if (merged && merged.text) {
|
||||
out.label = { text: merged.text }
|
||||
if (merged.fontSize) out.fontSize = merged.fontSize
|
||||
if (merged.fontFamily) out.fontFamily = merged.fontFamily
|
||||
// Clean up Excalidraw-internal binding metadata
|
||||
delete out.boundElements
|
||||
// Strip label.text from containers that have native bound text,
|
||||
// so the load path doesn't double-create text elements
|
||||
if (containerTextMap.has(el.id)) {
|
||||
delete out.label
|
||||
}
|
||||
|
||||
// Normalize arrow bindings from Excalidraw format back to MCP format
|
||||
@@ -935,15 +1188,9 @@ function App(): JSX.Element {
|
||||
})
|
||||
const result: ApiResponse = await elemRes.json()
|
||||
if (result.success && result.elements && result.elements.length > 0) {
|
||||
const cleanedElements = result.elements.map(cleanElementForExcalidraw)
|
||||
const hasNativeFormat = cleanedElements.some((el: any) => el.containerId)
|
||||
if (hasNativeFormat) {
|
||||
const validated = validateAndFixBindings(cleanedElements)
|
||||
excalidrawAPI?.updateScene({ elements: validated as any })
|
||||
} else {
|
||||
const convertedElements = convertToExcalidrawElements(cleanedElements, { regenerateIds: false })
|
||||
excalidrawAPI?.updateScene({ elements: convertedElements })
|
||||
}
|
||||
const switchedElements = prepareElementsForScene(result.elements, convertToExcalidrawElements as any)
|
||||
seedKnownContainers(switchedElements)
|
||||
excalidrawAPI?.updateScene({ elements: switchedElements })
|
||||
}
|
||||
|
||||
showToast('Workspace switched')
|
||||
@@ -952,11 +1199,140 @@ function App(): JSX.Element {
|
||||
}
|
||||
}
|
||||
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/projects', { headers: tenantHeaders() })
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
setProjectList(data.projects)
|
||||
const active = data.projects.find((p: any) => p.id === data.activeProjectId)
|
||||
if (active) setActiveProject({ id: active.id, name: active.name })
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch projects:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const switchProjectUI = async (projectId: string) => {
|
||||
if (projectId === activeProject?.id) {
|
||||
setProjectMenuOpen(false)
|
||||
return
|
||||
}
|
||||
// Cancel pending timers
|
||||
if (debounceTimerRef.current) { clearTimeout(debounceTimerRef.current); debounceTimerRef.current = null }
|
||||
if (idleTimerRef.current) { clearTimeout(idleTimerRef.current); idleTimerRef.current = null }
|
||||
if (countdownTimerRef.current) { clearInterval(countdownTimerRef.current); countdownTimerRef.current = null }
|
||||
setSyncCountdown(null)
|
||||
// Auto-save current project before switching
|
||||
if (excalidrawAPIRef.current && !isSyncingRef.current) {
|
||||
const currentElements = excalidrawAPIRef.current.getSceneElements()
|
||||
const currentHash = computeElementHash(currentElements)
|
||||
if (currentHash !== lastSyncedHashRef.current) {
|
||||
await syncToBackend()
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await fetch('/api/project/active', {
|
||||
method: 'PUT',
|
||||
headers: tenantHeaders(),
|
||||
body: JSON.stringify({ projectId })
|
||||
})
|
||||
if (!res.ok) return
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
setActiveProject({ id: data.project.id, name: data.project.name })
|
||||
setProjectMenuOpen(false)
|
||||
// Clear canvas and load the new project's elements directly
|
||||
// (don't rely on WS roundtrip which can race)
|
||||
const api = excalidrawAPIRef.current
|
||||
if (api) {
|
||||
api.updateScene({ elements: [], captureUpdate: CaptureUpdateAction.NEVER })
|
||||
lastSyncedHashRef.current = ''
|
||||
lastSeenHashRef.current = ''
|
||||
lastSyncedElementsRef.current = new Map()
|
||||
}
|
||||
await loadExistingElements()
|
||||
showToast(`Switched to "${data.project.name}"`)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to switch project:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const createProjectUI = async () => {
|
||||
const name = newProjectName.trim()
|
||||
if (!name) return
|
||||
setIsCreatingProject(true)
|
||||
try {
|
||||
const res = await fetch('/api/projects', {
|
||||
method: 'POST',
|
||||
headers: tenantHeaders(),
|
||||
body: JSON.stringify({ name })
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
setNewProjectName('')
|
||||
await fetchProjects()
|
||||
await switchProjectUI(data.project.id)
|
||||
showToast(`Project "${name}" created`)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to create project:', err)
|
||||
} finally {
|
||||
setIsCreatingProject(false)
|
||||
}
|
||||
}
|
||||
|
||||
const deleteProjectUI = async (projectId: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}`, {
|
||||
method: 'DELETE',
|
||||
headers: tenantHeaders()
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
setConfirmDeleteProjectId(null)
|
||||
await fetchProjects()
|
||||
showToast('Project deleted')
|
||||
} else {
|
||||
showToast(data.error ?? 'Delete failed', 4000)
|
||||
setConfirmDeleteProjectId(null)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to delete project:', err)
|
||||
setConfirmDeleteProjectId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const deleteTenantUI = async (tenantId: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/tenants/${tenantId}`, {
|
||||
method: 'DELETE',
|
||||
headers: tenantHeaders()
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
setConfirmDeleteTenantId(null)
|
||||
setTenantList(prev => prev.filter(t => t.id !== tenantId))
|
||||
showToast('Workspace deleted')
|
||||
} else {
|
||||
showToast(data.error ?? 'Delete failed', 4000)
|
||||
setConfirmDeleteTenantId(null)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to delete tenant:', err)
|
||||
setConfirmDeleteTenantId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const syncToBackend = async (): Promise<void> => {
|
||||
if (!excalidrawAPI || isSyncingRef.current) return
|
||||
|
||||
isSyncingRef.current = true
|
||||
setSyncStatus('syncing')
|
||||
if (idleTimerRef.current) { clearTimeout(idleTimerRef.current); idleTimerRef.current = null }
|
||||
if (countdownTimerRef.current) { clearInterval(countdownTimerRef.current); countdownTimerRef.current = null }
|
||||
setSyncCountdown(null)
|
||||
|
||||
try {
|
||||
const currentElements = excalidrawAPI.getSceneElements()
|
||||
@@ -1006,13 +1382,19 @@ function App(): JSX.Element {
|
||||
if (sc.action === 'delete') {
|
||||
merged = merged.filter(el => el.id !== sc.id)
|
||||
} else if (sc.element) {
|
||||
const cleaned = cleanElementForExcalidraw(sc.element)
|
||||
const converted = convertToExcalidrawElements([cleaned], { regenerateIds: false })
|
||||
const preparedIncoming = prepareElementsForScene([sc.element], convertToExcalidrawElements as any)
|
||||
const incoming = preparedIncoming[0] as any | undefined
|
||||
const idx = merged.findIndex(el => el.id === sc.id)
|
||||
if (!incoming) continue
|
||||
|
||||
if (idx >= 0) {
|
||||
merged[idx] = converted[0]!
|
||||
// Existing element: spread-merge to preserve geometry and
|
||||
// Excalidraw internals (seed, version, versionNonce)
|
||||
merged[idx] = { ...merged[idx], ...incoming } as any
|
||||
} else {
|
||||
merged.push(...converted)
|
||||
// New element from MCP/other tab: native browser elements pass through,
|
||||
// MCP stubs get converted by prepareElementsForScene.
|
||||
merged.push(...preparedIncoming)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1132,6 +1514,20 @@ function App(): JSX.Element {
|
||||
<span className="tenant-label">Workspace:</span> {activeTenant.name} ▾
|
||||
</button>
|
||||
)}
|
||||
{activeProject && (
|
||||
<button
|
||||
className="tenant-badge-btn project-badge-btn"
|
||||
onClick={() => {
|
||||
setProjectMenuOpen(o => {
|
||||
if (!o) fetchProjects()
|
||||
return !o
|
||||
})
|
||||
}}
|
||||
title="Switch or create project"
|
||||
>
|
||||
<span className="tenant-label">Project:</span> {activeProject.name} ▾
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{toast && <div className="toast">{toast}</div>}
|
||||
@@ -1148,7 +1544,11 @@ function App(): JSX.Element {
|
||||
onClick={syncToBackend}
|
||||
disabled={syncStatus === 'syncing' || !excalidrawAPI}
|
||||
>
|
||||
{syncStatus === 'syncing' ? 'Syncing...' : 'Sync'}
|
||||
{syncStatus === 'syncing'
|
||||
? 'Syncing...'
|
||||
: syncCountdown !== null
|
||||
? `Sync in ${syncCountdown}s`
|
||||
: 'Sync'}
|
||||
</button>
|
||||
<button
|
||||
className="btn-group-item"
|
||||
@@ -1185,19 +1585,37 @@ function App(): JSX.Element {
|
||||
</div>
|
||||
<div className="menu-list">
|
||||
{filtered.map(t => (
|
||||
<button
|
||||
key={t.id}
|
||||
className={`menu-item ${activeTenant?.id === t.id ? 'menu-item-active' : ''}`}
|
||||
onClick={() => switchTenant(t.id)}
|
||||
>
|
||||
<span className="menu-item-name">{t.name}</span>
|
||||
<span className="menu-item-path" title={t.workspace_path}>
|
||||
{t.workspace_path.length > 40
|
||||
? '...' + t.workspace_path.slice(-37)
|
||||
: t.workspace_path}
|
||||
</span>
|
||||
{activeTenant?.id === t.id && <span className="menu-item-check">✓</span>}
|
||||
</button>
|
||||
<div key={t.id} className="tenant-row">
|
||||
{confirmDeleteTenantId === t.id ? (
|
||||
<div className="project-delete-confirm">
|
||||
<span className="project-delete-msg">Delete "{t.name}"?</span>
|
||||
<button className="project-delete-yes" onClick={() => deleteTenantUI(t.id)}>Delete</button>
|
||||
<button className="project-delete-no" onClick={() => setConfirmDeleteTenantId(null)}>Cancel</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className={`menu-item ${activeTenant?.id === t.id ? 'menu-item-active' : ''}`}
|
||||
onClick={() => switchTenant(t.id)}
|
||||
>
|
||||
<span className="menu-item-name">{t.name}</span>
|
||||
<span className="menu-item-path" title={t.workspace_path}>
|
||||
{t.workspace_path.length > 40
|
||||
? '...' + t.workspace_path.slice(-37)
|
||||
: t.workspace_path}
|
||||
</span>
|
||||
{activeTenant?.id === t.id && <span className="menu-item-check">✓</span>}
|
||||
</button>
|
||||
{activeTenant?.id !== t.id && (
|
||||
<button
|
||||
className="project-delete-btn"
|
||||
title="Delete workspace"
|
||||
onClick={e => { e.stopPropagation(); setConfirmDeleteTenantId(t.id) }}
|
||||
>×</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{filtered.length === 0 && <div className="menu-empty">No matching workspaces</div>}
|
||||
</div>
|
||||
@@ -1206,6 +1624,67 @@ function App(): JSX.Element {
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* Project menu overlay */}
|
||||
{projectMenuOpen && (
|
||||
<div className="menu-overlay" onClick={() => setProjectMenuOpen(false)}>
|
||||
<div className="menu-panel project-menu-panel" onClick={e => e.stopPropagation()}>
|
||||
<div className="menu-header">Projects</div>
|
||||
<div className="menu-list">
|
||||
{projectList.map(p => (
|
||||
<div key={p.id} className="project-row">
|
||||
{confirmDeleteProjectId === p.id ? (
|
||||
<div className="project-delete-confirm">
|
||||
<span className="project-delete-msg">Delete "{p.name}"?</span>
|
||||
<button className="project-delete-yes" onClick={() => deleteProjectUI(p.id)}>Delete</button>
|
||||
<button className="project-delete-no" onClick={() => setConfirmDeleteProjectId(null)}>Cancel</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className={`menu-item project-menu-item ${activeProject?.id === p.id ? 'menu-item-active' : ''}`}
|
||||
onClick={() => switchProjectUI(p.id)}
|
||||
>
|
||||
<span className="menu-item-name">{p.name}</span>
|
||||
{p.description && <span className="menu-item-path">{p.description}</span>}
|
||||
{activeProject?.id === p.id && <span className="menu-item-check">✓</span>}
|
||||
</button>
|
||||
{activeProject?.id !== p.id && projectList.length > 1 && (
|
||||
<button
|
||||
className="project-delete-btn"
|
||||
title="Delete project"
|
||||
onClick={e => { e.stopPropagation(); setConfirmDeleteProjectId(p.id) }}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{projectList.length === 0 && <div className="menu-empty">No projects yet</div>}
|
||||
</div>
|
||||
<div className="menu-create-wrap">
|
||||
<input
|
||||
ref={newProjectInputRef}
|
||||
className="menu-search"
|
||||
type="text"
|
||||
placeholder="New project name..."
|
||||
value={newProjectName}
|
||||
onChange={e => setNewProjectName(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') createProjectUI() }}
|
||||
/>
|
||||
<button
|
||||
className="menu-create-btn"
|
||||
onClick={createProjectUI}
|
||||
disabled={!newProjectName.trim() || isCreatingProject}
|
||||
>
|
||||
{isCreatingProject ? '...' : '+ Create'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Clear canvas confirmation modal (UI button only) */}
|
||||
{showClearConfirm && (
|
||||
<div className="menu-overlay" onClick={() => setShowClearConfirm(false)}>
|
||||
@@ -1228,6 +1707,53 @@ function App(): JSX.Element {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Draggable font size widget */}
|
||||
<div
|
||||
className={`custom-font-size-widget${isDragging ? ' dragging' : ''}`}
|
||||
style={{ left: widgetPos.x, top: widgetPos.y }}
|
||||
onMouseDown={e => {
|
||||
// Don't drag when clicking input or button
|
||||
if ((e.target as HTMLElement).tagName === 'INPUT' || (e.target as HTMLElement).tagName === 'BUTTON') return
|
||||
setIsDragging(true)
|
||||
dragOffset.current = { x: e.clientX - widgetPos.x, y: e.clientY - widgetPos.y }
|
||||
const onMove = (ev: MouseEvent) => {
|
||||
const newPos = { x: ev.clientX - dragOffset.current.x, y: ev.clientY - dragOffset.current.y }
|
||||
setWidgetPos(newPos)
|
||||
}
|
||||
const onUp = () => {
|
||||
setIsDragging(false)
|
||||
setWidgetPos(prev => {
|
||||
localStorage.setItem('font-widget-pos', JSON.stringify(prev))
|
||||
return prev
|
||||
})
|
||||
window.removeEventListener('mousemove', onMove)
|
||||
window.removeEventListener('mouseup', onUp)
|
||||
}
|
||||
window.addEventListener('mousemove', onMove)
|
||||
window.addEventListener('mouseup', onUp)
|
||||
}}
|
||||
>
|
||||
<label>Font px</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="200"
|
||||
placeholder="size"
|
||||
value={customFontSize}
|
||||
onChange={e => setCustomFontSize(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter') {
|
||||
const size = parseInt(customFontSize, 10)
|
||||
if (size > 0) applyCustomFontSize(size)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button onClick={() => {
|
||||
const size = parseInt(customFontSize, 10)
|
||||
if (size > 0) applyCustomFontSize(size)
|
||||
}}>Set</button>
|
||||
</div>
|
||||
|
||||
{/* Canvas Container */}
|
||||
<div className="canvas-container">
|
||||
<Excalidraw
|
||||
@@ -1235,7 +1761,7 @@ function App(): JSX.Element {
|
||||
initialData={{
|
||||
elements: [],
|
||||
appState: {
|
||||
theme: 'light',
|
||||
theme: 'dark',
|
||||
viewBackgroundColor: '#ffffff'
|
||||
}
|
||||
}}
|
||||
|
||||
@@ -42,7 +42,9 @@ export const cleanElementForExcalidraw = (element: ServerElement): Partial<Excal
|
||||
const {
|
||||
createdAt,
|
||||
updatedAt,
|
||||
version,
|
||||
// version is intentionally NOT stripped — it is the Excalidraw element version,
|
||||
// preserved so browser-synced elements reload at their correct state without
|
||||
// triggering convertToExcalidrawElements metric recalculation.
|
||||
syncedAt,
|
||||
source,
|
||||
syncTimestamp,
|
||||
@@ -155,9 +157,12 @@ export const restoreBindings = (
|
||||
|
||||
export const computeElementHash = (elements: readonly { id: string; version: number }[]): string => {
|
||||
let h = String(elements.length);
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
h += elements[i]!.id;
|
||||
h += elements[i]!.version;
|
||||
const pairs = elements
|
||||
.map((element) => `${element.id}:${element.version}`)
|
||||
.sort();
|
||||
|
||||
for (let i = 0; i < pairs.length; i++) {
|
||||
h += pairs[i]!;
|
||||
}
|
||||
return h;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types';
|
||||
import {
|
||||
cleanElementForExcalidraw,
|
||||
isImageElement,
|
||||
normalizeImageElement,
|
||||
restoreBindings,
|
||||
validateAndFixBindings,
|
||||
} from './elementHelpers';
|
||||
import type { ServerElement } from './elementHelpers';
|
||||
|
||||
type SceneConverter = (
|
||||
elements: readonly any[],
|
||||
options?: { regenerateIds?: boolean }
|
||||
) => Partial<ExcalidrawElement>[];
|
||||
|
||||
const LABEL_TYPES = new Set(['rectangle', 'ellipse', 'diamond', 'arrow']);
|
||||
|
||||
export function convertElementsPreservingImageProps(
|
||||
cleanedElements: any[],
|
||||
converter: SceneConverter
|
||||
): any[] {
|
||||
const imageElements = cleanedElements.filter(isImageElement);
|
||||
const nonImageElements = cleanedElements.filter(el => !isImageElement(el));
|
||||
|
||||
let convertedNonImage: any[] = [];
|
||||
if (nonImageElements.length > 0) {
|
||||
convertedNonImage = converter(nonImageElements, { regenerateIds: false }) as any[];
|
||||
convertedNonImage = restoreBindings(convertedNonImage, nonImageElements);
|
||||
}
|
||||
|
||||
const normalizedImages = imageElements.map(normalizeImageElement);
|
||||
return [...convertedNonImage, ...normalizedImages];
|
||||
}
|
||||
|
||||
// Expand server-format label.text into native Excalidraw bound text elements.
|
||||
// Without this, labels stored as label.text on containers vanish on page reload
|
||||
// because convertToExcalidrawElements silently drops them.
|
||||
export function expandLabelsToNative(elements: any[]): any[] {
|
||||
const expanded: any[] = [];
|
||||
for (const el of elements) {
|
||||
if (el.label?.text && LABEL_TYPES.has(el.type)) {
|
||||
const boundTextId = `${el.id}_label`;
|
||||
const { label, ...rest } = el;
|
||||
const existingBindings = (rest.boundElements || []).filter((b: any) => b.type !== 'text');
|
||||
expanded.push({
|
||||
...rest,
|
||||
boundElements: [...existingBindings, { id: boundTextId, type: 'text' }]
|
||||
});
|
||||
expanded.push({
|
||||
id: boundTextId, type: 'text', containerId: el.id,
|
||||
x: (el.x ?? 0) + ((el.width ?? 100) / 2) - 20,
|
||||
y: (el.y ?? 0) + ((el.height ?? 40) / 2) - 10,
|
||||
width: el.width ?? 100, height: 25, angle: 0,
|
||||
text: label.text, originalText: label.text,
|
||||
fontSize: el.fontSize ?? 20, fontFamily: el.fontFamily ?? 5,
|
||||
textAlign: 'center', verticalAlign: 'middle',
|
||||
strokeColor: el.strokeColor ?? '#1e1e1e',
|
||||
backgroundColor: 'transparent', fillStyle: 'solid',
|
||||
strokeWidth: 1, strokeStyle: 'solid',
|
||||
roughness: el.roughness ?? 1, opacity: el.opacity ?? 100,
|
||||
groupIds: [], roundness: null, isDeleted: false,
|
||||
autoResize: true, lineHeight: 1.25,
|
||||
});
|
||||
} else {
|
||||
expanded.push(el);
|
||||
}
|
||||
}
|
||||
return expanded;
|
||||
}
|
||||
|
||||
// Prepare DB elements for the Excalidraw scene.
|
||||
// Browser-synced elements (have seed + versionNonce) load as-is — no metric
|
||||
// recalculation, no position drift. MCP-created stubs (no internals) are
|
||||
// expanded from label.text and converted to get proper Excalidraw internals.
|
||||
export function prepareElementsForScene(
|
||||
rawElements: ServerElement[],
|
||||
converter: SceneConverter
|
||||
): any[] {
|
||||
const cleaned = rawElements.map(cleanElementForExcalidraw);
|
||||
const expanded = expandLabelsToNative(cleaned);
|
||||
const validated = validateAndFixBindings(expanded as any[]);
|
||||
|
||||
const nativeReady: any[] = [];
|
||||
const needsConversion: any[] = [];
|
||||
for (const el of validated) {
|
||||
if ((el as any).seed !== undefined && (el as any).versionNonce !== undefined) {
|
||||
nativeReady.push(el);
|
||||
} else {
|
||||
needsConversion.push(el);
|
||||
}
|
||||
}
|
||||
|
||||
const converted = needsConversion.length > 0
|
||||
? convertElementsPreservingImageProps(needsConversion, converter)
|
||||
: [];
|
||||
return [...nativeReady, ...converted];
|
||||
}
|
||||
Generated
+6
-15
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "excalidraw-mcp-sentinel",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.3",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "excalidraw-mcp-sentinel",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.3",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -25,7 +25,7 @@
|
||||
"react-dom": "^18.3.1",
|
||||
"winston": "^3.11.0",
|
||||
"ws": "8.20.0",
|
||||
"zod": "3.25.5",
|
||||
"zod": "^4.3.6",
|
||||
"zod-to-json-schema": "^3.22.3"
|
||||
},
|
||||
"bin": {
|
||||
@@ -1572,15 +1572,6 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@modelcontextprotocol/sdk/node_modules/zod": {
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
|
||||
"integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
},
|
||||
"node_modules/@noble/hashes": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
|
||||
@@ -9138,9 +9129,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/zod": {
|
||||
"version": "3.25.5",
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.5.tgz",
|
||||
"integrity": "sha512-ualArhgJydGAKkSdtxQyu6RXFW8nHFKWaw20jey8UFXU9uzkHYqWXJ93Iz+hUVVJb37VpF4LCCsOOfj6xaCVRQ==",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
|
||||
"integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
|
||||
+5
-4
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "excalidraw-mcp-sentinel",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.6",
|
||||
"description": "Hardened, self-hosted Excalidraw MCP server with SQLite persistence, multi-tenancy, auto-sync, security middleware, and 369 tests",
|
||||
"main": "dist/index.js",
|
||||
"type": "module",
|
||||
@@ -17,7 +17,7 @@
|
||||
"dev": "concurrently \"npm run dev:server\" \"vite\"",
|
||||
"dev:server": "npx tsc --watch",
|
||||
"production": "npm run build && npm run canvas",
|
||||
"postinstall": "npm rebuild better-sqlite3 --update-binary 2>/dev/null || true",
|
||||
"postinstall": "node -e \"const {execSync}=require('child_process');try{execSync('npm rebuild better-sqlite3 --update-binary',{stdio:'ignore'})}catch(e){}\"",
|
||||
"prepublishOnly": "npm run build",
|
||||
"setup": "node dist/index.js setup",
|
||||
"update": "node dist/index.js update",
|
||||
@@ -28,7 +28,8 @@
|
||||
"test:api": "vitest run tests/backend/api.test.ts",
|
||||
"test:ws": "vitest run tests/backend/ws.test.ts",
|
||||
"test:e2e": "npx playwright test",
|
||||
"test:coverage": "vitest run --coverage"
|
||||
"test:coverage": "vitest run --coverage",
|
||||
"scan:similar-projects": "node scripts/scan-excalidraw-similar-projects.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@excalidraw/excalidraw": "^0.18.0",
|
||||
@@ -46,7 +47,7 @@
|
||||
"react-dom": "^18.3.1",
|
||||
"winston": "^3.11.0",
|
||||
"ws": "8.20.0",
|
||||
"zod": "3.25.5",
|
||||
"zod": "^4.3.6",
|
||||
"zod-to-json-schema": "^3.22.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -0,0 +1,501 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
const API_BASE = "https://api.github.com";
|
||||
const DEFAULT_OUT_DIR = "docs/generated";
|
||||
const DEFAULT_TOP = 10;
|
||||
const DEFAULT_CANDIDATE_LIMIT = 40;
|
||||
const DEFAULT_FORK_PAGES = 1;
|
||||
|
||||
const SEARCH_QUERIES = [
|
||||
'excalidraw mcp in:name,description,readme',
|
||||
'"model context protocol" excalidraw in:name,description,readme',
|
||||
'"self-hosted excalidraw" websocket in:name,description,readme',
|
||||
'excalidraw sqlite in:name,description,readme',
|
||||
'excalidraw collaboration self-hosted in:name,description,readme',
|
||||
'excalidraw-mcp in:name,description,readme',
|
||||
'mcp_excalidraw in:name,description,readme',
|
||||
];
|
||||
|
||||
const SEED_REPOS = [
|
||||
"excalidraw/excalidraw",
|
||||
"yctimlin/mcp_excalidraw",
|
||||
"sanjibdevnathlabs/mcp-excalidraw-local",
|
||||
"celstnblacc/excalidraw-mcp-sentinel",
|
||||
"i-tozer/excalidraw-mcp",
|
||||
"alswl/excalidraw-collaboration",
|
||||
];
|
||||
|
||||
const SIGNALS = {
|
||||
mcp: [
|
||||
"@modelcontextprotocol/sdk",
|
||||
"model context protocol",
|
||||
"mcp server",
|
||||
"mcp",
|
||||
],
|
||||
liveBackend: [
|
||||
"websocket",
|
||||
"socket.io",
|
||||
" ws ",
|
||||
"canvas server",
|
||||
"backend",
|
||||
"live canvas",
|
||||
"real-time",
|
||||
"realtime",
|
||||
"collaboration",
|
||||
"sync",
|
||||
"express",
|
||||
],
|
||||
persistence: [
|
||||
"better-sqlite3",
|
||||
"sqlite",
|
||||
"postgres",
|
||||
"mongodb",
|
||||
"storage",
|
||||
"filesystem",
|
||||
"s3",
|
||||
"backup",
|
||||
"versioning",
|
||||
"drizzle",
|
||||
"prisma",
|
||||
],
|
||||
security: [
|
||||
"helmet",
|
||||
"rate limit",
|
||||
"rate-limit",
|
||||
"apikey",
|
||||
"api key",
|
||||
"auth",
|
||||
"oauth",
|
||||
"oidc",
|
||||
"encryption",
|
||||
"secure",
|
||||
"security",
|
||||
],
|
||||
workspaceIsolation: [
|
||||
"multi-tenant",
|
||||
"multi tenant",
|
||||
"workspace",
|
||||
"tenant",
|
||||
"project",
|
||||
"organizer",
|
||||
],
|
||||
selfHosted: [
|
||||
"self-hosted",
|
||||
"self hosted",
|
||||
"docker-compose",
|
||||
"docker compose",
|
||||
"docker",
|
||||
"localhost",
|
||||
"single binary",
|
||||
],
|
||||
excalidraw: [
|
||||
"@excalidraw/excalidraw",
|
||||
"excalidraw",
|
||||
],
|
||||
};
|
||||
|
||||
function parseArgs(argv) {
|
||||
const options = {
|
||||
top: DEFAULT_TOP,
|
||||
candidateLimit: DEFAULT_CANDIDATE_LIMIT,
|
||||
forkPages: DEFAULT_FORK_PAGES,
|
||||
outDir: DEFAULT_OUT_DIR,
|
||||
excludeRepos: new Set(),
|
||||
verbose: false,
|
||||
help: false,
|
||||
};
|
||||
|
||||
for (let i = 0; i < argv.length; i += 1) {
|
||||
const arg = argv[i];
|
||||
if (arg === "--help" || arg === "-h") {
|
||||
options.help = true;
|
||||
continue;
|
||||
}
|
||||
if (arg === "--verbose") {
|
||||
options.verbose = true;
|
||||
continue;
|
||||
}
|
||||
if (arg === "--top") {
|
||||
options.top = parsePositiveInt(argv[++i], "--top");
|
||||
continue;
|
||||
}
|
||||
if (arg === "--candidate-limit") {
|
||||
options.candidateLimit = parsePositiveInt(argv[++i], "--candidate-limit");
|
||||
continue;
|
||||
}
|
||||
if (arg === "--fork-pages") {
|
||||
options.forkPages = parsePositiveInt(argv[++i], "--fork-pages");
|
||||
continue;
|
||||
}
|
||||
if (arg === "--out-dir") {
|
||||
options.outDir = argv[++i];
|
||||
if (!options.outDir) {
|
||||
throw new Error("--out-dir requires a value");
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (arg === "--exclude-repo") {
|
||||
const repoName = argv[++i];
|
||||
if (!repoName || !repoName.includes("/")) {
|
||||
throw new Error("--exclude-repo requires a value like owner/name");
|
||||
}
|
||||
options.excludeRepos.add(repoName);
|
||||
continue;
|
||||
}
|
||||
throw new Error(`Unknown argument: ${arg}`);
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
function parsePositiveInt(value, flagName) {
|
||||
const parsed = Number.parseInt(value ?? "", 10);
|
||||
if (!Number.isFinite(parsed) || parsed <= 0) {
|
||||
throw new Error(`${flagName} requires a positive integer`);
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
|
||||
function printHelp() {
|
||||
console.log(`Usage: node scripts/scan-excalidraw-similar-projects.mjs [options]
|
||||
|
||||
Options:
|
||||
--top <n> Number of ranked results to keep (default: ${DEFAULT_TOP})
|
||||
--candidate-limit <n> Max unique candidates to inspect (default: ${DEFAULT_CANDIDATE_LIMIT})
|
||||
--fork-pages <n> Number of GitHub fork pages to inspect per seed (default: ${DEFAULT_FORK_PAGES})
|
||||
--out-dir <path> Output directory for JSON and Markdown reports (default: ${DEFAULT_OUT_DIR})
|
||||
--exclude-repo <repo> Exclude a repo by full name; repeatable
|
||||
--verbose Print progress while scanning
|
||||
-h, --help Show this help
|
||||
|
||||
Environment:
|
||||
GITHUB_TOKEN Optional but recommended. Raises GitHub API rate limits.
|
||||
`);
|
||||
}
|
||||
|
||||
function slugify(value) {
|
||||
return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
|
||||
}
|
||||
|
||||
function formatDateUtc(date = new Date()) {
|
||||
return date.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
function log(options, message) {
|
||||
if (options.verbose) {
|
||||
console.error(message);
|
||||
}
|
||||
}
|
||||
|
||||
async function githubRequest(apiPath, options, query = {}) {
|
||||
const url = new URL(`${API_BASE}${apiPath}`);
|
||||
for (const [key, value] of Object.entries(query)) {
|
||||
url.searchParams.set(key, String(value));
|
||||
}
|
||||
|
||||
const headers = {
|
||||
Accept: "application/vnd.github+json",
|
||||
"User-Agent": "excalidraw-similar-project-scan",
|
||||
};
|
||||
if (process.env.GITHUB_TOKEN) {
|
||||
headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url, { headers });
|
||||
if (response.status === 404) {
|
||||
return null;
|
||||
}
|
||||
if (!response.ok) {
|
||||
const body = await response.text();
|
||||
throw new Error(`GitHub API ${response.status} for ${url}: ${body.slice(0, 200)}`);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function searchRepositories(query, options) {
|
||||
log(options, `search: ${query}`);
|
||||
const payload = await githubRequest("/search/repositories", options, {
|
||||
q: query,
|
||||
per_page: 20,
|
||||
sort: "stars",
|
||||
order: "desc",
|
||||
});
|
||||
return payload?.items ?? [];
|
||||
}
|
||||
|
||||
async function listForks(fullName, options, pages) {
|
||||
const [owner, repo] = fullName.split("/");
|
||||
const results = [];
|
||||
for (let page = 1; page <= pages; page += 1) {
|
||||
log(options, `forks: ${fullName} page ${page}`);
|
||||
const payload = await githubRequest(`/repos/${owner}/${repo}/forks`, options, {
|
||||
per_page: 100,
|
||||
page,
|
||||
sort: "newest",
|
||||
});
|
||||
if (!Array.isArray(payload) || payload.length === 0) {
|
||||
break;
|
||||
}
|
||||
results.push(...payload);
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
async function getRepoDetails(fullName, options) {
|
||||
const [owner, repo] = fullName.split("/");
|
||||
return githubRequest(`/repos/${owner}/${repo}`, options);
|
||||
}
|
||||
|
||||
async function getReadme(fullName, options) {
|
||||
const [owner, repo] = fullName.split("/");
|
||||
const payload = await githubRequest(`/repos/${owner}/${repo}/readme`, options);
|
||||
if (!payload?.content) {
|
||||
return "";
|
||||
}
|
||||
return decodeGitHubContent(payload.content);
|
||||
}
|
||||
|
||||
async function getPackageJson(fullName, options) {
|
||||
const [owner, repo] = fullName.split("/");
|
||||
const payload = await githubRequest(`/repos/${owner}/${repo}/contents/package.json`, options);
|
||||
if (!payload?.content) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
return JSON.parse(decodeGitHubContent(payload.content));
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function decodeGitHubContent(content) {
|
||||
return Buffer.from(content.replace(/\n/g, ""), "base64").toString("utf8");
|
||||
}
|
||||
|
||||
function dedupeRepos(repos) {
|
||||
const map = new Map();
|
||||
for (const repo of repos) {
|
||||
if (!repo?.full_name) {
|
||||
continue;
|
||||
}
|
||||
if (!map.has(repo.full_name)) {
|
||||
map.set(repo.full_name, repo);
|
||||
}
|
||||
}
|
||||
return [...map.values()];
|
||||
}
|
||||
|
||||
function rankSeedPriority(fullName) {
|
||||
const index = SEED_REPOS.indexOf(fullName);
|
||||
return index === -1 ? 999 : index;
|
||||
}
|
||||
|
||||
function sortCandidates(repos) {
|
||||
return [...repos].sort((a, b) => {
|
||||
const seedDelta = rankSeedPriority(a.full_name) - rankSeedPriority(b.full_name);
|
||||
if (seedDelta !== 0) {
|
||||
return seedDelta;
|
||||
}
|
||||
const starsA = a.stargazers_count ?? 0;
|
||||
const starsB = b.stargazers_count ?? 0;
|
||||
if (starsA !== starsB) {
|
||||
return starsB - starsA;
|
||||
}
|
||||
return a.full_name.localeCompare(b.full_name);
|
||||
});
|
||||
}
|
||||
|
||||
function buildRepoText(repo, readmeText, packageJson) {
|
||||
const topics = Array.isArray(repo.topics) ? repo.topics.join(" ") : "";
|
||||
const dependencies = Object.keys({
|
||||
...(packageJson?.dependencies ?? {}),
|
||||
...(packageJson?.devDependencies ?? {}),
|
||||
}).join(" ");
|
||||
return [
|
||||
repo.full_name,
|
||||
repo.description ?? "",
|
||||
topics,
|
||||
readmeText,
|
||||
dependencies,
|
||||
].join(" ").toLowerCase();
|
||||
}
|
||||
|
||||
function includesAny(text, needles) {
|
||||
return needles.some((needle) => text.includes(needle));
|
||||
}
|
||||
|
||||
function scoreRepo(repo, readmeText, packageJson) {
|
||||
const text = buildRepoText(repo, readmeText, packageJson);
|
||||
const signals = {
|
||||
excalidraw: includesAny(text, SIGNALS.excalidraw),
|
||||
mcp: includesAny(text, SIGNALS.mcp),
|
||||
liveBackend: includesAny(text, SIGNALS.liveBackend),
|
||||
persistence: includesAny(text, SIGNALS.persistence),
|
||||
security: includesAny(text, SIGNALS.security),
|
||||
workspaceIsolation: includesAny(text, SIGNALS.workspaceIsolation),
|
||||
selfHosted: includesAny(text, SIGNALS.selfHosted),
|
||||
};
|
||||
|
||||
const score =
|
||||
(signals.mcp ? 5 : 0) +
|
||||
(signals.liveBackend ? 4 : 0) +
|
||||
(signals.persistence ? 3 : 0) +
|
||||
(signals.security ? 3 : 0) +
|
||||
(signals.workspaceIsolation ? 3 : 0) +
|
||||
(signals.selfHosted ? 2 : 0);
|
||||
|
||||
let classification = "NOT_REALLY";
|
||||
if (signals.mcp && signals.liveBackend && score >= 10) {
|
||||
classification = "SAME";
|
||||
} else if (score >= 6) {
|
||||
classification = "ADJACENT";
|
||||
}
|
||||
|
||||
const reasons = [];
|
||||
if (signals.mcp) reasons.push("MCP");
|
||||
if (signals.liveBackend) reasons.push("live backend");
|
||||
if (signals.persistence) reasons.push("persistence");
|
||||
if (signals.security) reasons.push("security");
|
||||
if (signals.workspaceIsolation) reasons.push("workspace isolation");
|
||||
if (signals.selfHosted) reasons.push("self-hosted");
|
||||
|
||||
return {
|
||||
score,
|
||||
classification,
|
||||
signals,
|
||||
reason: reasons.join(", ") || "weak match",
|
||||
closestToThisRepo: signals.mcp && signals.liveBackend && (signals.persistence || signals.security),
|
||||
};
|
||||
}
|
||||
|
||||
function trimReadme(readmeText) {
|
||||
return readmeText.length > 24000 ? readmeText.slice(0, 24000) : readmeText;
|
||||
}
|
||||
|
||||
function renderMarkdown(report) {
|
||||
const lines = [];
|
||||
lines.push("# Excalidraw Similar Project Scan");
|
||||
lines.push("");
|
||||
lines.push(`Generated: ${report.generatedAt}`);
|
||||
lines.push("");
|
||||
lines.push("Scoring weights: `MCP=5`, `live backend=4`, `persistence=3`, `security=3`, `workspace isolation=3`, `self-hosted=2`.");
|
||||
lines.push("");
|
||||
lines.push("| Repo | Score | Class | Excalidraw fork? | Why it matched |");
|
||||
lines.push("|---|---:|---|---|---|");
|
||||
for (const result of report.results) {
|
||||
lines.push(
|
||||
`| [${result.fullName}](${result.htmlUrl}) | ${result.score}/20 | ${result.classification} | ${result.directExcalidrawFork ? "Yes" : "No"} | ${result.reason} |`
|
||||
);
|
||||
}
|
||||
lines.push("");
|
||||
lines.push("## Notes");
|
||||
lines.push("");
|
||||
lines.push("- This scan uses capability matching, not only fork ancestry.");
|
||||
lines.push("- `SAME` requires strong evidence of both `MCP` and a live backend/canvas layer.");
|
||||
lines.push("- Results are heuristic and based on public repo metadata, README content, and `package.json` when present.");
|
||||
return `${lines.join("\n")}\n`;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const options = parseArgs(process.argv.slice(2));
|
||||
if (options.help) {
|
||||
printHelp();
|
||||
return;
|
||||
}
|
||||
|
||||
const candidates = [];
|
||||
|
||||
for (const seed of SEED_REPOS) {
|
||||
const details = await getRepoDetails(seed, options);
|
||||
if (details) {
|
||||
candidates.push(details);
|
||||
}
|
||||
}
|
||||
|
||||
for (const query of SEARCH_QUERIES) {
|
||||
const repos = await searchRepositories(query, options);
|
||||
candidates.push(...repos);
|
||||
}
|
||||
|
||||
for (const seed of SEED_REPOS) {
|
||||
const forks = await listForks(seed, options, options.forkPages);
|
||||
candidates.push(...forks);
|
||||
}
|
||||
|
||||
const uniqueCandidates = sortCandidates(
|
||||
dedupeRepos(candidates).filter((repo) => !repo.archived && !options.excludeRepos.has(repo.full_name))
|
||||
).slice(0, options.candidateLimit);
|
||||
|
||||
const scored = [];
|
||||
for (const repo of uniqueCandidates) {
|
||||
const [readmeText, packageJson] = await Promise.all([
|
||||
getReadme(repo.full_name, options).catch(() => ""),
|
||||
getPackageJson(repo.full_name, options).catch(() => null),
|
||||
]);
|
||||
|
||||
const evaluation = scoreRepo(repo, trimReadme(readmeText), packageJson);
|
||||
if (!evaluation.signals.excalidraw) {
|
||||
continue;
|
||||
}
|
||||
scored.push({
|
||||
fullName: repo.full_name,
|
||||
htmlUrl: repo.html_url,
|
||||
description: repo.description ?? "",
|
||||
score: evaluation.score,
|
||||
classification: evaluation.classification,
|
||||
reason: evaluation.reason,
|
||||
signals: evaluation.signals,
|
||||
closestToThisRepo: evaluation.closestToThisRepo,
|
||||
stars: repo.stargazers_count ?? 0,
|
||||
fork: !!repo.fork,
|
||||
});
|
||||
}
|
||||
|
||||
scored.sort((a, b) => {
|
||||
if (a.score !== b.score) return b.score - a.score;
|
||||
if (a.closestToThisRepo !== b.closestToThisRepo) return Number(b.closestToThisRepo) - Number(a.closestToThisRepo);
|
||||
if (a.stars !== b.stars) return b.stars - a.stars;
|
||||
return a.fullName.localeCompare(b.fullName);
|
||||
});
|
||||
|
||||
const topResults = scored.slice(0, options.top);
|
||||
|
||||
for (const result of topResults) {
|
||||
const details = await getRepoDetails(result.fullName, options).catch(() => null);
|
||||
result.directExcalidrawFork = details?.parent?.full_name === "excalidraw/excalidraw";
|
||||
result.parentFullName = details?.parent?.full_name ?? null;
|
||||
}
|
||||
|
||||
const report = {
|
||||
generatedAt: new Date().toISOString(),
|
||||
config: {
|
||||
top: options.top,
|
||||
candidateLimit: options.candidateLimit,
|
||||
forkPages: options.forkPages,
|
||||
excludeRepos: [...options.excludeRepos],
|
||||
searchQueries: SEARCH_QUERIES,
|
||||
seedRepos: SEED_REPOS,
|
||||
},
|
||||
results: topResults,
|
||||
};
|
||||
|
||||
fs.mkdirSync(options.outDir, { recursive: true });
|
||||
const stamp = formatDateUtc();
|
||||
const baseName = `${stamp}-${slugify("excalidraw-similar-project-scan")}`;
|
||||
const jsonPath = path.join(options.outDir, `${baseName}.json`);
|
||||
const markdownPath = path.join(options.outDir, `${baseName}.md`);
|
||||
|
||||
fs.writeFileSync(jsonPath, JSON.stringify(report, null, 2));
|
||||
fs.writeFileSync(markdownPath, renderMarkdown(report));
|
||||
|
||||
console.log(`Wrote ${jsonPath}`);
|
||||
console.log(`Wrote ${markdownPath}`);
|
||||
}
|
||||
|
||||
main().catch((error) => {
|
||||
console.error(error.message);
|
||||
process.exitCode = 1;
|
||||
});
|
||||
@@ -524,19 +524,41 @@ export function listTenants(): Tenant[] {
|
||||
return db.prepare('SELECT * FROM tenants ORDER BY last_accessed_at DESC').all() as Tenant[];
|
||||
}
|
||||
|
||||
export function deleteTenant(id: string): void {
|
||||
if (id === activeTenantId) throw new Error('Cannot delete the active tenant — switch to another tenant first');
|
||||
const tenants = listTenants();
|
||||
if (tenants.length <= 1) throw new Error('Cannot delete the last tenant');
|
||||
const tenant = getTenantById(id);
|
||||
if (!tenant) throw new Error(`Tenant "${id}" not found`);
|
||||
// CASCADE: delete elements + element_versions for all projects in this tenant, then projects, then tenant
|
||||
const projects = db.prepare('SELECT id FROM projects WHERE tenant_id = ?').all(id) as { id: string }[];
|
||||
const deleteElements = db.prepare('DELETE FROM elements WHERE project_id = ?');
|
||||
const deleteVersions = db.prepare('DELETE FROM element_versions WHERE element_id IN (SELECT id FROM elements WHERE project_id = ?)');
|
||||
const deleteSnapshots = db.prepare('DELETE FROM snapshots WHERE project_id = ?');
|
||||
for (const p of projects) {
|
||||
deleteVersions.run(p.id);
|
||||
deleteElements.run(p.id);
|
||||
deleteSnapshots.run(p.id);
|
||||
}
|
||||
db.prepare('DELETE FROM projects WHERE tenant_id = ?').run(id);
|
||||
db.prepare('DELETE FROM tenants WHERE id = ?').run(id);
|
||||
}
|
||||
|
||||
// ── Projects ──
|
||||
|
||||
export function createProject(name: string, description?: string): Project {
|
||||
export function createProject(name: string, description?: string, tenantId?: string): Project {
|
||||
const tid = tenantId ?? activeTenantId;
|
||||
const id = generateId();
|
||||
const now = new Date().toISOString();
|
||||
db.prepare(
|
||||
'INSERT INTO projects (id, name, description, tenant_id, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)'
|
||||
).run(id, name, description || null, activeTenantId, now, now);
|
||||
return { id, name, description: description || null, tenant_id: activeTenantId, created_at: now, updated_at: now };
|
||||
).run(id, name, description || null, tid, now, now);
|
||||
return { id, name, description: description || null, tenant_id: tid, created_at: now, updated_at: now };
|
||||
}
|
||||
|
||||
export function listProjects(): Project[] {
|
||||
return db.prepare('SELECT * FROM projects WHERE tenant_id = ? ORDER BY updated_at DESC').all(activeTenantId) as Project[];
|
||||
export function listProjects(tenantId?: string): Project[] {
|
||||
const tid = tenantId ?? activeTenantId;
|
||||
return db.prepare('SELECT * FROM projects WHERE tenant_id = ? ORDER BY updated_at DESC').all(tid) as Project[];
|
||||
}
|
||||
|
||||
export function getProjectForTenant(projectId: string, tenantId: string): Project | undefined {
|
||||
@@ -562,6 +584,22 @@ export function getActiveProjectId(): string {
|
||||
return activeProjectId;
|
||||
}
|
||||
|
||||
export function deleteProject(id: string): void {
|
||||
const projects = listProjects();
|
||||
if (projects.length <= 1) throw new Error('Cannot delete the last project');
|
||||
const project = db.prepare('SELECT id, tenant_id FROM projects WHERE id = ?').get(id) as { id: string; tenant_id: string } | undefined;
|
||||
if (!project) throw new Error(`Project "${id}" not found`);
|
||||
if (project.tenant_id !== activeTenantId) throw new Error(`Project "${id}" does not belong to the active tenant`);
|
||||
if (id === activeProjectId) throw new Error('Cannot delete the active project — switch to another project first');
|
||||
// CASCADE deletes elements, element_versions rows, and snapshots automatically
|
||||
db.prepare('DELETE FROM projects WHERE id = ?').run(id);
|
||||
}
|
||||
|
||||
export function getElementCountForProject(projectId: string): number {
|
||||
const row = db.prepare('SELECT COUNT(*) as cnt FROM elements WHERE project_id = ? AND (data NOT LIKE \'%"is_deleted":true%\')').get(projectId) as { cnt: number };
|
||||
return row.cnt;
|
||||
}
|
||||
|
||||
// ── Bulk operations (for sync endpoint) ──
|
||||
|
||||
export function bulkReplaceElements(elements: ServerElement[], projectId?: string): number {
|
||||
|
||||
@@ -9,5 +9,5 @@
|
||||
{ "id": 9, "name": "Liberation Sans", "label": "Liberation Sans", "aliases": ["liberation sans"], "legacy": true },
|
||||
{ "id": 1, "name": "Virgil", "label": "Virgil (legacy)", "aliases": ["virgil"], "legacy": true }
|
||||
],
|
||||
"defaultFontFamily": 5
|
||||
"defaultFontFamily": 6
|
||||
}
|
||||
|
||||
+142
-31
@@ -13,7 +13,9 @@ import {
|
||||
CallToolRequestSchema,
|
||||
ListToolsRequestSchema,
|
||||
CallToolRequest,
|
||||
Tool
|
||||
Tool,
|
||||
McpError,
|
||||
ErrorCode
|
||||
} from '@modelcontextprotocol/sdk/types.js';
|
||||
import { z } from 'zod';
|
||||
import dotenv from 'dotenv';
|
||||
@@ -41,8 +43,10 @@ import {
|
||||
getElementHistory as dbGetElementHistory, getProjectHistory as dbGetProjectHistory,
|
||||
ensureTenant as dbEnsureTenant, setActiveTenant as dbSetActiveTenant,
|
||||
getActiveTenant as dbGetActiveTenant, getActiveTenantId as dbGetActiveTenantId,
|
||||
getActiveProjectId as dbGetActiveProjectId,
|
||||
listTenants as dbListTenants
|
||||
} from './db.js';
|
||||
import { assertNoDangerousKeys } from './security.js';
|
||||
|
||||
// Load environment variables
|
||||
dotenv.config();
|
||||
@@ -335,6 +339,14 @@ const ElementSchema = z.object({
|
||||
elbowed: z.boolean().optional(),
|
||||
startElementId: z.string().optional(),
|
||||
endElementId: z.string().optional(),
|
||||
textAlign: z.string().optional(),
|
||||
verticalAlign: z.string().optional(),
|
||||
title: z.string().optional(),
|
||||
titleFontSize: z.number().optional(),
|
||||
titleFontFamily: z.union([z.string(), z.number()]).optional(),
|
||||
subtitle: z.string().optional(),
|
||||
subtitleFontSize: z.number().optional(),
|
||||
subtitleFontFamily: z.union([z.string(), z.number()]).optional(),
|
||||
endArrowhead: z.string().optional(),
|
||||
startArrowhead: z.string().optional(),
|
||||
fileId: z.string().optional(),
|
||||
@@ -366,7 +378,7 @@ const DistributeElementsSchema = z.object({
|
||||
|
||||
const QuerySchema = z.object({
|
||||
type: z.enum(Object.values(EXCALIDRAW_ELEMENT_TYPES) as [ExcalidrawElementType, ...ExcalidrawElementType[]]).optional(),
|
||||
filter: z.record(z.any()).optional()
|
||||
filter: z.record(z.string(), z.any()).optional()
|
||||
});
|
||||
|
||||
const ResourceSchema = z.object({
|
||||
@@ -470,7 +482,7 @@ const DIAGRAM_DESIGN_GUIDE = `# Excalidraw Diagram Design Guide
|
||||
const tools: Tool[] = [
|
||||
{
|
||||
name: 'create_element',
|
||||
description: 'Create a new Excalidraw element. For arrows, use startElementId/endElementId to bind to shapes (auto-routes to edges).',
|
||||
description: 'Create a new Excalidraw element. For arrows, use startElementId/endElementId to bind to shapes (auto-routes to edges). For containers (rectangle, ellipse, diamond): use title+subtitle for a card layout with independent font styling — both are grouped so they move together.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
@@ -489,9 +501,17 @@ const tools: Tool[] = [
|
||||
strokeStyle: { type: 'string', description: 'Stroke style: solid, dashed, dotted' },
|
||||
roughness: { type: 'number' },
|
||||
opacity: { type: 'number' },
|
||||
text: { type: 'string' },
|
||||
text: { type: 'string', description: 'Simple label text (use title+subtitle instead for card layout)' },
|
||||
fontSize: { type: 'number' },
|
||||
fontFamily: { type: ['string', 'number'], description: FONT_FAMILY_DESCRIPTION },
|
||||
textAlign: { type: 'string', description: 'Text horizontal alignment: left, center, right (default: center)' },
|
||||
verticalAlign: { type: 'string', description: 'Text vertical alignment: top, middle (default: top for containers)' },
|
||||
title: { type: 'string', description: 'Title text for card layout (bound to container, moves with it)' },
|
||||
titleFontSize: { type: 'number', description: 'Title font size (default: 24)' },
|
||||
titleFontFamily: { type: ['string', 'number'], description: 'Title font family (default: Nunito). ' + FONT_FAMILY_DESCRIPTION },
|
||||
subtitle: { type: 'string', description: 'Subtitle/paragraph text (grouped with container, moves together)' },
|
||||
subtitleFontSize: { type: 'number', description: 'Subtitle font size (default: 16)' },
|
||||
subtitleFontFamily: { type: ['string', 'number'], description: 'Subtitle font family (default: Nunito). ' + FONT_FAMILY_DESCRIPTION },
|
||||
startElementId: { type: 'string', description: 'For arrows: ID of the element to bind the arrow start to. Arrow auto-routes to element edge.' },
|
||||
endElementId: { type: 'string', description: 'For arrows: ID of the element to bind the arrow end to. Arrow auto-routes to element edge.' },
|
||||
endArrowhead: { type: 'string', description: 'Arrowhead style at end: arrow, bar, dot, triangle, or null' },
|
||||
@@ -1033,18 +1053,18 @@ const server = new Server(
|
||||
// Helper function to convert text property to label format for Excalidraw
|
||||
function convertTextToLabel(element: ServerElement): ServerElement {
|
||||
const { text, ...rest } = element;
|
||||
if (text) {
|
||||
// For standalone text elements, keep text as direct property
|
||||
if (element.type === 'text') {
|
||||
return element; // Keep text as direct property
|
||||
}
|
||||
// For other elements (rectangle, ellipse, diamond), convert to label format
|
||||
return {
|
||||
...rest,
|
||||
label: { text }
|
||||
} as ServerElement;
|
||||
}
|
||||
return element;
|
||||
// text === undefined means the caller didn't touch the text field — leave as-is
|
||||
if (text === undefined) return element;
|
||||
// Standalone text elements keep text as a direct property
|
||||
if (element.type === 'text') return element;
|
||||
// All container/shape/arrow elements: map text → label.text (empty string clears it)
|
||||
// Default containers to top-center alignment for title/subtitle layout
|
||||
const isArrow = element.type === 'arrow' || element.type === 'line';
|
||||
return {
|
||||
...rest,
|
||||
verticalAlign: (rest as any).verticalAlign ?? (isArrow ? 'middle' : 'top'),
|
||||
label: { text }
|
||||
} as ServerElement;
|
||||
}
|
||||
|
||||
// Set up request handler for tool calls
|
||||
@@ -1058,15 +1078,35 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
const params = ElementSchema.parse(args);
|
||||
logger.info('Creating element via MCP', { type: params.type });
|
||||
|
||||
const { startElementId, endElementId, id: customId, ...elementProps } = params;
|
||||
const {
|
||||
startElementId, endElementId, id: customId,
|
||||
title, titleFontSize, titleFontFamily,
|
||||
subtitle, subtitleFontSize, subtitleFontFamily,
|
||||
...elementProps
|
||||
} = params;
|
||||
const id = customId || generateId();
|
||||
const normalizedFont = normalizeFontFamily(elementProps.fontFamily);
|
||||
|
||||
// Auto-populate title+subtitle for container types unless text is explicitly set
|
||||
const CONTAINER_TYPES = new Set(['rectangle', 'ellipse', 'diamond']);
|
||||
const isContainer = CONTAINER_TYPES.has(params.type);
|
||||
const hasExplicitText = elementProps.text !== undefined;
|
||||
const effectiveTitle = title ?? (isContainer && !hasExplicitText ? 'Title' : undefined);
|
||||
const effectiveSubtitle = subtitle ?? (isContainer && !hasExplicitText && effectiveTitle ? 'Description' : undefined);
|
||||
|
||||
const effectiveText = effectiveTitle ?? elementProps.text;
|
||||
const effectiveFontSize = effectiveTitle ? (titleFontSize ?? 24) : (elementProps.fontSize ?? USER_PREFS.fontSize);
|
||||
const effectiveFontFamily = effectiveTitle
|
||||
? (normalizeFontFamily(titleFontFamily) ?? USER_PREFS.fontFamily)
|
||||
: (normalizedFont ?? USER_PREFS.fontFamily);
|
||||
|
||||
const element: ServerElement = {
|
||||
id,
|
||||
...elementProps,
|
||||
fontFamily: normalizedFont ?? USER_PREFS.fontFamily,
|
||||
text: effectiveText,
|
||||
fontFamily: effectiveFontFamily,
|
||||
roughness: elementProps.roughness ?? USER_PREFS.roughness,
|
||||
fontSize: elementProps.fontSize ?? USER_PREFS.fontSize,
|
||||
fontSize: effectiveFontSize,
|
||||
strokeWidth: elementProps.strokeWidth ?? USER_PREFS.strokeWidth,
|
||||
points: elementProps.points ? normalizePoints(elementProps.points) : undefined,
|
||||
...(startElementId ? { start: { id: startElementId } } : {}),
|
||||
@@ -1084,18 +1124,61 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
// Convert text to label format for Excalidraw
|
||||
const excalidrawElement = convertTextToLabel(element);
|
||||
|
||||
// Create element directly on HTTP server (no local storage)
|
||||
// Card layout: title (bound) + subtitle (grouped standalone text)
|
||||
const groupId = (effectiveTitle && effectiveSubtitle && isContainer) ? generateId() : undefined;
|
||||
|
||||
// Add groupId to container if using card layout
|
||||
if (groupId) {
|
||||
(excalidrawElement as any).groupIds = [groupId];
|
||||
}
|
||||
|
||||
// Create the container element
|
||||
const canvasResponse = await createElementOnCanvas(excalidrawElement);
|
||||
|
||||
if (!canvasResponse) {
|
||||
throw new Error('Failed to create element: HTTP server unavailable');
|
||||
}
|
||||
|
||||
let subtitleResponse: any = null;
|
||||
|
||||
// Create subtitle as a grouped standalone text element
|
||||
if (effectiveSubtitle && isContainer && groupId) {
|
||||
const containerWidth = elementProps.width ?? 200;
|
||||
const containerHeight = elementProps.height ?? 100;
|
||||
const subtitleId = generateId();
|
||||
const resolvedSubtitleFont = normalizeFontFamily(subtitleFontFamily) ?? USER_PREFS.fontFamily;
|
||||
const resolvedSubtitleSize = subtitleFontSize ?? 16;
|
||||
|
||||
const subtitleElement: ServerElement = {
|
||||
id: subtitleId,
|
||||
type: 'text',
|
||||
x: element.x + 10,
|
||||
y: element.y + (containerHeight * 0.45),
|
||||
width: containerWidth - 20,
|
||||
height: containerHeight * 0.5,
|
||||
text: effectiveSubtitle,
|
||||
fontSize: resolvedSubtitleSize,
|
||||
fontFamily: resolvedSubtitleFont,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'top',
|
||||
strokeColor: elementProps.strokeColor ?? '#1e1e1e',
|
||||
opacity: elementProps.opacity ?? 100,
|
||||
roughness: elementProps.roughness ?? USER_PREFS.roughness,
|
||||
groupIds: [groupId],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
version: 1
|
||||
} as any;
|
||||
|
||||
subtitleResponse = await createElementOnCanvas(subtitleElement);
|
||||
}
|
||||
|
||||
const synced = canvasResponse.syncedToCanvas ?? false;
|
||||
logger.info('Element created via MCP', {
|
||||
id: excalidrawElement.id,
|
||||
type: excalidrawElement.type,
|
||||
synced,
|
||||
hasSubtitle: !!subtitleResponse,
|
||||
canvasStatus: canvasResponse.canvasStatus
|
||||
});
|
||||
|
||||
@@ -1104,10 +1187,14 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
? 'Synced to canvas and confirmed by browser'
|
||||
: `Canvas sync not confirmed (${canvasResponse.canvasStatus?.reason ?? 'unknown'})`;
|
||||
|
||||
const subtitleInfo = subtitleResponse
|
||||
? `\n\nSubtitle element: ${subtitleResponse.element?.id ?? 'created'} (grouped)`
|
||||
: '';
|
||||
|
||||
return {
|
||||
content: [{
|
||||
type: 'text',
|
||||
text: `Element created successfully!\n\n${JSON.stringify(canvasResponse.element ?? excalidrawElement, null, 2)}\n\n${statusEmoji} ${statusText}`
|
||||
text: `Element created successfully!\n\n${JSON.stringify(canvasResponse.element ?? excalidrawElement, null, 2)}${subtitleInfo}\n\n${statusEmoji} ${statusText}`
|
||||
}]
|
||||
};
|
||||
}
|
||||
@@ -1809,8 +1896,10 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
const safeImportPath = sanitizeFilePath(params.filePath);
|
||||
const fileContent = fs.readFileSync(safeImportPath, 'utf-8');
|
||||
sceneData = JSON.parse(fileContent);
|
||||
assertNoDangerousKeys(sceneData, 'import_scene filePath');
|
||||
} else if (params.data) {
|
||||
sceneData = JSON.parse(params.data);
|
||||
assertNoDangerousKeys(sceneData, 'import_scene data');
|
||||
} else {
|
||||
throw new Error('Either filePath or data must be provided');
|
||||
}
|
||||
@@ -2369,7 +2458,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
base.fontSize = rest.fontSize ?? USER_PREFS.fontSize;
|
||||
base.fontFamily = rest.fontFamily ?? USER_PREFS.fontFamily;
|
||||
base.textAlign = rest.textAlign ?? 'center';
|
||||
base.verticalAlign = rest.verticalAlign ?? 'middle';
|
||||
base.verticalAlign = rest.verticalAlign ?? (rest.containerId ? 'top' : 'middle');
|
||||
base.autoResize = rest.autoResize ?? true;
|
||||
base.lineHeight = rest.lineHeight ?? 1.25;
|
||||
base.containerId = rest.containerId ?? null;
|
||||
@@ -2463,8 +2552,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
originalText: labelText,
|
||||
fontSize: isArrow ? 14 : (rest.fontSize ?? USER_PREFS.fontSize),
|
||||
fontFamily: rest.fontFamily ?? USER_PREFS.fontFamily,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
textAlign: rest.textAlign ?? 'center',
|
||||
verticalAlign: rest.verticalAlign ?? (isArrow ? 'middle' : 'top'),
|
||||
autoResize: true,
|
||||
lineHeight: 1.25,
|
||||
containerId: base.id
|
||||
@@ -2627,7 +2716,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
const params = z.object({ query: z.string() }).parse(args);
|
||||
logger.info('Searching elements via MCP', { query: params.query });
|
||||
|
||||
const results = dbSearchElements(params.query);
|
||||
const results = dbSearchElements(params.query, dbGetActiveProjectId());
|
||||
return {
|
||||
content: [{
|
||||
type: 'text',
|
||||
@@ -2640,7 +2729,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
|
||||
case 'list_projects': {
|
||||
logger.info('Listing projects via MCP');
|
||||
const projects = dbListProjects();
|
||||
const projects = dbListProjects(dbGetActiveTenantId());
|
||||
const active = dbGetActiveProject();
|
||||
return {
|
||||
content: [{
|
||||
@@ -2658,8 +2747,17 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
}).parse(args || {});
|
||||
|
||||
if (params.createName) {
|
||||
const newProject = dbCreateProject(params.createName, params.createDescription);
|
||||
dbSetActiveProject(newProject.id);
|
||||
const newProject = dbCreateProject(params.createName, params.createDescription, dbGetActiveTenantId());
|
||||
// Switch via REST so the canvas broadcasts project_switched to the frontend
|
||||
const switchRes = await fetch(`${EXPRESS_SERVER_URL}/api/project/active`, {
|
||||
method: 'PUT',
|
||||
headers: canvasHeaders(),
|
||||
body: JSON.stringify({ projectId: newProject.id })
|
||||
}).catch(() => null);
|
||||
if (!switchRes) {
|
||||
// Canvas unavailable — fall back to direct DB switch
|
||||
dbSetActiveProject(newProject.id);
|
||||
}
|
||||
logger.info('Created and switched to new project', { project: newProject });
|
||||
return {
|
||||
content: [{
|
||||
@@ -2670,7 +2768,16 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
}
|
||||
|
||||
if (params.projectId) {
|
||||
dbSetActiveProject(params.projectId);
|
||||
// Switch via REST so the canvas broadcasts project_switched to the frontend
|
||||
const switchRes = await fetch(`${EXPRESS_SERVER_URL}/api/project/active`, {
|
||||
method: 'PUT',
|
||||
headers: canvasHeaders(),
|
||||
body: JSON.stringify({ projectId: params.projectId })
|
||||
}).catch(() => null);
|
||||
if (!switchRes) {
|
||||
// Canvas unavailable — fall back to direct DB switch
|
||||
dbSetActiveProject(params.projectId);
|
||||
}
|
||||
const active = dbGetActiveProject();
|
||||
logger.info('Switched project', { project: active });
|
||||
return {
|
||||
@@ -2753,9 +2860,12 @@ server.setRequestHandler(CallToolRequestSchema, async (request: CallToolRequest)
|
||||
}
|
||||
|
||||
default:
|
||||
throw new Error(`Unknown tool: ${name}`);
|
||||
throw new McpError(ErrorCode.MethodNotFound, `Unknown tool: ${name}`);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof McpError) {
|
||||
throw error;
|
||||
}
|
||||
logger.error(`Error handling tool call: ${(error as Error).message}`, { error });
|
||||
return {
|
||||
content: [{ type: 'text', text: `Error: ${(error as Error).message}` }],
|
||||
@@ -2940,4 +3050,5 @@ if (isMainModule()) {
|
||||
}
|
||||
}
|
||||
|
||||
export default runServer;
|
||||
export default runServer;
|
||||
export { server, tools };
|
||||
|
||||
+9
-3
@@ -111,6 +111,12 @@ export function sanitizeBody(req: Request, res: Response, next: NextFunction): v
|
||||
next();
|
||||
}
|
||||
|
||||
export function assertNoDangerousKeys(obj: unknown, context = 'input'): void {
|
||||
if (hasDangerousKey(obj)) {
|
||||
throw new Error(`${context} contains disallowed keys (__proto__, constructor, prototype)`);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Mermaid Input Validation ──────────────────────────────────────────────────
|
||||
const MAX_MERMAID_LENGTH = 50 * 1024; // 50 KB
|
||||
const MAX_MERMAID_CONFIG_KEYS = 10;
|
||||
@@ -137,7 +143,7 @@ export function validateMermaidInput(req: Request, res: Response, next: NextFunc
|
||||
// General limit for all /api routes.
|
||||
export const generalRateLimit = rateLimit({
|
||||
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||
max: getEnvInt('EXCALIDRAW_RATE_LIMIT_GENERAL_MAX', 100),
|
||||
max: getEnvInt('EXCALIDRAW_RATE_LIMIT_GENERAL_MAX', 500),
|
||||
standardHeaders: 'draft-7',
|
||||
legacyHeaders: false,
|
||||
message: { success: false, error: 'Too many requests, please try again later.' },
|
||||
@@ -155,7 +161,7 @@ export const destructiveRateLimit = rateLimit({
|
||||
// Stricter limit for write-heavy sync operations.
|
||||
export const writeBurstLimit = rateLimit({
|
||||
windowMs: 60 * 1000, // 1 minute
|
||||
max: getEnvInt('EXCALIDRAW_RATE_LIMIT_WRITE_BURST_MAX', 10),
|
||||
max: getEnvInt('EXCALIDRAW_RATE_LIMIT_WRITE_BURST_MAX', 30),
|
||||
standardHeaders: 'draft-7',
|
||||
legacyHeaders: false,
|
||||
message: { success: false, error: 'Too many sync operations, please slow down.' },
|
||||
@@ -205,7 +211,7 @@ export function sanitizeSearchQuery(query: string): string {
|
||||
if (/\b(?:AND|OR|NOT|NEAR(?:\/\d+)?)\b/i.test(trimmed)) {
|
||||
throw new InvalidSearchQueryError();
|
||||
}
|
||||
if (/[*(){}^]/.test(trimmed)) {
|
||||
if (/[*(){}^:]/.test(trimmed)) {
|
||||
throw new InvalidSearchQueryError();
|
||||
}
|
||||
|
||||
|
||||
+84
-3
@@ -28,7 +28,7 @@ import {
|
||||
BroadcastResult
|
||||
} from './types.js';
|
||||
import * as store from './db.js';
|
||||
import { initDb, listTenants as dbListTenants, getActiveTenant as dbGetActiveTenant, getTenantById, setActiveTenant as dbSetActiveTenant, getDefaultProjectForTenant, getProjectForTenant, getCurrentSyncVersion, getChangesSince } from './db.js';
|
||||
import { initDb, listTenants as dbListTenants, getActiveTenant as dbGetActiveTenant, getTenantById, setActiveTenant as dbSetActiveTenant, getDefaultProjectForTenant, getProjectForTenant, getCurrentSyncVersion, getChangesSince, setActiveProject as dbSetActiveProject, getActiveProject as dbGetActiveProject, getActiveProjectId as dbGetActiveProjectId, getActiveTenantId as dbGetActiveTenantId, listProjects as dbListProjects, createProject as dbCreateProject, deleteProject as dbDeleteProject, deleteTenant as dbDeleteTenant, getElementCountForProject as dbGetElementCountForProject } from './db.js';
|
||||
import { z } from 'zod';
|
||||
import WebSocket from 'ws';
|
||||
|
||||
@@ -62,9 +62,11 @@ app.use(express.static(path.join(__dirname, '../dist/frontend'), { index: false
|
||||
|
||||
// Resolve tenant from X-Tenant-Id header to a projectId override.
|
||||
// Returns undefined when header is absent (browser requests), falling back to global state.
|
||||
// When the requesting tenant is the active tenant, use the active project (honours project switches).
|
||||
function resolveTenantProject(req: Request): string | undefined {
|
||||
const tenantId = req.headers['x-tenant-id'] as string | undefined;
|
||||
if (!tenantId) return undefined;
|
||||
if (tenantId === dbGetActiveTenantId()) return dbGetActiveProjectId();
|
||||
return getDefaultProjectForTenant(tenantId);
|
||||
}
|
||||
|
||||
@@ -73,12 +75,14 @@ function resolveTenantProject(req: Request): string | undefined {
|
||||
function resolveScope(req: Request): { tenantId: string; projectId: string } {
|
||||
const headerTenantId = req.headers['x-tenant-id'] as string | undefined;
|
||||
if (headerTenantId) {
|
||||
const projectId = getDefaultProjectForTenant(headerTenantId) ?? `${headerTenantId}-default`;
|
||||
const projectId = headerTenantId === dbGetActiveTenantId()
|
||||
? dbGetActiveProjectId()
|
||||
: (getDefaultProjectForTenant(headerTenantId) ?? `${headerTenantId}-default`);
|
||||
return { tenantId: headerTenantId, projectId };
|
||||
}
|
||||
// Fallback for browser requests without header
|
||||
const tenant = dbGetActiveTenant();
|
||||
const projectId = getDefaultProjectForTenant(tenant.id) ?? `${tenant.id}-default`;
|
||||
const projectId = dbGetActiveProjectId() ?? `${tenant.id}-default`;
|
||||
return { tenantId: tenant.id, projectId };
|
||||
}
|
||||
|
||||
@@ -487,6 +491,10 @@ const ElementSharedFieldsSchema = z.object({
|
||||
endBinding: z.any().nullable().optional(),
|
||||
boundElements: z.any().nullable().optional(),
|
||||
elbowed: z.boolean().optional(),
|
||||
// Text alignment properties (required for bound text inside containers)
|
||||
textAlign: z.string().optional(),
|
||||
verticalAlign: z.string().optional(),
|
||||
containerId: z.string().nullable().optional(),
|
||||
// Image element properties
|
||||
fileId: z.string().optional(),
|
||||
status: z.string().optional(),
|
||||
@@ -1582,6 +1590,79 @@ app.put('/api/tenant/active', (req: Request, res: Response) => {
|
||||
}
|
||||
});
|
||||
|
||||
app.delete('/api/tenants/:id', (req: Request, res: Response) => {
|
||||
try {
|
||||
const id = req.params.id as string;
|
||||
dbDeleteTenant(id);
|
||||
broadcast({ type: 'tenant_deleted', tenantId: id } as any);
|
||||
res.json({ success: true, tenantId: id });
|
||||
} catch (error) {
|
||||
logger.error('Error deleting tenant:', error);
|
||||
res.status(400).json({ success: false, error: (error as Error).message });
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/projects', (req: Request, res: Response) => {
|
||||
try {
|
||||
const projects = dbListProjects();
|
||||
const active = dbGetActiveProject();
|
||||
res.json({ success: true, projects, activeProjectId: active.id });
|
||||
} catch (error) {
|
||||
logger.error('Error listing projects:', error);
|
||||
res.status(500).json({ success: false, error: (error as Error).message });
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/api/projects', (req: Request, res: Response) => {
|
||||
try {
|
||||
const { name, description } = req.body;
|
||||
if (!name || typeof name !== 'string' || !name.trim()) {
|
||||
return res.status(400).json({ success: false, error: 'name is required' });
|
||||
}
|
||||
const project = dbCreateProject(name.trim(), description);
|
||||
res.status(201).json({ success: true, project });
|
||||
} catch (error) {
|
||||
logger.error('Error creating project:', error);
|
||||
res.status(400).json({ success: false, error: (error as Error).message });
|
||||
}
|
||||
});
|
||||
|
||||
app.delete('/api/projects/:id', (req: Request, res: Response) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const elementCount = dbGetElementCountForProject(id!);
|
||||
dbDeleteProject(id!);
|
||||
broadcast({ type: 'project_deleted', projectId: id, elementCount } as any);
|
||||
res.json({ success: true, projectId: id, elementCount });
|
||||
} catch (error) {
|
||||
logger.error('Error deleting project:', error);
|
||||
res.status(400).json({ success: false, error: (error as Error).message });
|
||||
}
|
||||
});
|
||||
|
||||
app.put('/api/project/active', (req: Request, res: Response) => {
|
||||
try {
|
||||
const { projectId } = req.body;
|
||||
if (!projectId || typeof projectId !== 'string') {
|
||||
return res.status(400).json({ success: false, error: 'projectId is required' });
|
||||
}
|
||||
|
||||
dbSetActiveProject(projectId);
|
||||
const project = dbGetActiveProject();
|
||||
|
||||
broadcast({
|
||||
type: 'project_switched',
|
||||
projectId: project.id,
|
||||
projectName: project.name
|
||||
} as any);
|
||||
|
||||
res.json({ success: true, project });
|
||||
} catch (error) {
|
||||
logger.error('Error switching project:', error);
|
||||
res.status(400).json({ success: false, error: (error as Error).message });
|
||||
}
|
||||
});
|
||||
|
||||
// ── Settings API ──
|
||||
|
||||
app.get('/api/settings/:key', (req: Request, res: Response) => {
|
||||
|
||||
@@ -143,6 +143,10 @@ export interface ServerElement extends Omit<ExcalidrawElementBase, 'id'> {
|
||||
end?: { id: string };
|
||||
startBinding?: ExcalidrawBinding | null;
|
||||
endBinding?: ExcalidrawBinding | null;
|
||||
// Text alignment (bound text inside containers)
|
||||
textAlign?: string;
|
||||
verticalAlign?: string;
|
||||
containerId?: string | null;
|
||||
// Image element properties
|
||||
fileId?: string;
|
||||
status?: string;
|
||||
|
||||
+7
-7
@@ -1,7 +1,5 @@
|
||||
import winston from 'winston';
|
||||
|
||||
const LOG_FILE_PATH = process.env.LOG_FILE_PATH || 'excalidraw.log';
|
||||
|
||||
const logger: winston.Logger = winston.createLogger({
|
||||
level: process.env.LOG_LEVEL || 'info',
|
||||
|
||||
@@ -21,13 +19,15 @@ const logger: winston.Logger = winston.createLogger({
|
||||
new winston.transports.Console({
|
||||
level: 'warn', // only warn+error to stderr
|
||||
stderrLevels: ['warn','error']
|
||||
}),
|
||||
|
||||
new winston.transports.File({
|
||||
filename: LOG_FILE_PATH, // all levels to file
|
||||
level: 'debug'
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
if (process.env.LOG_FILE_PATH) {
|
||||
logger.add(new winston.transports.File({
|
||||
filename: process.env.LOG_FILE_PATH,
|
||||
level: 'debug'
|
||||
}));
|
||||
}
|
||||
|
||||
export default logger;
|
||||
+281
-1
@@ -1,6 +1,6 @@
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
||||
import request from 'supertest';
|
||||
import { initDb, closeDb, setElement, getAllElements, setSetting, getSetting, getCurrentSyncVersion, setActiveTenant } from '../../src/db.js';
|
||||
import { initDb, closeDb, setElement, getAllElements, setSetting, getSetting, getCurrentSyncVersion, setActiveTenant, getActiveProjectId, getElementCountForProject } from '../../src/db.js';
|
||||
import type { ServerElement } from '../../src/types.js';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
@@ -587,3 +587,283 @@ describe('canvasStatus in mutation responses', () => {
|
||||
expect(res.body.canvasStatus).toHaveProperty('scope');
|
||||
});
|
||||
});
|
||||
|
||||
// Regression: textAlign/verticalAlign/containerId must survive REST round-trip
|
||||
// These fields were silently stripped by Zod before the fix (ElementSharedFieldsSchema
|
||||
// did not declare them, so .parse() dropped them).
|
||||
describe('Text alignment fields — REST round-trip regression', () => {
|
||||
it('POST /api/elements preserves textAlign and verticalAlign', async () => {
|
||||
const res = await request(app)
|
||||
.post('/api/elements')
|
||||
.send({
|
||||
type: 'text',
|
||||
x: 10, y: 20, width: 100, height: 30,
|
||||
text: 'Hello',
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
});
|
||||
|
||||
expect(res.status).toBe(200);
|
||||
const el = res.body.element;
|
||||
expect(el.textAlign).toBe('center');
|
||||
expect(el.verticalAlign).toBe('middle');
|
||||
});
|
||||
|
||||
it('POST /api/elements preserves containerId on bound text', async () => {
|
||||
// Create container first
|
||||
const containerRes = await request(app)
|
||||
.post('/api/elements')
|
||||
.send({ type: 'rectangle', x: 0, y: 0, width: 200, height: 100 });
|
||||
expect(containerRes.status).toBe(200);
|
||||
const containerId = containerRes.body.element?.id;
|
||||
expect(containerId).toBeTruthy();
|
||||
|
||||
// Create bound text referencing the container
|
||||
const textRes = await request(app)
|
||||
.post('/api/elements')
|
||||
.send({
|
||||
type: 'text',
|
||||
x: 10, y: 10, width: 180, height: 20,
|
||||
text: 'Title',
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'top',
|
||||
containerId,
|
||||
});
|
||||
|
||||
expect(textRes.status).toBe(200);
|
||||
const textEl = textRes.body.element;
|
||||
expect(textEl.containerId).toBe(containerId);
|
||||
expect(textEl.textAlign).toBe('center');
|
||||
expect(textEl.verticalAlign).toBe('top');
|
||||
});
|
||||
|
||||
it('PUT /api/elements/:id preserves textAlign on update', async () => {
|
||||
const createRes = await request(app)
|
||||
.post('/api/elements')
|
||||
.send({ type: 'text', x: 0, y: 0, width: 100, height: 30, text: 'Hi', textAlign: 'left' });
|
||||
expect(createRes.status).toBe(200);
|
||||
const id = createRes.body.element?.id;
|
||||
expect(id).toBeTruthy();
|
||||
|
||||
const updateRes = await request(app)
|
||||
.put(`/api/elements/${id}`)
|
||||
.send({ id, type: 'text', x: 0, y: 0, textAlign: 'center' });
|
||||
|
||||
expect(updateRes.status).toBe(200);
|
||||
expect(updateRes.body.element?.textAlign).toBe('center');
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Projects ─────────────────────────────────────────────────
|
||||
|
||||
describe('GET /api/projects', () => {
|
||||
it('returns the default project and marks it active', async () => {
|
||||
const res = await request(app).get('/api/projects');
|
||||
expect(res.status).toBe(200);
|
||||
expect(res.body.success).toBe(true);
|
||||
expect(Array.isArray(res.body.projects)).toBe(true);
|
||||
expect(res.body.projects.length).toBeGreaterThanOrEqual(1);
|
||||
expect(res.body.activeProjectId).toBeTruthy();
|
||||
const active = res.body.projects.find((p: any) => p.id === res.body.activeProjectId);
|
||||
expect(active).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('POST /api/projects', () => {
|
||||
it('creates a new project and returns it', async () => {
|
||||
const res = await request(app)
|
||||
.post('/api/projects')
|
||||
.send({ name: 'My Diagram', description: 'test desc' });
|
||||
expect(res.status).toBe(201);
|
||||
expect(res.body.success).toBe(true);
|
||||
expect(res.body.project.name).toBe('My Diagram');
|
||||
expect(res.body.project.description).toBe('test desc');
|
||||
expect(res.body.project.id).toBeTruthy();
|
||||
});
|
||||
|
||||
it('returns 400 when name is missing', async () => {
|
||||
const res = await request(app).post('/api/projects').send({});
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.success).toBe(false);
|
||||
});
|
||||
|
||||
it('returns 400 when name is blank', async () => {
|
||||
const res = await request(app).post('/api/projects').send({ name: ' ' });
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.success).toBe(false);
|
||||
});
|
||||
|
||||
it('new project appears in GET /api/projects list', async () => {
|
||||
await request(app).post('/api/projects').send({ name: 'Alpha' });
|
||||
await request(app).post('/api/projects').send({ name: 'Beta' });
|
||||
const res = await request(app).get('/api/projects');
|
||||
const names = res.body.projects.map((p: any) => p.name);
|
||||
expect(names).toContain('Alpha');
|
||||
expect(names).toContain('Beta');
|
||||
});
|
||||
});
|
||||
|
||||
describe('PUT /api/project/active', () => {
|
||||
it('switches the active project', async () => {
|
||||
const created = await request(app)
|
||||
.post('/api/projects')
|
||||
.send({ name: 'Switch Target' });
|
||||
const newId = created.body.project.id;
|
||||
|
||||
const res = await request(app)
|
||||
.put('/api/project/active')
|
||||
.send({ projectId: newId });
|
||||
expect(res.status).toBe(200);
|
||||
expect(res.body.success).toBe(true);
|
||||
expect(res.body.project.id).toBe(newId);
|
||||
|
||||
// DB state reflects the switch
|
||||
expect(getActiveProjectId()).toBe(newId);
|
||||
});
|
||||
|
||||
it('returns 400 when projectId is missing', async () => {
|
||||
const res = await request(app).put('/api/project/active').send({});
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.success).toBe(false);
|
||||
});
|
||||
|
||||
it('returns 400 for a non-existent projectId', async () => {
|
||||
const res = await request(app)
|
||||
.put('/api/project/active')
|
||||
.send({ projectId: 'does-not-exist' });
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.success).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Project switch preserves elements ──────────────────────
|
||||
|
||||
describe('Project switch round-trip — elements survive', () => {
|
||||
it('elements saved in project A persist after switching to B and back', async () => {
|
||||
// Create project "dude"
|
||||
const dudeRes = await request(app).post('/api/projects').send({ name: 'dude' });
|
||||
const dudeId = dudeRes.body.project.id;
|
||||
const defaultId = getActiveProjectId(); // save original
|
||||
|
||||
// Switch to "dude"
|
||||
await request(app).put('/api/project/active').send({ projectId: dudeId });
|
||||
expect(getActiveProjectId()).toBe(dudeId);
|
||||
|
||||
// Draw 2 elements in "dude"
|
||||
const el1 = makeElement({ id: 'dude-rect-1', type: 'rectangle', x: 10, y: 10, width: 100, height: 50 });
|
||||
const el2 = makeElement({ id: 'dude-rect-2', type: 'rectangle', x: 200, y: 200, width: 120, height: 80 });
|
||||
await request(app).post('/api/elements').send(el1);
|
||||
await request(app).post('/api/elements').send(el2);
|
||||
|
||||
// Verify 2 elements in "dude"
|
||||
const dudeElems1 = await request(app).get('/api/elements');
|
||||
expect(dudeElems1.body.elements.length).toBe(2);
|
||||
|
||||
// Switch to "default"
|
||||
await request(app).put('/api/project/active').send({ projectId: defaultId });
|
||||
expect(getActiveProjectId()).toBe(defaultId);
|
||||
|
||||
// "default" should have 0 elements (fresh DB)
|
||||
const defaultElems = await request(app).get('/api/elements');
|
||||
expect(defaultElems.body.elements.length).toBe(0);
|
||||
|
||||
// Switch back to "dude"
|
||||
await request(app).put('/api/project/active').send({ projectId: dudeId });
|
||||
expect(getActiveProjectId()).toBe(dudeId);
|
||||
|
||||
// "dude" should still have the 2 elements
|
||||
const dudeElems2 = await request(app).get('/api/elements');
|
||||
expect(dudeElems2.body.elements.length).toBe(2);
|
||||
const ids = dudeElems2.body.elements.map((e: any) => e.id);
|
||||
expect(ids).toContain('dude-rect-1');
|
||||
expect(ids).toContain('dude-rect-2');
|
||||
});
|
||||
|
||||
it('elements in different projects are isolated', async () => {
|
||||
// Create two projects
|
||||
const projA = await request(app).post('/api/projects').send({ name: 'Project A' });
|
||||
const projB = await request(app).post('/api/projects').send({ name: 'Project B' });
|
||||
const aId = projA.body.project.id;
|
||||
const bId = projB.body.project.id;
|
||||
|
||||
// Add element to Project A
|
||||
await request(app).put('/api/project/active').send({ projectId: aId });
|
||||
await request(app).post('/api/elements').send(
|
||||
makeElement({ id: 'a-only', type: 'ellipse', x: 0, y: 0, width: 50, height: 50 })
|
||||
);
|
||||
|
||||
// Add element to Project B
|
||||
await request(app).put('/api/project/active').send({ projectId: bId });
|
||||
await request(app).post('/api/elements').send(
|
||||
makeElement({ id: 'b-only', type: 'diamond', x: 0, y: 0, width: 50, height: 50 })
|
||||
);
|
||||
|
||||
// Verify isolation
|
||||
const bElems = await request(app).get('/api/elements');
|
||||
expect(bElems.body.elements.length).toBe(1);
|
||||
expect(bElems.body.elements[0].id).toBe('b-only');
|
||||
|
||||
await request(app).put('/api/project/active').send({ projectId: aId });
|
||||
const aElems = await request(app).get('/api/elements');
|
||||
expect(aElems.body.elements.length).toBe(1);
|
||||
expect(aElems.body.elements[0].id).toBe('a-only');
|
||||
});
|
||||
});
|
||||
|
||||
describe('DELETE /api/projects/:id', () => {
|
||||
it('deletes a non-active project', async () => {
|
||||
const created = await request(app).post('/api/projects').send({ name: 'To Delete' });
|
||||
const id = created.body.project.id;
|
||||
|
||||
const res = await request(app).delete(`/api/projects/${id}`);
|
||||
expect(res.status).toBe(200);
|
||||
expect(res.body.success).toBe(true);
|
||||
expect(res.body.projectId).toBe(id);
|
||||
|
||||
const list = await request(app).get('/api/projects');
|
||||
const ids = list.body.projects.map((p: any) => p.id);
|
||||
expect(ids).not.toContain(id);
|
||||
});
|
||||
|
||||
it('cascades and deletes elements belonging to the project', async () => {
|
||||
const created = await request(app).post('/api/projects').send({ name: 'With Elements' });
|
||||
const id = created.body.project.id;
|
||||
|
||||
// Switch to new project and add an element
|
||||
await request(app).put('/api/project/active').send({ projectId: id });
|
||||
await request(app).post('/api/elements').send({ type: 'rectangle', x: 0, y: 0, width: 50, height: 50 });
|
||||
expect(getElementCountForProject(id)).toBe(1);
|
||||
|
||||
// Switch back to default before deleting
|
||||
const defaultId = getActiveProjectId() === id
|
||||
? (await request(app).get('/api/projects')).body.projects.find((p: any) => p.id !== id)?.id
|
||||
: getActiveProjectId();
|
||||
await request(app).put('/api/project/active').send({ projectId: defaultId });
|
||||
|
||||
await request(app).delete(`/api/projects/${id}`);
|
||||
expect(getElementCountForProject(id)).toBe(0);
|
||||
});
|
||||
|
||||
it('refuses to delete the active project', async () => {
|
||||
// Create a second project so the "last project" guard doesn't fire first
|
||||
await request(app).post('/api/projects').send({ name: 'Second' });
|
||||
const activeId = getActiveProjectId();
|
||||
const res = await request(app).delete(`/api/projects/${activeId}`);
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.error).toMatch(/active/);
|
||||
});
|
||||
|
||||
it('refuses to delete the last project', async () => {
|
||||
// Only default project exists — try to delete it (it is also active, so both guards fire)
|
||||
const activeId = getActiveProjectId();
|
||||
const res = await request(app).delete(`/api/projects/${activeId}`);
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.success).toBe(false);
|
||||
});
|
||||
|
||||
it('returns 400 for a non-existent project', async () => {
|
||||
const res = await request(app).delete('/api/projects/ghost-id');
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.success).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,396 @@
|
||||
/**
|
||||
* Unit tests for src/db.ts
|
||||
*
|
||||
* Covers: migrations, tenant isolation, FTS search, snapshots,
|
||||
* element_versions tracking, generateId uniqueness, global state race.
|
||||
* All tests use a real SQLite database in a tmpdir.
|
||||
*/
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
||||
import {
|
||||
initDb,
|
||||
closeDb,
|
||||
ensureTenant,
|
||||
setActiveTenant,
|
||||
getActiveTenantId,
|
||||
getActiveProjectId,
|
||||
setElement,
|
||||
getElement,
|
||||
getAllElements,
|
||||
deleteElement,
|
||||
searchElements,
|
||||
saveSnapshot,
|
||||
getSnapshot,
|
||||
getElementHistory,
|
||||
createProject,
|
||||
getDefaultProjectForTenant,
|
||||
getCurrentSyncVersion,
|
||||
incrementSyncVersion,
|
||||
} from '../../src/db.js';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import fs from 'fs';
|
||||
|
||||
function tmpDb(label: string): string {
|
||||
return path.join(
|
||||
os.tmpdir(),
|
||||
`excalidraw-db-unit-${label}-${Date.now()}-${Math.random().toString(36).slice(2)}.db`
|
||||
);
|
||||
}
|
||||
|
||||
function cleanupDb(dbPath: string): void {
|
||||
closeDb();
|
||||
for (const suffix of ['', '-wal', '-shm']) {
|
||||
try { fs.unlinkSync(dbPath + suffix); } catch { /* ignore */ }
|
||||
}
|
||||
}
|
||||
|
||||
function makeEl(id: string, overrides: Record<string, any> = {}) {
|
||||
return { id, type: 'rectangle', x: 0, y: 0, width: 100, height: 50, ...overrides };
|
||||
}
|
||||
|
||||
// ── WAL mode ──────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('SQLite configuration', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('config');
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('enables WAL journal mode', () => {
|
||||
// After initDb the WAL file should be created alongside the DB
|
||||
// (or journal_mode pragma returns 'wal').
|
||||
// We verify indirectly: the -wal sidecar file exists after a write.
|
||||
setElement('el-wal', makeEl('el-wal'));
|
||||
const walPath = dbPath + '-wal';
|
||||
// WAL file may or may not exist depending on checkpoint state, but
|
||||
// the DB must at least have been created without error.
|
||||
expect(fs.existsSync(dbPath)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Migrations ────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('Migrations', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('migrations');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('runs successfully on a fresh database', () => {
|
||||
expect(() => {
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('is idempotent — calling initDb twice with the same path does not error', () => {
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
// initDb guards with `if (db) return`, so calling again is a no-op
|
||||
expect(() => initDb(dbPath)).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
// ── Element CRUD & tenant isolation ──────────────────────────────────────────
|
||||
|
||||
describe('Tenant isolation', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('isolation');
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('elements created in tenant A are not visible in tenant B', () => {
|
||||
// Create tenant A + project, write an element
|
||||
ensureTenant('tenant-a', 'Tenant A', '/ws/a');
|
||||
setActiveTenant('tenant-a');
|
||||
const projA = getDefaultProjectForTenant('tenant-a');
|
||||
setElement('el-a', makeEl('el-a'), projA);
|
||||
|
||||
// Create tenant B + project, write a different element
|
||||
ensureTenant('tenant-b', 'Tenant B', '/ws/b');
|
||||
setActiveTenant('tenant-b');
|
||||
const projB = getDefaultProjectForTenant('tenant-b');
|
||||
setElement('el-b', makeEl('el-b'), projB);
|
||||
|
||||
// Tenant A's project sees only el-a
|
||||
const elemsA = getAllElements(projA);
|
||||
expect(elemsA.map(e => e.id)).toContain('el-a');
|
||||
expect(elemsA.map(e => e.id)).not.toContain('el-b');
|
||||
|
||||
// Tenant B's project sees only el-b
|
||||
const elemsB = getAllElements(projB);
|
||||
expect(elemsB.map(e => e.id)).toContain('el-b');
|
||||
expect(elemsB.map(e => e.id)).not.toContain('el-a');
|
||||
});
|
||||
|
||||
it('getElement with explicit projectId enforces project scope', () => {
|
||||
ensureTenant('tenant-c', 'Tenant C', '/ws/c');
|
||||
const projC = getDefaultProjectForTenant('tenant-c');
|
||||
setElement('el-c', makeEl('el-c'), projC);
|
||||
|
||||
// The default project should NOT see el-c
|
||||
const found = getElement('el-c', 'default');
|
||||
expect(found).toBeUndefined();
|
||||
|
||||
// The correct project SHOULD see el-c
|
||||
const foundCorrect = getElement('el-c', projC);
|
||||
expect(foundCorrect).toBeDefined();
|
||||
expect(foundCorrect!.id).toBe('el-c');
|
||||
});
|
||||
|
||||
// DESIGN NOTE: setActiveTenant() mutates module-level `activeTenantId` and
|
||||
// `activeProjectId`. Any code path that calls db functions WITHOUT an explicit
|
||||
// projectId override uses the current global value. If two logical "sessions"
|
||||
// call setActiveTenant() in an interleaved order, the later call wins.
|
||||
// The test below demonstrates this using explicit projectId overrides (the safe
|
||||
// API), contrasted with the module-global fallback.
|
||||
it('DESIGN GAP: global activeTenantId is shared across all callers without explicit projectId', () => {
|
||||
ensureTenant('tenant-x', 'X', '/ws/x');
|
||||
ensureTenant('tenant-y', 'Y', '/ws/y');
|
||||
const projX = getDefaultProjectForTenant('tenant-x');
|
||||
const projY = getDefaultProjectForTenant('tenant-y');
|
||||
|
||||
// Session 1 sets active tenant to X and writes an element via global state
|
||||
setActiveTenant('tenant-x');
|
||||
expect(getActiveTenantId()).toBe('tenant-x');
|
||||
// Simulate session 2 switching tenant before session 1 does its DB work
|
||||
setActiveTenant('tenant-y');
|
||||
// Now session 1's db call (no explicit projectId) will use Y's project
|
||||
setElement('el-contaminated', makeEl('el-contaminated')); // uses activeProjectId = projY
|
||||
|
||||
// The element landed in Y's project, not X's
|
||||
expect(getElement('el-contaminated', projY)).toBeDefined();
|
||||
expect(getElement('el-contaminated', projX)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
// ── FTS Search ────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('FTS search', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('fts');
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('finds elements by label text', () => {
|
||||
setElement('el-fts1', makeEl('el-fts1', { label: { text: 'Excalidraw Canvas' } }));
|
||||
setElement('el-fts2', makeEl('el-fts2', { label: { text: 'Something Else' } }));
|
||||
|
||||
const results = searchElements('Excalidraw', 'default');
|
||||
expect(results.map(e => e.id)).toContain('el-fts1');
|
||||
expect(results.map(e => e.id)).not.toContain('el-fts2');
|
||||
});
|
||||
|
||||
it('finds elements by type', () => {
|
||||
setElement('el-rect', { id: 'el-rect', type: 'rectangle', x: 0, y: 0, width: 50, height: 50 });
|
||||
setElement('el-dia', { id: 'el-dia', type: 'diamond', x: 0, y: 0, width: 50, height: 50 });
|
||||
|
||||
const results = searchElements('diamond', 'default');
|
||||
expect(results.map(e => e.id)).toContain('el-dia');
|
||||
expect(results.map(e => e.id)).not.toContain('el-rect');
|
||||
});
|
||||
|
||||
it('does not return deleted elements', () => {
|
||||
setElement('el-del', makeEl('el-del', { label: { text: 'FindMe' } }));
|
||||
deleteElement('el-del', 'default');
|
||||
|
||||
const results = searchElements('FindMe', 'default');
|
||||
expect(results.map(e => e.id)).not.toContain('el-del');
|
||||
});
|
||||
});
|
||||
|
||||
// ── Soft delete ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe('Soft delete', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('softdelete');
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('deleted element is not returned by getAllElements', () => {
|
||||
setElement('el-to-delete', makeEl('el-to-delete'));
|
||||
deleteElement('el-to-delete', 'default');
|
||||
|
||||
const all = getAllElements('default');
|
||||
expect(all.map(e => e.id)).not.toContain('el-to-delete');
|
||||
});
|
||||
|
||||
it('deleted element is not returned by getElement', () => {
|
||||
setElement('el-gone', makeEl('el-gone'));
|
||||
deleteElement('el-gone', 'default');
|
||||
|
||||
expect(getElement('el-gone', 'default')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('re-inserting a deleted element revives it', () => {
|
||||
setElement('el-revive', makeEl('el-revive'));
|
||||
deleteElement('el-revive', 'default');
|
||||
setElement('el-revive', makeEl('el-revive', { x: 99 }));
|
||||
|
||||
const el = getElement('el-revive', 'default');
|
||||
expect(el).toBeDefined();
|
||||
expect(el!.x).toBe(99);
|
||||
});
|
||||
});
|
||||
|
||||
// ── element_versions ─────────────────────────────────────────────────────────
|
||||
|
||||
describe('element_versions history', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('versions');
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('records a create operation', () => {
|
||||
setElement('el-hist', makeEl('el-hist'));
|
||||
const history = getElementHistory('el-hist', 50, 'default');
|
||||
expect(history.length).toBeGreaterThanOrEqual(1);
|
||||
expect(history.some(h => h.operation === 'create')).toBe(true);
|
||||
});
|
||||
|
||||
it('records an update operation after second setElement', () => {
|
||||
setElement('el-hist2', makeEl('el-hist2'));
|
||||
setElement('el-hist2', makeEl('el-hist2', { x: 42 }));
|
||||
const history = getElementHistory('el-hist2', 50, 'default');
|
||||
expect(history.some(h => h.operation === 'update')).toBe(true);
|
||||
});
|
||||
|
||||
it('records a delete operation', () => {
|
||||
setElement('el-hist3', makeEl('el-hist3'));
|
||||
deleteElement('el-hist3', 'default');
|
||||
const history = getElementHistory('el-hist3', 50, 'default');
|
||||
expect(history.some(h => h.operation === 'delete')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Snapshot round-trip ───────────────────────────────────────────────────────
|
||||
|
||||
describe('Snapshot save / restore', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('snapshot');
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('saves and retrieves a named snapshot', () => {
|
||||
const elements = [makeEl('snap-el-1'), makeEl('snap-el-2')];
|
||||
saveSnapshot('my-snap', elements, 'default');
|
||||
|
||||
const snap = getSnapshot('my-snap', 'default');
|
||||
expect(snap).toBeDefined();
|
||||
expect(snap!.name).toBe('my-snap');
|
||||
expect(snap!.elements).toHaveLength(2);
|
||||
expect(snap!.elements.map((e: any) => e.id)).toContain('snap-el-1');
|
||||
});
|
||||
|
||||
it('snapshot content is independent of subsequent mutations', () => {
|
||||
setElement('snap-live', makeEl('snap-live', { x: 10 }));
|
||||
saveSnapshot('before-move', [makeEl('snap-live', { x: 10 })], 'default');
|
||||
|
||||
// Mutate the live element
|
||||
setElement('snap-live', makeEl('snap-live', { x: 999 }));
|
||||
|
||||
// Snapshot still has the original coordinates
|
||||
const snap = getSnapshot('before-move', 'default');
|
||||
expect(snap!.elements[0].x).toBe(10);
|
||||
});
|
||||
|
||||
it('returns undefined for non-existent snapshot name', () => {
|
||||
expect(getSnapshot('does-not-exist', 'default')).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
// ── generateId uniqueness ─────────────────────────────────────────────────────
|
||||
|
||||
describe('createProject — generateId uniqueness', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('genid');
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('generates unique project IDs across 200 rapid sequential calls', () => {
|
||||
const ids = new Set<string>();
|
||||
for (let i = 0; i < 200; i++) {
|
||||
const project = createProject(`proj-${i}`);
|
||||
ids.add(project.id);
|
||||
}
|
||||
// All IDs must be unique
|
||||
expect(ids.size).toBe(200);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Sync version ──────────────────────────────────────────────────────────────
|
||||
|
||||
describe('sync version monotonicity', () => {
|
||||
let dbPath: string;
|
||||
|
||||
beforeEach(() => {
|
||||
dbPath = tmpDb('syncver');
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
});
|
||||
|
||||
afterEach(() => cleanupDb(dbPath));
|
||||
|
||||
it('sync version increases monotonically across setElement calls', () => {
|
||||
const v0 = getCurrentSyncVersion('default');
|
||||
setElement('sv-el1', makeEl('sv-el1'));
|
||||
const v1 = getCurrentSyncVersion('default');
|
||||
setElement('sv-el2', makeEl('sv-el2'));
|
||||
const v2 = getCurrentSyncVersion('default');
|
||||
|
||||
expect(v1).toBeGreaterThan(v0);
|
||||
expect(v2).toBeGreaterThan(v1);
|
||||
});
|
||||
|
||||
it('sync version is isolated per project (explicit projectId)', () => {
|
||||
ensureTenant('sv-tenant', 'SV Tenant', '/ws/sv');
|
||||
const projSv = getDefaultProjectForTenant('sv-tenant');
|
||||
|
||||
const defaultV0 = getCurrentSyncVersion('default');
|
||||
const svV0 = getCurrentSyncVersion(projSv);
|
||||
|
||||
setElement('sv-isolated', makeEl('sv-isolated'), projSv);
|
||||
|
||||
// Only the sv project's version should increment
|
||||
expect(getCurrentSyncVersion(projSv)).toBeGreaterThan(svV0);
|
||||
expect(getCurrentSyncVersion('default')).toBe(defaultV0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
import { afterAll, beforeAll, describe, expect, it } from 'vitest';
|
||||
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
|
||||
import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';
|
||||
import { ErrorCode } from '@modelcontextprotocol/sdk/types.js';
|
||||
import { server, tools } from '../../src/index.js';
|
||||
|
||||
let client: Client;
|
||||
|
||||
beforeAll(async () => {
|
||||
const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
|
||||
client = new Client({ name: 'mcp-contract-test-client', version: '1.0.0' });
|
||||
await server.connect(serverTransport);
|
||||
await client.connect(clientTransport);
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await client.close();
|
||||
await server.close();
|
||||
});
|
||||
|
||||
describe('MCP contract', () => {
|
||||
it('tools/list returns all declared tools', async () => {
|
||||
const listed = await client.listTools();
|
||||
expect(Array.isArray(listed.tools)).toBe(true);
|
||||
expect(listed.tools.length).toBe(32);
|
||||
expect(listed.tools.length).toBe(tools.length);
|
||||
});
|
||||
|
||||
it('tools/call unknown tool returns MethodNotFound (-32601)', async () => {
|
||||
await expect(
|
||||
client.callTool({
|
||||
name: '__unknown_tool__',
|
||||
arguments: {},
|
||||
})
|
||||
).rejects.toMatchObject({
|
||||
code: ErrorCode.MethodNotFound,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,222 @@
|
||||
/**
|
||||
* Tests for security gaps on MCP-adjacent paths.
|
||||
*
|
||||
* CONTEXT: Express middleware (sanitizeBody, apiKeyAuth, rate limiting) only
|
||||
* runs on HTTP requests. MCP tool calls arrive over stdio and call db functions
|
||||
* directly — bypassing all Express middleware.
|
||||
*
|
||||
* These tests:
|
||||
* 1. Confirm sanitizeBody WORKS on REST paths (baseline proof it's applied).
|
||||
* 2. Document the adversarial JSON parsing scenarios that the MCP import_scene
|
||||
* handler faces without any Express-layer protection.
|
||||
* 3. Test path traversal blocking on export endpoints (shared logic with MCP).
|
||||
*/
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
||||
import request from 'supertest';
|
||||
import {
|
||||
initDb,
|
||||
closeDb,
|
||||
setActiveTenant,
|
||||
} from '../../src/db.js';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import fs from 'fs';
|
||||
|
||||
let dbPath: string;
|
||||
let app: any;
|
||||
|
||||
beforeEach(async () => {
|
||||
dbPath = path.join(
|
||||
os.tmpdir(),
|
||||
`excalidraw-mcp-sanit-${Date.now()}-${Math.random().toString(36).slice(2)}.db`
|
||||
);
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
const mod = await import('../../src/server.js');
|
||||
app = mod.default;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
closeDb();
|
||||
for (const suffix of ['', '-wal', '-shm']) {
|
||||
try { fs.unlinkSync(dbPath + suffix); } catch { /* ignore */ }
|
||||
}
|
||||
});
|
||||
|
||||
// ── Prototype pollution guard — REST layer ────────────────────────────────────
|
||||
|
||||
describe('sanitizeBody middleware — REST path coverage', () => {
|
||||
it('rejects POST body containing __proto__ key → 400', async () => {
|
||||
const res = await request(app)
|
||||
.post('/api/elements')
|
||||
.set('Content-Type', 'application/json')
|
||||
.send('{"__proto__": {"isAdmin": true}, "type": "rectangle", "x": 0, "y": 0}');
|
||||
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.error).toMatch(/disallowed keys/i);
|
||||
});
|
||||
|
||||
it('rejects POST body containing constructor key → 400', async () => {
|
||||
const res = await request(app)
|
||||
.post('/api/elements')
|
||||
.set('Content-Type', 'application/json')
|
||||
.send('{"constructor": {"name": "evil"}, "type": "rectangle", "x": 0, "y": 0}');
|
||||
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.error).toMatch(/disallowed keys/i);
|
||||
});
|
||||
|
||||
it('rejects POST body containing nested __proto__ → 400', async () => {
|
||||
const res = await request(app)
|
||||
.post('/api/elements')
|
||||
.set('Content-Type', 'application/json')
|
||||
.send('{"element": {"__proto__": {"evil": true}}, "type": "rectangle", "x": 0, "y": 0}');
|
||||
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.error).toMatch(/disallowed keys/i);
|
||||
});
|
||||
|
||||
it('accepts clean POST body → not 400', async () => {
|
||||
const res = await request(app)
|
||||
.post('/api/elements')
|
||||
.send({ type: 'rectangle', x: 0, y: 0, width: 100, height: 50 });
|
||||
|
||||
expect(res.status).not.toBe(400);
|
||||
});
|
||||
});
|
||||
|
||||
// ── MCP import_scene adversarial JSON — documented gap ───────────────────────
|
||||
//
|
||||
// MCP tool calls reach `import_scene` via stdio → index.ts.
|
||||
// The handler does: `sceneData = JSON.parse(params.data)` with no sanitization.
|
||||
//
|
||||
// SAFETY NOTE: In modern Node.js (V8 ≥ 8.x), JSON.parse does NOT pollute
|
||||
// Object.prototype when encountering `{"__proto__": ...}` — it creates a plain
|
||||
// key named "__proto__" on the result object without calling [[Set]] on the
|
||||
// prototype chain. However, downstream code that uses Object.assign() or
|
||||
// spread {...sceneData} can re-trigger pollution if the key is spread into
|
||||
// an object whose prototype is Object.prototype.
|
||||
//
|
||||
// The tests below are NOT executable without a running MCP stdio process.
|
||||
// They are represented as unit assertions on the JSON.parse behaviour itself
|
||||
// to document the exact risk surface.
|
||||
|
||||
describe('MCP import_scene — JSON.parse prototype behaviour (gap documentation)', () => {
|
||||
it('JSON.parse with __proto__ key does NOT pollute Object.prototype in modern Node', () => {
|
||||
// This is the safety net we rely on. If this test ever fails, the MCP path
|
||||
// is directly exploitable for prototype pollution.
|
||||
const parsed = JSON.parse('{"__proto__": {"isAdmin": true}}');
|
||||
|
||||
// The key exists as a plain own property, not as a prototype mutation
|
||||
expect(Object.prototype.hasOwnProperty.call(parsed, '__proto__')).toBe(true);
|
||||
expect((Object.prototype as any).isAdmin).toBeUndefined();
|
||||
});
|
||||
|
||||
it('Object.assign with a JSON-parsed __proto__ key mutates the spread target prototype chain', () => {
|
||||
// CONFIRMED REAL BEHAVIOUR: Object.assign({}, parsed) where parsed has a
|
||||
// "__proto__" own key (from JSON.parse) triggers the __proto__ setter on
|
||||
// Object.prototype, which changes the *target* object's prototype to the
|
||||
// value. This means `cloned.injected` resolves via prototype lookup.
|
||||
//
|
||||
// This does NOT pollute Object.prototype itself — only the cloned object's
|
||||
// prototype chain. But any code in index.ts that does `{ ...sceneData }` or
|
||||
// `Object.assign({}, sceneData)` after JSON.parse on MCP input is affected.
|
||||
const parsed = JSON.parse('{"__proto__": {"injected": true}}') as any;
|
||||
|
||||
// Verify parsed has __proto__ as an own property (not prototype pollution)
|
||||
expect(Object.prototype.hasOwnProperty.call(parsed, '__proto__')).toBe(true);
|
||||
expect((Object.prototype as any).injected).toBeUndefined(); // Object.prototype is clean
|
||||
|
||||
// Spreading/assigning DOES change the target's prototype:
|
||||
const cloned = Object.assign({}, parsed);
|
||||
expect((cloned as any).injected).toBe(true); // inherited from mutated prototype
|
||||
|
||||
// Object.prototype is still clean after the spread
|
||||
expect((Object.prototype as any).injected).toBeUndefined();
|
||||
});
|
||||
|
||||
it('deeply nested JSON (depth 1000) does not cause stack overflow during JSON.parse', () => {
|
||||
// MCP import_scene does JSON.parse on user-supplied data with no depth limit.
|
||||
// Node.js JSON.parse handles deep nesting iteratively — verify it does not
|
||||
// blow the call stack at practical depths.
|
||||
const depth = 1000;
|
||||
const nested = '['.repeat(depth) + '1' + ']'.repeat(depth);
|
||||
|
||||
expect(() => JSON.parse(nested)).not.toThrow();
|
||||
});
|
||||
|
||||
it('HYPOTHESIS: extremely deep nesting (depth 100_000) may throw in some runtimes', () => {
|
||||
// Document the practical limit. If this throws a RangeError (stack overflow),
|
||||
// the MCP import_scene handler is vulnerable to DoS via deeply nested payloads.
|
||||
const depth = 100_000;
|
||||
const nested = '['.repeat(depth) + '1' + ']'.repeat(depth);
|
||||
|
||||
// We only assert "does not silently succeed with wrong data" — either it
|
||||
// parses correctly or throws a catchable error (not a process crash).
|
||||
let threw = false;
|
||||
try {
|
||||
JSON.parse(nested);
|
||||
} catch {
|
||||
threw = true;
|
||||
}
|
||||
// Either outcome is acceptable — the key assertion is that the process survives
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Path traversal — export endpoint (shared sanitizeFilePath logic) ──────────
|
||||
|
||||
describe('Path traversal on export endpoints', () => {
|
||||
it('POST /api/export/image with path traversal in filePath → error (not 200)', async () => {
|
||||
const res = await request(app)
|
||||
.post('/api/export/image')
|
||||
.send({
|
||||
filePath: '../../../../etc/passwd',
|
||||
format: 'png'
|
||||
});
|
||||
|
||||
// Should not be 200 — either 400 (validation) or 500 (server error before write)
|
||||
expect(res.status).not.toBe(200);
|
||||
});
|
||||
|
||||
it('POST /api/export/image with absolute path outside cwd → error (not 200)', async () => {
|
||||
const outsidePath = '/tmp/traversal-test-excalidraw.png';
|
||||
const res = await request(app)
|
||||
.post('/api/export/image')
|
||||
.send({
|
||||
filePath: outsidePath,
|
||||
format: 'png'
|
||||
});
|
||||
|
||||
expect(res.status).not.toBe(200);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Null-byte injection ───────────────────────────────────────────────────────
|
||||
|
||||
describe('Null byte and encoding edge cases', () => {
|
||||
it('POST /api/elements with null byte in type field does not crash server', async () => {
|
||||
const res = await request(app)
|
||||
.post('/api/elements')
|
||||
.send({ type: 'rectangle\x00', x: 0, y: 0, width: 100, height: 50 });
|
||||
|
||||
// Must return a 4xx — not 200 and not an unhandled 500
|
||||
expect(res.status).toBeGreaterThanOrEqual(400);
|
||||
expect(res.status).toBeLessThan(500);
|
||||
});
|
||||
|
||||
it('POST /api/elements/batch with oversized element text does not hang', async () => {
|
||||
// Verify server responds within reasonable time even with a large text field
|
||||
// (this is a regression guard — a 413 or 400 is both acceptable)
|
||||
const res = await request(app)
|
||||
.post('/api/elements')
|
||||
.set('Content-Type', 'application/json')
|
||||
.send(JSON.stringify({
|
||||
type: 'text',
|
||||
x: 0, y: 0, width: 100, height: 50,
|
||||
text: 'A'.repeat(200 * 1024) // 200 KB — over the 100 KB limit
|
||||
}));
|
||||
|
||||
expect(res.status).toBe(413);
|
||||
});
|
||||
});
|
||||
@@ -51,7 +51,7 @@ describe('Middleware order', () => {
|
||||
|
||||
it('401 with bad API key is still rate-limited', async () => {
|
||||
const ip = '10.20.0.3';
|
||||
for (let i = 0; i < 100; i++) {
|
||||
for (let i = 0; i < 500; i++) {
|
||||
await request(app)
|
||||
.get('/api/elements')
|
||||
.set('X-API-Key', 'wrong-key')
|
||||
|
||||
@@ -0,0 +1,182 @@
|
||||
/**
|
||||
* End-to-end tests for project switching.
|
||||
*
|
||||
* Exercises the full HTTP stack: create projects → add elements → switch →
|
||||
* verify elements are isolated per project and survive round-trips.
|
||||
*/
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
||||
import request from 'supertest';
|
||||
import { initDb, closeDb, setActiveTenant } from '../../src/db.js';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import fs from 'fs';
|
||||
|
||||
let dbPath: string;
|
||||
let app: any;
|
||||
|
||||
beforeEach(async () => {
|
||||
dbPath = path.join(os.tmpdir(), `excalidraw-e2e-project-switch-${Date.now()}-${Math.random().toString(36).slice(2)}.db`);
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
const mod = await import('../../src/server.js');
|
||||
app = mod.default;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
closeDb();
|
||||
for (const suffix of ['', '-wal', '-shm']) {
|
||||
try { fs.unlinkSync(dbPath + suffix); } catch {}
|
||||
}
|
||||
});
|
||||
|
||||
function rect(id: string, x = 0, y = 0) {
|
||||
return { id, type: 'rectangle', x, y, width: 100, height: 60, version: 1 };
|
||||
}
|
||||
|
||||
// ─── E2E: draw in project, switch away, switch back ─────────
|
||||
|
||||
describe('E2E: project switch round-trip', () => {
|
||||
it('draw 2 elements in "dude", switch to default, switch back — elements preserved', async () => {
|
||||
// 1. Create project "dude"
|
||||
const createRes = await request(app).post('/api/projects').send({ name: 'dude' });
|
||||
expect(createRes.status).toBe(201);
|
||||
const dudeId = createRes.body.project.id;
|
||||
|
||||
// Remember default project id
|
||||
const listBefore = await request(app).get('/api/projects');
|
||||
const defaultProject = listBefore.body.projects.find((p: any) => p.name === 'Default');
|
||||
expect(defaultProject).toBeDefined();
|
||||
const defaultId = defaultProject.id;
|
||||
|
||||
// 2. Switch to "dude"
|
||||
const switchRes = await request(app).put('/api/project/active').send({ projectId: dudeId });
|
||||
expect(switchRes.status).toBe(200);
|
||||
|
||||
// 3. Draw 2 rectangles in "dude"
|
||||
const r1 = await request(app).post('/api/elements').send(rect('dude-box-1', 10, 10));
|
||||
const r2 = await request(app).post('/api/elements').send(rect('dude-box-2', 200, 200));
|
||||
expect(r1.status).toBe(200);
|
||||
expect(r2.status).toBe(200);
|
||||
|
||||
// Verify 2 elements present
|
||||
const dudeCheck1 = await request(app).get('/api/elements');
|
||||
expect(dudeCheck1.body.elements.length).toBe(2);
|
||||
|
||||
// 4. Switch to "default"
|
||||
await request(app).put('/api/project/active').send({ projectId: defaultId });
|
||||
|
||||
// Default should be empty
|
||||
const defaultCheck = await request(app).get('/api/elements');
|
||||
expect(defaultCheck.body.elements.length).toBe(0);
|
||||
|
||||
// 5. Switch back to "dude"
|
||||
await request(app).put('/api/project/active').send({ projectId: dudeId });
|
||||
|
||||
// 6. Verify both elements are still there
|
||||
const dudeCheck2 = await request(app).get('/api/elements');
|
||||
expect(dudeCheck2.body.elements.length).toBe(2);
|
||||
const ids = dudeCheck2.body.elements.map((e: any) => e.id);
|
||||
expect(ids).toContain('dude-box-1');
|
||||
expect(ids).toContain('dude-box-2');
|
||||
});
|
||||
|
||||
it('multiple switches do not leak elements between projects', async () => {
|
||||
// Create 3 projects
|
||||
const pA = await request(app).post('/api/projects').send({ name: 'Alpha' });
|
||||
const pB = await request(app).post('/api/projects').send({ name: 'Bravo' });
|
||||
const pC = await request(app).post('/api/projects').send({ name: 'Charlie' });
|
||||
const aId = pA.body.project.id;
|
||||
const bId = pB.body.project.id;
|
||||
const cId = pC.body.project.id;
|
||||
|
||||
// Add 1 element to each
|
||||
await request(app).put('/api/project/active').send({ projectId: aId });
|
||||
await request(app).post('/api/elements').send(rect('alpha-el'));
|
||||
|
||||
await request(app).put('/api/project/active').send({ projectId: bId });
|
||||
await request(app).post('/api/elements').send(rect('bravo-el'));
|
||||
|
||||
await request(app).put('/api/project/active').send({ projectId: cId });
|
||||
await request(app).post('/api/elements').send(rect('charlie-el'));
|
||||
|
||||
// Rapid switching: C → A → B → A → C
|
||||
await request(app).put('/api/project/active').send({ projectId: aId });
|
||||
await request(app).put('/api/project/active').send({ projectId: bId });
|
||||
await request(app).put('/api/project/active').send({ projectId: aId });
|
||||
await request(app).put('/api/project/active').send({ projectId: cId });
|
||||
|
||||
// Verify each project has exactly its own element
|
||||
await request(app).put('/api/project/active').send({ projectId: aId });
|
||||
const aElems = await request(app).get('/api/elements');
|
||||
expect(aElems.body.elements.length).toBe(1);
|
||||
expect(aElems.body.elements[0].id).toBe('alpha-el');
|
||||
|
||||
await request(app).put('/api/project/active').send({ projectId: bId });
|
||||
const bElems = await request(app).get('/api/elements');
|
||||
expect(bElems.body.elements.length).toBe(1);
|
||||
expect(bElems.body.elements[0].id).toBe('bravo-el');
|
||||
|
||||
await request(app).put('/api/project/active').send({ projectId: cId });
|
||||
const cElems = await request(app).get('/api/elements');
|
||||
expect(cElems.body.elements.length).toBe(1);
|
||||
expect(cElems.body.elements[0].id).toBe('charlie-el');
|
||||
});
|
||||
|
||||
it('updating an element in one project does not affect another', async () => {
|
||||
const pX = await request(app).post('/api/projects').send({ name: 'ProjX' });
|
||||
const xId = pX.body.project.id;
|
||||
const listRes = await request(app).get('/api/projects');
|
||||
const defaultId = listRes.body.projects.find((p: any) => p.name === 'Default').id;
|
||||
|
||||
// Add element to default
|
||||
await request(app).put('/api/project/active').send({ projectId: defaultId });
|
||||
await request(app).post('/api/elements').send(rect('def-rect', 0, 0));
|
||||
|
||||
// Add element to ProjX
|
||||
await request(app).put('/api/project/active').send({ projectId: xId });
|
||||
await request(app).post('/api/elements').send(rect('x-rect', 0, 0));
|
||||
|
||||
// Update element in ProjX
|
||||
const updateRes = await request(app).put('/api/elements/x-rect').send({ x: 999, y: 999 });
|
||||
expect(updateRes.status).toBe(200);
|
||||
expect(updateRes.body.success).toBe(true);
|
||||
|
||||
// Verify ProjX has updated coords
|
||||
const xElems = await request(app).get('/api/elements');
|
||||
expect(xElems.body.elements).toHaveLength(1);
|
||||
expect(xElems.body.elements[0].x).toBe(999);
|
||||
|
||||
// Verify Default still has original coords
|
||||
await request(app).put('/api/project/active').send({ projectId: defaultId });
|
||||
const defElems = await request(app).get('/api/elements');
|
||||
expect(defElems.body.elements[0].x).toBe(0);
|
||||
});
|
||||
|
||||
it('deleting an element in one project does not affect another', async () => {
|
||||
const pY = await request(app).post('/api/projects').send({ name: 'ProjY' });
|
||||
const yId = pY.body.project.id;
|
||||
const listRes = await request(app).get('/api/projects');
|
||||
const defaultId = listRes.body.projects.find((p: any) => p.name === 'Default').id;
|
||||
|
||||
// Add element to default
|
||||
await request(app).put('/api/project/active').send({ projectId: defaultId });
|
||||
await request(app).post('/api/elements').send(rect('def-del', 50, 50));
|
||||
|
||||
// Add element to ProjY
|
||||
await request(app).put('/api/project/active').send({ projectId: yId });
|
||||
await request(app).post('/api/elements').send(rect('y-del', 50, 50));
|
||||
|
||||
// Delete from ProjY
|
||||
await request(app).delete('/api/elements/y-del');
|
||||
|
||||
// ProjY: 0 elements
|
||||
const yElems = await request(app).get('/api/elements');
|
||||
expect(yElems.body.elements.length).toBe(0);
|
||||
|
||||
// Default: still has its element
|
||||
await request(app).put('/api/project/active').send({ projectId: defaultId });
|
||||
const defElems = await request(app).get('/api/elements');
|
||||
expect(defElems.body.elements.length).toBe(1);
|
||||
expect(defElems.body.elements[0].id).toBe('def-del');
|
||||
});
|
||||
});
|
||||
@@ -105,7 +105,7 @@ describe('Rate limiting — destructive endpoints', () => {
|
||||
describe('Rate limiting — sync endpoints', () => {
|
||||
it('returns 429 after exceeding /api/elements/sync write-burst limit', async () => {
|
||||
const ip = '10.10.0.1';
|
||||
for (let i = 0; i < 10; i++) {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
await request(app)
|
||||
.post('/api/elements/sync')
|
||||
.set('X-Forwarded-For', ip)
|
||||
@@ -122,7 +122,7 @@ describe('Rate limiting — sync endpoints', () => {
|
||||
|
||||
it('returns 429 after exceeding /api/elements/sync/v2 write-burst limit', async () => {
|
||||
const ip = '10.10.0.2';
|
||||
for (let i = 0; i < 10; i++) {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
await request(app)
|
||||
.post('/api/elements/sync/v2')
|
||||
.set('X-Forwarded-For', ip)
|
||||
@@ -139,7 +139,7 @@ describe('Rate limiting — sync endpoints', () => {
|
||||
|
||||
it('sync 429 responses include rate-limit headers', async () => {
|
||||
const ip = '10.10.0.3';
|
||||
for (let i = 0; i < 10; i++) {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
await request(app)
|
||||
.post('/api/elements/sync')
|
||||
.set('X-Forwarded-For', ip)
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* Unit tests for src/security.ts
|
||||
*
|
||||
* Covers: validateApiKey, sanitizeSearchQuery, sanitizeBody behaviour.
|
||||
* No server or DB required — pure function tests.
|
||||
*/
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
||||
import {
|
||||
validateApiKey,
|
||||
sanitizeSearchQuery,
|
||||
InvalidSearchQueryError,
|
||||
isAuthEnabled,
|
||||
} from '../../src/security.js';
|
||||
|
||||
// ── validateApiKey ────────────────────────────────────────────────────────────
|
||||
|
||||
describe('validateApiKey — auth disabled', () => {
|
||||
beforeEach(() => { delete process.env.EXCALIDRAW_API_KEY; });
|
||||
|
||||
it('returns true for any value when no API key env var is set', () => {
|
||||
expect(validateApiKey('anything')).toBe(true);
|
||||
expect(validateApiKey(undefined)).toBe(true);
|
||||
expect(validateApiKey('')).toBe(true);
|
||||
});
|
||||
|
||||
it('isAuthEnabled returns false when env var is unset', () => {
|
||||
expect(isAuthEnabled()).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('validateApiKey — auth enabled', () => {
|
||||
const CORRECT_KEY = 'super-secret-key-32chars!!!!!!!!';
|
||||
|
||||
beforeEach(() => { process.env.EXCALIDRAW_API_KEY = CORRECT_KEY; });
|
||||
afterEach(() => { delete process.env.EXCALIDRAW_API_KEY; });
|
||||
|
||||
it('returns true for exact match', () => {
|
||||
expect(validateApiKey(CORRECT_KEY)).toBe(true);
|
||||
});
|
||||
|
||||
it('returns false for undefined', () => {
|
||||
expect(validateApiKey(undefined)).toBe(false);
|
||||
});
|
||||
|
||||
it('returns false for empty string', () => {
|
||||
expect(validateApiKey('')).toBe(false);
|
||||
});
|
||||
|
||||
it('returns false for array (non-string type guard)', () => {
|
||||
expect(validateApiKey(['correct'] as any)).toBe(false);
|
||||
});
|
||||
|
||||
it('returns false for a wrong key of the SAME length — timingSafeEqual path', () => {
|
||||
// Same length forces the timingSafeEqual code path (not the early-exit).
|
||||
// timingSafeEqual must not throw when buffers are the same length.
|
||||
const sameLen = 'X'.repeat(CORRECT_KEY.length);
|
||||
expect(() => validateApiKey(sameLen)).not.toThrow();
|
||||
expect(validateApiKey(sameLen)).toBe(false);
|
||||
});
|
||||
|
||||
it('returns false for correct key with one extra char (different length)', () => {
|
||||
// DESIGN NOTE: the current implementation returns false early when lengths
|
||||
// differ, without calling timingSafeEqual. This means an attacker probing
|
||||
// keys of length 1..N can infer the correct key length via response-time
|
||||
// differences. Documented here as a known design decision.
|
||||
expect(validateApiKey(CORRECT_KEY + 'x')).toBe(false);
|
||||
});
|
||||
|
||||
it('returns false for correct key with one char missing', () => {
|
||||
expect(validateApiKey(CORRECT_KEY.slice(0, -1))).toBe(false);
|
||||
});
|
||||
|
||||
it('returns false for key that differs only in one character', () => {
|
||||
// Replace last char with something definitely different from the original
|
||||
const lastChar = CORRECT_KEY[CORRECT_KEY.length - 1]!;
|
||||
const differentChar = lastChar === 'Z' ? 'A' : 'Z';
|
||||
const almostRight = CORRECT_KEY.slice(0, -1) + differentChar;
|
||||
expect(validateApiKey(almostRight)).toBe(false);
|
||||
});
|
||||
|
||||
it('isAuthEnabled returns true when env var is set', () => {
|
||||
expect(isAuthEnabled()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ── sanitizeSearchQuery ───────────────────────────────────────────────────────
|
||||
|
||||
describe('sanitizeSearchQuery — valid inputs', () => {
|
||||
it('trims whitespace and returns clean query', () => {
|
||||
expect(sanitizeSearchQuery(' hello world ')).toBe('hello world');
|
||||
});
|
||||
|
||||
it('returns empty string for whitespace-only input', () => {
|
||||
expect(sanitizeSearchQuery(' ')).toBe('');
|
||||
});
|
||||
|
||||
it('allows plain alphanumeric query', () => {
|
||||
expect(sanitizeSearchQuery('rectangle')).toBe('rectangle');
|
||||
});
|
||||
|
||||
it('allows hyphenated terms', () => {
|
||||
expect(sanitizeSearchQuery('my-diagram')).toBe('my-diagram');
|
||||
});
|
||||
|
||||
it('allows numbers', () => {
|
||||
expect(sanitizeSearchQuery('123')).toBe('123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('sanitizeSearchQuery — FTS operator injection', () => {
|
||||
it('throws on double-quote character', () => {
|
||||
expect(() => sanitizeSearchQuery('"quoted phrase"')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on AND operator (uppercase)', () => {
|
||||
expect(() => sanitizeSearchQuery('foo AND bar')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on AND operator (lowercase)', () => {
|
||||
expect(() => sanitizeSearchQuery('foo and bar')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on OR operator', () => {
|
||||
expect(() => sanitizeSearchQuery('foo OR bar')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on NOT operator', () => {
|
||||
expect(() => sanitizeSearchQuery('NOT secret')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on NEAR operator', () => {
|
||||
expect(() => sanitizeSearchQuery('foo NEAR bar')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on NEAR/N distance syntax', () => {
|
||||
expect(() => sanitizeSearchQuery('foo NEAR/5 bar')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on glob wildcard *', () => {
|
||||
expect(() => sanitizeSearchQuery('pass*')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on parentheses (grouping)', () => {
|
||||
expect(() => sanitizeSearchQuery('(foo bar)')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on curly braces', () => {
|
||||
expect(() => sanitizeSearchQuery('{foo}')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on caret prefix-weight operator', () => {
|
||||
expect(() => sanitizeSearchQuery('^important')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
|
||||
it('throws on colon column-filter syntax (FTS5 column filter)', () => {
|
||||
// "label_text:secret" would scope the search to a single FTS column.
|
||||
// Fixed: colon is now a blocked character.
|
||||
expect(() => sanitizeSearchQuery('label_text:secret')).toThrow(InvalidSearchQueryError);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
import { afterAll, beforeAll, describe, expect, it } from 'vitest';
|
||||
import WebSocket from 'ws';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import fs from 'fs';
|
||||
import { closeDb, initDb } from '../../src/db.js';
|
||||
|
||||
let port: number;
|
||||
let dbPath: string;
|
||||
let startCanvasServer: (() => Promise<void>) | undefined;
|
||||
let stopCanvasServer: (() => Promise<void>) | undefined;
|
||||
|
||||
function waitForOpen(ws: WebSocket, timeoutMs = 5000): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const timer = setTimeout(() => reject(new Error('WS open timeout')), timeoutMs);
|
||||
ws.once('open', () => {
|
||||
clearTimeout(timer);
|
||||
resolve();
|
||||
});
|
||||
ws.once('error', (err) => {
|
||||
clearTimeout(timer);
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
beforeAll(async () => {
|
||||
port = 3600 + Math.floor(Math.random() * 200);
|
||||
dbPath = path.join(os.tmpdir(), `excalidraw-smoke-ws-${Date.now()}.db`);
|
||||
|
||||
process.env.CANVAS_PORT = String(port);
|
||||
process.env.HOST = 'localhost';
|
||||
delete process.env.EXCALIDRAW_API_KEY;
|
||||
process.env.EXCALIDRAW_DB_PATH = dbPath;
|
||||
|
||||
initDb(dbPath);
|
||||
const serverMod = await import('../../src/server.js');
|
||||
startCanvasServer = serverMod.startCanvasServer;
|
||||
stopCanvasServer = serverMod.stopCanvasServer;
|
||||
await startCanvasServer();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
if (stopCanvasServer) {
|
||||
await stopCanvasServer();
|
||||
}
|
||||
closeDb();
|
||||
delete process.env.CANVAS_PORT;
|
||||
delete process.env.HOST;
|
||||
delete process.env.EXCALIDRAW_DB_PATH;
|
||||
for (const suffix of ['', '-wal', '-shm']) {
|
||||
try { fs.unlinkSync(dbPath + suffix); } catch {}
|
||||
}
|
||||
});
|
||||
|
||||
describe('Smoke WS + persistence checks', () => {
|
||||
it('creates SQLite database file', () => {
|
||||
expect(fs.existsSync(dbPath)).toBe(true);
|
||||
});
|
||||
|
||||
it('accepts WebSocket connection and reports websocket_clients in /health', async () => {
|
||||
const ws = new WebSocket(`ws://localhost:${port}`);
|
||||
await waitForOpen(ws);
|
||||
|
||||
const healthRes = await fetch(`http://localhost:${port}/health`);
|
||||
expect(healthRes.ok).toBe(true);
|
||||
const healthBody = await healthRes.json() as { websocket_clients: number; status: string };
|
||||
expect(healthBody.status).toBe('healthy');
|
||||
expect(healthBody.websocket_clients).toBeGreaterThanOrEqual(1);
|
||||
|
||||
ws.close();
|
||||
});
|
||||
});
|
||||
@@ -9,8 +9,12 @@ let dbPath: string;
|
||||
let app: any;
|
||||
const frontendDir = path.join(process.cwd(), 'dist/frontend');
|
||||
const frontendHtmlPath = path.join(frontendDir, 'index.html');
|
||||
const frontendAssetsDir = path.join(frontendDir, 'assets');
|
||||
const frontendSmokeAssetPath = path.join(frontendAssetsDir, 'smoke.js');
|
||||
let originalFrontendHtml: string | null = null;
|
||||
let hadFrontendHtml = false;
|
||||
let hadSmokeAsset = false;
|
||||
let originalSmokeAsset: string | null = null;
|
||||
|
||||
beforeEach(async () => {
|
||||
dbPath = path.join(os.tmpdir(), `excalidraw-smoke-test-${Date.now()}-${Math.random().toString(36).slice(2)}.db`);
|
||||
@@ -18,8 +22,12 @@ beforeEach(async () => {
|
||||
setActiveTenant('default');
|
||||
hadFrontendHtml = fs.existsSync(frontendHtmlPath);
|
||||
originalFrontendHtml = hadFrontendHtml ? fs.readFileSync(frontendHtmlPath, 'utf8') : null;
|
||||
hadSmokeAsset = fs.existsSync(frontendSmokeAssetPath);
|
||||
originalSmokeAsset = hadSmokeAsset ? fs.readFileSync(frontendSmokeAssetPath, 'utf8') : null;
|
||||
fs.mkdirSync(frontendDir, { recursive: true });
|
||||
fs.mkdirSync(frontendAssetsDir, { recursive: true });
|
||||
fs.writeFileSync(frontendHtmlPath, '<!doctype html><html><head><title>Smoke</title></head><body><div id="root"></div></body></html>');
|
||||
fs.writeFileSync(frontendSmokeAssetPath, 'console.log("smoke asset");');
|
||||
const mod = await import('../../src/server.js');
|
||||
app = mod.default;
|
||||
});
|
||||
@@ -32,6 +40,11 @@ afterEach(() => {
|
||||
} else {
|
||||
try { fs.unlinkSync(frontendHtmlPath); } catch {}
|
||||
}
|
||||
if (hadSmokeAsset && originalSmokeAsset !== null) {
|
||||
fs.writeFileSync(frontendSmokeAssetPath, originalSmokeAsset);
|
||||
} else {
|
||||
try { fs.unlinkSync(frontendSmokeAssetPath); } catch {}
|
||||
}
|
||||
for (const suffix of ['', '-wal', '-shm']) {
|
||||
try { fs.unlinkSync(dbPath + suffix); } catch {}
|
||||
}
|
||||
@@ -48,6 +61,13 @@ describe('Smoke checks', () => {
|
||||
expect(rootRes.text).toContain('<div id="root"></div>');
|
||||
});
|
||||
|
||||
it('serves frontend assets from /assets', async () => {
|
||||
const assetRes = await request(app).get('/assets/smoke.js');
|
||||
expect(assetRes.status).toBe(200);
|
||||
expect(assetRes.text).toContain('smoke asset');
|
||||
expect(assetRes.headers['content-type']).toContain('javascript');
|
||||
});
|
||||
|
||||
it('supports a keyed create-list-delete smoke flow', async () => {
|
||||
process.env.EXCALIDRAW_API_KEY = 'smoke-secret';
|
||||
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
||||
import request from 'supertest';
|
||||
import {
|
||||
closeDb,
|
||||
ensureTenant,
|
||||
initDb,
|
||||
setActiveTenant,
|
||||
} from '../../src/db.js';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import fs from 'fs';
|
||||
|
||||
let dbPath: string;
|
||||
let app: any;
|
||||
|
||||
beforeEach(async () => {
|
||||
dbPath = path.join(
|
||||
os.tmpdir(),
|
||||
`excalidraw-tenant-authz-${Date.now()}-${Math.random().toString(36).slice(2)}.db`
|
||||
);
|
||||
initDb(dbPath);
|
||||
setActiveTenant('default');
|
||||
process.env.EXCALIDRAW_API_KEY = 'tenant-secret';
|
||||
const mod = await import('../../src/server.js');
|
||||
app = mod.default;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
delete process.env.EXCALIDRAW_API_KEY;
|
||||
closeDb();
|
||||
for (const suffix of ['', '-wal', '-shm']) {
|
||||
try { fs.unlinkSync(dbPath + suffix); } catch {}
|
||||
}
|
||||
});
|
||||
|
||||
describe('Tenant scoping behavior with API key auth', () => {
|
||||
it('any valid API key caller can scope into any existing tenant via X-Tenant-Id', async () => {
|
||||
ensureTenant('tenant-a', 'Tenant A', '/a');
|
||||
ensureTenant('tenant-b', 'Tenant B', '/b');
|
||||
|
||||
await request(app)
|
||||
.post('/api/elements')
|
||||
.set('X-API-Key', 'tenant-secret')
|
||||
.set('X-Tenant-Id', 'tenant-a')
|
||||
.send({ id: 'a-only', type: 'rectangle', x: 0, y: 0, width: 40, height: 30 });
|
||||
|
||||
await request(app)
|
||||
.post('/api/elements')
|
||||
.set('X-API-Key', 'tenant-secret')
|
||||
.set('X-Tenant-Id', 'tenant-b')
|
||||
.send({ id: 'b-only', type: 'ellipse', x: 0, y: 0, width: 40, height: 30 });
|
||||
|
||||
const aRes = await request(app)
|
||||
.get('/api/elements')
|
||||
.set('X-API-Key', 'tenant-secret')
|
||||
.set('X-Tenant-Id', 'tenant-a');
|
||||
|
||||
const bRes = await request(app)
|
||||
.get('/api/elements')
|
||||
.set('X-API-Key', 'tenant-secret')
|
||||
.set('X-Tenant-Id', 'tenant-b');
|
||||
|
||||
expect(aRes.status).toBe(200);
|
||||
expect(bRes.status).toBe(200);
|
||||
expect(aRes.body.elements.map((el: any) => el.id)).toContain('a-only');
|
||||
expect(aRes.body.elements.map((el: any) => el.id)).not.toContain('b-only');
|
||||
expect(bRes.body.elements.map((el: any) => el.id)).toContain('b-only');
|
||||
expect(bRes.body.elements.map((el: any) => el.id)).not.toContain('a-only');
|
||||
});
|
||||
|
||||
it('missing X-Tenant-Id falls back to active tenant context', async () => {
|
||||
ensureTenant('tenant-fallback', 'Tenant Fallback', '/fallback');
|
||||
|
||||
const switchRes = await request(app)
|
||||
.put('/api/tenant/active')
|
||||
.set('X-API-Key', 'tenant-secret')
|
||||
.send({ tenantId: 'tenant-fallback' });
|
||||
expect(switchRes.status).toBe(200);
|
||||
|
||||
await request(app)
|
||||
.post('/api/elements')
|
||||
.set('X-API-Key', 'tenant-secret')
|
||||
.send({ id: 'fallback-el', type: 'rectangle', x: 0, y: 0, width: 10, height: 10 });
|
||||
|
||||
const listRes = await request(app)
|
||||
.get('/api/elements')
|
||||
.set('X-API-Key', 'tenant-secret');
|
||||
|
||||
expect(listRes.status).toBe(200);
|
||||
expect(listRes.body.elements.map((el: any) => el.id)).toContain('fallback-el');
|
||||
});
|
||||
|
||||
it('unknown X-Tenant-Id is rejected by server behavior (document current trust boundary)', async () => {
|
||||
const res = await request(app)
|
||||
.get('/api/elements')
|
||||
.set('X-API-Key', 'tenant-secret')
|
||||
.set('X-Tenant-Id', 'does-not-exist');
|
||||
|
||||
expect(res.status).toBeGreaterThanOrEqual(400);
|
||||
expect(res.status).toBeLessThan(600);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,247 @@
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
|
||||
const API = 'http://127.0.0.1:3100';
|
||||
|
||||
async function resetCanvas(request: any): Promise<void> {
|
||||
await request.delete(`${API}/api/elements/clear?confirm=true`);
|
||||
}
|
||||
|
||||
async function waitForConnected(page: Page): Promise<void> {
|
||||
await expect(page.locator('.status span')).toContainText('Connected', { timeout: 5000 });
|
||||
}
|
||||
|
||||
async function getElement(request: any, id: string): Promise<any> {
|
||||
const res = await request.get(`${API}/api/elements/${id}`);
|
||||
expect(res.ok()).toBe(true);
|
||||
const body = await res.json() as { element: any };
|
||||
return body.element;
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ request }) => {
|
||||
await resetCanvas(request);
|
||||
});
|
||||
|
||||
test.describe('Phase 2 regressions', () => {
|
||||
test('position stability survives reloads for pre-seeded elements', async ({ page, request }) => {
|
||||
await request.post(`${API}/api/elements`, {
|
||||
data: {
|
||||
id: 'pos-stable-1',
|
||||
type: 'rectangle',
|
||||
x: 220,
|
||||
y: 140,
|
||||
width: 260,
|
||||
height: 110,
|
||||
label: { text: 'Stable Label' },
|
||||
},
|
||||
});
|
||||
|
||||
await page.goto('/');
|
||||
await waitForConnected(page);
|
||||
await page.waitForTimeout(800);
|
||||
|
||||
const initialRes = await request.get(`${API}/api/elements/pos-stable-1`);
|
||||
expect(initialRes.ok()).toBe(true);
|
||||
const initial = (await initialRes.json()).element as {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
label?: { text?: string };
|
||||
};
|
||||
|
||||
await page.reload();
|
||||
await waitForConnected(page);
|
||||
await page.waitForTimeout(800);
|
||||
|
||||
const afterReloadRes = await request.get(`${API}/api/elements/pos-stable-1`);
|
||||
expect(afterReloadRes.ok()).toBe(true);
|
||||
const afterReload = (await afterReloadRes.json()).element as {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
label?: { text?: string };
|
||||
};
|
||||
|
||||
expect(afterReload.x).toBe(initial.x);
|
||||
expect(afterReload.y).toBe(initial.y);
|
||||
expect(afterReload.width).toBe(initial.width);
|
||||
expect(afterReload.height).toBe(initial.height);
|
||||
expect(afterReload.label?.text).toBe('Stable Label');
|
||||
});
|
||||
|
||||
test('new container arrival auto-injects title and subtitle text', async ({ page, request }) => {
|
||||
await page.goto('/');
|
||||
await waitForConnected(page);
|
||||
|
||||
const createRes = await request.post(`${API}/api/elements`, {
|
||||
data: {
|
||||
id: 'auto-title-seed',
|
||||
type: 'rectangle',
|
||||
x: 220,
|
||||
y: 140,
|
||||
width: 260,
|
||||
height: 110,
|
||||
},
|
||||
});
|
||||
expect(createRes.ok()).toBe(true);
|
||||
|
||||
await page.waitForTimeout(1200);
|
||||
await page.getByRole('button', { name: /^Sync$/ }).click();
|
||||
|
||||
await expect.poll(async () => {
|
||||
const listRes = await request.get(`${API}/api/elements`);
|
||||
if (!listRes.ok()) return false;
|
||||
const listBody = await listRes.json() as { elements: any[] };
|
||||
const titleText = listBody.elements.find((el) => el.type === 'text' && el.text === 'Title');
|
||||
const subtitleText = listBody.elements.find((el) => el.type === 'text' && el.text === 'Text here');
|
||||
return Boolean(titleText && subtitleText);
|
||||
}, { timeout: 7000 }).toBe(true);
|
||||
});
|
||||
|
||||
test('two connected tabs receive cross-tab sync events', async ({ page, context }) => {
|
||||
const page2 = await context.newPage();
|
||||
|
||||
await page2.addInitScript(() => {
|
||||
const NativeWS = window.WebSocket;
|
||||
(window as any).__wsSeenTypes = [] as string[];
|
||||
|
||||
const Wrapped = function(this: any, url: string | URL, protocols?: string | string[]) {
|
||||
const ws = protocols !== undefined ? new NativeWS(url, protocols) : new NativeWS(url);
|
||||
ws.addEventListener('message', (event) => {
|
||||
try {
|
||||
const raw = typeof event.data === 'string' ? event.data : '';
|
||||
const parsed = JSON.parse(raw);
|
||||
if (parsed?.type) {
|
||||
(window as any).__wsSeenTypes.push(parsed.type);
|
||||
}
|
||||
} catch {}
|
||||
});
|
||||
return ws;
|
||||
} as any;
|
||||
|
||||
Wrapped.prototype = NativeWS.prototype;
|
||||
Object.assign(Wrapped, NativeWS);
|
||||
window.WebSocket = Wrapped;
|
||||
});
|
||||
|
||||
await page.goto('/');
|
||||
await page2.goto('/');
|
||||
await waitForConnected(page);
|
||||
await waitForConnected(page2);
|
||||
|
||||
const createRes = await page.evaluate(async () => {
|
||||
const res = await fetch('/api/elements', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
id: 'two-tab-sync-1',
|
||||
type: 'rectangle',
|
||||
x: 30,
|
||||
y: 40,
|
||||
width: 120,
|
||||
height: 70,
|
||||
}),
|
||||
});
|
||||
return { ok: res.ok, status: res.status };
|
||||
});
|
||||
expect(createRes.ok).toBe(true);
|
||||
|
||||
await expect.poll(async () => {
|
||||
return await page2.evaluate(() =>
|
||||
Array.isArray((window as any).__wsSeenTypes) &&
|
||||
(window as any).__wsSeenTypes.includes('element_created')
|
||||
);
|
||||
}, { timeout: 6000 }).toBe(true);
|
||||
|
||||
await page2.close();
|
||||
});
|
||||
|
||||
test('curved arrow stays deformable after sync round-trip', async ({ page, request }) => {
|
||||
const arrowId = 'curve-sync-1';
|
||||
const initialPoints: [number, number][] = [[0, 0], [170, -90], [300, 50]];
|
||||
const deformedPoints: [number, number][] = [[0, 0], [120, -150], [330, 70]];
|
||||
|
||||
await request.post(`${API}/api/elements`, {
|
||||
data: {
|
||||
id: arrowId,
|
||||
type: 'arrow',
|
||||
x: 220,
|
||||
y: 190,
|
||||
width: 300,
|
||||
height: 120,
|
||||
points: initialPoints,
|
||||
roundness: { type: 2 },
|
||||
strokeColor: '#1e1e1e',
|
||||
backgroundColor: 'transparent',
|
||||
fillStyle: 'hachure',
|
||||
strokeWidth: 2,
|
||||
strokeStyle: 'solid',
|
||||
roughness: 1,
|
||||
opacity: 100,
|
||||
angle: 0,
|
||||
groupIds: [],
|
||||
frameId: null,
|
||||
boundElements: null,
|
||||
locked: false,
|
||||
seed: 123456,
|
||||
versionNonce: 654321,
|
||||
version: 1,
|
||||
isDeleted: false,
|
||||
},
|
||||
});
|
||||
|
||||
await page.goto('/');
|
||||
await waitForConnected(page);
|
||||
await page.waitForTimeout(900);
|
||||
|
||||
await page.getByRole('button', { name: /^Sync$/ }).click();
|
||||
await page.waitForTimeout(350);
|
||||
|
||||
const updateRes = await request.put(`${API}/api/elements/${arrowId}`, {
|
||||
data: {
|
||||
points: deformedPoints,
|
||||
roundness: { type: 2 },
|
||||
},
|
||||
});
|
||||
expect(updateRes.ok()).toBe(true);
|
||||
|
||||
await page.waitForTimeout(900);
|
||||
await page.getByRole('button', { name: /^Sync$/ }).click();
|
||||
|
||||
await expect.poll(async () => {
|
||||
const updated = await getElement(request, arrowId);
|
||||
const points = (updated.points ?? []) as [number, number][];
|
||||
return {
|
||||
midX: points[1]?.[0],
|
||||
midY: points[1]?.[1],
|
||||
roundnessType: updated.roundness?.type ?? null,
|
||||
};
|
||||
}, { timeout: 7000 }).toEqual({
|
||||
midX: deformedPoints[1]![0],
|
||||
midY: deformedPoints[1]![1],
|
||||
roundnessType: 2,
|
||||
});
|
||||
|
||||
const finalArrow = await getElement(request, arrowId) as {
|
||||
points: [number, number][];
|
||||
roundness?: { type?: number };
|
||||
};
|
||||
|
||||
expect(finalArrow.roundness?.type).toBe(2);
|
||||
expect(Array.isArray(finalArrow.points)).toBe(true);
|
||||
expect(finalArrow.points.length).toBe(3);
|
||||
|
||||
// Excalidraw may normalize edge points to half-pixel coordinates.
|
||||
expect(Math.abs(finalArrow.points[0]![0] - deformedPoints[0]![0])).toBeLessThanOrEqual(1);
|
||||
expect(Math.abs(finalArrow.points[0]![1] - deformedPoints[0]![1])).toBeLessThanOrEqual(1);
|
||||
expect(finalArrow.points[1]![0]).toBe(deformedPoints[1]![0]);
|
||||
expect(finalArrow.points[1]![1]).toBe(deformedPoints[1]![1]);
|
||||
expect(Math.abs(finalArrow.points[2]![0] - deformedPoints[2]![0])).toBeLessThanOrEqual(1);
|
||||
expect(Math.abs(finalArrow.points[2]![1] - deformedPoints[2]![1])).toBeLessThanOrEqual(1);
|
||||
|
||||
// Ensure shape actually deformed away from the initial geometry.
|
||||
expect(finalArrow.points[1]![0]).not.toBe(initialPoints[1]![0]);
|
||||
expect(finalArrow.points[1]![1]).not.toBe(initialPoints[1]![1]);
|
||||
});
|
||||
});
|
||||
@@ -33,7 +33,8 @@ describe('cleanElementForExcalidraw', () => {
|
||||
|
||||
expect(cleaned).not.toHaveProperty('createdAt');
|
||||
expect(cleaned).not.toHaveProperty('updatedAt');
|
||||
expect(cleaned).not.toHaveProperty('version');
|
||||
// version is kept — it is the Excalidraw element version, not a DB field
|
||||
expect(cleaned).toHaveProperty('version', 3);
|
||||
expect(cleaned).not.toHaveProperty('syncedAt');
|
||||
expect(cleaned).not.toHaveProperty('source');
|
||||
expect(cleaned).not.toHaveProperty('syncTimestamp');
|
||||
@@ -219,6 +220,21 @@ describe('computeElementHash', () => {
|
||||
const hash = computeElementHash([{ id: 'x', version: 1 }]);
|
||||
expect(hash.startsWith('1')).toBe(true);
|
||||
});
|
||||
|
||||
it('is order-stable for same id/version set', () => {
|
||||
const a = [
|
||||
{ id: 'a', version: 1 },
|
||||
{ id: 'b', version: 3 },
|
||||
{ id: 'c', version: 2 },
|
||||
];
|
||||
const b = [
|
||||
{ id: 'c', version: 2 },
|
||||
{ id: 'a', version: 1 },
|
||||
{ id: 'b', version: 3 },
|
||||
];
|
||||
|
||||
expect(computeElementHash(a)).toBe(computeElementHash(b));
|
||||
});
|
||||
});
|
||||
|
||||
// ─── isImageElement ─────────────────────────────────────────
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import {
|
||||
expandLabelsToNative,
|
||||
prepareElementsForScene,
|
||||
} from '../../frontend/src/utils/scenePreparation.js';
|
||||
import type { ServerElement } from '../../frontend/src/utils/elementHelpers.js';
|
||||
|
||||
describe('expandLabelsToNative', () => {
|
||||
it('creates a native bound text element at container center', () => {
|
||||
const input = [{
|
||||
id: 'box-1',
|
||||
type: 'rectangle',
|
||||
x: 100,
|
||||
y: 200,
|
||||
width: 300,
|
||||
height: 120,
|
||||
label: { text: 'Title' },
|
||||
boundElements: [{ id: 'arrow-1', type: 'arrow' }],
|
||||
}];
|
||||
|
||||
const out = expandLabelsToNative(input as any[]);
|
||||
expect(out).toHaveLength(2);
|
||||
|
||||
const container = out.find((el) => el.id === 'box-1') as any;
|
||||
const text = out.find((el) => el.id === 'box-1_label') as any;
|
||||
|
||||
expect(container.boundElements).toEqual([
|
||||
{ id: 'arrow-1', type: 'arrow' },
|
||||
{ id: 'box-1_label', type: 'text' },
|
||||
]);
|
||||
expect(text.containerId).toBe('box-1');
|
||||
expect(text.text).toBe('Title');
|
||||
expect(text.x).toBe(230);
|
||||
expect(text.y).toBe(250);
|
||||
});
|
||||
|
||||
it('passes through elements with no label.text unchanged', () => {
|
||||
const a = { id: 'a', type: 'rectangle', x: 0, y: 0, width: 100, height: 40 };
|
||||
const b = { id: 'b', type: 'text', x: 10, y: 10, text: 'Hello' };
|
||||
const out = expandLabelsToNative([a, b] as any[]);
|
||||
expect(out).toEqual([a, b]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('prepareElementsForScene', () => {
|
||||
it('routes native browser-synced elements without conversion', () => {
|
||||
const native = {
|
||||
id: 'native-1',
|
||||
type: 'rectangle',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 50,
|
||||
seed: 123,
|
||||
versionNonce: 456,
|
||||
version: 1,
|
||||
} as any as ServerElement;
|
||||
|
||||
const converter = vi.fn((elements: readonly any[]) =>
|
||||
elements.map((el) => ({ ...el, converted: true }))
|
||||
);
|
||||
|
||||
const out = prepareElementsForScene([native], converter as any);
|
||||
expect(converter).not.toHaveBeenCalled();
|
||||
expect(out).toHaveLength(1);
|
||||
expect((out[0] as any).id).toBe('native-1');
|
||||
expect((out[0] as any).converted).toBeUndefined();
|
||||
});
|
||||
|
||||
it('routes MCP stubs through converter', () => {
|
||||
const stub = {
|
||||
id: 'stub-1',
|
||||
type: 'rectangle',
|
||||
x: 10,
|
||||
y: 20,
|
||||
width: 80,
|
||||
height: 40,
|
||||
label: { text: 'Stub' },
|
||||
version: 1,
|
||||
} as ServerElement;
|
||||
|
||||
const converter = vi.fn((elements: readonly any[]) =>
|
||||
elements.map((el) => ({ ...el, converted: true }))
|
||||
);
|
||||
|
||||
const out = prepareElementsForScene([stub], converter as any);
|
||||
expect(converter).toHaveBeenCalledTimes(1);
|
||||
expect(out.some((el) => (el as any).id === 'stub-1' && (el as any).converted)).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,247 @@
|
||||
/**
|
||||
* Sync countdown logic tests.
|
||||
*
|
||||
* The countdown in App.tsx works like this:
|
||||
* - scheduleCountdown() is called on every canvas onChange
|
||||
* - It records lastChangeTime = Date.now()
|
||||
* - 400ms after the LAST change (idle guard), a setInterval starts
|
||||
* - Interval ticks every 200ms, shows Math.ceil((lastChange + DEBOUNCE_MS - now) / 1000)
|
||||
* - Countdown clears when remaining <= 0 or when sync starts
|
||||
*
|
||||
* These tests simulate that logic with fake timers so we can verify the
|
||||
* exact behaviour without mounting React.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
|
||||
|
||||
const DEBOUNCE_MS = 3000;
|
||||
const IDLE_GUARD_MS = 400;
|
||||
const TICK_MS = 200;
|
||||
|
||||
// ── Pure simulation of the countdown mechanism ────────────────
|
||||
|
||||
interface CountdownSim {
|
||||
scheduleCountdown: () => void;
|
||||
cancelCountdown: () => void; // called when sync starts
|
||||
getCountdown: () => number | null;
|
||||
cleanup: () => void;
|
||||
}
|
||||
|
||||
function makeCountdownSim(): CountdownSim {
|
||||
let lastChangeTime = 0;
|
||||
let countdown: number | null = null;
|
||||
let idleTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let tickInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function startTicking() {
|
||||
if (tickInterval) clearInterval(tickInterval);
|
||||
const initial = Math.ceil((lastChangeTime + DEBOUNCE_MS - Date.now()) / 1000);
|
||||
countdown = initial > 0 ? initial : null;
|
||||
tickInterval = setInterval(() => {
|
||||
const remaining = Math.ceil((lastChangeTime + DEBOUNCE_MS - Date.now()) / 1000);
|
||||
if (remaining <= 0) {
|
||||
clearInterval(tickInterval!);
|
||||
tickInterval = null;
|
||||
countdown = null;
|
||||
} else {
|
||||
countdown = remaining;
|
||||
}
|
||||
}, TICK_MS);
|
||||
}
|
||||
|
||||
function scheduleCountdown() {
|
||||
lastChangeTime = Date.now();
|
||||
// Reset idle guard — any new change pushes the idle window
|
||||
if (idleTimer) clearTimeout(idleTimer);
|
||||
// Hide countdown while actively drawing
|
||||
if (tickInterval) { clearInterval(tickInterval); tickInterval = null; }
|
||||
countdown = null;
|
||||
// Show countdown only after IDLE_GUARD_MS of quiet
|
||||
idleTimer = setTimeout(startTicking, IDLE_GUARD_MS);
|
||||
}
|
||||
|
||||
function cancelCountdown() {
|
||||
if (idleTimer) { clearTimeout(idleTimer); idleTimer = null; }
|
||||
if (tickInterval) { clearInterval(tickInterval); tickInterval = null; }
|
||||
countdown = null;
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
cancelCountdown();
|
||||
}
|
||||
|
||||
return {
|
||||
scheduleCountdown,
|
||||
cancelCountdown,
|
||||
getCountdown: () => countdown,
|
||||
cleanup,
|
||||
};
|
||||
}
|
||||
|
||||
// ── Tests ─────────────────────────────────────────────────────
|
||||
|
||||
describe('sync countdown — idle guard', () => {
|
||||
beforeEach(() => { vi.useFakeTimers(); });
|
||||
afterEach(() => { vi.useRealTimers(); });
|
||||
|
||||
it('shows null while actively drawing (within idle guard window)', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
// Still within the 400ms idle guard
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS - 10);
|
||||
expect(sim.getCountdown()).toBeNull();
|
||||
sim.cleanup();
|
||||
});
|
||||
|
||||
it('starts showing countdown after idle guard passes', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + TICK_MS);
|
||||
expect(sim.getCountdown()).toBeGreaterThan(0);
|
||||
sim.cleanup();
|
||||
});
|
||||
|
||||
it('resets idle guard on each new change — no countdown while drawing', () => {
|
||||
const sim = makeCountdownSim();
|
||||
|
||||
// Rapid changes every 100ms for 600ms total
|
||||
for (let i = 0; i < 6; i++) {
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(100);
|
||||
}
|
||||
// 600ms elapsed but idle guard resets each time — countdown still null
|
||||
expect(sim.getCountdown()).toBeNull();
|
||||
|
||||
// Now stop drawing; after idle guard the countdown appears
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + TICK_MS);
|
||||
expect(sim.getCountdown()).toBeGreaterThan(0);
|
||||
sim.cleanup();
|
||||
});
|
||||
});
|
||||
|
||||
describe('sync countdown — tick behaviour', () => {
|
||||
beforeEach(() => { vi.useFakeTimers(); });
|
||||
afterEach(() => { vi.useRealTimers(); });
|
||||
|
||||
it('starts at DEBOUNCE_MS/1000 seconds after idle', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + TICK_MS);
|
||||
expect(sim.getCountdown()).toBe(DEBOUNCE_MS / 1000);
|
||||
sim.cleanup();
|
||||
});
|
||||
|
||||
it('counts down and reaches null when debounce fires', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
|
||||
// Let idle guard pass + full debounce elapse
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + DEBOUNCE_MS + TICK_MS * 2);
|
||||
expect(sim.getCountdown()).toBeNull();
|
||||
sim.cleanup();
|
||||
});
|
||||
|
||||
it('passes through 3 → 2 → 1 without skipping', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
|
||||
const observed: (number | null)[] = [];
|
||||
// Sample countdown every second for 4 seconds after idle guard
|
||||
for (let s = 0; s <= 4; s++) {
|
||||
vi.advanceTimersByTime(s === 0 ? IDLE_GUARD_MS + TICK_MS : 1000);
|
||||
observed.push(sim.getCountdown());
|
||||
}
|
||||
|
||||
expect(observed).toContain(3);
|
||||
expect(observed).toContain(2);
|
||||
expect(observed).toContain(1);
|
||||
expect(observed[observed.length - 1]).toBeNull(); // cleared after 3s
|
||||
sim.cleanup();
|
||||
});
|
||||
|
||||
it('never goes negative', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
// Advance well past debounce
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + DEBOUNCE_MS + 5000);
|
||||
const val = sim.getCountdown();
|
||||
expect(val === null || val > 0).toBe(true);
|
||||
sim.cleanup();
|
||||
});
|
||||
});
|
||||
|
||||
describe('sync countdown — cancelCountdown (sync started)', () => {
|
||||
beforeEach(() => { vi.useFakeTimers(); });
|
||||
afterEach(() => { vi.useRealTimers(); });
|
||||
|
||||
it('cancels before idle guard fires', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(200); // still inside idle guard
|
||||
sim.cancelCountdown();
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + TICK_MS * 5);
|
||||
expect(sim.getCountdown()).toBeNull();
|
||||
sim.cleanup();
|
||||
});
|
||||
|
||||
it('cancels after countdown has started', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + TICK_MS + 1000); // countdown showing 2
|
||||
expect(sim.getCountdown()).toBe(2);
|
||||
sim.cancelCountdown();
|
||||
expect(sim.getCountdown()).toBeNull();
|
||||
sim.cleanup();
|
||||
});
|
||||
|
||||
it('allows a new countdown cycle after cancel', () => {
|
||||
const sim = makeCountdownSim();
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + TICK_MS + 1000);
|
||||
sim.cancelCountdown(); // sync started
|
||||
|
||||
// User draws again after sync
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + TICK_MS);
|
||||
expect(sim.getCountdown()).toBe(DEBOUNCE_MS / 1000);
|
||||
sim.cleanup();
|
||||
});
|
||||
});
|
||||
|
||||
describe('sync countdown — multiple change bursts', () => {
|
||||
beforeEach(() => { vi.useFakeTimers(); });
|
||||
afterEach(() => { vi.useRealTimers(); });
|
||||
|
||||
it('second burst after first sync resets correctly', () => {
|
||||
const sim = makeCountdownSim();
|
||||
|
||||
// First burst → sync → cancel
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + DEBOUNCE_MS + TICK_MS * 2);
|
||||
sim.cancelCountdown();
|
||||
|
||||
// Second burst
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS + TICK_MS);
|
||||
expect(sim.getCountdown()).toBe(DEBOUNCE_MS / 1000);
|
||||
sim.cleanup();
|
||||
});
|
||||
|
||||
it('countdown stays null between burst end and idle guard', () => {
|
||||
const sim = makeCountdownSim();
|
||||
|
||||
// Two rapid changes 50ms apart
|
||||
sim.scheduleCountdown();
|
||||
vi.advanceTimersByTime(50);
|
||||
sim.scheduleCountdown();
|
||||
|
||||
// 300ms after last change — still inside idle guard
|
||||
vi.advanceTimersByTime(300);
|
||||
expect(sim.getCountdown()).toBeNull();
|
||||
|
||||
// 400ms after last change — idle guard has passed
|
||||
vi.advanceTimersByTime(IDLE_GUARD_MS - 300 + TICK_MS);
|
||||
expect(sim.getCountdown()).toBeGreaterThan(0);
|
||||
sim.cleanup();
|
||||
});
|
||||
});
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
// ─── cleanElementForExcalidraw comprehensive ────────────────
|
||||
|
||||
describe('cleanElementForExcalidraw - comprehensive', () => {
|
||||
it('strips all server-only metadata fields', () => {
|
||||
it('strips server-only metadata fields but preserves Excalidraw version', () => {
|
||||
const serverEl = {
|
||||
id: 'el-1',
|
||||
type: 'rectangle',
|
||||
@@ -31,7 +31,8 @@ describe('cleanElementForExcalidraw - comprehensive', () => {
|
||||
const cleaned = cleanElementForExcalidraw(serverEl);
|
||||
expect(cleaned).not.toHaveProperty('createdAt');
|
||||
expect(cleaned).not.toHaveProperty('updatedAt');
|
||||
expect(cleaned).not.toHaveProperty('version');
|
||||
// version is kept — it is the Excalidraw element version, not a DB field
|
||||
expect(cleaned).toHaveProperty('version', 1);
|
||||
expect(cleaned).not.toHaveProperty('syncedAt');
|
||||
expect(cleaned).not.toHaveProperty('source');
|
||||
expect(cleaned).not.toHaveProperty('syncTimestamp');
|
||||
|
||||
Reference in New Issue
Block a user