@witchcraft/layout 0.3.1 → 0.4.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.
- package/README.md +62 -70
- package/dist/module.json +1 -1
- package/dist/module.mjs +6 -1
- package/dist/runtime/components/FrameDragHandle.vue +1 -1
- package/dist/runtime/components/LayoutDecosEdges.d.vue.ts +15 -0
- package/dist/runtime/components/LayoutDecosEdges.vue +34 -0
- package/dist/runtime/components/LayoutDecosEdges.vue.d.ts +15 -0
- package/dist/runtime/components/LayoutDecosRects.d.vue.ts +15 -0
- package/dist/runtime/components/LayoutDecosRects.vue +37 -0
- package/dist/runtime/components/LayoutDecosRects.vue.d.ts +15 -0
- package/dist/runtime/components/LayoutDragEdgeGrabbed.d.vue.ts +2 -0
- package/dist/runtime/components/LayoutDragEdgeGrabbed.vue +43 -0
- package/dist/runtime/components/LayoutDragEdgeGrabbed.vue.d.ts +2 -0
- package/dist/runtime/components/LayoutDragEdgeHandle.d.vue.ts +9 -0
- package/dist/runtime/components/LayoutDragEdgeHandle.vue +44 -0
- package/dist/runtime/components/LayoutDragEdgeHandle.vue.d.ts +9 -0
- package/dist/runtime/components/{LayoutDecos.d.vue.ts → LayoutDragEdgeVisible.d.vue.ts} +3 -2
- package/dist/runtime/components/LayoutDragEdgeVisible.vue +38 -0
- package/dist/runtime/components/{LayoutDecos.vue.d.ts → LayoutDragEdgeVisible.vue.d.ts} +3 -2
- package/dist/runtime/components/LayoutDragEdges.d.vue.ts +21 -0
- package/dist/runtime/components/LayoutDragEdges.vue +67 -0
- package/dist/runtime/components/LayoutDragEdges.vue.d.ts +21 -0
- package/dist/runtime/components/LayoutEdgesActiveFrame.d.vue.ts +2 -0
- package/dist/runtime/components/LayoutEdgesActiveFrame.vue +35 -0
- package/dist/runtime/components/LayoutEdgesActiveFrame.vue.d.ts +2 -0
- package/dist/runtime/components/LayoutFrame.d.vue.ts +7 -6
- package/dist/runtime/components/LayoutFrame.vue +18 -14
- package/dist/runtime/components/LayoutFrame.vue.d.ts +7 -6
- package/dist/runtime/components/LayoutIntersectionHandle.d.vue.ts +10 -0
- package/dist/runtime/components/LayoutIntersectionHandle.vue +36 -0
- package/dist/runtime/components/LayoutIntersectionHandle.vue.d.ts +10 -0
- package/dist/runtime/components/LayoutIntersectionVisible.d.vue.ts +6 -0
- package/dist/runtime/components/LayoutIntersectionVisible.vue +34 -0
- package/dist/runtime/components/LayoutIntersectionVisible.vue.d.ts +6 -0
- package/dist/runtime/components/LayoutIntersections.d.vue.ts +21 -0
- package/dist/runtime/components/LayoutIntersections.vue +52 -0
- package/dist/runtime/components/LayoutIntersections.vue.d.ts +21 -0
- package/dist/runtime/components/{LayoutShapeSquare.d.vue.ts → LayoutShapeRect.d.vue.ts} +2 -2
- package/dist/runtime/components/{LayoutShapeSquare.vue.d.ts → LayoutShapeRect.vue.d.ts} +2 -2
- package/dist/runtime/components/LayoutWindow.d.vue.ts +252 -14
- package/dist/runtime/components/LayoutWindow.vue +27 -48
- package/dist/runtime/components/LayoutWindow.vue.d.ts +252 -14
- package/dist/runtime/composables/useFrames.d.ts +859 -2
- package/dist/runtime/composables/useFrames.js +2 -0
- package/dist/runtime/demo/App.vue +122 -74
- package/dist/runtime/demo/DemoControls.vue +7 -5
- package/dist/runtime/demo/index.html +12 -0
- package/dist/runtime/demo/tailwind.css +1 -1
- package/dist/runtime/drag/CloseAction.d.ts +1 -2
- package/dist/runtime/drag/CloseAction.js +1 -1
- package/dist/runtime/drag/DragActionHandler.d.ts +5 -3
- package/dist/runtime/drag/DragActionHandler.js +40 -6
- package/dist/runtime/drag/FrameDragAction.js +6 -7
- package/dist/runtime/drag/SplitAction.d.ts +1 -2
- package/dist/runtime/drag/SplitAction.js +1 -1
- package/dist/runtime/drag/createDefaultHandlers.d.ts +1 -1
- package/dist/runtime/drag/defaultDragActions.d.ts +1 -1
- package/dist/runtime/helpers/consoleDebugWindow.d.ts +43 -0
- package/dist/runtime/helpers/consoleDebugWindow.js +222 -0
- package/dist/runtime/helpers/convertLayoutWindowToWorkspace.js +2 -2
- package/dist/runtime/helpers/framesRedistributeFix.d.ts +87 -0
- package/dist/runtime/helpers/framesRedistributeFix.js +54 -0
- package/dist/runtime/helpers/getMoveEdgeInfo.d.ts +6 -2
- package/dist/runtime/helpers/getMoveEdgeInfo.js +11 -2
- package/dist/runtime/helpers/getPinnedEdgesForCollapsedFrames.d.ts +5 -0
- package/dist/runtime/helpers/getPinnedEdgesForCollapsedFrames.js +18 -0
- package/dist/runtime/helpers/getShapeRectCss.d.ts +7 -0
- package/dist/runtime/helpers/{getShapeSquareCss.js → getShapeRectCss.js} +1 -1
- package/dist/runtime/helpers/index.d.ts +3 -3
- package/dist/runtime/helpers/index.js +3 -3
- package/dist/runtime/helpers/moveEdge.js +3 -1
- package/dist/runtime/helpers/pxSizeToScaledSize.d.ts +2 -0
- package/dist/runtime/helpers/{numberToScaledSize.js → pxSizeToScaledSize.js} +1 -1
- package/dist/runtime/helpers/updateWindowSizeWithEvent.d.ts +3 -0
- package/dist/runtime/helpers/validateLayoutShape.d.ts +5 -0
- package/dist/runtime/helpers/validateLayoutShape.js +28 -0
- package/dist/runtime/layout/applyFrameChanges.js +6 -0
- package/dist/runtime/layout/createSplitDecoShapes.js +1 -1
- package/dist/runtime/layout/getFrameCollapseInfo.d.ts +5 -2
- package/dist/runtime/layout/getFrameCollapseInfo.js +16 -46
- package/dist/runtime/layout/getFrameDockInfo.d.ts +1 -1
- package/dist/runtime/layout/getFrameDockInfo.js +5 -1
- package/dist/runtime/layout/getFrameUncollapseInfo.d.ts +5 -2
- package/dist/runtime/layout/getFrameUncollapseInfo.js +16 -50
- package/dist/runtime/layout/getFrameUndockInfo.js +4 -1
- package/dist/runtime/layout/getFramesRedistributeInfo.d.ts +20 -4
- package/dist/runtime/layout/getFramesRedistributeInfo.js +31 -2
- package/dist/runtime/layout/getRelaxFramesInfo.d.ts +7 -0
- package/dist/runtime/layout/getRelaxFramesInfo.js +91 -0
- package/dist/runtime/layout/getUpdateWindowSizeInfo.d.ts +13 -0
- package/dist/runtime/layout/getUpdateWindowSizeInfo.js +65 -0
- package/dist/runtime/layout/index.d.ts +1 -0
- package/dist/runtime/layout/index.js +1 -0
- package/dist/runtime/layout/resizeFrame.js +1 -3
- package/dist/runtime/settings.d.ts +26 -19
- package/dist/runtime/settings.js +57 -22
- package/dist/runtime/types/index.d.ts +1243 -30
- package/dist/runtime/types/index.js +22 -8
- package/dist/runtime/types/vue.d.ts +41 -0
- package/dist/runtime/{drag/types.js → types/vue.js} +1 -0
- package/dist/runtime/utils/cssToKey.d.ts +5 -0
- package/dist/runtime/utils/cssToKey.js +3 -0
- package/package.json +11 -12
- package/src/module.ts +6 -1
- package/src/runtime/components/FrameDragHandle.vue +1 -1
- package/src/runtime/components/LayoutDecosEdges.vue +38 -0
- package/src/runtime/components/LayoutDecosRects.vue +42 -0
- package/src/runtime/components/LayoutDragEdgeGrabbed.vue +50 -0
- package/src/runtime/components/LayoutDragEdgeHandle.vue +52 -0
- package/src/runtime/components/LayoutDragEdgeVisible.vue +45 -0
- package/src/runtime/components/LayoutDragEdges.vue +78 -0
- package/src/runtime/components/LayoutEdgesActiveFrame.vue +43 -0
- package/src/runtime/components/LayoutFrame.vue +22 -15
- package/src/runtime/components/LayoutIntersectionHandle.vue +45 -0
- package/src/runtime/components/LayoutIntersectionVisible.vue +41 -0
- package/src/runtime/components/LayoutIntersections.vue +64 -0
- package/src/runtime/components/{LayoutShapeSquare.vue → LayoutShapeRect.vue} +2 -2
- package/src/runtime/components/LayoutWindow.vue +29 -49
- package/src/runtime/composables/useFrames.ts +7 -2
- package/src/runtime/demo/App.vue +128 -78
- package/src/runtime/demo/DemoControls.vue +7 -5
- package/src/runtime/demo/index.html +12 -0
- package/src/runtime/demo/tailwind.css +3 -0
- package/src/runtime/drag/CloseAction.ts +2 -3
- package/src/runtime/drag/DragActionHandler.ts +48 -10
- package/src/runtime/drag/FrameDragAction.ts +4 -5
- package/src/runtime/drag/SplitAction.ts +4 -3
- package/src/runtime/drag/createDefaultHandlers.ts +2 -1
- package/src/runtime/drag/defaultDragActions.ts +2 -1
- package/src/runtime/helpers/consoleDebugWindow.ts +331 -0
- package/src/runtime/helpers/convertLayoutWindowToWorkspace.ts +2 -2
- package/src/runtime/helpers/framesRedistributeFix.ts +162 -0
- package/src/runtime/helpers/getMoveEdgeInfo.ts +22 -5
- package/src/runtime/helpers/getPinnedEdgesForCollapsedFrames.ts +29 -0
- package/src/runtime/helpers/{getShapeSquareCss.ts → getShapeRectCss.ts} +3 -3
- package/src/runtime/helpers/index.ts +4 -3
- package/src/runtime/helpers/moveEdge.ts +3 -1
- package/src/runtime/helpers/{numberToScaledSize.ts → pxSizeToScaledSize.ts} +2 -2
- package/src/runtime/helpers/updateWindowSizeWithEvent.ts +3 -0
- package/src/runtime/helpers/validateLayoutShape.ts +46 -0
- package/src/runtime/layout/applyFrameChanges.ts +5 -0
- package/src/runtime/layout/createSplitDecoShapes.ts +1 -1
- package/src/runtime/layout/getFrameCollapseInfo.ts +26 -85
- package/src/runtime/layout/getFrameDockInfo.ts +8 -1
- package/src/runtime/layout/getFrameUncollapseInfo.ts +29 -96
- package/src/runtime/layout/getFrameUndockInfo.ts +7 -1
- package/src/runtime/layout/getFramesRedistributeInfo.ts +60 -5
- package/src/runtime/layout/getRelaxFramesInfo.ts +139 -0
- package/src/runtime/layout/getUpdateWindowSizeInfo.ts +105 -0
- package/src/runtime/layout/index.ts +1 -0
- package/src/runtime/layout/resizeFrame.ts +4 -3
- package/src/runtime/settings.ts +78 -25
- package/src/runtime/types/index.ts +205 -33
- package/src/runtime/types/vue.ts +41 -0
- package/src/runtime/utils/cssToKey.ts +8 -0
- package/dist/runtime/components/LayoutDecos.vue +0 -26
- package/dist/runtime/components/LayoutEdges.d.vue.ts +0 -17
- package/dist/runtime/components/LayoutEdges.vue +0 -144
- package/dist/runtime/components/LayoutEdges.vue.d.ts +0 -17
- package/dist/runtime/drag/types.d.ts +0 -161
- package/dist/runtime/helpers/clampNumber.d.ts +0 -1
- package/dist/runtime/helpers/clampNumber.js +0 -3
- package/dist/runtime/helpers/getShapeSquareCss.d.ts +0 -7
- package/dist/runtime/helpers/numberToScaledSize.d.ts +0 -2
- package/src/runtime/components/LayoutDecos.vue +0 -28
- package/src/runtime/components/LayoutEdges.vue +0 -170
- package/src/runtime/drag/types.ts +0 -177
- package/src/runtime/helpers/clampNumber.ts +0 -9
- /package/dist/runtime/components/{LayoutShapeSquare.vue → LayoutShapeRect.vue} +0 -0
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
import type { ComputedRef, InjectionKey, Ref } from "vue"
|
|
2
|
-
|
|
3
|
-
import type { Direction, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "../types/index.js"
|
|
4
|
-
|
|
5
|
-
export type DragState = {
|
|
6
|
-
/** The current directions in the corresponding orientations that the user is dragging in. */
|
|
7
|
-
dragDirections: Record<Orientation, Direction | undefined>
|
|
8
|
-
/** The curren point (in scaled window coordinates) the user is dragging at. */
|
|
9
|
-
dragPoint?: Point
|
|
10
|
-
/** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
|
|
11
|
-
isDragging: boolean | "frame" | "edge"
|
|
12
|
-
/** Whether to show the moved frames while dragging. */
|
|
13
|
-
showDragging: boolean
|
|
14
|
-
/** The frame being dragged during a frame drag. Only set when isDragging is "frame". */
|
|
15
|
-
draggingFrameId?: FrameId
|
|
16
|
-
/**
|
|
17
|
-
* The edges that are currently being dragged. There are multiple edges if they drag an intersection since what's actually happening is we're just dragging the closest horizontal and vertical edges.
|
|
18
|
-
*/
|
|
19
|
-
draggingEdges: Edge[]
|
|
20
|
-
/**
|
|
21
|
-
* The intersection that is currently being dragged.
|
|
22
|
-
*/
|
|
23
|
-
draggingIntersection?: IntersectionEntry
|
|
24
|
-
/** The "visual" edges that can be displayed for dragging. See {@link getVisualEdges} */
|
|
25
|
-
visualEdges: Edge[]
|
|
26
|
-
/**
|
|
27
|
-
* The frames touching the currently dragged edges. Each entry corresponds to the frames touching the corresponding dragging edge.
|
|
28
|
-
*
|
|
29
|
-
* So you can use the index in draggingEdges to get the corresponding frames.
|
|
30
|
-
*/
|
|
31
|
-
touchingFrames: Record<string, LayoutFrame>[]
|
|
32
|
-
/**
|
|
33
|
-
* Same as touchingFrames, but with the frames in an array.
|
|
34
|
-
*/
|
|
35
|
-
touchingFramesArrays: LayoutFrame[][]
|
|
36
|
-
/**
|
|
37
|
-
* All the frames, with/without the currently dragged frames depending on if `showDragging` is true.
|
|
38
|
-
*/
|
|
39
|
-
frames: Record<string, LayoutFrame>
|
|
40
|
-
/**
|
|
41
|
-
* The frame that is currently being hovered over (according to whether `dragPoint` in in the frame or not).
|
|
42
|
-
*/
|
|
43
|
-
dragHoveredFrame: LayoutFrame | undefined
|
|
44
|
-
/**
|
|
45
|
-
* A list of corner intersections. Frames can also be dragged by these.
|
|
46
|
-
*/
|
|
47
|
-
intersections: IntersectionEntry[]
|
|
48
|
-
/**
|
|
49
|
-
* Whether the drag was initiated from a point along the window edge.
|
|
50
|
-
*/
|
|
51
|
-
isDraggingFromWindowEdge: boolean
|
|
52
|
-
win: LayoutWindow
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
export interface ActionDragChangeResult {
|
|
57
|
-
/** Whether the drag should update the edges. Defaults to false. */
|
|
58
|
-
updateEdges?: boolean
|
|
59
|
-
/** Deco shapes produced by this action during this drag step. */
|
|
60
|
-
shapes: LayoutShape[]
|
|
61
|
-
/** Whether to show the moved edges while dragging. Defaults to true. */
|
|
62
|
-
showDragging?: boolean
|
|
63
|
-
}
|
|
64
|
-
export type DragChangeResult = Omit<ActionDragChangeResult, "shapes">
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Called when the drag coordinates change (during any event).
|
|
68
|
-
*
|
|
69
|
-
* Should return `{ allowed: true/false, shapes: LayoutShape[] }` to control whether the action is allowed and edges update and what deco shapes to render.
|
|
70
|
-
*
|
|
71
|
-
* Note that the allowed return type only affect the `move` event but is also typed as `boolean` for other events for ease of use.
|
|
72
|
-
*/
|
|
73
|
-
export type DragChangeHandler = <T extends "start" | "move" | "end">(
|
|
74
|
-
type: T,
|
|
75
|
-
e: T extends "end" ? PointerEvent | undefined : PointerEvent,
|
|
76
|
-
state: DragState,
|
|
77
|
-
forceRecalculateEdges: () => void,
|
|
78
|
-
cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void
|
|
79
|
-
) => ActionDragChangeResult
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* A drag action describes when and how to handle a drag event.
|
|
83
|
-
*
|
|
84
|
-
* For example, there are the default split/close actions that can be triggered in certain situations. This could be when holding down a modifier or key, or some other condition (e.g. the user is dragging a specific edge).
|
|
85
|
-
*
|
|
86
|
-
* Each action should handle it's configuration and saving/caching any state it needs. See {@link SplitAction} and {@link CloseAction} for examples.
|
|
87
|
-
*/
|
|
88
|
-
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
89
|
-
export interface IDragAction {
|
|
90
|
-
/** A unique name for your action. */
|
|
91
|
-
name: string
|
|
92
|
-
onDragChange: DragChangeHandler
|
|
93
|
-
/**
|
|
94
|
-
*
|
|
95
|
-
* Is called after `onDragChange("end")` with the same event. Might not be called if the request was cancelled.
|
|
96
|
-
*
|
|
97
|
-
* You should apply your action if possible and return whether it was applied.
|
|
98
|
-
*
|
|
99
|
-
* This is also a good place to reset your state.
|
|
100
|
-
*/
|
|
101
|
-
onDragApply: (state: DragState, forceRecalculateEdges: () => void) => boolean
|
|
102
|
-
/**
|
|
103
|
-
* Should return true if it should handle the "request"/event (e.g. some modifier is being pressed => user is requesting x action).
|
|
104
|
-
*
|
|
105
|
-
* The user is not necessarily dragging at this point, though they might also change actions mid drag. So it does not necessarily mean the event is allowed.
|
|
106
|
-
*
|
|
107
|
-
* Here is where you should initiate your state. Don't allow the action by default unless it can always be allowed.
|
|
108
|
-
*/
|
|
109
|
-
canHandleRequest(
|
|
110
|
-
e: KeyboardEvent | PointerEvent,
|
|
111
|
-
state: DragState,
|
|
112
|
-
forceRecalculateEdges: () => void
|
|
113
|
-
): boolean
|
|
114
|
-
/**
|
|
115
|
-
* Called when a user cancels the drag action.
|
|
116
|
-
*
|
|
117
|
-
* You should reset your state here.
|
|
118
|
-
*/
|
|
119
|
-
cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void
|
|
120
|
-
/**
|
|
121
|
-
* Plugins should implement some basic debug logs by calling {@link DragActionHandler.debugState } at least before and after applying actions in onDragApply. Debug can be a string because it can be an object key to filter on (see the debugState function).
|
|
122
|
-
*
|
|
123
|
-
*
|
|
124
|
-
* Calls look like this usually, where this.state is the plugin state:
|
|
125
|
-
* ```ts
|
|
126
|
-
* DragActionHandler.debugState(this.name, "before", state, this.state, this.debug)
|
|
127
|
-
* ```
|
|
128
|
-
*/
|
|
129
|
-
debug: boolean | string
|
|
130
|
-
/**
|
|
131
|
-
* The action handler will call this regardless of whether the action is active or not.
|
|
132
|
-
*
|
|
133
|
-
* Can be used by actions to return display hints.
|
|
134
|
-
*
|
|
135
|
-
* Actions should keep the state of the hints locally and update them in canHandlerRequest/onDrag*, etc. and only use this to return the state of the actions, not update them as that could become expensive.
|
|
136
|
-
*/
|
|
137
|
-
// todo think of a better way to do this, don't like that the action handler has to construct a bunch of objects on every change
|
|
138
|
-
getTextHints(type: "start" | "move" | "end"): {
|
|
139
|
-
/** Hint texts to display regarding the action state/usage. Undefined means no hint. */
|
|
140
|
-
actions?: string[]
|
|
141
|
-
/** Error texts/hints to display when the action produces an error. */
|
|
142
|
-
errors?: string[]
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
export type EdgeDragStartData = { edge?: Edge, intersection?: IntersectionEntry }
|
|
146
|
-
export type FrameDragStartData = { frameId: FrameId }
|
|
147
|
-
|
|
148
|
-
// drag start overloads for triggering dragsj
|
|
149
|
-
export type DragStartFn = {
|
|
150
|
-
(e: PointerEvent, type: "edge", data: EdgeDragStartData): void
|
|
151
|
-
(e: PointerEvent, type: "frame", data: FrameDragStartData): void
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
export interface UseFramesContext {
|
|
155
|
-
dragStart: DragStartFn
|
|
156
|
-
dragMove: (e: PointerEvent) => void
|
|
157
|
-
dragEnd: (e?: PointerEvent, options?: { apply?: boolean }) => void
|
|
158
|
-
cancel: () => void
|
|
159
|
-
dragDirections: Ref<Record<Orientation, Direction | undefined>>
|
|
160
|
-
dragPoint: Ref<Point | undefined>
|
|
161
|
-
isDragging: Ref<false | "frame" | "edge">
|
|
162
|
-
draggingEdges: Ref<Edge[]>
|
|
163
|
-
draggingIntersection: Ref<IntersectionEntry | undefined>
|
|
164
|
-
visualEdges: Ref<Edge[]>
|
|
165
|
-
touchingFrames: Ref<Record<string, LayoutFrame>[]>
|
|
166
|
-
touchingFramesArrays: Ref<LayoutFrame[][]>
|
|
167
|
-
frames: ComputedRef<Record<string, LayoutFrame>>
|
|
168
|
-
dragHoveredFrame: ComputedRef<LayoutFrame | undefined>
|
|
169
|
-
intersections: ComputedRef<IntersectionEntry[]>
|
|
170
|
-
isDraggingFromWindowEdge: Ref<boolean>
|
|
171
|
-
forceRecalculateEdges: () => void
|
|
172
|
-
state: ComputedRef<DragState>
|
|
173
|
-
frameDragFrameId: Ref<FrameId | undefined>
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
export const dragContextInjectionKey = Symbol.for("@witchcraft/layout:dragContext") as InjectionKey<UseFramesContext>
|
|
File without changes
|