react-bwin 0.1.2 → 0.1.3

package/dist/react-bwin.js

@@ -1074,7 +1074,7 @@ function Rt({
   );
 }
 function xt(e) {
-  const t = M(), i = M(), { panes: n, ...s } = e, o = { children: n, ...s }, h = new O(o), a = [], d = [];
+  const t = M(), i = M(), { panes: n, ...s } = e, o = { ...s, children: n }, h = new O(o), a = [], d = [];
   return h.rootSash.walk((l) => {
     l.children.length > 0 ? a.push(l) : d.push(l);
   }), L(() => {

package/dist/react-bwin.umd.cjs

@@ -5,4 +5,4 @@ top: ${e.style.top}
 left: ${e.style.left}
 width: ${e.style.width}
 height: ${e.style.height}
-`;return t.innerHTML=i.trim(),t}const dt={createWindow(){const e=document.createElement("bw-window");return e.style.width=`${this.rootSash.width}px`,e.style.height=`${this.rootSash.height}px`,e.setAttribute("sash-id",this.rootSash.id),e},glaze(){this.rootSash.walk(e=>{let t=null;e.children.length>0?(t=this.createMuntin(e),this.onMuntinCreate(t,e),this.windowElement.append(t)):(t=this.createPane(e),this.onPaneCreate(t,e),this.windowElement.prepend(t)),e.domNode=t})},update(){this.windowElement.style.width=`${this.rootSash.width}px`,this.windowElement.style.height=`${this.rootSash.height}px`;const e=this.rootSash.getAllIds(),t=[];this.windowElement.querySelectorAll("[sash-id]").forEach(i=>{const n=i.getAttribute("sash-id");t.push(n),e.includes(n)||i.remove()}),this.rootSash.walk(i=>{i.children.length>0?t.includes(i.id)?(this.updateMuntin(i),this.onMuntinUpdate(i.domNode,i)):(i.domNode=this.createMuntin(i),this.windowElement.append(i.domNode)):t.includes(i.id)?(this.updatePane(i),this.onPaneUpdate(i.domNode,i)):(i.domNode||(i.domNode=this.createPane(i)),this.windowElement.prepend(i.domNode))})}},ct={muntinSize:4,createMuntin(e){const t=document.createElement("bw-muntin"),i=e.leftChild,n=e.topChild;return i?(t.style.width=`${this.muntinSize}px`,t.style.height=`${e.height}px`,t.style.top=`${e.top}px`,t.style.left=`${e.left+i.width-this.muntinSize/2}px`,t.setAttribute("vertical","")):n&&(t.style.width=`${e.width}px`,t.style.height=`${this.muntinSize}px`,t.style.top=`${e.top+n.height-this.muntinSize/2}px`,t.style.left=`${e.left}px`,t.setAttribute("horizontal","")),t.setAttribute("sash-id",e.id),e.store.resizable===!1&&t.setAttribute("resizable","false"),t},onMuntinCreate(e,t){},updateMuntin(e){const t=e.domNode,i=e.leftChild,n=e.topChild;i?(t.style.height=`${e.height}px`,t.style.top=`${e.top}px`,t.style.left=`${e.left+i.width-this.muntinSize/2}px`):n&&(t.style.width=`${e.width}px`,t.style.top=`${e.top+n.height-this.muntinSize/2}px`,t.style.left=`${e.left}px`)},onMuntinUpdate(e,t){}},pt={fitContainer:!1,enableFitContainer(){new ResizeObserver(e=>{for(const t of e)t.target===this.containerElement&&this.fitContainer&&(this.rootSash.width=t.contentRect.width,this.rootSash.height=t.contentRect.height,this.update())}).observe(this.containerElement)}},ut={activeMuntinSash:null,isResizeStarted:!1,isDropStarted:!1,lastX:0,lastY:0,applyResizeStyles(){this.activeMuntinSash.domNode.hasAttribute("vertical")?document.body.classList.add("body--bw-resize-x"):this.activeMuntinSash.domNode.hasAttribute("horizontal")&&document.body.classList.add("body--bw-resize-y")},revertResizeStyles(){document.body.classList.remove("body--bw-resize-x"),document.body.classList.remove("body--bw-resize-y")},enableResize(){document.addEventListener("mousedown",e=>{if(e.target.tagName!=="BW-MUNTIN"||e.target.getAttribute("resizable")==="false")return;const t=e.target.getAttribute("sash-id");this.activeMuntinSash=this.rootSash.getById(t),this.activeMuntinSash&&(this.isResizeStarted=!0,this.lastX=e.pageX,this.lastY=e.pageY,this.applyResizeStyles())}),document.addEventListener("mousemove",e=>{if(!this.isResizeStarted||!this.activeMuntinSash)return;const[t,i,n,s]=this.activeMuntinSash.getChildren(),o=this.activeMuntinSash.isLeftRightSplit(),h=this.activeMuntinSash.isTopBottomSplit();if(o&&s&&i){const a=e.pageX-this.lastX,d=s.width+a,l=i.width-a;if(d<=s.calcMinWidth()||l<=i.calcMinWidth())return;s.width=d,i.width=l,i.left=i.left+a,this.update(),this.lastX=e.pageX}else if(h&&t&&n){const a=e.pageY-this.lastY,d=t.height+a,l=n.height-a;if(d<=t.calcMinHeight()||l<=n.calcMinHeight())return;t.height=d,n.height=l,n.top=n.top+a,this.update(),this.lastY=e.pageY}}),document.addEventListener("mouseup",()=>{this.isResizeStarted=!1,this.activeMuntinSash=null,this.revertResizeStyles()})}},gt={activeDropPaneEl:null,onPaneDrop(e,t){},enableDrop(){this.windowElement.addEventListener("dragover",e=>{e.preventDefault();const t=e.target.matches("bw-pane")?e.target:e.target.closest("bw-pane");if(!t||(t!==this.activeDropPaneEl&&(this.activeDropPaneEl&&this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=t),t.getAttribute("can-drop")==="false"))return;const i=J(t,e);t.setAttribute("drop-area",i)}),this.windowElement.addEventListener("dragleave",e=>{e.currentTarget.contains(e.relatedTarget)&&e.currentTarget!==e.relatedTarget||this.activeDropPaneEl&&(this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=null)}),this.windowElement.addEventListener("drop",e=>{if(!this.activeDropPaneEl||this.activeDropPaneEl.getAttribute("can-drop")==="false")return;const t=this.activeDropPaneEl.getAttribute("sash-id"),i=this.rootSash.getById(t);this.onPaneDrop(e,i),typeof i.store.onDrop=="function"&&i.store.onDrop(e,i),this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=null})}},ft=!1;class W{constructor(t){b(this,"windowElement",null),b(this,"containerElement",null),b(this,"debug",ft);let i=null;t instanceof it?(i=t,this.rootSash=t):(i=new et(t),this.rootSash=i.buildSashTree()),this.fitContainer=i.fitContainer}frame(t){this.containerElement=t,this.windowElement=this.createWindow(),this.glaze(),this.containerElement.append(this.windowElement)}enableFeatures(){this.enableResize(),this.enableDrop(),this.fitContainer&&this.enableFitContainer()}mount(t){this.frame(t),this.enableFeatures()}static assemble(...t){t.forEach(i=>{U(this.prototype,i)})}}W.assemble(dt,ct,lt,pt,gt,ut);function H(e){if(e.tagName==="BW-PANE")return e.getAttribute("sash-id");const t=e.closest("bw-pane");if(!t)throw new Error("[bwin] Pane element not found");return t.getAttribute("sash-id")}const wt={label:"",className:"bw-glass-action--close",onClick:(e,t)=>{const i=H(e.target);t.removePane(i)}},mt={label:"",className:"bw-glass-action--minimize",onClick:(e,t)=>{const i=t.sillElement;if(!i)throw new Error("[bwin] Sill element not found when minimizing");const n=C('<button class="bw-minimized-glass" />');i.append(n);const s=e.target.closest("bw-pane"),o=e.target.closest("bw-glass"),h=s.getAttribute("sash-id"),a=s.getAttribute("position");n.bwGlassElement=o,n.bwOriginalPosition=a,n.bwOriginalBoundingRect=M(s),t.removePane(h)}},bt={label:"",className:"bw-glass-action--maximize",onClick:e=>{const t=e.target.closest("bw-pane");t.hasAttribute("maximized")?(t.removeAttribute("maximized"),t.style.left=`${t.bwOriginalBoundingRect.left}px`,t.style.top=`${t.bwOriginalBoundingRect.top}px`,t.style.width=`${t.bwOriginalBoundingRect.width}px`,t.style.height=`${t.bwOriginalBoundingRect.height}px`):(t.setAttribute("maximized",""),t.bwOriginalBoundingRect=M(t),t.style.left="0",t.style.top="0",t.style.width="100%",t.style.height="100%")}};function yt(e,t){const i=e.left+e.width,n=e.top+e.height,s=t.left+t.width,o=t.top+t.height;if(e.left>=s||t.left>=i||e.top>=o||t.top>=n)return null;const h=Math.max(e.left,t.left),a=Math.max(e.top,t.top),d=Math.min(i,s),l=Math.min(n,o);return{left:h,top:a,width:d-h,height:l-a}}const B=[mt,bt,wt],Et={enableActions(){this.handleMinimizedGlassClick(),this.observeActionButtons()},restoreGlass(e){const t=e.bwOriginalBoundingRect;let i=0,n=null;if(this.windowElement.querySelectorAll("bw-pane").forEach(s=>{const o=M(s),h=yt(t,o);if(h){const a=h.width*h.height;a>i&&(i=a,n=s)}}),n){const s=e.bwOriginalPosition,o=M(n);let h=0;if(s===r.Left||s===r.Right)h=t.width>=o.width?o.width/2:t.width;else if(s===r.Top||s===r.Bottom)h=t.height>=o.height?o.height/2:t.height;else throw new Error("[bwin] Invalid position when restoring glass");this.addPane(n.getAttribute("sash-id"),{position:s,size:h}).domNode.append(e.bwGlassElement)}},handleMinimizedGlassClick(){this.sillElement.addEventListener("click",e=>{if(!e.target.matches(".bw-minimized-glass"))return;const t=e.target;this.restoreGlass(t),t.remove()})},updateDisabledStateOfActionButtons(){this.updateDisabledState(".bw-glass-action--close"),this.updateDisabledState(".bw-glass-action--minimize"),this.updateDisabledState(".bw-glass-action--maximize")},updateDisabledState(e){if(this.windowElement.querySelectorAll("bw-pane").length===1){const t=this.windowElement.querySelector(e);t&&t.setAttribute("disabled","")}else this.windowElement.querySelectorAll(e).forEach(t=>{t.removeAttribute("disabled")})},observeActionButtons(){this.updateDisabledStateOfActionButtons(),new MutationObserver(e=>{e.forEach(t=>{t.type==="childList"&&this.updateDisabledStateOfActionButtons()})}).observe(this.windowElement,{childList:!0})}},A={title:null,content:null,tabs:[],actions:void 0,draggable:!0};class G{constructor({title:t=A.title,content:i=A.content,tabs:n=A.tabs,actions:s=A.actions,draggable:o=A.draggable,sash:h,binaryWindow:a}){b(this,"domNode"),this.title=t,this.content=i,this.tabs=n,this.actions=s,this.sash=h,this.draggable=o,this.binaryWindow=a,this.build()}build(){const t=document.createElement("bw-glass-header");if(Array.isArray(this.tabs)&&this.tabs.length>0)t.append(this.createTabs());else if(this.title){const s=document.createElement("bw-glass-title");s.append(C(this.title)),t.append(s)}t.setAttribute("can-drag",this.draggable),t.append(this.createActions());const i=document.createElement("bw-glass-content"),n=C(this.content);n&&i.append(n),this.domNode=document.createElement("bw-glass"),this.domNode.append(t,i)}createTabs(){const t=document.createElement("bw-glass-tab-container");for(const i of this.tabs){const n=(i==null?void 0:i.label)??i,s=C(`<button class="bw-glass-tab">${n}</button>`);t.append(s)}return t}createActions(){const t=document.createElement("bw-glass-action-container"),i=this.actions===void 0?B:Array.isArray(this.actions)?this.actions:[];for(const n of i){const s=(n==null?void 0:n.label)??n,o=n.className?`bw-glass-action ${n.className}`:"bw-glass-action",h=C(`<button class="${o}">${s}</button>`);typeof n.onClick=="function"&&h.addEventListener("click",a=>{n.onClick(a,this.binaryWindow)}),t.append(h)}return t}get contentElement(){return this.domNode.querySelector("bw-glass-content")}get headerElement(){return this.domNode.querySelector("bw-glass-header")}}const vt={activeDragGlassEl:null,activeDragGlassPaneCanDrop:!1,onPaneDrop(e,t){if(!this.activeDragGlassEl)return;const i=this.activeDropPaneEl.getAttribute("drop-area");if(i==="center"){const n=this.activeDragGlassEl.closest("bw-pane"),s=this.activeDropPaneEl.getAttribute("can-drop")!=="false";_(n,this.activeDropPaneEl),n.setAttribute("can-drop",s);return}else{const n=H(this.activeDragGlassEl);this.addPane(t.id,{position:i}).domNode.append(this.activeDragGlassEl),this.removePane(n)}},enableDrag(){document.addEventListener("mousedown",e=>{if(e.button!==0||!e.target.matches("bw-glass-header"))return;if(e.target.getAttribute("can-drag")==="false"){e.preventDefault();return}const t=e.target.closest("bw-glass");t.setAttribute("draggable",!0),this.activeDragGlassEl=t}),document.addEventListener("mouseup",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl=null)}),this.windowElement.addEventListener("dragstart",e=>{if(!(e.target instanceof HTMLElement)||!e.target.matches("bw-glass")||!this.activeDragGlassEl)return;e.dataTransfer.effectAllowed="move";const t=this.activeDragGlassEl.closest("bw-pane");this.activeDragGlassPaneCanDrop=t.getAttribute("can-drop")!=="false",t.setAttribute("can-drop",!1)}),this.windowElement.addEventListener("dragend",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop",this.activeDragGlassPaneCanDrop),this.activeDragGlassEl=null)})}},Nt={trimMuntin(e){e.hasAttribute("vertical")?(e.style.top=`${parseFloat(e.style.top)+this.muntinSize/2}px`,e.style.height=`${parseFloat(e.style.height)-this.muntinSize}px`):e.hasAttribute("horizontal")&&(e.style.left=`${parseFloat(e.style.left)+this.muntinSize/2}px`,e.style.width=`${parseFloat(e.style.width)-this.muntinSize}px`)},onMuntinCreate(e){this.trimMuntin(e)},onMuntinUpdate(e){this.trimMuntin(e)}};class O extends W{constructor(){super(...arguments),b(this,"sillElement",null)}frame(){super.frame(...arguments);const t=C("<bw-sill />");this.windowElement.append(t),this.sillElement=t}enableFeatures(){super.enableFeatures(),this.enableDrag(),this.enableActions()}onPaneCreate(t,i){const n=new G({...i.store,sash:i,binaryWindow:this});t.innerHTML="",t.append(n.domNode),this.debug&&n.contentElement.prepend(`${i.id}`)}onPaneUpdate(){}addGlass(t,i,n){const s=this.addPane(t,{position:i}),o=new G({...n,sash:s,binaryWindow:this});s.domNode.append(o.domNode)}removeGlass(t,i){if(i)this.removePane(t);else{const n=this.rootSash.getById(t);if(!n)throw new Error("[bwin] Pane not found when removing glass");const s=n.domNode.querySelector("bw-glass");s&&s.remove()}}}O.assemble(vt,Nt,Et);const v=4;function zt({sash:e}){var c;const t=p.useRef(),i=e.leftChild,n=e.topChild;let s,o,h,a,d,l;return i?(s=v,o=e.height-v,h=e.top+v/2,a=e.left+i.width-v/2,d=!0):n&&(s=e.width-v,o=v,h=e.top+n.height-v/2,a=e.left+v/2,l=!0),p.useEffect(()=>{e.domNode=t.current},[]),p.createElement("bw-muntin",{"sash-id":e.id,style:{width:s,height:o,top:h,left:a},vertical:d,horizontal:l,resizable:((c=e.store)==null?void 0:c.resizable)===!1?"false":"true",ref:t})}function Ct({sash:e,bwin:t}){var c,u,g,w,m;const i=p.useRef(),{left:n,top:s,width:o,height:h,id:a,position:d}=e;p.useEffect(()=>{e.domNode=i.current},[]);const l=((c=e.store)==null?void 0:c.actions)===void 0?B:Array.isArray(e.store.actions)?e.store.actions:[];return p.createElement("bw-pane",{"sash-id":a,position:d,style:{left:n,top:s,width:o,height:h},"can-drop":((u=e.store)==null?void 0:u.droppable)===!1?"false":"true",ref:i},p.createElement("bw-glass",null,p.createElement("bw-glass-header",{"can-drag":((g=e.store)==null?void 0:g.draggable)===!1?"false":"true"},((w=e.store)==null?void 0:w.title)&&p.createElement("bw-glass-title",null,e.store.title),l.length>0&&p.createElement("bw-glass-action-container",null,l.map((x,At)=>{const Mt=x.className?`bw-glass-action ${x.className}`:"bw-glass-action";return p.createElement("button",{className:Mt,key:At,onClick:Pt=>x.onClick(Pt,t)},x.label)}))),p.createElement("bw-glass-content",null,(m=e.store)==null?void 0:m.content)))}function St(e){const t=p.useRef(),i=p.useRef(),{panes:n,...s}=e,o={children:n,...s},h=new O(o),a=[],d=[];return h.rootSash.walk(l=>{l.children.length>0?a.push(l):d.push(l)}),p.useEffect(()=>{const l=t.current;l!=null&&l.parentElement&&(h.windowElement=l,h.containerElement=l.parentElement,h.sillElement=i.current,h.enableFeatures())},[]),p.createElement("bw-window",{"sash-id":h.rootSash.id,style:{width:h.rootSash.width,height:h.rootSash.height},ref:t},d.map(l=>p.createElement(Ct,{key:l.id,sash:l,bwin:h})),a.map(l=>p.createElement(zt,{key:l.id,sash:l})),p.createElement("bw-sill",{ref:i}))}y.BUILTIN_ACTIONS=B,y.Window=St,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
+`;return t.innerHTML=i.trim(),t}const dt={createWindow(){const e=document.createElement("bw-window");return e.style.width=`${this.rootSash.width}px`,e.style.height=`${this.rootSash.height}px`,e.setAttribute("sash-id",this.rootSash.id),e},glaze(){this.rootSash.walk(e=>{let t=null;e.children.length>0?(t=this.createMuntin(e),this.onMuntinCreate(t,e),this.windowElement.append(t)):(t=this.createPane(e),this.onPaneCreate(t,e),this.windowElement.prepend(t)),e.domNode=t})},update(){this.windowElement.style.width=`${this.rootSash.width}px`,this.windowElement.style.height=`${this.rootSash.height}px`;const e=this.rootSash.getAllIds(),t=[];this.windowElement.querySelectorAll("[sash-id]").forEach(i=>{const n=i.getAttribute("sash-id");t.push(n),e.includes(n)||i.remove()}),this.rootSash.walk(i=>{i.children.length>0?t.includes(i.id)?(this.updateMuntin(i),this.onMuntinUpdate(i.domNode,i)):(i.domNode=this.createMuntin(i),this.windowElement.append(i.domNode)):t.includes(i.id)?(this.updatePane(i),this.onPaneUpdate(i.domNode,i)):(i.domNode||(i.domNode=this.createPane(i)),this.windowElement.prepend(i.domNode))})}},ct={muntinSize:4,createMuntin(e){const t=document.createElement("bw-muntin"),i=e.leftChild,n=e.topChild;return i?(t.style.width=`${this.muntinSize}px`,t.style.height=`${e.height}px`,t.style.top=`${e.top}px`,t.style.left=`${e.left+i.width-this.muntinSize/2}px`,t.setAttribute("vertical","")):n&&(t.style.width=`${e.width}px`,t.style.height=`${this.muntinSize}px`,t.style.top=`${e.top+n.height-this.muntinSize/2}px`,t.style.left=`${e.left}px`,t.setAttribute("horizontal","")),t.setAttribute("sash-id",e.id),e.store.resizable===!1&&t.setAttribute("resizable","false"),t},onMuntinCreate(e,t){},updateMuntin(e){const t=e.domNode,i=e.leftChild,n=e.topChild;i?(t.style.height=`${e.height}px`,t.style.top=`${e.top}px`,t.style.left=`${e.left+i.width-this.muntinSize/2}px`):n&&(t.style.width=`${e.width}px`,t.style.top=`${e.top+n.height-this.muntinSize/2}px`,t.style.left=`${e.left}px`)},onMuntinUpdate(e,t){}},pt={fitContainer:!1,enableFitContainer(){new ResizeObserver(e=>{for(const t of e)t.target===this.containerElement&&this.fitContainer&&(this.rootSash.width=t.contentRect.width,this.rootSash.height=t.contentRect.height,this.update())}).observe(this.containerElement)}},ut={activeMuntinSash:null,isResizeStarted:!1,isDropStarted:!1,lastX:0,lastY:0,applyResizeStyles(){this.activeMuntinSash.domNode.hasAttribute("vertical")?document.body.classList.add("body--bw-resize-x"):this.activeMuntinSash.domNode.hasAttribute("horizontal")&&document.body.classList.add("body--bw-resize-y")},revertResizeStyles(){document.body.classList.remove("body--bw-resize-x"),document.body.classList.remove("body--bw-resize-y")},enableResize(){document.addEventListener("mousedown",e=>{if(e.target.tagName!=="BW-MUNTIN"||e.target.getAttribute("resizable")==="false")return;const t=e.target.getAttribute("sash-id");this.activeMuntinSash=this.rootSash.getById(t),this.activeMuntinSash&&(this.isResizeStarted=!0,this.lastX=e.pageX,this.lastY=e.pageY,this.applyResizeStyles())}),document.addEventListener("mousemove",e=>{if(!this.isResizeStarted||!this.activeMuntinSash)return;const[t,i,n,s]=this.activeMuntinSash.getChildren(),o=this.activeMuntinSash.isLeftRightSplit(),h=this.activeMuntinSash.isTopBottomSplit();if(o&&s&&i){const a=e.pageX-this.lastX,d=s.width+a,l=i.width-a;if(d<=s.calcMinWidth()||l<=i.calcMinWidth())return;s.width=d,i.width=l,i.left=i.left+a,this.update(),this.lastX=e.pageX}else if(h&&t&&n){const a=e.pageY-this.lastY,d=t.height+a,l=n.height-a;if(d<=t.calcMinHeight()||l<=n.calcMinHeight())return;t.height=d,n.height=l,n.top=n.top+a,this.update(),this.lastY=e.pageY}}),document.addEventListener("mouseup",()=>{this.isResizeStarted=!1,this.activeMuntinSash=null,this.revertResizeStyles()})}},gt={activeDropPaneEl:null,onPaneDrop(e,t){},enableDrop(){this.windowElement.addEventListener("dragover",e=>{e.preventDefault();const t=e.target.matches("bw-pane")?e.target:e.target.closest("bw-pane");if(!t||(t!==this.activeDropPaneEl&&(this.activeDropPaneEl&&this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=t),t.getAttribute("can-drop")==="false"))return;const i=J(t,e);t.setAttribute("drop-area",i)}),this.windowElement.addEventListener("dragleave",e=>{e.currentTarget.contains(e.relatedTarget)&&e.currentTarget!==e.relatedTarget||this.activeDropPaneEl&&(this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=null)}),this.windowElement.addEventListener("drop",e=>{if(!this.activeDropPaneEl||this.activeDropPaneEl.getAttribute("can-drop")==="false")return;const t=this.activeDropPaneEl.getAttribute("sash-id"),i=this.rootSash.getById(t);this.onPaneDrop(e,i),typeof i.store.onDrop=="function"&&i.store.onDrop(e,i),this.activeDropPaneEl.removeAttribute("drop-area"),this.activeDropPaneEl=null})}},ft=!1;class W{constructor(t){b(this,"windowElement",null),b(this,"containerElement",null),b(this,"debug",ft);let i=null;t instanceof it?(i=t,this.rootSash=t):(i=new et(t),this.rootSash=i.buildSashTree()),this.fitContainer=i.fitContainer}frame(t){this.containerElement=t,this.windowElement=this.createWindow(),this.glaze(),this.containerElement.append(this.windowElement)}enableFeatures(){this.enableResize(),this.enableDrop(),this.fitContainer&&this.enableFitContainer()}mount(t){this.frame(t),this.enableFeatures()}static assemble(...t){t.forEach(i=>{U(this.prototype,i)})}}W.assemble(dt,ct,lt,pt,gt,ut);function H(e){if(e.tagName==="BW-PANE")return e.getAttribute("sash-id");const t=e.closest("bw-pane");if(!t)throw new Error("[bwin] Pane element not found");return t.getAttribute("sash-id")}const wt={label:"",className:"bw-glass-action--close",onClick:(e,t)=>{const i=H(e.target);t.removePane(i)}},mt={label:"",className:"bw-glass-action--minimize",onClick:(e,t)=>{const i=t.sillElement;if(!i)throw new Error("[bwin] Sill element not found when minimizing");const n=C('<button class="bw-minimized-glass" />');i.append(n);const s=e.target.closest("bw-pane"),o=e.target.closest("bw-glass"),h=s.getAttribute("sash-id"),a=s.getAttribute("position");n.bwGlassElement=o,n.bwOriginalPosition=a,n.bwOriginalBoundingRect=M(s),t.removePane(h)}},bt={label:"",className:"bw-glass-action--maximize",onClick:e=>{const t=e.target.closest("bw-pane");t.hasAttribute("maximized")?(t.removeAttribute("maximized"),t.style.left=`${t.bwOriginalBoundingRect.left}px`,t.style.top=`${t.bwOriginalBoundingRect.top}px`,t.style.width=`${t.bwOriginalBoundingRect.width}px`,t.style.height=`${t.bwOriginalBoundingRect.height}px`):(t.setAttribute("maximized",""),t.bwOriginalBoundingRect=M(t),t.style.left="0",t.style.top="0",t.style.width="100%",t.style.height="100%")}};function yt(e,t){const i=e.left+e.width,n=e.top+e.height,s=t.left+t.width,o=t.top+t.height;if(e.left>=s||t.left>=i||e.top>=o||t.top>=n)return null;const h=Math.max(e.left,t.left),a=Math.max(e.top,t.top),d=Math.min(i,s),l=Math.min(n,o);return{left:h,top:a,width:d-h,height:l-a}}const B=[mt,bt,wt],Et={enableActions(){this.handleMinimizedGlassClick(),this.observeActionButtons()},restoreGlass(e){const t=e.bwOriginalBoundingRect;let i=0,n=null;if(this.windowElement.querySelectorAll("bw-pane").forEach(s=>{const o=M(s),h=yt(t,o);if(h){const a=h.width*h.height;a>i&&(i=a,n=s)}}),n){const s=e.bwOriginalPosition,o=M(n);let h=0;if(s===r.Left||s===r.Right)h=t.width>=o.width?o.width/2:t.width;else if(s===r.Top||s===r.Bottom)h=t.height>=o.height?o.height/2:t.height;else throw new Error("[bwin] Invalid position when restoring glass");this.addPane(n.getAttribute("sash-id"),{position:s,size:h}).domNode.append(e.bwGlassElement)}},handleMinimizedGlassClick(){this.sillElement.addEventListener("click",e=>{if(!e.target.matches(".bw-minimized-glass"))return;const t=e.target;this.restoreGlass(t),t.remove()})},updateDisabledStateOfActionButtons(){this.updateDisabledState(".bw-glass-action--close"),this.updateDisabledState(".bw-glass-action--minimize"),this.updateDisabledState(".bw-glass-action--maximize")},updateDisabledState(e){if(this.windowElement.querySelectorAll("bw-pane").length===1){const t=this.windowElement.querySelector(e);t&&t.setAttribute("disabled","")}else this.windowElement.querySelectorAll(e).forEach(t=>{t.removeAttribute("disabled")})},observeActionButtons(){this.updateDisabledStateOfActionButtons(),new MutationObserver(e=>{e.forEach(t=>{t.type==="childList"&&this.updateDisabledStateOfActionButtons()})}).observe(this.windowElement,{childList:!0})}},A={title:null,content:null,tabs:[],actions:void 0,draggable:!0};class G{constructor({title:t=A.title,content:i=A.content,tabs:n=A.tabs,actions:s=A.actions,draggable:o=A.draggable,sash:h,binaryWindow:a}){b(this,"domNode"),this.title=t,this.content=i,this.tabs=n,this.actions=s,this.sash=h,this.draggable=o,this.binaryWindow=a,this.build()}build(){const t=document.createElement("bw-glass-header");if(Array.isArray(this.tabs)&&this.tabs.length>0)t.append(this.createTabs());else if(this.title){const s=document.createElement("bw-glass-title");s.append(C(this.title)),t.append(s)}t.setAttribute("can-drag",this.draggable),t.append(this.createActions());const i=document.createElement("bw-glass-content"),n=C(this.content);n&&i.append(n),this.domNode=document.createElement("bw-glass"),this.domNode.append(t,i)}createTabs(){const t=document.createElement("bw-glass-tab-container");for(const i of this.tabs){const n=(i==null?void 0:i.label)??i,s=C(`<button class="bw-glass-tab">${n}</button>`);t.append(s)}return t}createActions(){const t=document.createElement("bw-glass-action-container"),i=this.actions===void 0?B:Array.isArray(this.actions)?this.actions:[];for(const n of i){const s=(n==null?void 0:n.label)??n,o=n.className?`bw-glass-action ${n.className}`:"bw-glass-action",h=C(`<button class="${o}">${s}</button>`);typeof n.onClick=="function"&&h.addEventListener("click",a=>{n.onClick(a,this.binaryWindow)}),t.append(h)}return t}get contentElement(){return this.domNode.querySelector("bw-glass-content")}get headerElement(){return this.domNode.querySelector("bw-glass-header")}}const vt={activeDragGlassEl:null,activeDragGlassPaneCanDrop:!1,onPaneDrop(e,t){if(!this.activeDragGlassEl)return;const i=this.activeDropPaneEl.getAttribute("drop-area");if(i==="center"){const n=this.activeDragGlassEl.closest("bw-pane"),s=this.activeDropPaneEl.getAttribute("can-drop")!=="false";_(n,this.activeDropPaneEl),n.setAttribute("can-drop",s);return}else{const n=H(this.activeDragGlassEl);this.addPane(t.id,{position:i}).domNode.append(this.activeDragGlassEl),this.removePane(n)}},enableDrag(){document.addEventListener("mousedown",e=>{if(e.button!==0||!e.target.matches("bw-glass-header"))return;if(e.target.getAttribute("can-drag")==="false"){e.preventDefault();return}const t=e.target.closest("bw-glass");t.setAttribute("draggable",!0),this.activeDragGlassEl=t}),document.addEventListener("mouseup",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl=null)}),this.windowElement.addEventListener("dragstart",e=>{if(!(e.target instanceof HTMLElement)||!e.target.matches("bw-glass")||!this.activeDragGlassEl)return;e.dataTransfer.effectAllowed="move";const t=this.activeDragGlassEl.closest("bw-pane");this.activeDragGlassPaneCanDrop=t.getAttribute("can-drop")!=="false",t.setAttribute("can-drop",!1)}),this.windowElement.addEventListener("dragend",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop",this.activeDragGlassPaneCanDrop),this.activeDragGlassEl=null)})}},Nt={trimMuntin(e){e.hasAttribute("vertical")?(e.style.top=`${parseFloat(e.style.top)+this.muntinSize/2}px`,e.style.height=`${parseFloat(e.style.height)-this.muntinSize}px`):e.hasAttribute("horizontal")&&(e.style.left=`${parseFloat(e.style.left)+this.muntinSize/2}px`,e.style.width=`${parseFloat(e.style.width)-this.muntinSize}px`)},onMuntinCreate(e){this.trimMuntin(e)},onMuntinUpdate(e){this.trimMuntin(e)}};class O extends W{constructor(){super(...arguments),b(this,"sillElement",null)}frame(){super.frame(...arguments);const t=C("<bw-sill />");this.windowElement.append(t),this.sillElement=t}enableFeatures(){super.enableFeatures(),this.enableDrag(),this.enableActions()}onPaneCreate(t,i){const n=new G({...i.store,sash:i,binaryWindow:this});t.innerHTML="",t.append(n.domNode),this.debug&&n.contentElement.prepend(`${i.id}`)}onPaneUpdate(){}addGlass(t,i,n){const s=this.addPane(t,{position:i}),o=new G({...n,sash:s,binaryWindow:this});s.domNode.append(o.domNode)}removeGlass(t,i){if(i)this.removePane(t);else{const n=this.rootSash.getById(t);if(!n)throw new Error("[bwin] Pane not found when removing glass");const s=n.domNode.querySelector("bw-glass");s&&s.remove()}}}O.assemble(vt,Nt,Et);const v=4;function zt({sash:e}){var c;const t=p.useRef(),i=e.leftChild,n=e.topChild;let s,o,h,a,d,l;return i?(s=v,o=e.height-v,h=e.top+v/2,a=e.left+i.width-v/2,d=!0):n&&(s=e.width-v,o=v,h=e.top+n.height-v/2,a=e.left+v/2,l=!0),p.useEffect(()=>{e.domNode=t.current},[]),p.createElement("bw-muntin",{"sash-id":e.id,style:{width:s,height:o,top:h,left:a},vertical:d,horizontal:l,resizable:((c=e.store)==null?void 0:c.resizable)===!1?"false":"true",ref:t})}function Ct({sash:e,bwin:t}){var c,u,g,w,m;const i=p.useRef(),{left:n,top:s,width:o,height:h,id:a,position:d}=e;p.useEffect(()=>{e.domNode=i.current},[]);const l=((c=e.store)==null?void 0:c.actions)===void 0?B:Array.isArray(e.store.actions)?e.store.actions:[];return p.createElement("bw-pane",{"sash-id":a,position:d,style:{left:n,top:s,width:o,height:h},"can-drop":((u=e.store)==null?void 0:u.droppable)===!1?"false":"true",ref:i},p.createElement("bw-glass",null,p.createElement("bw-glass-header",{"can-drag":((g=e.store)==null?void 0:g.draggable)===!1?"false":"true"},((w=e.store)==null?void 0:w.title)&&p.createElement("bw-glass-title",null,e.store.title),l.length>0&&p.createElement("bw-glass-action-container",null,l.map((x,At)=>{const Mt=x.className?`bw-glass-action ${x.className}`:"bw-glass-action";return p.createElement("button",{className:Mt,key:At,onClick:Pt=>x.onClick(Pt,t)},x.label)}))),p.createElement("bw-glass-content",null,(m=e.store)==null?void 0:m.content)))}function St(e){const t=p.useRef(),i=p.useRef(),{panes:n,...s}=e,o={...s,children:n},h=new O(o),a=[],d=[];return h.rootSash.walk(l=>{l.children.length>0?a.push(l):d.push(l)}),p.useEffect(()=>{const l=t.current;l!=null&&l.parentElement&&(h.windowElement=l,h.containerElement=l.parentElement,h.sillElement=i.current,h.enableFeatures())},[]),p.createElement("bw-window",{"sash-id":h.rootSash.id,style:{width:h.rootSash.width,height:h.rootSash.height},ref:t},d.map(l=>p.createElement(Ct,{key:l.id,sash:l,bwin:h})),a.map(l=>p.createElement(zt,{key:l.id,sash:l})),p.createElement("bw-sill",{ref:i}))}y.BUILTIN_ACTIONS=B,y.Window=St,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "react-bwin",
 	"description": "A tiling window manager in React based on Binary Window library",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"type": "module",
 	"repository": {
 		"type": "git",