{ "cells": [ { "cell_type": "markdown", "id": "307aedfb", "metadata": {}, "source": [ "# Tldraw Gallery\n", "\n", "Welcome! This Gallery will give you an overview of the [tldraw-v1](https://github.com/tldraw/tldraw-v1) api.\n", "\n", "## Basic Shapes" ] }, { "cell_type": "code", "execution_count": 1, "id": "e931b3d1", "metadata": {}, "outputs": [], "source": [ "%load_ext ipyreact" ] }, { "cell_type": "code", "execution_count": 2, "id": "956c39c3", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "f9e8bdd03c094a469c7b586905f6b28f", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "\n", "import * as React from \"react\";\n", "import { Tldraw } from \"@tldraw/tldraw\";\n", "\n", "export default function App() {\n", " return (\n", " \n", " \n", " \n", " );\n", "}" ] }, { "cell_type": "markdown", "id": "11bd4ad5", "metadata": {}, "source": [ "## Text" ] }, { "cell_type": "code", "execution_count": 3, "id": "fd52982d-ad44-4c42-9592-4c96dcdb0abf", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "f30f584dd3d0460095d0c102194f96d6", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "import { TDShapeType, Tldraw } from '@tldraw/tldraw'\n", "import * as React from 'react'\n", "\n", "\n", "export default function App() {\n", "\n", "const handleMount = React.useCallback((app: Tldraw) => {\n", " app\n", " .createShapes({\n", " id: 'text1',\n", " type: TDShapeType.Text,\n", " point: [200, 200],\n", " text: \"This is Tldrawesome!!🎉\",\n", " color: \"blue\",\n", "\n", " })\n", "})\n", "\n", "return (\n", " \n", " \n", " \n", ")\n", "}\n" ] }, { "cell_type": "markdown", "id": "c7884dae", "metadata": {}, "source": [ "## Image" ] }, { "cell_type": "code", "execution_count": 4, "id": "bdf420b9-c2ab-4798-b8a9-052e8b8776df", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "31d36126b006431fb8605a4a58c9eb3c", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "\n", "import * as React from \"react\";\n", "import { TDAssetType, TDShapeType, Tldraw, TldrawApp } from \"@tldraw/tldraw\";\n", "\n", "export default function App() {\n", " const handleMount = (app: TldrawApp) => {\n", " // You can use the app API here! e.g. app.selectAll()\n", " app.patchAssets({\n", " myAssetId: {\n", " id: \"myAssetId\",\n", " type: TDAssetType.Image,\n", " fileName: \"card-repo.png\",\n", " src: \"https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png\"\n", " }\n", " });\n", "\n", " app.createShapes({\n", " id: \"myImage\",\n", " type: TDShapeType.Image,\n", " assetId: \"myAssetId\",\n", " point: [64, 64],\n", " size: [400, 340]\n", " });\n", " };\n", "\n", "return (\n", " \n", " \n", " \n", " )\n", " }\n" ] }, { "cell_type": "markdown", "id": "19603a70", "metadata": {}, "source": [ "## SVG" ] }, { "cell_type": "code", "execution_count": 5, "id": "17c4b0a4", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "2e3e6b11c8bb4d77a586d252690106a0", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "import * as React from \"react\";\n", "import { TDAssetType, TDShapeType, Tldraw, TldrawApp } from \"@tldraw/tldraw\";\n", "\n", "export default function App() {\n", " const handleMount = (app: TldrawApp) => {\n", " const someSvgString = `\n", " \n", " \n", " \n", " \n", " \n", " \n", " `\n", " app.patchAssets({\n", " myAssetId: {\n", " id: \"myAssetId\",\n", " type: TDAssetType.Image,\n", " fileName: \"myImage.svg\",\n", " src: `data:image/svg+xml,${encodeURIComponent(someSvgString)}`\n", " }\n", " });\n", "\n", " app.createShapes({\n", " id: \"mySvg\",\n", " type: TDShapeType.Image,\n", " assetId: \"myAssetId\",\n", " point: [164, 64],\n", " size: [200, 200]\n", " });\n", " };\n", "\n", " return (\n", " \n", " \n", " \n", " );\n", "}\n" ] }, { "cell_type": "markdown", "id": "9cfd4160", "metadata": {}, "source": [ "## Rectangle" ] }, { "cell_type": "code", "execution_count": 6, "id": "a691d1fa-6180-4019-8bad-abb57c92ec47", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "53ce9b119652412db12d19411038f710", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "\n", "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\n", "import * as React from \"react\";\n", "\n", "export default function App() {\n", "\n", "const handleMount = React.useCallback((app: Tldraw) => {\n", "\n", " app.createShapes({\n", " id: \"rect1\",\n", " type: TDShapeType.Rectangle,\n", " point: [100, 100],\n", " size: [400, 200],\n", " });\n", "});\n", "\n", "return (\n", " \n", " \n", " \n", ");\n", "}\n" ] }, { "cell_type": "markdown", "id": "df307a7a", "metadata": {}, "source": [ "## Triangle" ] }, { "cell_type": "code", "execution_count": 7, "id": "1c53587c-820e-4bd2-bf7a-e90b8d4f59e1", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "e51ad28a146a44b4a78b6a42fb5aa59d", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "\n", "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\n", "import * as React from \"react\";\n", "\n", "export default function App() {\n", "\n", "const handleMount = React.useCallback((app: Tldraw) => {\n", "\n", " app.createShapes({\n", " id: \"rect1\",\n", " type: TDShapeType.Triangle,\n", " point: [100, 100],\n", " size: [400, 200],\n", " });\n", "});\n", "\n", "return (\n", " \n", " \n", " \n", ");\n", "}\n" ] }, { "cell_type": "markdown", "id": "12043d5c", "metadata": {}, "source": [ "## Locked Object" ] }, { "cell_type": "code", "execution_count": 8, "id": "78d219c4", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "167f3a49ce124851953441a409542a9c", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "\n", "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\n", "import * as React from \"react\";\n", "\n", "export default function App() {\n", "\n", "const handleMount = React.useCallback((app: Tldraw) => {\n", "\n", " app.createShapes({\n", " id: \"rect1\",\n", " type: TDShapeType.Triangle,\n", " point: [100, 100],\n", " size: [400, 200],\n", " isLocked: true\n", "\n", " });\n", "});\n", "\n", "return (\n", " \n", " \n", " \n", ");\n", "}\n" ] }, { "cell_type": "markdown", "id": "ea0471d9", "metadata": {}, "source": [ "## The UI\n", "\n", "Some examples how to show and Hide UI elements." ] }, { "cell_type": "code", "execution_count": 9, "id": "47f11ffb-9916-4190-9ba5-4531d11670a9", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "9e386310506346fb8a5a9cb983bcbfea", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "\n", "import * as React from \"react\";\n", "import { Tldraw } from \"@tldraw/tldraw\";\n", "\n", "export default function App() {\n", " return (\n", " \n", " \n", " \n", " );\n", "}" ] }, { "cell_type": "markdown", "id": "61f87496-5888-4812-bcfd-7c3201083db6", "metadata": {}, "source": [ "### Tracing a Stroke to the console\n", "\n", "You need to select the \"Draw\" option for this, open the console to see how many points have been drawn!" ] }, { "cell_type": "code", "execution_count": 10, "id": "91c2e9ed-1f7f-4d01-a2c5-76be6bf7ea66", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "f808a477e6b4407693ed54f0c52b6703", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Widget()" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%react\n", "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\n", "import * as React from \"react\";\n", "\n", "export default function App() {\n", " const handleChange = (e) => {\n", " let my_current_stroke = e.selectedIds[0];\n", " let my_object = e.getShape(my_current_stroke);\n", "\n", " if (my_object === undefined) {\n", " console.log(\"no object selected\");\n", " }\n", " if (my_object !== undefined) {\n", " let my_points = my_object.points;\n", " if (my_points !== undefined){\n", " console.log(my_points.length);\n", " }\n", " }\n", " };\n", "\n", " return (\n", " \n", " \n", " \n", " );\n", "}\n" ] }, { "cell_type": "markdown", "id": "c43fa0d0", "metadata": {}, "source": [ "## Another example\n", "\n", "Lalalala\n", "\n", "### in detail\n", "\n", "blalabla" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.11.4" }, "widgets": { "application/vnd.jupyter.widget-state+json": { "state": { "026540c0546347119adfe5e582fbb63d": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_5fbcb9805ecd46c0afc6bc43e149c2ce", "name": null, "react_version": 18 } }, "04cc3f85e91c469c95f727bc62ac4740": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n const handleChange = (e) => {\n let my_current_stroke = e.selectedIds[0];\n let my_object = e.getShape(my_current_stroke);\n\n if (my_object === undefined) {\n console.log(\"no object selected\");\n }\n if (my_object !== undefined) {\n let my_points = my_object.points;\n if (my_points !== undefined){\n console.log(my_points.length);\n }\n }\n };\n\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_decb768a732d42a898c005992d1750eb", "name": null, "react_version": 18 } }, "06441d0971b6406abe794b1ebc89b3a9": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "06463f6c51b14809ba93afbf3f015d1b": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "0a07ca4e66144af6bc5ab78def870b88": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "0ae183b6bfe345ae9efefef1e5efcc99": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from '@tldraw/tldraw'\nimport * as React from 'react'\n\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n app\n .createShapes({\n id: 'text1',\n type: TDShapeType.Text,\n point: [200, 200],\n text: \"This is Tldrawesome!!🎉\",\n color: \"blue\",\n\n })\n})\n\nreturn (\n \n \n \n)\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_ab7dcb57a5fb4196850e7fab409919df", "name": null, "react_version": 18 } }, "1216e94416444d2ea6eec22a6808e63b": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDExport, TDExportType, Tldraw, TldrawApp } from '@tldraw/tldraw'\nimport * as React from 'react'\n\nconst ACTION = 'download' as 'download' | 'open'\n\nexport default function Export() {\n const handleExport = React.useCallback(async (app: TldrawApp, info: TDExport) => {\n // When a user exports, the default behavior is to download\n // the exported data as a file. If the onExport callback is\n // provided, it will be called instead.\n\n switch (ACTION) {\n case 'download': {\n // Download the file\n const blobUrl = URL.createObjectURL(info.blob)\n const link = document.createElement('a')\n link.href = blobUrl\n link.download = info.name + '.' + info.type\n link.click()\n break\n }\n case 'open': {\n // Open the file in a new tab\n const blobUrl = URL.createObjectURL(info.blob)\n const link = document.createElement('a')\n link.href = blobUrl\n link.target = '_blank'\n link.click()\n break\n }\n }\n }, [])\n\n const [app, setApp] = React.useState()\n\n const handleExportSVG = React.useCallback(() => {\n app?.exportImage(TDExportType.SVG, { scale: 1, quality: 1 })\n }, [app])\n\n const handleExportPNG = React.useCallback(() => {\n app?.exportImage(TDExportType.PNG, { scale: 2, quality: 1 })\n }, [app])\n\n const handleExportJPG = React.useCallback(() => {\n app?.exportImage(TDExportType.JPG, { scale: 2, quality: 1 })\n }, [app])\n\n const handleMount = React.useCallback((app: TldrawApp) => {\n setApp(app)\n }, [])\n\n\n\n return (\n
\n \n
\n \n \n \n
\n
\n )\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_f4103de634fc4cf288d7f3fe7d5b5ffa", "name": null, "react_version": 18 } }, "167f3a49ce124851953441a409542a9c": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Triangle,\n point: [100, 100],\n size: [400, 200],\n isLocked: true\n\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_fa8888b5a4ca46b4a3c16ff509ee6414", "name": null, "react_version": 18 } }, "189b25f6f8a54773823a45778678591a": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from '@tldraw/tldraw'\nimport * as React from 'react'\n\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n app\n .createShapes({\n id: 'text1',\n type: TDShapeType.Text,\n point: [200, 200],\n text: \"This is Tldrawesome!!🎉\",\n color: \"blue\",\n\n })\n})\n\nreturn (\n \n \n \n)\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_06441d0971b6406abe794b1ebc89b3a9", "name": null, "react_version": 18 } }, "1df13d559fa74f999a70e073f0309b21": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_491efe5a95fc410e89c08d16efab85b5", "name": null, "react_version": 18 } }, "2d22e17ac03f493b8e851ce03a508176": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_38205e3954cd4e4f89cc8ac7ab59c4dc", "name": null, "react_version": 18 } }, "2e3e6b11c8bb4d77a586d252690106a0": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { TDAssetType, TDShapeType, Tldraw, TldrawApp } from \"@tldraw/tldraw\";\n\nexport default function App() {\n const handleMount = (app: TldrawApp) => {\n const someSvgString = `\n \n \n \n \n \n \n `\n app.patchAssets({\n myAssetId: {\n id: \"myAssetId\",\n type: TDAssetType.Image,\n fileName: \"myImage.svg\",\n src: `data:image/svg+xml,${encodeURIComponent(someSvgString)}`\n }\n });\n\n app.createShapes({\n id: \"mySvg\",\n type: TDShapeType.Image,\n assetId: \"myAssetId\",\n point: [164, 64],\n size: [200, 200]\n });\n };\n\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_7fc95b212724423c846b9fba8cfbf772", "name": null, "react_version": 18 } }, "31d36126b006431fb8605a4a58c9eb3c": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { TDAssetType, TDShapeType, Tldraw, TldrawApp } from \"@tldraw/tldraw\";\n\nexport default function App() {\n const handleMount = (app: TldrawApp) => {\n // You can use the app API here! e.g. app.selectAll()\n app.patchAssets({\n myAssetId: {\n id: \"myAssetId\",\n type: TDAssetType.Image,\n fileName: \"card-repo.png\",\n src: \"https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png\"\n }\n });\n\n app.createShapes({\n id: \"myImage\",\n type: TDShapeType.Image,\n assetId: \"myAssetId\",\n point: [64, 64],\n size: [400, 340]\n });\n };\n\nreturn (\n \n \n \n )\n }\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_b128fe9789e24f5f977bcb2b604fedca", "name": null, "react_version": 18 } }, "34522dc574f54261a4bb72b2a0da5ce9": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Rectangle,\n point: [100, 100],\n size: [400, 200],\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_e5ed649b52d84366af5358f6db1ba56a", "name": null, "react_version": 18 } }, "38205e3954cd4e4f89cc8ac7ab59c4dc": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "3b328ffa7b694cd8a482f271fea878f6": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_afcf4f095679487b865dbe6105c8c9f8", "name": null, "react_version": 18 } }, "3bb506f5d1944d76a0944e87bd299c90": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "4145ce3367bf4c09a12818d610ede3e3": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "491efe5a95fc410e89c08d16efab85b5": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "5114706f77c743419656eae3f6e18474": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Triangle,\n point: [100, 100],\n size: [400, 200],\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_9038142217eb4c6690331bfced18dc21", "name": null, "react_version": 18 } }, "53ce9b119652412db12d19411038f710": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Rectangle,\n point: [100, 100],\n size: [400, 200],\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_3bb506f5d1944d76a0944e87bd299c90", "name": null, "react_version": 18 } }, "5484e569734b49e185054941db950125": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "5650a3a38aba4d9385c0febdc4ca5194": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "588e439c1ba74615810dd1f25784d80e": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "5ae10aa2bf01403f96d7b516481c9372": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from '@tldraw/tldraw'\nimport * as React from 'react'\n\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n app\n .createShapes({\n id: 'text1',\n type: TDShapeType.Text,\n point: [200, 200],\n text: \"This is Tldrawesome!!🎉\",\n color: \"blue\",\n\n })\n})\n\nreturn (\n \n \n \n)\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_74299c5f82bf4a90ade17fd954ff4306", "name": null, "react_version": 18 } }, "5fbcb9805ecd46c0afc6bc43e149c2ce": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "63ef5cef0fc141de8701eb23cf674af5": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "6b97e960745e47d6ae154c64ad674112": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "74299c5f82bf4a90ade17fd954ff4306": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "79d020d1638f4deb9314df76834a5128": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Triangle,\n point: [100, 100],\n size: [400, 200],\n isLocked: true\n\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_63ef5cef0fc141de8701eb23cf674af5", "name": null, "react_version": 18 } }, "7e6c4861f81c42a89896803690b7ec03": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n const handleChange = (e) => {\n let my_current_stroke = e.selectedIds[0];\n let my_object = e.getShape(my_current_stroke);\n\n if (my_object === undefined) {\n console.log(\"no object selected\");\n }\n if (my_object !== undefined) {\n let my_points = my_object.points;\n if (my_points !== undefined){\n console.log(my_points.length);\n }\n }\n };\n\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_5650a3a38aba4d9385c0febdc4ca5194", "name": null, "react_version": 18 } }, "7fc95b212724423c846b9fba8cfbf772": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "82b7c21285834799bfe53cabb47c0b62": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "89bfecea171b48a4939535c76f46369c": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { TDAssetType, TDShapeType, Tldraw, TldrawApp } from \"@tldraw/tldraw\";\n\nexport default function App() {\n const handleMount = (app: TldrawApp) => {\n // You can use the app API here! e.g. app.selectAll()\n app.patchAssets({\n myAssetId: {\n id: \"myAssetId\",\n type: TDAssetType.Image,\n fileName: \"card-repo.png\",\n src: \"https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png\"\n }\n });\n\n app.createShapes({\n id: \"myImage\",\n type: TDShapeType.Image,\n assetId: \"myAssetId\",\n point: [64, 64],\n size: [400, 340]\n });\n };\n\nreturn (\n \n \n \n )\n }\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_cab073c7cb7f46d08dc830c18384fe95", "name": null, "react_version": 18 } }, "8abbe80b2d894284a4ea641b6b5f9ded": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "9038142217eb4c6690331bfced18dc21": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "9e386310506346fb8a5a9cb983bcbfea": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_5484e569734b49e185054941db950125", "name": null, "react_version": 18 } }, "9e50d391ffc240ba95d9bb0c55ea19a4": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "a3a9f36b181d4df9b4a3aa3ff1d19c42": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "a9acdd65ce5f4dd58af139d4b25c0899": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "__main__.Tldraw", "_esm": "\n import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\n import * as React from \"react\";\n\n export default function App() {\n\n const handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Rectangle,\n point: [100, 100],\n size: [500, 200],\n });\n });\n\n return (\n \n \n \n );\n }\n ", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_06463f6c51b14809ba93afbf3f015d1b", "name": null, "react_version": 18 } }, "a9b69d8bcd9243dab9b78f46ce88dc1f": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Triangle,\n point: [100, 100],\n size: [400, 200],\n isLocked: true\n\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_82b7c21285834799bfe53cabb47c0b62", "name": null, "react_version": 18 } }, "aa7b72357d4049d9bf9ac4096529992f": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "ab7dcb57a5fb4196850e7fab409919df": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "ad176c4e37054ff79cb48636e316fc76": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "afcf4f095679487b865dbe6105c8c9f8": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "b128fe9789e24f5f977bcb2b604fedca": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "b3a6068b90034f14ae3b1d4d363cfc3d": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "b4e9d57269814faab41d8bb8437ce477": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "bfbb9d31ed2d4699a8683e751ef032b4": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_4145ce3367bf4c09a12818d610ede3e3", "name": null, "react_version": 18 } }, "c3fe057d231f4cba8cff1ceaca93f5fb": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "__main__.MyExampleWidget", "_esm": "\n import * as React from \"react\";\n\n export default function MyButton() {\n return < button > X < /button> \n };", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_cc0e7a9451b4434eb8688978bde88932", "name": null, "react_version": 18 } }, "c4b52602303840439a299a6c25dc23a3": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_ad176c4e37054ff79cb48636e316fc76", "name": null, "react_version": 18 } }, "c591d48246b8421d9045cf356f0a3531": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_9e50d391ffc240ba95d9bb0c55ea19a4", "name": null, "react_version": 18 } }, "cab073c7cb7f46d08dc830c18384fe95": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "cc0e7a9451b4434eb8688978bde88932": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "cd859a159ce549908a01201c43ed408a": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Rectangle,\n point: [100, 100],\n size: [400, 200],\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_d1ff421b78064c4abfac78bfc40adf0c", "name": null, "react_version": 18 } }, "d033cfad0e9640fa956765e1a335573e": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Rectangle,\n point: [100, 100],\n size: [400, 200],\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_0a07ca4e66144af6bc5ab78def870b88", "name": null, "react_version": 18 } }, "d1ff421b78064c4abfac78bfc40adf0c": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "decb768a732d42a898c005992d1750eb": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "e4f485205e2e4bee9b8442adbd985a26": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "e51ad28a146a44b4a78b6a42fb5aa59d": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Triangle,\n point: [100, 100],\n size: [400, 200],\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_b4e9d57269814faab41d8bb8437ce477", "name": null, "react_version": 18 } }, "e5ed649b52d84366af5358f6db1ba56a": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "e9882018b2a84c0b85a043347b66d47c": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { TDAssetType, TDShapeType, Tldraw, TldrawApp } from \"@tldraw/tldraw\";\n\nexport default function App() {\n const handleMount = (app: TldrawApp) => {\n // You can use the app API here! e.g. app.selectAll()\n app.patchAssets({\n myAssetId: {\n id: \"myAssetId\",\n type: TDAssetType.Image,\n fileName: \"card-repo.png\",\n src: \"https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png\"\n }\n });\n\n app.createShapes({\n id: \"myImage\",\n type: TDShapeType.Image,\n assetId: \"myAssetId\",\n point: [64, 64],\n size: [400, 340]\n });\n };\n\nreturn (\n \n \n \n )\n }\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_fc35f8b4758642f69603f1d00fb3ef2f", "name": null, "react_version": 18 } }, "edd7cf2a6e82458c86e60b882d4e57ad": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { TDAssetType, TDShapeType, Tldraw, TldrawApp } from \"@tldraw/tldraw\";\n\nexport default function App() {\n const handleMount = (app: TldrawApp) => {\n // You can use the app API here! e.g. app.selectAll()\n app.patchAssets({\n myAssetId: {\n id: \"myAssetId\",\n type: TDAssetType.Image,\n fileName: \"card-repo.png\",\n src: \"https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png\"\n }\n });\n\n app.createShapes({\n id: \"myImage\",\n type: TDShapeType.Image,\n assetId: \"myAssetId\",\n point: [64, 64],\n size: [400, 340]\n });\n };\n\nreturn (\n \n \n \n )\n }\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_e4f485205e2e4bee9b8442adbd985a26", "name": null, "react_version": 18 } }, "f0be2b8af9e54002b7a17631934c56bb": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_8abbe80b2d894284a4ea641b6b5f9ded", "name": null, "react_version": 18 } }, "f30f584dd3d0460095d0c102194f96d6": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from '@tldraw/tldraw'\nimport * as React from 'react'\n\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n app\n .createShapes({\n id: 'text1',\n type: TDShapeType.Text,\n point: [200, 200],\n text: \"This is Tldrawesome!!🎉\",\n color: \"blue\",\n\n })\n})\n\nreturn (\n \n \n \n)\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_6b97e960745e47d6ae154c64ad674112", "name": null, "react_version": 18 } }, "f4103de634fc4cf288d7f3fe7d5b5ffa": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "f808a477e6b4407693ed54f0c52b6703": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n const handleChange = (e) => {\n let my_current_stroke = e.selectedIds[0];\n let my_object = e.getShape(my_current_stroke);\n\n if (my_object === undefined) {\n console.log(\"no object selected\");\n }\n if (my_object !== undefined) {\n let my_points = my_object.points;\n if (my_points !== undefined){\n console.log(my_points.length);\n }\n }\n };\n\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_b3a6068b90034f14ae3b1d4d363cfc3d", "name": null, "react_version": 18 } }, "f9e8bdd03c094a469c7b586905f6b28f": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import * as React from \"react\";\nimport { Tldraw } from \"@tldraw/tldraw\";\n\nexport default function App() {\n return (\n \n \n \n );\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_a3a9f36b181d4df9b4a3aa3ff1d19c42", "name": null, "react_version": 18 } }, "fa8888b5a4ca46b4a3c16ff509ee6414": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "fbdf1575d37047a1828ef696f4bc1607": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Triangle,\n point: [100, 100],\n size: [400, 200],\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_588e439c1ba74615810dd1f25784d80e", "name": null, "react_version": 18 } }, "fc35f8b4758642f69603f1d00fb3ef2f": { "model_module": "@jupyter-widgets/base", "model_module_version": "2.0.0", "model_name": "LayoutModel", "state": {} }, "fdafa29031f04bc8a63ee69d6269e750": { "model_module": "@widgetti/jupyter-react", "model_module_version": "^0.3.0", "model_name": "ReactModel", "state": { "_anywidget_id": "ipyreact.cellmagic.Widget", "_esm": "import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\nimport * as React from \"react\";\n\nexport default function App() {\n\nconst handleMount = React.useCallback((app: Tldraw) => {\n\n app.createShapes({\n id: \"rect1\",\n type: TDShapeType.Rectangle,\n point: [100, 100],\n size: [500, 200],\n isLocked: true\n\n });\n});\n\nreturn (\n \n \n \n);\n}\n", "_event_names": [], "_import_map": { "imports": { "@mui/icons-material/": "https://esm.sh/@mui/icons-material/", "@mui/material/": "https://esm.sh/@mui/material@5.11.10/", "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0" }, "scopes": {} }, "_model_module_version": "^0.3.0", "_view_module_version": "^0.3.0", "debug": false, "layout": "IPY_MODEL_aa7b72357d4049d9bf9ac4096529992f", "name": null, "react_version": 18 } } }, "version_major": 2, "version_minor": 0 } } }, "nbformat": 4, "nbformat_minor": 5 }