@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
@@ -1,7 +1,6 @@
1
1
  import { debounce } from "@alanscodelog/utils/debounce";
2
2
  import { keys } from "@alanscodelog/utils/keys";
3
3
  import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
4
- import { DragDirectionStore } from "../drag/DragDirectionStore.js";
5
4
  import { cloneFrame } from "../helpers/cloneFrame.js";
6
5
  import { getIntersections } from "../helpers/getIntersections.js";
7
6
  import { getVisualEdges } from "../helpers/getVisualEdges.js";
@@ -10,8 +9,9 @@ import { moveEdge } from "../helpers/moveEdge.js";
10
9
  import { toWindowCoord } from "../helpers/toWindowCoord.js";
11
10
  import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js";
12
11
  import { isPointInRect } from "../layout/isPointInRect.js";
12
+ import { MoveDirectionStore } from "../move/MoveDirectionStore.js";
13
13
  export function useFrames(win, handler) {
14
- const draggingEdges = ref([]);
14
+ const movingEdges = ref([]);
15
15
  const touchingFrames = ref([]);
16
16
  const allTouchingFrames = computed(() => {
17
17
  const result = {};
@@ -23,23 +23,23 @@ export function useFrames(win, handler) {
23
23
  return result;
24
24
  });
25
25
  const touchingFramesArrays = computed(() => touchingFrames.value.map((entry) => Object.values(entry)));
26
- const isDragging = ref(false);
27
- const showDragging = ref(false);
28
- const dragPoint = ref();
29
- const dragDirections = ref({});
30
- let dragStartPoint;
31
- const dragDistance = ref(-1);
32
- const draggingIntersection = ref(void 0);
33
- const isDraggingFromWindowEdge = ref(false);
34
- const frameDragFrameId = ref();
26
+ const isMoving = ref(false);
27
+ const showMoving = ref(false);
28
+ const movePoint = ref();
29
+ const moveDirections = ref({});
30
+ let moveStartPoint;
31
+ const moveDistance = ref(-1);
32
+ const movingIntersection = ref(void 0);
33
+ const isMovingFromWindowEdge = ref(false);
34
+ const movingFrameId = ref();
35
35
  const eventContext = ref();
36
36
  const frames = computed(
37
- () => isDragging.value && showDragging.value ? { ...win.value.frames, ...allTouchingFrames.value } : win.value.frames
37
+ () => isMoving.value && showMoving.value ? { ...win.value.frames, ...allTouchingFrames.value } : win.value.frames
38
38
  );
39
- const dragHoveredFrame = computed(() => {
40
- if (isDragging.value) {
39
+ const moveHoveredFrame = computed(() => {
40
+ if (isMoving.value) {
41
41
  for (const id of keys(frames.value)) {
42
- if (isPointInRect(frames.value[id], dragPoint.value)) {
42
+ if (isPointInRect(frames.value[id], movePoint.value)) {
43
43
  return frames.value[id];
44
44
  }
45
45
  }
@@ -48,62 +48,62 @@ export function useFrames(win, handler) {
48
48
  });
49
49
  const visualEdges = ref([]);
50
50
  const intersections = computed(() => getIntersections(visualEdges.value));
51
- const debounceGetDraggableEdges = debounce((f) => {
51
+ const debounceGetMoveableEdges = debounce((f) => {
52
52
  visualEdges.value = getVisualEdges(f, { includeWindowEdges: true });
53
53
  handler.annotateEdges?.(visualEdges.value, f);
54
54
  }, 50, {});
55
- watch([isDragging, frames], () => {
56
- if (isDragging.value) return;
57
- debounceGetDraggableEdges(Object.values(frames.value));
55
+ watch([isMoving, frames], () => {
56
+ if (isMoving.value) return;
57
+ debounceGetMoveableEdges(Object.values(frames.value));
58
58
  }, { deep: true });
59
- debounceGetDraggableEdges(Object.values(frames.value));
59
+ debounceGetMoveableEdges(Object.values(frames.value));
60
60
  function forceRecalculateEdges() {
61
61
  visualEdges.value = getVisualEdges(Object.values(frames.value), { includeWindowEdges: true });
62
62
  handler.annotateEdges?.(visualEdges.value, Object.values(frames.value));
63
63
  }
64
- const dragDirStore = new DragDirectionStore({
65
- onUpdate: (dir) => dragDirections.value = dir
64
+ const moveDirStore = new MoveDirectionStore({
65
+ onUpdate: (dir) => moveDirections.value = dir
66
66
  });
67
67
  const state = computed(() => ({
68
- dragDirections: dragDirections.value,
69
- dragPoint: dragPoint.value,
70
- dragDistance: dragDistance.value,
71
- isDragging: isDragging.value,
72
- showDragging: showDragging.value,
73
- draggingFrameId: frameDragFrameId.value,
74
- draggingEdges: draggingEdges.value,
75
- draggingIntersection: draggingIntersection.value,
68
+ moveDirections: moveDirections.value,
69
+ movePoint: movePoint.value,
70
+ moveDistance: moveDistance.value,
71
+ isMoving: isMoving.value,
72
+ showMoving: showMoving.value,
73
+ movingFrameId: movingFrameId.value,
74
+ movingEdges: movingEdges.value,
75
+ movingIntersection: movingIntersection.value,
76
76
  visualEdges: visualEdges.value,
77
77
  touchingFrames: touchingFrames.value,
78
78
  touchingFramesArrays: touchingFramesArrays.value,
79
79
  frames: frames.value,
80
- dragHoveredFrame: dragHoveredFrame.value,
80
+ moveHoveredFrame: moveHoveredFrame.value,
81
81
  intersections: intersections.value,
82
- isDraggingFromWindowEdge: isDraggingFromWindowEdge.value,
82
+ isMovingFromWindowEdge: isMovingFromWindowEdge.value,
83
83
  eventContext: eventContext.value,
84
84
  win: win.value
85
85
  }));
86
86
  let controller;
87
- let dragResolve;
88
- let dragResult;
87
+ let moveResolve;
88
+ let moveResult;
89
89
  function resetState() {
90
- dragStartPoint = void 0;
91
- dragResolve?.(dragResult);
92
- dragResolve = void 0;
93
- dragResult = void 0;
94
- draggingEdges.value = [];
95
- draggingIntersection.value = void 0;
96
- isDragging.value = false;
97
- dragPoint.value = void 0;
98
- dragDistance.value = -1;
90
+ moveStartPoint = void 0;
91
+ moveResolve?.(moveResult);
92
+ moveResolve = void 0;
93
+ moveResult = void 0;
94
+ movingEdges.value = [];
95
+ movingIntersection.value = void 0;
96
+ isMoving.value = false;
97
+ movePoint.value = void 0;
98
+ moveDistance.value = -1;
99
99
  touchingFrames.value = [];
100
- frameDragFrameId.value = void 0;
100
+ movingFrameId.value = void 0;
101
101
  eventContext.value = void 0;
102
- dragDirStore.reset();
103
- showDragging.value = false;
102
+ moveDirStore.reset();
103
+ showMoving.value = false;
104
104
  forceRecalculateEdges();
105
105
  }
106
- function dragStart(e, type, data, {
106
+ function moveStart(e, type, data, {
107
107
  moveEvent = "pointermove",
108
108
  endEvent = "pointerup",
109
109
  context
@@ -111,38 +111,38 @@ export function useFrames(win, handler) {
111
111
  if (controller) {
112
112
  controller.abort();
113
113
  }
114
- const promise = new Promise((resolve) => {
115
- dragResolve = resolve;
114
+ const promise = new Promise((resolve2) => {
115
+ moveResolve = resolve2;
116
116
  });
117
117
  controller = new AbortController();
118
118
  controller.signal.addEventListener("abort", () => resetState());
119
119
  e.preventDefault();
120
- window.addEventListener(moveEvent, dragMove, { signal: controller.signal });
121
- window.addEventListener(endEvent, dragEnd, { signal: controller.signal });
120
+ window.addEventListener(moveEvent, onMove, { signal: controller.signal });
121
+ window.addEventListener(endEvent, moveEnd, { signal: controller.signal });
122
122
  const point = toWindowCoord(win.value, e);
123
- dragPoint.value = point;
124
- dragStartPoint = { ...point };
125
- dragDirStore.update(point);
123
+ movePoint.value = point;
124
+ moveStartPoint = { ...point };
125
+ moveDirStore.update(point);
126
126
  eventContext.value = context;
127
- isDragging.value = type;
128
- showDragging.value = true;
127
+ isMoving.value = type;
128
+ showMoving.value = true;
129
129
  if (type === "frame") {
130
- frameDragFrameId.value = data.frameId;
130
+ movingFrameId.value = data.frameId;
131
131
  } else {
132
132
  const { edge, intersection } = data;
133
- draggingIntersection.value = intersection;
134
- draggingEdges.value = edge ? [edge] : [
135
- ...draggingIntersection.value?.sharedEdges.horizontal ?? [],
136
- ...draggingIntersection.value?.sharedEdges.vertical ?? []
133
+ movingIntersection.value = intersection;
134
+ movingEdges.value = edge ? [edge] : [
135
+ ...movingIntersection.value?.sharedEdges.horizontal ?? [],
136
+ ...movingIntersection.value?.sharedEdges.vertical ?? []
137
137
  ];
138
- isDraggingFromWindowEdge.value = draggingEdges.value.some((_) => isWindowEdge(_));
138
+ isMovingFromWindowEdge.value = movingEdges.value.some((_) => isWindowEdge(_));
139
139
  const framesArray = Object.values(win.value.frames);
140
140
  touchingFrames.value = [];
141
141
  const clones = /* @__PURE__ */ new Map();
142
- for (let i = 0; i < draggingEdges.value.length; i++) {
143
- const draggingEdge = draggingEdges.value[i];
142
+ for (let i = 0; i < movingEdges.value.length; i++) {
143
+ const movingEdge = movingEdges.value[i];
144
144
  touchingFrames.value[i] = {};
145
- for (const { frame } of findFramesTouchingEdge(draggingEdge, framesArray)) {
145
+ for (const { frame } of findFramesTouchingEdge(movingEdge, framesArray)) {
146
146
  if (!clones.has(frame.id)) {
147
147
  const clone = cloneFrame(frame);
148
148
  touchingFrames.value[i][frame.id] = clone;
@@ -153,56 +153,60 @@ export function useFrames(win, handler) {
153
153
  }
154
154
  }
155
155
  }
156
- const res = handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel);
157
- showDragging.value = res.showDragging ?? true;
156
+ const res = handler.onMoveChange("start", e, state.value, forceRecalculateEdges, cancel, resolve);
157
+ showMoving.value = res.showMoving ?? true;
158
158
  return promise;
159
159
  }
160
- function dragMove(e) {
160
+ function onMove(e) {
161
161
  e.preventDefault();
162
162
  const point = toWindowCoord(win.value, e);
163
- const didChange = dragDirStore.update(point);
164
- dragPoint.value = point;
165
- dragDistance.value = 0;
166
- if (dragStartPoint) {
167
- dragDistance.value = Math.sqrt(
168
- Math.pow(point.x - dragStartPoint.x, 2) + Math.pow(point.y - dragStartPoint.y, 2)
163
+ const didChange = moveDirStore.update(point);
164
+ movePoint.value = point;
165
+ moveDistance.value = 0;
166
+ if (moveStartPoint) {
167
+ moveDistance.value = Math.sqrt(
168
+ Math.pow(point.x - moveStartPoint.x, 2) + Math.pow(point.y - moveStartPoint.y, 2)
169
169
  );
170
170
  }
171
171
  if (!didChange) return;
172
- const res = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel);
173
- showDragging.value = res.showDragging ?? true;
172
+ const res = handler.onMoveChange("move", e, state.value, forceRecalculateEdges, cancel, resolve);
173
+ showMoving.value = res.showMoving ?? true;
174
174
  if (!res.updateEdges) return;
175
- if (isDragging.value === "edge") {
175
+ if (isMoving.value === "edge") {
176
176
  requestAnimationFrame(() => {
177
- for (let i = 0; i < draggingEdges.value.length; i++) {
178
- const draggingEdge = draggingEdges.value[i];
179
- if (draggingEdge) {
180
- moveEdge(touchingFramesArrays.value[i], draggingEdge, point);
177
+ for (let i = 0; i < movingEdges.value.length; i++) {
178
+ const movingEdge = movingEdges.value[i];
179
+ if (movingEdge) {
180
+ moveEdge(touchingFramesArrays.value[i], movingEdge, point);
181
181
  }
182
182
  }
183
183
  forceRecalculateEdges();
184
184
  });
185
185
  }
186
186
  }
187
- function dragEnd(e, { apply = true } = {}) {
187
+ function moveEnd(e, { apply = true } = {}) {
188
188
  if (e) {
189
189
  const point = toWindowCoord(win.value, e);
190
- dragPoint.value = point;
190
+ movePoint.value = point;
191
191
  }
192
192
  if (apply) {
193
- const applyResult = handler.onDragApply(state.value, forceRecalculateEdges);
194
- dragResult = applyResult.result;
193
+ const applyResult = handler.onMoveApply(state.value, forceRecalculateEdges);
194
+ moveResult = applyResult.result;
195
195
  if (applyResult.apply) {
196
196
  for (const frame of touchingFramesArrays.value.flat()) {
197
197
  win.value.frames[frame.id] = frame;
198
198
  }
199
199
  }
200
200
  }
201
- handler.onDragChange("end", e, state.value, forceRecalculateEdges, cancel);
201
+ handler.onMoveChange("end", e, state.value, forceRecalculateEdges, void 0, void 0);
202
202
  controller?.abort();
203
203
  }
204
204
  function cancel() {
205
- dragEnd(void 0, { apply: false });
205
+ moveEnd(void 0, { apply: false });
206
+ }
207
+ function resolve({ apply, result: value }) {
208
+ moveResult = value;
209
+ moveEnd(void 0, { apply });
206
210
  }
207
211
  const keydownController = new AbortController();
208
212
  const wrappedKeydownHandler = (e) => {
@@ -217,26 +221,26 @@ export function useFrames(win, handler) {
217
221
  keydownController?.abort();
218
222
  });
219
223
  return {
220
- dragStart,
221
- dragEnd,
224
+ moveStart,
225
+ moveEnd,
222
226
  cancel,
223
- dragMove,
224
- dragDirections,
225
- dragPoint,
226
- isDragging,
227
- draggingEdges,
228
- draggingIntersection,
227
+ onMove,
228
+ moveDirections,
229
+ movePoint,
230
+ isMoving,
231
+ movingEdges,
232
+ movingIntersection,
229
233
  visualEdges,
230
234
  touchingFrames,
231
235
  touchingFramesArrays,
232
236
  frames,
233
- dragHoveredFrame,
237
+ moveHoveredFrame,
234
238
  intersections,
235
- isDraggingFromWindowEdge,
239
+ isMovingFromWindowEdge,
236
240
  forceRecalculateEdges,
237
241
  state,
238
- showDragging,
239
- frameDragFrameId,
242
+ showMoving,
243
+ movingFrameId,
240
244
  actionHandler: handler
241
245
  };
242
246
  }
@@ -10,7 +10,7 @@
10
10
  v-if="win"
11
11
  :frames="frames"
12
12
  :win="win"
13
- :dragActionHandler="dragActionHandler"
13
+ :actionHandler="actionHandler"
14
14
  />
15
15
 
16
16
  <LayoutWindow
@@ -34,8 +34,8 @@
34
34
  :textHints="textHints"
35
35
  textHintsTeleportTo="#status-bar"
36
36
  v-model:win="win"
37
- @is-showing-drag="isShowingDrag = $event"
38
- @drag-state="dragState = $event"
37
+ @is-showing-move="isShowingMove = $event"
38
+ @move-state="moveState = $event"
39
39
  >
40
40
  <LayoutFrame class="
41
41
  flex
@@ -175,7 +175,7 @@ import {
175
175
  import { settings } from "../settings.js";
176
176
  import { throwIfError } from "@alanscodelog/utils/throwIfError";
177
177
  import { useTemplateRef } from "vue";
178
- import { DragActionHandler } from "../drag/DragActionHandler.js";
178
+ import { ActionHandler } from "../move/ActionHandler.js";
179
179
  import LayoutDragEdgeHandle from "../components/LayoutDragEdgeHandle.vue";
180
180
  import LayoutDragEdgeVisible from "../components/LayoutDragEdgeVisible.vue";
181
181
  import LayoutIntersectionVisible from "../components/LayoutIntersectionVisible.vue";
@@ -213,25 +213,25 @@ function layoutInitialize(layout, { defaultPos, defaultSize } = {
213
213
  }));
214
214
  w.activeFrame = frame.id;
215
215
  }
216
- const isShowingDrag = ref(false);
217
- const dragState = ref(void 0);
216
+ const isShowingMove = ref(false);
217
+ const moveState = ref(void 0);
218
218
  function handleUndock(frameId) {
219
219
  const changes = throwIfError(getFrameUndockInfo(win.value, frameId));
220
- DragActionHandler.debugState("undock", "before", dragState.value, {}, void 0);
220
+ ActionHandler.debugState("undock", "before", moveState.value, {}, void 0);
221
221
  applyFrameChanges(win.value, changes);
222
- DragActionHandler.debugState("undock", "after", dragState.value, {}, void 0);
222
+ ActionHandler.debugState("undock", "after", moveState.value, {}, void 0);
223
223
  }
224
224
  function handleCollapse(frameId) {
225
225
  const changes = throwIfError(getFrameCollapseInfo(win.value, frameId));
226
- DragActionHandler.debugState("collapse", "before", dragState.value, {}, void 0);
226
+ ActionHandler.debugState("collapse", "before", moveState.value, {}, void 0);
227
227
  applyFrameChanges(win.value, changes);
228
- DragActionHandler.debugState("collapse", "after", dragState.value, {}, void 0);
228
+ ActionHandler.debugState("collapse", "after", moveState.value, {}, void 0);
229
229
  }
230
230
  function handleUncollapse(frameId) {
231
231
  const changes = throwIfError(getFrameUncollapseInfo(win.value, frameId));
232
- DragActionHandler.debugState("uncollapse", "before", dragState.value, {}, void 0);
232
+ ActionHandler.debugState("uncollapse", "before", moveState.value, {}, void 0);
233
233
  applyFrameChanges(win.value, changes);
234
- DragActionHandler.debugState("uncollapse", "after", dragState.value, {}, void 0);
234
+ ActionHandler.debugState("uncollapse", "after", moveState.value, {}, void 0);
235
235
  }
236
236
  const collapsedDocks = computed(() => {
237
237
  const sides = {};
@@ -242,12 +242,12 @@ const collapsedDocks = computed(() => {
242
242
  }
243
243
  return sides;
244
244
  });
245
- const dragActionHandler = computed(() => layoutComponent.value?.dragActionHandler);
245
+ const actionHandler = computed(() => layoutComponent.value?.actionHandler);
246
246
  const textHints = computed(() => {
247
- const isDragging = dragState.value?.isDragging;
248
- const textHints2 = dragActionHandler.value?.textHints ?? { actions: [], errors: [] };
247
+ const isMoving = moveState.value?.isMoving;
248
+ const textHints2 = actionHandler.value?.textHints ?? { actions: [], errors: [] };
249
249
  return [
250
- ...!isDragging ? [{ classes: "", text: "Drag from an edge to create a new frame." }] : [],
250
+ ...!isMoving ? [{ classes: "", text: "Drag from an edge to create a new frame." }] : [],
251
251
  ...textHints2.errors.map((_) => ({ classes: "text-red-500", text: _ })),
252
252
  ...textHints2.actions.map((_) => ({ text: _ }))
253
253
  ];
@@ -1,9 +1,9 @@
1
1
  import type { LayoutFrame, LayoutWindow } from "../types/index.js";
2
- import type { DragActionHandler } from "../drag/DragActionHandler.js";
2
+ import type { ActionHandler } from "../move/ActionHandler.js";
3
3
  type __VLS_Props = {
4
4
  win: LayoutWindow;
5
5
  frames: LayoutFrame[];
6
- dragActionHandler?: DragActionHandler<any>;
6
+ actionHandler?: ActionHandler<any>;
7
7
  };
8
8
  declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
9
  export default _default;
@@ -26,7 +26,7 @@
26
26
  <WButton class="flex-1" @click="copyState">Copy State</WButton>
27
27
  <WCheckbox v-model="renameFrames">Easy Ids</WCheckbox>
28
28
  </div>
29
- <label class="flex flex-col gap-2 text-sm" v-if="dragActionHandler">
29
+ <label class="flex flex-col gap-2 text-sm" v-if="actionHandler">
30
30
  <span>Plugin Debug Logs (true | debug path):</span>
31
31
  <WSimpleInput v-model="debugKey" />
32
32
  </label>
@@ -55,7 +55,7 @@ import { rotateLayout } from "../helpers/rotateFrames.js";
55
55
  const props = defineProps({
56
56
  win: { type: Object, required: true },
57
57
  frames: { type: Array, required: true },
58
- dragActionHandler: { type: Object, required: false }
58
+ actionHandler: { type: Object, required: false }
59
59
  });
60
60
  const showDevActions = ref(false);
61
61
  const collapseSizeValue = ref(settings.collapseSizePx.width);
@@ -101,9 +101,9 @@ function copyState() {
101
101
  }
102
102
  const debugKey = ref(import.meta.dev ? "state.win.frames" : "false");
103
103
  watch(debugKey, () => {
104
- if (!props.dragActionHandler) return;
104
+ if (!props.actionHandler) return;
105
105
  const value = debugKey.value === "true" ? true : debugKey.value === "false" ? false : debugKey.value;
106
- for (const plugin of Object.values(props.dragActionHandler.actions)) {
106
+ for (const plugin of Object.values(props.actionHandler.actions)) {
107
107
  plugin.debug = value;
108
108
  }
109
109
  });
@@ -1,9 +1,9 @@
1
1
  import type { LayoutFrame, LayoutWindow } from "../types/index.js";
2
- import type { DragActionHandler } from "../drag/DragActionHandler.js";
2
+ import type { ActionHandler } from "../move/ActionHandler.js";
3
3
  type __VLS_Props = {
4
4
  win: LayoutWindow;
5
5
  frames: LayoutFrame[];
6
- dragActionHandler?: DragActionHandler<any>;
6
+ actionHandler?: ActionHandler<any>;
7
7
  };
8
8
  declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
9
  export default _default;
@@ -5,8 +5,8 @@
5
5
  *
6
6
  * Accepts scaled coordinates.
7
7
  */
8
- import type { DragZone } from "../types/index.js";
9
- export declare function createZoneSideClipPath(zone: DragZone, { frameEdgePx, windowEdgePx }: {
8
+ import type { Zone } from "../types/index.js";
9
+ export declare function createZoneSideClipPath(zone: Zone, { frameEdgePx, windowEdgePx }: {
10
10
  frameEdgePx: number;
11
11
  windowEdgePx: number;
12
12
  }): string | undefined;
@@ -1,6 +1,6 @@
1
1
  import type { Edge, EdgeSide, LayoutFrame } from "../types/index.js";
2
- export declare function findFrameDraggableEdges(frame: LayoutFrame, edges: Edge[],
3
- /** See {@link findDraggableEdge} */
2
+ export declare function findFrameMoveableEdges(frame: LayoutFrame, edges: Edge[],
3
+ /** See {@link findMoveableEdge} */
4
4
  exact?: boolean, sides?: EdgeSide[]): {
5
5
  edge: Edge;
6
6
  side: EdgeSide;
@@ -1,8 +1,8 @@
1
- import { findDraggableEdge } from "./findDraggableEdge.js";
1
+ import { findMoveableEdge } from "./findMoveableEdge.js";
2
2
  import { frameToEdges } from "./frameToEdges.js";
3
3
  import { isWindowEdge } from "./isWindowEdge.js";
4
4
  import { sideToOrientation } from "./sideToOrientation.js";
5
- export function findFrameDraggableEdges(frame, edges, exact = true, sides = ["left", "right", "top", "bottom"]) {
5
+ export function findFrameMoveableEdges(frame, edges, exact = true, sides = ["left", "right", "top", "bottom"]) {
6
6
  const frameEdges = frameToEdges(frame);
7
7
  const res = [];
8
8
  for (const side of sides) {
@@ -10,7 +10,7 @@ export function findFrameDraggableEdges(frame, edges, exact = true, sides = ["le
10
10
  const edgeDirection = sideToOrientation(side);
11
11
  const isWinEdge = isWindowEdge(edge, edgeDirection);
12
12
  if (isWinEdge) continue;
13
- const maybeEdge = findDraggableEdge(edge, edges, exact, edgeDirection);
13
+ const maybeEdge = findMoveableEdge(edge, edges, exact, edgeDirection);
14
14
  if (maybeEdge) res.push({ edge: maybeEdge, side });
15
15
  }
16
16
  if (res.length > 0) return res;
@@ -1,4 +1,4 @@
1
1
  import type { Edge, Orientation } from "../types/index.js";
2
- export declare function findDraggableEdge(edge: Edge, edges: Edge[],
2
+ export declare function findMoveableEdge(edge: Edge, edges: Edge[],
3
3
  /** Whether the edge must match exactly and does not "contain/touch" another frame. */
4
4
  exact?: boolean, edgeOrientation?: Orientation): Edge | undefined;
@@ -1,7 +1,7 @@
1
1
  import { containsEdge } from "./containsEdge.js";
2
2
  import { getEdgeOrientation } from "./getEdgeOrientation.js";
3
3
  import { isEdgeEqual } from "./isEdgeEqual.js";
4
- export function findDraggableEdge(edge, edges, exact = true, edgeOrientation) {
4
+ export function findMoveableEdge(edge, edges, exact = true, edgeOrientation) {
5
5
  edgeOrientation ??= getEdgeOrientation(edge);
6
6
  for (const otherEdge of edges) {
7
7
  const didFindEdge = exact ? isEdgeEqual(edge, otherEdge, edgeOrientation) : containsEdge(edge, otherEdge, edgeOrientation);
@@ -20,8 +20,8 @@ export { dirToSide } from "./dirToSide.js";
20
20
  export { doEdgesOverlap } from "./doEdgesOverlap.js";
21
21
  export { doesEdgeContinueEdge } from "./doesEdgeContinueEdge.js";
22
22
  export { edgeToPoints } from "./edgeToPoints.js";
23
- export { findDraggableEdge } from "./findDraggableEdge.js";
24
- export { findFrameDraggableEdges } from "./findFrameDraggableEdges.js";
23
+ export { findMoveableEdge } from "./findMoveableEdge.js";
24
+ export { findFrameMoveableEdges } from "./findFrameMoveableEdges.js";
25
25
  export { framesRedistributeFix } from "./framesRedistributeFix.js";
26
26
  export { frameToEdges } from "./frameToEdges.js";
27
27
  export { frameToPoints } from "./frameToPoints.js";
@@ -20,8 +20,8 @@ export { dirToSide } from "./dirToSide.js";
20
20
  export { doEdgesOverlap } from "./doEdgesOverlap.js";
21
21
  export { doesEdgeContinueEdge } from "./doesEdgeContinueEdge.js";
22
22
  export { edgeToPoints } from "./edgeToPoints.js";
23
- export { findDraggableEdge } from "./findDraggableEdge.js";
24
- export { findFrameDraggableEdges } from "./findFrameDraggableEdges.js";
23
+ export { findMoveableEdge } from "./findMoveableEdge.js";
24
+ export { findFrameMoveableEdges } from "./findFrameMoveableEdges.js";
25
25
  export { framesRedistributeFix } from "./framesRedistributeFix.js";
26
26
  export { frameToEdges } from "./frameToEdges.js";
27
27
  export { frameToPoints } from "./frameToPoints.js";
@@ -1,5 +1,5 @@
1
1
  import type { Direction, LayoutFrame, Point, Size, SplitDeco } from "../types/index.js";
2
- export declare function createSplitDecoFromDrag(frames: Record<string, LayoutFrame>, frame: LayoutFrame, dragDirection: Direction, dragPoint: Point, snapAmount?: Point, minSize?: Size, classes?: {
2
+ export declare function createSplitDecoFromDrag(frames: Record<string, LayoutFrame>, frame: LayoutFrame, dragDirection: Direction, movePoint: Point, snapAmount?: Point, minSize?: Size, classes?: {
3
3
  /** @default "deco-split-edge bg-red-500" */
4
4
  splitEdge?: string;
5
5
  /** @default "deco-split-new-frame bg-blue-500/50" */
@@ -1,12 +1,12 @@
1
1
  import { createSplitDecoShapes } from "./createSplitDecoShapes.js";
2
2
  import { dirToOrientation } from "../helpers/dirToOrientation.js";
3
3
  import { settings } from "../settings.js";
4
- export function createSplitDecoFromDrag(frames, frame, dragDirection, dragPoint, snapAmount = settings.snapPointScaled, minSize = settings.minSizeScaled, classes = {}) {
4
+ export function createSplitDecoFromDrag(frames, frame, dragDirection, movePoint, snapAmount = settings.snapPointScaled, minSize = settings.minSizeScaled, classes = {}) {
5
5
  const orientation = dirToOrientation(dragDirection);
6
6
  const deco = {
7
7
  type: "split",
8
8
  id: frame.id,
9
- position: dragPoint[orientation === "horizontal" ? "x" : "y"],
9
+ position: movePoint[orientation === "horizontal" ? "x" : "y"],
10
10
  direction: dragDirection
11
11
  };
12
12
  deco.shapes = createSplitDecoShapes(frames, deco, snapAmount, minSize, classes);
@@ -1,5 +1,5 @@
1
1
  import type { Direction, Edge, LayoutFrame, Point, Size } from "../types/index.js";
2
- export declare function findSafeSplitEdgeAndPosition(frame: LayoutFrame, dragDirection: Direction, dragPointOrPosition: Point | number, snapAmount?: Point, minSize?: Size): {
2
+ export declare function findSafeSplitEdgeAndPosition(frame: LayoutFrame, dragDirection: Direction, movePointOrPosition: Point | number, snapAmount?: Point, minSize?: Size): {
3
3
  edge: Edge;
4
4
  position: number;
5
5
  };
@@ -2,9 +2,9 @@ import { clampNumber, snapNumber } from "@alanscodelog/utils";
2
2
  import { dirToOrientation } from "../helpers/dirToOrientation.js";
3
3
  import { oppositeSide } from "../helpers/oppositeSide.js";
4
4
  import { settings } from "../settings.js";
5
- export function findSafeSplitEdgeAndPosition(frame, dragDirection, dragPointOrPosition, snapAmount = settings.snapPointScaled, minSize = settings.minSizeScaled) {
5
+ export function findSafeSplitEdgeAndPosition(frame, dragDirection, movePointOrPosition, snapAmount = settings.snapPointScaled, minSize = settings.minSizeScaled) {
6
6
  const orientation = dirToOrientation(dragDirection);
7
- const position = typeof dragPointOrPosition === "number" ? dragPointOrPosition : dragPointOrPosition[orientation === "horizontal" ? "x" : "y"];
7
+ const position = typeof movePointOrPosition === "number" ? movePointOrPosition : movePointOrPosition[orientation === "horizontal" ? "x" : "y"];
8
8
  const coordKey = orientation === "vertical" ? "y" : "x";
9
9
  const sizeKey = orientation === "vertical" ? "height" : "width";
10
10
  const pos = snapNumber(position, snapAmount[coordKey]);
@@ -5,7 +5,7 @@ import { findFramesTouchingEdge } from "./findFramesTouchingEdge.js";
5
5
  import { findVisualEdge } from "./findVisualEdge.js";
6
6
  import { cloneFrame } from "../helpers/cloneFrame.js";
7
7
  import { dirToSide } from "../helpers/dirToSide.js";
8
- import { findFrameDraggableEdges } from "../helpers/findFrameDraggableEdges.js";
8
+ import { findFrameMoveableEdges } from "../helpers/findFrameMoveableEdges.js";
9
9
  import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
10
10
  import { oppositeSide } from "../helpers/oppositeSide.js";
11
11
  import { settings } from "../settings.js";
@@ -28,9 +28,9 @@ export function getCloseFrameInfo(frames, visualEdges, frame, closeDirOrSide, cl
28
28
  }
29
29
  const side = closeBy === "dir" ? oppositeSide(dirToSide(closeDirOrSide)) : closeDirOrSide;
30
30
  const sideOpposite = oppositeSide(side);
31
- const draggableEdges = findFrameDraggableEdges(frame, visualEdges, !force, [side]);
32
- if (!draggableEdges) return new KnownError(LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE, `Could not find draggable edge for frame ${frame.id}`, { frame });
33
- const { edge: frameEdge } = draggableEdges[0];
31
+ const moveableEdges = findFrameMoveableEdges(frame, visualEdges, !force, [side]);
32
+ if (!moveableEdges) return new KnownError(LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE, `Could not find draggable edge for frame ${frame.id}`, { frame });
33
+ const { edge: frameEdge } = moveableEdges[0];
34
34
  const visualEdge = findVisualEdge(visualEdges, frameEdge);
35
35
  if (visualEdge === void 0) unreachable();
36
36
  const direction = oppositeSide(getEdgeOrientation(visualEdge));
@@ -1,4 +1,4 @@
1
- import type { DragZone, LayoutChange, LayoutWindow } from "../types/index.js";
1
+ import type { LayoutChange, LayoutWindow, Zone } from "../types/index.js";
2
2
  import { LAYOUT_ERROR } from "../types/index.js";
3
3
  import { KnownError } from "../utils/KnownError.js";
4
4
  /**
@@ -136,4 +136,4 @@ import { KnownError } from "../utils/KnownError.js";
136
136
  * │ │ │
137
137
  * └───────────┴─────┘
138
138
  */
139
- export declare function getFrameRearrangeInfo(win: LayoutWindow, draggingFrameId: string, hoveredFrameId: string, zoneSide: DragZone["side"]): LayoutChange<"split" | "swap" | "rearrange"> | KnownError<typeof LAYOUT_ERROR.CANT_SWAP_WITH_SELF> | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL> | KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_TO_SAME_RELATIVE_POSITION> | KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_WITH_DOCKED_EDGES> | KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_DOCKED_WITH_NON_DOCKED> | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME> | KnownError<typeof LAYOUT_ERROR.NO_FILL_CANDIDATES>;
139
+ export declare function getFrameRearrangeInfo(win: LayoutWindow, movingFrameId: string, hoveredFrameId: string, zoneSide: Zone["side"]): LayoutChange<"split" | "swap" | "rearrange"> | KnownError<typeof LAYOUT_ERROR.CANT_SWAP_WITH_SELF> | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL> | KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_TO_SAME_RELATIVE_POSITION> | KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_WITH_DOCKED_EDGES> | KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_DOCKED_WITH_NON_DOCKED> | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME> | KnownError<typeof LAYOUT_ERROR.NO_FILL_CANDIDATES>;