@witchcraft/layout 0.3.1 → 0.4.1

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

@@ -1,6 +1,7 @@
 import { DragActionHandler } from "../drag/DragActionHandler";
-import { type DragState, type IDragAction } from "../drag/types.js";
-import type { LayoutEdgesProps, LayoutFrameProps, LayoutWindow } from "../types/index.js";
+import { type DragState, type IDragAction } from "../types/index.js";
+import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
+import { type LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
     /** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
     actionHandlers?: IDragAction[];
@@ -18,24 +19,17 @@ type __VLS_Props = {
      * When this is turned back on again, it will trigger an update. You can also trigger updates manually with the exposed updateWindowSize function.
      */
     allowWindowSizeUpdate?: boolean;
-    frameProps?: Partial<Omit<LayoutFrameProps, "frame" | "isActiveFrame" | "onFocus">>;
-    edgesProps?: Partial<Omit<LayoutEdgesProps, "edges" | "intersections" | "win">>;
 };
-declare function updateWindowSize(): void;
 type __VLS_PublicProps = __VLS_Props & {
     "win": LayoutWindow;
 };
-declare var __VLS_9: any, __VLS_10: {
-    frame: any;
-}, __VLS_22: {}, __VLS_29: any, __VLS_30: {
+declare var __VLS_1: {}, __VLS_8: any, __VLS_9: {
     id: any;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
 } & {
-    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
-} & {
-    'extra-decos'?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
     state: import("vue").ComputedRef<{
@@ -55,6 +49,67 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             startY: number;
             endX: number;
             endY: number;
+            error?: import("../utils/KnownError.js").KnownError<import("../types/index.js").LayoutError, {} | {
+                id: string | undefined;
+            } | {
+                id: string | undefined;
+            } | {
+                size: import("../types/index.js").Size;
+            } | Record<string, never> | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+                nearbyFrames: import("../types/index.js").LayoutFrame[];
+                minSize: import("../types/index.js").Size;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+                newSize: number;
+                minSize: number;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+                framesRequiredToBeDeleted: import("../types/index.js").LayoutFrame[];
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                draggingFrameId: string;
+                hoveredFrameId: string;
+                zoneSide: import("../types/index.js").DragZone["side"];
+            } | {
+                draggingFrameId: string;
+                hoveredFrameId: string;
+                zoneSide: import("../types/index.js").DragZone["side"];
+            } | {
+                draggingFrameId: string;
+                hoveredFrameId: string;
+                zoneSide: import("../types/index.js").DragZone["side"];
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                minFrameSize: number;
+                frameSizeNeeded: number;
+            } | {
+                min: number;
+                max: number;
+                wanted: number;
+            } | {
+                problemEdgeCoordinates: number[];
+            } | {
+                side: import("../types/index.js").EdgeSide;
+                id: string;
+            } | {
+                frame: string;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            }> | {
+                code: string;
+                message: string;
+            } | undefined;
         }[];
         draggingIntersection: {
             point: {
@@ -69,12 +124,134 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                     startY: number;
                     endX: number;
                     endY: number;
+                    error?: import("../utils/KnownError.js").KnownError<import("../types/index.js").LayoutError, {} | {
+                        id: string | undefined;
+                    } | {
+                        id: string | undefined;
+                    } | {
+                        size: import("../types/index.js").Size;
+                    } | Record<string, never> | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                        nearbyFrames: import("../types/index.js").LayoutFrame[];
+                        minSize: import("../types/index.js").Size;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                        newSize: number;
+                        minSize: number;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                        framesRequiredToBeDeleted: import("../types/index.js").LayoutFrame[];
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        draggingFrameId: string;
+                        hoveredFrameId: string;
+                        zoneSide: import("../types/index.js").DragZone["side"];
+                    } | {
+                        draggingFrameId: string;
+                        hoveredFrameId: string;
+                        zoneSide: import("../types/index.js").DragZone["side"];
+                    } | {
+                        draggingFrameId: string;
+                        hoveredFrameId: string;
+                        zoneSide: import("../types/index.js").DragZone["side"];
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        minFrameSize: number;
+                        frameSizeNeeded: number;
+                    } | {
+                        min: number;
+                        max: number;
+                        wanted: number;
+                    } | {
+                        problemEdgeCoordinates: number[];
+                    } | {
+                        side: import("../types/index.js").EdgeSide;
+                        id: string;
+                    } | {
+                        frame: string;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    }> | {
+                        code: string;
+                        message: string;
+                    } | undefined;
                 }[];
                 vertical: {
                     startX: number;
                     startY: number;
                     endX: number;
                     endY: number;
+                    error?: import("../utils/KnownError.js").KnownError<import("../types/index.js").LayoutError, {} | {
+                        id: string | undefined;
+                    } | {
+                        id: string | undefined;
+                    } | {
+                        size: import("../types/index.js").Size;
+                    } | Record<string, never> | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                        nearbyFrames: import("../types/index.js").LayoutFrame[];
+                        minSize: import("../types/index.js").Size;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                        newSize: number;
+                        minSize: number;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                        framesRequiredToBeDeleted: import("../types/index.js").LayoutFrame[];
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        draggingFrameId: string;
+                        hoveredFrameId: string;
+                        zoneSide: import("../types/index.js").DragZone["side"];
+                    } | {
+                        draggingFrameId: string;
+                        hoveredFrameId: string;
+                        zoneSide: import("../types/index.js").DragZone["side"];
+                    } | {
+                        draggingFrameId: string;
+                        hoveredFrameId: string;
+                        zoneSide: import("../types/index.js").DragZone["side"];
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        minFrameSize: number;
+                        frameSizeNeeded: number;
+                    } | {
+                        min: number;
+                        max: number;
+                        wanted: number;
+                    } | {
+                        problemEdgeCoordinates: number[];
+                    } | {
+                        side: import("../types/index.js").EdgeSide;
+                        id: string;
+                    } | {
+                        frame: string;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
+                    }> | {
+                        code: string;
+                        message: string;
+                    } | undefined;
                 }[];
             };
             isWindowEdge: boolean;
@@ -84,6 +261,67 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             startY: number;
             endX: number;
             endY: number;
+            error?: import("../utils/KnownError.js").KnownError<import("../types/index.js").LayoutError, {} | {
+                id: string | undefined;
+            } | {
+                id: string | undefined;
+            } | {
+                size: import("../types/index.js").Size;
+            } | Record<string, never> | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+                nearbyFrames: import("../types/index.js").LayoutFrame[];
+                minSize: import("../types/index.js").Size;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+                newSize: number;
+                minSize: number;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+                framesRequiredToBeDeleted: import("../types/index.js").LayoutFrame[];
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                draggingFrameId: string;
+                hoveredFrameId: string;
+                zoneSide: import("../types/index.js").DragZone["side"];
+            } | {
+                draggingFrameId: string;
+                hoveredFrameId: string;
+                zoneSide: import("../types/index.js").DragZone["side"];
+            } | {
+                draggingFrameId: string;
+                hoveredFrameId: string;
+                zoneSide: import("../types/index.js").DragZone["side"];
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                minFrameSize: number;
+                frameSizeNeeded: number;
+            } | {
+                min: number;
+                max: number;
+                wanted: number;
+            } | {
+                problemEdgeCoordinates: number[];
+            } | {
+                side: import("../types/index.js").EdgeSide;
+                id: string;
+            } | {
+                frame: string;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
+            }> | {
+                code: string;
+                message: string;
+            } | undefined;
         }[];
         touchingFrames: Record<string, import("../types/index.js").LayoutFrame>[];
         touchingFramesArrays: import("../types/index.js").LayoutFrame[][];
@@ -94,8 +332,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
         win: import("../types/index.js").BaseLayoutWindow;
     }>;
     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">>;
+    getUpdateWindowSizeInfo: typeof getUpdateWindowSizeInfo;
+    dragActionHandler: DragActionHandler<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:win": (value: import("../types/index.js").BaseLayoutWindow) => any;
 } & {

package/dist/runtime/components/LayoutWindow.vue

@@ -14,37 +14,12 @@
 	v-bind="{ ...$attrs, class: void 0 }"
 >
 		<!-- we need the size withot borders for correct px calculations -->
-	<div class="
-		layout-window
-		relative
-		overflow-hidden
-		flex-1
-	" ref="windowEl">
+	<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"/>
+			<slot/>
 		</template>
 	</div>
 	<Teleport
@@ -93,16 +68,17 @@
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
 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 { createDefaultHandlers } from "../drag/createDefaultHandlers.js";
 import { DragActionHandler } from "../drag/DragActionHandler";
-import { dragContextInjectionKey } from "../drag/types.js";
-import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js";
+import { dragContextInjectionKey } from "../types/vue.js";
+import {} from "../types/index.js";
+import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js";
+import {} from "../types/index.js";
+import { layoutContextInjectionKey } from "../types/vue.js";
 import { settings } from "../settings.js";
+import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 const $attrs = useAttrs();
 const win = defineModel("win", { type: Object, ...{ required: true } });
 const props = defineProps({
@@ -110,9 +86,7 @@ const props = defineProps({
   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 }
+  allowWindowSizeUpdate: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["isShowingDrag", "dragState"]);
 const windowEl = ref(null);
@@ -145,14 +119,9 @@ const dragContext = useFrames(
   dragActionHandler
 );
 const {
-  dragStart,
   dragPoint,
-  visualEdges,
   isDragging,
-  draggingEdges,
-  draggingIntersection,
   frames,
-  intersections,
   state,
   frameDragFrameId,
   showDragging
@@ -172,23 +141,33 @@ function getWindowSize() {
     pxHeight: Math.floor(windowElRect.height)
   };
 }
-function updateWindowSize() {
+function onWindowResize() {
   if (!props.allowWindowSizeUpdate) return;
   const newSize = { ...getWindowSize(), ...getWindowOffset() };
-  updateWindowWithEvent(win.value, newSize);
+  win.value.pxX = newSize.pxX;
+  win.value.pxY = newSize.pxY;
+  applyFrameChanges(win.value, getUpdateWindowSizeInfo(win.value, newSize));
 }
-useGlobalResizeObserver(windowEl, updateWindowSize);
+useGlobalResizeObserver(windowEl, onWindowResize);
 watch(() => props.allowWindowSizeUpdate, (newval, oldval) => {
   if (oldval === false && newval === true) {
-    updateWindowSize();
+    onWindowResize();
   }
 });
 watch(state, () => emit("dragState", state.value));
 watch(showDragging, () => emit("isShowingDrag", showDragging.value));
+const layoutContext = computed(() => {
+  return {
+    win: win.value,
+    shapes,
+    onFocus: (frameId) => windowSetActiveFrame(win.value, frameId)
+  };
+});
+provide(layoutContextInjectionKey, layoutContext);
 defineExpose({
   state,
   win,
-  updateWindowSize,
+  getUpdateWindowSizeInfo,
   dragActionHandler
 });
 </script>