@witchcraft/layout 0.1.3 → 0.2.0

package/dist/runtime/components/LayoutWindow.vue

@@ -1,57 +1,88 @@
 <template>
 <!-- overflow hidden is because the borders inside will make it overflow -->
-<div :class="twMerge(
-  `window
-		relative
-		overflow-hidden
-	`,
+<div
+	:class="twMerge(
+  `
+			layout-wrapper
+			flex
+			flex-col
+		`,
   isDragging && `dragging cursor-pointer`,
   requestType && `request-${requestType}`,
   $attrs.class
 )"
-	ref="windowEl"
 	v-bind="{ ...$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="frameProps"
-			@focus="windowSetActiveFrame(win, frame.id)"
+		<!-- we need the size withot borders for correct px calculations -->
+	<div class="
+		layout-window
+		relative
+		overflow-hidden
+		flex-1
+	" ref="windowEl">
+		<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="frameProps"
+				@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="edgesProps"
+				@drag-start="dragStart"
+			/>
+			<LayoutDecosComponent
+				:shapes="shapes"
+			/>
+			<slot name="extra-decos"/>
+		</template>
+	</div>
+	<Teleport
+		v-if="isDragging === 'frame' && frameDragFrameId && dragPoint"
+		:to="ghostTeleportTo"
+		defer
+	>
+		<div
+			class="fixed z-[9999] pointer-events-none"
+			:style="{
+  left: dragPoint.x / settings.maxInt * win.pxWidth + win.pxX + 'px',
+  top: dragPoint.y / settings.maxInt * win.pxHeight + win.pxY + 'px',
+  width: frames[frameDragFrameId] ? frames[frameDragFrameId].width / settings.maxInt * win.pxWidth + 'px' : void 0,
+  height: frames[frameDragFrameId] ? frames[frameDragFrameId].height / settings.maxInt * win.pxHeight + 'px' : void 0
+}"
 		>
-			<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="edgesProps"
-			@drag-start="dragStart"
-		/>
-		<LayoutDecosComponent
-			:frames="frames"
-			:split-decos="splitDecos"
-			:close-decos="closeDecos"
-		/>
-		<slot name="extra-decos"/>
-	</template>
-	<Teleport v-if="instructionsTeleportTo && filteredUsageInstructions.length > 0" defer :to="instructionsTeleportTo">
+			<slot
+				:id="frameDragFrameId"
+				:name="`frame-drag-ghost`"
+			>
+				<div class="frame-drag-ghost border border-neutral-500 bg-white/50 w-10 h-10"/>
+			</slot>
+		</div>
+	</Teleport>
+	<Teleport v-if="textHintsTeleportTo && textHints.length > 0" :to="textHintsTeleportTo" defer>
 		<span aria-live="polite">
 			<span
-				class="
-					after:content-['┃']
+				:class="twMerge(`
+					text-hint
+					after:content-['\u2503']
 					last:after:content-none
 					after:mx-1
-					after:text-gray-500
-				"
-				v-for="instruction of filteredUsageInstructions"
-				:key="instruction"
+					after:text-neutral-500
+				`, instruction.classes)"
+				v-for="instruction of textHints"
+				:key="instruction.text"
 			>
-				{{ instruction }}
+				{{ instruction.text }}
 			</span>
 		</span>
 	</Teleport>
@@ -61,62 +92,34 @@
 <script setup>
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
-import { computed, ref, useAttrs, watch } from "vue";
-import {} from "vue";
+import { computed, provide, reactive, ref, useAttrs, 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 { createDefaultHandlers } from "../drag/createDefaultHandlers.js";
 import { DragActionHandler } from "../drag/DragActionHandler";
-import { SplitAction } from "../drag/SplitAction.js";
-import {} from "../drag/types.js";
+import { dragContextInjectionKey } from "../drag/types.js";
 import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js";
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js";
-import {} from "../types/index.js";
+import { settings } from "../settings.js";
 const $attrs = useAttrs();
 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 },
+  actionHandlers: { type: Array, required: false, default: void 0 },
+  textHints: { type: Array, required: false, default: () => [] },
+  textHintsTeleportTo: { type: null, required: true, default: void 0 },
+  ghostTeleportTo: { type: String, required: false, default: "#root" },
   allowWindowSizeUpdate: { type: Boolean, required: false, default: true },
   frameProps: { type: Object, required: false },
   edgesProps: { type: Object, required: false }
 });
 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
+    ...props.actionHandlers ?? createDefaultHandlers()
   ],
   {
     onEvent: (e, cancel) => {
@@ -134,20 +137,27 @@ const dragActionHandler = new DragActionHandler(
     }
   }
 );
+dragActionHandler.shapes = reactive([]);
+dragActionHandler.textHints = reactive({ actions: [], errors: [] });
+const shapes = dragActionHandler.shapes;
+const dragContext = useFrames(
+  win,
+  dragActionHandler
+);
 const {
   dragStart,
+  dragPoint,
   visualEdges,
   isDragging,
   draggingEdges,
   draggingIntersection,
   frames,
   intersections,
-  state
-} = useFrames(
-  win,
-  showDragging,
-  dragActionHandler
-);
+  state,
+  frameDragFrameId,
+  showDragging
+} = dragContext;
+provide(dragContextInjectionKey, dragContext);
 function getWindowOffset() {
   const windowElRect = windowEl.value.getBoundingClientRect();
   return {
@@ -178,6 +188,7 @@ watch(showDragging, () => emit("isShowingDrag", showDragging.value));
 defineExpose({
   state,
   win,
-  updateWindowSize
+  updateWindowSize,
+  dragActionHandler
 });
 </script>

package/dist/runtime/components/LayoutWindow.vue.d.ts

@@ -1,11 +1,15 @@
+import { DragActionHandler } from "../drag/DragActionHandler";
 import { type DragState, type IDragAction } from "../drag/types.js";
-import { type LayoutEdgesProps, type LayoutFrameProps, type LayoutWindow } from "../types/index.js";
+import type { LayoutEdgesProps, LayoutFrameProps, LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
-    additionalDragActions?: IDragAction[];
-    splitKeyHandler?: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
-    closeKeyHandler?: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
-    usageInstructions?: Record<string, string | undefined>;
-    instructionsTeleportTo: string | undefined;
+    /** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
+    actionHandlers?: IDragAction[];
+    textHints?: {
+        text: string;
+        classes?: string;
+    }[];
+    textHintsTeleportTo: string | undefined;
+    ghostTeleportTo?: string;
     /**
      * You might need to temporarily disable updating the window size while transitioning, depending on your layout.
      *
@@ -23,9 +27,13 @@ type __VLS_PublicProps = __VLS_Props & {
 };
 declare var __VLS_9: any, __VLS_10: {
     frame: any;
-}, __VLS_22: {};
+}, __VLS_22: {}, __VLS_29: any, __VLS_30: {
+    id: any;
+};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+} & {
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
 } & {
     'extra-decos'?: (props: typeof __VLS_22) => any;
 };
@@ -39,7 +47,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined;
-        isDragging: boolean;
+        isDragging: false | "edge" | "frame";
+        showDragging: boolean;
+        draggingFrameId: string | undefined;
         draggingEdges: {
             startX: number;
             startY: number;
@@ -85,6 +95,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     }>;
     win: import("vue").ModelRef<import("../types/index.js").BaseLayoutWindow, string, import("../types/index.js").BaseLayoutWindow, import("../types/index.js").BaseLayoutWindow>;
     updateWindowSize: typeof updateWindowSize;
+    dragActionHandler: DragActionHandler<IDragAction[], import("@alanscodelog/utils").RecordFromArray<IDragAction[], "name">>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:win": (value: import("../types/index.js").BaseLayoutWindow) => any;
 } & {
@@ -95,10 +106,13 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     onDragState?: ((value: DragState) => any) | undefined;
     "onUpdate:win"?: ((value: import("../types/index.js").BaseLayoutWindow) => any) | undefined;
 }>, {
-    additionalDragActions: IDragAction[];
-    splitKeyHandler: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
-    closeKeyHandler: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
-    usageInstructions: Record<string, string | undefined>;
+    actionHandlers: IDragAction[];
+    textHints: {
+        text: string;
+        classes?: string;
+    }[];
+    textHintsTeleportTo: string | undefined;
+    ghostTeleportTo: string;
     allowWindowSizeUpdate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/composables/useFrames.d.ts

@@ -1,30 +1,28 @@
 import type { Ref } from "vue";
-import type { DragChangeHandler, DragState } from "../drag/types.js";
-import type { Edge, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
-export declare function useFrames(win: Ref<LayoutWindow>, 
-/** Whether to show merged the moved frames while dragging. */
-showDragging: Ref<boolean>, handler: {
+import type { DragChangeHandler, DragChangeResult, DragState, EdgeDragStartData, FrameDragStartData } from "../drag/types.js";
+import type { IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
+export declare function useFrames(win: Ref<LayoutWindow>, handler: {
     eventHandler: (e: KeyboardEvent, state: DragState, forceRecalculateEdges: () => void) => void;
     /**
-        * Called when the drag coordinates change (during any event). Should return true to allow the edges to be moved, or false to prevent it.
+        * Called when the drag coordinates change (during any event). Should return true to allow the edges to be updated/moved, or false to prevent it.
+        *
+        * Can return anything for the end event as it's ignored.
         *
         * Can be used to save some context/info to later apply safely during onDragApply.
         */
-    onDragChange: DragChangeHandler;
+    onDragChange: (...args: Parameters<DragChangeHandler>) => DragChangeResult;
     /**
      * Called when drag will be applied. If dragEnd was called with apply false, it will not be called.
      * Return false to not apply the regular drag end changes (i.e. return false to reset to the position before dragging).
      */
     onDragApply: ((state: DragState, forceRecalculateEdges: () => void) => boolean);
 }): {
-    dragStart: (e: PointerEvent, { edge, intersection }: {
-        edge?: Edge;
-        intersection?: IntersectionEntry;
-    }) => void;
+    dragStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? EdgeDragStartData : FrameDragStartData) => void;
     dragEnd: (e?: PointerEvent, { apply }?: {
         apply?: boolean;
     }) => void;
     cancel: () => void;
+    dragMove: (e: PointerEvent) => void;
     dragDirections: Ref<{
         horizontal: "up" | "down" | "left" | "right" | undefined;
         vertical: "up" | "down" | "left" | "right" | undefined;
@@ -39,7 +37,7 @@ showDragging: Ref<boolean>, handler: {
         x: number;
         y: number;
     } | undefined>;
-    isDragging: Ref<boolean, boolean>;
+    isDragging: Ref<false | "edge" | "frame", false | "edge" | "frame">;
     draggingEdges: Ref<{
         startX: number;
         startY: number;
@@ -133,7 +131,9 @@ showDragging: Ref<boolean>, handler: {
             x: number;
             y: number;
         } | undefined;
-        isDragging: boolean;
+        isDragging: false | "edge" | "frame";
+        showDragging: boolean;
+        draggingFrameId: string | undefined;
         draggingEdges: {
             startX: number;
             startY: number;
@@ -177,4 +177,6 @@ showDragging: Ref<boolean>, handler: {
         isDraggingFromWindowEdge: boolean;
         win: import("../types/index.js").BaseLayoutWindow;
     }>;
+    showDragging: Ref<boolean, boolean>;
+    frameDragFrameId: Ref<string | undefined, string | undefined>;
 };

package/dist/runtime/composables/useFrames.js

@@ -1,6 +1,6 @@
 import { debounce } from "@alanscodelog/utils/debounce";
 import { keys } from "@alanscodelog/utils/keys";
-import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { DragDirectionStore } from "../drag/DragDirectionStore.js";
 import { cloneFrame } from "../helpers/cloneFrame.js";
 import { getIntersections } from "../helpers/getIntersections.js";
@@ -9,8 +9,8 @@ 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) {
+import { isPointInRect } from "../layout/isPointInRect.js";
+export function useFrames(win, handler) {
   const draggingEdges = ref([]);
   const touchingFrames = ref([]);
   const allTouchingFrames = computed(() => {
@@ -24,17 +24,19 @@ export function useFrames(win, showDragging, handler) {
   });
   const touchingFramesArrays = computed(() => touchingFrames.value.map((entry) => Object.values(entry)));
   const isDragging = ref(false);
+  const showDragging = ref(false);
   const dragPoint = ref();
   const dragDirections = ref({});
   const draggingIntersection = ref(void 0);
   const isDraggingFromWindowEdge = ref(false);
+  const frameDragFrameId = ref();
   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)) {
+        if (isPointInRect(frames.value[id], dragPoint.value)) {
           return frames.value[id];
         }
       }
@@ -46,10 +48,11 @@ export function useFrames(win, showDragging, handler) {
   const debounceGetDraggableEdges = debounce((f) => {
     visualEdges.value = getVisualEdges(f, { includeWindowEdges: true });
   }, 50, {});
-  watchEffect(() => {
+  watch([isDragging, frames], () => {
     if (isDragging.value) return;
     debounceGetDraggableEdges(Object.values(frames.value));
-  });
+  }, { deep: true });
+  debounceGetDraggableEdges(Object.values(frames.value));
   function forceRecalculateEdges() {
     visualEdges.value = getVisualEdges(Object.values(frames.value), { includeWindowEdges: true });
   }
@@ -60,6 +63,8 @@ export function useFrames(win, showDragging, handler) {
     dragDirections: dragDirections.value,
     dragPoint: dragPoint.value,
     isDragging: isDragging.value,
+    showDragging: showDragging.value,
+    draggingFrameId: frameDragFrameId.value,
     draggingEdges: draggingEdges.value,
     draggingIntersection: draggingIntersection.value,
     visualEdges: visualEdges.value,
@@ -78,10 +83,12 @@ export function useFrames(win, showDragging, handler) {
     isDragging.value = false;
     dragPoint.value = void 0;
     touchingFrames.value = [];
+    frameDragFrameId.value = void 0;
     dragDirStore.reset();
+    showDragging.value = false;
     forceRecalculateEdges();
   }
-  function dragStart(e, { edge, intersection }) {
+  function dragStart(e, type, data) {
     controller = new AbortController();
     controller.signal.addEventListener("abort", () => resetState());
     e.preventDefault();
@@ -89,31 +96,38 @@ export function useFrames(win, showDragging, handler) {
     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);
+    isDragging.value = type;
+    showDragging.value = true;
+    if (type === "frame") {
+      frameDragFrameId.value = data.frameId;
+    } else {
+      const { edge, intersection } = data;
+      draggingIntersection.value = intersection;
+      draggingEdges.value = edge ? [edge] : [
+        ...draggingIntersection.value?.sharedEdges.horizontal ?? [],
+        ...draggingIntersection.value?.sharedEdges.vertical ?? []
+      ];
+      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);
+    const res = handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel);
+    showDragging.value = res.showDragging ?? true;
   }
   function dragMove(e) {
     e.preventDefault();
@@ -121,17 +135,20 @@ export function useFrames(win, showDragging, handler) {
     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);
+    const res = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel);
+    showDragging.value = res.showDragging ?? true;
+    if (!res.updateEdges) return;
+    if (isDragging.value === "edge") {
+      requestAnimationFrame(() => {
+        for (let i = 0; i < draggingEdges.value.length; i++) {
+          const draggingEdge = draggingEdges.value[i];
+          if (draggingEdge) {
+            moveEdge(touchingFramesArrays.value[i], draggingEdge, point);
+          }
         }
-      }
-      forceRecalculateEdges();
-    });
+        forceRecalculateEdges();
+      });
+    }
   }
   function dragEnd(e, { apply = true } = {}) {
     if (e) {
@@ -166,6 +183,7 @@ export function useFrames(win, showDragging, handler) {
     dragStart,
     dragEnd,
     cancel,
+    dragMove,
     dragDirections,
     dragPoint,
     isDragging,
@@ -179,6 +197,8 @@ export function useFrames(win, showDragging, handler) {
     intersections,
     isDraggingFromWindowEdge,
     forceRecalculateEdges,
-    state
+    state,
+    showDragging,
+    frameDragFrameId
   };
 }