01-nb.ipynb

{
 "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",
    "    <div\n",
    "      style={{\n",
    "        position: \"relative\",\n",
    "        width: \"700px\",\n",
    "        height: \"300px\",\n",
    "      }}\n",
    "    >\n",
    "      <Tldraw />\n",
    "    </div>\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",
    "    <div\n",
    "    style={{\n",
    "        position: \"relative\",\n",
    "        width: \"800px\",\n",
    "        height: \"350px\"\n",
    "    }}\n",
    "    >\n",
    "    <Tldraw onMount={handleMount} />\n",
    "    </div>\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",
    "        <div\n",
    "        style={{\n",
    "            position: \"relative\",\n",
    "            width: \"800px\",\n",
    "            height: \"350px\"\n",
    "        }}\n",
    "        >\n",
    "        <Tldraw onMount={handleMount} />\n",
    "        </div>\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 = `<svg width=\"120\" height=\"120\" viewBox=\"0 0 240 320\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n",
    "                          <path d=\"M228 319.5H12C5.64873 319.5 0.5 314.351 0.5 308V12C0.5 5.64873 5.64873 0.5 12 0.5H159.175C159.571 0.5 159.952 0.656748 160.233 0.936021L239.057 79.2681C239.341 79.5497 239.5 79.9326 239.5 80.3321V308C239.5 314.351 234.351 319.5 228 319.5Z\" fill=\"#FFF9F2\" stroke=\"#FFC681\"/>\n",
    "                          <path d=\"M160.5 1.20711L238.793 79.5H172C165.649 79.5 160.5 74.3513 160.5 68V1.20711Z\" fill=\"#FFF9F2\" stroke=\"#FFC681\"/>\n",
    "                          <path d=\"M68.8438 244.072C69.1738 250.699 74.7344 254.914 83.1387 254.914C92.0254 254.914 97.5352 250.496 97.5352 243.387C97.5352 237.826 94.4121 234.729 86.9727 233.027L82.7578 232.062C78.2129 230.996 76.3594 229.549 76.3594 227.035C76.3594 223.861 79.1523 221.779 83.3672 221.779C87.3789 221.779 90.2227 223.836 90.6797 227.111H96.9512C96.6465 220.84 91.0859 216.447 83.3926 216.447C75.1914 216.447 69.7578 220.865 69.7578 227.467C69.7578 232.9 72.8809 236.176 79.5332 237.699L84.2812 238.791C88.9785 239.883 90.9844 241.508 90.9844 244.174C90.9844 247.297 87.8613 249.557 83.5449 249.557C78.8984 249.557 75.6484 247.424 75.2422 244.072H68.8438Z\" fill=\"#FF8C02\"/>\n",
    "                          <path d=\"M121.59 254L134.26 217.361H127.278L118.137 246.51H117.705L108.489 217.361H101.252L114.049 254H121.59Z\" fill=\"#FF8C02\"/>\n",
    "                          <path d=\"M170.731 239.375V234.805H155.522V239.807H164.333L164.307 240.568C164.206 245.748 160.397 249.227 154.811 249.227C148.286 249.227 144.198 244.047 144.198 235.617C144.198 227.314 148.21 222.135 154.608 222.135C159.305 222.135 162.581 224.471 163.901 228.711H170.426C169.258 221.246 163.063 216.447 154.608 216.447C144.173 216.447 137.495 223.938 137.495 235.668C137.495 247.525 144.096 254.914 154.71 254.914C164.485 254.914 170.731 248.846 170.731 239.375Z\" fill=\"#FF8C02\"/>\n",
    "                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M99 117C96.7909 117 95 118.791 95 121V148.939C94.3386 148.979 93.6717 149 93 149C75.3269 149 61 134.673 61 117C61 99.3269 75.3269 85 93 85C110.673 85 125 99.3269 125 117H99ZM125 117H155C157.209 117 159 118.791 159 121V177C159 179.209 157.209 181 155 181H99C96.7909 181 95 179.209 95 177V148.939C111.741 147.906 125 134.001 125 117Z\" fill=\"#FFC681\"/>\n",
    "                          </svg>`\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",
    "    <div\n",
    "      style={{\n",
    "        position: \"relative\",\n",
    "        width: \"800px\",\n",
    "        height: \"350px\"\n",
    "      }}\n",
    "    >\n",
    "      <Tldraw onMount={handleMount} />\n",
    "    </div>\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",
    "    <div\n",
    "    style={{\n",
    "        position: \"relative\",\n",
    "        width: \"600px\",\n",
    "        height: \"400px\",\n",
    "    }}\n",
    "    >\n",
    "    <Tldraw onMount={handleMount} />\n",
    "    </div>\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",
    "    <div\n",
    "    style={{\n",
    "        position: \"relative\",\n",
    "        width: \"600px\",\n",
    "        height: \"400px\",\n",
    "    }}\n",
    "    >\n",
    "    <Tldraw onMount={handleMount} />\n",
    "    </div>\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",
    "    <div\n",
    "    style={{\n",
    "        position: \"relative\",\n",
    "        width: \"600px\",\n",
    "        height: \"400px\",\n",
    "    }}\n",
    "    >\n",
    "    <Tldraw onMount={handleMount} />\n",
    "    </div>\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",
    "    <div\n",
    "      style={{\n",
    "        position: \"relative\",\n",
    "        width: \"700px\",\n",
    "        height: \"300px\",\n",
    "      }}\n",
    "    >\n",
    "      <Tldraw          \n",
    "showUI={true}\n",
    "        showStyles={false}\n",
    "        showTools={false}\n",
    "        showZoom={false}\n",
    "        showPages={false}\n",
    "        showMenu={false}/>\n",
    "    </div>\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",
    "    <div\n",
    "      style={{\n",
    "        position: \"relative\",\n",
    "        width: \"800px\",\n",
    "        height: \"350px\",\n",
    "      }}\n",
    "    >\n",
    "      <Tldraw  onChange={handleChange} />\n",
    "    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"700px\",\n        height: \"300px\",\n      }}\n    >\n      <Tldraw />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\",\n      }}\n    >\n      <Tldraw  onChange={handleChange} />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\"\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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<TldrawApp>()\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    <div className=\"tldraw\" style={{\n            position: \"relative\",\n            width: \"800px\",\n            height: \"350px\"\n        }} >\n      <Tldraw id=\"export_example\" onMount={handleMount} onExport={handleExport} />\n      <div style={{ position: 'relative', top: 128, left: 32, zIndex: 100 }}>\n        <button onClick={handleExportPNG}>Export as PNG</button>\n        <button onClick={handleExportSVG}>Export as SVG</button>\n        <button onClick={handleExportJPG}>Export as JPG</button>\n      </div>\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\"\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\",\n      }}\n    >\n      <Tldraw />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"200px\",\n      }}\n    >\n      <Tldraw />\n    </div>\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 = `<svg width=\"120\" height=\"120\" viewBox=\"0 0 240 320\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path d=\"M228 319.5H12C5.64873 319.5 0.5 314.351 0.5 308V12C0.5 5.64873 5.64873 0.5 12 0.5H159.175C159.571 0.5 159.952 0.656748 160.233 0.936021L239.057 79.2681C239.341 79.5497 239.5 79.9326 239.5 80.3321V308C239.5 314.351 234.351 319.5 228 319.5Z\" fill=\"#FFF9F2\" stroke=\"#FFC681\"/>\n                          <path d=\"M160.5 1.20711L238.793 79.5H172C165.649 79.5 160.5 74.3513 160.5 68V1.20711Z\" fill=\"#FFF9F2\" stroke=\"#FFC681\"/>\n                          <path d=\"M68.8438 244.072C69.1738 250.699 74.7344 254.914 83.1387 254.914C92.0254 254.914 97.5352 250.496 97.5352 243.387C97.5352 237.826 94.4121 234.729 86.9727 233.027L82.7578 232.062C78.2129 230.996 76.3594 229.549 76.3594 227.035C76.3594 223.861 79.1523 221.779 83.3672 221.779C87.3789 221.779 90.2227 223.836 90.6797 227.111H96.9512C96.6465 220.84 91.0859 216.447 83.3926 216.447C75.1914 216.447 69.7578 220.865 69.7578 227.467C69.7578 232.9 72.8809 236.176 79.5332 237.699L84.2812 238.791C88.9785 239.883 90.9844 241.508 90.9844 244.174C90.9844 247.297 87.8613 249.557 83.5449 249.557C78.8984 249.557 75.6484 247.424 75.2422 244.072H68.8438Z\" fill=\"#FF8C02\"/>\n                          <path d=\"M121.59 254L134.26 217.361H127.278L118.137 246.51H117.705L108.489 217.361H101.252L114.049 254H121.59Z\" fill=\"#FF8C02\"/>\n                          <path d=\"M170.731 239.375V234.805H155.522V239.807H164.333L164.307 240.568C164.206 245.748 160.397 249.227 154.811 249.227C148.286 249.227 144.198 244.047 144.198 235.617C144.198 227.314 148.21 222.135 154.608 222.135C159.305 222.135 162.581 224.471 163.901 228.711H170.426C169.258 221.246 163.063 216.447 154.608 216.447C144.173 216.447 137.495 223.938 137.495 235.668C137.495 247.525 144.096 254.914 154.71 254.914C164.485 254.914 170.731 248.846 170.731 239.375Z\" fill=\"#FF8C02\"/>\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M99 117C96.7909 117 95 118.791 95 121V148.939C94.3386 148.979 93.6717 149 93 149C75.3269 149 61 134.673 61 117C61 99.3269 75.3269 85 93 85C110.673 85 125 99.3269 125 117H99ZM125 117H155C157.209 117 159 118.791 159 121V177C159 179.209 157.209 181 155 181H99C96.7909 181 95 179.209 95 177V148.939C111.741 147.906 125 134.001 125 117Z\" fill=\"#FFC681\"/>\n                          </svg>`\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    <div\n      style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\"\n      }}\n    >\n      <Tldraw onMount={handleMount} />\n    </div>\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        <div\n        style={{\n            position: \"relative\",\n            width: \"800px\",\n            height: \"350px\"\n        }}\n        >\n        <Tldraw onMount={handleMount} />\n        </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"700px\",\n        height: \"300px\",\n      }}\n    >\n      <Tldraw />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\"\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\",\n      }}\n    >\n      <Tldraw  onChange={handleChange} />\n    </div>\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        <div\n        style={{\n            position: \"relative\",\n            width: \"800px\",\n            height: \"350px\"\n        }}\n        >\n        <Tldraw onMount={handleMount} />\n        </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"700px\",\n        height: \"300px\",\n      }}\n    >\n      <Tldraw          \nshowUI={true}\n        showStyles={false}\n        showTools={false}\n        showZoom={false}\n        showPages={false}\n        showMenu={false}/>\n    </div>\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        <div\n        style={{\n            position: \"relative\",\n            width: \"800px\",\n            height: \"350px\",\n        }}\n        >\n        <Tldraw onMount={handleMount} />\n        </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\",\n      }}\n    >\n      <Tldraw />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"700px\",\n        height: \"300px\",\n      }}\n    >\n      <Tldraw          \nshowUI={true}\n        showStyles={false}\n        showTools={false}\n        showZoom={false}\n        showPages={false}\n        showMenu={false}/>\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"700px\",\n        height: \"300px\",\n      }}\n    >\n      <Tldraw          \nshowUI={true}\n        showStyles={false}\n        showTools={false}\n        showZoom={false}\n        showPages={false}\n        showMenu={false}/>\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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        <div\n        style={{\n            position: \"relative\",\n            width: \"800px\",\n            height: \"350px\"\n        }}\n        >\n        <Tldraw onMount={handleMount} />\n        </div>\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        <div\n        style={{\n            position: \"relative\",\n            width: \"800px\",\n            height: \"350px\"\n        }}\n        >\n        <Tldraw onMount={handleMount} />\n        </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\",\n      }}\n    >\n      <Tldraw />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\"\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\",\n      }}\n    >\n      <Tldraw  onChange={handleChange} />\n    </div>\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    <div\n      style={{\n        position: \"relative\",\n        width: \"700px\",\n        height: \"300px\",\n      }}\n    >\n      <Tldraw />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"600px\",\n        height: \"400px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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    <div\n    style={{\n        position: \"relative\",\n        width: \"800px\",\n        height: \"350px\",\n    }}\n    >\n    <Tldraw onMount={handleMount} />\n    </div>\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
}