From b72a40c241ef211d720afce11301f92a84147c81 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 16 Jun 2021 19:28:26 +0200
Subject: [PATCH] Add ability to link ReactiveHTML parameters as source (#2399)

---
 examples/user_guide/Custom_Components.ipynb | 21 ++++++++++++++++-----
 panel/links.py                              |  4 ++++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/examples/user_guide/Custom_Components.ipynb b/examples/user_guide/Custom_Components.ipynb
index 48668a0c48..2076f07148 100644
--- a/examples/user_guide/Custom_Components.ipynb
+++ b/examples/user_guide/Custom_Components.ipynb
@@ -337,7 +337,7 @@
    "source": [
     "#### Pure Javascript events\n",
     "\n",
-    "Next we will build a more complex example using pure Javascript events to draw on a canvas."
+    "Next we will build a more complex example using pure Javascript events to draw on a canvas with configurable line width, color and the ability to clear and save the resulting drawing."
    ]
   },
   {
@@ -353,6 +353,8 @@
     "    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",
@@ -365,7 +367,8 @@
     "      onmouseup=\"${script('end')}\"\n",
     "    >\n",
     "    </canvas>\n",
-    "    <button id=\"clear\" onclick='${script(\"clear\")}' height=\"20px\">Clear</button>\n",
+    "    <button id=\"clear\" onclick='${script(\"clear\")}'>Clear</button>\n",
+    "    <button id=\"save\" onclick='${script(\"save\")}'>Save</button>\n",
     "    \"\"\"\n",
     "    \n",
     "    _scripts = {\n",
@@ -389,6 +392,9 @@
     "        '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",
@@ -398,12 +404,17 @@
     "    }\n",
     "\n",
     "canvas = Canvas(width=400, height=400)\n",
-    "    \n",
+    "\n",
+    "# We create a separate HTML element which syncs with the uri parameter of the Canvas\n",
+    "png_view = pn.pane.HTML()\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",
+    "    '# 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",
+    "        canvas,\n",
+    "        png_view\n",
     "    )\n",
     ")"
    ]
diff --git a/panel/links.py b/panel/links.py
index c9feeeb098..0ef7325299 100644
--- a/panel/links.py
+++ b/panel/links.py
@@ -316,6 +316,10 @@ def _init_callback(self, root_model, link, source, src_spec, target, tgt_spec, c
                         references[k] = v
 
         # Handle links with ReactiveHTML DataModel
+        if isinstance(src_model, ReactiveHTML):
+            if src_spec[1] in src_model.data.properties():
+                references['source'] = src_model = src_model.data
+
         if isinstance(tgt_model, ReactiveHTML):
             if tgt_spec[1] in tgt_model.data.properties():
                 references['target'] = tgt_model = tgt_model.data