@witchcraft/layout 0.4.4 → 0.5.1

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 +107 -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} +19 -21
  48. package/dist/runtime/{drag/DragActionHandler.js → move/ActionHandler.js} +21 -18
  49. package/dist/runtime/{drag → move}/CloseAction.d.ts +9 -8
  50. package/dist/runtime/{drag → move}/CloseAction.js +31 -27
  51. package/dist/runtime/{drag → move}/FrameDragAction.d.ts +9 -8
  52. package/dist/runtime/{drag → move}/FrameDragAction.js +23 -22
  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 +10 -9
  56. package/dist/runtime/{drag → move}/SplitAction.js +53 -44
  57. package/dist/runtime/{drag → move}/createDefaultHandlers.d.ts +2 -2
  58. package/dist/runtime/types/index.d.ts +192 -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 +115 -104
  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} +48 -41
  89. package/src/runtime/{drag → move}/CloseAction.ts +42 -37
  90. package/src/runtime/{drag → move}/FrameDragAction.ts +37 -36
  91. package/src/runtime/{drag/DragDirectionStore.ts → move/MoveDirectionStore.ts} +10 -10
  92. package/src/runtime/{drag → move}/SplitAction.ts +64 -54
  93. package/src/runtime/{drag → move}/createDefaultHandlers.ts +2 -2
  94. package/src/runtime/types/index.ts +90 -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
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@witchcraft/layout",
3
3
  "configKey": "witchcraftLayout",
4
- "version": "0.4.4",
4
+ "version": "0.5.1",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "unknown"
@@ -9,18 +9,18 @@
9
9
 
10
10
  <script setup>
11
11
  import { inject, onBeforeUnmount } from "vue";
12
- import { dragContextInjectionKey } from "../types/vue.js";
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(dragContextInjectionKey);
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.dragStart(e, "frame", { frameId: props.frameId });
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 { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
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(dragContextInjectionKey, void 0);
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.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : void 0);
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 EdgeDragStartData } from "../types/index.js";
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: EdgeDragStartData) => void;
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 { dragContextInjectionKey } from "../types/vue.js";
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(dragContextInjectionKey, void 0);
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 EdgeDragStartData } from "../types/index.js";
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: EdgeDragStartData) => void;
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.dragStart
9
+ onPointerDown: dragCtx.moveStart
10
10
  }">
11
11
  <LayoutDragEdgeHandle
12
12
  :css="css.handle"
13
13
  :edge="visualEdges[i]"
14
- :on-pointer-down="dragCtx.dragStart"
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 { dragContextInjectionKey } from "../types/vue.js";
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(dragContextInjectionKey, void 0);
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.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : void 0);
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 { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
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(dragContextInjectionKey, void 0);
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 { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
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(dragContextInjectionKey, void 0);
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 EdgeDragStartData } from "../types/index.js";
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: EdgeDragStartData) => void;
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 { dragContextInjectionKey } from "../types/vue.js";
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(dragContextInjectionKey, void 0);
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 EdgeDragStartData } from "../types/index.js";
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: EdgeDragStartData) => void;
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.dragStart,
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.dragStart"
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 { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
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(dragContextInjectionKey, void 0);
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 { DragActionHandler } from "../drag/DragActionHandler";
2
- import { type DragState, type IDragAction } from "../types/index.js";
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
- dragActionHandler?: DragActionHandler<any, any>;
7
+ actionHandler?: ActionHandler<any, any>;
8
8
  /** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
9
- actionHandlers?: IDragAction[];
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
- dragDirections: {
38
+ moveDirections: {
39
39
  horizontal: "up" | "down" | "left" | "right" | undefined;
40
40
  vertical: "up" | "down" | "left" | "right" | undefined;
41
41
  };
42
- dragPoint: {
42
+ movePoint: {
43
43
  x: number;
44
44
  y: number;
45
45
  } | undefined;
46
- dragDistance: number;
47
- isDragging: false | "edge" | "frame";
48
- showDragging: boolean;
49
- draggingFrameId: string | undefined;
50
- draggingEdges: {
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
- draggingFrameId: string;
79
+ movingFrameId: string;
80
80
  hoveredFrameId: string;
81
- zoneSide: import("../types/index.js").DragZone["side"];
81
+ zoneSide: import("../types/index.js").Zone["side"];
82
82
  } | {
83
- draggingFrameId: string;
83
+ movingFrameId: string;
84
84
  hoveredFrameId: string;
85
- zoneSide: import("../types/index.js").DragZone["side"];
85
+ zoneSide: import("../types/index.js").Zone["side"];
86
86
  } | {
87
- draggingFrameId: string;
87
+ movingFrameId: string;
88
88
  hoveredFrameId: string;
89
- zoneSide: import("../types/index.js").DragZone["side"];
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
- draggingIntersection: {
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
- draggingFrameId: string;
156
+ movingFrameId: string;
157
157
  hoveredFrameId: string;
158
- zoneSide: import("../types/index.js").DragZone["side"];
158
+ zoneSide: import("../types/index.js").Zone["side"];
159
159
  } | {
160
- draggingFrameId: string;
160
+ movingFrameId: string;
161
161
  hoveredFrameId: string;
162
- zoneSide: import("../types/index.js").DragZone["side"];
162
+ zoneSide: import("../types/index.js").Zone["side"];
163
163
  } | {
164
- draggingFrameId: string;
164
+ movingFrameId: string;
165
165
  hoveredFrameId: string;
166
- zoneSide: import("../types/index.js").DragZone["side"];
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
- draggingFrameId: string;
225
+ movingFrameId: string;
226
226
  hoveredFrameId: string;
227
- zoneSide: import("../types/index.js").DragZone["side"];
227
+ zoneSide: import("../types/index.js").Zone["side"];
228
228
  } | {
229
- draggingFrameId: string;
229
+ movingFrameId: string;
230
230
  hoveredFrameId: string;
231
- zoneSide: import("../types/index.js").DragZone["side"];
231
+ zoneSide: import("../types/index.js").Zone["side"];
232
232
  } | {
233
- draggingFrameId: string;
233
+ movingFrameId: string;
234
234
  hoveredFrameId: string;
235
- zoneSide: import("../types/index.js").DragZone["side"];
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
- draggingFrameId: string;
297
+ movingFrameId: string;
298
298
  hoveredFrameId: string;
299
- zoneSide: import("../types/index.js").DragZone["side"];
299
+ zoneSide: import("../types/index.js").Zone["side"];
300
300
  } | {
301
- draggingFrameId: string;
301
+ movingFrameId: string;
302
302
  hoveredFrameId: string;
303
- zoneSide: import("../types/index.js").DragZone["side"];
303
+ zoneSide: import("../types/index.js").Zone["side"];
304
304
  } | {
305
- draggingFrameId: string;
305
+ movingFrameId: string;
306
306
  hoveredFrameId: string;
307
- zoneSide: import("../types/index.js").DragZone["side"];
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
- dragHoveredFrame: import("../types/index.js").LayoutFrame | undefined;
340
+ moveHoveredFrame: import("../types/index.js").LayoutFrame | undefined;
341
341
  intersections: import("../types/index.js").IntersectionEntry[];
342
- isDraggingFromWindowEdge: boolean;
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
- dragActionHandler: DragActionHandler<any, any>;
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
- isShowingDrag: (value: boolean) => any;
353
- dragState: (value: DragState) => any;
352
+ isShowingMove: (value: boolean) => any;
353
+ moveState: (value: MoveState) => any;
354
354
  }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
355
- onIsShowingDrag?: ((value: boolean) => any) | undefined;
356
- onDragState?: ((value: DragState) => any) | undefined;
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: IDragAction[];
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
- isDragging && `dragging cursor-pointer user-select-none pointer-events-none`,
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="isDragging === 'frame' && frameDragFrameId && dragPoint"
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: dragPoint.x / settings.maxInt * win.pxWidth + win.pxX + 'px',
34
- top: dragPoint.y / settings.maxInt * win.pxHeight + win.pxY + 'px',
35
- width: frames[frameDragFrameId] ? frames[frameDragFrameId].width / settings.maxInt * win.pxWidth + 'px' : void 0,
36
- height: frames[frameDragFrameId] ? frames[frameDragFrameId].height / settings.maxInt * win.pxHeight + 'px' : void 0
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="frameDragFrameId"
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 "../drag/createDefaultHandlers.js";
73
- import { DragActionHandler } from "../drag/DragActionHandler";
74
- import { dragContextInjectionKey } from "../types/vue.js";
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
- dragActionHandler: { type: Object, required: false },
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(["isShowingDrag", "dragState"]);
92
+ const emit = defineEmits(["isShowingMove", "moveState"]);
93
93
  const windowEl = ref(null);
94
94
  const requestType = ref();
95
- const dragActionHandler = props.dragActionHandler ?? markRaw(new DragActionHandler(
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
- showDragging.value = true;
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
- showDragging.value = true;
111
+ showMoving.value = true;
112
112
  }
113
113
  }
114
114
  ));
115
- dragActionHandler.shapes = reactive([]);
116
- dragActionHandler.textHints = reactive({ actions: [], errors: [] });
117
- const shapes = dragActionHandler.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
- dragActionHandler
120
+ actionHandler
121
121
  );
122
122
  const {
123
- dragPoint,
124
- isDragging,
123
+ movePoint,
124
+ isMoving,
125
125
  frames,
126
126
  state,
127
- frameDragFrameId,
128
- showDragging
127
+ movingFrameId,
128
+ showMoving
129
129
  } = dragContext;
130
- provide(dragContextInjectionKey, dragContext);
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("dragState", state.value));
159
- watch(showDragging, () => emit("isShowingDrag", showDragging.value));
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
- dragActionHandler
172
+ actionHandler
173
173
  });
174
174
  </script>