feat: add custom style theme with per-type node/edge style editor
- New 'custom' ThemeId with dedicated ThemeCard + pencil edit button - CustomStyleModal: two-column editor for all node types (excl. groupRect/group) and edge types - Per node: border, background, icon color + opacity, default size (w/h) - Per edge: color + opacity, path style, animation - 'Apply to existing [Type]' per type, 'Apply All to Canvas' footer action - canvasStore: applyTypeNodeStyle, applyTypeEdgeStyle, applyAllCustomStyles actions - themeStore: customStyle state + setCustomStyle action - Backend: custom_style JSON column on canvas_state (ALTER TABLE migration), saved/loaded with canvas - App.tsx: custom_style included in save payload, restored on load (API + standalone) - Tests: +8 frontend (themeStore + canvasStore), +3 backend (canvas API)
This commit is contained in:
@@ -25,6 +25,7 @@ async def load_canvas(db: AsyncSession = Depends(get_db), _: str = Depends(get_c
|
||||
nodes=[NodeResponse.model_validate(n) for n in nodes],
|
||||
edges=[EdgeResponse.model_validate(e) for e in edges],
|
||||
viewport=viewport,
|
||||
custom_style=state.custom_style if state else None,
|
||||
)
|
||||
|
||||
|
||||
@@ -67,13 +68,14 @@ async def save_canvas(
|
||||
else:
|
||||
db.add(Edge(**edge_data.model_dump()))
|
||||
|
||||
# Upsert viewport
|
||||
# Upsert viewport + custom style
|
||||
state = await db.get(CanvasState, 1)
|
||||
if state:
|
||||
state.viewport = body.viewport
|
||||
state.custom_style = body.custom_style
|
||||
state.saved_at = datetime.now(timezone.utc)
|
||||
else:
|
||||
db.add(CanvasState(id=1, viewport=body.viewport))
|
||||
db.add(CanvasState(id=1, viewport=body.viewport, custom_style=body.custom_style))
|
||||
|
||||
await db.commit()
|
||||
return {"saved": True}
|
||||
|
||||
@@ -84,6 +84,8 @@ async def init_db() -> None:
|
||||
await conn.exec_driver_sql("ALTER TABLE edges ADD COLUMN waypoints JSON")
|
||||
with suppress(OperationalError):
|
||||
await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN properties JSON")
|
||||
with suppress(OperationalError):
|
||||
await conn.exec_driver_sql("ALTER TABLE canvas_state ADD COLUMN custom_style JSON")
|
||||
# Migrate hardware columns → properties JSON (idempotent: only runs on nodes where properties IS NULL)
|
||||
with suppress(OperationalError):
|
||||
rows = await conn.exec_driver_sql(
|
||||
|
||||
@@ -78,6 +78,7 @@ class CanvasState(Base):
|
||||
|
||||
id: Mapped[int] = mapped_column(Integer, primary_key=True, default=1)
|
||||
viewport: Mapped[dict[str, Any]] = mapped_column(JSON, default=dict)
|
||||
custom_style: Mapped[dict[str, Any] | None] = mapped_column(JSON, nullable=True)
|
||||
saved_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
|
||||
|
||||
|
||||
|
||||
@@ -62,9 +62,11 @@ class CanvasSaveRequest(BaseModel):
|
||||
nodes: list[NodeSave] = []
|
||||
edges: list[EdgeSave] = []
|
||||
viewport: dict[str, Any] = {}
|
||||
custom_style: dict[str, Any] | None = None
|
||||
|
||||
|
||||
class CanvasStateResponse(BaseModel):
|
||||
nodes: list[NodeResponse]
|
||||
edges: list[EdgeResponse]
|
||||
viewport: dict[str, Any]
|
||||
custom_style: dict[str, Any] | None = None
|
||||
|
||||
Reference in New Issue
Block a user