JSON Canvas type definitions

quartz/components/pages/CanvasContent.tsx

@@ -0,0 +1 @@
+import { QuartzCanvasComponent } from "../types"

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}"