VALL-E-DRAW

\n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n };\n}\n\nif (typeof document !== \"undefined\") {\n (window as any).makeValleDrawClient = async function({ iframeSrc, model }) {\n const ret = { url: \"https://esm.sh/~ae19cbe7d55c481140f1002355f248f335382639\" };\n\n const {\n ReactDOM,\n React,\n tldraw,\n useHotkeys,\n } = await import(ret.url + \"?bundle-deps\");\n const { useCallback, useRef, useEffect } = React;\n const {\n Tldraw,\n useEditor,\n useToasts,\n createShapeId,\n BaseBoxShapeUtil,\n DefaultSpinner,\n HTMLContainer,\n SvgExportContext,\n TLBaseShape,\n TldrawUiIcon,\n Vec,\n stopEventPropagation,\n toDomPrecision,\n useIsEditing,\n useValue,\n sortByIndex,\n } = tldraw;\n\n function MakeRealButton() {\n const editor = useEditor();\n const { addToast } = useToasts();\n\n const handleClick = useCallback(async () => {\n try {\n const selectedShapes = editor.getSelectedShapes();\n if (selectedShapes.length === 0) throw Error(\"First select something to make real.\");\n const { maxX, midY } = editor.getSelectionPageBounds();\n\n const text = `export default async function main(req: Request): Promise {\n return new Response(\"Hello, World!\", {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n }`;\n\n let previewHeight = (540 * 2) / 3;\n let previewWidth = (960 * 2) / 3;\n // const highestPreview = selectedShapes\n // .filter((s) => s.type === \"preview\")\n // .sort(sortByIndex)\n // .reverse()[0];\n // if (highestPreview) {\n // previewHeight = highestPreview.props.h;\n // previewWidth = highestPreview.props.w;\n // }\n\n const prompt = `Make an HTTP Val that outputs HTML (there is no need to import stevekrouse/html).\\n`\n + selectedShapes.filter((s) => s.type === \"text\").map((s) => s.props.text).join(\"\\n\");\n\n const loadValName = selectedShapes.filter((s) =>\n s.type === \"preview\" && s.props.finishedValName\n ).map((s) => s.props.finishedValName)[0] || \"\";\n\n const newShapeId = createShapeId();\n editor.createShape({\n id: `${newShapeId}_preview`,\n type: \"preview\",\n x: maxX + 60,\n y: midY - previewHeight / 2,\n props: {\n prompt,\n loadValName,\n w: previewWidth,\n h: previewHeight,\n iframeWidth: 800,\n source: \"\",\n },\n meta: {},\n });\n } catch (e: any) {\n console.error(e);\n addToast({\n title: \"Something went wrong\",\n description: `${e.message.slice(0, 200)}`,\n });\n }\n }, [editor, addToast]);\n useHotkeys(\"q\", handleClick);\n\n return (\n \n

\n Make Real (Q)\n

\n \n );\n }\n\n function App() {\n return (\n <>\n

\n }}\n />\n

\n \n );\n }\n\n const root = ReactDOM.createRoot(document.getElementById(\"root\"));\n root.render();\n\n //\n //\n //\n //\n //\n // https://github.com/tldraw/make-real/blob/3093e7d528683370b2ac60c1346ce3694e07ccae/app/PreviewShape/PreviewShape.tsx\n class PreviewShapeUtil extends BaseBoxShapeUtil {\n static type = \"preview\" as const;\n\n getDefaultProps() {\n return {\n prompt: \"\",\n loadValName: \"\",\n finishedValName: \"\",\n w: (960 * 2) / 3,\n h: (540 * 2) / 3,\n previewWidth: (960 * 2) / 3 * 2,\n dateCreated: Date.now(),\n };\n }\n\n canEdit = (_shape) => true;\n\n isAspectRatioLocked = (_shape) => false;\n\n canResize = (_shape) => true;\n\n component(shape) {\n const isEditing = useIsEditing(shape.id);\n\n const boxShadow = useValue(\n \"box shadow\",\n () => {\n const rotation = this.editor.getShapePageTransform(shape)!.rotation();\n return getRotatedBoxShadow(rotation);\n },\n [this.editor],\n );\n\n const hasSubmitted = useRef();\n\n useEffect(() => {\n if (hasSubmitted.current) {\n return;\n }\n if (shape.props.finishedValName) {\n (document.getElementById(`${shape.id}_iframe`) as HTMLIFrameElement).src =\n `${iframeSrc}/?fullscreen=1&loadValName=${shape.props.finishedValName}`;\n } else {\n (document.getElementById(`${shape.id}_form`) as HTMLFormElement).submit();\n }\n hasSubmitted.current = true;\n });\n\n const onMessage = useCallback((event) => {\n if (\n event.source.window === (document.getElementById(`${shape.id}_iframe`) as HTMLIFrameElement).contentWindow\n && event.data.messageType === \"generationFinished\"\n ) {\n this.editor.updateShape({\n id: shape.id,\n type: \"preview\",\n props: { finishedValName: event.data.tempValName },\n });\n }\n }, []);\n\n useEffect(() => {\n window.addEventListener(\"message\", onMessage);\n return () => window.removeEventListener(\"message\", onMessage);\n }, [onMessage]);\n\n return (\n \n \n \n \n \n \n \n );\n }\n\n indicator(shape) {\n return ;\n }\n }\n\n const ROTATING_BOX_SHADOWS = [\n {\n offsetX: 0,\n offsetY: 2,\n blur: 4,\n spread: -1,\n color: \"#0000003a\",\n },\n {\n offsetX: 0,\n offsetY: 3,\n blur: 12,\n spread: -2,\n color: \"#0000001f\",\n },\n ];\n\n function getRotatedBoxShadow(rotation: number) {\n const cssStrings = ROTATING_BOX_SHADOWS.map((shadow) => {\n const { offsetX, offsetY, blur, spread, color } = shadow;\n const vec = new Vec(offsetX, offsetY);\n const { x, y } = vec.rot(-rotation);\n return `${x}px ${y}px ${blur}px ${spread}px ${color}`;\n });\n return cssStrings.join(\", \");\n }\n };\n}","deleted","label",[98],"permalink","https://www.val.town/x/roadlabs/valledrawclient/code/main.tsx","extension","actionData","errors"]