bwin 0.2.1 → 0.2.3

package/README.md

@@ -1,5 +1,5 @@
 # Binary Window
 
-A tiling window manager for web browsers.
+A lightweight window-tiling JavaScript library for the browser, featuring resizable panes, drag-and-drop, and more.
 
-[Demo](https://bhjsdev.github.io/bwin/)
+[Documentation](https://bhjsdev.github.io/bwin-docs/)

package/dist/bwin.js

@@ -1,6 +1,6 @@
-var B = Object.defineProperty;
-var $ = (e, t, i) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
-var f = (e, t, i) => $(e, typeof t != "symbol" ? t + "" : t, i);
+var $ = Object.defineProperty;
+var P = (e, t, i) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var f = (e, t, i) => P(e, typeof t != "symbol" ? t + "" : t, i);
 function W(e = 0.7, t = 128) {
   const i = 256 - t, n = Math.floor(Math.random() * i + t), s = Math.floor(Math.random() * i + t), o = Math.floor(Math.random() * i + t), h = Math.max(0.5, Math.random() * e);
   return `rgba(${n}, ${s}, ${o}, ${h})`;
@@ -77,7 +77,7 @@ function m(e) {
     }
   return e instanceof Node ? e : document.createTextNode(String(e));
 }
-function P(e) {
+function A(e) {
   const t = parseFloat(e.style.left) || 0, i = parseFloat(e.style.top) || 0, n = parseFloat(e.style.width) || 0, s = parseFloat(e.style.height) || 0;
   return { left: t, top: i, width: n, height: s };
 }
@@ -121,8 +121,8 @@ function X(e, { clientX: t, clientY: i }) {
   const n = e.getBoundingClientRect(), { width: s, height: o } = n, h = t - n.left, l = i - n.top;
   if (h < 0 || h > s || l < 0 || l > o)
     return r.Outside;
-  const a = 0.3, c = _({ width: s, height: o, x: h }), d = U({ width: s, height: o, x: h }), g = k({ width: s, height: o, y: l }), u = Y({ width: s, height: o, y: l });
-  return h < s * (0.5 - a / 2) && l > c && l < d ? r.Left : h > s * (0.5 + a / 2) && l < c && l > d ? r.Right : l < o * (0.5 - a / 2) && h > g && h < u ? r.Top : l > o * (0.5 + a / 2) && h < g && h > u ? r.Bottom : h > s * (0.5 - a / 2) && h < s * (0.5 + a / 2) && l > o * (0.5 - a / 2) && l < o * (0.5 + a / 2) ? r.Center : r.Unknown;
+  const d = 0.3, a = _({ width: s, height: o, x: h }), c = U({ width: s, height: o, x: h }), p = k({ width: s, height: o, y: l }), u = Y({ width: s, height: o, y: l });
+  return h < s * (0.5 - d / 2) && l > a && l < c ? r.Left : h > s * (0.5 + d / 2) && l < a && l > c ? r.Right : l < o * (0.5 - d / 2) && h > p && h < u ? r.Top : l > o * (0.5 + d / 2) && h < p && h > u ? r.Bottom : h > s * (0.5 - d / 2) && h < s * (0.5 + d / 2) && l > o * (0.5 - d / 2) && l < o * (0.5 + d / 2) ? r.Center : r.Unknown;
 }
 const q = 100, j = 100, w = {
   left: 0,
@@ -133,7 +133,7 @@ const q = 100, j = 100, w = {
   minWidth: q,
   minHeight: j
 };
-class p {
+class g {
   constructor({
     left: t = w.left,
     top: i = w.top,
@@ -142,13 +142,13 @@ class p {
     minWidth: o = w.minWidth,
     minHeight: h = w.minHeight,
     domNode: l = null,
-    store: a = {},
-    position: c,
-    id: d
+    store: d = {},
+    position: a,
+    id: c
   } = w) {
-    if (this.id = d ?? z(), !c)
+    if (this.id = c ?? z(), !a)
       throw new Error("[bwin] Sash position is required");
-    this.position = c, this.domNode = l, this._top = i, this._left = t, this._width = n, this._height = s, this.children = [], this.minWidth = o, this.minHeight = h, this.store = a;
+    this.position = a, this.domNode = l, this._top = i, this._left = t, this._width = n, this._height = s, this.children = [], this.minWidth = o, this.minHeight = h, this.store = d;
   }
   walk(t) {
     this.children.forEach((i) => i.walk(t)), t(this);
@@ -282,10 +282,10 @@ class p {
     this._width = t;
     const [n, s, o, h] = this.getChildren();
     if (h && s) {
-      const l = h.width + s.width, a = i * (h.width / l), c = l + i;
-      let d = h.width + a, g = c - d, u = s.left + a;
+      const l = h.width + s.width, d = i * (h.width / l), a = l + i;
+      let c = h.width + d, p = a - c, u = s.left + d;
       const E = h.calcMinWidth(), y = s.calcMinWidth();
-      i < 0 && (d < E && g > y ? (d = h.width, g = c - d, u = h.left + d) : g < y && d > E && (g = s.width, d = c - g, u = h.left + d)), h.width = d, s.width = g, s.left = u;
+      i < 0 && (c < E && p > y ? (c = h.width, p = a - c, u = h.left + c) : p < y && c > E && (p = s.width, c = a - p, u = h.left + c)), h.width = c, s.width = p, s.left = u;
     }
     n && o && (n.width += i, o.width += i);
   }
@@ -297,22 +297,22 @@ class p {
     this._height = t;
     const [n, s, o, h] = this.getChildren();
     if (n && o) {
-      const l = n.height + o.height, a = i * (n.height / l), c = l + i;
-      let d = n.height + a, g = c - d, u = o.top + a;
+      const l = n.height + o.height, d = i * (n.height / l), a = l + i;
+      let c = n.height + d, p = a - c, u = o.top + d;
       if (i < 0) {
         const E = n.calcMinHeight(), y = o.calcMinHeight();
-        d < E && g > y ? (d = n.height, g = c - d, u = n.top + d) : g < y && d > E && (g = o.height, d = c - g, u = n.top + d);
+        c < E && p > y ? (c = n.height, p = a - c, u = n.top + c) : p < y && c > E && (p = o.height, c = a - p, u = n.top + c);
       }
-      n.height = d, o.height = g, o.top = u;
+      n.height = c, o.height = p, o.top = u;
     }
     h && s && (h.height += i, s.height += i);
   }
 }
-const S = {
+const v = {
   size: "50%",
   position: r.Left
 };
-class A {
+class R {
   constructor({
     parentRect: t,
     children: i,
@@ -321,14 +321,14 @@ class A {
     minWidth: o,
     minHeight: h,
     position: l,
-    size: a,
-    ...c
+    size: d,
+    ...a
   }) {
     f(this, "left");
     f(this, "top");
     f(this, "width");
     f(this, "height");
-    this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(l), this.size = this.getSize(a), this.nonCoreData = c, this.setBounds();
+    this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(l), this.size = this.getSize(d), this.nonCoreData = a, this.setBounds();
   }
   getPosition(t) {
     if (!this.siblingConfigNode)
@@ -381,7 +381,7 @@ class A {
     }
   }
   createSash() {
-    return new p({
+    return new g({
       left: this.left,
       top: this.top,
       width: this.width,
@@ -414,10 +414,10 @@ class A {
     }
   }
   createPrimaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...l }) {
-    return new A({
+    return new R({
       parentRect: this,
-      size: t ?? S.size,
-      position: i ?? S.position,
+      size: t ?? v.size,
+      position: i ?? v.position,
       children: n,
       id: s,
       minWidth: o,
@@ -425,13 +425,13 @@ class A {
       ...l
     });
   }
-  createSecondaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...l }, a) {
-    return new A({
+  createSecondaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...l }, d) {
+    return new R({
       parentRect: this,
       size: t,
       position: i,
       children: n,
-      siblingConfigNode: a,
+      siblingConfigNode: d,
       id: s,
       minWidth: o,
       minHeight: h,
@@ -453,22 +453,22 @@ class A {
     )), s && o && (t.children.push(s.buildSashTree()), t.children.push(o.buildSashTree())), t;
   }
 }
-const R = {
+const S = {
   width: 333,
   height: 333
 }, D = {
   fitContainer: !1
 };
-class K extends A {
+class K extends R {
   constructor({
     id: t,
     children: i,
-    width: n = R.width,
-    height: s = R.height,
+    width: n = S.width,
+    height: s = S.height,
     fitContainer: o = D.fitContainer,
     ...h
   } = {
-    ...R,
+    ...S,
     ...D
   }) {
     super({
@@ -481,7 +481,7 @@ class K extends A {
     }), this.fitContainer = o;
   }
 }
-class V extends p {
+class V extends g {
   constructor(t = w) {
     super({ ...t, position: r.Root }), Object.assign(this, D);
   }
@@ -498,13 +498,13 @@ function Q(e, { size: t }) {
   const i = C(t);
   let n = e.width / 2;
   i && (i < 1 ? n = e.width * i : n = i);
-  const s = new p({
+  const s = new g({
     top: e.top,
     left: e.left,
     width: n,
     height: e.height,
     position: r.Left
-  }), o = new p({
+  }), o = new g({
     top: e.top,
     left: e.left + s.width,
     width: e.width - n,
@@ -517,13 +517,13 @@ function Z(e, { size: t }) {
   const i = C(t);
   let n = e.width / 2;
   i && (i < 1 ? n = e.width * i : n = i);
-  const s = new p({
+  const s = new g({
     left: e.left,
     top: e.top,
     width: e.width - n,
     height: e.height,
     position: r.Left
-  }), o = new p({
+  }), o = new g({
     left: e.left + s.width,
     top: e.top,
     width: n,
@@ -536,13 +536,13 @@ function tt(e, { size: t }) {
   const i = C(t);
   let n = e.height / 2;
   i && (i < 1 ? n = e.height * i : n = i);
-  const s = new p({
+  const s = new g({
     left: e.left,
     top: e.top,
     width: e.width,
     height: n,
     position: r.Top
-  }), o = new p({
+  }), o = new g({
     left: e.left,
     top: e.top + s.height,
     width: e.width,
@@ -555,13 +555,13 @@ function et(e, { size: t }) {
   const i = C(t);
   let n = e.height / 2;
   i && (i < 1 ? n = e.height * i : n = i);
-  const s = new p({
+  const s = new g({
     top: e.top,
     left: e.left,
     width: e.width,
     height: e.height - n,
     position: r.Top
-  }), o = new p({
+  }), o = new g({
     top: e.top + s.height,
     left: e.left,
     width: e.width,
@@ -587,14 +587,14 @@ const nt = {
   },
   // Intended to be overridden
   onPaneCreate(e, t) {
-    t.store.content && e.append(m(t.store.content)), this != null && this.debug && (e.style.backgroundColor = W(), e.innerHTML = "", e.append(v(e)));
+    t.store.content && e.append(m(t.store.content)), this != null && this.debug && (e.style.backgroundColor = W(), e.innerHTML = "", e.append(x(e)));
   },
   updatePane(e) {
     return J(e);
   },
   // Intended to be overridden
   onPaneUpdate(e, t) {
-    this != null && this.debug && (e.innerHTML = "", e.append(v(e)));
+    this != null && this.debug && (e.innerHTML = "", e.append(x(e)));
   },
   /**
    * Add a pane into the target pane. The two panes become next to each other
@@ -619,10 +619,10 @@ const nt = {
     const t = this.rootSash.getDescendantParentById(e);
     if (!t) throw new Error("[bwin] Parent sash not found when removing pane");
     const i = t.getChildSiblingById(e);
-    t.id = z(), i.children.length === 0 ? (t.domNode = i.domNode, t.domNode.setAttribute("sash-id", t.id), t.children = []) : (t.children = i.children, i.position === r.Left ? i.width = t.width : i.position === r.Right ? (i.width = t.width, i.left = t.left) : i.position === r.Top ? i.height = t.height : i.position === r.Bottom && (i.height = t.height, i.top = t.top)), this.update();
+    i.children.length === 0 ? (t.id = i.id, t.domNode = i.domNode, t.domNode.setAttribute("sash-id", i.id), t.children = []) : (t.id = z(), t.children = i.children, i.position === r.Left ? i.width = t.width : i.position === r.Right ? (i.width = t.width, i.left = t.left) : i.position === r.Top ? i.height = t.height : i.position === r.Bottom && (i.height = t.height, i.top = t.top)), this.update();
   }
 };
-function v(e) {
+function x(e) {
   const t = document.createElement("pre");
   t.style.fontSize = "10px";
   const i = `
@@ -702,13 +702,13 @@ const st = {
       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 l = e.pageX - this.lastX, a = s.width + l, c = i.width - l;
-        if (l > 0 && c <= i.calcMinWidth() || l < 0 && a <= s.calcMinWidth()) return;
-        s.width = a, i.width = c, i.left = i.left + l, this.update(), this.lastX = e.pageX;
+        const l = e.pageX - this.lastX, d = s.width + l, a = i.width - l;
+        if (l > 0 && a <= i.calcMinWidth() || l < 0 && d <= s.calcMinWidth()) return;
+        s.width = d, i.width = a, i.left = i.left + l, this.update(), this.lastX = e.pageX;
       } else if (h && t && n) {
-        const l = e.pageY - this.lastY, a = t.height + l, c = n.height - l;
-        if (l > 0 && c <= n.calcMinHeight() || l < 0 && a <= t.calcMinHeight()) return;
-        t.height = a, n.height = c, n.top = n.top + l, this.update(), this.lastY = e.pageY;
+        const l = e.pageY - this.lastY, d = t.height + l, a = n.height - l;
+        if (l > 0 && a <= n.calcMinHeight() || l < 0 && d <= t.calcMinHeight()) return;
+        t.height = d, n.height = a, n.top = n.top + l, this.update(), this.lastY = e.pageY;
       }
     }), document.addEventListener("mouseup", () => {
       this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
@@ -734,12 +734,12 @@ const st = {
       this.onPaneDrop(e, i), typeof i.store.onDrop == "function" && i.store.onDrop(e, i), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
     });
   }
-}, at = !1;
-class T {
+}, dt = !1;
+class L {
   constructor(t) {
     f(this, "windowElement", null);
     f(this, "containerElement", null);
-    f(this, "debug", at);
+    f(this, "debug", dt);
     let i = null;
     t instanceof V ? (i = t, this.rootSash = t) : (i = new K(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
   }
@@ -759,7 +759,7 @@ class T {
     });
   }
 }
-T.assemble(
+L.assemble(
   st,
   ot,
   nt,
@@ -767,7 +767,7 @@ T.assemble(
   lt,
   rt
 );
-function L(e) {
+function B(e) {
   if (e.tagName === "BW-PANE")
     return e.getAttribute("sash-id");
   const t = e.closest("bw-pane");
@@ -775,11 +775,11 @@ function L(e) {
     throw new Error("[bwin] Pane element not found");
   return t.getAttribute("sash-id");
 }
-const dt = {
+const at = {
   label: "",
   className: "bw-glass-action--close",
   onClick: (e, t) => {
-    const i = L(e.target);
+    const i = B(e.target);
     t.removePane(i);
   }
 }, ct = {
@@ -791,29 +791,29 @@ const dt = {
     const n = m('<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"), l = s.getAttribute("position");
-    n.bwGlassElement = o, n.bwOriginalPosition = l, n.bwOriginalBoundingRect = P(s), t.removePane(h);
+    n.bwGlassElement = o, n.bwOriginalPosition = l, n.bwOriginalBoundingRect = A(s), t.removePane(h);
   }
-}, gt = {
+}, pt = {
   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 = P(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
+    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 = A(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
   }
 };
 function ut(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), l = Math.max(e.top, t.top), a = Math.min(i, s), c = Math.min(n, o);
+  const h = Math.max(e.left, t.left), l = Math.max(e.top, t.top), d = Math.min(i, s), a = Math.min(n, o);
   return {
     left: h,
     top: l,
-    width: a - h,
-    height: c - l
+    width: d - h,
+    height: a - l
   };
 }
-const ft = [ct, gt, dt], pt = {
+const ft = [ct, pt, at], gt = {
   enableActions() {
     this.handleMinimizedGlassClick(), this.observeActionButtons();
   },
@@ -821,23 +821,23 @@ const ft = [ct, gt, dt], pt = {
     const t = e.bwOriginalBoundingRect;
     let i = 0, n = null;
     if (this.windowElement.querySelectorAll("bw-pane").forEach((s) => {
-      const o = P(s), h = ut(t, o);
+      const o = A(s), h = ut(t, o);
       if (h) {
         const l = h.width * h.height;
         l > i && (i = l, n = s);
       }
     }), n) {
-      const s = e.bwOriginalPosition, o = P(n);
-      let h = 0;
+      const s = e.bwOriginalPosition, o = A(n), h = n.getAttribute("sash-id"), l = this.rootSash.getById(h);
+      let d = 0;
       if (s === r.Left || s === r.Right)
-        h = t.width >= o.width ? o.width / 2 : t.width;
+        d = o.width - t.width < l.minWidth ? o.width / 2 : t.width;
       else if (s === r.Top || s === r.Bottom)
-        h = t.height >= o.height ? o.height / 2 : t.height;
+        d = o.height - t.height < l.minHeight ? 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
+        size: d
       }).domNode.append(e.bwGlassElement);
     }
   },
@@ -876,7 +876,7 @@ const ft = [ct, gt, dt], pt = {
   actions: void 0,
   draggable: !0
 };
-class x {
+class T {
   constructor({
     title: t = N.title,
     content: i = N.content,
@@ -937,7 +937,7 @@ const wt = {
       H(n, this.activeDropPaneEl), n.setAttribute("can-drop", s);
       return;
     } else {
-      const n = L(this.activeDragGlassEl);
+      const n = B(this.activeDragGlassEl);
       this.addPane(t.id, { position: i }).domNode.append(this.activeDragGlassEl), this.removePane(n);
     }
   },
@@ -973,7 +973,7 @@ const wt = {
     this.trimMuntin(e);
   }
 };
-class bt extends T {
+class bt extends L {
   constructor() {
     super(...arguments);
     f(this, "sillElement", null);
@@ -987,7 +987,7 @@ class bt extends T {
     super.enableFeatures(), this.enableDrag(), this.enableActions();
   }
   onPaneCreate(i, n) {
-    const s = new x({ ...n.store, sash: n, binaryWindow: this });
+    const s = new T({ ...n.store, sash: n, binaryWindow: this });
     i.innerHTML = "", i.append(s.domNode), this.debug && s.contentElement.prepend(`${n.id}`);
   }
   onPaneUpdate() {
@@ -1000,17 +1000,17 @@ class bt extends T {
    * @returns {Sash} - The newly created Sash
    */
   addPane(i, n) {
-    const { position: s, size: o, ...h } = n, l = super.addPane(i, { position: s, size: o }), a = new x({ ...h, sash: l, binaryWindow: this });
-    return l.domNode.append(a.domNode), l;
+    const { position: s, size: o, ...h } = n, l = super.addPane(i, { position: s, size: o }), d = new T({ ...h, sash: l, binaryWindow: this });
+    return l.domNode.append(d.domNode), l;
   }
 }
-bt.assemble(wt, mt, pt);
+bt.assemble(wt, mt, gt);
 export {
   ft as BUILTIN_ACTIONS,
   bt as BinaryWindow,
   K as ConfigRoot,
-  T as Frame,
+  L as Frame,
   r as Position,
-  p as Sash,
+  g as Sash,
   V as SashConfig
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "bwin",
   "description": "A tiling window manager for web browsers",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bhjsdev/bwin.git"