panel-splitjs 0.1.0__py3-none-any.whl → 0.2.0__py3-none-any.whl

panel_splitjs/_version.py

@@ -28,7 +28,7 @@ version_tuple: VERSION_TUPLE
 commit_id: COMMIT_ID
 __commit_id__: COMMIT_ID
 
-__version__ = version = '0.1.0'
-__version_tuple__ = version_tuple = (0, 1, 0)
+__version__ = version = '0.2.0'
+__version_tuple__ = version_tuple = (0, 2, 0)
 
 __commit_id__ = commit_id = None

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
 

panel_splitjs/dist/css/splitjs.css

@@ -14,7 +14,7 @@
 }
 
 /* Style for initial load to prevent FOUC */
-.split.loading {
+.loading {
   visibility: hidden;
 }
 
@@ -126,7 +126,7 @@
   z-index: 1;
 }
 
-.gutter.gutter-horizontal {
+.gutter.gutter-vertical {
   cursor: row-resize;
 }
 
@@ -146,6 +146,7 @@
 .gutter.gutter-horizontal::after {
   width: 10px;
   height: 24px;
+  cursor: col-resize;
 }
 
 .gutter.gutter-vertical::after {
@@ -153,13 +154,45 @@
   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 */

panel_splitjs/dist/panel-splitjs.bundle.js

@@ -1 +1 @@
-var ye=Object.defineProperty;var ce=(t,i)=>{for(var a in i)ye(t,a,{get:i[a],enumerable:!0})};var I={};ce(I,{render:()=>Oe});var _=typeof window<"u"?window:null,ee=_===null,Z=ee?void 0:_.document,w="addEventListener",E="removeEventListener",T="getBoundingClientRect",H="_a",x="_b",D="_c",Y="horizontal",O=function(){return!1},_e=ee?"calc":["","-webkit-","-moz-","-o-"].filter(function(t){var i=Z.createElement("div");return i.style.cssText="width:"+t+"calc(9px)",!!i.style.length}).shift()+"calc",ue=function(t){return typeof t=="string"||t instanceof String},oe=function(t){if(ue(t)){var i=Z.querySelector(t);if(!i)throw new Error("Selector "+t+" did not match a DOM element");return i}return t},d=function(t,i,a){var c=t[i];return c!==void 0?c:a},J=function(t,i,a,c){if(i){if(c==="end")return 0;if(c==="center")return t/2}else if(a){if(c==="start")return 0;if(c==="center")return t/2}return t},be=function(t,i){var a=Z.createElement("div");return a.className="gutter gutter-"+i,a},we=function(t,i,a){var c={};return ue(i)?c[t]=i:c[t]=_e+"("+i+"% - "+a+"px)",c},Ee=function(t,i){var a;return a={},a[t]=i+"px",a},xe=function(t,i){if(i===void 0&&(i={}),ee)return{};var a=t,c,z,p,S,g,l;Array.from&&(a=Array.from(a));var y=oe(a[0]),b=y.parentNode,$=getComputedStyle?getComputedStyle(b):null,f=$?$.flexDirection:null,M=d(i,"sizes")||a.map(function(){return 100/a.length}),B=d(i,"minSize",100),C=Array.isArray(B)?B:a.map(function(){return B}),N=d(i,"maxSize",1/0),q=Array.isArray(N)?N:a.map(function(){return N}),o=d(i,"expandToMin",!1),m=d(i,"gutterSize",10),F=d(i,"gutterAlign","center"),P=d(i,"snapOffset",30),j=Array.isArray(P)?P:a.map(function(){return P}),L=d(i,"dragInterval",1),U=d(i,"direction",Y),Q=d(i,"cursor",U===Y?"col-resize":"row-resize"),fe=d(i,"gutter",be),ne=d(i,"elementStyle",we),ve=d(i,"gutterStyle",Ee);U===Y?(c="width",z="clientX",p="left",S="right",g="clientWidth"):U==="vertical"&&(c="height",z="clientY",p="top",S="bottom",g="clientHeight");function R(r,e,n,s){var v=ne(c,e,n,s);Object.keys(v).forEach(function(u){r.style[u]=v[u]})}function pe(r,e,n){var s=ve(c,e,n);Object.keys(s).forEach(function(v){r.style[v]=s[v]})}function V(){return l.map(function(r){return r.size})}function re(r){return"touches"in r?r.touches[0][z]:r[z]}function se(r){var e=l[this.a],n=l[this.b],s=e.size+n.size;e.size=r/this.size*s,n.size=s-r/this.size*s,R(e.element,e.size,this[x],e.i),R(n.element,n.size,this[D],n.i)}function de(r){var e,n=l[this.a],s=l[this.b];this.dragging&&(e=re(r)-this.start+(this[x]-this.dragOffset),L>1&&(e=Math.round(e/L)*L),e<=n.minSize+n.snapOffset+this[x]?e=n.minSize+this[x]:e>=this.size-(s.minSize+s.snapOffset+this[D])&&(e=this.size-(s.minSize+this[D])),e>=n.maxSize-n.snapOffset+this[x]?e=n.maxSize+this[x]:e<=this.size-(s.maxSize-s.snapOffset+this[D])&&(e=this.size-(s.maxSize+this[D])),se.call(this,e),d(i,"onDrag",O)(V()))}function ie(){var r=l[this.a].element,e=l[this.b].element,n=r[T](),s=e[T]();this.size=n[c]+s[c]+this[x]+this[D],this.start=n[p],this.end=n[S]}function ge(r){if(!getComputedStyle)return null;var e=getComputedStyle(r);if(!e)return null;var n=r[g];return n===0?null:(U===Y?n-=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight):n-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),n)}function ae(r){var e=ge(b);if(e===null||C.reduce(function(u,h){return u+h},0)>e)return r;var n=0,s=[],v=r.map(function(u,h){var A=e*u/100,W=J(m,h===0,h===r.length-1,F),X=C[h]+W;return A<X?(n+=X-A,s.push(0),X):(s.push(A-X),A)});return n===0?r:v.map(function(u,h){var A=u;if(n>0&&s[h]-n>0){var W=Math.min(n,s[h]-n);n-=W,A=u-W}return A/e*100})}function ze(){var r=this,e=l[r.a].element,n=l[r.b].element;r.dragging&&d(i,"onDragEnd",O)(V()),r.dragging=!1,_[E]("mouseup",r.stop),_[E]("touchend",r.stop),_[E]("touchcancel",r.stop),_[E]("mousemove",r.move),_[E]("touchmove",r.move),r.stop=null,r.move=null,e[E]("selectstart",O),e[E]("dragstart",O),n[E]("selectstart",O),n[E]("dragstart",O),e.style.userSelect="",e.style.webkitUserSelect="",e.style.MozUserSelect="",e.style.pointerEvents="",n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",r.gutter.style.cursor="",r.parent.style.cursor="",Z.body.style.cursor=""}function me(r){if(!("button"in r&&r.button!==0)){var e=this,n=l[e.a].element,s=l[e.b].element;e.dragging||d(i,"onDragStart",O)(V()),r.preventDefault(),e.dragging=!0,e.move=de.bind(e),e.stop=ze.bind(e),_[w]("mouseup",e.stop),_[w]("touchend",e.stop),_[w]("touchcancel",e.stop),_[w]("mousemove",e.move),_[w]("touchmove",e.move),n[w]("selectstart",O),n[w]("dragstart",O),s[w]("selectstart",O),s[w]("dragstart",O),n.style.userSelect="none",n.style.webkitUserSelect="none",n.style.MozUserSelect="none",n.style.pointerEvents="none",s.style.userSelect="none",s.style.webkitUserSelect="none",s.style.MozUserSelect="none",s.style.pointerEvents="none",e.gutter.style.cursor=Q,e.parent.style.cursor=Q,Z.body.style.cursor=Q,ie.call(e),e.dragOffset=re(r)-e.end}}M=ae(M);var k=[];l=a.map(function(r,e){var n={element:oe(r),size:M[e],minSize:C[e],maxSize:q[e],snapOffset:j[e],i:e},s;if(e>0&&(s={a:e-1,b:e,dragging:!1,direction:U,parent:b},s[x]=J(m,e-1===0,!1,F),s[D]=J(m,!1,e===a.length-1,F),f==="row-reverse"||f==="column-reverse")){var v=s.a;s.a=s.b,s.b=v}if(e>0){var u=fe(e,U,n.element);pe(u,m,e),s[H]=me.bind(s),u[w]("mousedown",s[H]),u[w]("touchstart",s[H]),b.insertBefore(u,n.element),s.gutter=u}return R(n.element,n.size,J(m,e===0,e===a.length-1,F),e),e>0&&k.push(s),n});function le(r){var e=r.i===k.length,n=e?k[r.i-1]:k[r.i];ie.call(n);var s=e?n.size-r.minSize-n[D]:r.minSize+n[x];se.call(n,s)}l.forEach(function(r){var e=r.element[T]()[c];e<r.minSize&&(o?le(r):r.minSize=e)});function he(r){var e=ae(r);e.forEach(function(n,s){if(s>0){var v=k[s-1],u=l[v.a],h=l[v.b];u.size=e[s-1],h.size=n,R(u.element,u.size,v[x],u.i),R(h.element,h.size,v[D],h.i)}})}function Se(r,e){k.forEach(function(n){if(e!==!0?n.parent.removeChild(n.gutter):(n.gutter[E]("mousedown",n[H]),n.gutter[E]("touchstart",n[H])),r!==!0){var s=ne(c,n.a.size,n[x]);Object.keys(s).forEach(function(v){l[n.a].element.style[v]="",l[n.b].element.style[v]=""})}})}return{setSizes:he,getSizes:V,collapse:function(e){le(l[e])},destroy:Se,parent:b,pairs:k}},K=xe;var G=5;function Oe({model:t,el:i}){let a=document.createElement("div");a.className=`split single-split ${t.orientation}`,a.classList.add("loading");let c=document.createElement("div");c.className="split-panel";let z=document.createElement("div");z.className="split-panel",a.append(c,z);let p=document.createElement("div"),S=document.createElement("div");if(p.className=t.collapsed===0?"collapsed-content":"content-wrapper",S.className=t.collapsed===1?"collapsed-content":"content-wrapper",t.objects!=null&&t.objects.length==2){let[o,m]=t.get_child("objects");p.append(o),S.append(m)}c.append(p),z.append(S);let g,l,y=0,b=0;function $(){y=b=0}t.show_buttons&&(g=document.createElement("div"),l=document.createElement("div"),t.orientation==="horizontal"?(g.className="toggle-button-left",l.className="toggle-button-right"):(g.className="toggle-button-up",l.className="toggle-button-down"),z.append(g,l),g.addEventListener("click",()=>{y++,b=0;let o;y===1&&t.sizes[1]<t.expanded_sizes[1]?(o=t.expanded_sizes,f=null):(f=0,o=[0,100],y=0),t.collapsed=f,N(o,!0)}),l.addEventListener("click",()=>{b++,y=0;let o;b===1&&t.sizes[0]<t.expanded_sizes[0]?(o=t.expanded_sizes,f=null):(f=1,o=[100,0],b=0),t.collapsed=f,N(o,!0)})),i.append(a);let f=t.collapsed,M=t.sizes,B=f?[100,0]:t.sizes,C=K([c,z],{sizes:B,minSize:t.min_size,maxSize:t.max_size||+"Infinity",dragInterval:t.step_size,snapOffset:t.snap_size,gutterSize:8,direction:t.orientation,onDrag:o=>{let m=o[0]<=G?0:o[1]<=G?1:null;f!==m&&(f=m,N(o))},onDragEnd:o=>{f=o[0]<=G?0:o[1]<=G?1:null,t.collapsed=f,N(o,!0),$()}});function N(o=null,m=!1){let F=o?o[0]<=G:!1,P=o?o[1]<=G:!1,[j,L]=o;P?(S.className="collapsed-content",[j,L]=[100,0]):S.className="content-wrapper",F?(p.className="collapsed-content",[j,L]=[0,100]):p.className="content-wrapper",m&&(C.setSizes([j,L]),o=[j,L],t.sizes=[j,L],window.dispatchEvent(new Event("resize")))}t.on("sizes",()=>{M!==t.sizes&&(M=t.sizes,N(M,!0))}),t.on("collapsed",()=>{if(f===t.collapsed)return;f=t.collapsed;let o=f===0?[0,100]:f===1?[100,0]:t.expanded_sizes;N(o,!0)});let q=!1;t.on("after_layout",()=>{q||(q=!0,t.show_buttons&&(g.classList.add("animated"),l.classList.add("animated"),setTimeout(()=>{g.classList.remove("animated"),l.classList.remove("animated")},1500)),window.dispatchEvent(new Event("resize")),a.classList.remove("loading"))}),t.on("remove",()=>C.destroy())}var te={};ce(te,{render:()=>Ne});function Ne({model:t,el:i}){let a=document.createElement("div");a.className=`split multi-split ${t.orientation}`,a.classList.add("loading");let c=t.objects?t.get_child("objects"):[],z=[];for(let l=0;l<c.length;l++){let y=document.createElement("div");y.className="split-panel",a.append(y),z.push(y),y.append(c[l])}i.append(a);let p=t.sizes,S=K(z,{sizes:p,minSize:t.min_size||0,maxSize:t.max_size||+"Infinity",dragInterval:t.step_size||1,snapOffset:t.snap_size||30,gutterSize:8,direction:t.orientation,onDragEnd:l=>{p=l,this.model.sizes=p}});t.on("sizes",()=>{p!==t.sizes&&(p=t.sizes,S.setSizes(p))});let g=!1;t.on("after_layout",()=>{g||(g=!0,a.classList.remove("loading"))}),t.on("remove",()=>S.destroy())}var ke={HSplit:I,MultiSplit:te,Split:I,VSplit:I};export{ke as default};
+var ye=Object.defineProperty;var ce=(t,s)=>{for(var a in s)ye(t,a,{get:s[a],enumerable:!0})};var U={};ce(U,{render:()=>Ne});var E=typeof window<"u"?window:null,ee=E===null,q=ee?void 0:E.document,x="addEventListener",N="removeEventListener",T="getBoundingClientRect",H="_a",O="_b",k="_c",Y="horizontal",L=function(){return!1},_e=ee?"calc":["","-webkit-","-moz-","-o-"].filter(function(t){var s=q.createElement("div");return s.style.cssText="width:"+t+"calc(9px)",!!s.style.length}).shift()+"calc",ue=function(t){return typeof t=="string"||t instanceof String},oe=function(t){if(ue(t)){var s=q.querySelector(t);if(!s)throw new Error("Selector "+t+" did not match a DOM element");return s}return t},z=function(t,s,a){var c=t[s];return c!==void 0?c:a},J=function(t,s,a,c){if(s){if(c==="end")return 0;if(c==="center")return t/2}else if(a){if(c==="start")return 0;if(c==="center")return t/2}return t},be=function(t,s){var a=q.createElement("div");return a.className="gutter gutter-"+s,a},we=function(t,s,a){var c={};return ue(s)?c[t]=s:c[t]=_e+"("+s+"% - "+a+"px)",c},Ee=function(t,s){var a;return a={},a[t]=s+"px",a},xe=function(t,s){if(s===void 0&&(s={}),ee)return{};var a=t,c,b,S,y,d,l;Array.from&&(a=Array.from(a));var h=oe(a[0]),f=h.parentNode,w=getComputedStyle?getComputedStyle(f):null,u=w?w.flexDirection:null,p=z(s,"sizes")||a.map(function(){return 100/a.length}),P=z(s,"minSize",100),B=Array.isArray(P)?P:a.map(function(){return P}),j=z(s,"maxSize",1/0),Z=Array.isArray(j)?j:a.map(function(){return j}),o=z(s,"expandToMin",!1),g=z(s,"gutterSize",10),D=z(s,"gutterAlign","center"),C=z(s,"snapOffset",30),A=Array.isArray(C)?C:a.map(function(){return C}),M=z(s,"dragInterval",1),G=z(s,"direction",Y),Q=z(s,"cursor",G===Y?"col-resize":"row-resize"),fe=z(s,"gutter",be),ne=z(s,"elementStyle",we),de=z(s,"gutterStyle",Ee);G===Y?(c="width",b="clientX",S="left",y="right",d="clientWidth"):G==="vertical"&&(c="height",b="clientY",S="top",y="bottom",d="clientHeight");function R(r,e,n,i){var m=ne(c,e,n,i);Object.keys(m).forEach(function(v){r.style[v]=m[v]})}function ve(r,e,n){var i=de(c,e,n);Object.keys(i).forEach(function(m){r.style[m]=i[m]})}function V(){return l.map(function(r){return r.size})}function re(r){return"touches"in r?r.touches[0][b]:r[b]}function ie(r){var e=l[this.a],n=l[this.b],i=e.size+n.size;e.size=r/this.size*i,n.size=i-r/this.size*i,R(e.element,e.size,this[O],e.i),R(n.element,n.size,this[k],n.i)}function pe(r){var e,n=l[this.a],i=l[this.b];this.dragging&&(e=re(r)-this.start+(this[O]-this.dragOffset),M>1&&(e=Math.round(e/M)*M),e<=n.minSize+n.snapOffset+this[O]?e=n.minSize+this[O]:e>=this.size-(i.minSize+i.snapOffset+this[k])&&(e=this.size-(i.minSize+this[k])),e>=n.maxSize-n.snapOffset+this[O]?e=n.maxSize+this[O]:e<=this.size-(i.maxSize-i.snapOffset+this[k])&&(e=this.size-(i.maxSize+this[k])),ie.call(this,e),z(s,"onDrag",L)(V()))}function se(){var r=l[this.a].element,e=l[this.b].element,n=r[T](),i=e[T]();this.size=n[c]+i[c]+this[O]+this[k],this.start=n[S],this.end=n[y]}function ge(r){if(!getComputedStyle)return null;var e=getComputedStyle(r);if(!e)return null;var n=r[d];return n===0?null:(G===Y?n-=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight):n-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),n)}function ae(r){var e=ge(f);if(e===null||B.reduce(function(v,_){return v+_},0)>e)return r;var n=0,i=[],m=r.map(function(v,_){var F=e*v/100,W=J(g,_===0,_===r.length-1,D),X=B[_]+W;return F<X?(n+=X-F,i.push(0),X):(i.push(F-X),F)});return n===0?r:m.map(function(v,_){var F=v;if(n>0&&i[_]-n>0){var W=Math.min(n,i[_]-n);n-=W,F=v-W}return F/e*100})}function me(){var r=this,e=l[r.a].element,n=l[r.b].element;r.dragging&&z(s,"onDragEnd",L)(V()),r.dragging=!1,E[N]("mouseup",r.stop),E[N]("touchend",r.stop),E[N]("touchcancel",r.stop),E[N]("mousemove",r.move),E[N]("touchmove",r.move),r.stop=null,r.move=null,e[N]("selectstart",L),e[N]("dragstart",L),n[N]("selectstart",L),n[N]("dragstart",L),e.style.userSelect="",e.style.webkitUserSelect="",e.style.MozUserSelect="",e.style.pointerEvents="",n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",r.gutter.style.cursor="",r.parent.style.cursor="",q.body.style.cursor=""}function he(r){if(!("button"in r&&r.button!==0)){var e=this,n=l[e.a].element,i=l[e.b].element;e.dragging||z(s,"onDragStart",L)(V()),r.preventDefault(),e.dragging=!0,e.move=pe.bind(e),e.stop=me.bind(e),E[x]("mouseup",e.stop),E[x]("touchend",e.stop),E[x]("touchcancel",e.stop),E[x]("mousemove",e.move),E[x]("touchmove",e.move),n[x]("selectstart",L),n[x]("dragstart",L),i[x]("selectstart",L),i[x]("dragstart",L),n.style.userSelect="none",n.style.webkitUserSelect="none",n.style.MozUserSelect="none",n.style.pointerEvents="none",i.style.userSelect="none",i.style.webkitUserSelect="none",i.style.MozUserSelect="none",i.style.pointerEvents="none",e.gutter.style.cursor=Q,e.parent.style.cursor=Q,q.body.style.cursor=Q,se.call(e),e.dragOffset=re(r)-e.end}}p=ae(p);var I=[];l=a.map(function(r,e){var n={element:oe(r),size:p[e],minSize:B[e],maxSize:Z[e],snapOffset:A[e],i:e},i;if(e>0&&(i={a:e-1,b:e,dragging:!1,direction:G,parent:f},i[O]=J(g,e-1===0,!1,D),i[k]=J(g,!1,e===a.length-1,D),u==="row-reverse"||u==="column-reverse")){var m=i.a;i.a=i.b,i.b=m}if(e>0){var v=fe(e,G,n.element);ve(v,g,e),i[H]=he.bind(i),v[x]("mousedown",i[H]),v[x]("touchstart",i[H]),f.insertBefore(v,n.element),i.gutter=v}return R(n.element,n.size,J(g,e===0,e===a.length-1,D),e),e>0&&I.push(i),n});function le(r){var e=r.i===I.length,n=e?I[r.i-1]:I[r.i];se.call(n);var i=e?n.size-r.minSize-n[k]:r.minSize+n[O];ie.call(n,i)}l.forEach(function(r){var e=r.element[T]()[c];e<r.minSize&&(o?le(r):r.minSize=e)});function ze(r){var e=ae(r);e.forEach(function(n,i){if(i>0){var m=I[i-1],v=l[m.a],_=l[m.b];v.size=e[i-1],_.size=n,R(v.element,v.size,m[O],v.i),R(_.element,_.size,m[k],_.i)}})}function Se(r,e){I.forEach(function(n){if(e!==!0?n.parent.removeChild(n.gutter):(n.gutter[N]("mousedown",n[H]),n.gutter[N]("touchstart",n[H])),r!==!0){var i=ne(c,n.a.size,n[O]);Object.keys(i).forEach(function(m){l[n.a].element.style[m]="",l[n.b].element.style[m]=""})}})}return{setSizes:ze,getSizes:V,collapse:function(e){le(l[e])},destroy:Se,parent:f,pairs:I}},K=xe;var $=5;function Ne({model:t,el:s}){let a=document.createElement("div");a.className=`split single-split ${t.orientation}`,a.classList.add("loading");let c=document.createElement("div");c.className="split-panel";let b=document.createElement("div");b.className="split-panel",a.append(c,b);let S=document.createElement("div"),y=document.createElement("div");if(S.className=t.collapsed===0?"collapsed-content":"content-wrapper",y.className=t.collapsed===1?"collapsed-content":"content-wrapper",t.objects!=null&&t.objects.length==2){let[o,g]=t.get_child("objects");S.append(o),y.append(g)}c.append(S),b.append(y),t.on("objects",()=>{let[o,g]=t.get_child("objects");S.replaceChildren(o),y.replaceChildren(g)});let d,l,h=0,f=0;function w(){h=f=0}t.show_buttons&&(d=document.createElement("div"),l=document.createElement("div"),t.orientation==="horizontal"?(d.className="toggle-button-left",l.className="toggle-button-right"):(d.className="toggle-button-up",l.className="toggle-button-down"),b.append(d,l),d.addEventListener("click",()=>{h++,f=0;let o;h===1&&t.sizes[1]<t.expanded_sizes[1]?(o=t.expanded_sizes,u=null):(u=0,o=[0,100],h=0),t.collapsed=u,j(o,!0)}),l.addEventListener("click",()=>{f++,h=0;let o;f===1&&t.sizes[0]<t.expanded_sizes[0]?(o=t.expanded_sizes,u=null):(u=1,o=[100,0],f=0),t.collapsed=u,j(o,!0)})),s.append(a);let u=t.collapsed,p=t.sizes,P=u?[100,0]:t.sizes,B=K([c,b],{sizes:P,minSize:t.min_size,maxSize:t.max_size||+"Infinity",dragInterval:t.step_size,snapOffset:t.snap_size,gutterSize:8,gutter:(o,g)=>{let D=document.createElement("div");D.className=`gutter gutter-${g}`;let C=document.createElement("div");return C.className="divider",D.append(C),D},direction:t.orientation,onDrag:o=>{let g=o[0]<=$?0:o[1]<=$?1:null;u!==g&&(u=g,j(o))},onDragEnd:o=>{u=o[0]<=$?0:o[1]<=$?1:null,t.collapsed=u,j(o,!0),w()}});function j(o=null,g=!1){let D=o?o[0]<=$:!1,C=o?o[1]<=$:!1,[A,M]=o;C?(y.className="collapsed-content",[A,M]=[100,0]):y.className="content-wrapper",D?(S.className="collapsed-content",[A,M]=[0,100]):S.className="content-wrapper",g&&(B.setSizes([A,M]),o=[A,M],t.sizes=[A,M],window.dispatchEvent(new Event("resize")))}t.on("sizes",()=>{p!==t.sizes&&(p=t.sizes,j(p,!0))}),t.on("collapsed",()=>{if(u===t.collapsed)return;u=t.collapsed;let o=u===0?[0,100]:u===1?[100,0]:t.expanded_sizes;j(o,!0)});let Z=!1;t.on("after_layout",()=>{Z||(Z=!0,t.show_buttons&&(d.classList.add("animated"),l.classList.add("animated"),setTimeout(()=>{d.classList.remove("animated"),l.classList.remove("animated")},1500)),window.dispatchEvent(new Event("resize")),a.classList.remove("loading"))}),t.on("remove",()=>B.destroy())}var te={};ce(te,{render:()=>Oe});function Oe({model:t,el:s}){let a=document.createElement("div");a.className=`split multi-split ${t.orientation}`,a.classList.add("loading");let c=null;function b(d,l){for(let h=0;h<l.length;h++){let f=l[h],w=d.children[h];w?.id!==f.id&&(w?d.insertBefore(f,w):d.append(f))}for(;d.children.length>l.length;)d.removeChild(d.lastElementChild)}let S=()=>{c!=null&&(c.destroy(),c=null);let d=t.objects?t.get_child("objects"):[],l=[];for(let f=0;f<d.length;f++){let w=d[f],u=`split-panel-${t.objects[f].id}`,p=s.querySelector(`#${u}`);p==null&&(p=document.createElement("div"),p.className="split-panel",p.id=u,p.replaceChildren(w)),l.push(p)}b(a,l);let h=t.sizes;c=K(l,{sizes:h,minSize:t.min_size||0,maxSize:t.max_size||+"Infinity",dragInterval:t.step_size||1,snapOffset:t.snap_size||30,gutterSize:8,gutter:(f,w)=>{let u=document.createElement("div");u.className=`gutter gutter-${w}`;let p=document.createElement("div");return p.className="divider",u.append(p),u},direction:t.orientation,onDragEnd:f=>{h=f,this.model.sizes=h}})};S(),s.append(a),t.on("objects",S),t.on("sizes",()=>{sizes!==t.sizes&&(sizes=t.sizes,c.setSizes(sizes))});let y=!1;t.on("after_layout",()=>{y||(y=!0,a.classList.remove("loading"))}),t.on("remove",()=>c.destroy())}var ke={HSplit:U,MultiSplit:te,Split:U,VSplit:U};export{ke as default};

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

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)

{panel_splitjs-0.1.0.dist-info → panel_splitjs-0.2.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: panel-splitjs
-Version: 0.1.0
+Version: 0.2.0
 Summary: Provides split.js components for Panel.
 Project-URL: Homepage, https://github.com/panel-extensions/panel-splitjs
 Project-URL: Source, https://github.com/panel-extensions/panel-splitjs
@@ -22,7 +22,7 @@ Classifier: Topic :: Scientific/Engineering
 Classifier: Topic :: Software Development :: Libraries
 Requires-Python: >=3.10
 Requires-Dist: packaging
-Requires-Dist: panel>=1.8.0
+Requires-Dist: panel>=1.8.3
 Provides-Extra: dev
 Requires-Dist: mkdocs-material; extra == 'dev'
 Requires-Dist: mkdocstrings[python]; extra == 'dev'

{panel_splitjs-0.1.0.dist-info → panel_splitjs-0.2.0.dist-info}/RECORD

@@ -1,17 +1,17 @@
 panel_splitjs/__init__.py,sha256=BKEeHeKAv90kV3GybL6FH8RCwFZM4B6gffr7T8242Qk,150
 panel_splitjs/__version.py,sha256=rpIYpR7RLjD5NBNasrT3f60C0qTL-nnHBifOofA_qyo,1778
-panel_splitjs/_version.py,sha256=5jwwVncvCiTnhOedfkzzxmxsggwmTBORdFL_4wq0ZeY,704
-panel_splitjs/base.py,sha256=x3ynR2CaKUQxhQOGvKyje7zaR8UDppvOygQG89stzTA,5994
-panel_splitjs/dist/panel-splitjs.bundle.js,sha256=rsJvlKUnpPwOQ6q0Axqve8eLesHk1Y8GjMxbIkwjkag,9380
+panel_splitjs/_version.py,sha256=Dg8AmJomLVpjKL6prJylOONZAPRtB86LOce7dorQS_A,704
+panel_splitjs/base.py,sha256=4KXVGom_-ZAOsIXAStcwN0ckyU6wuphCMLV4hadSS-M,6024
+panel_splitjs/dist/panel-splitjs.bundle.js,sha256=wi-s9nn8rpnVVlzopD6WWvEvPN3tqxdnfYzkuOGhLf0,10167
 panel_splitjs/dist/css/arrow_down.svg,sha256=pPSAQIH-UkJf1HbWJhAapaT-rROqn6JVPQldOT3Al0I,214
 panel_splitjs/dist/css/arrow_left.svg,sha256=XZ1Qf7CzKTij-Fa4Up51Gbu_WnBcScK7Qx-tOprvEzE,215
 panel_splitjs/dist/css/arrow_right.svg,sha256=_-3m5dLhPwH9caIEk8XLp3Z8-xQHHvTBny6AcyFVRb4,214
 panel_splitjs/dist/css/arrow_up.svg,sha256=FoVQYz0kh1SAf7EJAs2ZI-ZuuQjcPzR3uM4uViZ87Qs,215
 panel_splitjs/dist/css/handle.svg,sha256=tEQAE3lNBVzPigcp9Z0SQZCW0bSzfECYIvpl19NOd0E,899
 panel_splitjs/dist/css/handle_vertical.svg,sha256=2QZdZzNiLaJp93Ot4tJBhfGjF07EiMfN-Hq3Uf5Z_BI,801
-panel_splitjs/dist/css/splitjs.css,sha256=L80iIafpH9Ii5qy0duO-KNroG6VaP7AzQImZR3d7zgI,5281
-panel_splitjs/models/multi_split.js,sha256=U9TQcCK5Ho0GElYaMCOzwEosnBv40vN7XOLzsGzlISk,1348
-panel_splitjs/models/split.js,sha256=zJefB8ivxMi-j7oKgTc9wF5K3CIxSKommQPfYL0tpR8,5470
-panel_splitjs-0.1.0.dist-info/METADATA,sha256=FMJQQJtzyj-5RTFnmLQlivB1weEzww7P3QcmSJ_ZnAg,10877
-panel_splitjs-0.1.0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-panel_splitjs-0.1.0.dist-info/RECORD,,
+panel_splitjs/dist/css/splitjs.css,sha256=6Foh_0tA2IhjMzgRAQzKBbzXo_FRx2N8znDSwhpF8_k,6001
+panel_splitjs/models/multi_split.js,sha256=fWDy7SIAk1BZaFGxTIjQRdb98EnwVWVQsOUFmyukUKA,2786
+panel_splitjs/models/split.js,sha256=-vHOddI0fY4FWrlJ3QLtwrrfvOGHmek3vZYHYVbznIY,5940
+panel_splitjs-0.2.0.dist-info/METADATA,sha256=9kp_cUB98iaPyD8gN-r3Un-vh1Bx_68LotqWuOIaOWk,10877
+panel_splitjs-0.2.0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+panel_splitjs-0.2.0.dist-info/RECORD,,