Add bi-directional jslink

examples/user_guide/Links.ipynb

@@ -342,6 +342,29 @@
    "source": [
     "As you can see the signature is identical to the ``link`` example above, but here Panel translates the specification into a JS code snippet which syncs the properties on the underlying Bokeh properties. But now if you edit the widget and press Return, the Markdown display will automatically update even in a static HTML web page.\n",
     "\n",
+    "#### Linking bi-directionally\n",
+    "\n",
+    "When you want the source and target to be linked bi-directionally, i.e. a change in one will automatically trigger a change in the other you can simply set the `bidirectional` argument:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "t1 = pn.widgets.TextInput()\n",
+    "t2 = pn.widgets.TextInput()\n",
+    "\n",
+    "t1.jslink(t2, value='value', bidirectional=True)\n",
+    "\n",
+    "pn.Row(t1, t2)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
     "#### Linking using custom JS code\n",
     "\n",
     "Since everything happens in JS for a `jslink`, we can't provide a Python callback. Instead, we can define a JS code snippet, which is executed when a property changes. E.g. we can define a little code snippet which adds HTML bold tags (``<b>``) around the text before setting it on the target. The code argument should map from the parameter/property on the source object to the JS code snippet to execute:"

panel/links.py

@@ -139,6 +139,9 @@ class Link(Callback):
     directional links between the source and target object.
     """
 
+    bidirectional = param.Boolean(default=False, doc="""
+        Whether to link source and target in both directions.""")
+
     properties = param.Dict(default={}, doc="""
         A dictionary mapping between source specification to target
         specification.""")
@@ -303,6 +306,18 @@ def _init_callback(self, root_model, link, source, src_spec, target, tgt_spec, c
         for ev in events:
             src_model.js_on_event(ev, src_cb)
 
+        if getattr(link, 'bidirectional', False):
+            code = self._get_code(link, target, tgt_spec[1], source, src_spec[1])
+            reverse_references = dict(references)
+            reverse_references['source'] = tgt_model
+            reverse_references['target'] = src_model
+            tgt_cb = CustomJS(args=reverse_references, code=code, tags=[link_id])
+            changes, events = self._get_triggers(link, tgt_spec)
+            for ch in changes:
+                tgt_model.js_on_change(ch, tgt_cb)
+            for ev in events:
+                tgt_model.js_on_event(ev, tgt_cb)
+
     def _process_references(self, references):
         """
         Method to process references in place.

panel/tests/test_links.py

@@ -9,10 +9,31 @@
 from panel.layout import Row
 from panel.links import Link
 from panel.pane import HoloViews
-from panel.widgets import FloatSlider, RangeSlider, ColorPicker
+from panel.widgets import FloatSlider, RangeSlider, ColorPicker, TextInput
 from panel.tests.util import hv_available
 
 
+def test_widget_link_bidirectional(document, comm):
+    t1 = TextInput()
+    t2 = TextInput()
+
+    t1.jslink(t2, value='value', bidirectional=True)
+
+    row = Row(t1, t2)
+
+    model = row.get_root(document, comm)
+
+    tm1, tm2 = model.children
+
+    link1_customjs = tm1.js_property_callbacks['change:value'][-1]
+    link2_customjs = tm2.js_property_callbacks['change:value'][-1]
+
+    assert link1_customjs.args['source'] is tm1
+    assert link2_customjs.args['source'] is tm2
+    assert link1_customjs.args['target'] is tm2
+    assert link2_customjs.args['target'] is tm1
+
+
 @hv_available
 def test_pnwidget_hvplot_links(document, comm):
     size_widget = FloatSlider(value=5, start=1, end=10)

panel/viewable.py

@@ -891,7 +891,7 @@ def jscallback(self, args={}, **callbacks):
             callbacks[k] = self._rename.get(v, v)
         return Callback(self, code=callbacks, args=args)
 
-    def jslink(self, target, code=None, args=None, **links):
+    def jslink(self, target, code=None, args=None, bidirectional=False, **links):
         """
         Links properties on the source object to those on the target
         object in JS code. Supports two modes, either specify a
@@ -907,6 +907,8 @@ def jslink(self, target, code=None, args=None, **links):
         code: dict
           Custom code which will be executed when the widget value
           changes.
+        bidirectional: boolean
+          Whether to link source and target bi-directionally
         **links: dict
           A mapping between properties on the source model and the
           target model property to link it to.
@@ -932,4 +934,5 @@ def jslink(self, target, code=None, args=None, **links):
             mapping = code or links
             for k, v in list(mapping.items()):
                 mapping[k] = target._rename.get(v, v)
-        return Link(self, target, properties=links, code=code, args=args)
+        return Link(self, target, properties=links, code=code, args=args,
+                    bidirectional=bidirectional)