Add ability to link ReactiveHTML parameters as source (#2399)

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",
     ")"
    ]

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