Realtime 2

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "semi": false,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": true,
+  "plugins": [
+    "prettier-plugin-organize-imports"
+  ]
+}

package.json

@@ -2,6 +2,7 @@
   "name": "tldraw-fal",
   "version": "0.1.0",
   "private": true,
+  "license": "MIT",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -10,7 +11,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@fal-ai/serverless-client": "^0.5.4",
+    "@fal-ai/serverless-client": "^0.6.0-alpha.4",
     "@fal-ai/serverless-proxy": "^0.5.0",
     "@tldraw/tldraw": "^2.0.0-canary.ba4091c59418",
     "next": "14.0.3",
@@ -26,7 +27,8 @@
     "eslint-config-next": "14.0.3",
     "postcss": "^8",
     "prettier": "^3.1.0",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}

src/app/page.tsx

@@ -1,18 +1,9 @@
 'use client'
 
-import {
-	LiveImageShape,
-	LiveImageShapeUtil,
-} from '@/components/LiveImageShapeUtil'
+import { LiveImageShape, LiveImageShapeUtil } from '@/components/LiveImageShapeUtil'
 import * as fal from '@fal-ai/serverless-client'
-import {
-	AssetRecordType,
-	Editor,
-	FrameShapeTool,
-	Tldraw,
-	useEditor,
-} from '@tldraw/tldraw'
-import { useCallback, useEffect } from 'react'
+import { Editor, Tldraw, useEditor } from '@tldraw/tldraw'
+import { useEffect } from 'react'
 import { LiveImageTool, MakeLiveButton } from '../components/LiveImageTool'
 
 fal.config({
@@ -26,6 +17,7 @@ const tools = [LiveImageTool]
 
 export default function Home() {
 	const onEditorMount = (editor: Editor) => {
+		// We need the editor to think that the live image shape is a frame
 		// @ts-expect-error: patch
 		editor.isShapeOfType = function (arg, type) {
 			const shape = typeof arg === 'string' ? this.getShape(arg)! : arg
@@ -36,24 +28,18 @@ export default function Home() {
 		}
 
 		// If there isn't a live image shape, create one
-		const liveImage = editor.getCurrentPageShapes().find((shape) => {
-			return shape.type === 'live-image'
-		})
-
-		if (liveImage) {
-			return
+		if (!editor.getCurrentPageShapes().some((shape) => shape.type === 'live-image')) {
+			editor.createShape<LiveImageShape>({
+				type: 'live-image',
+				x: 120,
+				y: 180,
+				props: {
+					w: 512,
+					h: 512,
+					name: 'a city skyline',
+				},
+			})
 		}
-
-		editor.createShape<LiveImageShape>({
-			type: 'live-image',
-			x: 120,
-			y: 180,
-			props: {
-				w: 512,
-				h: 512,
-				name: 'a city skyline',
-			},
-		})
 	}
 
 	return (

src/components/FrameHeading.tsx

@@ -8,9 +8,9 @@ import {
 	useIsEditing,
 	useValue,
 } from '@tldraw/editor'
+import { preventDefault, stopEventPropagation } from '@tldraw/tldraw'
 import { useCallback, useEffect, useRef } from 'react'
 import { FrameLabelInput } from './FrameLabelInput'
-import { preventDefault, stopEventPropagation } from '@tldraw/tldraw'
 
 export function FrameHeading({
 	id,
@@ -41,8 +41,6 @@ export function FrameHeading({
 
 			const event = getPointerInfo(e)
 
-			console.log('hello')
-
 			// If we're editing the frame label, we shouldn't hijack the pointer event
 			if (editor.getEditingShapeId() === id) return
 
@@ -77,29 +75,25 @@ export function FrameHeading({
 	// rotate right 45 deg
 	const offsetRotation = pageRotation + Math.PI / 4
 	const scaledRotation = (offsetRotation * (2 / Math.PI) + 4) % 4
-	const labelSide: SelectionEdge = (
-		['top', 'left', 'bottom', 'right'] as const
-	)[Math.floor(scaledRotation)]
+	const labelSide: SelectionEdge = (['top', 'left', 'bottom', 'right'] as const)[
+		Math.floor(scaledRotation)
+	]
 
 	let labelTranslate: string
 	switch (labelSide) {
 		case 'top':
 			labelTranslate = ``
 			break
 		case 'right':
-			labelTranslate = `translate(${toDomPrecision(
-				width
-			)}px, 0px) rotate(90deg)`
+			labelTranslate = `translate(${toDomPrecision(width)}px, 0px) rotate(90deg)`
 			break
 		case 'bottom':
 			labelTranslate = `translate(${toDomPrecision(width)}px, ${toDomPrecision(
 				height
 			)}px) rotate(180deg)`
 			break
 		case 'left':
-			labelTranslate = `translate(0px, ${toDomPrecision(
-				height
-			)}px) rotate(270deg)`
+			labelTranslate = `translate(0px, ${toDomPrecision(height)}px) rotate(270deg)`
 			break
 	}
 
@@ -109,22 +103,15 @@ export function FrameHeading({
 			style={{
 				overflow: isEditing ? 'visible' : 'hidden',
 				maxWidth: `calc(var(--tl-zoom) * ${
-					labelSide === 'top' || labelSide === 'bottom'
-						? Math.ceil(width)
-						: Math.ceil(height)
+					labelSide === 'top' || labelSide === 'bottom' ? Math.ceil(width) : Math.ceil(height)
 				}px + var(--space-5))`,
 				bottom: '100%',
 				transform: `${labelTranslate} scale(var(--tl-scale)) translateX(calc(-1 * var(--space-3))`,
 			}}
 			onPointerDown={handlePointerDown}
 		>
 			<div className="tl-frame-heading-hit-area">
-				<FrameLabelInput
-					ref={rInput}
-					id={id}
-					name={name}
-					isEditing={isEditing}
-				/>
+				<FrameLabelInput ref={rInput} id={id} name={name} isEditing={isEditing} />
 			</div>
 		</div>
 	)

src/components/LiveImageShapeUtil.tsx

@@ -2,20 +2,12 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
 	AssetRecordType,
-	canonicalizeRotation,
-	FrameShapeUtil,
 	Geometry2d,
 	getDefaultColorTheme,
-	getHashForObject,
-	getSvgAsImage,
-	HTMLContainer,
-	IdOf,
 	Rectangle2d,
 	resizeBox,
-	SelectionEdge,
 	ShapeUtil,
 	SVGContainer,
-	TLAsset,
 	TLBaseShape,
 	TLGroupShape,
 	TLOnResizeEndHandler,
@@ -27,15 +19,8 @@ import {
 	useIsDarkMode,
 } from '@tldraw/tldraw'
 
-import { blobToDataUri } from '@/utils/blob'
-import { debounce } from '@/utils/debounce'
-import * as fal from '@fal-ai/serverless-client'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import result from 'postcss/lib/result'
+import { useLiveImage } from '@/hooks/useLiveImage'
 import { FrameHeading } from './FrameHeading'
-import image from 'next/image'
-import { connect } from 'http2'
-import { useFal } from '@/hooks/useFal'
 
 // See https://www.fal.ai/models/latent-consistency-sd
 
@@ -94,21 +79,15 @@ export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
 
 	canUnmount = () => false
 
-	override canReceiveNewChildrenOfType = (
-		shape: TLShape,
-		_type: TLShape['type']
-	) => {
+	override canReceiveNewChildrenOfType = (shape: TLShape, _type: TLShape['type']) => {
 		return !shape.isLocked
 	}
 
 	providesBackgroundForChildren(): boolean {
 		return true
 	}
 
-	override canDropShapes = (
-		shape: LiveImageShape,
-		_shapes: TLShape[]
-	): boolean => {
+	override canDropShapes = (shape: LiveImageShape, _shapes: TLShape[]): boolean => {
 		return !shape.isLocked
 	}
 
@@ -126,16 +105,9 @@ export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
 		return { shouldHint: false }
 	}
 
-	override onDragShapesOut = (
-		_shape: LiveImageShape,
-		shapes: TLShape[]
-	): void => {
+	override onDragShapesOut = (_shape: LiveImageShape, shapes: TLShape[]): void => {
 		const parent = this.editor.getShape(_shape.parentId)
-		const isInGroup =
-			parent && this.editor.isShapeOfType<TLGroupShape>(parent, 'group')
-
-		// If frame is in a group, keep the shape
-		// moved out in that group
+		const isInGroup = parent && this.editor.isShapeOfType<TLGroupShape>(parent, 'group')
 
 		if (isInGroup) {
 			this.editor.reparentShapes(shapes, parent.id)
@@ -158,10 +130,7 @@ export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
 		}
 
 		if (shapesToReparent.length > 0) {
-			this.editor.reparentShapes(
-				shapesToReparent,
-				this.editor.getCurrentPageId()
-			)
+			this.editor.reparentShapes(shapesToReparent, this.editor.getCurrentPageId())
 		}
 	}
 
@@ -184,9 +153,9 @@ export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
 	override component(shape: LiveImageShape) {
 		const editor = useEditor()
 
-		useFal(shape.id, {
+		useLiveImage(shape.id, {
 			debounceTime: 0,
-			url: 'wss://110602490-lcm-sd15-i2i.gateway.alpha.fal.ai/ws',
+			appId: '110602490-lcm-plexed-sd15-i2i',
 		})
 
 		const bounds = this.editor.getShapeGeometry(shape).bounds