add canvases (#33)

* add xy-flow

* add live canvas features

* add free-hand drawing

* fix stroke impl, add more modes

* add undo/redo

* add color picker and selection improvements

* add better zoom controls

* refactor

* selection fixes + minimap adjustment

* improve multi select indicator

* fix sidebar layout issue

* improve color picker

* add basic embedding and dnd

* add resizing

* add embedded content

* add better prveiews with client side image generation for notes

* add convex eslint plugin

* fix ssr issue

* add preview generation

* fixes

* improve canvas embeds

* address comments

* fixes

* explicitly pass auth secret

* fixes

* more fixes

* improvements

* improvements

* fix pre-mature throw

* fix test

* add resize awareness and fix canvas external file drop

* address comments

* fix flakey test

* address comments again

* fix claim token in tests

Author: ntietje1

convex/_generated/api.d.ts

@@ -51,6 +51,12 @@ import type * as campaigns_mutations from "../campaigns/mutations.js";
 import type * as campaigns_queries from "../campaigns/queries.js";
 import type * as campaigns_types from "../campaigns/types.js";
 import type * as campaigns_validation from "../campaigns/validation.js";
+import type * as canvases_baseSchema from "../canvases/baseSchema.js";
+import type * as canvases_functions_createCanvas from "../canvases/functions/createCanvas.js";
+import type * as canvases_functions_enhanceCanvas from "../canvases/functions/enhanceCanvas.js";
+import type * as canvases_functions_updateCanvas from "../canvases/functions/updateCanvas.js";
+import type * as canvases_mutations from "../canvases/mutations.js";
+import type * as canvases_types from "../canvases/types.js";
 import type * as common_constants from "../common/constants.js";
 import type * as common_logger from "../common/logger.js";
 import type * as common_slug from "../common/slug.js";
@@ -101,7 +107,6 @@ import type * as notes_functions_createNote from "../notes/functions/createNote.
 import type * as notes_functions_enhanceNote from "../notes/functions/enhanceNote.js";
 import type * as notes_functions_getNote from "../notes/functions/getNote.js";
 import type * as notes_functions_updateNote from "../notes/functions/updateNote.js";
-import type * as notes_functions_updateNoteContent from "../notes/functions/updateNoteContent.js";
 import type * as notes_mutations from "../notes/mutations.js";
 import type * as notes_queries from "../notes/queries.js";
 import type * as notes_types from "../notes/types.js";
@@ -119,6 +124,7 @@ import type * as sessions_queries from "../sessions/queries.js";
 import type * as sessions_types from "../sessions/types.js";
 import type * as sidebarItems_functions_applyToDependents from "../sidebarItems/functions/applyToDependents.js";
 import type * as sidebarItems_functions_applyToTree from "../sidebarItems/functions/applyToTree.js";
+import type * as sidebarItems_functions_claimPreviewGeneration from "../sidebarItems/functions/claimPreviewGeneration.js";
 import type * as sidebarItems_functions_collectDescendants from "../sidebarItems/functions/collectDescendants.js";
 import type * as sidebarItems_functions_defaultItemName from "../sidebarItems/functions/defaultItemName.js";
 import type * as sidebarItems_functions_emptyTrashBin from "../sidebarItems/functions/emptyTrashBin.js";
@@ -131,6 +137,7 @@ import type * as sidebarItems_functions_hardDeleteItem from "../sidebarItems/fun
 import type * as sidebarItems_functions_moveSidebarItem from "../sidebarItems/functions/moveSidebarItem.js";
 import type * as sidebarItems_functions_permanentlyDeleteSidebarItem from "../sidebarItems/functions/permanentlyDeleteSidebarItem.js";
 import type * as sidebarItems_functions_purgeExpiredTrash from "../sidebarItems/functions/purgeExpiredTrash.js";
+import type * as sidebarItems_functions_setPreviewImage from "../sidebarItems/functions/setPreviewImage.js";
 import type * as sidebarItems_internalMutations from "../sidebarItems/internalMutations.js";
 import type * as sidebarItems_mutations from "../sidebarItems/mutations.js";
 import type * as sidebarItems_queries from "../sidebarItems/queries.js";
@@ -178,6 +185,7 @@ import type * as yjsSync_functions_compactUpdates from "../yjsSync/functions/com
 import type * as yjsSync_functions_createYjsDocument from "../yjsSync/functions/createYjsDocument.js";
 import type * as yjsSync_functions_deleteYjsDocument from "../yjsSync/functions/deleteYjsDocument.js";
 import type * as yjsSync_functions_reconstructYDoc from "../yjsSync/functions/reconstructYDoc.js";
+import type * as yjsSync_functions_types from "../yjsSync/functions/types.js";
 import type * as yjsSync_functions_uint8ToArrayBuffer from "../yjsSync/functions/uint8ToArrayBuffer.js";
 import type * as yjsSync_internalMutations from "../yjsSync/internalMutations.js";
 import type * as yjsSync_mutations from "../yjsSync/mutations.js";
@@ -233,6 +241,12 @@ declare const fullApi: ApiFromModules<{
   "campaigns/queries": typeof campaigns_queries;
   "campaigns/types": typeof campaigns_types;
   "campaigns/validation": typeof campaigns_validation;
+  "canvases/baseSchema": typeof canvases_baseSchema;
+  "canvases/functions/createCanvas": typeof canvases_functions_createCanvas;
+  "canvases/functions/enhanceCanvas": typeof canvases_functions_enhanceCanvas;
+  "canvases/functions/updateCanvas": typeof canvases_functions_updateCanvas;
+  "canvases/mutations": typeof canvases_mutations;
+  "canvases/types": typeof canvases_types;
   "common/constants": typeof common_constants;
   "common/logger": typeof common_logger;
   "common/slug": typeof common_slug;
@@ -283,7 +297,6 @@ declare const fullApi: ApiFromModules<{
   "notes/functions/enhanceNote": typeof notes_functions_enhanceNote;
   "notes/functions/getNote": typeof notes_functions_getNote;
   "notes/functions/updateNote": typeof notes_functions_updateNote;
-  "notes/functions/updateNoteContent": typeof notes_functions_updateNoteContent;
   "notes/mutations": typeof notes_mutations;
   "notes/queries": typeof notes_queries;
   "notes/types": typeof notes_types;
@@ -301,6 +314,7 @@ declare const fullApi: ApiFromModules<{
   "sessions/types": typeof sessions_types;
   "sidebarItems/functions/applyToDependents": typeof sidebarItems_functions_applyToDependents;
   "sidebarItems/functions/applyToTree": typeof sidebarItems_functions_applyToTree;
+  "sidebarItems/functions/claimPreviewGeneration": typeof sidebarItems_functions_claimPreviewGeneration;
   "sidebarItems/functions/collectDescendants": typeof sidebarItems_functions_collectDescendants;
   "sidebarItems/functions/defaultItemName": typeof sidebarItems_functions_defaultItemName;
   "sidebarItems/functions/emptyTrashBin": typeof sidebarItems_functions_emptyTrashBin;
@@ -313,6 +327,7 @@ declare const fullApi: ApiFromModules<{
   "sidebarItems/functions/moveSidebarItem": typeof sidebarItems_functions_moveSidebarItem;
   "sidebarItems/functions/permanentlyDeleteSidebarItem": typeof sidebarItems_functions_permanentlyDeleteSidebarItem;
   "sidebarItems/functions/purgeExpiredTrash": typeof sidebarItems_functions_purgeExpiredTrash;
+  "sidebarItems/functions/setPreviewImage": typeof sidebarItems_functions_setPreviewImage;
   "sidebarItems/internalMutations": typeof sidebarItems_internalMutations;
   "sidebarItems/mutations": typeof sidebarItems_mutations;
   "sidebarItems/queries": typeof sidebarItems_queries;
@@ -360,6 +375,7 @@ declare const fullApi: ApiFromModules<{
   "yjsSync/functions/createYjsDocument": typeof yjsSync_functions_createYjsDocument;
   "yjsSync/functions/deleteYjsDocument": typeof yjsSync_functions_deleteYjsDocument;
   "yjsSync/functions/reconstructYDoc": typeof yjsSync_functions_reconstructYDoc;
+  "yjsSync/functions/types": typeof yjsSync_functions_types;
   "yjsSync/functions/uint8ToArrayBuffer": typeof yjsSync_functions_uint8ToArrayBuffer;
   "yjsSync/internalMutations": typeof yjsSync_internalMutations;
   "yjsSync/mutations": typeof yjsSync_mutations;

convex/_test/factories.helper.ts

@@ -14,6 +14,7 @@ import type schema from '../schema'
 import type {
   SidebarItemId,
   SidebarItemLocation,
+  SidebarItemTable,
   SidebarItemType,
 } from '../sidebarItems/types/baseTypes'
 import type { PermissionLevel } from '../permissions/types'
@@ -141,6 +142,10 @@ const sidebarItemBase = (
   parentId: null
   allPermissionLevel: PermissionLevel | null
   location: SidebarItemLocation
+  previewStorageId: null
+  previewLockedUntil: null
+  previewClaimToken: null
+  previewUpdatedAt: null
 } & ReturnType<typeof commonFields> => ({
   name,
   slug: slugify(name),
@@ -150,147 +155,143 @@ const sidebarItemBase = (
   parentId: null,
   allPermissionLevel: null,
   location: SIDEBAR_ITEM_LOCATION.sidebar,
+  previewStorageId: null,
+  previewLockedUntil: null,
+  previewClaimToken: null,
+  previewUpdatedAt: null,
   ...commonFields(creatorProfileId),
 })
 
-export async function createNote(
+type CommonSidebarItemOverrides = Partial<{
+  name: string
+  slug: string
+  parentId: Id<'folders'> | null
+  allPermissionLevel: PermissionLevel | null
+  location: SidebarItemLocation
+  iconName: string | null
+  color: string | null
+  deletionTime: number | null
+  deletedBy: Id<'userProfiles'> | null
+  previewStorageId: Id<'_storage'> | null
+  previewLockedUntil: number | null
+  previewClaimToken: string | null
+  previewUpdatedAt: number | null
+}>
+
+async function insertSidebarItem<TTable extends SidebarItemTable>(
   t: T,
+  table: TTable,
   campaignId: Id<'campaigns'>,
   creatorProfileId: Id<'userProfiles'>,
-  overrides?: Partial<{
-    name: string
-    slug: string
-    parentId: Id<'folders'> | null
-    allPermissionLevel: PermissionLevel | null
-    location: SidebarItemLocation
-    iconName: string | null
-    color: string | null
-    deletionTime: number | null
-    deletedBy: Id<'userProfiles'> | null
-  }>,
+  label: string,
+  extraDefaults: Record<string, unknown>,
+  overrides?: CommonSidebarItemOverrides & Record<string, unknown>,
 ) {
   const n = nextId()
-  const name = overrides?.name ?? `Note ${n}`
-  const defaults = {
-    ...sidebarItemBase(campaignId, creatorProfileId, name),
-    type: SIDEBAR_ITEM_TYPES.notes,
-  }
+  const name = overrides?.name ?? `${label} ${n}`
   const data = {
-    ...defaults,
+    ...sidebarItemBase(campaignId, creatorProfileId, name),
+    ...extraDefaults,
     ...overrides,
     slug: overrides?.slug ?? slugify(name),
   }
-  const noteId = await t.run(async (ctx) => {
-    return await ctx.db.insert('notes', data)
-  })
+
+  const id = await t.run(async (ctx) => ctx.db.insert(table, data as any))
+  return { id: id as Id<TTable>, ...data }
+}
+
+export async function createNote(
+  t: T,
+  campaignId: Id<'campaigns'>,
+  creatorProfileId: Id<'userProfiles'>,
+  overrides?: CommonSidebarItemOverrides,
+) {
+  const { id: noteId, ...data } = await insertSidebarItem(
+    t,
+    'notes',
+    campaignId,
+    creatorProfileId,
+    'Note',
+    { type: SIDEBAR_ITEM_TYPES.notes },
+    overrides,
+  )
   return { noteId, ...data }
 }
 
 export async function createFolder(
   t: T,
   campaignId: Id<'campaigns'>,
   creatorProfileId: Id<'userProfiles'>,
-  overrides?: Partial<{
-    name: string
-    slug: string
-    parentId: Id<'folders'> | null
-    inheritShares: boolean
-    allPermissionLevel: PermissionLevel | null
-    location: SidebarItemLocation
-    iconName: string | null
-    color: string | null
-    deletionTime: number | null
-    deletedBy: Id<'userProfiles'> | null
-  }>,
+  overrides?: CommonSidebarItemOverrides & Partial<{ inheritShares: boolean }>,
 ) {
-  const n = nextId()
-  const name = overrides?.name ?? `Folder ${n}`
-  const defaults = {
-    ...sidebarItemBase(campaignId, creatorProfileId, name),
-    type: SIDEBAR_ITEM_TYPES.folders,
-    inheritShares: false,
-  }
-  const data = {
-    ...defaults,
-    ...overrides,
-    slug: overrides?.slug ?? slugify(name),
-  }
-  const folderId = await t.run(async (ctx) => {
-    return await ctx.db.insert('folders', data)
-  })
+  const { id: folderId, ...data } = await insertSidebarItem(
+    t,
+    'folders',
+    campaignId,
+    creatorProfileId,
+    'Folder',
+    { type: SIDEBAR_ITEM_TYPES.folders, inheritShares: false },
+    overrides,
+  )
   return { folderId, ...data }
 }
 
 export async function createFile(
   t: T,
   campaignId: Id<'campaigns'>,
   creatorProfileId: Id<'userProfiles'>,
-  overrides?: Partial<{
-    name: string
-    slug: string
-    parentId: Id<'folders'> | null
-    storageId: Id<'_storage'> | null
-    allPermissionLevel: PermissionLevel | null
-    location: SidebarItemLocation
-    iconName: string | null
-    color: string | null
-    deletionTime: number | null
-    deletedBy: Id<'userProfiles'> | null
-  }>,
+  overrides?: CommonSidebarItemOverrides &
+    Partial<{ storageId: Id<'_storage'> | null }>,
 ) {
-  const n = nextId()
-  const name = overrides?.name ?? `File ${n}`
-  const defaults = {
-    ...sidebarItemBase(campaignId, creatorProfileId, name),
-    type: SIDEBAR_ITEM_TYPES.files,
-    storageId: null,
-  }
-  const data = {
-    ...defaults,
-    ...overrides,
-    slug: overrides?.slug ?? slugify(name),
-  }
-  const fileId = await t.run(async (ctx) => {
-    return await ctx.db.insert('files', data)
-  })
+  const { id: fileId, ...data } = await insertSidebarItem(
+    t,
+    'files',
+    campaignId,
+    creatorProfileId,
+    'File',
+    { type: SIDEBAR_ITEM_TYPES.files, storageId: null },
+    overrides,
+  )
   return { fileId, ...data }
 }
 
 export async function createGameMap(
   t: T,
   campaignId: Id<'campaigns'>,
   creatorProfileId: Id<'userProfiles'>,
-  overrides?: Partial<{
-    name: string
-    slug: string
-    parentId: Id<'folders'> | null
-    imageStorageId: Id<'_storage'> | null
-    allPermissionLevel: PermissionLevel | null
-    location: SidebarItemLocation
-    iconName: string | null
-    color: string | null
-    deletionTime: number | null
-    deletedBy: Id<'userProfiles'> | null
-  }>,
+  overrides?: CommonSidebarItemOverrides &
+    Partial<{ imageStorageId: Id<'_storage'> | null }>,
 ) {
-  const n = nextId()
-  const name = overrides?.name ?? `Map ${n}`
-  const defaults = {
-    ...sidebarItemBase(campaignId, creatorProfileId, name),
-    type: SIDEBAR_ITEM_TYPES.gameMaps,
-    imageStorageId: null,
-  }
-  const data = {
-    ...defaults,
-    ...overrides,
-    slug: overrides?.slug ?? slugify(name),
-  }
-  const mapId = await t.run(async (ctx) => {
-    return await ctx.db.insert('gameMaps', data)
-  })
+  const { id: mapId, ...data } = await insertSidebarItem(
+    t,
+    'gameMaps',
+    campaignId,
+    creatorProfileId,
+    'Map',
+    { type: SIDEBAR_ITEM_TYPES.gameMaps, imageStorageId: null },
+    overrides,
+  )
   return { mapId, ...data }
 }
 
+export async function createCanvas(
+  t: T,
+  campaignId: Id<'campaigns'>,
+  creatorProfileId: Id<'userProfiles'>,
+  overrides?: CommonSidebarItemOverrides,
+) {
+  const { id: canvasId, ...data } = await insertSidebarItem(
+    t,
+    'canvases',
+    campaignId,
+    creatorProfileId,
+    'Canvas',
+    { type: SIDEBAR_ITEM_TYPES.canvases },
+    overrides,
+  )
+  return { canvasId, ...data }
+}
+
 export async function createSession(
   t: T,
   campaignId: Id<'campaigns'>,

convex/auth/component.ts

@@ -47,6 +47,7 @@ export const createAuth = (ctx: GenericCtx<DataModel>) => {
       : {}
 
   return betterAuth({
+    secret: process.env.BETTER_AUTH_SECRET,
     baseURL: siteUrl,
     database: authComponent.adapter(ctx),
     session: {

convex/canvases/baseSchema.ts

@@ -0,0 +1,35 @@
+import { v } from 'convex/values'
+import { defineTable } from 'convex/server'
+import {
+  commonSidebarItemTableFields,
+  commonSidebarItemValidatorFields,
+} from '../sidebarItems/schema/baseFields'
+import { commonValidatorFields } from '../common/schema'
+import { SIDEBAR_ITEM_TYPES } from '../sidebarItems/types/baseTypes'
+
+export const canvasTableFields = {
+  ...commonSidebarItemTableFields,
+  type: v.literal(SIDEBAR_ITEM_TYPES.canvases),
+}
+
+export const canvasValidatorFields = {
+  ...commonValidatorFields('canvases'),
+  ...commonSidebarItemValidatorFields,
+  type: v.literal(SIDEBAR_ITEM_TYPES.canvases),
+}
+
+export const canvasValidator = v.object(canvasValidatorFields)
+
+export const canvasesTables = {
+  canvases: defineTable({
+    ...canvasTableFields,
+  })
+    .index('by_campaign_location_parent_name', [
+      'campaignId',
+      'location',
+      'parentId',
+      'name',
+    ])
+    .index('by_campaign_slug', ['campaignId', 'slug'])
+    .index('by_campaign_deletionTime', ['campaignId', 'deletionTime']),
+}