\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}","deleted","label",[98],"permalink","https://www.val.town/x/d3vobed/valledrawclient/code/main.tsx","extension","actionData","errors"]