@witchcraft/layout 1.0.0

package/dist/runtime/demo/App.vue

@@ -0,0 +1,123 @@
+<template>
+<WRoot class="gap-2 p-2">
+	<DemoControls
+		:frames="frames"
+	/>
+	<LayoutWindow v-if="win"
+		class="
+			flex-1 w-full
+			border-1
+			border-neutral-300
+			dark:border-neutral-700
+			rounded-md
+			flex-1
+			self-stretch
+			[&_.frame]:flex
+			[&_.frame]:flex-col
+			[&_.frame]:outline-hidden
+			[&_.active-frame-edge]:rounded-md
+			[&_.active-frame-edge]:border-none
+			[&_.drag-edge:hover+.edge]:bg-accent-500/20
+			[&_.grabbed-edge]:bg-accent-500
+			[&.request-split_.grabbed-edge]:hidden
+			[&.request-split_.drag-edge]:hidden
+			[&_.deco-split-new-frame]:rounded-md
+			[&_.deco-close-frame]:rounded-md
+			[&_.deco-close-frame]:bg-orange-500/50
+		"
+		:usage-instructions="usageInstructions"
+		instructions-teleport-to="#status-bar"
+		:win="win"
+		@is-showing-drag="isShowingDrag = $event"
+		@drag-state="dragState = $event"
+		@resize="win.pxWidth = $event.width;
+  win.pxHeight = $event.height"
+	>
+		<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id">
+			<div
+				:data-is-active="win.activeFrame === f.id"
+				:class="twMerge(
+  `
+						border-2
+						border-neutral-500
+						h-full
+						rounded-md
+						overflow-auto
+					`,
+  win.activeFrame === f.id && `border-blue-500`
+)"
+				@click="win.activeFrame = f.id"
+			>
+				<!--
+					Avoid placing the padding on the first div in the frame.
+					Set it on the first child instead, so that the frame can shrink as small as possible.
+					Too big a border can also be a problem, but usually it's small enough that it's beneath the min frame width/height allowed.
+				-->
+				<div class="p-2"> {{ debugFrame(f) }} </div>
+			</div>
+		</template>
+	</LayoutWindow>
+</Wroot>
+</template>
+
+<script setup>
+import { keys } from "@alanscodelog/utils/keys";
+import WRoot from "@witchcraft/ui/components/LibRoot";
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import { computed, onBeforeMount, ref } from "vue";
+import DemoControls from "./DemoControls.vue";
+import { app } from "./sharedLayoutInstance.js";
+import LayoutWindow from "../components/LayoutWindow.vue";
+import { debugFrame } from "../layout/debugFrame.js";
+import {
+  frameCreate,
+  layoutAddWindow,
+  windowAddFrame,
+  windowCreate
+} from "../layout/index.js";
+import { getMaxInt } from "../settings.js";
+import {} from "../types/index.js";
+const winId = ref(void 0);
+const win = computed(() => winId.value !== void 0 ? app.layout.windows[winId.value] : void 0);
+const frames = computed(() => {
+  if (!win.value) return;
+  return Object.values(win.value.frames);
+});
+onBeforeMount(() => {
+  layoutInitialize(app.layout);
+  winId.value = keys(app.layout.windows)[0];
+});
+const isDragging = ref(false);
+function layoutInitialize(layout, { defaultPos, defaultSize } = {
+  defaultPos: { x: 0, y: 0 },
+  defaultSize: { width: 0, height: 0 }
+}) {
+  const w = layoutAddWindow(
+    layout,
+    windowCreate({
+      ...defaultPos,
+      ...defaultSize,
+      frames: {}
+    })
+  );
+  layout.activeWindow = w.id;
+  const max = getMaxInt();
+  const frame = windowAddFrame(w, frameCreate({
+    x: 0,
+    y: 0,
+    width: max,
+    height: max
+  }));
+  w.activeFrame = frame.id;
+}
+const isShowingDrag = ref(false);
+const dragState = ref(void 0);
+const usageInstructions = computed(() => ({
+  // names are arbitrary and don't mean anything, they just make things easier
+  // if a key is undefined, it's ignored
+  none: !dragState.value?.isDragging ? "Drag from an edge to create a new frame." : void 0,
+  split: dragState.value?.isDragging ? "Hold Alt to Split" : void 0,
+  close: dragState.value?.isDragging ? "Shift+Drag to Close" : void 0,
+  forceClose: dragState.value?.isDragging ? "Ctrl+Shift+Drag to Force Close" : void 0
+}));
+</script>

package/dist/runtime/demo/DemoControls.vue

@@ -0,0 +1,14 @@
+<template>
+<div class="border-2 border-neutral-500 p-2 rounded-md flex">
+	<div class="">Instruction/status bar:</div>
+	<div id="status-bar" class="px-2 flex-1 overflow-x-auto scrollbar-hidden"/>
+	<WDarkModeSwitcher :show-label="false"/>
+</div>
+</template>
+
+<script setup>
+import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher";
+defineProps({
+  frames: { type: Array, required: true }
+});
+</script>

package/dist/runtime/demo/README.md

@@ -0,0 +1 @@
+This is structured like this so we can check the demo is both buildable from nuxt and vite.

package/dist/runtime/demo/main.js

@@ -0,0 +1,4 @@
+import "./tailwind.css";
+import { createApp } from "vue";
+import App from "./App.vue";
+createApp(App).mount("#app");

package/dist/runtime/demo/sharedLayoutInstance.js

@@ -0,0 +1,5 @@
+import { reactive } from "vue";
+import { layoutCreate } from "../layout/layoutCreate.js";
+export const app = reactive({
+  layout: layoutCreate()
+});

package/dist/runtime/demo/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss" source("../");@import "../../../playground/.nuxt/witchcraft-ui.css";@import "../../../playground/.nuxt/witchcraft-layout.css";

package/dist/runtime/drag/CloseAction.js

@@ -0,0 +1,121 @@
+import { dirToOrientation } from "../helpers/dirToOrientation.js";
+import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
+import { oppositeSide } from "../helpers/oppositeSide.js";
+import { closeFrames } from "../layout/closeFrames.js";
+import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js";
+import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js";
+export class CloseAction {
+  name = "close";
+  state = {};
+  // this is initialized by this.reset()
+  handleEvent;
+  updateCloseDecos;
+  hooks;
+  constructor(handleEvent, updateCloseDecos, hooks = {}) {
+    this.handleEvent = handleEvent;
+    this.updateCloseDecos = updateCloseDecos;
+    this.hooks = hooks;
+    this.reset();
+  }
+  reset() {
+    this.state = {
+      allowed: false,
+      force: false,
+      res: void 0,
+      cacheKey: void 0
+    };
+    this.updateCloseDecos([]);
+  }
+  updateDecos(state) {
+    const {
+      isDragging
+    } = state;
+    if (isDragging && this.state.allowed && this.state.res) {
+      const { force } = this.state;
+      const decos = this.state.res.deletedFrames.map((_) => ({ id: _.id, type: "close", force }));
+      this.updateCloseDecos(decos);
+    } else {
+      this.updateCloseDecos([]);
+    }
+  }
+  canHandleRequest(e, state) {
+    const { draggingEdges } = state;
+    if (draggingEdges.length !== 1) return false;
+    const res = this.handleEvent(e, state);
+    if (res === "force") {
+      this.state.force = true;
+    } else {
+      this.state.force = false;
+    }
+    if (res) {
+      this.hooks.onStart?.(true);
+      return true;
+    }
+    this.reset();
+    return false;
+  }
+  onDragChange(_type, _e, state) {
+    const {
+      touchingFramesArrays,
+      dragDirections,
+      isDragging,
+      draggingEdges,
+      visualEdges,
+      frames,
+      isDraggingFromWindowEdge
+    } = state;
+    const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]));
+    let ok = false;
+    if (isDragging && draggingEdges.length === 1) {
+      const res = findFramesTouchingEdge(
+        draggingEdges[0],
+        touchingFramesArrays[0],
+        {
+          // referencePoint: dragPoint.value, // if force pick smallest frame?
+          searchDirections: [dragDirections[oppositeOrientation]]
+        }
+      );
+      if (res.length > 0) {
+        const orientation = dirToOrientation(dragDirections[oppositeOrientation]);
+        const sizeKey = orientation === "horizontal" ? "width" : "height";
+        const smallestFrameSize = Math.min(...res.map((_) => _.frame[sizeKey]));
+        const frame = res.find((_) => _.frame[sizeKey] === smallestFrameSize).frame;
+        const cacheKey = `${frame.id}-${dragDirections[oppositeOrientation]}`;
+        if (this.state.allowed) {
+          if (this.state.cacheKey === cacheKey) {
+            this.updateDecos(state);
+            return true;
+          }
+        }
+        const closeInfo = getCloseFrameInfo(Object.values(frames), visualEdges, frame, dragDirections[oppositeOrientation], "dir", this.state.force);
+        if (!(closeInfo instanceof Error)) {
+          this.state.allowed = true;
+          this.state.res = closeInfo;
+          this.state.cacheKey = cacheKey;
+          ok = true;
+        } else {
+          this.hooks.onError?.(closeInfo);
+        }
+      }
+    }
+    this.updateDecos(state);
+    if (!ok) {
+      this.state.allowed = false;
+    }
+    return !isDraggingFromWindowEdge;
+  }
+  onDragApply(state) {
+    if (this.state.res) {
+      const { deletedFrames, modifiedFrames } = this.state.res;
+      const win = state.win;
+      closeFrames(win, deletedFrames, modifiedFrames);
+      this.reset();
+      return true;
+    }
+    return false;
+  }
+  cancel() {
+    this.reset();
+    this.hooks.onCancel?.();
+  }
+}

package/dist/runtime/drag/DragActionHandler.js

@@ -0,0 +1,83 @@
+export class DragActionHandler {
+  activeAction;
+  actions;
+  eventCanceller = void 0;
+  boundCancel;
+  defaultOnDragChange;
+  hooks;
+  constructor(defaultOnDragChange, actions, hooks = {}) {
+    this.defaultOnDragChange = defaultOnDragChange;
+    this.hooks = hooks;
+    this.actions = {};
+    for (const action of actions) {
+      this.actions[action.name] = action;
+    }
+    this.boundCancel = this.cancel.bind(this);
+  }
+  eventHandler(e, state, forceRecalculateEdges) {
+    if (state.isDragging) {
+      e.preventDefault();
+    }
+    let cancelled = false;
+    this.hooks.onEvent?.(e, () => {
+      cancelled = true;
+      this.cancel();
+    });
+    if (cancelled) return;
+    let found = false;
+    const oldActiveAction = this.activeAction;
+    for (const action of Object.values(this.actions)) {
+      if (action.canHandleRequest(e, state, forceRecalculateEdges)) {
+        found = true;
+        this.activeAction = action.name;
+        break;
+      }
+    }
+    if (!found) {
+      this.activeAction = void 0;
+    }
+    if (oldActiveAction !== this.activeAction) {
+      if (oldActiveAction) {
+        this.actions[oldActiveAction].cancel();
+      }
+      this.hooks.onRequestChange?.(this.activeAction);
+    }
+    if (state.isDragging) {
+      forceRecalculateEdges();
+      this.hooks.onRecalculate?.();
+    }
+    return void 0;
+  }
+  onDragChange(type, e, state, forceRecalculateEdges, cancel) {
+    if (type === "start") {
+      this.eventCanceller = cancel;
+      state.isDragging = true;
+      this.eventHandler(e, state, forceRecalculateEdges);
+    }
+    if (type === "end") {
+      state.isDragging = false;
+      this.activeAction = void 0;
+    }
+    if (this.activeAction) {
+      return this.actions[this.activeAction].onDragChange(type, e, state, forceRecalculateEdges, this.boundCancel);
+    }
+    return this.defaultOnDragChange(type, e, state, forceRecalculateEdges, this.boundCancel);
+  }
+  onDragApply(state, forceRecalculateEdges) {
+    if (this.activeAction) {
+      const res = this.actions[this.activeAction].onDragApply(state, forceRecalculateEdges);
+      this.hooks.onEnd?.({ cancelled: false, applied: res });
+      return false;
+    }
+    this.hooks.onEnd?.({ cancelled: false, applied: false });
+    return true;
+  }
+  cancel() {
+    if (this.activeAction) {
+      this.actions[this.activeAction].cancel();
+    }
+    this.activeAction = void 0;
+    this.eventCanceller?.();
+    this.hooks.onEnd?.({ cancelled: true, applied: false });
+  }
+}

package/dist/runtime/drag/DragDirectionStore.js

@@ -0,0 +1,45 @@
+export class DragDirectionStore {
+  hooks;
+  constructor(hooks) {
+    this.hooks = hooks;
+  }
+  lastPoint;
+  dragDirection = {};
+  lesser = {
+    x: "left",
+    y: "up"
+  };
+  greater = {
+    x: "right",
+    y: "down"
+  };
+  reset() {
+    this.lastPoint = void 0;
+    this.dragDirection = {};
+  }
+  update(point) {
+    const newXDirection = this.getDragDirection("x", point);
+    const newYDirection = this.getDragDirection("y", point);
+    let changed = false;
+    if (newXDirection) {
+      this.dragDirection.horizontal = newXDirection;
+    }
+    if (newYDirection) {
+      this.dragDirection.vertical = newYDirection;
+    }
+    if (this.lastPoint?.x !== point.x || this.lastPoint?.y !== point.y) {
+      this.lastPoint = point;
+      changed = true;
+    }
+    if (!changed) return false;
+    this.hooks.onUpdate(this.dragDirection);
+    return true;
+  }
+  getDragDirection(coord, point) {
+    if (!this.lastPoint) return false;
+    const diff = point[coord] - this.lastPoint[coord];
+    if (diff > 0) return this.greater[coord];
+    if (diff < 0) return this.lesser[coord];
+    return false;
+  }
+}

package/dist/runtime/drag/SplitAction.js

@@ -0,0 +1,110 @@
+import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
+import { oppositeSide } from "../helpers/oppositeSide.js";
+import { createSplitDecoFromDrag } from "../layout/createSplitDecoFromDrag.js";
+import { frameSplit } from "../layout/frameSplit.js";
+import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
+export class SplitAction {
+  name = "split";
+  state = {};
+  // this is initialized by `this.reset()`
+  handleEvent;
+  updateSplitDecos;
+  hooks;
+  constructor(handleEvent, updateSplitDecos, hooks = {}) {
+    this.handleEvent = handleEvent;
+    this.updateSplitDecos = updateSplitDecos;
+    this.hooks = hooks;
+    this.reset();
+  }
+  reset() {
+    this.state = {
+      allowed: false,
+      res: void 0,
+      cacheKey: void 0
+    };
+    this.updateSplitDecos([]);
+  }
+  updateDecos(state) {
+    const {
+      win,
+      isDragging,
+      dragHoveredFrame,
+      dragDirections,
+      draggingEdges,
+      dragPoint
+    } = state;
+    if (isDragging && this.state.allowed && dragHoveredFrame && draggingEdges.length === 1) {
+      const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]));
+      const deco = createSplitDecoFromDrag(
+        win.frames,
+        dragHoveredFrame,
+        dragDirections[oppositeOrientation],
+        dragPoint
+      );
+      this.updateSplitDecos([deco]);
+    } else {
+      this.updateSplitDecos([]);
+    }
+  }
+  canHandleRequest(e, state) {
+    const { draggingEdges } = state;
+    if (draggingEdges.length !== 1) return false;
+    if (this.handleEvent(e, state)) {
+      this.hooks.onStart?.();
+      return true;
+    }
+    this.reset();
+    return false;
+  }
+  calculateSplitRequest(state) {
+    const {
+      dragHoveredFrame,
+      dragDirections,
+      draggingEdges,
+      dragPoint
+    } = state;
+    const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]));
+    const canSplit = getFrameSplitInfo(
+      dragHoveredFrame,
+      dragDirections[oppositeOrientation],
+      dragPoint
+    );
+    if (!(canSplit instanceof Error)) {
+      this.state.allowed = true;
+      this.state.res = canSplit;
+      this.state.cacheKey = dragHoveredFrame?.id;
+      return true;
+    } else {
+      this.hooks.onError?.(canSplit);
+      return false;
+    }
+  }
+  onDragChange(_type, _e, state) {
+    const { dragHoveredFrame } = state;
+    let ok = false;
+    if (dragHoveredFrame) {
+      if (this.state.cacheKey === dragHoveredFrame.id) {
+        this.updateDecos(state);
+        return true;
+      }
+      ok = this.calculateSplitRequest(state);
+    }
+    this.updateDecos(state);
+    if (!ok) {
+      this.state.allowed = false;
+    }
+    return true;
+  }
+  onDragApply(state) {
+    if (this.state.res) {
+      this.calculateSplitRequest(state);
+      frameSplit(state.win, this.state.res);
+    }
+    this.reset();
+    return true;
+  }
+  cancel() {
+    this.reset();
+    this.hooks.onCancel?.();
+  }
+}

package/dist/runtime/helpers/addPointsToIntersection.js

@@ -0,0 +1,7 @@
+export function addPointsToIntersection(intersections, points) {
+  for (const point of points) {
+    intersections[point.x] ??= {};
+    intersections[point.x][point.y] ??= 0;
+    intersections[point.x][point.y]++;
+  }
+}

package/dist/runtime/helpers/assertEdgeSorted.js

@@ -0,0 +1,7 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+export function assertEdgeSorted(edge) {
+  const dir = getEdgeOrientation(edge);
+  if (dir === "horizontal" && edge.startX > edge.endX || dir === "vertical" && edge.startY > edge.endY) {
+    throw new Error("Edge start/end is revered.");
+  }
+}

package/dist/runtime/helpers/assertItemIn.js

@@ -0,0 +1,8 @@
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function assertItemIn(entries, id) {
+  if (id === void 0 || entries[id] === void 0) {
+    const message = id === void 0 ? `Id cannot be undefined.` : `Could not find item by that id (${id}).`;
+    throw new KnownError(LAYOUT_ERROR.INVALID_ID, message, { id });
+  }
+}

package/dist/runtime/helpers/assertItemNotIn.js

@@ -0,0 +1,7 @@
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function assertItemNotIn(entries, id) {
+  if (id !== void 0 && entries[id] !== void 0) {
+    throw new KnownError(LAYOUT_ERROR.ID_ALREADY_EXISTS, `Item with id ${id} already exists`, { id });
+  }
+}

package/dist/runtime/helpers/assertLayoutHasActiveWindow.js

@@ -0,0 +1,7 @@
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function assertLayoutHasActiveWindow(layout) {
+  if (layout.activeWindow === void 0) {
+    throw new KnownError(LAYOUT_ERROR.NO_ACTIVE_WINDOW, "Layout has not active window.", {});
+  }
+}

package/dist/runtime/helpers/assertValidWinAndFrame.js

@@ -0,0 +1,5 @@
+import { assertValidWinAndFrameIds } from "./assertValidWinAndFrameIds.js";
+export function assertValidWinAndFrame(layout, win, frame) {
+  assertValidWinAndFrameIds(layout.windows, win?.id, frame?.id);
+  return { win, frame };
+}

package/dist/runtime/helpers/assertValidWinAndFrameIds.js

@@ -0,0 +1,6 @@
+import { assertItemIn } from "./assertItemIn.js";
+export function assertValidWinAndFrameIds(windows, winId, frameId) {
+  assertItemIn(windows, winId);
+  const win = windows[winId];
+  assertItemIn(win.frames, frameId);
+}

package/dist/runtime/helpers/assertWindowHasActiveFrame.js

@@ -0,0 +1,7 @@
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function assertWindowHasActiveFrame(win) {
+  if (win.activeFrame === void 0) {
+    throw new KnownError(LAYOUT_ERROR.NO_ACTIVE_WINDOW, "Layout has no active window.", {});
+  }
+}

package/dist/runtime/helpers/clampNumber.js

@@ -0,0 +1,3 @@
+export function clampNumber(num, lowerLimit, upperLimit) {
+  return num <= lowerLimit ? lowerLimit : num >= upperLimit ? upperLimit : num;
+}

package/dist/runtime/helpers/cloneFrame.js

@@ -0,0 +1,3 @@
+export function cloneFrame(frame) {
+  return { ...frame };
+}

package/dist/runtime/helpers/cloneFrames.js

@@ -0,0 +1,16 @@
+import { isArray } from "@alanscodelog/utils/isArray";
+import { cloneFrame } from "./cloneFrame.js";
+export function cloneFrames(frames) {
+  const framesIsArray = isArray(frames);
+  const clone = framesIsArray ? [] : {};
+  if (framesIsArray) {
+    for (const frame of frames) {
+      clone.push(cloneFrame(frame));
+    }
+  } else {
+    for (const id of Object.keys(frames)) {
+      clone[id] = cloneFrame(frames[id]);
+    }
+  }
+  return clone;
+}