{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"contentcontainer med left\" style=\"margin-left: -50px;\">\n",
    "    <dl class=\"dl-horizontal\">\n",
    "      <dt>Title</dt> <dd> PolyDraw</dd>\n",
    "      <dt>Description</dt> <dd>A linked streams example demonstrating how to use the PolyDraw stream.</dd>\n",
    "      <dt>Backends</dt> <dd> Bokeh</dd>\n",
    "      <dt>Tags</dt> <dd> streams, linked, position, interactive</dd>\n",
    "    </dl>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import holoviews as hv\n",
    "from holoviews import streams\n",
    "from matplotlib.path import Path\n",
    "\n",
    "hv.extension('bokeh')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``PolyDraw`` stream adds a bokeh tool to the source plot, which allows drawing, dragging and deleting polygons and making the drawn data available to Python. The tool supports the following actions:\n",
    "\n",
    "**Add patch/multi-line**\n",
    "\n",
    "    Double tap to add the first vertex, then use tap to add each subsequent vertex, to finalize the draw action double tap to insert the final vertex or press the ESC key to stop drawing.\n",
    "\n",
    "**Move patch/multi-line**\n",
    "\n",
    "    Tap and drag an existing patch/multi-line, the point will be dropped once you let go of the mouse button.\n",
    "\n",
    "**Delete patch/multi-line**\n",
    "\n",
    "    Tap a patch/multi-line to select it then press BACKSPACE key while the mouse is within the plot area."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As a simple example we will create simple ``Path`` and ``Polygons`` elements and attach each to a ``PolyDraw`` stream. We will also enable the ``drag`` option on the stream to enable dragging of existing glyphs."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%opts Path [width=400 height=400] (line_width=5 color='red') Polygons (fill_alpha=0.3)\n",
    "path = hv.Path([[(1, 5), (9, 5)]])\n",
    "poly = hv.Polygons([[(2, 2), (5, 8), (8, 2)]])\n",
    "path_stream = streams.PolyDraw(source=path, drag=True)\n",
    "poly_stream = streams.PolyDraw(source=poly, drag=True)\n",
    "path * poly"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<center><img src=\"https://assets.holoviews.org/gifs/examples/streams/bokeh/poly_draw.gif\" width=400></center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Whenever the data source is edited the data is synced with Python, both in the notebook and when deployed on the bokeh server. The data is made available as a dictionary of columns:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "path_stream.data"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Alternatively we can use the ``element`` property to get an Element containing the returned data:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "path_stream.element * poly_stream.element"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
