@witchcraft/layout 0.4.4 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/FrameDragHandle.vue +3 -3
  3. package/dist/runtime/components/LayoutDragEdgeGrabbed.vue +3 -3
  4. package/dist/runtime/components/LayoutDragEdgeHandle.d.vue.ts +2 -2
  5. package/dist/runtime/components/LayoutDragEdgeHandle.vue +2 -2
  6. package/dist/runtime/components/LayoutDragEdgeHandle.vue.d.ts +2 -2
  7. package/dist/runtime/components/LayoutDragEdges.vue +5 -5
  8. package/dist/runtime/components/LayoutEdgesActiveFrame.vue +2 -2
  9. package/dist/runtime/components/LayoutFrame.vue +2 -2
  10. package/dist/runtime/components/LayoutIntersectionHandle.d.vue.ts +2 -2
  11. package/dist/runtime/components/LayoutIntersectionHandle.vue +2 -2
  12. package/dist/runtime/components/LayoutIntersectionHandle.vue.d.ts +2 -2
  13. package/dist/runtime/components/LayoutIntersections.vue +4 -4
  14. package/dist/runtime/components/LayoutWindow.d.vue.ts +44 -44
  15. package/dist/runtime/components/LayoutWindow.vue +27 -27
  16. package/dist/runtime/components/LayoutWindow.vue.d.ts +44 -44
  17. package/dist/runtime/composables/useFrames.d.ts +107 -109
  18. package/dist/runtime/composables/useFrames.js +103 -99
  19. package/dist/runtime/demo/App.vue +16 -16
  20. package/dist/runtime/demo/DemoControls.d.vue.ts +2 -2
  21. package/dist/runtime/demo/DemoControls.vue +4 -4
  22. package/dist/runtime/demo/DemoControls.vue.d.ts +2 -2
  23. package/dist/runtime/helpers/createZoneSideClipPath.d.ts +2 -2
  24. package/dist/runtime/helpers/{findFrameDraggableEdges.d.ts → findFrameMoveableEdges.d.ts} +2 -2
  25. package/dist/runtime/helpers/{findFrameDraggableEdges.js → findFrameMoveableEdges.js} +3 -3
  26. package/dist/runtime/helpers/{findDraggableEdge.d.ts → findMoveableEdge.d.ts} +1 -1
  27. package/dist/runtime/helpers/{findDraggableEdge.js → findMoveableEdge.js} +1 -1
  28. package/dist/runtime/helpers/index.d.ts +2 -2
  29. package/dist/runtime/helpers/index.js +2 -2
  30. package/dist/runtime/layout/createSplitDecoFromDrag.d.ts +1 -1
  31. package/dist/runtime/layout/createSplitDecoFromDrag.js +2 -2
  32. package/dist/runtime/layout/findSafeSplitEdge.d.ts +1 -1
  33. package/dist/runtime/layout/findSafeSplitEdge.js +2 -2
  34. package/dist/runtime/layout/getCloseFrameInfo.js +4 -4
  35. package/dist/runtime/layout/getFrameRearrangeInfo.d.ts +2 -2
  36. package/dist/runtime/layout/getFrameRearrangeInfo.js +8 -8
  37. package/dist/runtime/layout/getFrameSplitInfo.d.ts +1 -1
  38. package/dist/runtime/layout/getFrameSplitInfo.js +2 -2
  39. package/dist/runtime/layout/{getFrameDragZones.d.ts → getFrameZones.d.ts} +3 -3
  40. package/dist/runtime/layout/{getFrameDragZones.js → getFrameZones.js} +1 -1
  41. package/dist/runtime/layout/{getWindowDragZones.d.ts → getWindowZones.d.ts} +1 -1
  42. package/dist/runtime/layout/{getWindowDragZones.js → getWindowZones.js} +1 -1
  43. package/dist/runtime/layout/getZones.d.ts +8 -0
  44. package/dist/runtime/layout/getZones.js +32 -0
  45. package/dist/runtime/layout/index.d.ts +3 -3
  46. package/dist/runtime/layout/index.js +3 -3
  47. package/dist/runtime/{drag/DragActionHandler.d.ts → move/ActionHandler.d.ts} +18 -21
  48. package/dist/runtime/{drag/DragActionHandler.js → move/ActionHandler.js} +17 -17
  49. package/dist/runtime/{drag → move}/CloseAction.d.ts +8 -8
  50. package/dist/runtime/{drag → move}/CloseAction.js +29 -26
  51. package/dist/runtime/{drag → move}/FrameDragAction.d.ts +8 -8
  52. package/dist/runtime/{drag → move}/FrameDragAction.js +23 -21
  53. package/dist/runtime/{drag/DragDirectionStore.d.ts → move/MoveDirectionStore.d.ts} +4 -4
  54. package/dist/runtime/{drag/DragDirectionStore.js → move/MoveDirectionStore.js} +9 -9
  55. package/dist/runtime/{drag → move}/SplitAction.d.ts +9 -9
  56. package/dist/runtime/{drag → move}/SplitAction.js +46 -43
  57. package/dist/runtime/{drag → move}/createDefaultHandlers.d.ts +2 -2
  58. package/dist/runtime/types/index.d.ts +185 -171
  59. package/dist/runtime/types/index.js +2 -2
  60. package/dist/runtime/types/vue.d.ts +14 -16
  61. package/dist/runtime/types/vue.js +1 -1
  62. package/package.json +1 -1
  63. package/src/runtime/components/FrameDragHandle.vue +3 -3
  64. package/src/runtime/components/LayoutDragEdgeGrabbed.vue +3 -3
  65. package/src/runtime/components/LayoutDragEdgeHandle.vue +4 -4
  66. package/src/runtime/components/LayoutDragEdges.vue +5 -5
  67. package/src/runtime/components/LayoutEdgesActiveFrame.vue +2 -2
  68. package/src/runtime/components/LayoutFrame.vue +2 -2
  69. package/src/runtime/components/LayoutIntersectionHandle.vue +4 -4
  70. package/src/runtime/components/LayoutIntersections.vue +4 -4
  71. package/src/runtime/components/LayoutWindow.vue +32 -32
  72. package/src/runtime/composables/useFrames.ts +108 -102
  73. package/src/runtime/demo/App.vue +18 -18
  74. package/src/runtime/demo/DemoControls.vue +5 -5
  75. package/src/runtime/helpers/createZoneSideClipPath.ts +2 -2
  76. package/src/runtime/helpers/{findFrameDraggableEdges.ts → findFrameMoveableEdges.ts} +4 -4
  77. package/src/runtime/helpers/{findDraggableEdge.ts → findMoveableEdge.ts} +1 -1
  78. package/src/runtime/helpers/index.ts +2 -2
  79. package/src/runtime/layout/createSplitDecoFromDrag.ts +2 -2
  80. package/src/runtime/layout/findSafeSplitEdge.ts +4 -4
  81. package/src/runtime/layout/getCloseFrameInfo.ts +4 -4
  82. package/src/runtime/layout/getFrameRearrangeInfo.ts +10 -10
  83. package/src/runtime/layout/getFrameSplitInfo.ts +5 -5
  84. package/src/runtime/layout/{getFrameDragZones.ts → getFrameZones.ts} +4 -4
  85. package/src/runtime/layout/{getWindowDragZones.ts → getWindowZones.ts} +1 -1
  86. package/src/runtime/layout/getZones.ts +48 -0
  87. package/src/runtime/layout/index.ts +3 -3
  88. package/src/runtime/{drag/DragActionHandler.ts → move/ActionHandler.ts} +42 -40
  89. package/src/runtime/{drag → move}/CloseAction.ts +39 -36
  90. package/src/runtime/{drag → move}/FrameDragAction.ts +36 -35
  91. package/src/runtime/{drag/DragDirectionStore.ts → move/MoveDirectionStore.ts} +10 -10
  92. package/src/runtime/{drag → move}/SplitAction.ts +56 -53
  93. package/src/runtime/{drag → move}/createDefaultHandlers.ts +2 -2
  94. package/src/runtime/types/index.ts +80 -69
  95. package/src/runtime/types/vue.ts +14 -14
  96. package/dist/runtime/layout/getDragZones.d.ts +0 -8
  97. package/dist/runtime/layout/getDragZones.js +0 -32
  98. package/src/runtime/layout/getDragZones.ts +0 -48
  99. /package/dist/runtime/{drag → move}/createDefaultHandlers.js +0 -0
@@ -8,10 +8,10 @@ import { oppositeSide } from "../helpers/oppositeSide.js";
8
8
  import { sideToDirection } from "../helpers/sideToDirection.js";
9
9
  import { LAYOUT_ERROR } from "../types/index.js";
10
10
  import { KnownError } from "../utils/KnownError.js";
11
- export function getFrameRearrangeInfo(win, draggingFrameId, hoveredFrameId, zoneSide) {
12
- const draggingFrame = { ...win.frames[draggingFrameId] };
11
+ export function getFrameRearrangeInfo(win, movingFrameId, hoveredFrameId, zoneSide) {
12
+ const draggingFrame = { ...win.frames[movingFrameId] };
13
13
  const hoveredFrame = { ...win.frames[hoveredFrameId] };
14
- if (draggingFrameId === hoveredFrameId) {
14
+ if (movingFrameId === hoveredFrameId) {
15
15
  if (zoneSide === "center") return new KnownError(LAYOUT_ERROR.CANT_SWAP_WITH_SELF, `Can't swap frame with self.`, { frame: hoveredFrame, zoneSide });
16
16
  }
17
17
  if (zoneSide === "center") {
@@ -25,10 +25,10 @@ export function getFrameRearrangeInfo(win, draggingFrameId, hoveredFrameId, zone
25
25
  };
26
26
  }
27
27
  if (draggingFrame.docked && !hoveredFrame.docked) {
28
- return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_DOCKED_WITH_NON_DOCKED, `Can't rearrange docked frame ${draggingFrameId} with non-docked frame ${hoveredFrameId}, can only swap.`, { draggingFrameId, hoveredFrameId, zoneSide });
28
+ return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_DOCKED_WITH_NON_DOCKED, `Can't rearrange docked frame ${movingFrameId} with non-docked frame ${hoveredFrameId}, can only swap.`, { movingFrameId, hoveredFrameId, zoneSide });
29
29
  }
30
30
  if (hoveredFrame.docked) {
31
- return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_WITH_DOCKED_EDGES, `Can't rearrange with docked frame ${hoveredFrameId} edge, can only swap.`, { draggingFrameId, hoveredFrameId, zoneSide });
31
+ return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_WITH_DOCKED_EDGES, `Can't rearrange with docked frame ${hoveredFrameId} edge, can only swap.`, { movingFrameId, hoveredFrameId, zoneSide });
32
32
  }
33
33
  const touchingSide = getSideTouching(draggingFrame, hoveredFrame);
34
34
  if (touchingSide) {
@@ -47,7 +47,7 @@ export function getFrameRearrangeInfo(win, draggingFrameId, hoveredFrameId, zone
47
47
  };
48
48
  }
49
49
  if (hoverOppositeSide === zoneSide) {
50
- return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_TO_SAME_RELATIVE_POSITION, `Frame ${draggingFrameId} is already on the ${zoneSide} of ${hoveredFrameId}`, { draggingFrameId, hoveredFrameId, zoneSide });
50
+ return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_TO_SAME_RELATIVE_POSITION, `Frame ${movingFrameId} is already on the ${zoneSide} of ${hoveredFrameId}`, { movingFrameId, hoveredFrameId, zoneSide });
51
51
  }
52
52
  }
53
53
  }
@@ -59,7 +59,7 @@ export function getFrameRearrangeInfo(win, draggingFrameId, hoveredFrameId, zone
59
59
  }
60
60
  const splitFrame = splitResult.modified[0];
61
61
  const newFrame = splitResult.created[0];
62
- if (draggingFrameId === hoveredFrameId) {
62
+ if (movingFrameId === hoveredFrameId) {
63
63
  return { ...splitResult, deleted: [], info: "split" };
64
64
  }
65
65
  hoveredFrame.x = splitFrame.x;
@@ -78,7 +78,7 @@ export function getFrameRearrangeInfo(win, draggingFrameId, hoveredFrameId, zone
78
78
  [draggingFrame.id]: draggingFrame
79
79
  }
80
80
  };
81
- const changes = getFillEmptySpaceInfo(winCopy, emptySpace, [hoveredFrameId, draggingFrameId]);
81
+ const changes = getFillEmptySpaceInfo(winCopy, emptySpace, [hoveredFrameId, movingFrameId]);
82
82
  if (changes instanceof KnownError) return changes;
83
83
  const notMissing = changes.modified.map((_) => _.id).filter((id) => id === hoveredFrame.id || draggingFrame.id);
84
84
  if (!notMissing.includes(hoveredFrame.id)) changes.modified.push(hoveredFrame);
@@ -5,4 +5,4 @@ import { KnownError } from "../utils/KnownError.js";
5
5
  *
6
6
  * Changes can be applied to a window with {@link applyFrameChanges}.
7
7
  */
8
- export declare function getFrameSplitInfo(frame: LayoutFrame, dir: Direction, dragPointOrPosition?: Point | number | "midpoint", minSize?: Size, snapAmount?: Point): LayoutChange | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL> | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME>;
8
+ export declare function getFrameSplitInfo(frame: LayoutFrame, dir: Direction, movePointOrPosition?: Point | number | "midpoint", minSize?: Size, snapAmount?: Point): LayoutChange | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL> | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME>;
@@ -6,7 +6,7 @@ import {
6
6
  LAYOUT_ERROR
7
7
  } from "../types/index.js";
8
8
  import { KnownError } from "../utils/KnownError.js";
9
- export function getFrameSplitInfo(frame, dir, dragPointOrPosition = "midpoint", minSize = settings.minSizeScaled, snapAmount = settings.snapPointScaled) {
9
+ export function getFrameSplitInfo(frame, dir, movePointOrPosition = "midpoint", minSize = settings.minSizeScaled, snapAmount = settings.snapPointScaled) {
10
10
  if (frame.docked) {
11
11
  return new KnownError(
12
12
  LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME,
@@ -19,7 +19,7 @@ export function getFrameSplitInfo(frame, dir, dragPointOrPosition = "midpoint",
19
19
  const isHorz = dir === "left" || dir === "right";
20
20
  const sizeKey = isHorz ? "width" : "height";
21
21
  const posKey = isHorz ? "x" : "y";
22
- const position = dragPointOrPosition === "midpoint" ? isHorz ? frame.x + frame.width / 2 : frame.y + frame.height / 2 : typeof dragPointOrPosition === "number" ? dragPointOrPosition : dragPointOrPosition[isHorz ? "x" : "y"];
22
+ const position = movePointOrPosition === "midpoint" ? isHorz ? frame.x + frame.width / 2 : frame.y + frame.height / 2 : typeof movePointOrPosition === "number" ? movePointOrPosition : movePointOrPosition[isHorz ? "x" : "y"];
23
23
  const safePosition = findSafeSplitEdgeAndPosition(
24
24
  frame,
25
25
  dir,
@@ -1,4 +1,4 @@
1
- import type { DragZone } from "../types/index.js";
1
+ import type { Zone } from "../types/index.js";
2
2
  /**
3
3
  * Returns frame drag zones (in **unrounded** scaled coordinate space).
4
4
  *
@@ -8,9 +8,9 @@ import type { DragZone } from "../types/index.js";
8
8
  *
9
9
  * Unrounded because these are for display purposes only.
10
10
  */
11
- export declare function getFrameDragZones(frame: {
11
+ export declare function getFrameZones(frame: {
12
12
  x: number;
13
13
  y: number;
14
14
  width: number;
15
15
  height: number;
16
- }, thresholdPx: number, windowPxWidth: number, windowPxHeight: number): DragZone[];
16
+ }, thresholdPx: number, windowPxWidth: number, windowPxHeight: number): Zone[];
@@ -1,5 +1,5 @@
1
1
  import { settings } from "../settings.js";
2
- export function getFrameDragZones(frame, thresholdPx, windowPxWidth, windowPxHeight) {
2
+ export function getFrameZones(frame, thresholdPx, windowPxWidth, windowPxHeight) {
3
3
  const thX = thresholdPx / windowPxWidth * settings.maxInt;
4
4
  const thY = thresholdPx / windowPxHeight * settings.maxInt;
5
5
  const pxWidth = frame.width / settings.maxInt * windowPxWidth;
@@ -3,4 +3,4 @@ import type { LayoutWindow, WindowEdgeZone } from "../types/index.js";
3
3
  * Returns window edge drag zones (in scaled coordinates)
4
4
  *
5
5
  */
6
- export declare function getWindowDragZones(win: LayoutWindow, thresholdPx: number): WindowEdgeZone[];
6
+ export declare function getWindowZones(win: LayoutWindow, thresholdPx: number): WindowEdgeZone[];
@@ -1,6 +1,6 @@
1
1
  import { numberToScaledPercent } from "../helpers/numberToScaledPercent.js";
2
2
  import { settings } from "../settings.js";
3
- export function getWindowDragZones(win, thresholdPx) {
3
+ export function getWindowZones(win, thresholdPx) {
4
4
  const thX = numberToScaledPercent(thresholdPx, win.pxWidth);
5
5
  const thY = numberToScaledPercent(thresholdPx, win.pxHeight);
6
6
  const maxInt = settings.maxInt;
@@ -0,0 +1,8 @@
1
+ import type { MoveState, Zone } from "../types/index.js";
2
+ /**
3
+ * Find the drag zone under the drag point.
4
+ */
5
+ export declare function getZones(state: Pick<MoveState, "movePoint" | "moveHoveredFrame" | "frames" | "win">, { frameEdgePx, windowEdgePx }: {
6
+ frameEdgePx: number;
7
+ windowEdgePx: number;
8
+ }): Zone | undefined;
@@ -0,0 +1,32 @@
1
+ import { getFrameZones } from "./getFrameZones.js";
2
+ import { getWindowZones } from "./getWindowZones.js";
3
+ import { isPointInRect } from "./isPointInRect.js";
4
+ export function getZones(state, { frameEdgePx, windowEdgePx }) {
5
+ const { movePoint, win } = state;
6
+ const frameId = state.moveHoveredFrame?.id;
7
+ if (!frameId) return;
8
+ const frame = state.frames[frameId];
9
+ if (!frame || !movePoint) return;
10
+ const frameZones = getFrameZones(frame, frameEdgePx, win.pxWidth, win.pxHeight);
11
+ const windowZones = getWindowZones(win, windowEdgePx);
12
+ let matchedZone;
13
+ for (const zone of windowZones) {
14
+ if (isPointInRect(zone, movePoint)) {
15
+ matchedZone = {
16
+ ...zone,
17
+ type: "window"
18
+ };
19
+ break;
20
+ }
21
+ }
22
+ if (!matchedZone) {
23
+ for (const zone of frameZones) {
24
+ if (isPointInRect(zone, movePoint)) {
25
+ matchedZone = zone;
26
+ break;
27
+ }
28
+ }
29
+ }
30
+ if (!matchedZone) return void 0;
31
+ return matchedZone;
32
+ }
@@ -7,11 +7,11 @@ export { findSafeSplitEdgeAndPosition } from "./findSafeSplitEdge.js";
7
7
  export { findVisualEdge } from "./findVisualEdge.js";
8
8
  export { frameCreate } from "./frameCreate.js";
9
9
  export { getCloseFrameInfo } from "./getCloseFrameInfo.js";
10
- export { getDragZones } from "./getDragZones.js";
10
+ export { getZones } from "./getZones.js";
11
11
  export { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js";
12
12
  export { getFrameCollapseInfo } from "./getFrameCollapseInfo.js";
13
13
  export { getFrameDockInfo } from "./getFrameDockInfo.js";
14
- export { getFrameDragZones } from "./getFrameDragZones.js";
14
+ export { getFrameZones } from "./getFrameZones.js";
15
15
  export { getFrameExpandInfo } from "./getFrameExpandInfo.js";
16
16
  export { getFrameRearrangeInfo } from "./getFrameRearrangeInfo.js";
17
17
  export { getFrameShrinkInfo } from "./getFrameShrinkInfo.js";
@@ -23,7 +23,7 @@ export { getFrameUncollapseInfo } from "./getFrameUncollapseInfo.js";
23
23
  export { getFrameUndockInfo } from "./getFrameUndockInfo.js";
24
24
  export { getRelaxFramesInfo } from "./getRelaxFramesInfo.js";
25
25
  export { getUpdateWindowSizeInfo } from "./getUpdateWindowSizeInfo.js";
26
- export { getWindowDragZones } from "./getWindowDragZones.js";
26
+ export { getWindowZones } from "./getWindowZones.js";
27
27
  export { isPointInRect } from "./isPointInRect.js";
28
28
  export { layoutAddWindow } from "./layoutAddWindow.js";
29
29
  export { layoutCreate } from "./layoutCreate.js";
@@ -7,11 +7,11 @@ export { findSafeSplitEdgeAndPosition } from "./findSafeSplitEdge.js";
7
7
  export { findVisualEdge } from "./findVisualEdge.js";
8
8
  export { frameCreate } from "./frameCreate.js";
9
9
  export { getCloseFrameInfo } from "./getCloseFrameInfo.js";
10
- export { getDragZones } from "./getDragZones.js";
10
+ export { getZones } from "./getZones.js";
11
11
  export { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js";
12
12
  export { getFrameCollapseInfo } from "./getFrameCollapseInfo.js";
13
13
  export { getFrameDockInfo } from "./getFrameDockInfo.js";
14
- export { getFrameDragZones } from "./getFrameDragZones.js";
14
+ export { getFrameZones } from "./getFrameZones.js";
15
15
  export { getFrameExpandInfo } from "./getFrameExpandInfo.js";
16
16
  export { getFrameRearrangeInfo } from "./getFrameRearrangeInfo.js";
17
17
  export { getFrameShrinkInfo } from "./getFrameShrinkInfo.js";
@@ -23,7 +23,7 @@ export { getFrameUncollapseInfo } from "./getFrameUncollapseInfo.js";
23
23
  export { getFrameUndockInfo } from "./getFrameUndockInfo.js";
24
24
  export { getRelaxFramesInfo } from "./getRelaxFramesInfo.js";
25
25
  export { getUpdateWindowSizeInfo } from "./getUpdateWindowSizeInfo.js";
26
- export { getWindowDragZones } from "./getWindowDragZones.js";
26
+ export { getWindowZones } from "./getWindowZones.js";
27
27
  export { isPointInRect } from "./isPointInRect.js";
28
28
  export { layoutAddWindow } from "./layoutAddWindow.js";
29
29
  export { layoutCreate } from "./layoutCreate.js";
@@ -1,16 +1,16 @@
1
1
  import { type RecordFromArray } from "@alanscodelog/utils";
2
- import type { DragChangeHandler, DragChangeResult, DragState, Edge, IDragAction, LayoutFrame, LayoutShape } from "../types/index.js";
2
+ import type { ActionHandlerApplyResult, Edge, IAction, LayoutFrame, LayoutShape, MoveChangeHandler, MoveChangeResult, MoveState } from "../types/index.js";
3
3
  /**
4
- * Handles the lifecycle of a drag actions {@link IDragAction} and provides additional hooks.
4
+ * Handles the lifecycle of a drag actions {@link IAction} and provides additional hooks.
5
5
  *
6
6
  * The first action instance that can handle the request is passed control of the event handlers until the request changes.
7
7
  */
8
- export declare class DragActionHandler<TRawDragActions extends IDragAction[], TDragActions extends RecordFromArray<TRawDragActions, "name"> = RecordFromArray<TRawDragActions, "name">> {
9
- activeAction?: keyof TDragActions;
10
- actions: TDragActions;
11
- eventCanceller: ((e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void) | undefined;
12
- boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void;
13
- defaultOnDragChange: DragChangeHandler;
8
+ export declare class ActionHandler<TRawActions extends IAction[], TActions extends RecordFromArray<TRawActions, "name"> = RecordFromArray<TRawActions, "name">> {
9
+ activeAction?: keyof TActions;
10
+ actions: TActions;
11
+ eventCanceller: ((e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void) | undefined;
12
+ boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void;
13
+ defaultOnMoveChange: MoveChangeHandler;
14
14
  hooks: {
15
15
  /** Called while dragging during dragChange events. You can use this to update the dragging edges. */
16
16
  onRecalculate?: () => void;
@@ -21,7 +21,7 @@ export declare class DragActionHandler<TRawDragActions extends IDragAction[], TD
21
21
  */
22
22
  onEvent?: (e: PointerEvent | KeyboardEvent | undefined, cancel: () => void) => void;
23
23
  /** Called when the action requested changes. */
24
- onRequestChange?: (type: keyof TDragActions | undefined) => void;
24
+ onRequestChange?: (type: keyof TActions | undefined) => void;
25
25
  /** Called when the drag action ends either because it was completed or cancelled. */
26
26
  onEnd?: (context: {
27
27
  cancelled: boolean;
@@ -30,30 +30,27 @@ export declare class DragActionHandler<TRawDragActions extends IDragAction[], TD
30
30
  };
31
31
  /** All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity. */
32
32
  shapes: LayoutShape[];
33
- /** All hint/error text from all actions, updated on every onDragChange. If using vue you can set this to a reactive object for reactivity. */
33
+ /** All hint/error text from all actions, updated on every onMoveChange. If using vue you can set this to a reactive object for reactivity. */
34
34
  textHints: {
35
35
  actions: string[];
36
36
  errors: string[];
37
37
  };
38
- constructor(actions: TRawDragActions, hooks?: DragActionHandler<TRawDragActions, TDragActions>["hooks"],
38
+ constructor(actions: TRawActions, hooks?: ActionHandler<TRawActions, TActions>["hooks"],
39
39
  /**
40
- * Default onDragChange handler for when no action can handle the request.
40
+ * Default onMoveChange handler for when no action can handle the request.
41
41
  *
42
42
  * Should return true to allow the edges to be moved, or false to prevent it.
43
43
  *
44
44
  * The default prevents movement when the edge is a window edge and when the edge is touching a collapsed frame.
45
45
  */
46
- defaultOnDragChange?: DragChangeHandler);
47
- eventHandler(e: KeyboardEvent | PointerEvent, state: DragState, forceRecalculateEdges: () => void): undefined;
48
- onDragChange<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): DragChangeResult;
46
+ defaultOnMoveChange?: MoveChangeHandler);
47
+ eventHandler(e: KeyboardEvent | PointerEvent, state: MoveState, forceRecalculateEdges: () => void): undefined;
48
+ onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void): MoveChangeResult;
49
49
  setTextHints(type: "start" | "move" | "end"): void;
50
50
  annotateEdges(edges: Edge[], frames: LayoutFrame[]): void;
51
- onDragApply(state: DragState, forceRecalculateEdges: () => void): {
52
- apply: boolean;
53
- result: any;
54
- };
55
- cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void;
56
- static debugState(pluginName: string, type: "before" | "after" | string, state: DragState, pluginState?: Record<string, any>,
51
+ onMoveApply(state: MoveState, forceRecalculateEdges: () => void): ActionHandlerApplyResult;
52
+ cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void;
53
+ static debugState(pluginName: string, type: "before" | "after" | string, state: MoveState, pluginState?: Record<string, any>,
57
54
  /** Object key to filter the state by, e.g. state.win.frames. If false is ignored. The idea is you pass this.debug and users can set this.debug to a string to filter. */
58
55
  key?: string | boolean): void;
59
56
  }
@@ -3,30 +3,30 @@ import { isWindowEdge } from "../helpers/isWindowEdge.js";
3
3
  import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js";
4
4
  import { LAYOUT_ERROR } from "../types/index.js";
5
5
  import { KnownError } from "../utils/KnownError.js";
6
- export class DragActionHandler {
6
+ export class ActionHandler {
7
7
  activeAction;
8
8
  actions;
9
9
  eventCanceller = void 0;
10
10
  boundCancel;
11
- defaultOnDragChange = (type, _e, state, _forceRecalculateEdges, _cancel) => {
12
- const isTouchingCollapsedFrameEdge = type === "move" && state.isDragging === "edge" && state.touchingFramesArrays.some(
11
+ defaultOnMoveChange = (type, _e, state, _forceRecalculateEdges, _cancel) => {
12
+ const isTouchingCollapsedFrameEdge = type === "move" && state.isMoving === "edge" && state.touchingFramesArrays.some(
13
13
  (frames) => (
14
14
  // we check with a falsy check on PURPOSE, frames collapsed to 0 aren't an issue, they are ignored anyways
15
15
  Object.values(frames).some((f) => f.collapsed)
16
16
  )
17
17
  );
18
18
  return {
19
- updateEdges: type === "move" ? !(state.isDraggingFromWindowEdge || isTouchingCollapsedFrameEdge) : true,
19
+ updateEdges: type === "move" ? !(state.isMovingFromWindowEdge || isTouchingCollapsedFrameEdge) : true,
20
20
  shapes: []
21
21
  };
22
22
  };
23
23
  hooks;
24
24
  /** All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity. */
25
25
  shapes = [];
26
- /** All hint/error text from all actions, updated on every onDragChange. If using vue you can set this to a reactive object for reactivity. */
26
+ /** All hint/error text from all actions, updated on every onMoveChange. If using vue you can set this to a reactive object for reactivity. */
27
27
  textHints = { actions: [], errors: [] };
28
- constructor(actions, hooks = {}, defaultOnDragChange) {
29
- if (defaultOnDragChange) this.defaultOnDragChange = defaultOnDragChange;
28
+ constructor(actions, hooks = {}, defaultOnMoveChange) {
29
+ if (defaultOnMoveChange) this.defaultOnMoveChange = defaultOnMoveChange;
30
30
  this.hooks = hooks;
31
31
  this.actions = {};
32
32
  for (const action of actions) {
@@ -35,7 +35,7 @@ export class DragActionHandler {
35
35
  this.boundCancel = this.cancel.bind(this);
36
36
  }
37
37
  eventHandler(e, state, forceRecalculateEdges) {
38
- if (state.isDragging) {
38
+ if (state.isMoving) {
39
39
  e.preventDefault();
40
40
  }
41
41
  let cancelled = false;
@@ -62,29 +62,29 @@ export class DragActionHandler {
62
62
  }
63
63
  this.hooks.onRequestChange?.(this.activeAction);
64
64
  }
65
- if (state.isDragging) {
65
+ if (state.isMoving) {
66
66
  forceRecalculateEdges();
67
67
  this.hooks.onRecalculate?.();
68
68
  }
69
69
  return void 0;
70
70
  }
71
- onDragChange(type, e, state, forceRecalculateEdges, cancel) {
71
+ onMoveChange(type, e, state, forceRecalculateEdges, cancel, resolve) {
72
72
  if (type === "start") {
73
73
  this.eventCanceller = cancel;
74
74
  this.eventHandler(e, state, forceRecalculateEdges);
75
75
  }
76
- if (type === "end") {
77
- this.activeAction = void 0;
78
- }
79
76
  if (this.activeAction) {
80
- const res2 = this.actions[this.activeAction].onDragChange(type, e, state, forceRecalculateEdges, this.boundCancel);
77
+ const res2 = this.actions[this.activeAction].onMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel, resolve);
81
78
  this.shapes.splice(0, this.shapes.length, ...res2.shapes);
82
79
  this.setTextHints(type);
83
80
  return res2;
84
81
  }
85
82
  this.setTextHints(type);
86
- const res = this.defaultOnDragChange(type, e, state, forceRecalculateEdges, this.boundCancel);
83
+ const res = this.defaultOnMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel, resolve);
87
84
  this.shapes.splice(0, this.shapes.length, ...res.shapes);
85
+ if (type === "end") {
86
+ this.activeAction = void 0;
87
+ }
88
88
  return res;
89
89
  }
90
90
  setTextHints(type) {
@@ -118,9 +118,9 @@ export class DragActionHandler {
118
118
  }
119
119
  }
120
120
  }
121
- onDragApply(state, forceRecalculateEdges) {
121
+ onMoveApply(state, forceRecalculateEdges) {
122
122
  if (this.activeAction) {
123
- const res = this.actions[this.activeAction].onDragApply(state, forceRecalculateEdges);
123
+ const res = this.actions[this.activeAction].onMoveApply(state, forceRecalculateEdges);
124
124
  this.hooks.onEnd?.({ cancelled: false, applied: res });
125
125
  return { apply: res, result: void 0 };
126
126
  }
@@ -1,8 +1,8 @@
1
1
  import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js";
2
- import type { ActionDragChangeResult, CloseDeco, DragState, IDragAction } from "../types/index.js";
2
+ import type { ActionChangeResult, CloseDeco, IAction, MoveState } from "../types/index.js";
3
3
  import type { KnownError } from "../utils/KnownError.js";
4
4
  export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError>;
5
- export declare class CloseAction implements IDragAction {
5
+ export declare class CloseAction implements IAction {
6
6
  name: "close";
7
7
  minDragDistance: number;
8
8
  state: {
@@ -10,13 +10,13 @@ export declare class CloseAction implements IDragAction {
10
10
  force: boolean;
11
11
  res: CloseInfo;
12
12
  cacheKey: string | undefined;
13
- lastReturn: ActionDragChangeResult;
13
+ lastReturn: ActionChangeResult;
14
14
  } | {
15
15
  allowed: false;
16
16
  force: boolean;
17
17
  res: CloseInfo | undefined;
18
18
  cacheKey: string | undefined;
19
- lastReturn: ActionDragChangeResult | undefined;
19
+ lastReturn: ActionChangeResult | undefined;
20
20
  };
21
21
  debug: boolean | string;
22
22
  textHints: {
@@ -29,7 +29,7 @@ export declare class CloseAction implements IDragAction {
29
29
  }) => string[]);
30
30
  transformError: (e: KnownError) => string;
31
31
  };
32
- handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean | "force";
32
+ handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean | "force";
33
33
  modifyDecos: (shapes: CloseDeco[]) => void;
34
34
  hooks: {
35
35
  onStart?: (active: boolean) => void;
@@ -51,8 +51,8 @@ export declare class CloseAction implements IDragAction {
51
51
  actions: string[];
52
52
  errors: string[];
53
53
  };
54
- canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean;
55
- onDragChange(_type: "start" | "end" | "move", _e: PointerEvent | undefined, state: DragState): ActionDragChangeResult;
56
- onDragApply(state: DragState): boolean;
54
+ canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
55
+ onMoveChange(type: "start" | "end" | "move", _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
56
+ onMoveApply(state: MoveState): boolean;
57
57
  cancel(): void;
58
58
  }
@@ -1,4 +1,4 @@
1
- import { DragActionHandler } from "./DragActionHandler.js";
1
+ import { ActionHandler } from "./ActionHandler.js";
2
2
  import { dirToOrientation } from "../helpers/dirToOrientation.js";
3
3
  import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
4
4
  import { oppositeSide } from "../helpers/oppositeSide.js";
@@ -46,8 +46,8 @@ export class CloseAction {
46
46
  }
47
47
  _getDecos(state) {
48
48
  let decos = [];
49
- const { isDragging } = state;
50
- if (isDragging && this.state.allowed && this.state.res) {
49
+ const { isMoving } = state;
50
+ if (isMoving && this.state.allowed && this.state.res) {
51
51
  const { force } = this.state;
52
52
  decos = this.state.res.deleted.map((_) => ({
53
53
  id: _.id,
@@ -86,11 +86,11 @@ export class CloseAction {
86
86
  return this.textHints;
87
87
  }
88
88
  canHandleRequest(e, state) {
89
- const { draggingEdges } = state;
90
- if (draggingEdges.length !== 1) return false;
89
+ const { movingEdges } = state;
90
+ if (movingEdges.length !== 1) return false;
91
91
  const res = this.handleEvent(e, state);
92
92
  this.state.force = res === "force";
93
- this.setTextHints(state.isDragging === "edge" ? true : void 0);
93
+ this.setTextHints(state.isMoving === "edge" ? true : void 0);
94
94
  if (res) {
95
95
  this.hooks.onStart?.(true);
96
96
  return true;
@@ -98,42 +98,46 @@ export class CloseAction {
98
98
  this.reset();
99
99
  return false;
100
100
  }
101
- onDragChange(_type, _e, state) {
102
- if (state.dragDistance <= this.minDragDistance) {
101
+ onMoveChange(type, _e, state) {
102
+ if (type === "end") {
103
+ this.reset();
104
+ return { shapes: [] };
105
+ }
106
+ if (state.moveDistance <= this.minDragDistance) {
103
107
  return { updateEdges: false, shapes: [] };
104
108
  }
105
109
  const {
106
110
  touchingFramesArrays,
107
- dragDirections,
108
- isDragging,
109
- draggingEdges,
111
+ moveDirections,
112
+ isMoving,
113
+ movingEdges,
110
114
  visualEdges,
111
115
  frames,
112
- isDraggingFromWindowEdge,
113
- dragPoint
116
+ isMovingFromWindowEdge,
117
+ movePoint
114
118
  } = state;
115
- const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]));
116
- const cacheKey = `${dragPoint?.x}-${dragPoint?.y}-${dragDirections[oppositeOrientation]}-${this.state.force}`;
119
+ const oppositeOrientation = oppositeSide(getEdgeOrientation(movingEdges[0]));
120
+ const cacheKey = `${movePoint?.x}-${movePoint?.y}-${moveDirections[oppositeOrientation]}-${this.state.force}`;
117
121
  if (this.state.allowed) {
118
122
  if (this.state.cacheKey === cacheKey) {
119
123
  return this.state.lastReturn;
120
124
  }
121
125
  }
122
- if (isDragging && draggingEdges.length === 1) {
126
+ if (isMoving && movingEdges.length === 1) {
123
127
  const res = findFramesTouchingEdge(
124
- draggingEdges[0],
128
+ movingEdges[0],
125
129
  touchingFramesArrays[0],
126
130
  {
127
- // referencePoint: dragPoint.value, // if force pick smallest frame?
128
- searchDirections: [dragDirections[oppositeOrientation]]
131
+ // referencePoint: movePoint.value, // if force pick smallest frame?
132
+ searchDirections: [moveDirections[oppositeOrientation]]
129
133
  }
130
134
  );
131
135
  if (res.length > 0) {
132
- const orientation = dirToOrientation(dragDirections[oppositeOrientation]);
136
+ const orientation = dirToOrientation(moveDirections[oppositeOrientation]);
133
137
  const sizeKey = orientation === "horizontal" ? "width" : "height";
134
138
  const smallestFrameSize = Math.min(...res.map((_) => _.frame[sizeKey]));
135
139
  const frame = res.find((_) => _.frame[sizeKey] === smallestFrameSize).frame;
136
- const closeInfo = getCloseFrameInfo(Object.values(frames), visualEdges, frame, dragDirections[oppositeOrientation], "dir", this.state.force);
140
+ const closeInfo = getCloseFrameInfo(Object.values(frames), visualEdges, frame, moveDirections[oppositeOrientation], "dir", this.state.force);
137
141
  this.state.cacheKey = cacheKey;
138
142
  this.setTextHints(closeInfo);
139
143
  if (!(closeInfo instanceof Error)) {
@@ -148,20 +152,19 @@ export class CloseAction {
148
152
  }
149
153
  }
150
154
  const decos = this._getDecos(state);
151
- this.state.lastReturn = { updateEdges: !isDraggingFromWindowEdge, shapes: decos.flatMap((_) => _.shapes) };
155
+ this.state.lastReturn = { updateEdges: !isMovingFromWindowEdge, shapes: decos.flatMap((_) => _.shapes) };
152
156
  return this.state.lastReturn;
153
157
  }
154
- onDragApply(state) {
158
+ onMoveApply(state) {
155
159
  if (this.state.res) {
156
160
  const win = state.win;
157
161
  if (this.debug) {
158
- DragActionHandler.debugState(this.name, "before", state, this.state, this.debug);
162
+ ActionHandler.debugState(this.name, "before", state, this.state, this.debug);
159
163
  }
160
164
  applyFrameChanges(win, this.state.res);
161
165
  if (this.debug) {
162
- DragActionHandler.debugState(this.name, "after", state, this.state, this.debug);
166
+ ActionHandler.debugState(this.name, "after", state, this.state, this.debug);
163
167
  }
164
- this.reset();
165
168
  return true;
166
169
  }
167
170
  return false;
@@ -1,6 +1,6 @@
1
- import type { ActionDragChangeResult, DragState, DragZone, FrameDragDeco, IDragAction, LayoutChange } from "../types/index.js";
1
+ import type { ActionChangeResult, FrameDeco, IAction, LayoutChange, MoveState, Zone } from "../types/index.js";
2
2
  import type { KnownError } from "../utils/KnownError.js";
3
- export declare class FrameDragAction implements IDragAction {
3
+ export declare class FrameDragAction implements IAction {
4
4
  name: "frameDrag";
5
5
  minDragDistance: number;
6
6
  state: {
@@ -11,7 +11,7 @@ export declare class FrameDragAction implements IDragAction {
11
11
  actions: string[];
12
12
  errors: string[];
13
13
  };
14
- handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
14
+ handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean;
15
15
  dragHints: {
16
16
  actions: {
17
17
  split?: string;
@@ -23,7 +23,7 @@ export declare class FrameDragAction implements IDragAction {
23
23
  }) => string[]);
24
24
  transformError: (e: KnownError) => string;
25
25
  };
26
- modifyDecos: (shapes: FrameDragDeco[]) => void;
26
+ modifyDecos: (shapes: FrameDeco[]) => void;
27
27
  hooks: {
28
28
  onStart?: () => void;
29
29
  onCancel?: () => void;
@@ -42,9 +42,9 @@ export declare class FrameDragAction implements IDragAction {
42
42
  actions: string[];
43
43
  errors: string[];
44
44
  };
45
- getDecos(matchedZone: DragZone | undefined, state: DragState, result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): FrameDragDeco[];
46
- canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean;
47
- onDragChange<T extends "start" | "move" | "end">(_type: T, _e: PointerEvent | undefined, state: DragState): ActionDragChangeResult;
48
- onDragApply(state: DragState): boolean;
45
+ getDecos(matchedZone: Zone | undefined, state: MoveState, result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): FrameDeco[];
46
+ canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
47
+ onMoveChange<T extends "start" | "move" | "end">(type: T, _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
48
+ onMoveApply(state: MoveState): boolean;
49
49
  cancel(): void;
50
50
  }