@witchcraft/layout 1.0.0

package/dist/runtime/components/LayoutEdges.vue

@@ -0,0 +1,145 @@
+<template>
+<LayoutShapeSquare
+	v-if="activeFrame"
+	:css="getShapeSquareCss(activeFrame, `var(--layoutEdgeWidth,2px)`)"
+	:class="twMerge(
+  `
+		active-frame-edge
+		pointer-events-none
+		z-0
+		border-blue-500
+		border
+	`
+)"
+/>
+	
+<template
+	v-for="css, i of cssDragEdges"
+	:key="i"
+>
+	<LayoutShapeSquare
+		:css="css.thick"
+		:class="twMerge(`
+			drag-edge
+			z-20
+			hover:cursor-pointer
+			[&:hover+.edge]:bg-blue-500/50
+		`)"
+		@pointerdown="emit('dragStart', $event, { edge: edges[i] })"
+	/>
+	<LayoutShapeSquare
+		:css="css.thin"
+		:class="twMerge(`
+			pointer-events-none
+			edge
+		`)"
+	/>
+</template>
+<LayoutShapeSquare
+	:css="css"
+	:class="twMerge(`
+			grabbed-edge
+			z-20
+			bg-blue-500/50
+			cursor-pointer
+		`)"
+	v-for="css, i of cssDragEdge"
+	:key="i"
+/>
+<template v-for="css, i of cssDragIntersections" :key="i">
+	<LayoutShapeSquare
+		:css="css.thick"
+		:class="twMerge(
+  `
+		drag-intersection
+		z-30
+		rounded-full
+		hover:cursor-pointer
+		[&:hover+.intersection]:bg-blue-500/50
+		`
+)"
+		@pointerdown="emit('dragStart', $event, { intersection: wantedIntersections[i] })"
+	/>
+	<LayoutShapeSquare
+		:css="css.thin"
+		:class="twMerge(
+  `
+		intersection
+		z-30
+		rounded-full
+		pointer-events-none
+		`,
+  css.thin._shifted && `w-[7px] h-[7px]`
+)"
+	/>
+</template>
+</template>
+
+<script setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import { computed, ref, useAttrs } from "vue";
+import LayoutShapeSquare from "./LayoutShapeSquare.vue";
+import { frameToEdges } from "../helpers/frameToEdges.js";
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
+import { getShapeSquareCss } from "../helpers/getShapeSquareCss.js";
+import { getVisualEdgesCss } from "../helpers/getVisualEdgesCss.js";
+import { isEdgeEqual } from "../helpers/isEdgeEqual.js";
+import { toWindowCoord } from "../helpers/toWindowCoord.js";
+import {
+} from "../types/index.js";
+const $attrs = useAttrs();
+const emit = defineEmits(["dragStart"]);
+const props = defineProps({
+  edges: { type: Array, required: true },
+  intersections: { type: Array, required: true },
+  win: { type: Object, required: true },
+  activeFrame: { type: Object, required: false, default: void 0 },
+  draggingEdge: { type: null, required: false, default: void 0 },
+  draggingIntersection: { type: Object, required: false, default: void 0 }
+});
+const activeFrameCssEdges = computed(() => {
+  if (!props.activeFrame) return [];
+  return getVisualEdgesCss(Object.values(frameToEdges(props.activeFrame)), {
+    edgeWidth: `var(--layoutEdgeWidth, 2px)`
+  });
+});
+const cssDragEdges = computed(() => {
+  const thickEdges = getVisualEdgesCss(
+    props.draggingEdge ? props.edges.filter((_) => !isEdgeEqual(props.draggingEdge, _)) : props.edges,
+    {
+      edgeWidth: `var(--layoutHandleWidth, 8px)`,
+      padLongAxis: `var(--layoutEdgeWidth, 2px)`
+    }
+  );
+  const thinEdges = getVisualEdgesCss(props.edges, {
+    edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+    padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`
+  });
+  const edges = [];
+  for (let i = 0; i < thickEdges.length; i++) {
+    edges.push({ thin: thinEdges[i], thick: thickEdges[i] });
+  }
+  return edges;
+});
+const cssDragEdge = computed(() => {
+  if (!props.draggingEdge) return [];
+  return getVisualEdgesCss([props.draggingEdge], {
+    edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+    padLongAxis: `(var(--layoutEdgeWidth, 2px) + var(--layoutExtraDragEdgePadding, 0px))`
+  });
+});
+const wantedIntersections = computed(
+  () => props.intersections.filter((_) => !_.isWindowEdge && (_.count === 4 || _.count === 1 && _.sharesEdge))
+);
+const cssDragIntersections = computed(() => {
+  const intersections = [];
+  const thick = getIntersectionsCss(wantedIntersections.value, {
+    intersectionWidth: `var(--layoutIntersectionWidth, 15px)`
+  });
+  const thin = getIntersectionsCss(wantedIntersections.value, {});
+  for (let i = 0; i < thick.length; i++) {
+    intersections.push({ thick: thick[i], thin: thin[i] });
+  }
+  return intersections;
+});
+</script>

package/dist/runtime/components/LayoutFrame.vue

@@ -0,0 +1,41 @@
+<template>
+<!-- @vue-expect-error just let it inherit extra attrs -->
+<!-- overflow-hidden is just in case, if the frame's css is not properly set to h-full, overflow-auto, or the border/padding are too large, we can still get overflows -->
+<LayoutShapeSquare
+	tabindex="0"
+	:css="getShapeSquareCss(frame)"
+	:class="twMerge(
+  `
+		frame
+		p-[var(--layoutEdgeWidth,_2px)]
+		overflow-hidden
+		`,
+  $attrs.class
+)"
+	v-bind="{ ...$attrs, class: void 0 }"
+	@focus="emit('focus')"
+>
+	<slot>
+		<div class="p-2 text-xs bg-neutral-500">
+			{{ debugFrame(frame) }}
+		</div>
+		<div>No slot found for `frame-{{ frame.id }}`. </div>
+	</slot>
+</LayoutShapeSquare>
+</template>
+
+<script setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import {} from "vue";
+import { useAttrs } from "vue";
+const $attrs = useAttrs();
+import LayoutShapeSquare from "./LayoutShapeSquare.vue";
+import { getShapeSquareCss } from "../helpers/getShapeSquareCss";
+import { debugFrame } from "../layout/debugFrame.js";
+import {} from "../types/index.js";
+const emit = defineEmits(["focus"]);
+defineProps({
+  frame: { type: Object, required: true },
+  isActiveFrame: { type: Boolean, required: true }
+});
+</script>

package/dist/runtime/components/LayoutShapeSquare.vue

@@ -0,0 +1,36 @@
+<template>
+<div
+	:style="`
+		--posX:${css.x};
+		--posY:${css.y};
+		--width:${css.width};
+		--height:${css.height};
+		${css.translate ? `--translate:${css.translate}` : ``}
+	` + style"
+	:class="twMerge(
+  `
+		absolute
+		w-[var(--width)]
+		h-[var(--height)]
+		top-[var(--posY)]
+		left-[var(--posX)]
+	`,
+  css.translate && `[transform:var(--translate)]`,
+  $attrs.class
+)"
+	v-bind="{ ...$attrs, class: void 0 }"
+>
+	<slot/>
+</div>
+</template>
+
+<script setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import {} from "vue";
+import { useAttrs } from "vue";
+const $attrs = useAttrs();
+const props = defineProps({
+  style: { type: String, required: false, default: "" },
+  css: { type: Object, required: true }
+});
+</script>

package/dist/runtime/components/LayoutWindow.vue

@@ -0,0 +1,183 @@
+<template>
+<!-- overflow hidden is because the borders inside will make it overflow -->
+<div :class="twMerge(
+  `window
+		relative
+		overflow-hidden
+	`,
+  isDragging && `dragging cursor-pointer`,
+  requestType && `request-${requestType}`,
+  $attrs.attrs.class
+)"
+	ref="windowEl"
+	v-bind="{ ...$attrs.attrs, class: void 0 }"
+>
+	<template v-if="windowEl && win">
+		<LayoutFrameComponent :frame="frame"
+			:is-active-frame="frame.id === win.activeFrame"
+			v-for="frame of frames"
+			:key="frame.id"
+			v-bind="$attrs.frameAttrs"
+			@focus="windowSetActiveFrame(win, frame.id)"
+		>
+			<slot :name="`frame-${frame.id}`" v-bind="{ frame }"/>
+		</LayoutFrameComponent>
+		<LayoutEdgesComponent
+			:win="win"
+			:active-frame="win.activeFrame ? frames[win.activeFrame] : void 0"
+			:edges="visualEdges"
+			:intersections="intersections"
+			:dragging-edge="draggingEdges.length === 1 ? draggingEdges[0] : void 0"
+			:dragging-intersection="draggingIntersection"
+			v-bind="$attrs.edgesAttrs"
+			@drag-start="dragStart"
+		/>
+		<LayoutDecosComponent
+			:frames="frames"
+			:split-decos="splitDecos"
+			:close-decos="closeDecos"
+			v-bind="$attrs.decosAttrs"
+		/>
+		<slot name="extra-decos"/>
+	</template>
+	<Teleport v-if="instructionsTeleportTo && filteredUsageInstructions.length > 0" defer :to="instructionsTeleportTo">
+		<span aria-live="polite">
+			<span
+				class="
+					after:content-['┃']
+					after:text-accent-500
+					last:after:content-none
+					after:mx-1
+					after:text-gray-500
+				"
+				v-for="instruction of filteredUsageInstructions"
+				:key="instruction"
+			>
+				{{ instruction }}
+			</span>
+		</span>
+	</Teleport>
+</div>
+</template>
+
+<script setup>
+import { useDivideAttrs } from "@witchcraft/ui/composables/useDivideAttrs";
+import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver";
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import { computed, ref, watch } from "vue";
+import LayoutDecosComponent from "./LayoutDecos.vue";
+import LayoutEdgesComponent from "./LayoutEdges.vue";
+import LayoutFrameComponent from "./LayoutFrame.vue";
+import { useFrames } from "../composables/useFrames.js";
+import { CloseAction } from "../drag/CloseAction";
+import { DragActionHandler } from "../drag/DragActionHandler";
+import { SplitAction } from "../drag/SplitAction.js";
+import {} from "../drag/types.js";
+import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js";
+import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js";
+import {} from "../types/index.js";
+const $attrs = useDivideAttrs(["frame", "edges", "decos"]);
+const win = defineModel("win", { type: Object, ...{ required: true } });
+const props = defineProps({
+  additionalDragActions: { type: Array, required: false, default: () => [] },
+  splitKeyHandler: { type: Function, required: false, default: void 0 },
+  closeKeyHandler: { type: Function, required: false, default: void 0 },
+  usageInstructions: { type: Object, required: false, default: () => ({}) },
+  instructionsTeleportTo: { type: null, required: true },
+  allowWindowSizeUpdate: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["isShowingDrag", "dragState"]);
+const filteredUsageInstructions = computed(() => Object.values(props.usageInstructions).filter((_) => _ !== void 0).map((_) => _));
+const splitKeyHandler = props.splitKeyHandler ?? ((e, state2) => e.altKey || state2.isDraggingFromWindowEdge);
+const closeKeyHandler = props.closeKeyHandler ?? ((e) => {
+  if (e.ctrlKey && e.shiftKey) {
+    return "force";
+  }
+  if (e.shiftKey) return true;
+  return false;
+});
+const windowEl = ref(null);
+const showDragging = ref(true);
+const closeDecos = ref([]);
+const splitDecos = ref([]);
+const requestType = ref();
+const dragActionHandler = new DragActionHandler(
+  (type, _e, state2) => type === "move" ? !state2.isDraggingFromWindowEdge : void 0,
+  [
+    new SplitAction(
+      splitKeyHandler,
+      ((decos) => splitDecos.value = decos),
+      {
+        onStart: () => showDragging.value = false,
+        onCancel: () => showDragging.value = true
+      }
+    ),
+    new CloseAction(
+      closeKeyHandler,
+      ((decos) => closeDecos.value = decos)
+    ),
+    ...props.additionalDragActions
+  ],
+  {
+    onEvent: (e, cancel) => {
+      showDragging.value = true;
+      if (e instanceof KeyboardEvent && e.key === "Escape") {
+        cancel();
+      }
+    },
+    onRequestChange: (type) => {
+      requestType.value = type;
+    },
+    onEnd: () => {
+      requestType.value = void 0;
+      showDragging.value = true;
+    }
+  }
+);
+const {
+  dragStart,
+  visualEdges,
+  isDragging,
+  draggingEdges,
+  draggingIntersection,
+  frames,
+  intersections,
+  state
+} = useFrames(
+  win,
+  showDragging,
+  dragActionHandler
+);
+function getWindowOffset() {
+  const windowElRect = windowEl.value.getBoundingClientRect();
+  return {
+    pxX: Math.floor(windowElRect.x),
+    pxY: Math.floor(windowElRect.y)
+  };
+}
+function getWindowSize() {
+  const windowElRect = windowEl.value.getBoundingClientRect();
+  return {
+    pxWidth: Math.floor(windowElRect.width),
+    pxHeight: Math.floor(windowElRect.height)
+  };
+}
+function updateWindowSize() {
+  if (!props.allowWindowSizeUpdate) return;
+  const newSize = { ...getWindowSize(), ...getWindowOffset() };
+  updateWindowWithEvent(win.value, newSize);
+}
+useGlobalResizeObserver(windowEl, updateWindowSize);
+watch(() => props.allowWindowSizeUpdate, (newval, oldval) => {
+  if (oldval === false && newval === true) {
+    updateWindowSize();
+  }
+});
+watch(state, () => emit("dragState", state.value));
+watch(showDragging, () => emit("isShowingDrag", showDragging.value));
+defineExpose({
+  state,
+  win,
+  updateWindowSize
+});
+</script>

package/dist/runtime/composables/useFrames.js

@@ -0,0 +1,184 @@
+import { debounce } from "@alanscodelog/utils/debounce";
+import { keys } from "@alanscodelog/utils/keys";
+import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from "vue";
+import { DragDirectionStore } from "../drag/DragDirectionStore.js";
+import { cloneFrame } from "../helpers/cloneFrame.js";
+import { getIntersections } from "../helpers/getIntersections.js";
+import { getVisualEdges } from "../helpers/getVisualEdges.js";
+import { isWindowEdge } from "../helpers/isWindowEdge.js";
+import { moveEdge } from "../helpers/moveEdge.js";
+import { toWindowCoord } from "../helpers/toWindowCoord.js";
+import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js";
+import { isPointInFrame } from "../layout/isPointInFrame.js";
+export function useFrames(win, showDragging, handler) {
+  const draggingEdges = ref([]);
+  const touchingFrames = ref([]);
+  const allTouchingFrames = computed(() => {
+    const result = {};
+    for (const entry of touchingFrames.value) {
+      for (const frame of Object.values(entry)) {
+        result[frame.id] = frame;
+      }
+    }
+    return result;
+  });
+  const touchingFramesArrays = computed(() => touchingFrames.value.map((entry) => Object.values(entry)));
+  const isDragging = ref(false);
+  const dragPoint = ref();
+  const dragDirections = ref({});
+  const draggingIntersection = ref(void 0);
+  const isDraggingFromWindowEdge = ref(false);
+  const frames = computed(
+    () => isDragging.value && showDragging.value ? { ...win.value.frames, ...allTouchingFrames.value } : win.value.frames
+  );
+  const dragHoveredFrame = computed(() => {
+    if (isDragging.value) {
+      for (const id of keys(frames.value)) {
+        if (isPointInFrame(frames.value[id], dragPoint.value)) {
+          return frames.value[id];
+        }
+      }
+    }
+    return void 0;
+  });
+  const visualEdges = ref([]);
+  const intersections = computed(() => getIntersections(visualEdges.value));
+  const debounceGetDraggableEdges = debounce((f) => {
+    visualEdges.value = getVisualEdges(f, { includeWindowEdges: true });
+  }, 50, {});
+  watchEffect(() => {
+    if (isDragging.value) return;
+    debounceGetDraggableEdges(Object.values(frames.value));
+  });
+  function forceRecalculateEdges() {
+    visualEdges.value = getVisualEdges(Object.values(frames.value), { includeWindowEdges: true });
+  }
+  const dragDirStore = new DragDirectionStore({
+    onUpdate: (dir) => dragDirections.value = dir
+  });
+  const state = computed(() => ({
+    dragDirections: dragDirections.value,
+    dragPoint: dragPoint.value,
+    isDragging: isDragging.value,
+    draggingEdges: draggingEdges.value,
+    draggingIntersection: draggingIntersection.value,
+    visualEdges: visualEdges.value,
+    touchingFrames: touchingFrames.value,
+    touchingFramesArrays: touchingFramesArrays.value,
+    frames: frames.value,
+    dragHoveredFrame: dragHoveredFrame.value,
+    intersections: intersections.value,
+    isDraggingFromWindowEdge: isDraggingFromWindowEdge.value,
+    win: win.value
+  }));
+  let controller;
+  function resetState() {
+    draggingEdges.value = [];
+    draggingIntersection.value = void 0;
+    isDragging.value = false;
+    dragPoint.value = void 0;
+    touchingFrames.value = [];
+    dragDirStore.reset();
+    forceRecalculateEdges();
+  }
+  function dragStart(e, { edge, intersection }) {
+    controller = new AbortController();
+    controller.signal.addEventListener("abort", () => resetState());
+    e.preventDefault();
+    window.addEventListener("pointermove", dragMove, { signal: controller.signal });
+    window.addEventListener("pointerup", dragEnd, { signal: controller.signal });
+    const point = toWindowCoord(win.value, e);
+    dragPoint.value = point;
+    isDragging.value = true;
+    draggingIntersection.value = intersection;
+    draggingEdges.value = edge ? [edge] : [
+      ...draggingIntersection.value?.sharedEdges.horizontal ?? [],
+      ...draggingIntersection.value?.sharedEdges.vertical ?? []
+    ];
+    dragDirStore.update(point);
+    isDraggingFromWindowEdge.value = draggingEdges.value.some((_) => isWindowEdge(_));
+    const framesArray = Object.values(win.value.frames);
+    touchingFrames.value = [];
+    const clones = /* @__PURE__ */ new Map();
+    for (let i = 0; i < draggingEdges.value.length; i++) {
+      const draggingEdge = draggingEdges.value[i];
+      touchingFrames.value[i] = {};
+      for (const { frame } of findFramesTouchingEdge(draggingEdge, framesArray)) {
+        if (!clones.has(frame.id)) {
+          const clone = cloneFrame(frame);
+          touchingFrames.value[i][frame.id] = clone;
+          clones.set(frame.id, clone);
+        } else {
+          touchingFrames.value[i][frame.id] = clones.get(frame.id);
+        }
+      }
+    }
+    handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel);
+  }
+  function dragMove(e) {
+    e.preventDefault();
+    const point = toWindowCoord(win.value, e);
+    const didChange = dragDirStore.update(point);
+    dragPoint.value = point;
+    if (!didChange) return;
+    const allowed = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel);
+    if (!allowed) return;
+    requestAnimationFrame(() => {
+      for (let i = 0; i < draggingEdges.value.length; i++) {
+        const draggingEdge = draggingEdges.value[i];
+        if (draggingEdge) {
+          moveEdge(touchingFramesArrays.value[i], draggingEdge, point);
+        }
+      }
+      forceRecalculateEdges();
+    });
+  }
+  function dragEnd(e, { apply = true } = {}) {
+    if (e) {
+      const point = toWindowCoord(win.value, e);
+      dragPoint.value = point;
+    }
+    const doApply = apply && handler.onDragApply(state.value, forceRecalculateEdges);
+    if (doApply) {
+      for (const frame of touchingFramesArrays.value.flat()) {
+        win.value.frames[frame.id] = frame;
+      }
+    }
+    handler.onDragChange("end", e, state.value, forceRecalculateEdges, cancel);
+    controller?.abort();
+  }
+  function cancel() {
+    dragEnd(void 0, { apply: false });
+  }
+  const keydownController = new AbortController();
+  const wrappedKeydownHandler = (e) => {
+    handler.eventHandler(e, state.value, forceRecalculateEdges);
+  };
+  onMounted(() => {
+    window.addEventListener("keydown", wrappedKeydownHandler, { signal: keydownController.signal });
+    window.addEventListener("keyup", wrappedKeydownHandler, { signal: keydownController.signal });
+  });
+  onBeforeUnmount(() => {
+    controller?.abort();
+    keydownController?.abort();
+  });
+  return {
+    dragStart,
+    dragEnd,
+    cancel,
+    dragDirections,
+    dragPoint,
+    isDragging,
+    draggingEdges,
+    draggingIntersection,
+    visualEdges,
+    touchingFrames,
+    touchingFramesArrays,
+    frames,
+    dragHoveredFrame,
+    intersections,
+    isDraggingFromWindowEdge,
+    forceRecalculateEdges,
+    state
+  };
+}