@witchcraft/layout 0.1.3 → 0.2.0

package/src/runtime/layout/getFrameUncollapseInfo.ts

@@ -0,0 +1,160 @@
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
+import { walk } from "@alanscodelog/utils/walk"
+
+import { applyFrameChanges } from "./applyFrameChanges.js"
+import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
+
+import { oppositeSide } from "../helpers/oppositeSide.js"
+import { settings } from "../settings.js"
+import type { EdgeSide, LayoutChange, LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+/**
+ * Returns a {@link LayoutChange} with the information necessary to uncollapse a docked frame.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ *
+ * Uncollapsing restores the frame to its pre-collapse size, shrinking neighboring
+ * frames to make room.
+ */
+export function getFrameUncollapseInfo(
+	win: LayoutWindow,
+	frameId: string
+): LayoutChange
+	| KnownError<typeof LAYOUT_ERROR.CANT_UNCOLLAPSE_NOT_COLLAPSED>
+	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS>
+	| KnownError<typeof LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE> {
+	win = walk(win, undefined, { save: true })
+	const frame = win.frames[frameId]
+	if (!frame) { throw new Error(`Unknown frame ${frameId}`) }
+	if (!frame.docked) { throw new Error(`Frame ${frameId} is not docked.`) }
+	const toExtract = [frame.id]
+
+	const storedSize = frame.collapsed
+	if (storedSize === false || storedSize === undefined) {
+		return new KnownError(
+			LAYOUT_ERROR.CANT_UNCOLLAPSE_NOT_COLLAPSED,
+			`Frame ${frameId} is not collapsed.`,
+			{ frame }
+		)
+	}
+
+	const isVertical = frame.docked === "left" || frame.docked === "right"
+	const sizeKey = isVertical ? "width" : "height" as const
+	const posKey = isVertical ? "x" : "y"
+	const currentSize = frame[sizeKey]
+	const expandAmount = storedSize - currentSize
+
+	const dockedSide = frame.docked as EdgeSide
+
+	/**
+	 * Mirrors the framesToFix logic in getFrameCollapseInfo:
+	 *
+	 * The only difference being we can skip the fixes if the frame was fully collapsed to 0.
+	 *
+	 * Why is this? Well take this example where A is docked and collapsed and B is docked, in the following two cases we would have no problems expanding as B ends where A begins, but if B shares the edge and A is not fully collapsed it is no longer aligned with the "end" of A.
+	 *
+	 * Ok:
+	 * A - fully collapsed to 0
+	 * ~ ┌──────────┐
+	 * │ │B*        │
+	 * │ ├──────────┤
+	 * │ │          │
+	 * │ │          │
+	 * │ └──────────┘
+	 *
+	 * Ok:
+	 * A collapsed to non-zero size
+	 * Note B still shares A's right edge
+	 * ┌──┬─────────┐
+	 * │A~│B*       │
+	 * │  ├─────────┤
+	 * │  │         │
+	 * │  │         │
+	 * └──┴─────────┘
+	 *
+	 * Causes issues:
+	 * A collapsed to non-zero size with B docked first
+	 * B looses alignment with A causing issues when redistributing
+	 * ┌────────────┐
+	 * │B*          │
+	 * ├──┬─────────┤
+	 * │A~│         │
+	 * │  │         │
+	 * └──┴─────────┘
+	 */
+	const framesToFix: ({
+		id: string
+		posKey: "x" | "y"
+		sizeKey: "width" | "height"
+		type: "start" | "end"
+	})[] = []
+
+	const opposite = oppositeSide(dockedSide)
+	if (frame[sizeKey] !== 0) {
+		for (const other of Object.values(win.frames)) {
+			if (frame.id === other.id || !other.docked) continue
+			if (other.width === 0 || other.height === 0) continue
+
+			if (other.docked === opposite) continue
+			if (dockedSide === "left" || dockedSide === "top") {
+				if	(other[posKey] !== 0) continue
+				other[posKey] = frame[posKey] + frame[sizeKey]
+				other[sizeKey] -= frame[sizeKey] // this is collapsed size
+				framesToFix.push({
+					id: other.id,
+					posKey: posKey,
+					sizeKey: sizeKey,
+					type: "start"
+				})
+			} else {
+				if (other[posKey] + other[sizeKey] !== settings.maxInt) continue
+				other[sizeKey] -= frame[sizeKey]
+				framesToFix.push({
+					id: other.id,
+					posKey: posKey,
+					sizeKey: sizeKey,
+					type: "end"
+				})
+			}
+		}
+	}
+
+	// note fully collapsed frames without an area are already excluded by getFramesRedistributeInfo
+	const otherFrameIds = Object.keys(win.frames).filter(id => id !== frameId)
+
+	const redistributeSide = oppositeSide(frame.docked)
+
+	const changes = getFramesRedistributeInfo(win, redistributeSide, otherFrameIds, expandAmount)
+
+	if (changes instanceof KnownError) {
+		return changes
+	}
+
+	applyFrameChanges(win, changes)
+	pushIfNotIn(toExtract, changes.modified.map(_ => _.id))
+
+	for (const fix of framesToFix) {
+		const other = win.frames[fix.id]
+		if (fix.type === "start") {
+			const sizeDiff = other[fix.posKey]
+			other[fix.posKey] = 0
+			other[fix.sizeKey] += sizeDiff
+		} else {
+			const sizeDiff = settings.maxInt - (other[fix.posKey] + other[fix.sizeKey])
+			other[fix.sizeKey] += sizeDiff
+		}
+	}
+
+	pushIfNotIn(toExtract, framesToFix.map(_ => _.id))
+
+	frame[sizeKey] = storedSize
+	frame.collapsed = false
+
+	if (frame.docked === "right" || frame.docked === "bottom") {
+		frame[posKey] -= expandAmount
+	}
+
+	return { modified: toExtract.map(_ => win.frames[_]), created: [], deleted: [] }
+}

package/src/runtime/layout/getFrameUndockInfo.ts

@@ -0,0 +1,97 @@
+import { settings } from "../settings.js"
+import type { LayoutChange, LayoutFrame, LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+/**
+ * Returns a {@link LayoutChange} with the information necessary to undock a frame.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ *
+ * If a frame is not docked it will throw.
+ *
+ * If the frame was collapsed it will be uncollapsed.
+ */
+export function getFrameUndockInfo(
+	win: LayoutWindow,
+	frameId: string
+):
+	| LayoutChange
+	| KnownError<typeof LAYOUT_ERROR.CANT_UNDOCK_COLLAPSED_FRAME> {
+	const frame = win.frames[frameId]
+	if (!frame) { throw new Error(`Unknown frame ${frameId}`) }
+	if (!frame.docked) throw new Error("Can't undock frame that is not docked.")
+
+	const frameSide = frame.docked
+	const isVertical = frameSide === "left" || frameSide === "right"
+	const sizeKey = isVertical ? "height" : "width" as const
+	const posKey = isVertical ? "y" : "x" as const
+	const maxInt = settings.maxInt
+	const shrinkStartKey = isVertical ? "top" : "left" as const
+	const shrinkEndKey = isVertical ? "bottom" : "right" as const
+
+	if (frame.collapsed) {
+		return new KnownError(LAYOUT_ERROR.CANT_UNDOCK_COLLAPSED_FRAME, `Can't undock collapsed frame ${frame.id}.`, { frame: frame.id })
+	}
+	const frameClone: LayoutFrame = { ...frame, docked: false, collapsed: false }
+	const otherDockedFramesToResize = []
+	// if the frame is touching either corner, there could be other docked frames  that will need to get expanded like here, * means docked, and B and D would need expanding if we undock A.
+	/**
+	 * ┌─────┬──────┐
+	 * │A*   │B*    │
+	 * │     ├──────┤
+	 * │     │C     │
+	 * │     ├──────┤
+	 * │     │D*    │
+	 * └─────┴──────┘
+	 */
+	const dockedSidesToSearch = [
+		...frame[posKey] === 0 ? [shrinkStartKey] : [],
+		...(frame[posKey] + frame[sizeKey]) === maxInt ? [shrinkEndKey] : []
+	]
+
+	for (const other of Object.values(win.frames)) {
+		if (other.id !== frame.id && other.docked && dockedSidesToSearch.includes(other.docked)) {
+			otherDockedFramesToResize.push(other)
+		}
+	}
+
+	// if there aren't others we can undock
+	if (otherDockedFramesToResize.length === 0) {
+		return { modified: [frameClone], created: [], deleted: [] }
+	}
+
+	const adjustmentKey = frameSide === "left"
+		? "x"
+		: frameSide === "top"
+			? "y"
+			: frameSide === "right"
+				? "width"
+				: "height"
+
+	const secondaryAdjustmentKey = frameSide === "left"
+		? "width"
+		: frameSide === "top"
+			? "height"
+			: frameSide === "right"
+				? "x"
+				: "y"
+
+	const adjustmentValue = frameSide === "left" || frameSide === "top" ? 0 : maxInt
+	const otherChanges = otherDockedFramesToResize.map(other => {
+		// shrink the ends of the undocking frame
+		if (other.docked === shrinkStartKey) {
+			frameClone[posKey] += other[sizeKey]
+			frameClone[sizeKey] -= other[sizeKey]
+		} else if (other.docked === shrinkEndKey) {
+			frameClone[sizeKey] -= other[sizeKey]
+		}
+		return {
+			...other,
+			[adjustmentKey]: adjustmentValue,
+			[secondaryAdjustmentKey]: other[secondaryAdjustmentKey] + other[adjustmentKey]
+		}
+	})
+
+	return { modified: [frameClone, ...otherChanges], created: [], deleted: [] }
+}

package/src/runtime/layout/getFramesRedistributeInfo.ts

@@ -0,0 +1,98 @@
+import { settings } from "../settings.js"
+import type { EdgeSide, LayoutChange, LayoutFrame, LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+
+/**
+ * Returns a {@link LayoutChange} with the information necessary to redistribute frames to expand/shrink a certain amount towards the given side.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ *
+ * While it checks for bounds/space issues (unless allowOutOfBounds is true), it does not check that all the frames correctly share/fill the start/end edges.
+ *
+ * If you try to resize a layout like this to the right, you will get issues with frame edges not lining up as frame B would be resized less than A. If you had a frame at the empty space that you excluded, it's right edge would no longer align with B's.
+ *
+ * See {@link getFrameCollapseInfo} and {@link getFrameUncollapseInfo} for how to work around this (you must move frames like A to share the edge then move them back). Excluding them from the calcuation usually leads to subtler errors. Such as if there are frames after A and B to the right, excluding A would mean A's right edge would stop aligning with those other frames.
+ *
+ * ┌────────────┐
+ * │A           │
+ * └──┬─────────┤
+ *    │B        │
+ *    └─────────┘
+ *
+ * Also note that it automatically excludes all collapsed frames without an area (height or width === 0).
+ */
+export function getFramesRedistributeInfo(
+	win: LayoutWindow,
+	/** Side to expand/shrink to. */
+	side: EdgeSide,
+	frameIds: string[],
+	/** This can be negative to expand the frames instead (e.g. when collapsing a docked frame). */
+	amountScaled: number,
+	/** Allow the resize span to exceed window bounds. */
+	allowOutOfBounds = false
+): LayoutChange
+	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS>
+	| KnownError<typeof LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE> {
+	const isLeftOrTop = side === "left" || side === "top"
+	const isHorizontalSide = side === "left" || side === "right"
+	const posKey = isHorizontalSide ? "x" : "y" as const
+	const sizeKey = isHorizontalSide ? "width" : "height" as const
+
+	const frames = frameIds.map(id => win.frames[id])
+
+	const edgeSet = new Set<number>()
+	for (const frame of frames) {
+		edgeSet.add(frame[posKey])
+		edgeSet.add(frame[posKey] + frame[sizeKey])
+	}
+	const uniqueEdges = [...edgeSet].sort((a, b) => a - b)
+
+	const maxInt = settings.maxInt
+	const resizeSpan = uniqueEdges[uniqueEdges.length - 1] - uniqueEdges[0]
+	const newSpan = resizeSpan - amountScaled
+	if (!allowOutOfBounds && (newSpan > maxInt || newSpan < 0)) {
+		return new KnownError(LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS, `Not enough space to resize frames, needed ${newSpan} but min/max as 0/${maxInt}.`, { max: maxInt, min: 0, wanted: newSpan })
+	}
+
+	const anchorEdge = isLeftOrTop ? uniqueEdges[0] : uniqueEdges[uniqueEdges.length - 1]
+	const dirMultiplier = isLeftOrTop ? -1 : 1
+
+	const newEdges: number[] = []
+	for (let i = 0; i < uniqueEdges.length; i++) {
+		const edge = uniqueEdges[i]
+		const distFromAnchor = anchorEdge === uniqueEdges[0] ? edge - anchorEdge : anchorEdge - edge
+		const rawMovement = dirMultiplier * distFromAnchor / resizeSpan * amountScaled
+		const newEdge = edge + Math.trunc(rawMovement)
+		newEdges.push(newEdge)
+	}
+
+	// ensure the edge opposite the anchor lands exactly on the correct position
+	const oppositeEdgeIndex = isLeftOrTop ? uniqueEdges.length - 1 : 0
+	newEdges[oppositeEdgeIndex] = isLeftOrTop ? anchorEdge + newSpan : anchorEdge - newSpan
+
+
+	const minSize = settings.minSizeScaled[sizeKey]
+	const result: LayoutFrame[] = []
+	for (const frame of frames) {
+		if (frame.collapsed && (frame.width === 0 || frame.height === 0)) continue
+		const startEdge = frame[posKey]
+		const endEdge = frame[posKey] + frame[sizeKey]
+		const newStart = newEdges[uniqueEdges.indexOf(startEdge)]
+		const newEnd = newEdges[uniqueEdges.indexOf(endEdge)]
+		const newSize = newEnd - newStart
+
+		if (newSize < minSize) {
+			return new KnownError(LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE, `Redistribute would cause frame ${frame.id} to shrink to ${newSize} which is below minimum ${minSize}.`, { frameSizeNeeded: newSize, minFrameSize: minSize })
+		}
+
+		result.push({
+			...frame,
+			[posKey]: newStart,
+			[sizeKey]: newSize
+		})
+	}
+
+	return { modified: result, created: [], deleted: [] }
+}

package/src/runtime/layout/getWindowDragZones.ts

@@ -0,0 +1,59 @@
+import { numberToScaledPercent } from "../helpers/numberToScaledPercent.js"
+import { settings } from "../settings.js"
+import type { LayoutWindow, WindowEdgeZone } from "../types/index.js"
+
+/**
+ * Returns window edge drag zones (in scaled coordinates)
+ *
+ */
+export function getWindowDragZones(
+	win: LayoutWindow,
+	thresholdPx: number
+): WindowEdgeZone[] {
+	const thX = numberToScaledPercent (thresholdPx, win.pxWidth)
+	const thY = numberToScaledPercent (thresholdPx, win.pxHeight)
+	const maxInt = settings.maxInt
+
+	return [
+		{
+			type: "window",
+			side: "top",
+			x: 0,
+			y: 0,
+			width: maxInt,
+			height: thY,
+			pxWidth: win.pxWidth,
+			pxHeight: thresholdPx
+		},
+		{
+			type: "window",
+			side: "bottom",
+			x: 0,
+			y: maxInt - thY,
+			width: maxInt,
+			height: thY,
+			pxWidth: win.pxWidth,
+			pxHeight: thresholdPx
+		},
+		{
+			type: "window",
+			side: "left",
+			x: 0,
+			y: 0,
+			width: thX,
+			height: maxInt,
+			pxWidth: thresholdPx,
+			pxHeight: win.pxHeight
+		},
+		{
+			type: "window",
+			side: "right",
+			x: maxInt - thX,
+			y: 0,
+			width: thX,
+			height: maxInt,
+			pxWidth: thresholdPx,
+			pxHeight: win.pxHeight
+		}
+	]
+}

package/src/runtime/layout/index.ts

@@ -1,19 +1,28 @@
 /* Autogenerated Index */
 
-export { closeFrame } from "./closeFrame.js"
-export { closeFrames } from "./closeFrames.js"
-export { createSplitDecoEdge } from "./createSplitDecoEdge.js"
+export { applyFrameChanges } from "./applyFrameChanges.js"
 export { createSplitDecoFromDrag } from "./createSplitDecoFromDrag.js"
+export { createSplitDecoShapes } from "./createSplitDecoShapes.js"
 export { debugFrame } from "./debugFrame.js"
 export { findFramesTouchingEdge } from "./findFramesTouchingEdge.js"
 export { findSafeSplitEdgeAndPosition } from "./findSafeSplitEdge.js"
 export { findVisualEdge } from "./findVisualEdge.js"
 export { frameCreate } from "./frameCreate.js"
-export { frameSplit } from "./frameSplit.js"
 export { getCloseFrameInfo } from "./getCloseFrameInfo.js"
+export { getDragZones } from "./getDragZones.js"
+export { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js"
+export { getFrameCollapseInfo } from "./getFrameCollapseInfo.js"
+export { getFrameDockInfo } from "./getFrameDockInfo.js"
+export { getFrameDragZones } from "./getFrameDragZones.js"
+export { getFrameRearrangeInfo } from "./getFrameRearrangeInfo.js"
 export { getFrameSplitInfo } from "./getFrameSplitInfo.js"
+export { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
+export { getFrameSwapInfo } from "./getFrameSwapInfo.js"
 export { getFrameTo } from "./getFrameTo.js"
-export { isPointInFrame } from "./isPointInFrame.js"
+export { getFrameUncollapseInfo } from "./getFrameUncollapseInfo.js"
+export { getFrameUndockInfo } from "./getFrameUndockInfo.js"
+export { getWindowDragZones } from "./getWindowDragZones.js"
+export { isPointInRect } from "./isPointInRect.js"
 export { layoutAddWindow } from "./layoutAddWindow.js"
 export { layoutCreate } from "./layoutCreate.js"
 export { layoutRemoveWindow } from "./layoutRemoveWindow.js"

package/src/runtime/layout/isPointInRect.ts

@@ -0,0 +1,7 @@
+import { inRange } from "../helpers/inRange.js"
+import type { Point } from "../types/index.js"
+
+export function isPointInRect(frame: { x: number, y: number, width: number, height: number }, point: Point): boolean {
+	return inRange(point.x, frame.x, frame.x + frame.width)
+		&& inRange(point.y, frame.y, frame.y + frame.height)
+}

package/src/runtime/layout/resizeFrame.ts

@@ -7,7 +7,7 @@ import { getResizeLimit } from "../helpers/getResizeLimit.js"
 import { getVisualEdges } from "../helpers/getVisualEdges.js"
 import { isWindowEdge } from "../helpers/isWindowEdge.js"
 import { resizeByEdge } from "../helpers/resizeByEdge.js"
-import { getMarginSize } from "../settings.js"
+import { settings } from "../settings.js"
 import type { Edge, ExtendedDirection, LayoutFrame, LayoutWindow, Size } from "../types/index.js"
 
 export function resizeFrame(
@@ -17,7 +17,7 @@ export function resizeFrame(
 	/** Scaled */
 	distance: Size,
 	/** Scaled */
-	minSize: Size = getMarginSize()
+	minSize: Size = settings.minSizeScaled
 ): boolean {
 	const originalDistance = distance
 	const frameEdges = frameToEdges(frame)

package/src/runtime/settings.ts

@@ -1,63 +1,83 @@
 import type { Point, Size } from "./types/index.js"
 
-const g = {
-	SCALE: 3,
-	maxInt: 100 * (10 ** 3),
-	SNAP_PERCENTAGE_X: 0.5,
-	SNAP_PERCENTAGE_Y: 0.5,
-	snapPoint: { x: Math.round(0.5 * (10 ** 3)), y: Math.round(0.5 * (10 ** 3)) },
-	MARGIN_PERCENTAGE_WIDTH: 10 ** 3,
-	MARGIN_PERCENTAGE_HEIGHT: 10 ** 3,
-	marginSize: { width: 10 ** 3, height: 10 ** 3 }
-}
-export const globalOptions = g
-// todo think of better way :/
+export class Settings {
+	private _scale = 3
+	private _maxInt = 100 * (10 ** 3)
+	get scale() { return this._scale }
+	set scale(v: number) {
+		this._scale = v
+		this._maxInt = 100 * (10 ** v)
+		this._recalcAll()
+	}
+
+	get maxInt() { return this._maxInt }
 
-export function setScale(scale: number): void {
-	const max = 100 * (10 ** scale)
-	if (!Number.isSafeInteger(max)) {
-		throw new TypeError("Scale too high. Precision will be lost!")
+
+	private _snapPoint = { x: 0.5, y: 0.5 }
+	private _snapPointScaled = { x: Math.round(0.5 * (10 ** 3)), y: Math.round(0.5 * (10 ** 3)) }
+
+	get snapPoint() { return this._snapPoint }
+	set snapPoint(v: number | Point) {
+		if (typeof v === "number") { this._snapPoint = { x: v, y: v } } else { this._snapPoint = { x: v.x, y: v.y } }
+		this._snapPointScaled = this._scalePoint(this._snapPoint)
 	}
-	g.SCALE = scale
-	g.maxInt = max
-}
 
-export function getMaxInt(): number {
-	return g.maxInt
-}
+	get snapPointScaled() { return this._snapPointScaled }
+
+
+	private _minSize = { width: 10 ** 3, height: 10 ** 3 }
+	private _minSizeScaled = { width: 10 ** 3, height: 10 ** 3 }
+
+	get minSize() { return this._minSize }
+	set minSize(v: number | Size) {
+		if (typeof v === "number") { this._minSize = { width: v, height: v } } else { this._minSize = { width: v.width, height: v.height } }
+		this._minSizeScaled = this._scaleSize(this._minSize)
+	}
+
+	get minSizeScaled() { return this._minSizeScaled }
 
-export function setSnapPercentage(snapPercentage: number | Point): void {
-	if (typeof snapPercentage === "number") {
-		g.SNAP_PERCENTAGE_X = snapPercentage
-		g.SNAP_PERCENTAGE_Y = snapPercentage
-	} else {
-		g.SNAP_PERCENTAGE_X = snapPercentage.x
-		g.SNAP_PERCENTAGE_Y = snapPercentage.y
+	private _collapseSize = { width: 0, height: 0 }
+	private _collapseSizeScaled = { width: 0, height: 0 }
+
+	get collapseSize() { return this._collapseSize }
+	set collapseSize(v: number | Size) {
+		if (typeof v === "number") { this._collapseSize = { width: v, height: v } } else { this._collapseSize = { width: v.width, height: v.height } }
+		this._collapseSizeScaled = this._scaleSize(this._collapseSize)
 	}
-	g.snapPoint = {
-		x: Math.round(g.SNAP_PERCENTAGE_X * (10 ** g.SCALE)),
-		y: Math.round(g.SNAP_PERCENTAGE_Y * (10 ** g.SCALE))
+
+	get collapseSizeScaled() { return this._collapseSizeScaled }
+
+	private _maxPerpendicularLength = { width: 20, height: 20 }
+	private _maxPerpendicularLengthScaled = { width: Math.round(20 * (10 ** 3)), height: Math.round(20 * (10 ** 3)) }
+
+	get maxPerpendicularLength() { return this._maxPerpendicularLength }
+	set maxPerpendicularLength(v: number | Size) {
+		if (typeof v === "number") { this._maxPerpendicularLength = { width: v, height: v } } else { this._maxPerpendicularLength = { ...v } }
+		this._maxPerpendicularLengthScaled = this._scaleSize(this._maxPerpendicularLength)
 	}
-}
 
-export function getSnapPoint(): Readonly<Point> {
-	return g.snapPoint
-}
+	get maxPerpendicularLengthScaled() { return this._maxPerpendicularLengthScaled }
 
-export function setMarginPercentage(margin: number | Size): void {
-	if (typeof margin === "number") {
-		g.MARGIN_PERCENTAGE_WIDTH = margin
-		g.MARGIN_PERCENTAGE_HEIGHT = margin
-	} else {
-		g.MARGIN_PERCENTAGE_WIDTH = margin.width
-		g.MARGIN_PERCENTAGE_HEIGHT = margin.height
+
+	private _scalePoint(p: Point): Point {
+		const m = 10 ** this._scale
+		return { x: Math.round(p.x * m), y: Math.round(p.y * m) }
 	}
-	g.marginSize = {
-		width: Math.round(g.MARGIN_PERCENTAGE_WIDTH * (10 ** g.SCALE)),
-		height: Math.round(g.MARGIN_PERCENTAGE_HEIGHT * (10 ** g.SCALE))
+
+	private _scaleSize(s: Size): Size {
+		const m = 10 ** this._scale
+		return { width: Math.round(s.width * m), height: Math.round(s.height * m) }
 	}
-}
 
-export function getMarginSize(): Readonly<Size> {
-	return g.marginSize
+	private _recalcAll() {
+		this.snapPoint = this._snapPoint
+		this.minSize = this._minSize
+		this.collapseSize = this._collapseSize
+		this.maxPerpendicularLength = this._maxPerpendicularLength
+	}
+
+	// ==== px sized, don't require recalc
+	zoneSizes = { frameEdgePx: 40, windowEdgePx: 20 }
 }
+
+export const settings = new Settings()