@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
package/dist/module.json
CHANGED
|
@@ -9,18 +9,18 @@
|
|
|
9
9
|
|
|
10
10
|
<script setup>
|
|
11
11
|
import { inject, onBeforeUnmount } from "vue";
|
|
12
|
-
import {
|
|
12
|
+
import { moveContextInjectionKey } from "../types/vue.js";
|
|
13
13
|
const props = defineProps({
|
|
14
14
|
frameId: { type: String, required: true }
|
|
15
15
|
});
|
|
16
|
-
const dragContext = inject(
|
|
16
|
+
const dragContext = inject(moveContextInjectionKey);
|
|
17
17
|
if (!dragContext) {
|
|
18
18
|
throw new Error("FrameDragHandle must be used inside a LayoutWindow and drag context returned by useFrames must be injected.");
|
|
19
19
|
}
|
|
20
20
|
function handlePointerDown(e) {
|
|
21
21
|
e.preventDefault();
|
|
22
22
|
e.stopPropagation();
|
|
23
|
-
dragContext.
|
|
23
|
+
dragContext.moveStart(e, "frame", { frameId: props.frameId });
|
|
24
24
|
}
|
|
25
25
|
onBeforeUnmount(() => {
|
|
26
26
|
dragContext.cancel();
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
</template>
|
|
19
19
|
|
|
20
20
|
<script setup>
|
|
21
|
-
import {
|
|
21
|
+
import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
|
|
22
22
|
import { twMerge } from "@witchcraft/ui/utils/twMerge";
|
|
23
23
|
import { computed, inject, useAttrs } from "vue";
|
|
24
24
|
import LayoutShapeRect from "./LayoutShapeRect.vue";
|
|
@@ -30,9 +30,9 @@ defineOptions({
|
|
|
30
30
|
});
|
|
31
31
|
const ctx = inject(layoutContextInjectionKey, void 0);
|
|
32
32
|
if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
33
|
-
const dragCtx = inject(
|
|
33
|
+
const dragCtx = inject(moveContextInjectionKey, void 0);
|
|
34
34
|
if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
35
|
-
const draggingEdge = computed(() => dragCtx.
|
|
35
|
+
const draggingEdge = computed(() => dragCtx.movingEdges.value.length === 1 ? dragCtx.movingEdges.value[0] : void 0);
|
|
36
36
|
const cssDragEdge = computed(() => {
|
|
37
37
|
if (!draggingEdge.value) return [];
|
|
38
38
|
return getVisualEdgesCss([draggingEdge.value], {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type EdgeMoveStartData } from "../types/index.js";
|
|
2
2
|
import type { Edge, EdgeCss } from "../types/index.js";
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
edge: Edge;
|
|
5
5
|
css: EdgeCss;
|
|
6
|
-
onPointerDown?: (e: PointerEvent, type: "edge", data:
|
|
6
|
+
onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void;
|
|
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 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge";
|
|
|
26
26
|
import { useAttrs, inject } from "vue";
|
|
27
27
|
import LayoutShapeRect from "./LayoutShapeRect.vue";
|
|
28
28
|
import {} from "../types/index.js";
|
|
29
|
-
import {
|
|
29
|
+
import { moveContextInjectionKey } from "../types/vue.js";
|
|
30
30
|
const $attrs = useAttrs();
|
|
31
31
|
defineOptions({
|
|
32
32
|
inheritAttrs: false
|
|
@@ -38,6 +38,6 @@ const props = defineProps({
|
|
|
38
38
|
});
|
|
39
39
|
const ctx = inject(layoutContextInjectionKey, void 0);
|
|
40
40
|
if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
41
|
-
const dragCtx = inject(
|
|
41
|
+
const dragCtx = inject(moveContextInjectionKey, void 0);
|
|
42
42
|
if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
43
43
|
</script>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type EdgeMoveStartData } from "../types/index.js";
|
|
2
2
|
import type { Edge, EdgeCss } from "../types/index.js";
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
edge: Edge;
|
|
5
5
|
css: EdgeCss;
|
|
6
|
-
onPointerDown?: (e: PointerEvent, type: "edge", data:
|
|
6
|
+
onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void;
|
|
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;
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
<slot name="handle" v-bind="{
|
|
7
7
|
css: css.handle,
|
|
8
8
|
edge: visualEdges[i],
|
|
9
|
-
onPointerDown: dragCtx.
|
|
9
|
+
onPointerDown: dragCtx.moveStart
|
|
10
10
|
}">
|
|
11
11
|
<LayoutDragEdgeHandle
|
|
12
12
|
:css="css.handle"
|
|
13
13
|
:edge="visualEdges[i]"
|
|
14
|
-
:on-pointer-down="dragCtx.
|
|
14
|
+
:on-pointer-down="dragCtx.moveStart"
|
|
15
15
|
/>
|
|
16
16
|
</slot>
|
|
17
17
|
<slot name="indicator" v-bind="{
|
|
@@ -36,16 +36,16 @@ import { isEdgeEqual } from "../helpers/isEdgeEqual.js";
|
|
|
36
36
|
import { toRef } from "vue";
|
|
37
37
|
import { cssToKey } from "../utils/cssToKey.js";
|
|
38
38
|
import {} from "../types/index.js";
|
|
39
|
-
import {
|
|
39
|
+
import { moveContextInjectionKey } from "../types/vue.js";
|
|
40
40
|
defineOptions({
|
|
41
41
|
inheritAttrs: false
|
|
42
42
|
});
|
|
43
43
|
const ctx = inject(layoutContextInjectionKey, void 0);
|
|
44
44
|
if (!ctx) throw new Error("LayoutEdges must be used wivisible a LayoutWindow");
|
|
45
|
-
const dragCtx = inject(
|
|
45
|
+
const dragCtx = inject(moveContextInjectionKey, void 0);
|
|
46
46
|
if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
47
47
|
const visualEdges = toRef(dragCtx, "visualEdges");
|
|
48
|
-
const draggingEdge = computed(() => dragCtx.
|
|
48
|
+
const draggingEdge = computed(() => dragCtx.movingEdges.value.length === 1 ? dragCtx.movingEdges.value[0] : void 0);
|
|
49
49
|
const cssDragEdges = computed(() => {
|
|
50
50
|
const handleEdges = getVisualEdgesCss(
|
|
51
51
|
draggingEdge.value ? dragCtx.visualEdges.value.filter((_) => !isEdgeEqual(draggingEdge.value, _)) : dragCtx.visualEdges.value,
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
</template>
|
|
19
19
|
|
|
20
20
|
<script setup>
|
|
21
|
-
import {
|
|
21
|
+
import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
|
|
22
22
|
import { computed, inject, useAttrs } from "vue";
|
|
23
23
|
import { twMerge } from "@witchcraft/ui/utils/twMerge";
|
|
24
24
|
import LayoutShapeRect from "./LayoutShapeRect.vue";
|
|
@@ -29,7 +29,7 @@ defineOptions({
|
|
|
29
29
|
});
|
|
30
30
|
const ctx = inject(layoutContextInjectionKey, void 0);
|
|
31
31
|
if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
32
|
-
const dragCtx = inject(
|
|
32
|
+
const dragCtx = inject(moveContextInjectionKey, void 0);
|
|
33
33
|
if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
34
34
|
const activeFrame = computed(() => ctx.value.win.activeFrame ? dragCtx.frames.value[ctx.value.win.activeFrame] : void 0);
|
|
35
35
|
</script>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</template>
|
|
28
28
|
|
|
29
29
|
<script setup>
|
|
30
|
-
import {
|
|
30
|
+
import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
|
|
31
31
|
import { twMerge } from "@witchcraft/ui/utils/twMerge";
|
|
32
32
|
import { useAttrs, inject, toRef } from "vue";
|
|
33
33
|
const $attrs = useAttrs();
|
|
@@ -40,7 +40,7 @@ defineOptions({
|
|
|
40
40
|
const emit = defineEmits(["focus"]);
|
|
41
41
|
const ctx = inject(layoutContextInjectionKey, void 0);
|
|
42
42
|
if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
43
|
-
const dragCtx = inject(
|
|
43
|
+
const dragCtx = inject(moveContextInjectionKey, void 0);
|
|
44
44
|
if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
45
45
|
const frames = toRef(dragCtx, "frames");
|
|
46
46
|
</script>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
|
|
2
|
-
import { type
|
|
2
|
+
import { type EdgeMoveStartData } from "../types/index.js";
|
|
3
3
|
import type { IntersectionEntry } from "../types/index.js";
|
|
4
4
|
type __VLS_Props = {
|
|
5
5
|
css: ReturnType<typeof getIntersectionsCss>[number];
|
|
6
6
|
intersection: IntersectionEntry;
|
|
7
|
-
onPointerDown?: (e: PointerEvent, type: "edge", data:
|
|
7
|
+
onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void;
|
|
8
8
|
};
|
|
9
9
|
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>;
|
|
10
10
|
export default _default;
|
|
@@ -19,7 +19,7 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge";
|
|
|
19
19
|
import LayoutShapeRect from "./LayoutShapeRect.vue";
|
|
20
20
|
import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
|
|
21
21
|
import {} from "../types/index.js";
|
|
22
|
-
import {
|
|
22
|
+
import { moveContextInjectionKey } from "../types/vue.js";
|
|
23
23
|
const $attrs = useAttrs();
|
|
24
24
|
defineOptions({
|
|
25
25
|
inheritAttrs: false
|
|
@@ -31,6 +31,6 @@ const props = defineProps({
|
|
|
31
31
|
});
|
|
32
32
|
const ctx = inject(layoutContextInjectionKey, void 0);
|
|
33
33
|
if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
34
|
-
const dragCtx = inject(
|
|
34
|
+
const dragCtx = inject(moveContextInjectionKey, void 0);
|
|
35
35
|
if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
36
36
|
</script>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
|
|
2
|
-
import { type
|
|
2
|
+
import { type EdgeMoveStartData } from "../types/index.js";
|
|
3
3
|
import type { IntersectionEntry } from "../types/index.js";
|
|
4
4
|
type __VLS_Props = {
|
|
5
5
|
css: ReturnType<typeof getIntersectionsCss>[number];
|
|
6
6
|
intersection: IntersectionEntry;
|
|
7
|
-
onPointerDown?: (e: PointerEvent, type: "edge", data:
|
|
7
|
+
onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void;
|
|
8
8
|
};
|
|
9
9
|
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>;
|
|
10
10
|
export default _default;
|
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
>
|
|
6
6
|
<slot name="handler" v-bind="{
|
|
7
7
|
css: css.handle,
|
|
8
|
-
onPointerDown: dragCtx.
|
|
8
|
+
onPointerDown: dragCtx.moveStart,
|
|
9
9
|
intersection: draggableIntersections[i]
|
|
10
10
|
}">
|
|
11
11
|
<LayoutIntersectionHandle
|
|
12
12
|
:css="css.handle"
|
|
13
13
|
:intersection="draggableIntersections[i]"
|
|
14
|
-
:on-pointer-down="dragCtx.
|
|
14
|
+
:on-pointer-down="dragCtx.moveStart"
|
|
15
15
|
/>
|
|
16
16
|
</slot>
|
|
17
17
|
<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
</template>
|
|
24
24
|
|
|
25
25
|
<script setup>
|
|
26
|
-
import {
|
|
26
|
+
import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
|
|
27
27
|
import { computed, inject } from "vue";
|
|
28
28
|
import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
|
|
29
29
|
import { cssToKey } from "../utils/cssToKey.js";
|
|
@@ -34,7 +34,7 @@ defineOptions({
|
|
|
34
34
|
});
|
|
35
35
|
const ctx = inject(layoutContextInjectionKey, void 0);
|
|
36
36
|
if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
37
|
-
const dragCtx = inject(
|
|
37
|
+
const dragCtx = inject(moveContextInjectionKey, void 0);
|
|
38
38
|
if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
|
|
39
39
|
const draggableIntersections = computed(
|
|
40
40
|
() => dragCtx.intersections.value.filter((_) => !_.isWindowEdge && (_.count === 4 || _.count === 1 && _.sharesEdge))
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { type
|
|
1
|
+
import { ActionHandler } from "../move/ActionHandler";
|
|
2
|
+
import { type MoveState, type IAction } from "../types/index.js";
|
|
3
3
|
import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
|
|
4
4
|
import { type LayoutWindow } from "../types/index.js";
|
|
5
5
|
type __VLS_Props = {
|
|
6
6
|
/** If you really need it, you can provide your own drag action handler (remember to markRaw it), note the actionHandler's prop will no longer have any effect.*/
|
|
7
|
-
|
|
7
|
+
actionHandler?: ActionHandler<any, any>;
|
|
8
8
|
/** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
|
|
9
|
-
actionHandlers?:
|
|
9
|
+
actionHandlers?: IAction[];
|
|
10
10
|
textHints?: {
|
|
11
11
|
text: string;
|
|
12
12
|
classes?: string;
|
|
@@ -35,19 +35,19 @@ type __VLS_Slots = {} & {
|
|
|
35
35
|
};
|
|
36
36
|
declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
37
37
|
state: import("vue").ComputedRef<{
|
|
38
|
-
|
|
38
|
+
moveDirections: {
|
|
39
39
|
horizontal: "up" | "down" | "left" | "right" | undefined;
|
|
40
40
|
vertical: "up" | "down" | "left" | "right" | undefined;
|
|
41
41
|
};
|
|
42
|
-
|
|
42
|
+
movePoint: {
|
|
43
43
|
x: number;
|
|
44
44
|
y: number;
|
|
45
45
|
} | undefined;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
moveDistance: number;
|
|
47
|
+
isMoving: false | "edge" | "frame";
|
|
48
|
+
showMoving: boolean;
|
|
49
|
+
movingFrameId: string | undefined;
|
|
50
|
+
movingEdges: {
|
|
51
51
|
startX: number;
|
|
52
52
|
startY: number;
|
|
53
53
|
endX: number;
|
|
@@ -76,17 +76,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
|
|
|
76
76
|
} | {
|
|
77
77
|
frame: import("../types/index.js").LayoutFrame;
|
|
78
78
|
} | {
|
|
79
|
-
|
|
79
|
+
movingFrameId: string;
|
|
80
80
|
hoveredFrameId: string;
|
|
81
|
-
zoneSide: import("../types/index.js").
|
|
81
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
82
82
|
} | {
|
|
83
|
-
|
|
83
|
+
movingFrameId: string;
|
|
84
84
|
hoveredFrameId: string;
|
|
85
|
-
zoneSide: import("../types/index.js").
|
|
85
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
86
86
|
} | {
|
|
87
|
-
|
|
87
|
+
movingFrameId: string;
|
|
88
88
|
hoveredFrameId: string;
|
|
89
|
-
zoneSide: import("../types/index.js").
|
|
89
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
90
90
|
} | {
|
|
91
91
|
frame: import("../types/index.js").LayoutFrame;
|
|
92
92
|
} | {
|
|
@@ -116,7 +116,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
|
|
|
116
116
|
message: string;
|
|
117
117
|
} | undefined;
|
|
118
118
|
}[];
|
|
119
|
-
|
|
119
|
+
movingIntersection: {
|
|
120
120
|
point: {
|
|
121
121
|
x: number;
|
|
122
122
|
y: number;
|
|
@@ -153,17 +153,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
|
|
|
153
153
|
} | {
|
|
154
154
|
frame: import("../types/index.js").LayoutFrame;
|
|
155
155
|
} | {
|
|
156
|
-
|
|
156
|
+
movingFrameId: string;
|
|
157
157
|
hoveredFrameId: string;
|
|
158
|
-
zoneSide: import("../types/index.js").
|
|
158
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
159
159
|
} | {
|
|
160
|
-
|
|
160
|
+
movingFrameId: string;
|
|
161
161
|
hoveredFrameId: string;
|
|
162
|
-
zoneSide: import("../types/index.js").
|
|
162
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
163
163
|
} | {
|
|
164
|
-
|
|
164
|
+
movingFrameId: string;
|
|
165
165
|
hoveredFrameId: string;
|
|
166
|
-
zoneSide: import("../types/index.js").
|
|
166
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
167
167
|
} | {
|
|
168
168
|
frame: import("../types/index.js").LayoutFrame;
|
|
169
169
|
} | {
|
|
@@ -222,17 +222,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
|
|
|
222
222
|
} | {
|
|
223
223
|
frame: import("../types/index.js").LayoutFrame;
|
|
224
224
|
} | {
|
|
225
|
-
|
|
225
|
+
movingFrameId: string;
|
|
226
226
|
hoveredFrameId: string;
|
|
227
|
-
zoneSide: import("../types/index.js").
|
|
227
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
228
228
|
} | {
|
|
229
|
-
|
|
229
|
+
movingFrameId: string;
|
|
230
230
|
hoveredFrameId: string;
|
|
231
|
-
zoneSide: import("../types/index.js").
|
|
231
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
232
232
|
} | {
|
|
233
|
-
|
|
233
|
+
movingFrameId: string;
|
|
234
234
|
hoveredFrameId: string;
|
|
235
|
-
zoneSide: import("../types/index.js").
|
|
235
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
236
236
|
} | {
|
|
237
237
|
frame: import("../types/index.js").LayoutFrame;
|
|
238
238
|
} | {
|
|
@@ -294,17 +294,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
|
|
|
294
294
|
} | {
|
|
295
295
|
frame: import("../types/index.js").LayoutFrame;
|
|
296
296
|
} | {
|
|
297
|
-
|
|
297
|
+
movingFrameId: string;
|
|
298
298
|
hoveredFrameId: string;
|
|
299
|
-
zoneSide: import("../types/index.js").
|
|
299
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
300
300
|
} | {
|
|
301
|
-
|
|
301
|
+
movingFrameId: string;
|
|
302
302
|
hoveredFrameId: string;
|
|
303
|
-
zoneSide: import("../types/index.js").
|
|
303
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
304
304
|
} | {
|
|
305
|
-
|
|
305
|
+
movingFrameId: string;
|
|
306
306
|
hoveredFrameId: string;
|
|
307
|
-
zoneSide: import("../types/index.js").
|
|
307
|
+
zoneSide: import("../types/index.js").Zone["side"];
|
|
308
308
|
} | {
|
|
309
309
|
frame: import("../types/index.js").LayoutFrame;
|
|
310
310
|
} | {
|
|
@@ -337,26 +337,26 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
|
|
|
337
337
|
touchingFrames: Record<string, import("../types/index.js").LayoutFrame>[];
|
|
338
338
|
touchingFramesArrays: import("../types/index.js").LayoutFrame[][];
|
|
339
339
|
frames: import("../types/index.js").LayoutFrames;
|
|
340
|
-
|
|
340
|
+
moveHoveredFrame: import("../types/index.js").LayoutFrame | undefined;
|
|
341
341
|
intersections: import("../types/index.js").IntersectionEntry[];
|
|
342
|
-
|
|
342
|
+
isMovingFromWindowEdge: boolean;
|
|
343
343
|
eventContext: Record<string, unknown> | undefined;
|
|
344
344
|
win: import("../types/index.js").BaseLayoutWindow;
|
|
345
345
|
}>;
|
|
346
346
|
win: import("vue").ModelRef<import("../types/index.js").BaseLayoutWindow, string, import("../types/index.js").BaseLayoutWindow, import("../types/index.js").BaseLayoutWindow>;
|
|
347
347
|
getUpdateWindowSizeInfo: typeof getUpdateWindowSizeInfo;
|
|
348
|
-
|
|
348
|
+
actionHandler: ActionHandler<any, any>;
|
|
349
349
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
350
350
|
"update:win": (value: import("../types/index.js").BaseLayoutWindow) => any;
|
|
351
351
|
} & {
|
|
352
|
-
|
|
353
|
-
|
|
352
|
+
isShowingMove: (value: boolean) => any;
|
|
353
|
+
moveState: (value: MoveState) => any;
|
|
354
354
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
355
|
-
|
|
356
|
-
|
|
355
|
+
onIsShowingMove?: ((value: boolean) => any) | undefined;
|
|
356
|
+
onMoveState?: ((value: MoveState) => any) | undefined;
|
|
357
357
|
"onUpdate:win"?: ((value: import("../types/index.js").BaseLayoutWindow) => any) | undefined;
|
|
358
358
|
}>, {
|
|
359
|
-
actionHandlers:
|
|
359
|
+
actionHandlers: IAction[];
|
|
360
360
|
textHints: {
|
|
361
361
|
text: string;
|
|
362
362
|
classes?: string;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
flex
|
|
8
8
|
flex-col
|
|
9
9
|
`,
|
|
10
|
-
|
|
10
|
+
isMoving && `dragging cursor-pointer user-select-none pointer-events-none`,
|
|
11
11
|
requestType && `request-${requestType}`,
|
|
12
12
|
$attrs.class
|
|
13
13
|
)"
|
|
@@ -23,21 +23,21 @@
|
|
|
23
23
|
</template>
|
|
24
24
|
</div>
|
|
25
25
|
<Teleport
|
|
26
|
-
v-if="
|
|
26
|
+
v-if="isMoving === 'frame' && movingFrameId && movePoint"
|
|
27
27
|
:to="ghostTeleportTo"
|
|
28
28
|
defer
|
|
29
29
|
>
|
|
30
30
|
<div
|
|
31
31
|
class="fixed z-[9999] pointer-events-none"
|
|
32
32
|
:style="{
|
|
33
|
-
left:
|
|
34
|
-
top:
|
|
35
|
-
width: frames[
|
|
36
|
-
height: frames[
|
|
33
|
+
left: movePoint.x / settings.maxInt * win.pxWidth + win.pxX + 'px',
|
|
34
|
+
top: movePoint.y / settings.maxInt * win.pxHeight + win.pxY + 'px',
|
|
35
|
+
width: frames[movingFrameId] ? frames[movingFrameId].width / settings.maxInt * win.pxWidth + 'px' : void 0,
|
|
36
|
+
height: frames[movingFrameId] ? frames[movingFrameId].height / settings.maxInt * win.pxHeight + 'px' : void 0
|
|
37
37
|
}"
|
|
38
38
|
>
|
|
39
39
|
<slot
|
|
40
|
-
:id="
|
|
40
|
+
:id="movingFrameId"
|
|
41
41
|
:name="`frame-drag-ghost`"
|
|
42
42
|
>
|
|
43
43
|
<div class="frame-drag-ghost border border-neutral-500 bg-white/50 w-10 h-10"/>
|
|
@@ -69,9 +69,9 @@ import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalRes
|
|
|
69
69
|
import { twMerge } from "@witchcraft/ui/utils/twMerge";
|
|
70
70
|
import { computed, markRaw, provide, reactive, ref, useAttrs, watch } from "vue";
|
|
71
71
|
import { useFrames } from "../composables/useFrames.js";
|
|
72
|
-
import { createDefaultHandlers } from "../
|
|
73
|
-
import {
|
|
74
|
-
import {
|
|
72
|
+
import { createDefaultHandlers } from "../move/createDefaultHandlers.js";
|
|
73
|
+
import { ActionHandler } from "../move/ActionHandler";
|
|
74
|
+
import { moveContextInjectionKey } from "../types/vue.js";
|
|
75
75
|
import {} from "../types/index.js";
|
|
76
76
|
import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
|
|
77
77
|
import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js";
|
|
@@ -82,23 +82,23 @@ import { applyFrameChanges } from "../layout/applyFrameChanges.js";
|
|
|
82
82
|
const $attrs = useAttrs();
|
|
83
83
|
const win = defineModel("win", { type: Object, ...{ required: true } });
|
|
84
84
|
const props = defineProps({
|
|
85
|
-
|
|
85
|
+
actionHandler: { type: Object, required: false },
|
|
86
86
|
actionHandlers: { type: Array, required: false, default: void 0 },
|
|
87
87
|
textHints: { type: Array, required: false, default: () => [] },
|
|
88
88
|
textHintsTeleportTo: { type: null, required: true, default: void 0 },
|
|
89
89
|
ghostTeleportTo: { type: String, required: false, default: "#root" },
|
|
90
90
|
allowWindowSizeUpdate: { type: Boolean, required: false, default: true }
|
|
91
91
|
});
|
|
92
|
-
const emit = defineEmits(["
|
|
92
|
+
const emit = defineEmits(["isShowingMove", "moveState"]);
|
|
93
93
|
const windowEl = ref(null);
|
|
94
94
|
const requestType = ref();
|
|
95
|
-
const
|
|
95
|
+
const actionHandler = props.actionHandler ?? markRaw(new ActionHandler(
|
|
96
96
|
[
|
|
97
97
|
...props.actionHandlers ?? createDefaultHandlers()
|
|
98
98
|
],
|
|
99
99
|
{
|
|
100
100
|
onEvent: (e, cancel) => {
|
|
101
|
-
|
|
101
|
+
showMoving.value = true;
|
|
102
102
|
if (e instanceof KeyboardEvent && e.key === "Escape") {
|
|
103
103
|
cancel();
|
|
104
104
|
}
|
|
@@ -108,26 +108,26 @@ const dragActionHandler = props.dragActionHandler ?? markRaw(new DragActionHandl
|
|
|
108
108
|
},
|
|
109
109
|
onEnd: () => {
|
|
110
110
|
requestType.value = void 0;
|
|
111
|
-
|
|
111
|
+
showMoving.value = true;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
));
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
const shapes =
|
|
115
|
+
actionHandler.shapes = reactive([]);
|
|
116
|
+
actionHandler.textHints = reactive({ actions: [], errors: [] });
|
|
117
|
+
const shapes = actionHandler.shapes;
|
|
118
118
|
const dragContext = useFrames(
|
|
119
119
|
win,
|
|
120
|
-
|
|
120
|
+
actionHandler
|
|
121
121
|
);
|
|
122
122
|
const {
|
|
123
|
-
|
|
124
|
-
|
|
123
|
+
movePoint,
|
|
124
|
+
isMoving,
|
|
125
125
|
frames,
|
|
126
126
|
state,
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
movingFrameId,
|
|
128
|
+
showMoving
|
|
129
129
|
} = dragContext;
|
|
130
|
-
provide(
|
|
130
|
+
provide(moveContextInjectionKey, dragContext);
|
|
131
131
|
function getWindowOffset() {
|
|
132
132
|
const windowElRect = windowEl.value.getBoundingClientRect();
|
|
133
133
|
return {
|
|
@@ -155,8 +155,8 @@ watch(() => props.allowWindowSizeUpdate, (newval, oldval) => {
|
|
|
155
155
|
onWindowResize();
|
|
156
156
|
}
|
|
157
157
|
});
|
|
158
|
-
watch(state, () => emit("
|
|
159
|
-
watch(
|
|
158
|
+
watch(state, () => emit("moveState", state.value));
|
|
159
|
+
watch(showMoving, () => emit("isShowingMove", showMoving.value));
|
|
160
160
|
const layoutContext = computed(() => {
|
|
161
161
|
return {
|
|
162
162
|
win: win.value,
|
|
@@ -169,6 +169,6 @@ defineExpose({
|
|
|
169
169
|
state,
|
|
170
170
|
win,
|
|
171
171
|
getUpdateWindowSizeInfo,
|
|
172
|
-
|
|
172
|
+
actionHandler
|
|
173
173
|
});
|
|
174
174
|
</script>
|