@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.
- package/dist/module.json +1 -1
- package/dist/runtime/components/FrameDragHandle.vue +3 -3
- package/dist/runtime/components/LayoutDragEdgeGrabbed.vue +3 -3
- package/dist/runtime/components/LayoutDragEdgeHandle.d.vue.ts +2 -2
- package/dist/runtime/components/LayoutDragEdgeHandle.vue +2 -2
- package/dist/runtime/components/LayoutDragEdgeHandle.vue.d.ts +2 -2
- package/dist/runtime/components/LayoutDragEdges.vue +5 -5
- package/dist/runtime/components/LayoutEdgesActiveFrame.vue +2 -2
- package/dist/runtime/components/LayoutFrame.vue +2 -2
- package/dist/runtime/components/LayoutIntersectionHandle.d.vue.ts +2 -2
- package/dist/runtime/components/LayoutIntersectionHandle.vue +2 -2
- package/dist/runtime/components/LayoutIntersectionHandle.vue.d.ts +2 -2
- package/dist/runtime/components/LayoutIntersections.vue +4 -4
- package/dist/runtime/components/LayoutWindow.d.vue.ts +44 -44
- package/dist/runtime/components/LayoutWindow.vue +27 -27
- package/dist/runtime/components/LayoutWindow.vue.d.ts +44 -44
- package/dist/runtime/composables/useFrames.d.ts +107 -109
- package/dist/runtime/composables/useFrames.js +103 -99
- package/dist/runtime/demo/App.vue +16 -16
- package/dist/runtime/demo/DemoControls.d.vue.ts +2 -2
- package/dist/runtime/demo/DemoControls.vue +4 -4
- package/dist/runtime/demo/DemoControls.vue.d.ts +2 -2
- package/dist/runtime/helpers/createZoneSideClipPath.d.ts +2 -2
- package/dist/runtime/helpers/{findFrameDraggableEdges.d.ts → findFrameMoveableEdges.d.ts} +2 -2
- package/dist/runtime/helpers/{findFrameDraggableEdges.js → findFrameMoveableEdges.js} +3 -3
- package/dist/runtime/helpers/{findDraggableEdge.d.ts → findMoveableEdge.d.ts} +1 -1
- package/dist/runtime/helpers/{findDraggableEdge.js → findMoveableEdge.js} +1 -1
- package/dist/runtime/helpers/index.d.ts +2 -2
- package/dist/runtime/helpers/index.js +2 -2
- package/dist/runtime/layout/createSplitDecoFromDrag.d.ts +1 -1
- package/dist/runtime/layout/createSplitDecoFromDrag.js +2 -2
- package/dist/runtime/layout/findSafeSplitEdge.d.ts +1 -1
- package/dist/runtime/layout/findSafeSplitEdge.js +2 -2
- package/dist/runtime/layout/getCloseFrameInfo.js +4 -4
- package/dist/runtime/layout/getFrameRearrangeInfo.d.ts +2 -2
- package/dist/runtime/layout/getFrameRearrangeInfo.js +8 -8
- package/dist/runtime/layout/getFrameSplitInfo.d.ts +1 -1
- package/dist/runtime/layout/getFrameSplitInfo.js +2 -2
- package/dist/runtime/layout/{getFrameDragZones.d.ts → getFrameZones.d.ts} +3 -3
- package/dist/runtime/layout/{getFrameDragZones.js → getFrameZones.js} +1 -1
- package/dist/runtime/layout/{getWindowDragZones.d.ts → getWindowZones.d.ts} +1 -1
- package/dist/runtime/layout/{getWindowDragZones.js → getWindowZones.js} +1 -1
- package/dist/runtime/layout/getZones.d.ts +8 -0
- package/dist/runtime/layout/getZones.js +32 -0
- package/dist/runtime/layout/index.d.ts +3 -3
- package/dist/runtime/layout/index.js +3 -3
- package/dist/runtime/{drag/DragActionHandler.d.ts → move/ActionHandler.d.ts} +18 -21
- package/dist/runtime/{drag/DragActionHandler.js → move/ActionHandler.js} +17 -17
- package/dist/runtime/{drag → move}/CloseAction.d.ts +8 -8
- package/dist/runtime/{drag → move}/CloseAction.js +29 -26
- package/dist/runtime/{drag → move}/FrameDragAction.d.ts +8 -8
- package/dist/runtime/{drag → move}/FrameDragAction.js +23 -21
- package/dist/runtime/{drag/DragDirectionStore.d.ts → move/MoveDirectionStore.d.ts} +4 -4
- package/dist/runtime/{drag/DragDirectionStore.js → move/MoveDirectionStore.js} +9 -9
- package/dist/runtime/{drag → move}/SplitAction.d.ts +9 -9
- package/dist/runtime/{drag → move}/SplitAction.js +46 -43
- package/dist/runtime/{drag → move}/createDefaultHandlers.d.ts +2 -2
- package/dist/runtime/types/index.d.ts +185 -171
- package/dist/runtime/types/index.js +2 -2
- package/dist/runtime/types/vue.d.ts +14 -16
- package/dist/runtime/types/vue.js +1 -1
- package/package.json +1 -1
- package/src/runtime/components/FrameDragHandle.vue +3 -3
- package/src/runtime/components/LayoutDragEdgeGrabbed.vue +3 -3
- package/src/runtime/components/LayoutDragEdgeHandle.vue +4 -4
- package/src/runtime/components/LayoutDragEdges.vue +5 -5
- package/src/runtime/components/LayoutEdgesActiveFrame.vue +2 -2
- package/src/runtime/components/LayoutFrame.vue +2 -2
- package/src/runtime/components/LayoutIntersectionHandle.vue +4 -4
- package/src/runtime/components/LayoutIntersections.vue +4 -4
- package/src/runtime/components/LayoutWindow.vue +32 -32
- package/src/runtime/composables/useFrames.ts +108 -102
- package/src/runtime/demo/App.vue +18 -18
- package/src/runtime/demo/DemoControls.vue +5 -5
- package/src/runtime/helpers/createZoneSideClipPath.ts +2 -2
- package/src/runtime/helpers/{findFrameDraggableEdges.ts → findFrameMoveableEdges.ts} +4 -4
- package/src/runtime/helpers/{findDraggableEdge.ts → findMoveableEdge.ts} +1 -1
- package/src/runtime/helpers/index.ts +2 -2
- package/src/runtime/layout/createSplitDecoFromDrag.ts +2 -2
- package/src/runtime/layout/findSafeSplitEdge.ts +4 -4
- package/src/runtime/layout/getCloseFrameInfo.ts +4 -4
- package/src/runtime/layout/getFrameRearrangeInfo.ts +10 -10
- package/src/runtime/layout/getFrameSplitInfo.ts +5 -5
- package/src/runtime/layout/{getFrameDragZones.ts → getFrameZones.ts} +4 -4
- package/src/runtime/layout/{getWindowDragZones.ts → getWindowZones.ts} +1 -1
- package/src/runtime/layout/getZones.ts +48 -0
- package/src/runtime/layout/index.ts +3 -3
- package/src/runtime/{drag/DragActionHandler.ts → move/ActionHandler.ts} +42 -40
- package/src/runtime/{drag → move}/CloseAction.ts +39 -36
- package/src/runtime/{drag → move}/FrameDragAction.ts +36 -35
- package/src/runtime/{drag/DragDirectionStore.ts → move/MoveDirectionStore.ts} +10 -10
- package/src/runtime/{drag → move}/SplitAction.ts +56 -53
- package/src/runtime/{drag → move}/createDefaultHandlers.ts +2 -2
- package/src/runtime/types/index.ts +80 -69
- package/src/runtime/types/vue.ts +14 -14
- package/dist/runtime/layout/getDragZones.d.ts +0 -8
- package/dist/runtime/layout/getDragZones.js +0 -32
- package/src/runtime/layout/getDragZones.ts +0 -48
- /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
|
|
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
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
let
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
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
|
-
() =>
|
|
37
|
+
() => isMoving.value && showMoving.value ? { ...win.value.frames, ...allTouchingFrames.value } : win.value.frames
|
|
38
38
|
);
|
|
39
|
-
const
|
|
40
|
-
if (
|
|
39
|
+
const moveHoveredFrame = computed(() => {
|
|
40
|
+
if (isMoving.value) {
|
|
41
41
|
for (const id of keys(frames.value)) {
|
|
42
|
-
if (isPointInRect(frames.value[id],
|
|
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
|
|
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([
|
|
56
|
-
if (
|
|
57
|
-
|
|
55
|
+
watch([isMoving, frames], () => {
|
|
56
|
+
if (isMoving.value) return;
|
|
57
|
+
debounceGetMoveableEdges(Object.values(frames.value));
|
|
58
58
|
}, { deep: true });
|
|
59
|
-
|
|
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
|
|
65
|
-
onUpdate: (dir) =>
|
|
64
|
+
const moveDirStore = new MoveDirectionStore({
|
|
65
|
+
onUpdate: (dir) => moveDirections.value = dir
|
|
66
66
|
});
|
|
67
67
|
const state = computed(() => ({
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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
|
-
|
|
80
|
+
moveHoveredFrame: moveHoveredFrame.value,
|
|
81
81
|
intersections: intersections.value,
|
|
82
|
-
|
|
82
|
+
isMovingFromWindowEdge: isMovingFromWindowEdge.value,
|
|
83
83
|
eventContext: eventContext.value,
|
|
84
84
|
win: win.value
|
|
85
85
|
}));
|
|
86
86
|
let controller;
|
|
87
|
-
let
|
|
88
|
-
let
|
|
87
|
+
let moveResolve;
|
|
88
|
+
let moveResult;
|
|
89
89
|
function resetState() {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
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
|
-
|
|
100
|
+
movingFrameId.value = void 0;
|
|
101
101
|
eventContext.value = void 0;
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
moveDirStore.reset();
|
|
103
|
+
showMoving.value = false;
|
|
104
104
|
forceRecalculateEdges();
|
|
105
105
|
}
|
|
106
|
-
function
|
|
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((
|
|
115
|
-
|
|
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,
|
|
121
|
-
window.addEventListener(endEvent,
|
|
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
|
-
|
|
124
|
-
|
|
125
|
-
|
|
123
|
+
movePoint.value = point;
|
|
124
|
+
moveStartPoint = { ...point };
|
|
125
|
+
moveDirStore.update(point);
|
|
126
126
|
eventContext.value = context;
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
isMoving.value = type;
|
|
128
|
+
showMoving.value = true;
|
|
129
129
|
if (type === "frame") {
|
|
130
|
-
|
|
130
|
+
movingFrameId.value = data.frameId;
|
|
131
131
|
} else {
|
|
132
132
|
const { edge, intersection } = data;
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
...
|
|
136
|
-
...
|
|
133
|
+
movingIntersection.value = intersection;
|
|
134
|
+
movingEdges.value = edge ? [edge] : [
|
|
135
|
+
...movingIntersection.value?.sharedEdges.horizontal ?? [],
|
|
136
|
+
...movingIntersection.value?.sharedEdges.vertical ?? []
|
|
137
137
|
];
|
|
138
|
-
|
|
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 <
|
|
143
|
-
const
|
|
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(
|
|
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.
|
|
157
|
-
|
|
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
|
|
160
|
+
function onMove(e) {
|
|
161
161
|
e.preventDefault();
|
|
162
162
|
const point = toWindowCoord(win.value, e);
|
|
163
|
-
const didChange =
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
if (
|
|
167
|
-
|
|
168
|
-
Math.pow(point.x -
|
|
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.
|
|
173
|
-
|
|
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 (
|
|
175
|
+
if (isMoving.value === "edge") {
|
|
176
176
|
requestAnimationFrame(() => {
|
|
177
|
-
for (let i = 0; i <
|
|
178
|
-
const
|
|
179
|
-
if (
|
|
180
|
-
moveEdge(touchingFramesArrays.value[i],
|
|
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
|
|
187
|
+
function moveEnd(e, { apply = true } = {}) {
|
|
188
188
|
if (e) {
|
|
189
189
|
const point = toWindowCoord(win.value, e);
|
|
190
|
-
|
|
190
|
+
movePoint.value = point;
|
|
191
191
|
}
|
|
192
192
|
if (apply) {
|
|
193
|
-
const applyResult = handler.
|
|
194
|
-
|
|
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.
|
|
201
|
+
handler.onMoveChange("end", e, state.value, forceRecalculateEdges, void 0, void 0);
|
|
202
202
|
controller?.abort();
|
|
203
203
|
}
|
|
204
204
|
function cancel() {
|
|
205
|
-
|
|
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
|
-
|
|
221
|
-
|
|
224
|
+
moveStart,
|
|
225
|
+
moveEnd,
|
|
222
226
|
cancel,
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
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
|
-
|
|
237
|
+
moveHoveredFrame,
|
|
234
238
|
intersections,
|
|
235
|
-
|
|
239
|
+
isMovingFromWindowEdge,
|
|
236
240
|
forceRecalculateEdges,
|
|
237
241
|
state,
|
|
238
|
-
|
|
239
|
-
|
|
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
|
-
:
|
|
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-
|
|
38
|
-
@
|
|
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 {
|
|
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
|
|
217
|
-
const
|
|
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
|
-
|
|
220
|
+
ActionHandler.debugState("undock", "before", moveState.value, {}, void 0);
|
|
221
221
|
applyFrameChanges(win.value, changes);
|
|
222
|
-
|
|
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
|
-
|
|
226
|
+
ActionHandler.debugState("collapse", "before", moveState.value, {}, void 0);
|
|
227
227
|
applyFrameChanges(win.value, changes);
|
|
228
|
-
|
|
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
|
-
|
|
232
|
+
ActionHandler.debugState("uncollapse", "before", moveState.value, {}, void 0);
|
|
233
233
|
applyFrameChanges(win.value, changes);
|
|
234
|
-
|
|
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
|
|
245
|
+
const actionHandler = computed(() => layoutComponent.value?.actionHandler);
|
|
246
246
|
const textHints = computed(() => {
|
|
247
|
-
const
|
|
248
|
-
const textHints2 =
|
|
247
|
+
const isMoving = moveState.value?.isMoving;
|
|
248
|
+
const textHints2 = actionHandler.value?.textHints ?? { actions: [], errors: [] };
|
|
249
249
|
return [
|
|
250
|
-
...!
|
|
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 {
|
|
2
|
+
import type { ActionHandler } from "../move/ActionHandler.js";
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
win: LayoutWindow;
|
|
5
5
|
frames: LayoutFrame[];
|
|
6
|
-
|
|
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="
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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 {
|
|
2
|
+
import type { ActionHandler } from "../move/ActionHandler.js";
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
win: LayoutWindow;
|
|
5
5
|
frames: LayoutFrame[];
|
|
6
|
-
|
|
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 {
|
|
9
|
-
export declare function createZoneSideClipPath(zone:
|
|
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
|
|
3
|
-
/** See {@link
|
|
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 {
|
|
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
|
|
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 =
|
|
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
|
|
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
|
|
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 {
|
|
24
|
-
export {
|
|
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 {
|
|
24
|
-
export {
|
|
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,
|
|
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,
|
|
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:
|
|
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,
|
|
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,
|
|
5
|
+
export function findSafeSplitEdgeAndPosition(frame, dragDirection, movePointOrPosition, snapAmount = settings.snapPointScaled, minSize = settings.minSizeScaled) {
|
|
6
6
|
const orientation = dirToOrientation(dragDirection);
|
|
7
|
-
const position = typeof
|
|
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 {
|
|
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
|
|
32
|
-
if (!
|
|
33
|
-
const { edge: frameEdge } =
|
|
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 {
|
|
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,
|
|
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>;
|