\n Make Real\n

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

\n }}\n />\n

\n \n );\n}\n\n// The app will be rendered inside the root div\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render();\n\n//\n//\n//\n//\n//\n// https://github.com/tldraw/make-real/blob/3093e7d528683370b2ac60c1346ce3694e07ccae/app/PreviewShape/PreviewShape.tsx\nexport 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 `https://janpaul123-valle2.web.val.run/?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({ id: shape.id, type: \"preview\", props: { finishedValName: event.data.tempValName } });\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\nconst 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\nfunction 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}","createdAt",["D",1721781202965],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","d3vobed","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yamZiSGlndnFPSWM4NVNZVWpOR0R1MXNhQloifQ","forkedVal",{"_113":134,"_128":135,"_98":99,"_118":136,"_137":-5},"1ad72ee4-4867-11ef-8244-de64eea55b61","janpaul123",70,"prDisabledHint","interval","slug","d3vobed/valledrawclient","description","versions",[144],{"_118":31,"_145":-5,"_116":146,"_113":111},"prId",["D",1721781202965],"recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_95":96,"_94":154,"_128":129,"_141":107,"_98":99,"_161":31,"_162":31,"_50":51,"_163":164},{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":155,"_118":31,"_119":26,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":31,"_126":-5,"_20":156,"_132":157,"_138":-7,"_139":140,"_141":107,"_142":158},["D",1721781202965],{"_128":129,"_130":131},{"_113":134,"_128":135,"_98":99,"_118":136,"_137":-5},[159],{"_118":31,"_145":-5,"_116":160,"_113":111},["D",1721781202965],"page","count","prs",[],"routes/_app","actionData","errors"]