@witchcraft/layout 0.3.0 → 0.4.0

package/dist/runtime/components/LayoutEdges.vue

@@ -1,144 +0,0 @@
-<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
-	`,
-  $attrs.class
-)"
-	v-bind="{ ...$attrs, class: void 0 }"
-/>
-
-<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', { 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, 'edge', { 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, useAttrs } from "vue";
-import LayoutShapeSquare from "./LayoutShapeSquare.vue";
-import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
-import { getShapeSquareCss } from "../helpers/getShapeSquareCss.js";
-import { getVisualEdgesCss } from "../helpers/getVisualEdgesCss.js";
-import { isEdgeEqual } from "../helpers/isEdgeEqual.js";
-const $attrs = useAttrs();
-defineOptions({
-  inheritAttrs: false
-});
-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 },
-  css: { type: Object, required: false }
-});
-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/LayoutEdges.vue.d.ts

@@ -1,17 +0,0 @@
-import type { Edge, IntersectionEntry, LayoutEdgesProps } from "../types/index.js";
-declare const _default: import("vue").DefineComponent<LayoutEdgesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dragStart: (e: PointerEvent, type: "edge", opts: {
-        edge?: Edge;
-        intersection?: IntersectionEntry;
-    }) => any;
-}, string, import("vue").PublicProps, Readonly<LayoutEdgesProps> & Readonly<{
-    onDragStart?: ((e: PointerEvent, type: "edge", opts: {
-        edge?: Edge;
-        intersection?: IntersectionEntry;
-    }) => any) | undefined;
-}>, {
-    activeFrame: import("../types/index.js").LayoutFrame;
-    draggingEdge: Edge;
-    draggingIntersection: IntersectionEntry;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/drag/types.d.ts

@@ -1,161 +0,0 @@
-import type { ComputedRef, InjectionKey, Ref } from "vue";
-import type { Direction, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "../types/index.js";
-export type DragState = {
-    /** The current directions in the corresponding orientations that the user is dragging in. */
-    dragDirections: Record<Orientation, Direction | undefined>;
-    /** The curren point (in scaled window coordinates) the user is dragging at. */
-    dragPoint?: Point;
-    /** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
-    isDragging: boolean | "frame" | "edge";
-    /** Whether to show the moved frames while dragging. */
-    showDragging: boolean;
-    /** The frame being dragged during a frame drag. Only set when isDragging is "frame". */
-    draggingFrameId?: FrameId;
-    /**
-     * The edges that are currently being dragged. There are multiple edges if they drag an intersection since what's actually happening is we're just dragging the closest horizontal and vertical edges.
-     */
-    draggingEdges: Edge[];
-    /**
-     * The intersection that is currently being dragged.
-     */
-    draggingIntersection?: IntersectionEntry;
-    /** The "visual" edges that can be displayed for dragging. See {@link getVisualEdges} */
-    visualEdges: Edge[];
-    /**
-     * The frames touching the currently dragged edges. Each entry corresponds to the frames touching the corresponding dragging edge.
-     *
-     * So you can use the index in draggingEdges to get the corresponding frames.
-     */
-    touchingFrames: Record<string, LayoutFrame>[];
-    /**
-     * Same as touchingFrames, but with the frames in an array.
-     */
-    touchingFramesArrays: LayoutFrame[][];
-    /**
-     * All the frames, with/without the currently dragged frames depending on if `showDragging` is true.
-     */
-    frames: Record<string, LayoutFrame>;
-    /**
-     * The frame that is currently being hovered over (according to whether `dragPoint` in in the frame or not).
-     */
-    dragHoveredFrame: LayoutFrame | undefined;
-    /**
-     * A list of corner intersections. Frames can also be dragged by these.
-     */
-    intersections: IntersectionEntry[];
-    /**
-     * Whether the drag was initiated from a point along the window edge.
-     */
-    isDraggingFromWindowEdge: boolean;
-    win: LayoutWindow;
-};
-export interface ActionDragChangeResult {
-    /** Whether the drag should update the edges. Defaults to false. */
-    updateEdges?: boolean;
-    /** Deco shapes produced by this action during this drag step. */
-    shapes: LayoutShape[];
-    /** Whether to show the moved edges while dragging. Defaults to true. */
-    showDragging?: boolean;
-}
-export type DragChangeResult = Omit<ActionDragChangeResult, "shapes">;
-/**
- * Called when the drag coordinates change (during any event).
- *
- * Should return `{ allowed: true/false, shapes: LayoutShape[] }` to control whether the action is allowed and edges update and what deco shapes to render.
- *
- * Note that the allowed return type only affect the `move` event but is also typed as `boolean` for other events for ease of use.
- */
-export type DragChangeHandler = <T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: DragState, forceRecalculateEdges: () => void, cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void) => ActionDragChangeResult;
-/**
- * A drag action describes when and how to handle a drag event.
- *
- * For example, there are the default split/close actions that can be triggered in certain situations. This could be when holding down a modifier or key, or some other condition (e.g. the user is dragging a specific edge).
- *
- * Each action should handle it's configuration and saving/caching any state it needs. See {@link SplitAction} and {@link CloseAction} for examples.
- */
-export interface IDragAction {
-    /** A unique name for your action. */
-    name: string;
-    onDragChange: DragChangeHandler;
-    /**
-     *
-     * Is called after `onDragChange("end")` with the same event. Might not be called if the request was cancelled.
-     *
-     * You should apply your action if possible and return whether it was applied.
-     *
-     * This is also a good place to reset your state.
-     */
-    onDragApply: (state: DragState, forceRecalculateEdges: () => void) => boolean;
-    /**
-     * Should return true if it should handle the "request"/event (e.g. some modifier is being pressed => user is requesting x action).
-     *
-     * The user is not necessarily dragging at this point, though they might also change actions mid drag. So it does not necessarily mean the event is allowed.
-     *
-     * Here is where you should initiate your state. Don't allow the action by default unless it can always be allowed.
-     */
-    canHandleRequest(e: KeyboardEvent | PointerEvent, state: DragState, forceRecalculateEdges: () => void): boolean;
-    /**
-     * Called when a user cancels the drag action.
-     *
-     * You should reset your state here.
-     */
-    cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void;
-    /**
-     * Plugins should implement some basic debug logs by calling {@link DragActionHandler.debugState } at least before and after applying actions in onDragApply. Debug can be a string because it can be an object key to filter on (see the debugState function).
-     *
-     *
-     * Calls look like this usually, where this.state is the plugin state:
-     * ```ts
-     * DragActionHandler.debugState(this.name, "before", state, this.state, this.debug)
-     * ```
-     */
-    debug: boolean | string;
-    /**
-     * The action handler will call this regardless of whether the action is active or not.
-     *
-     * Can be used by actions to return display hints.
-     *
-     * Actions should keep the state of the hints locally and update them in canHandlerRequest/onDrag*, etc. and only use this to return the state of the actions, not update them as that could become expensive.
-     */
-    getTextHints(type: "start" | "move" | "end"): {
-        /** Hint texts to display regarding the action state/usage. Undefined means no hint. */
-        actions?: string[];
-        /** Error texts/hints to display when the action produces an error. */
-        errors?: string[];
-    };
-}
-export type EdgeDragStartData = {
-    edge?: Edge;
-    intersection?: IntersectionEntry;
-};
-export type FrameDragStartData = {
-    frameId: FrameId;
-};
-export type DragStartFn = {
-    (e: PointerEvent, type: "edge", data: EdgeDragStartData): void;
-    (e: PointerEvent, type: "frame", data: FrameDragStartData): void;
-};
-export interface UseFramesContext {
-    dragStart: DragStartFn;
-    dragMove: (e: PointerEvent) => void;
-    dragEnd: (e?: PointerEvent, options?: {
-        apply?: boolean;
-    }) => void;
-    cancel: () => void;
-    dragDirections: Ref<Record<Orientation, Direction | undefined>>;
-    dragPoint: Ref<Point | undefined>;
-    isDragging: Ref<false | "frame" | "edge">;
-    draggingEdges: Ref<Edge[]>;
-    draggingIntersection: Ref<IntersectionEntry | undefined>;
-    visualEdges: Ref<Edge[]>;
-    touchingFrames: Ref<Record<string, LayoutFrame>[]>;
-    touchingFramesArrays: Ref<LayoutFrame[][]>;
-    frames: ComputedRef<Record<string, LayoutFrame>>;
-    dragHoveredFrame: ComputedRef<LayoutFrame | undefined>;
-    intersections: ComputedRef<IntersectionEntry[]>;
-    isDraggingFromWindowEdge: Ref<boolean>;
-    forceRecalculateEdges: () => void;
-    state: ComputedRef<DragState>;
-    frameDragFrameId: Ref<FrameId | undefined>;
-}
-export declare const dragContextInjectionKey: InjectionKey<UseFramesContext>;

package/dist/runtime/helpers/clampNumber.d.ts

@@ -1 +0,0 @@
-export declare function clampNumber(num: number, lowerLimit: number, upperLimit: number): number;

package/dist/runtime/helpers/clampNumber.js

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

package/dist/runtime/helpers/getShapeSquareCss.d.ts

@@ -1,7 +0,0 @@
-import type { BaseSquare } from "../types/index.js";
-export declare function getShapeSquareCss(obj: BaseSquare, pad?: string): {
-    x: string;
-    y: string;
-    width: string;
-    height: string;
-};

package/dist/runtime/helpers/numberToScaledSize.d.ts

@@ -1,2 +0,0 @@
-import type { LayoutWindow, PxSize, Size } from "../types/index.js";
-export declare function numberToScaledSize(win: LayoutWindow, size: PxSize | number, scale?: number): Size;

package/src/runtime/components/LayoutDecos.vue

@@ -1,28 +0,0 @@
-<template>
-<template
-	v-for="(shape, i) of shapes"
-		:key="`${shape.type}-${i}`"
->
-	<LayoutShapeSquare
-		v-if="shape.type === 'square'"
-		:css="getShapeSquareCss(shape.data, `var(--layoutEdgeWidth,2px)`)"
-		v-bind="shape.attrs ?? {}"
-	/>
-	<LayoutShapeSquare
-		v-else-if="shape.type === 'edge'"
-		:css="getVisualEdgeCss(shape.data, { padLongAxis: 'var(--layoutEdgeWidth,2px)' })"
-		v-bind="shape.attrs ?? {}"
-	/>
-</template>
-</template>
-<script lang="ts" setup>
-import LayoutShapeSquare from "./LayoutShapeSquare.vue"
-
-import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
-import { getVisualEdgeCss } from "../helpers/getVisualEdgeCss"
-import type { LayoutShape } from "../types/index.js"
-
-defineProps<{
-	shapes: LayoutShape[]
-}>()
-</script>

package/src/runtime/components/LayoutEdges.vue

@@ -1,170 +0,0 @@
-<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
-	`,
-		($attrs as any).class
-	)"
-	v-bind="{ ...$attrs, class: undefined }"
-/>
-
-<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', { 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, 'edge', { 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 lang="ts" setup>
-import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed, useAttrs } from "vue"
-
-import LayoutShapeSquare from "./LayoutShapeSquare.vue"
-
-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 type {
-	Edge,
-	EdgeCss,
-	IntersectionEntry,
-	LayoutEdgesProps
-} from "../types/index.js"
-
-const $attrs = useAttrs()
-
-defineOptions({
-	inheritAttrs: false
-})
-
-const emit = defineEmits<{
-	dragStart: [e: PointerEvent, type:"edge", opts:{ edge?: Edge, intersection?: IntersectionEntry }]
-}>()
-
-const props = withDefaults(defineProps<LayoutEdgesProps>(), {
-	activeFrame: undefined,
-	draggingEdge: undefined,
-	draggingIntersection: undefined
-})
-
-
-// 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: { thin: EdgeCss, thick: EdgeCss }[] = []
-	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: {
-		thick: ReturnType<typeof getIntersectionsCss>[number]
-		thin: ReturnType<typeof getIntersectionsCss>[number]
-	}[] = []
-	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>
-