From 8237d08c7fa794463117a7297a0f3e3437387366 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Sun, 14 Jan 2024 19:03:56 +0000 Subject: [PATCH] restore root --- src/app/page.tsx | 210 +++++++++++++++++++++++++++++++++------ src/app/private/page.tsx | 185 ---------------------------------- 2 files changed, 181 insertions(+), 214 deletions(-) delete mode 100644 src/app/private/page.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 285b9a7..c3c12ba 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,33 +1,185 @@ +/* eslint-disable @next/next/no-img-element */ +'use client' + +import { LiveImageShape, LiveImageShapeUtil } from '@/components/LiveImageShapeUtil' +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, + Tldraw, + toolbarItem, + track, + useEditor, +} from '@tldraw/tldraw' +import { useEffect, useMemo, useState } from 'react' +import { createPortal } from 'react-dom' + +fal.config({ + requestMiddleware: fal.withProxy({ + targetUrl: '/api/fal/proxy', + }), +}) + +const overrides: TLUiOverrides = { + tools(editor, tools) { + tools.liveImage = { + id: 'live-image', + icon: 'tool-frame', + label: 'Frame', + kbd: 'f', + readonlyOk: false, + onSelect: () => { + editor.setCurrentTool('live-image') + }, + } + return tools + }, + toolbar(_app, toolbar, { tools }) { + const frameIndex = toolbar.findIndex((item) => item.id === 'frame') + if (frameIndex !== -1) toolbar.splice(frameIndex, 1) + const highlighterIndex = toolbar.findIndex((item) => item.id === 'highlight') + if (highlighterIndex !== -1) { + const highlighterItem = toolbar[highlighterIndex] + toolbar.splice(highlighterIndex, 1) + toolbar.splice(3, 0, highlighterItem) + } + toolbar.splice(2, 0, toolbarItem(tools.liveImage)) + return toolbar + }, +} + +const shapeUtils = [LiveImageShapeUtil] +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 + if (shape.type === 'live-image' && type === 'frame') { + return true + } + return shape.type === type + } + + // If there isn't a live image shape, create one + if (!editor.getCurrentPageShapes().some((shape) => shape.type === 'live-image')) { + editor.createShape({ + type: 'live-image', + x: 120, + y: 180, + props: { + w: 512, + h: 512, + name: '', + }, + }) + } + + editor.setStyleForNextShapes(DefaultSizeStyle, 'xl', { ephemeral: true }) + } + return ( -
-
-

- - {/* eslint-disable-next-line @next/next/no-img-element */} - by tldraw - -

-

Sorry!

-

We shut this project down on January 14th, 2024.

-

Here are some things you can do:

-
    -
  1. - Learn more about - what this project was. -
    2. -
  2. - Visit tldraw.com for a free multiplayer whiteboard. -
    3. -
  3. - Let us know on the tldraw Discord if you really really liked this. -
    4. -
-

Thank you!

-

- ❤️ tldraw -

-
-
+ +
+
+ } + overrides={overrides} + > + + + + +
+
+ + ) +} + +function SneakySideEffects() { + const editor = useEditor() + + useEffect(() => { + editor.sideEffects.registerAfterChangeHandler('shape', () => { + editor.emit('update-drawings' as any) + }) + editor.sideEffects.registerAfterCreateHandler('shape', () => { + editor.emit('update-drawings' as any) + }) + editor.sideEffects.registerAfterDeleteHandler('shape', () => { + editor.emit('update-drawings' as any) + }) + }, [editor]) + + return null +} + +const LiveImageAssets = track(function LiveImageAssets() { + const editor = useEditor() + + return ( + + {editor + .getCurrentPageShapes() + .filter((shape): shape is LiveImageShape => shape.type === 'live-image') + .map((shape) => ( + + ))} + + ) +}) + +const LiveImageAsset = track(function LiveImageAsset({ shape }: { shape: LiveImageShape }) { + const editor = useEditor() + + 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) + return ( + asset && + asset.props.src && ( + {shape.props.name} + ) + ) +}) + +function Inject({ children, selector }: { children: React.ReactNode; selector: string }) { + const [parent, setParent] = useState(null) + const target = useMemo(() => parent?.querySelector(selector) ?? null, [parent, selector]) + + return ( + <> +
setParent(el?.parentElement ?? null)} style={{ display: 'none' }} /> + {target && createPortal(children, target)} + ) } diff --git a/src/app/private/page.tsx b/src/app/private/page.tsx deleted file mode 100644 index 15e8c52..0000000 --- a/src/app/private/page.tsx +++ /dev/null @@ -1,185 +0,0 @@ -/* eslint-disable @next/next/no-img-element */ -'use client' - -import { LiveImageShape, LiveImageShapeUtil } from '@/components/LiveImageShapeUtil' -import { LockupLink } from '@/components/LockupLink' -import { LiveImageProvider } from '@/hooks/useLiveImage' -import * as fal from '@fal-ai/serverless-client' -import { - AssetRecordType, - DefaultSizeStyle, - Editor, - TLUiOverrides, - Tldraw, - toolbarItem, - track, - useEditor, -} from '@tldraw/tldraw' -import { useEffect, useMemo, useState } from 'react' -import { createPortal } from 'react-dom' -import { LiveImageTool, MakeLiveButton } from '../../components/LiveImageTool' - -fal.config({ - requestMiddleware: fal.withProxy({ - targetUrl: '/api/fal/proxy', - }), -}) - -const overrides: TLUiOverrides = { - tools(editor, tools) { - tools.liveImage = { - id: 'live-image', - icon: 'tool-frame', - label: 'Frame', - kbd: 'f', - readonlyOk: false, - onSelect: () => { - editor.setCurrentTool('live-image') - }, - } - return tools - }, - toolbar(_app, toolbar, { tools }) { - const frameIndex = toolbar.findIndex((item) => item.id === 'frame') - if (frameIndex !== -1) toolbar.splice(frameIndex, 1) - const highlighterIndex = toolbar.findIndex((item) => item.id === 'highlight') - if (highlighterIndex !== -1) { - const highlighterItem = toolbar[highlighterIndex] - toolbar.splice(highlighterIndex, 1) - toolbar.splice(3, 0, highlighterItem) - } - toolbar.splice(2, 0, toolbarItem(tools.liveImage)) - return toolbar - }, -} - -const shapeUtils = [LiveImageShapeUtil] -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 - if (shape.type === 'live-image' && type === 'frame') { - return true - } - return shape.type === type - } - - // If there isn't a live image shape, create one - if (!editor.getCurrentPageShapes().some((shape) => shape.type === 'live-image')) { - editor.createShape({ - type: 'live-image', - x: 120, - y: 180, - props: { - w: 512, - h: 512, - name: '', - }, - }) - } - - editor.setStyleForNextShapes(DefaultSizeStyle, 'xl', { ephemeral: true }) - } - - return ( - -
-
- } - overrides={overrides} - > - - - - -
-
- - ) -} - -function SneakySideEffects() { - const editor = useEditor() - - useEffect(() => { - editor.sideEffects.registerAfterChangeHandler('shape', () => { - editor.emit('update-drawings' as any) - }) - editor.sideEffects.registerAfterCreateHandler('shape', () => { - editor.emit('update-drawings' as any) - }) - editor.sideEffects.registerAfterDeleteHandler('shape', () => { - editor.emit('update-drawings' as any) - }) - }, [editor]) - - return null -} - -const LiveImageAssets = track(function LiveImageAssets() { - const editor = useEditor() - - return ( - - {editor - .getCurrentPageShapes() - .filter((shape): shape is LiveImageShape => shape.type === 'live-image') - .map((shape) => ( - - ))} - - ) -}) - -const LiveImageAsset = track(function LiveImageAsset({ shape }: { shape: LiveImageShape }) { - const editor = useEditor() - - 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) - return ( - asset && - asset.props.src && ( - {shape.props.name} - ) - ) -}) - -function Inject({ children, selector }: { children: React.ReactNode; selector: string }) { - const [parent, setParent] = useState(null) - const target = useMemo(() => parent?.querySelector(selector) ?? null, [parent, selector]) - - return ( - <> -
setParent(el?.parentElement ?? null)} style={{ display: 'none' }} /> - {target && createPortal(children, target)} - - ) -}