bwin 0.2.0 → 0.2.2

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

@@ -21,15 +21,15 @@ function z(e = 2, t = 3) {
   }
   return s;
 }
-function E(e, t) {
+function b(e, t) {
   for (; t.firstChild; )
     e.append(t.firstChild);
 }
 function H(e, t) {
   const i = document.createElement("div");
-  E(i, e), E(e, t), E(t, i);
+  b(i, e), b(e, t), b(t, i);
 }
-function y(e) {
+function C(e) {
   if (typeof e == "number" && !isNaN(e))
     return e;
   if (typeof e == "string") {
@@ -65,7 +65,7 @@ function G(e) {
   const t = document.createElement("template");
   return t.innerHTML = e.trim(), t.content;
 }
-function C(e) {
+function m(e) {
   if (e == null || e === "")
     return null;
   if (typeof e == "string")
@@ -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 a = 0.3, d = _({ width: s, height: o, x: h }), c = 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 > d && l < c ? r.Left : h > s * (0.5 + a / 2) && l < d && l > c ? 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 q = 100, j = 100, w = {
   left: 0,
@@ -143,12 +143,12 @@ class p {
     minHeight: h = w.minHeight,
     domNode: l = null,
     store: a = {},
-    position: c,
-    id: d
+    position: d,
+    id: c
   } = w) {
-    if (this.id = d ?? z(), !c)
+    if (this.id = c ?? z(), !d)
       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 = d, 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;
   }
   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 m = h.calcMinWidth(), b = s.calcMinWidth();
-      d < m && g > b ? (d = m, g = c - d, u = h.left + d) : g < b && d > m && (g = b, d = c - g, u = h.left + d), h.width = d, s.width = g, s.left = u;
+      const l = h.width + s.width, a = i * (h.width / l), d = l + i;
+      let c = h.width + a, g = d - c, u = s.left + a;
+      const E = h.calcMinWidth(), y = s.calcMinWidth();
+      i < 0 && (c < E && g > y ? (c = h.width, g = d - c, u = h.left + c) : g < y && c > E && (g = s.width, c = d - g, u = h.left + c)), h.width = c, s.width = g, s.left = u;
     }
     n && o && (n.width += i, o.width += i);
   }
@@ -297,10 +297,13 @@ 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 m = n.calcMinHeight(), b = o.calcMinHeight();
-      d < m && g > b ? (d = m, g = c - d, u = n.top + d) : g < b && d > m && (g = b, d = c - g, u = n.top + d), n.height = d, o.height = g, o.top = u;
+      const l = n.height + o.height, a = i * (n.height / l), d = l + i;
+      let c = n.height + a, g = d - c, u = o.top + a;
+      if (i < 0) {
+        const E = n.calcMinHeight(), y = o.calcMinHeight();
+        c < E && g > y ? (c = n.height, g = d - c, u = n.top + c) : g < y && c > E && (g = o.height, c = d - g, u = n.top + c);
+      }
+      n.height = c, o.height = g, o.top = u;
     }
     h && s && (h.height += i, s.height += i);
   }
@@ -319,13 +322,13 @@ class A {
     minHeight: h,
     position: l,
     size: a,
-    ...c
+    ...d
   }) {
     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(a), this.nonCoreData = d, this.setBounds();
   }
   getPosition(t) {
     if (!this.siblingConfigNode)
@@ -339,7 +342,7 @@ class A {
   }
   getSize(t) {
     if (!this.siblingConfigNode)
-      return y(t);
+      return C(t);
     if (!t) {
       if (this.siblingConfigNode.size < 1)
         return 1 - this.siblingConfigNode.size;
@@ -348,7 +351,7 @@ class A {
       if (this.siblingConfigNode.position === r.Top || this.siblingConfigNode.position === r.Bottom)
         return this.parentRect.height - this.siblingConfigNode.height;
     }
-    const i = y(t);
+    const i = C(t);
     if (i < 1) {
       if (i + this.siblingConfigNode.size !== 1)
         throw new Error("[bwin] Sum of sibling sizes is not equal to 1");
@@ -398,7 +401,7 @@ class A {
         children: t
       };
     if (typeof t == "string" || typeof t == "number") {
-      const i = y(t);
+      const i = C(t);
       if (isNaN(i))
         throw new Error(`[bwin] Invalid size value: ${i}`);
       return {
@@ -492,7 +495,7 @@ function J(e) {
   return t.style.top = `${e.top}px`, t.style.left = `${e.left}px`, t.style.width = `${e.width}px`, t.style.height = `${e.height}px`, t.setAttribute("position", e.position), t;
 }
 function Q(e, { size: t }) {
-  const i = y(t);
+  const i = C(t);
   let n = e.width / 2;
   i && (i < 1 ? n = e.width * i : n = i);
   const s = new p({
@@ -508,10 +511,10 @@ function Q(e, { size: t }) {
     height: e.height,
     position: r.Right
   }), h = M(o);
-  return o.domNode = h, E(h, e.domNode), e.addChild(s), e.addChild(o), s;
+  return o.domNode = h, b(h, e.domNode), e.addChild(s), e.addChild(o), s;
 }
 function Z(e, { size: t }) {
-  const i = y(t);
+  const i = C(t);
   let n = e.width / 2;
   i && (i < 1 ? n = e.width * i : n = i);
   const s = new p({
@@ -527,10 +530,10 @@ function Z(e, { size: t }) {
     height: e.height,
     position: r.Right
   }), h = M(s);
-  return s.domNode = h, E(h, e.domNode), e.addChild(s), e.addChild(o), o;
+  return s.domNode = h, b(h, e.domNode), e.addChild(s), e.addChild(o), o;
 }
 function tt(e, { size: t }) {
-  const i = y(t);
+  const i = C(t);
   let n = e.height / 2;
   i && (i < 1 ? n = e.height * i : n = i);
   const s = new p({
@@ -546,10 +549,10 @@ function tt(e, { size: t }) {
     height: e.height - n,
     position: r.Bottom
   }), h = M(o);
-  return o.domNode = h, E(h, e.domNode), e.addChild(s), e.addChild(o), s;
+  return o.domNode = h, b(h, e.domNode), e.addChild(s), e.addChild(o), s;
 }
 function et(e, { size: t }) {
-  const i = y(t);
+  const i = C(t);
   let n = e.height / 2;
   i && (i < 1 ? n = e.height * i : n = i);
   const s = new p({
@@ -565,7 +568,7 @@ function et(e, { size: t }) {
     height: n,
     position: r.Bottom
   }), h = M(s);
-  return s.domNode = h, E(h, e.domNode), e.addChild(s), e.addChild(o), o;
+  return s.domNode = h, b(h, e.domNode), e.addChild(s), e.addChild(o), o;
 }
 function it(e, { position: t, size: i, minWidth: n, minHeight: s }) {
   if (t === r.Left)
@@ -584,7 +587,7 @@ const nt = {
   },
   // Intended to be overridden
   onPaneCreate(e, t) {
-    t.store.content && e.append(C(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(v(e)));
   },
   updatePane(e) {
     return J(e);
@@ -699,15 +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 (a <= s.calcMinWidth() || c <= i.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, a = s.width + l, d = i.width - l;
+        if (l > 0 && d <= i.calcMinWidth() || l < 0 && a <= s.calcMinWidth()) return;
+        s.width = a, i.width = d, 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 (a <= t.calcMinHeight() || c <= n.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, a = t.height + l, d = n.height - l;
+        if (l > 0 && d <= n.calcMinHeight() || l < 0 && a <= t.calcMinHeight()) return;
+        t.height = a, n.height = d, n.top = n.top + l, this.update(), this.lastY = e.pageY;
       }
     }), document.addEventListener("mouseup", () => {
       this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
@@ -787,7 +788,7 @@ const dt = {
   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" />');
+    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);
@@ -804,12 +805,12 @@ 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), a = Math.min(i, s), d = Math.min(n, o);
   return {
     left: h,
     top: l,
     width: a - h,
-    height: c - l
+    height: d - l
   };
 }
 const ft = [ct, gt, dt], pt = {
@@ -826,17 +827,17 @@ const ft = [ct, gt, dt], pt = {
         l > i && (i = l, n = s);
       }
     }), n) {
-      const s = e.bwOriginalPosition, o = P(n);
-      let h = 0;
+      const s = e.bwOriginalPosition, o = P(n), h = n.getAttribute("sash-id"), l = this.rootSash.getById(h);
+      let a = 0;
       if (s === r.Left || s === r.Right)
-        h = t.width >= o.width ? o.width / 2 : t.width;
+        a = 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;
+        a = 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: a
       }).domNode.append(e.bwGlassElement);
     }
   },
@@ -894,16 +895,16 @@ class x {
       t.append(this.createTabs());
     else if (this.title) {
       const s = document.createElement("bw-glass-title");
-      s.append(C(this.title)), t.append(s);
+      s.append(m(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);
+    const i = document.createElement("bw-glass-content"), n = m(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>`);
+      const n = (i == null ? void 0 : i.label) ?? i, s = m(`<button class="bw-glass-tab">${n}</button>`);
       t.append(s);
     }
     return t;
@@ -911,7 +912,7 @@ class x {
   createActions() {
     const t = document.createElement("bw-glass-action-container"), i = this.actions === void 0 ? ft : 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>`);
+      const s = (n == null ? void 0 : n.label) ?? n, o = n.className ? `bw-glass-action ${n.className}` : "bw-glass-action", h = m(`<button class="${o}">${s}</button>`);
       typeof n.onClick == "function" && h.addEventListener("click", (l) => {
         n.onClick(l, this.binaryWindow);
       }), t.append(h);
@@ -979,7 +980,7 @@ class bt extends T {
   }
   frame() {
     super.frame(...arguments);
-    const i = C("<bw-sill />");
+    const i = m("<bw-sill />");
     this.windowElement.append(i), this.sillElement = i;
   }
   enableFeatures() {

package/package.json

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