From 497f60b48757c6a61257ffa33acf77efc4d504dd Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Fri, 28 Feb 2025 14:05:22 +0100
Subject: [PATCH] JSON Canvas type definitions

---
 quartz/components/pages/CanvasContent.tsx |  1 +
 quartz/components/types.ts                | 48 +++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 quartz/components/pages/CanvasContent.tsx

diff --git a/quartz/components/pages/CanvasContent.tsx b/quartz/components/pages/CanvasContent.tsx
new file mode 100644
index 000000000..ee6238c63
--- /dev/null
+++ b/quartz/components/pages/CanvasContent.tsx
@@ -0,0 +1 @@
+import { QuartzCanvasComponent } from "../types"
diff --git a/quartz/components/types.ts b/quartz/components/types.ts
index a6b90d3b2..a3d0871e5 100644
--- a/quartz/components/types.ts
+++ b/quartz/components/types.ts
@@ -27,3 +27,51 @@ export type QuartzComponent = ComponentType<QuartzComponentProps> & {
 export type QuartzComponentConstructor<Options extends object | undefined = undefined> = (
   opts: Options,
 ) => QuartzComponent
+
+export type QuartzCanvasComponent = {
+  nodes?: CanvasNode[]
+  edges?: CanvasEdge[]
+}
+
+export type CanvasNode = {
+  id: string
+  type: "text" | "file" | "link" | "group"
+  x: number
+  y: number
+  width: number
+  height: number
+  color?: CanvasColor
+}
+
+export type CanvasTextNode = CanvasNode & {
+  text: string
+}
+
+export type CanvasFileNode = CanvasNode & {
+  file: string
+  subpath?: string
+}
+
+export type CanvasLinkNode = CanvasNode & {
+  url: string
+}
+
+export type CanvasGroupNode = CanvasNode & {
+  label?: string
+  background?: string
+  backgroundStyle?: "cover" | "ratio" | "repeat"
+}
+
+export type CanvasEdge = {
+  id: string
+  fromNode: string
+  toNode: string
+  fromSide?: "top" | "bottom" | "left" | "right"
+  toSide?: "top" | "bottom" | "left" | "right"
+  fromEnd?: "none" | "arrow"
+  toEnd?: "none" | "arrow"
+  color?: CanvasColor
+  label?: string
+}
+
+export type CanvasColor = "1" | "2" | "3" | "4" | "5" | "6" | "#${string}"