[dont merge] draw faster

README.md

@@ -59,7 +59,7 @@ And open `localhost:3000`
 
 Draw something in the rectangle!
 Double-clicking the prompt to change it.
-Click the small arrow to enter *lens mode*.
+Click the small arrow to enter _lens mode_.
 
 ## 6. Share!
 
@@ -79,41 +79,35 @@ Sign in on [CodeSandbox](https://codesandbox.io). Click on **Import repository**
 
 ![a](https://github.com/tldraw/draw-fast/assets/15892272/dce56531-ca82-473d-b2ef-fe13644c7fb3)
 
-
 Import the repo by pasting in `https://github.com/tldraw/draw-fast` and clicking **Import**.
 ![b](https://github.com/tldraw/draw-fast/assets/15892272/000597fe-69e0-43a0-96fb-89ab242c31f3)
 
-
 ## 2. Setup the environment
 
 Click **Next** until you get to the **Set environment variables** screen.
 ![c](https://github.com/tldraw/draw-fast/assets/15892272/d321b780-c33c-4217-b647-f757182869f3)
 
-
 On the **Set environment variables** screen, click **Add variable**.
 ![d](https://github.com/tldraw/draw-fast/assets/15892272/65699754-9a54-4406-a28b-285d94488997)
 
-
 Name your key `FAL_KEY`.
 
 You can get a key from [fal.ai](https://www.fal.ai/dashboard/keys)
 Instructions on how to do that are [here](https://www.notion.so/Draw-Fast-help-038edf9a982847e19df078854c54c8dd?pvs=21).
 ![e](https://github.com/tldraw/draw-fast/assets/15892272/4c2a128c-a597-4578-87c4-44e73e29de86)
 
-
 Click **Save**, then click **Next** until you get to the end of setup.
 
 ![f](https://github.com/tldraw/draw-fast/assets/15892272/9467f645-5843-445c-b346-68f2617c1d02)
 
 Finally, click **Apply and restart**, and wait about 5 minutes.
 ![g](https://github.com/tldraw/draw-fast/assets/15892272/b9ba8c65-7b28-4e80-a760-6b1814244c7b)
 
-
 ## 3. Draw fast
 
 Draw something in the rectangle!
 Double-clicking the prompt to change it.
-Click the small arrow to enter *lens mode*.
+Click the small arrow to enter _lens mode_.
 
 ## 4. Share!
 

package.json

@@ -11,8 +11,8 @@
 		"format": "prettier --write ."
 	},
 	"dependencies": {
-		"@fal-ai/serverless-client": "^0.6.0",
-		"@fal-ai/serverless-proxy": "^0.6.0",
+		"@fal-ai/serverless-client": "^0.8.2",
+		"@fal-ai/serverless-proxy": "^0.7.3",
 		"@tldraw/tldraw": "canary",
 		"next": "14.0.3",
 		"react": "^18",
@@ -32,4 +32,4 @@
 		"prettier-plugin-organize-imports": "^3.2.4",
 		"typescript": "^5"
 	}
-}
+}

src/app/layout.tsx

@@ -4,8 +4,8 @@ import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
-const TITLE = 'draw fast • tldraw'
-const DESCRIPTION = 'Draw a picture (fast) with tldraw'
+const TITLE = 'draw faster • tldraw'
+const DESCRIPTION = 'Draw a picture (faster) with tldraw'
 const TWITTER_HANDLE = '@tldraw'
 const TWITTER_CARD = 'social-twitter.png'
 const FACEBOOK_CARD = 'social-og.png'

src/app/page.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable @next/next/no-img-element */
 'use client'
 
+import { CameraFeedShapeUtil } from '@/components/CameraFeedShapeUtil'
 import { LiveImageShape, LiveImageShapeUtil } from '@/components/LiveImageShapeUtil'
-import { LiveImageTool,MakeLiveButton } from '@/components/LiveImageTool'
+import { LiveImageTool, MakeLiveButton } from '@/components/LiveImageTool'
 import { LockupLink } from '@/components/LockupLink'
 import { LiveImageProvider } from '@/hooks/useLiveImage'
 import * as fal from '@fal-ai/serverless-client'
 import {
-	AssetRecordType,
 	DefaultSizeStyle,
 	Editor,
 	TLUiOverrides,
@@ -20,9 +20,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 
 fal.config({
-	requestMiddleware: fal.withProxy({
-		targetUrl: '/api/fal/proxy',
-	}),
+	proxyUrl: '/api/fal/proxy',
 })
 
 const overrides: TLUiOverrides = {
@@ -53,7 +51,7 @@ const overrides: TLUiOverrides = {
 	},
 }
 
-const shapeUtils = [LiveImageShapeUtil]
+const shapeUtils = [LiveImageShapeUtil, CameraFeedShapeUtil]
 const tools = [LiveImageTool]
 
 export default function Home() {
@@ -86,11 +84,11 @@ export default function Home() {
 	}
 
 	return (
-		<LiveImageProvider appId="110602490-lcm-sd15-i2i">
+		<LiveImageProvider>
 			<main className="tldraw-wrapper">
 				<div className="tldraw-wrapper__inner">
 					<Tldraw
-						persistenceKey="tldraw-fal"
+						persistenceKey="draw-faster"
 						onMount={onEditorMount}
 						shapeUtils={shapeUtils}
 						tools={tools}
@@ -146,13 +144,13 @@ const LiveImageAsset = track(function LiveImageAsset({ shape }: { shape: LiveIma
 	if (!shape.props.overlayResult) return null
 
 	const transform = editor.getShapePageTransform(shape).toCssString()
-	const assetId = AssetRecordType.createId(shape.id.split(':')[1])
-	const asset = editor.getAsset(assetId)
+	// const assetId = AssetRecordType.createId(shape.id.split(':')[1])
+	// const asset = editor.getAsset(assetId)
 	return (
-		asset &&
-		asset.props.src && (
+		shape &&
+		shape.props.src && (
 			<img
-				src={asset.props.src!}
+				src={shape.props.src!}
 				alt={shape.props.name}
 				width={shape.props.w}
 				height={shape.props.h}

src/components/CameraFeedShapeUtil.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable react-hooks/rules-of-hooks */
+import {
+	Geometry2d,
+	HTMLContainer,
+	Rectangle2d,
+	resizeBox,
+	ShapeUtil,
+	TLBaseShape,
+	TLOnResizeHandler,
+	toDomPrecision,
+} from '@tldraw/tldraw'
+import { useEffect, useRef } from 'react'
+
+export type CameraFeedShape = TLBaseShape<
+	'camera-feed',
+	{
+		w: number
+		h: number
+		name: string
+		overlayResult?: boolean
+		src?: string
+	}
+>
+
+export class CameraFeedShapeUtil extends ShapeUtil<CameraFeedShape> {
+	static type = 'camera-feed' as any
+
+	override canBind = () => false
+	override canUnmount = () => false
+	override isAspectRatioLocked = () => false
+
+	getDefaultProps() {
+		return {
+			// 16 by 9
+			w: 512,
+			h: 360,
+			name: '',
+		}
+	}
+
+	override getGeometry(shape: CameraFeedShape): Geometry2d {
+		return new Rectangle2d({
+			width: shape.props.w,
+			height: shape.props.h,
+			isFilled: true,
+		})
+	}
+	override onResize: TLOnResizeHandler<any> = (shape, info) => {
+		return resizeBox(shape, info)
+	}
+
+	indicator(shape: CameraFeedShape) {
+		const bounds = this.editor.getShapeGeometry(shape).bounds
+
+		return <rect width={toDomPrecision(bounds.width)} height={toDomPrecision(bounds.height)} />
+	}
+
+	ref: HTMLVideoElement | null = null
+
+	override component(shape: CameraFeedShape) {
+		const videoRef = useRef<HTMLVideoElement>(null)
+
+		this.ref = videoRef.current
+
+		// Get the user's camera
+		useEffect(() => {
+			const constraints = {
+				video: {
+					width: shape.props.w,
+					height: shape.props.h,
+				},
+			}
+			navigator.mediaDevices
+				.getUserMedia({ video: constraints as any })
+				.then((stream) => {
+					if (videoRef.current) {
+						videoRef.current.srcObject = stream
+					}
+				})
+				.catch((error) => {
+					console.error('Error accessing media devices.', error)
+				})
+		}, [shape.props.w, shape.props.h])
+
+		return (
+			<HTMLContainer>
+				<video
+					autoPlay
+					muted
+					playsInline
+					ref={videoRef}
+					style={{
+						width: '100%',
+						height: '100%',
+						// objectFit: 'cover',
+						// flip horizontally
+						transform: 'scaleX(-1)',
+					}}
+				/>
+			</HTMLContainer>
+		)
+	}
+
+	override toSvg(shape: CameraFeedShape) {
+		// get an image of the video stream
+
+		const video = this.ref
+		if (!video) throw new Error('Video ref not found')
+		if (canvas.width !== shape.props.w || canvas.height !== shape.props.h) {
+			canvas.width = shape.props.w * 2
+			canvas.height = shape.props.h * 2
+		}
+		// flip horizontally
+		ctx?.scale(-1, 1)
+		ctx?.translate(-shape.props.w, 0)
+		ctx?.drawImage(video, 0, 0, shape.props.w, shape.props.h)
+		const dataUrl = canvas.toDataURL('image/png')
+		const svgImageElement = document.createElementNS('http://www.w3.org/2000/svg', 'image')
+		svgImageElement.setAttribute('href', dataUrl)
+		// svgImageElement.setAttribute('width', shape.props.w.toString())
+		// svgImageElement.setAttribute('height', shape.props.h.toString())
+		// svgImageElement.setAttribute('x', '-100')
+		// svgImageElement.setAttribute('y', '0')
+		return svgImageElement
+	}
+}
+
+let canvas = null
+let ctx = null
+if (globalThis.window) {
+	canvas = document.createElement('canvas')
+	ctx = canvas.getContext('2d')
+	canvas.width = 512
+	canvas.height = 512
+}