jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up tool names

This commit is contained in:
Jeff-Emmett 2025-01-28 16:38:41 +01:00
parent 8664e847cc
commit c2abfcd3e3
10 changed files with 426 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/Board.tsx
View File

@ -25,7 +25,7 @@ import {
ClickPropagator,
} from "@/propagators/ScopedPropagators"
import { SlideShapeTool } from "@/tools/SlideShapeTool"
import { SlideShapeUtil } from "@/shapes/SlideShapeUtil"
import { SlideShape } from "@/shapes/SlideShapeUtil"
import { makeRealSettings, applySettingsMigrations } from "@/lib/settings"
import { PromptShapeTool } from "@/tools/PromptShapeTool"
import { PromptShape } from "@/shapes/PromptShapeUtil"
@ -38,7 +38,7 @@ const customShapeUtils = [
ChatBoxShape,
VideoChatShape,
EmbedShape,
SlideShapeUtil,
SlideShape,
MycrozineTemplateShape,
MarkdownShape,
PromptShape,

295
src/shapes/PromptShapeUtil.tsx
View File

@ -1,165 +1,168 @@
import {
BaseBoxShapeUtil,
HTMLContainer,
TLBaseShape,
TLGeoShape,
TLShape,
BaseBoxShapeUtil,
HTMLContainer,
TLBaseShape,
TLGeoShape,
TLShape,
} from "tldraw"
import { getEdge } from "@/propagators/tlgraph"
import { llm } from "@/utils/llm"
import { isShapeOfType } from "@/propagators/utils"
type IPrompt = TLBaseShape<
"prompt",
{
w: number
h: number
prompt: string
value: string
agentBinding: string | null
}
"Prompt",
{
w: number
h: number
prompt: string
value: string
agentBinding: string | null
}
>
export class PromptShape extends BaseBoxShapeUtil<IPrompt> {
static override type = "prompt" as const
static override type = "Prompt" as const
FIXED_HEIGHT = 50 as const
MIN_WIDTH = 150 as const
PADDING = 4 as const
FIXED_HEIGHT = 50 as const
MIN_WIDTH = 150 as const
PADDING = 4 as const
getDefaultProps(): IPrompt["props"] {
return {
w: 300,
h: 50,
prompt: "",
value: "",
agentBinding: null,
}
}
getDefaultProps(): IPrompt["props"] {
return {
w: 300,
h: 50,
prompt: "",
value: "",
agentBinding: null,
}
}
// override onResize: TLResizeHandle<IPrompt> = (
// shape,
// { scaleX, initialShape },
// ) => {
// const { x, y } = shape
// const w = initialShape.props.w * scaleX
// return {
// x,
// y,
// props: {
// ...shape.props,
// w: Math.max(Math.abs(w), this.MIN_WIDTH),
// h: this.FIXED_HEIGHT,
// },
// }
// }
// override onResize: TLResizeHandle<IPrompt> = (
// shape,
// { scaleX, initialShape },
// ) => {
// const { x, y } = shape
// const w = initialShape.props.w * scaleX
// return {
// x,
// y,
// props: {
// ...shape.props,
// w: Math.max(Math.abs(w), this.MIN_WIDTH),
// h: this.FIXED_HEIGHT,
// },
// }
// }
component(shape: IPrompt) {
const arrowBindings = this.editor.getBindingsInvolvingShape(
shape.id,
"arrow",
)
const arrows = arrowBindings
.map((binding) => this.editor.getShape(binding.fromId))
component(shape: IPrompt) {
const arrowBindings = this.editor.getBindingsInvolvingShape(
shape.id,
"arrow",
)
const arrows = arrowBindings.map((binding) =>
this.editor.getShape(binding.fromId),
)
const inputMap = arrows.reduce((acc, arrow) => {
const edge = getEdge(arrow, this.editor);
if (edge) {
const sourceShape = this.editor.getShape(edge.from);
if (sourceShape && edge.text) {
acc[edge.text] = sourceShape;
}
}
return acc;
}, {} as Record<string, TLShape>);
const inputMap = arrows.reduce((acc, arrow) => {
const edge = getEdge(arrow, this.editor)
if (edge) {
const sourceShape = this.editor.getShape(edge.from)
if (sourceShape && edge.text) {
acc[edge.text] = sourceShape
}
}
return acc
}, {} as Record<string, TLShape>)
const generateText = async (prompt: string) => {
await llm('', prompt, (partial: string, done: boolean) => {
console.log("DONE??", done)
this.editor.updateShape<IPrompt>({
id: shape.id,
type: "prompt",
props: { value: partial, agentBinding: done ? null : 'someone' },
})
})
}
const generateText = async (prompt: string) => {
await llm("", prompt, (partial: string, done: boolean) => {
console.log("DONE??", done)
this.editor.updateShape<IPrompt>({
id: shape.id,
type: "Prompt",
props: { value: partial, agentBinding: done ? null : "someone" },
})
})
}
const handlePrompt = () => {
if (shape.props.agentBinding) {
return
}
let processedPrompt = shape.props.prompt;
for (const [key, sourceShape] of Object.entries(inputMap)) {
const pattern = `{${key}}`;
if (processedPrompt.includes(pattern)) {
if (isShapeOfType<TLGeoShape>(sourceShape, 'geo')) {
processedPrompt = processedPrompt.replace(pattern, sourceShape.props.text);
}
}
}
console.log(processedPrompt);
generateText(processedPrompt)
};
const handlePrompt = () => {
if (shape.props.agentBinding) {
return
}
let processedPrompt = shape.props.prompt
for (const [key, sourceShape] of Object.entries(inputMap)) {
const pattern = `{${key}}`
if (processedPrompt.includes(pattern)) {
if (isShapeOfType<TLGeoShape>(sourceShape, "geo")) {
processedPrompt = processedPrompt.replace(
pattern,
sourceShape.props.text,
)
}
}
}
//console.log(processedPrompt)
generateText(processedPrompt)
}
return (
<HTMLContainer
style={{
borderRadius: 6,
border: "1px solid lightgrey",
padding: this.PADDING,
height: this.FIXED_HEIGHT,
width: shape.props.w,
pointerEvents: "all",
backgroundColor: "#efefef",
overflow: "visible",
display: "flex",
justifyContent: "center",
alignItems: "center",
outline: shape.props.agentBinding ? "2px solid orange" : "none",
}}
>
<input
style={{
width: "100%",
height: "100%",
overflow: "visible",
backgroundColor: "rgba(0, 0, 0, 0.05)",
border: "1px solid rgba(0, 0, 0, 0.05)",
borderRadius: 6 - this.PADDING,
fontSize: 16,
}}
type="text"
placeholder="Enter prompt..."
value={shape.props.prompt}
onChange={(text) => {
this.editor.updateShape<IPrompt>({
id: shape.id,
type: "prompt",
props: { prompt: text.target.value },
})
}}
/>
<button
style={{
width: 100,
height: "100%",
marginLeft: 5,
pointerEvents: "all",
}}
onPointerDown={(e) => {
e.stopPropagation()
}}
type="button"
onClick={handlePrompt}
>
Prompt
</button>
</HTMLContainer>
)
}
return (
<HTMLContainer
style={{
borderRadius: 6,
border: "1px solid lightgrey",
padding: this.PADDING,
height: this.FIXED_HEIGHT,
width: shape.props.w,
pointerEvents: "all",
backgroundColor: "#efefef",
overflow: "visible",
display: "flex",
justifyContent: "center",
alignItems: "center",
outline: shape.props.agentBinding ? "2px solid orange" : "none",
}}
>
<input
style={{
width: "100%",
height: "100%",
overflow: "visible",
backgroundColor: "rgba(0, 0, 0, 0.05)",
border: "1px solid rgba(0, 0, 0, 0.05)",
borderRadius: 6 - this.PADDING,
fontSize: 16,
}}
type="text"
placeholder="Enter prompt..."
value={shape.props.prompt}
onChange={(text) => {
this.editor.updateShape<IPrompt>({
id: shape.id,
type: "Prompt",
props: { prompt: text.target.value },
})
}}
/>
<button
style={{
width: 100,
height: "100%",
marginLeft: 5,
pointerEvents: "all",
}}
onPointerDown={(e) => {
e.stopPropagation()
}}
type="button"
onClick={handlePrompt}
>
Prompt
</button>
</HTMLContainer>
)
}
// [5]
indicator(shape: IPrompt) {
return <rect width={shape.props.w} height={shape.props.h} rx={5} />
}
}
indicator(shape: IPrompt) {
return <rect width={shape.props.w} height={shape.props.h} rx={5} />
}
}

226
src/shapes/SlideShapeUtil.tsx
View File

@ -1,128 +1,136 @@
import { useCallback } from 'react'
import { useCallback } from "react"
import {
BaseBoxShapeUtil,
Geometry2d,
RecordProps,
Rectangle2d,
SVGContainer,
ShapeUtil,
T,
TLBaseShape,
getPerfectDashProps,
resizeBox,
useValue,
} from 'tldraw'
import { moveToSlide, useSlides } from '@/slides/useSlides'
BaseBoxShapeUtil,
Geometry2d,
RecordProps,
Rectangle2d,
SVGContainer,
ShapeUtil,
T,
TLBaseShape,
getPerfectDashProps,
resizeBox,
useValue,
} from "tldraw"
import { moveToSlide, useSlides } from "@/slides/useSlides"
export type ISlideShape = TLBaseShape<
'Slide',
{
w: number
h: number
}
"Slide",
{
w: number
h: number
}
>
export class SlideShapeUtil extends BaseBoxShapeUtil<ISlideShape> {
static override type = "Slide"
// static override props = {
// w: T.number,
// h: T.number,
// }
export class SlideShape extends BaseBoxShapeUtil<ISlideShape> {
static override type = "Slide"
override canBind = () => false
override hideRotateHandle = () => true
// static override props = {
// w: T.number,
// h: T.number,
// }
getDefaultProps(): ISlideShape["props"] {
return {
w: 720,
h: 480,
}
}
override canBind = () => false
override hideRotateHandle = () => true
getGeometry(shape: ISlideShape): Geometry2d {
return new Rectangle2d({
width: shape.props.w,
height: shape.props.h,
isFilled: false,
})
}
getDefaultProps(): ISlideShape["props"] {
return {
w: 720,
h: 480,
}
}
override onRotate = (initial: ISlideShape) => initial
override onResize(shape: ISlideShape, info: any) {
return resizeBox(shape, info)
}
getGeometry(shape: ISlideShape): Geometry2d {
return new Rectangle2d({
width: shape.props.w,
height: shape.props.h,
isFilled: false,
})
}
override onDoubleClick = (shape: ISlideShape) => {
moveToSlide(this.editor, shape)
this.editor.selectNone()
}
override onRotate = (initial: ISlideShape) => initial
override onResize(shape: ISlideShape, info: any) {
return resizeBox(shape, info)
}
override onDoubleClickEdge = (shape: ISlideShape) => {
moveToSlide(this.editor, shape)
this.editor.selectNone()
}
override onDoubleClick = (shape: ISlideShape) => {
moveToSlide(this.editor, shape)
this.editor.selectNone()
}
component(shape: ISlideShape) {
const bounds = this.editor.getShapeGeometry(shape).bounds
override onDoubleClickEdge = (shape: ISlideShape) => {
moveToSlide(this.editor, shape)
this.editor.selectNone()
}
// eslint-disable-next-line react-hooks/rules-of-hooks
const zoomLevel = useValue('zoom level', () => this.editor.getZoomLevel(), [this.editor])
component(shape: ISlideShape) {
const bounds = this.editor.getShapeGeometry(shape).bounds
// eslint-disable-next-line react-hooks/rules-of-hooks
const slides = useSlides()
const index = slides.findIndex((s) => s.id === shape.id)
// eslint-disable-next-line react-hooks/rules-of-hooks
const zoomLevel = useValue("zoom level", () => this.editor.getZoomLevel(), [
this.editor,
])
// eslint-disable-next-line react-hooks/rules-of-hooks
const handleLabelPointerDown = useCallback(() => this.editor.select(shape.id), [shape.id])
// eslint-disable-next-line react-hooks/rules-of-hooks
const slides = useSlides()
const index = slides.findIndex((s) => s.id === shape.id)
if (!bounds) return null
// eslint-disable-next-line react-hooks/rules-of-hooks
const handleLabelPointerDown = useCallback(
() => this.editor.select(shape.id),
[shape.id],
)
return (
<>
<div onPointerDown={handleLabelPointerDown} className="slide-shape-label">
{`Slide ${index + 1}`}
</div>
<SVGContainer>
<g
style={{
stroke: 'var(--color-text)',
strokeWidth: 'calc(1px * var(--tl-scale))',
opacity: 0.25,
}}
pointerEvents="none"
strokeLinecap="round"
strokeLinejoin="round"
>
{bounds.sides.map((side, i) => {
const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
side[0].dist(side[1]),
1 / zoomLevel,
{
style: 'dashed',
lengthRatio: 6,
}
)
if (!bounds) return null
return (
<line
key={i}
x1={side[0].x}
y1={side[0].y}
x2={side[1].x}
y2={side[1].y}
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
/>
)
})}
</g>
</SVGContainer>
</>
)
}
return (
<>
<div
onPointerDown={handleLabelPointerDown}
className="slide-shape-label"
>
{`Slide ${index + 1}`}
</div>
<SVGContainer>
<g
style={{
stroke: "var(--color-text)",
strokeWidth: "calc(1px * var(--tl-scale))",
opacity: 0.25,
}}
pointerEvents="none"
strokeLinecap="round"
strokeLinejoin="round"
>
{bounds.sides.map((side, i) => {
const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
side[0].dist(side[1]),
1 / zoomLevel,
{
style: "dashed",
lengthRatio: 6,
},
)
indicator(shape: ISlideShape) {
return <rect width={shape.props.w} height={shape.props.h} />
}
}
return (
<line
key={i}
x1={side[0].x}
y1={side[0].y}
x2={side[1].x}
y2={side[1].y}
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
/>
)
})}
</g>
</SVGContainer>
</>
)
}
indicator(shape: ISlideShape) {
return <rect width={shape.props.w} height={shape.props.h} />
}
}

4
src/tools/PromptShapeTool.ts
View File

@ -1,8 +1,8 @@
import { BaseBoxShapeTool } from 'tldraw'
export class PromptShapeTool extends BaseBoxShapeTool {
static override id = 'prompt'
static override id = 'Prompt'
static override initial = 'idle'
override shapeType = 'prompt'
override shapeType = 'Prompt'
}

2
src/tools/SlideShapeTool.ts
View File

@ -7,6 +7,6 @@ export class SlideShapeTool extends BaseBoxShapeTool {
constructor(editor: any) {
super(editor)
console.log('SlideShapeTool constructed', { id: this.id, shapeType: this.shapeType })
//console.log('SlideShapeTool constructed', { id: this.id, shapeType: this.shapeType })
}
}

14
src/ui/CustomContextMenu.tsx
View File

@ -142,7 +142,7 @@ export function CustomContextMenu(props: TLUiContextMenuProps) {
}}
/>
<TldrawUiMenuItem
id="mycrozine-template"
id="MycrozineTemplate"
label="Create Mycrozine Template"
icon="rectangle"
kbd="m"
@ -152,7 +152,7 @@ export function CustomContextMenu(props: TLUiContextMenuProps) {
}}
/>
<TldrawUiMenuItem
id="markdown"
id="Markdown"
label="Create Markdown"
icon="markdown"
kbd="alt+m"
@ -161,6 +161,16 @@ export function CustomContextMenu(props: TLUiContextMenuProps) {
editor.setCurrentTool("Markdown")
}}
/>
<TldrawUiMenuItem
id="Prompt"
label="Create Prompt"
icon="prompt"
kbd="alt+p"
disabled={hasSelection}
onSelect={() => {
editor.setCurrentTool("Prompt")
}}
/>
</TldrawUiMenuGroup>
{/* Frame Controls */}

173
src/ui/CustomToolbar.tsx
View File

@ -3,11 +3,15 @@ import { DefaultToolbar, DefaultToolbarContent } from "tldraw"
import { useTools } from "tldraw"
import { useEditor } from "tldraw"
import { useState, useEffect } from "react"
import { useDialogs } from "tldraw"
import { SettingsDialog } from "./SettingsDialog"
export function CustomToolbar() {
const editor = useEditor()
const tools = useTools()
const [isReady, setIsReady] = useState(false)
const [hasApiKey, setHasApiKey] = useState(false)
const { addDialog, removeDialog } = useDialogs()
useEffect(() => {
if (editor && tools) {
@ -15,53 +19,132 @@ export function CustomToolbar() {
}
}, [editor, tools])
useEffect(() => {
const settings = localStorage.getItem("jeff_keys")
if (settings) {
const { keys } = JSON.parse(settings)
setHasApiKey(Object.values(keys).some((key) => key))
}
}, [])
if (!isReady) return null
return (
<DefaultToolbar>
<DefaultToolbarContent />
{tools["VideoChat"] && (
<TldrawUiMenuItem
{...tools["VideoChat"]}
icon="video"
label="Video Chat"
isSelected={tools["VideoChat"].id === editor.getCurrentToolId()}
/>
)}
{tools["ChatBox"] && (
<TldrawUiMenuItem
{...tools["ChatBox"]}
icon="chat"
label="Chat"
isSelected={tools["ChatBox"].id === editor.getCurrentToolId()}
/>
)}
{tools["Embed"] && (
<TldrawUiMenuItem
{...tools["Embed"]}
icon="embed"
label="Embed"
isSelected={tools["Embed"].id === editor.getCurrentToolId()}
/>
)}
{tools["SlideShape"] && (
<TldrawUiMenuItem
{...tools["SlideShape"]}
icon="slides"
label="Slide"
isSelected={tools["SlideShape"].id === editor.getCurrentToolId()}
/>
)}
{/*
{tools["Markdown"] && (
<TldrawUiMenuItem
{...tools["Markdown"]}
icon="markdown"
label="Markdown"
isSelected={tools["Markdown"].id === editor.getCurrentToolId()}
/>
)}
*/}
</DefaultToolbar>
<div style={{ position: "relative" }}>
<div
style={{
position: "fixed",
top: "40px",
right: "12px",
zIndex: 99999,
pointerEvents: "auto",
display: "flex",
gap: "8px",
}}
>
<button
onClick={() => {
addDialog({
id: "api-keys",
component: ({ onClose }: { onClose: () => void }) => (
<SettingsDialog
onClose={() => {
onClose()
removeDialog("api-keys")
const settings = localStorage.getItem("jeff_keys")
if (settings) {
const { keys } = JSON.parse(settings)
setHasApiKey(Object.values(keys).some((key) => key))
}
}}
/>
),
})
}}
style={{
padding: "8px 16px",
borderRadius: "4px",
background: "#2F80ED",
color: "white",
border: "none",
cursor: "pointer",
fontWeight: 500,
transition: "background 0.2s ease",
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
whiteSpace: "nowrap",
userSelect: "none",
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = "#1366D6"
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = "#2F80ED"
}}
>
Keys {hasApiKey ? "✅" : "❌"}
</button>
</div>
<DefaultToolbar>
<DefaultToolbarContent />
{tools["VideoChat"] && (
<TldrawUiMenuItem
{...tools["VideoChat"]}
icon="video"
label="Video Chat"
isSelected={tools["VideoChat"].id === editor.getCurrentToolId()}
/>
)}
{tools["ChatBox"] && (
<TldrawUiMenuItem
{...tools["ChatBox"]}
icon="chat"
label="Chat"
isSelected={tools["ChatBox"].id === editor.getCurrentToolId()}
/>
)}
{tools["Embed"] && (
<TldrawUiMenuItem
{...tools["Embed"]}
icon="embed"
label="Embed"
isSelected={tools["Embed"].id === editor.getCurrentToolId()}
/>
)}
{tools["SlideShape"] && (
<TldrawUiMenuItem
{...tools["SlideShape"]}
icon="slides"
label="Slide"
isSelected={tools["SlideShape"].id === editor.getCurrentToolId()}
/>
)}
{tools["Markdown"] && (
<TldrawUiMenuItem
{...tools["Markdown"]}
icon="markdown"
label="Markdown"
isSelected={tools["Markdown"].id === editor.getCurrentToolId()}
/>
)}
{tools["MycrozineTemplate"] && (
<TldrawUiMenuItem
{...tools["MycrozineTemplate"]}
icon="mycrozinetemplate"
label="MycrozineTemplate"
isSelected={
tools["MycrozineTemplate"].id === editor.getCurrentToolId()
}
/>
)}
{tools["Prompt"] && (
<TldrawUiMenuItem
{...tools["Prompt"]}
icon="prompt"
label="Prompt"
isSelected={tools["Prompt"].id === editor.getCurrentToolId()}
/>
)}
</DefaultToolbar>
</div>
)
}

87
src/ui/components.tsx
View File

@ -4,102 +4,17 @@ import { CustomContextMenu } from "./CustomContextMenu"
import {
DefaultKeyboardShortcutsDialog,
DefaultKeyboardShortcutsDialogContent,
DefaultToolbar,
DefaultToolbarContent,
TLComponents,
TldrawUiMenuItem,
useDialogs,
useIsToolSelected,
useTools,
} from "tldraw"
import { SettingsDialog } from "./SettingsDialog"
import { useEffect } from "react"
import { SlidesPanel } from "@/slides/SlidesPanel"
import { useState } from "react"
export const components: TLComponents = {
// Toolbar: CustomToolbar,
Toolbar: CustomToolbar,
MainMenu: CustomMainMenu,
ContextMenu: CustomContextMenu,
HelperButtons: SlidesPanel,
Toolbar: (props: any) => {
const tools = useTools()
const slideTool = tools["Slide"]
const isSlideSelected = slideTool ? useIsToolSelected(slideTool) : false
const { addDialog, removeDialog } = useDialogs()
const [hasApiKey, setHasApiKey] = useState(false)
useEffect(() => {
const key = localStorage.getItem("openai_api_key")
setHasApiKey(!!key)
}, [])
return (
<div style={{ position: "relative", width: "100%", height: "100%" }}>
<div
style={{
position: "fixed",
top: "40px",
right: "12px",
zIndex: 99999,
pointerEvents: "auto",
display: "flex",
gap: "8px",
}}
>
(
<button
onClick={() => {
addDialog({
id: "api-keys",
component: ({ onClose }: { onClose: () => void }) => (
<SettingsDialog
onClose={() => {
onClose()
removeDialog("api-keys")
const settings = localStorage.getItem("jeff_keys")
if (settings) {
const { keys } = JSON.parse(settings)
setHasApiKey(Object.values(keys).some((key) => key))
}
}}
/>
),
})
}}
style={{
padding: "8px 16px",
borderRadius: "4px",
background: "#2F80ED",
color: "white",
border: "none",
cursor: "pointer",
fontWeight: 500,
transition: "background 0.2s ease",
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
whiteSpace: "nowrap",
userSelect: "none",
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = "#1366D6"
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = "#2F80ED"
}}
>
Keys {hasApiKey ? "✅" : "❌"}
</button>
)
</div>
<DefaultToolbar {...props}>
{slideTool && (
<TldrawUiMenuItem {...slideTool} isSelected={isSlideSelected} />
)}
<DefaultToolbarContent />
</DefaultToolbar>
</div>
)
},
KeyboardShortcutsDialog: (props: any) => {
const tools = useTools()
return (

12
src/ui/overrides.tsx
View File

@ -106,10 +106,7 @@ export const overrides: TLUiOverrides = {
type: "Slide",
readonlyOk: true,
onSelect: () => {
console.log("SlideShape tool selected from menu")
console.log("Current tool before:", editor.getCurrentToolId())
editor.setCurrentTool("Slide")
console.log("Current tool after:", editor.getCurrentToolId())
},
},
Markdown: {
@ -130,6 +127,15 @@ export const overrides: TLUiOverrides = {
readonlyOk: true,
onSelect: () => editor.setCurrentTool("MycrozineTemplate"),
},
Prompt: {
id: "Prompt",
icon: "prompt",
label: "Prompt",
type: "Prompt",
kdb: "p",
readonlyOk: true,
onSelect: () => editor.setCurrentTool("Prompt"),
},
hand: {
...tools.hand,
onDoubleClick: (info: any) => {

10
worker/TldrawDurableObject.ts
View File

@ -17,8 +17,7 @@ import { VideoChatShape } from "@/shapes/VideoChatShapeUtil"
import { EmbedShape } from "@/shapes/EmbedShapeUtil"
import { MarkdownShape } from "@/shapes/MarkdownShapeUtil"
import { MycrozineTemplateShape } from "@/shapes/MycrozineTemplateShapeUtil"
import { T } from "@tldraw/tldraw"
import { SlideShapeUtil } from "@/shapes/SlideShapeUtil"
import { SlideShape } from "@/shapes/SlideShapeUtil"
// add custom shapes and bindings here if needed:
export const customSchema = createTLSchema({
@ -45,8 +44,8 @@ export const customSchema = createTLSchema({
migrations: MycrozineTemplateShape.migrations,
},
Slide: {
props: SlideShapeUtil.props,
migrations: SlideShapeUtil.migrations,
props: SlideShape.props,
migrations: SlideShape.migrations,
},
},
bindings: defaultBindingSchemas,
@ -225,6 +224,7 @@ export class TldrawDurableObject {
onDataChange: () => {
// and persist whenever the data in the room changes
this.schedulePersistToR2()
console.log("Persisting", this.roomId, "to R2")
},
})
})()
@ -237,7 +237,7 @@ export class TldrawDurableObject {
schedulePersistToR2 = throttle(async () => {
if (!this.roomPromise || !this.roomId) return
const room = await this.getRoom()
// convert the room to JSON and upload it to R2
const snapshot = JSON.stringify(room.getCurrentSnapshot())
await this.r2.put(`rooms/${this.roomId}`, snapshot)