Ensure child objects are correctly re-rendered (#9)

Author: philippjfr

examples/apps/multi.py

@@ -1,18 +1,21 @@
 from panel_splitjs import MultiSplit
-from panel_material_ui import Paper
+from panel_material_ui import Button, Column, Paper, Row
 
 paper_opts = dict(elevation=3, margin=10, sizing_mode="stretch_both")
 
-MultiSplit(
-    objects=[
-        Paper("Foo", **paper_opts),
-        Paper("Bar", **paper_opts),
-        Paper("Baz", **paper_opts),
-        Paper("Qux", **paper_opts),
-        Paper("Quux", **paper_opts),
-    ],
+add = Button(label="Add item", on_click=lambda _: ms.append(Paper("Added", **paper_opts)))
+insert = Button(label="Insert item", on_click=lambda _: ms.insert(2, Paper("Inserted", **paper_opts)))
+
+ms = MultiSplit(
+    Paper("Foo", **paper_opts),
+    Paper("Bar", **paper_opts),
+    Paper("Baz", **paper_opts),
+    Paper("Qux", **paper_opts),
+    Paper("Quux", **paper_opts),
     sizes=(20, 30, 20, 10, 20),
     min_size=100,
     sizing_mode="stretch_width",
     height=400
-).servable()
+)
+
+Column(Row(add, insert), ms).servable()

pyproject.toml

@@ -41,7 +41,7 @@ classifiers = [
 ]
 
 dependencies = [
-    'panel >=1.8.0',
+    'panel >=1.8.3',
     'packaging',
 ]
 

src/panel_splitjs/base.py

@@ -55,6 +55,7 @@ class SplitBase(JSComponent, ListLike):
 
     _bundle = DIST_PATH  / "panel-splitjs.bundle.js"
     _stylesheets = [DIST_PATH / "css" / "splitjs.css"]
+    _render_policy = "manual"
 
     __abstract = True
 

src/panel_splitjs/dist/css/splitjs.css

@@ -126,7 +126,7 @@
   z-index: 1;
 }
 
-.gutter.gutter-horizontal {
+.gutter.gutter-vertical {
   cursor: row-resize;
 }
 
@@ -146,20 +146,53 @@
 .gutter.gutter-horizontal::after {
   width: 10px;
   height: 24px;
+  cursor: col-resize;
 }
 
 .gutter.gutter-vertical::after {
   width: 24px;
   height: 10px;
   -webkit-mask-image: url("handle_vertical.svg");
   mask-image: url("handle_vertical.svg");
+  cursor: row-resize;
+}
+
+.gutter > .divider {
+  --gap: 40px;
+  --thickness: 1px;
+  --color: var(--border-color);
+  background: var(--color);
+  position: absolute;
 }
 
-.split > div:nth-child(2) > div:not(.toggle-button-left):not(.toggle-button-right):not(.toggle-button-up):not(.toggle-button-down) {
+/* Horizontal variant */
+.gutter-vertical > .divider {
+  top: 50%;
   width: 100%;
+  height: var(--thickness);
+  background:
+    linear-gradient(to right,
+      var(--color) 0,
+      var(--color) calc(50% - var(--gap) / 2),
+      transparent calc(50% - var(--gap) / 2),
+      transparent calc(50% + var(--gap) / 2),
+      var(--color) calc(50% + var(--gap) / 2),
+      var(--color) 100%);
+}
+
+/* Vertical variant */
+.gutter-horizontal > .divider {
+  left: 50%;
   height: 100%;
-  overflow: auto;
-  padding-top: 36px; /* Space for the toggle buttons */
+  width: var(--thickness);
+  background:
+    linear-gradient(to bottom,
+      var(--color) 0,
+      var(--color) calc(50% - var(--gap) / 2),
+      transparent calc(50% - var(--gap) / 2),
+      transparent calc(50% + var(--gap) / 2),
+      var(--color) calc(50% + var(--gap) / 2),
+      var(--color) 100%);
 }
 
 /* Toggle button base styles */

src/panel_splitjs/models/multi_split.js

@@ -5,33 +5,83 @@ export function render({ model, el }) {
   split_div.className = `split multi-split ${model.orientation}`
   split_div.classList.add("loading")
 
-  const objects = model.objects ? model.get_child("objects") : []
-  const split_items = []
-  for (let i = 0; i < objects.length; i++) {
-    const split_item = document.createElement("div")
-    split_item.className = "split-panel"
-    split_div.append(split_item)
-    split_items.push(split_item)
-    split_item.append(objects[i])
+  let split = null
+
+  function reconcileChildren(parent, desiredChildren) {
+    // Ensure each desired child is at the correct index
+    for (let i = 0; i < desiredChildren.length; i++) {
+      const child = desiredChildren[i]
+      const current = parent.children[i]
+      if (current?.id === child.id) continue
+      if (current) {
+        parent.insertBefore(child, current)
+      } else {
+        parent.append(child)
+      }
+    }
+
+    // Remove any extra children that are no longer desired
+    while (parent.children.length > desiredChildren.length) {
+      parent.removeChild(parent.lastElementChild)
+    }
   }
 
-  el.append(split_div)
+  const render_splits = () => {
+    if (split != null) {
+      split.destroy()
+      split = null
+    }
+
+    const objects = model.objects ? model.get_child("objects") : []
+    const split_items = []
+
+    for (let i = 0; i < objects.length; i++) {
+      const obj = objects[i]
+      const id = `split-panel-${model.objects[i].id}`
 
-  let sizes = model.sizes
-  const split = Split(split_items, {
-    sizes: sizes,
-    minSize: model.min_size || 0,
-    maxSize: model.max_size || Number("Infinity"),
-    dragInterval: model.step_size || 1,
-    snapOffset: model.snap_size || 30,
-    gutterSize: 8,
-    direction: model.orientation,
-    onDragEnd: (new_sizes) => {
-      sizes = new_sizes
-      this.model.sizes = sizes
+      // Try to reuse an existing split_item
+      let split_item = el.querySelector(`#${id}`)
+      if (split_item == null) {
+        split_item = document.createElement("div")
+        split_item.className = "split-panel"
+        split_item.id = id
+        split_item.replaceChildren(obj)
+      }
+
+      split_items.push(split_item)
     }
-  })
 
+    // Incrementally reorder / trim children of split_div
+    reconcileChildren(split_div, split_items)
+
+    let sizes = model.sizes
+    split = Split(split_items, {
+      sizes,
+      minSize: model.min_size || 0,
+      maxSize: model.max_size || Number("Infinity"),
+      dragInterval: model.step_size || 1,
+      snapOffset: model.snap_size || 30,
+      gutterSize: 8,
+      gutter: (index, direction) => {
+        const gutter = document.createElement('div')
+        gutter.className = `gutter gutter-${direction}`
+        const divider = document.createElement('div')
+        divider.className = "divider"
+        gutter.append(divider)
+        return gutter
+      },
+      direction: model.orientation,
+      onDragEnd: (new_sizes) => {
+        sizes = new_sizes
+        this.model.sizes = sizes
+      }
+    })
+  }
+
+  render_splits()
+  el.append(split_div)
+
+  model.on("objects", render_splits)
   model.on("sizes", () => {
     if (sizes === model.sizes) {
       return

src/panel_splitjs/models/split.js

@@ -26,6 +26,12 @@ export function render({ model, el }) {
   split0.append(left_content_wrapper)
   split1.append(right_content_wrapper)
 
+  model.on("objects", () => {
+    const [left, right] = model.get_child("objects")
+    left_content_wrapper.replaceChildren(left)
+    right_content_wrapper.replaceChildren(right)
+  })
+
   let left_arrow_button, right_arrow_button
   let left_click_count = 0
   let right_click_count = 0
@@ -91,6 +97,14 @@ export function render({ model, el }) {
     dragInterval: model.step_size,
     snapOffset: model.snap_size,
     gutterSize: 8,
+    gutter: (index, direction) => {
+      const gutter = document.createElement('div')
+      gutter.className = `gutter gutter-${direction}`
+      const divider = document.createElement('div')
+      divider.className = "divider"
+      gutter.append(divider)
+      return gutter
+    },
     direction: model.orientation,
     onDrag: (sizes) => {
       const new_collapsed_state = sizes[0] <= COLLAPSED_SIZE ? 0 : (sizes[1] <= COLLAPSED_SIZE ? 1 : null)