bwin 0.2.6 → 0.2.8

package/dist/bwin.js

@@ -21,13 +21,13 @@ function C(i = 2, t = 3) {
   }
   return s;
 }
-function R(i, t) {
+function S(i, t) {
   for (; t.firstChild; )
     i.append(t.firstChild);
 }
 function W(i, t) {
   const e = document.createElement("div");
-  R(e, i), R(i, t), R(t, e);
+  S(e, i), S(i, t), S(t, e);
 }
 function b(i) {
   if (typeof i == "number" && !isNaN(i))
@@ -117,21 +117,23 @@ function k({ width: i, height: t, x: e }) {
 function U({ width: i, height: t, y: e }) {
   return i - i / t * e;
 }
-function Y(i, { clientX: t, clientY: e }) {
+function q(i, { clientX: t, clientY: e }) {
   const n = i.getBoundingClientRect(), { width: s, height: o } = n, h = t - n.left, l = e - n.top;
   if (h < 0 || h > s || l < 0 || l > o)
     return r.Outside;
-  const d = 0.3, a = F({ width: s, height: o, x: h }), c = k({ width: s, height: o, x: h }), p = _({ width: s, height: o, y: l }), u = U({ 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 d = 0.3, c = F({ width: s, height: o, x: h }), a = k({ width: s, height: o, x: h }), p = _({ width: s, height: o, y: l }), u = U({ width: s, height: o, y: l });
+  return h < s * (0.5 - d / 2) && l > c && l < a ? r.Left : h > s * (0.5 + d / 2) && l < c && l > a ? 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, X = 100, w = {
+const Y = 100, X = 100, w = {
   left: 0,
   top: 0,
   width: 150,
   height: 150,
   // Initial min values, real min width/height is calculated based on children
-  minWidth: q,
-  minHeight: X
+  minWidth: Y,
+  minHeight: X,
+  // `classic` | `natural`, `natural` means only one child is updating its size
+  resizeStrategy: "classic"
 };
 class g {
   constructor({
@@ -141,14 +143,16 @@ class g {
     height: s = w.height,
     minWidth: o = w.minWidth,
     minHeight: h = w.minHeight,
-    domNode: l = null,
-    store: d = {},
-    position: a,
-    id: c
+    resizeStrategy: l = w.resizeStrategy,
+    parent: d = null,
+    domNode: c = null,
+    store: a = {},
+    position: p,
+    id: u
   } = w) {
-    if (this.id = c ?? C(), !a)
+    if (this.id = u ?? C(), !p)
       throw new Error("[bwin] Sash position is required");
-    this.position = a, this.domNode = l, this._top = e, this._left = t, this._width = n, this._height = s, this.children = [], this.minWidth = o, this.minHeight = h, this.store = d;
+    this.position = p, this.domNode = c, this.parent = d, this._top = e, this._left = t, this._width = n, this._height = s, this.children = [], this.minWidth = o, this.minHeight = h, this.resizeStrategy = l, this.store = a;
   }
   walk(t) {
     this.children.forEach((e) => e.walk(t)), t(this);
@@ -289,10 +293,13 @@ class g {
     this._width = t;
     const [n, s, o, h] = this.getChildren();
     if (h && s) {
-      const l = h.width + s.width, d = e * (h.width / l), a = l + e;
-      let c = h.width + d, p = a - c, u = s.left + d;
-      const E = h.calcMinWidth(), y = s.calcMinWidth();
-      e < 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;
+      const l = h.width + s.width, d = e * (h.width / l), c = l + e;
+      let a, p, u;
+      if (this.resizeStrategy === "natural" && this.position === r.Left ? (a = h.width, p = s.width + e, u = s.left) : this.resizeStrategy === "natural" && this.position === r.Right ? (a = h.width + e, p = s.width, u = h.left + a) : (a = h.width + d, p = c - a, u = s.left + d), e < 0) {
+        const y = h.calcMinWidth(), E = s.calcMinWidth();
+        a < y && p > E ? (a = h.width, p = c - a, u = h.left + a) : p < E && a > y && (p = s.width, a = c - p, u = h.left + a);
+      }
+      h.width = a, s.width = p, s.left = u;
     }
     n && o && (n.width += e, o.width += e);
   }
@@ -304,13 +311,13 @@ class g {
     this._height = t;
     const [n, s, o, h] = this.getChildren();
     if (n && o) {
-      const l = n.height + o.height, d = e * (n.height / l), a = l + e;
-      let c = n.height + d, p = a - c, u = o.top + d;
-      if (e < 0) {
-        const E = n.calcMinHeight(), y = o.calcMinHeight();
-        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);
+      const l = n.height + o.height, d = e * (n.height / l), c = l + e;
+      let a, p, u;
+      if (this.resizeStrategy === "natural" && this.position === r.Top ? (a = n.height, p = o.height + e, u = o.top) : this.resizeStrategy === "natural" && this.position === r.Bottom ? (a = n.height + e, p = o.height, u = n.top + a) : (a = n.height + d, p = c - a, u = o.top + d), e < 0) {
+        const y = n.calcMinHeight(), E = o.calcMinHeight();
+        a < y && p > E ? (a = n.height, p = c - a, u = n.top + a) : p < E && a > y && (p = o.height, a = c - p, u = n.top + a);
       }
-      n.height = c, o.height = p, o.top = u;
+      n.height = a, o.height = p, o.top = u;
     }
     h && s && (h.height += e, s.height += e);
   }
@@ -319,7 +326,7 @@ const v = {
   size: "50%",
   position: r.Left
 };
-class A {
+class z {
   constructor({
     parentRect: t,
     children: e,
@@ -329,13 +336,14 @@ class A {
     minHeight: h,
     position: l,
     size: d,
+    resizeStrategy: c,
     ...a
   }) {
     f(this, "left");
     f(this, "top");
     f(this, "width");
     f(this, "height");
-    this.parentRect = t, this.children = e, 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();
+    this.parentRect = t, this.children = e, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(l), this.size = this.getSize(d), this.resizeStrategy = c, this.nonCoreData = a, this.setBounds();
   }
   getPosition(t) {
     if (!this.siblingConfigNode)
@@ -387,7 +395,7 @@ class A {
       this.left = this.parentRect.left, this.top = this.parentRect.top + this.parentRect.height - t, this.width = this.parentRect.width, this.height = t;
     }
   }
-  createSash() {
+  createSash({ resizeStrategy: t } = {}) {
     return new g({
       left: this.left,
       top: this.top,
@@ -397,6 +405,7 @@ class A {
       id: this.id,
       minWidth: this.minWidth,
       minHeight: this.minHeight,
+      resizeStrategy: t || this.resizeStrategy,
       store: this.nonCoreData
     });
   }
@@ -421,7 +430,7 @@ class A {
     }
   }
   createPrimaryConfigNode({ size: t, position: e, children: n, id: s, minWidth: o, minHeight: h, ...l }) {
-    return new A({
+    return new z({
       parentRect: this,
       size: t ?? v.size,
       position: e ?? v.position,
@@ -433,7 +442,7 @@ class A {
     });
   }
   createSecondaryConfigNode({ size: t, position: e, children: n, id: s, minWidth: o, minHeight: h, ...l }, d) {
-    return new A({
+    return new z({
       parentRect: this,
       size: t,
       position: e,
@@ -445,37 +454,41 @@ class A {
       ...l
     });
   }
-  buildSashTree() {
-    const t = this.createSash();
+  buildSashTree({ resizeStrategy: t } = {}) {
+    const e = this.createSash({ resizeStrategy: t });
     if (!Array.isArray(this.children) || this.children.length === 0)
-      return t;
-    const e = this.normConfig(this.children[0]), n = this.normConfig(this.children.at(1));
-    let s, o;
-    return !e.size && !e.position && n ? (n.position || (n.position = r.Right), s = this.createPrimaryConfigNode(n), o = this.createSecondaryConfigNode(
-      e,
-      s
-    )) : (s = this.createPrimaryConfigNode(e), o = this.createSecondaryConfigNode(
+      return e;
+    const n = this.normConfig(this.children[0]), s = this.normConfig(this.children.at(1));
+    let o, h;
+    if (!n.size && !n.position && s ? (s.position || (s.position = r.Right), o = this.createPrimaryConfigNode(s), h = this.createSecondaryConfigNode(
       n,
-      s
-    )), s && o && (t.children.push(s.buildSashTree()), t.children.push(o.buildSashTree())), t;
+      o
+    )) : (o = this.createPrimaryConfigNode(n), h = this.createSecondaryConfigNode(
+      s,
+      o
+    )), o && h) {
+      const l = o.buildSashTree({ resizeStrategy: t }), d = h.buildSashTree({ resizeStrategy: t });
+      l.parent = e, d.parent = e, e.children.push(l), e.children.push(d);
+    }
+    return e;
   }
 }
-const S = {
+const R = {
   width: 333,
   height: 333
 }, D = {
   fitContainer: !1
 };
-class j extends A {
+class j extends z {
   constructor({
     id: t,
     children: e,
-    width: n = S.width,
-    height: s = S.height,
+    width: n = R.width,
+    height: s = R.height,
     fitContainer: o = D.fitContainer,
     ...h
   } = {
-    ...S,
+    ...R,
     ...D
   }) {
     super({
@@ -599,7 +612,7 @@ function et(i, { position: t, size: e, id: n, minWidth: s, minHeight: o }) {
   if (t === r.Bottom)
     return it(i, { size: e, id: n });
 }
-function z(i) {
+function A(i) {
   if (i.tagName === "BW-PANE")
     return i.getAttribute("sash-id");
   const t = i.closest("bw-pane");
@@ -649,7 +662,7 @@ const nt = {
     e.children.length === 0 ? (t.id = e.id, t.domNode = e.domNode, t.domNode.setAttribute("sash-id", e.id), t.children = []) : (t.id = C(), t.children = e.children, e.position === r.Left ? e.width = t.width : e.position === r.Right ? (e.width = t.width, e.left = t.left) : e.position === r.Top ? e.height = t.height : e.position === r.Bottom && (e.height = t.height, e.top = t.top)), this.update();
   },
   swapPanes(i, t) {
-    const e = z(i), n = z(t), s = i.getAttribute("can-drop") !== "false", o = t.getAttribute("can-drop") !== "false";
+    const e = A(i), n = A(t), s = i.getAttribute("can-drop") !== "false", o = t.getAttribute("can-drop") !== "false";
     this.rootSash.swapIds(e, n), W(i, this.activeDropPaneEl), i.setAttribute("sash-id", n), t.setAttribute("sash-id", e), i.setAttribute("can-drop", o), t.setAttribute("can-drop", s);
   }
 };
@@ -708,8 +721,10 @@ const st = {
   },
   enableFitContainer() {
     new ResizeObserver((t) => {
-      for (const e of t)
-        e.target === this.containerElement && this.fitContainer && this.fit();
+      requestAnimationFrame(() => {
+        for (const e of t)
+          e.target === this.containerElement && this.fitContainer && this.fit();
+      });
     }).observe(this.containerElement);
   }
 }, rt = {
@@ -733,13 +748,13 @@ const st = {
       if (!this.isResizeStarted || !this.activeMuntinSash) return;
       const [t, e, n, s] = this.activeMuntinSash.getChildren(), o = this.activeMuntinSash.isLeftRightSplit(), h = this.activeMuntinSash.isTopBottomSplit();
       if (o && s && e) {
-        const l = i.pageX - this.lastX, d = s.width + l, a = e.width - l;
-        if (l > 0 && a <= e.calcMinWidth() || l < 0 && d <= s.calcMinWidth()) return;
-        s.width = d, e.width = a, e.left = e.left + l, this.update(), this.lastX = i.pageX;
+        const l = i.pageX - this.lastX, d = s.width + l, c = e.width - l;
+        if (l > 0 && c <= e.calcMinWidth() || l < 0 && d <= s.calcMinWidth()) return;
+        s.width = d, e.width = c, e.left = e.left + l, this.update(), this.lastX = i.pageX;
       } else if (h && t && n) {
-        const l = i.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 = i.pageY;
+        const l = i.pageY - this.lastY, d = t.height + l, c = n.height - l;
+        if (l > 0 && c <= n.calcMinHeight() || l < 0 && d <= t.calcMinHeight()) return;
+        t.height = d, n.height = c, n.top = n.top + l, this.update(), this.lastY = i.pageY;
       }
     }), document.addEventListener("mouseup", () => {
       this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
@@ -755,7 +770,7 @@ const st = {
       i.preventDefault();
       const t = i.target.matches("bw-pane") ? i.target : i.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 e = Y(t, i);
+      const e = q(t, i);
       t.setAttribute("drop-area", e);
     }), this.windowElement.addEventListener("dragleave", (i) => {
       i.currentTarget.contains(i.relatedTarget) && i.currentTarget !== i.relatedTarget || this.activeDropPaneEl && (this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null);
@@ -772,7 +787,7 @@ class B {
     f(this, "containerElement", null);
     f(this, "debug", dt);
     let e = null;
-    t instanceof K ? (e = t, this.rootSash = t) : (e = new j(t), this.rootSash = e.buildSashTree()), this.fitContainer = e.fitContainer;
+    t instanceof K ? (e = t, this.rootSash = t) : (e = new j(t), this.rootSash = e.buildSashTree({ resizeStrategy: e.resizeStrategy })), this.fitContainer = e.fitContainer;
   }
   frame(t) {
     this.containerElement = t, this.windowElement = this.createWindow(), this.glaze(), this.containerElement.append(this.windowElement);
@@ -802,7 +817,7 @@ const at = {
   label: "",
   className: "bw-glass-action--close",
   onClick: (i, t) => {
-    const e = z(i.target);
+    const e = A(i.target);
     t.removePane(e);
   }
 }, ct = {
@@ -828,12 +843,12 @@ function ut(i, t) {
   const e = i.left + i.width, n = i.top + i.height, s = t.left + t.width, o = t.top + t.height;
   if (i.left >= s || t.left >= e || i.top >= o || t.top >= n)
     return null;
-  const h = Math.max(i.left, t.left), l = Math.max(i.top, t.top), d = Math.min(e, s), a = Math.min(n, o);
+  const h = Math.max(i.left, t.left), l = Math.max(i.top, t.top), d = Math.min(e, s), c = Math.min(n, o);
   return {
     left: h,
     top: l,
     width: d - h,
-    height: a - l
+    height: c - l
   };
 }
 const ft = [ct, pt, at], gt = {
@@ -858,9 +873,9 @@ const ft = [ct, pt, at], gt = {
         d = o.height - t.height < l.minHeight ? o.height / 2 : t.height;
       else
         throw new Error("[bwin] Invalid position when restoring glass");
-      const a = i.bwOriginalSashId;
+      const c = i.bwOriginalSashId;
       this.addPane(n.getAttribute("sash-id"), {
-        id: a,
+        id: c,
         position: s,
         size: d
       }).domNode.append(i.bwGlassElement);
@@ -966,7 +981,7 @@ const wt = {
       this.swapPanes(n, this.activeDropPaneEl);
       return;
     } else {
-      const n = z(this.activeDragGlassEl);
+      const n = A(this.activeDragGlassEl);
       this.removePane(n), this.addPane(t.id, { position: e, id: n }).domNode.append(this.activeDragGlassEl);
     }
   },
@@ -1029,8 +1044,8 @@ class bt extends B {
    * @returns {Sash} - The newly created Sash
    */
   addPane(e, n) {
-    const { position: s, size: o, id: h, ...l } = n, d = super.addPane(e, { position: s, size: o, id: h }), a = new T({ ...l, sash: d, binaryWindow: this });
-    return d.domNode.append(a.domNode), d;
+    const { position: s, size: o, id: h, ...l } = n, d = super.addPane(e, { position: s, size: o, id: h }), c = new T({ ...l, sash: d, binaryWindow: this });
+    return d.domNode.append(c.domNode), d;
   }
   removePane(e) {
     if (this.windowElement.querySelector(`[sash-id="${e}"]`)) {

package/package.json

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