Slidy slider

Author: martinRenou

examples/simple-yjs-widget/notebooks/simple.ipynb

@@ -8,7 +8,7 @@
    "outputs": [],
    "source": [
     "from ypywidgets.comm import CommWidget\n",
-    "from pycrdt import Text"
+    "from pycrdt import Map"
    ]
   },
   {
@@ -18,16 +18,48 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "class MyWidget(CommWidget):\n",
+    "class MySlider(CommWidget):\n",
     "    def __init__(self):\n",
     "        super().__init__(\n",
     "            comm_metadata={\n",
-    "                \"ymodel_name\": \"MyWidget\",\n",
+    "                \"ymodel_name\": \"MySlider\",\n",
     "                \"create_ydoc\": True,\n",
     "            }\n",
     "        )\n",
     "\n",
-    "        self.ydoc[\"foo\"] = self._foo = Text()"
+    "        self.ydoc[\"state\"] = self._state = Map()\n",
+    "\n",
+    "    @property\n",
+    "    def value(self):\n",
+    "        return self._state.get('value')\n",
+    "\n",
+    "    @value.setter\n",
+    "    def value(self, v):\n",
+    "        self._state['value'] = v\n",
+    "\n",
+    "    @property\n",
+    "    def min(self):\n",
+    "        return self._state.get('min')\n",
+    "\n",
+    "    @min.setter\n",
+    "    def min(self, v):\n",
+    "        self._state['min'] = v\n",
+    "\n",
+    "    @property\n",
+    "    def max(self):\n",
+    "        return self._state.get('max')\n",
+    "\n",
+    "    @max.setter\n",
+    "    def max(self, v):\n",
+    "        self._state['max'] = v\n",
+    "\n",
+    "    @property\n",
+    "    def step(self):\n",
+    "        return self._state.get('step')\n",
+    "\n",
+    "    @step.setter\n",
+    "    def step(self, v):\n",
+    "        self._state['step'] = v"
    ]
   },
   {
@@ -37,7 +69,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "w = MyWidget()\n",
+    "w = MySlider()\n",
     "w"
    ]
   },
@@ -48,8 +80,36 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "w.ydoc[\"foo\"].insert(0, 'coucou ici')"
+    "w.value"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "8ac7ea5c-8315-44eb-aa62-f223f86d267d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "w.value = 98"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bd2c92fb-9653-4de5-8a20-d463205f3a9e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "w.value = 36"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3a5680c6-77ae-4f71-a982-b3447dcb4fd0",
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {

examples/simple-yjs-widget/src/index.ts

@@ -11,31 +11,47 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-class MyWidget {
+class MySlider {
   constructor(yModel: IJupyterYModel, node: HTMLElement) {
     this.yModel = yModel;
     this.node = node;
 
-    this.foo = this.yModel.sharedModel.ydoc.getText('foo');
+    this.state = this.yModel.sharedModel.ydoc.getMap('state');
 
-    this.foo.observe(this._attrsChanged.bind(this));
+    this.state.observe(this._stateChanged.bind(this));
+
+    this.slider = document.createElement('input');
+    this.slider.setAttribute('type', 'range');
+
+    this.state.set('min', 0);
+    this.state.set('max', 100);
+    this.state.set('value', 50);
+    this.state.set('step', 1);
+
+    this._stateChanged();
+
+    node.appendChild(this.slider);
   }
 
-  _attrsChanged(): void {
-    this.node.innerHTML = `foo=${this.foo.toJSON()}`;
+  _stateChanged(): void {
+    this.slider.setAttribute('min', this.state.get('min'));
+    this.slider.setAttribute('max', this.state.get('max'));
+    this.slider.setAttribute('value', this.state.get('value'));
+    this.slider.setAttribute('step', this.state.get('step'));
   }
 
-  foo: Y.Text;
+  state: Y.Map<any>;
   yModel: IJupyterYModel;
   node: HTMLElement;
+  slider: HTMLElement;
 }
 
 const simple: JupyterFrontEndPlugin<void> = {
   id: 'example:simple',
   autoStart: true,
   requires: [IJupyterYWidgetManager],
   activate: (_: JupyterFrontEnd, wm: IJupyterYWidgetManager): void => {
-    wm.registerWidget('MyWidget', JupyterYModel, MyWidget);
+    wm.registerWidget('MySlider', JupyterYModel, MySlider);
   }
 };