{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import param\n",
    "import panel as pn\n",
    "\n",
    "from panel.reactive import ReactiveHTML\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class Canvas(ReactiveHTML):\n",
    "    \n",
    "    color = param.Color(default='#000000')\n",
    "    \n",
    "    line_width = param.Number(default=1, bounds=(0.1, 10))\n",
    "    \n",
    "    uri = param.String()\n",
    "\n",
    "    _template = \"\"\"\n",
    "    <canvas \n",
    "      id=\"canvas\"\n",
    "      style=\"border: 1px solid\"\n",
    "      width=\"${model.width}\"\n",
    "      height=\"${model.height}\"\n",
    "      onmousedown=\"${script('start')}\"\n",
    "      onmousemove=\"${script('draw')}\"\n",
    "      onmouseup=\"${script('end')}\"\n",
    "    >\n",
    "    </canvas>\n",
    "    <button id=\"clear\" onclick='${script(\"clear\")}'>Clear</button>\n",
    "    <button id=\"save\" onclick='${script(\"save\")}'>Save</button>\n",
    "    \"\"\"\n",
    "    \n",
    "    _scripts = {\n",
    "        'render': \"\"\"\n",
    "          state.ctx = canvas.getContext(\"2d\")\n",
    "        \"\"\",\n",
    "        'start': \"\"\"\n",
    "          state.start = event\n",
    "          state.ctx.beginPath()\n",
    "          state.ctx.moveTo(state.start.offsetX, state.start.offsetY)\n",
    "        \"\"\",\n",
    "        'draw': \"\"\"\n",
    "          if (state.start == null)\n",
    "            return\n",
    "          state.ctx.lineTo(event.offsetX, event.offsetY)\n",
    "          state.ctx.stroke()\n",
    "        \"\"\",\n",
    "        'end': \"\"\"\n",
    "          delete state.start\n",
    "        \"\"\",\n",
    "        'clear': \"\"\"\n",
    "          state.ctx.clearRect(0, 0, canvas.width, canvas.height);\n",
    "        \"\"\",\n",
    "        'save': \"\"\"\n",
    "          data.uri = canvas.toDataURL();\n",
    "        \"\"\",\n",
    "        'line_width': \"\"\"\n",
    "          state.ctx.lineWidth = data.line_width;\n",
    "        \"\"\",\n",
    "        'color': \"\"\"\n",
    "          state.ctx.strokeStyle = data.color;\n",
    "        \"\"\"\n",
    "    }"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Example"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=400, height=400)\n",
    "\n",
    "# We create a separate HTML element which syncs with the uri parameter of the Canvas\n",
    "png_view = pn.pane.HTML(height=400)\n",
    "canvas.jslink(png_view, code={'uri': \"target.text = `<img src='${source.uri}'></img>`\"})\n",
    "\n",
    "pn.Column(\n",
    "    '# Drag on canvas to draw\\n To export the drawing to a png click save.',\n",
    "    pn.Row(\n",
    "        canvas.controls(['color', 'line_width']),\n",
    "        canvas,\n",
    "        png_view\n",
    "    )\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Let's wrap it into nice template that can be served via `panel serve CanvasDraw.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "description=pn.pane.Markdown(\"This example shows how to use the `ReactiveHTML` component to develop a **Drawable Canvas**.\", sizing_mode=\"stretch_width\")\n",
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", title=\"Canvas Draw\", \n",
    "    sidebar=[canvas.controls(['color', 'line_width'])], \n",
    "    main=[description, pn.Row(canvas, png_view, height=460)]\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}