@witchcraft/layout 0.3.1 → 0.4.0

package/dist/runtime/settings.js

@@ -1,6 +1,32 @@
+import { numberToScaledPercent } from "./helpers/numberToScaledPercent.js";
 export class Settings {
-  _scale = 3;
-  _maxInt = 100 * 10 ** 3;
+  initialized = false;
+  constructor() {
+    this.resetToDefaults();
+    this.initialized = true;
+  }
+  resetToDefaults() {
+    this.scale = 3;
+    this.snapPoint = 0.5;
+    this.minSize = 5;
+    this.collapseSizePx = 15;
+    this.maxPerpendicularLength = 20;
+    this.zoneSizes = { frameEdgePx: 40, windowEdgePx: 20 };
+    this._recalcAll();
+  }
+  _zoneSizes;
+  get zoneSizes() {
+    return this._zoneSizes;
+  }
+  set zoneSizes(v) {
+    if (typeof v === "number") {
+      this._zoneSizes = { frameEdgePx: v, windowEdgePx: v };
+    } else {
+      this._zoneSizes = { frameEdgePx: v.frameEdgePx, windowEdgePx: v.windowEdgePx };
+    }
+  }
+  _scale;
+  _maxInt;
   get scale() {
     return this._scale;
   }
@@ -12,8 +38,8 @@ export class Settings {
   get maxInt() {
     return this._maxInt;
   }
-  _snapPoint = { x: 0.5, y: 0.5 };
-  _snapPointScaled = { x: Math.round(0.5 * 10 ** 3), y: Math.round(0.5 * 10 ** 3) };
+  _snapPoint;
+  _snapPointScaled;
   get snapPoint() {
     return this._snapPoint;
   }
@@ -28,8 +54,8 @@ export class Settings {
   get snapPointScaled() {
     return this._snapPointScaled;
   }
-  _minSize = { width: 10 ** 3, height: 10 ** 3 };
-  _minSizeScaled = { width: 10 ** 3, height: 10 ** 3 };
+  _minSize;
+  _minSizeScaled;
   get minSize() {
     return this._minSize;
   }
@@ -44,24 +70,34 @@ export class Settings {
   get minSizeScaled() {
     return this._minSizeScaled;
   }
-  _collapseSize = { width: 0, height: 0 };
-  _collapseSizeScaled = { width: 0, height: 0 };
-  get collapseSize() {
-    return this._collapseSize;
+  _collapseSizePx;
+  get collapseSizePx() {
+    return this._collapseSizePx;
   }
-  set collapseSize(v) {
+  set collapseSizePx(v) {
     if (typeof v === "number") {
-      this._collapseSize = { width: v, height: v };
+      this._collapseSizePx = { width: v, height: v };
     } else {
-      this._collapseSize = { width: v.width, height: v.height };
+      this._collapseSizePx = { width: v.width, height: v.height };
     }
-    this._collapseSizeScaled = this._scaleSize(this._collapseSize);
-  }
-  get collapseSizeScaled() {
-    return this._collapseSizeScaled;
   }
-  _maxPerpendicularLength = { width: 20, height: 20 };
-  _maxPerpendicularLengthScaled = { width: Math.round(20 * 10 ** 3), height: Math.round(20 * 10 ** 3) };
+  getCollapseSizeScaled(win) {
+    const size = this.collapseSizePx;
+    return {
+      width: win.pxWidth === 0 ? 0 : numberToScaledPercent(
+        typeof size === "number" ? size : size.width,
+        win.pxWidth,
+        this.maxInt
+      ),
+      height: win.pxHeight === 0 ? 0 : numberToScaledPercent(
+        typeof size === "number" ? size : size.height,
+        win.pxHeight,
+        this.maxInt
+      )
+    };
+  }
+  _maxPerpendicularLength;
+  _maxPerpendicularLengthScaled;
   get maxPerpendicularLength() {
     return this._maxPerpendicularLength;
   }
@@ -85,12 +121,11 @@ export class Settings {
     return { width: Math.round(s.width * m), height: Math.round(s.height * m) };
   }
   _recalcAll() {
+    if (!this.initialized) return;
     this.snapPoint = this._snapPoint;
     this.minSize = this._minSize;
-    this.collapseSize = this._collapseSize;
+    this.collapseSizePx = this._collapseSizePx;
     this.maxPerpendicularLength = this._maxPerpendicularLength;
   }
-  // ==== px sized, don't require recalc
-  zoneSizes = { frameEdgePx: 40, windowEdgePx: 20 };
 }
 export const settings = new Settings();