@vuu-ui/vuu-layout 0.8.34 → 0.8.35

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 (248) hide show
  1. package/package.json +8 -10
  2. package/cjs/Component.js +0 -14
  3. package/cjs/Component.js.map +0 -1
  4. package/cjs/DraggableLayout.css +0 -18
  5. package/cjs/DraggableLayout.js +0 -24
  6. package/cjs/DraggableLayout.js.map +0 -1
  7. package/cjs/dock-layout/DockLayout.css +0 -36
  8. package/cjs/dock-layout/DockLayout.js +0 -27
  9. package/cjs/dock-layout/DockLayout.js.map +0 -1
  10. package/cjs/dock-layout/Drawer.css +0 -159
  11. package/cjs/dock-layout/Drawer.js +0 -87
  12. package/cjs/dock-layout/Drawer.js.map +0 -1
  13. package/cjs/drag-drop/BoxModel.js +0 -422
  14. package/cjs/drag-drop/BoxModel.js.map +0 -1
  15. package/cjs/drag-drop/DragState.js +0 -154
  16. package/cjs/drag-drop/DragState.js.map +0 -1
  17. package/cjs/drag-drop/Draggable.js +0 -192
  18. package/cjs/drag-drop/Draggable.js.map +0 -1
  19. package/cjs/drag-drop/DropMenu.css +0 -71
  20. package/cjs/drag-drop/DropMenu.js +0 -46
  21. package/cjs/drag-drop/DropMenu.js.map +0 -1
  22. package/cjs/drag-drop/DropTarget.js +0 -244
  23. package/cjs/drag-drop/DropTarget.js.map +0 -1
  24. package/cjs/drag-drop/DropTargetRenderer.css +0 -40
  25. package/cjs/drag-drop/DropTargetRenderer.js +0 -233
  26. package/cjs/drag-drop/DropTargetRenderer.js.map +0 -1
  27. package/cjs/flexbox/Flexbox.css +0 -45
  28. package/cjs/flexbox/Flexbox.js +0 -61
  29. package/cjs/flexbox/Flexbox.js.map +0 -1
  30. package/cjs/flexbox/FlexboxLayout.js +0 -30
  31. package/cjs/flexbox/FlexboxLayout.js.map +0 -1
  32. package/cjs/flexbox/FluidGrid.css +0 -134
  33. package/cjs/flexbox/FluidGrid.js +0 -78
  34. package/cjs/flexbox/FluidGrid.js.map +0 -1
  35. package/cjs/flexbox/FluidGridLayout.js +0 -14
  36. package/cjs/flexbox/FluidGridLayout.js.map +0 -1
  37. package/cjs/flexbox/Splitter.css +0 -148
  38. package/cjs/flexbox/Splitter.js +0 -113
  39. package/cjs/flexbox/Splitter.js.map +0 -1
  40. package/cjs/flexbox/flexbox-utils.js +0 -109
  41. package/cjs/flexbox/flexbox-utils.js.map +0 -1
  42. package/cjs/flexbox/useResponsiveSizing.js +0 -62
  43. package/cjs/flexbox/useResponsiveSizing.js.map +0 -1
  44. package/cjs/flexbox/useSplitterResizing.js +0 -209
  45. package/cjs/flexbox/useSplitterResizing.js.map +0 -1
  46. package/cjs/index.js.map +0 -1
  47. package/cjs/layout-action.js +0 -27
  48. package/cjs/layout-action.js.map +0 -1
  49. package/cjs/layout-header/Header.css +0 -9
  50. package/cjs/layout-header/Header.js +0 -122
  51. package/cjs/layout-header/Header.js.map +0 -1
  52. package/cjs/layout-provider/LayoutProvider.js +0 -178
  53. package/cjs/layout-provider/LayoutProvider.js.map +0 -1
  54. package/cjs/layout-provider/LayoutProviderContext.js +0 -14
  55. package/cjs/layout-provider/LayoutProviderContext.js.map +0 -1
  56. package/cjs/layout-provider/useLayoutDragDrop.js +0 -170
  57. package/cjs/layout-provider/useLayoutDragDrop.js.map +0 -1
  58. package/cjs/layout-reducer/flexUtils.js +0 -219
  59. package/cjs/layout-reducer/flexUtils.js.map +0 -1
  60. package/cjs/layout-reducer/insert-layout-element.js +0 -273
  61. package/cjs/layout-reducer/insert-layout-element.js.map +0 -1
  62. package/cjs/layout-reducer/layout-reducer.js +0 -198
  63. package/cjs/layout-reducer/layout-reducer.js.map +0 -1
  64. package/cjs/layout-reducer/layoutTypes.js +0 -41
  65. package/cjs/layout-reducer/layoutTypes.js.map +0 -1
  66. package/cjs/layout-reducer/layoutUtils.js +0 -226
  67. package/cjs/layout-reducer/layoutUtils.js.map +0 -1
  68. package/cjs/layout-reducer/move-layout-element.js +0 -31
  69. package/cjs/layout-reducer/move-layout-element.js.map +0 -1
  70. package/cjs/layout-reducer/remove-layout-element.js +0 -223
  71. package/cjs/layout-reducer/remove-layout-element.js.map +0 -1
  72. package/cjs/layout-reducer/replace-layout-element.js +0 -91
  73. package/cjs/layout-reducer/replace-layout-element.js.map +0 -1
  74. package/cjs/layout-reducer/resize-flex-children.js +0 -61
  75. package/cjs/layout-reducer/resize-flex-children.js.map +0 -1
  76. package/cjs/layout-reducer/wrap-layout-element.js +0 -212
  77. package/cjs/layout-reducer/wrap-layout-element.js.map +0 -1
  78. package/cjs/layout-view/View.css +0 -62
  79. package/cjs/layout-view/View.js +0 -155
  80. package/cjs/layout-view/View.js.map +0 -1
  81. package/cjs/layout-view/useView.js +0 -92
  82. package/cjs/layout-view/useView.js.map +0 -1
  83. package/cjs/layout-view/useViewResize.js +0 -42
  84. package/cjs/layout-view/useViewResize.js.map +0 -1
  85. package/cjs/layout-view-actions/ViewContext.js +0 -16
  86. package/cjs/layout-view-actions/ViewContext.js.map +0 -1
  87. package/cjs/layout-view-actions/useViewActionDispatcher.js +0 -103
  88. package/cjs/layout-view-actions/useViewActionDispatcher.js.map +0 -1
  89. package/cjs/palette/Palette.css +0 -33
  90. package/cjs/palette/Palette.js +0 -118
  91. package/cjs/palette/Palette.js.map +0 -1
  92. package/cjs/placeholder/LayoutStartPanel.css +0 -30
  93. package/cjs/placeholder/LayoutStartPanel.js +0 -51
  94. package/cjs/placeholder/LayoutStartPanel.js.map +0 -1
  95. package/cjs/placeholder/Placeholder.css +0 -17
  96. package/cjs/placeholder/Placeholder.js +0 -25
  97. package/cjs/placeholder/Placeholder.js.map +0 -1
  98. package/cjs/registry/ComponentRegistry.js +0 -27
  99. package/cjs/registry/ComponentRegistry.js.map +0 -1
  100. package/cjs/responsive/breakpoints.js +0 -36
  101. package/cjs/responsive/breakpoints.js.map +0 -1
  102. package/cjs/responsive/use-breakpoints.js +0 -76
  103. package/cjs/responsive/use-breakpoints.js.map +0 -1
  104. package/cjs/responsive/useResizeObserver.js +0 -118
  105. package/cjs/responsive/useResizeObserver.js.map +0 -1
  106. package/cjs/responsive/utils.js +0 -34
  107. package/cjs/responsive/utils.js.map +0 -1
  108. package/cjs/stack/Stack.css +0 -39
  109. package/cjs/stack/Stack.js +0 -139
  110. package/cjs/stack/Stack.js.map +0 -1
  111. package/cjs/stack/StackLayout.js +0 -122
  112. package/cjs/stack/StackLayout.js.map +0 -1
  113. package/cjs/use-persistent-state.js +0 -109
  114. package/cjs/use-persistent-state.js.map +0 -1
  115. package/cjs/utils/pathUtils.js +0 -293
  116. package/cjs/utils/pathUtils.js.map +0 -1
  117. package/cjs/utils/propUtils.js +0 -27
  118. package/cjs/utils/propUtils.js.map +0 -1
  119. package/cjs/utils/refUtils.js +0 -12
  120. package/cjs/utils/refUtils.js.map +0 -1
  121. package/cjs/utils/styleUtils.js +0 -15
  122. package/cjs/utils/styleUtils.js.map +0 -1
  123. package/cjs/utils/typeOf.js +0 -27
  124. package/cjs/utils/typeOf.js.map +0 -1
  125. package/esm/Component.js +0 -12
  126. package/esm/Component.js.map +0 -1
  127. package/esm/DraggableLayout.css +0 -18
  128. package/esm/DraggableLayout.js +0 -22
  129. package/esm/DraggableLayout.js.map +0 -1
  130. package/esm/dock-layout/DockLayout.css +0 -36
  131. package/esm/dock-layout/DockLayout.js +0 -25
  132. package/esm/dock-layout/DockLayout.js.map +0 -1
  133. package/esm/dock-layout/Drawer.css +0 -159
  134. package/esm/dock-layout/Drawer.js +0 -85
  135. package/esm/dock-layout/Drawer.js.map +0 -1
  136. package/esm/drag-drop/BoxModel.js +0 -415
  137. package/esm/drag-drop/BoxModel.js.map +0 -1
  138. package/esm/drag-drop/DragState.js +0 -152
  139. package/esm/drag-drop/DragState.js.map +0 -1
  140. package/esm/drag-drop/Draggable.js +0 -190
  141. package/esm/drag-drop/Draggable.js.map +0 -1
  142. package/esm/drag-drop/DropMenu.css +0 -71
  143. package/esm/drag-drop/DropMenu.js +0 -43
  144. package/esm/drag-drop/DropMenu.js.map +0 -1
  145. package/esm/drag-drop/DropTarget.js +0 -240
  146. package/esm/drag-drop/DropTarget.js.map +0 -1
  147. package/esm/drag-drop/DropTargetRenderer.css +0 -40
  148. package/esm/drag-drop/DropTargetRenderer.js +0 -231
  149. package/esm/drag-drop/DropTargetRenderer.js.map +0 -1
  150. package/esm/flexbox/Flexbox.css +0 -45
  151. package/esm/flexbox/Flexbox.js +0 -59
  152. package/esm/flexbox/Flexbox.js.map +0 -1
  153. package/esm/flexbox/FlexboxLayout.js +0 -28
  154. package/esm/flexbox/FlexboxLayout.js.map +0 -1
  155. package/esm/flexbox/FluidGrid.css +0 -134
  156. package/esm/flexbox/FluidGrid.js +0 -76
  157. package/esm/flexbox/FluidGrid.js.map +0 -1
  158. package/esm/flexbox/FluidGridLayout.js +0 -12
  159. package/esm/flexbox/FluidGridLayout.js.map +0 -1
  160. package/esm/flexbox/Splitter.css +0 -148
  161. package/esm/flexbox/Splitter.js +0 -111
  162. package/esm/flexbox/Splitter.js.map +0 -1
  163. package/esm/flexbox/flexbox-utils.js +0 -103
  164. package/esm/flexbox/flexbox-utils.js.map +0 -1
  165. package/esm/flexbox/useResponsiveSizing.js +0 -60
  166. package/esm/flexbox/useResponsiveSizing.js.map +0 -1
  167. package/esm/flexbox/useSplitterResizing.js +0 -207
  168. package/esm/flexbox/useSplitterResizing.js.map +0 -1
  169. package/esm/index.js +0 -37
  170. package/esm/index.js.map +0 -1
  171. package/esm/layout-action.js +0 -25
  172. package/esm/layout-action.js.map +0 -1
  173. package/esm/layout-header/Header.css +0 -9
  174. package/esm/layout-header/Header.js +0 -120
  175. package/esm/layout-header/Header.js.map +0 -1
  176. package/esm/layout-provider/LayoutProvider.js +0 -172
  177. package/esm/layout-provider/LayoutProvider.js.map +0 -1
  178. package/esm/layout-provider/LayoutProviderContext.js +0 -12
  179. package/esm/layout-provider/LayoutProviderContext.js.map +0 -1
  180. package/esm/layout-provider/useLayoutDragDrop.js +0 -168
  181. package/esm/layout-provider/useLayoutDragDrop.js.map +0 -1
  182. package/esm/layout-reducer/flexUtils.js +0 -210
  183. package/esm/layout-reducer/flexUtils.js.map +0 -1
  184. package/esm/layout-reducer/insert-layout-element.js +0 -269
  185. package/esm/layout-reducer/insert-layout-element.js.map +0 -1
  186. package/esm/layout-reducer/layout-reducer.js +0 -196
  187. package/esm/layout-reducer/layout-reducer.js.map +0 -1
  188. package/esm/layout-reducer/layoutTypes.js +0 -37
  189. package/esm/layout-reducer/layoutTypes.js.map +0 -1
  190. package/esm/layout-reducer/layoutUtils.js +0 -215
  191. package/esm/layout-reducer/layoutUtils.js.map +0 -1
  192. package/esm/layout-reducer/move-layout-element.js +0 -29
  193. package/esm/layout-reducer/move-layout-element.js.map +0 -1
  194. package/esm/layout-reducer/remove-layout-element.js +0 -221
  195. package/esm/layout-reducer/remove-layout-element.js.map +0 -1
  196. package/esm/layout-reducer/replace-layout-element.js +0 -87
  197. package/esm/layout-reducer/replace-layout-element.js.map +0 -1
  198. package/esm/layout-reducer/resize-flex-children.js +0 -58
  199. package/esm/layout-reducer/resize-flex-children.js.map +0 -1
  200. package/esm/layout-reducer/wrap-layout-element.js +0 -210
  201. package/esm/layout-reducer/wrap-layout-element.js.map +0 -1
  202. package/esm/layout-view/View.css +0 -62
  203. package/esm/layout-view/View.js +0 -153
  204. package/esm/layout-view/View.js.map +0 -1
  205. package/esm/layout-view/useView.js +0 -90
  206. package/esm/layout-view/useView.js.map +0 -1
  207. package/esm/layout-view/useViewResize.js +0 -40
  208. package/esm/layout-view/useViewResize.js.map +0 -1
  209. package/esm/layout-view-actions/ViewContext.js +0 -12
  210. package/esm/layout-view-actions/ViewContext.js.map +0 -1
  211. package/esm/layout-view-actions/useViewActionDispatcher.js +0 -101
  212. package/esm/layout-view-actions/useViewActionDispatcher.js.map +0 -1
  213. package/esm/palette/Palette.css +0 -33
  214. package/esm/palette/Palette.js +0 -115
  215. package/esm/palette/Palette.js.map +0 -1
  216. package/esm/placeholder/LayoutStartPanel.css +0 -30
  217. package/esm/placeholder/LayoutStartPanel.js +0 -49
  218. package/esm/placeholder/LayoutStartPanel.js.map +0 -1
  219. package/esm/placeholder/Placeholder.css +0 -17
  220. package/esm/placeholder/Placeholder.js +0 -23
  221. package/esm/placeholder/Placeholder.js.map +0 -1
  222. package/esm/registry/ComponentRegistry.js +0 -21
  223. package/esm/registry/ComponentRegistry.js.map +0 -1
  224. package/esm/responsive/breakpoints.js +0 -33
  225. package/esm/responsive/breakpoints.js.map +0 -1
  226. package/esm/responsive/use-breakpoints.js +0 -74
  227. package/esm/responsive/use-breakpoints.js.map +0 -1
  228. package/esm/responsive/useResizeObserver.js +0 -112
  229. package/esm/responsive/useResizeObserver.js.map +0 -1
  230. package/esm/responsive/utils.js +0 -31
  231. package/esm/responsive/utils.js.map +0 -1
  232. package/esm/stack/Stack.css +0 -39
  233. package/esm/stack/Stack.js +0 -137
  234. package/esm/stack/Stack.js.map +0 -1
  235. package/esm/stack/StackLayout.js +0 -120
  236. package/esm/stack/StackLayout.js.map +0 -1
  237. package/esm/use-persistent-state.js +0 -104
  238. package/esm/use-persistent-state.js.map +0 -1
  239. package/esm/utils/pathUtils.js +0 -280
  240. package/esm/utils/pathUtils.js.map +0 -1
  241. package/esm/utils/propUtils.js +0 -23
  242. package/esm/utils/propUtils.js.map +0 -1
  243. package/esm/utils/refUtils.js +0 -10
  244. package/esm/utils/refUtils.js.map +0 -1
  245. package/esm/utils/styleUtils.js +0 -13
  246. package/esm/utils/styleUtils.js.map +0 -1
  247. package/esm/utils/typeOf.js +0 -23
  248. package/esm/utils/typeOf.js.map +0 -1
@@ -1,170 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var Draggable = require('../drag-drop/Draggable.js');
5
- require('react/jsx-runtime');
6
- require('clsx');
7
- var pathUtils = require('../utils/pathUtils.js');
8
- require('../drag-drop/BoxModel.js');
9
- var flexUtils = require('../layout-reducer/flexUtils.js');
10
-
11
- const NO_INSTRUCTIONS = {};
12
- const NO_OFFSETS = [0, 0];
13
- const getDragElement = (rect, id, dragElement) => {
14
- const wrapper = document.createElement("div");
15
- wrapper.className = "vuuSimpleDraggableWrapper";
16
- wrapper.classList.add(
17
- "vuuSimpleDraggableWrapper",
18
- "salt-theme",
19
- "salt-density-medium"
20
- );
21
- wrapper.dataset.dragging = "true";
22
- const div = dragElement ?? document.createElement("div");
23
- div.id = id;
24
- wrapper.appendChild(div);
25
- document.body.appendChild(wrapper);
26
- const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;
27
- return [wrapper, cssText, rect.left, rect.top];
28
- };
29
- const determineDragOffsets = (draggedElement) => {
30
- const { offsetParent } = draggedElement;
31
- if (offsetParent === null) {
32
- return NO_OFFSETS;
33
- } else {
34
- const { left: offsetLeft, top: offsetTop } = offsetParent.getBoundingClientRect();
35
- return [offsetLeft, offsetTop];
36
- }
37
- };
38
- const useLayoutDragDrop = (rootLayoutRef, dispatch, pathToDropTarget) => {
39
- const dragActionRef = React.useRef();
40
- const dragOperationRef = React.useRef();
41
- const draggableHTMLElementRef = React.useRef();
42
- const handleDrag = React.useCallback((x, y) => {
43
- if (dragOperationRef.current && draggableHTMLElementRef.current) {
44
- const {
45
- dragOffsets: [offsetX, offsetY],
46
- targetPosition
47
- } = dragOperationRef.current;
48
- const left = typeof x === "number" ? x - offsetX : targetPosition.left;
49
- const top = typeof y === "number" ? y - offsetY : targetPosition.top;
50
- if (left !== targetPosition.left || top !== targetPosition.top) {
51
- dragOperationRef.current.targetPosition.left = left;
52
- dragOperationRef.current.targetPosition.top = top;
53
- draggableHTMLElementRef.current.style.top = top + "px";
54
- draggableHTMLElementRef.current.style.left = left + "px";
55
- }
56
- }
57
- }, []);
58
- const handleDrop = React.useCallback(
59
- (dropTarget) => {
60
- if (dragOperationRef.current) {
61
- const {
62
- dragInstructions,
63
- payload: draggedReactElement,
64
- originalCSS
65
- } = dragOperationRef.current;
66
- if (dropTarget) {
67
- dispatch({
68
- type: "drag-drop",
69
- draggedReactElement,
70
- dragInstructions,
71
- dropTarget
72
- });
73
- }
74
- if (draggableHTMLElementRef.current) {
75
- if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {
76
- console.log("drift back to start");
77
- document.body.removeChild(draggableHTMLElementRef.current);
78
- } else if (dragInstructions.RemoveDraggableOnDragEnd) {
79
- document.body.removeChild(draggableHTMLElementRef.current);
80
- } else {
81
- draggableHTMLElementRef.current.style.cssText = originalCSS;
82
- delete draggableHTMLElementRef.current.dataset.dragging;
83
- }
84
- }
85
- dragActionRef.current = void 0;
86
- dragOperationRef.current = void 0;
87
- draggableHTMLElementRef.current = void 0;
88
- }
89
- },
90
- [dispatch]
91
- );
92
- const handleDragStart = React.useCallback(
93
- (evt) => {
94
- if (dragActionRef.current) {
95
- const {
96
- payload: component,
97
- dragContainerPath,
98
- dragElement,
99
- dragRect,
100
- instructions = NO_INSTRUCTIONS,
101
- path
102
- } = dragActionRef.current;
103
- const { current: rootLayout } = rootLayoutRef;
104
- const dragPos = { x: evt.clientX, y: evt.clientY };
105
- const dragPayload = component ?? pathUtils.followPath(rootLayout, path, true);
106
- const { id: dragPayloadId } = dragPayload.props;
107
- const intrinsicSize = flexUtils.getIntrinsicSize(dragPayload);
108
- let originalCSS = "", dragCSS = "", dragTransform = "";
109
- let dragStartLeft = -1;
110
- let dragStartTop = -1;
111
- let dragOffsets = NO_OFFSETS;
112
- let element = document.getElementById(dragPayloadId);
113
- if (element === null) {
114
- [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(
115
- dragRect,
116
- dragPayloadId,
117
- dragElement
118
- );
119
- } else {
120
- dragOffsets = determineDragOffsets(element);
121
- const [offsetLeft, offsetTop] = dragOffsets;
122
- const { width, height, left, top } = element.getBoundingClientRect();
123
- dragStartLeft = left - offsetLeft;
124
- dragStartTop = top - offsetTop;
125
- dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;
126
- element.dataset.dragging = "true";
127
- originalCSS = element.style.cssText;
128
- }
129
- dragTransform = Draggable.Draggable.initDrag(
130
- rootLayoutRef.current,
131
- dragContainerPath,
132
- dragRect,
133
- dragPos,
134
- {
135
- drag: handleDrag,
136
- drop: handleDrop
137
- },
138
- intrinsicSize
139
- // dropTargets
140
- );
141
- element.style.cssText = dragCSS + dragTransform;
142
- draggableHTMLElementRef.current = element;
143
- dragOperationRef.current = {
144
- payload: dragPayload,
145
- originalCSS,
146
- dragRect,
147
- dragOffsets,
148
- dragInstructions: instructions,
149
- targetPosition: { left: dragStartLeft, top: dragStartTop }
150
- };
151
- }
152
- },
153
- [handleDrag, handleDrop, rootLayoutRef]
154
- );
155
- const prepareToDrag = React.useCallback(
156
- (action) => {
157
- const { evt, ...options } = action;
158
- dragActionRef.current = {
159
- ...options,
160
- dragContainerPath: pathUtils.resolvePath(rootLayoutRef.current, pathToDropTarget)
161
- };
162
- Draggable.Draggable.handleMousedown(evt, handleDragStart, options.instructions);
163
- },
164
- [handleDragStart, pathToDropTarget, rootLayoutRef]
165
- );
166
- return prepareToDrag;
167
- };
168
-
169
- exports.useLayoutDragDrop = useLayoutDragDrop;
170
- //# sourceMappingURL=useLayoutDragDrop.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useLayoutDragDrop.js","sources":["../../src/layout-provider/useLayoutDragDrop.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useRef } from \"react\";\nimport {\n DragDropRect,\n DragEndCallback,\n Draggable,\n DragInstructions,\n} from \"../drag-drop\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { getIntrinsicSize } from \"../layout-reducer/flexUtils\";\nimport { followPath, resolvePath } from \"../utils\";\nimport { LayoutProviderDispatch } from \"./LayoutProviderContext\";\n\nconst NO_INSTRUCTIONS = {} as DragInstructions;\nconst NO_OFFSETS: [number, number] = [0, 0];\n\ninterface CurrentDragAction extends Omit<DragStartAction, \"evt\" | \"type\"> {\n dragContainerPath: string;\n}\n\ninterface DragOperation {\n payload: ReactElement;\n originalCSS: string;\n dragRect: unknown;\n dragInstructions: DragInstructions;\n dragOffsets: [number, number];\n targetPosition: { left: number; top: number };\n}\n\nconst getDragElement = (\n rect: DragDropRect,\n id: string,\n dragElement?: HTMLElement\n): [HTMLElement, string, number, number] => {\n const wrapper = document.createElement(\"div\");\n wrapper.className = \"vuuSimpleDraggableWrapper\";\n wrapper.classList.add(\n \"vuuSimpleDraggableWrapper\",\n \"salt-theme\",\n \"salt-density-medium\"\n );\n wrapper.dataset.dragging = \"true\";\n\n const div = dragElement ?? document.createElement(\"div\");\n div.id = id;\n\n wrapper.appendChild(div);\n document.body.appendChild(wrapper);\n const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;\n return [wrapper, cssText, rect.left, rect.top];\n};\n\nconst determineDragOffsets = (\n draggedElement: HTMLElement\n): [number, number] => {\n const { offsetParent } = draggedElement;\n if (offsetParent === null) {\n return NO_OFFSETS;\n } else {\n const { left: offsetLeft, top: offsetTop } =\n offsetParent.getBoundingClientRect();\n return [offsetLeft, offsetTop];\n }\n};\n\nexport const useLayoutDragDrop = (\n rootLayoutRef: MutableRefObject<ReactElement>,\n dispatch: LayoutProviderDispatch,\n pathToDropTarget?: string\n) => {\n const dragActionRef = useRef<CurrentDragAction>();\n const dragOperationRef = useRef<DragOperation>();\n const draggableHTMLElementRef = useRef<HTMLElement>();\n\n const handleDrag = useCallback((x, y) => {\n if (dragOperationRef.current && draggableHTMLElementRef.current) {\n const {\n dragOffsets: [offsetX, offsetY],\n targetPosition,\n } = dragOperationRef.current;\n const left = typeof x === \"number\" ? x - offsetX : targetPosition.left;\n const top = typeof y === \"number\" ? y - offsetY : targetPosition.top;\n if (left !== targetPosition.left || top !== targetPosition.top) {\n dragOperationRef.current.targetPosition.left = left;\n dragOperationRef.current.targetPosition.top = top;\n draggableHTMLElementRef.current.style.top = top + \"px\";\n draggableHTMLElementRef.current.style.left = left + \"px\";\n }\n }\n }, []);\n\n const handleDrop: DragEndCallback = useCallback(\n (dropTarget) => {\n if (dragOperationRef.current) {\n const {\n dragInstructions,\n payload: draggedReactElement,\n originalCSS,\n } = dragOperationRef.current;\n\n if (dropTarget) {\n dispatch({\n type: \"drag-drop\",\n draggedReactElement,\n dragInstructions,\n dropTarget,\n });\n }\n\n if (draggableHTMLElementRef.current) {\n if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {\n console.log(\"drift back to start\");\n document.body.removeChild(draggableHTMLElementRef.current);\n } else if (dragInstructions.RemoveDraggableOnDragEnd) {\n document.body.removeChild(draggableHTMLElementRef.current);\n } else {\n draggableHTMLElementRef.current.style.cssText = originalCSS;\n delete draggableHTMLElementRef.current.dataset.dragging;\n }\n }\n\n dragActionRef.current = undefined;\n dragOperationRef.current = undefined;\n draggableHTMLElementRef.current = undefined;\n }\n },\n [dispatch]\n );\n\n const handleDragStart = useCallback(\n (evt: MouseEvent) => {\n if (dragActionRef.current) {\n const {\n payload: component,\n dragContainerPath,\n dragElement,\n dragRect,\n instructions = NO_INSTRUCTIONS,\n path,\n } = dragActionRef.current;\n const { current: rootLayout } = rootLayoutRef;\n const dragPos = { x: evt.clientX, y: evt.clientY };\n const dragPayload = component ?? followPath(rootLayout, path, true);\n const { id: dragPayloadId } = dragPayload.props;\n const intrinsicSize = getIntrinsicSize(dragPayload);\n let originalCSS = \"\",\n dragCSS = \"\",\n dragTransform = \"\";\n\n let dragStartLeft = -1;\n let dragStartTop = -1;\n let dragOffsets: [number, number] = NO_OFFSETS;\n\n let element = document.getElementById(dragPayloadId);\n\n if (element === null) {\n [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(\n dragRect,\n dragPayloadId,\n dragElement\n );\n } else {\n dragOffsets = determineDragOffsets(element);\n const [offsetLeft, offsetTop] = dragOffsets;\n const { width, height, left, top } = element.getBoundingClientRect();\n dragStartLeft = left - offsetLeft;\n dragStartTop = top - offsetTop;\n dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;\n element.dataset.dragging = \"true\";\n originalCSS = element.style.cssText;\n }\n\n dragTransform = Draggable.initDrag(\n rootLayoutRef.current,\n dragContainerPath,\n dragRect,\n dragPos,\n {\n drag: handleDrag,\n drop: handleDrop,\n },\n intrinsicSize\n // dropTargets\n );\n\n element.style.cssText = dragCSS + dragTransform;\n draggableHTMLElementRef.current = element;\n\n dragOperationRef.current = {\n payload: dragPayload,\n originalCSS,\n dragRect,\n dragOffsets,\n dragInstructions: instructions,\n targetPosition: { left: dragStartLeft, top: dragStartTop },\n };\n }\n },\n [handleDrag, handleDrop, rootLayoutRef]\n );\n\n const prepareToDrag = useCallback(\n (action: DragStartAction) => {\n const { evt, ...options } = action;\n dragActionRef.current = {\n ...options,\n dragContainerPath: resolvePath(rootLayoutRef.current, pathToDropTarget),\n };\n Draggable.handleMousedown(evt, handleDragStart, options.instructions);\n },\n [handleDragStart, pathToDropTarget, rootLayoutRef]\n );\n\n return prepareToDrag;\n};\n"],"names":["useRef","useCallback","followPath","getIntrinsicSize","Draggable","resolvePath"],"mappings":"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"}
@@ -1,219 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuUtils = require('@vuu-ui/vuu-utils');
4
- var React = require('react');
5
- var ComponentRegistry = require('../registry/ComponentRegistry.js');
6
- var pathUtils = require('../utils/pathUtils.js');
7
- var propUtils = require('../utils/propUtils.js');
8
-
9
- const placeHolderProps = { "data-placeholder": true, "data-resizeable": true };
10
- const NO_STYLE = {};
11
- const auto = "auto";
12
- const defaultFlexStyle = {
13
- flexBasis: 0,
14
- flexGrow: 1,
15
- flexShrink: 1,
16
- height: auto,
17
- width: auto
18
- };
19
- const CROSS_DIMENSION = {
20
- height: "width",
21
- width: "height"
22
- };
23
- const getFlexDimensions = (flexDirection = "row") => {
24
- if (flexDirection === "row") {
25
- return ["width", "height", "column"];
26
- } else {
27
- return ["height", "width", "row"];
28
- }
29
- };
30
- const isPercentageSize = (value) => typeof value === "string" && value.endsWith("%");
31
- const getIntrinsicSize = (component) => {
32
- const { style: { width = auto, height = auto } = NO_STYLE } = component.props;
33
- const numHeight = typeof height === "number";
34
- const numWidth = typeof width === "number";
35
- if (numHeight && numWidth) {
36
- return { height, width };
37
- } else if (numHeight) {
38
- return { height };
39
- } else if (numWidth) {
40
- return { width };
41
- } else {
42
- return void 0;
43
- }
44
- };
45
- function getFlexStyle(component, dimension2, pos) {
46
- const crossDimension = CROSS_DIMENSION[dimension2];
47
- const {
48
- style: {
49
- [crossDimension]: intrinsicCrossSize = auto,
50
- ...intrinsicStyles
51
- } = NO_STYLE
52
- } = component.props;
53
- if (pos && pos[dimension2]) {
54
- return {
55
- ...intrinsicStyles,
56
- ...defaultFlexStyle,
57
- flexBasis: pos[dimension2],
58
- flexGrow: 0,
59
- flexShrink: 0
60
- };
61
- } else {
62
- return {
63
- ...intrinsicStyles,
64
- ...defaultFlexStyle,
65
- [crossDimension]: intrinsicCrossSize
66
- };
67
- }
68
- }
69
- function hasUnboundedFlexStyle(component) {
70
- const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } = component.props;
71
- if (typeof flex === "number") {
72
- return true;
73
- }
74
- if (flexBasis === 0 && flexGrow === 1 && flexShrink === 1) {
75
- return true;
76
- }
77
- if (typeof flexBasis === "number") {
78
- return false;
79
- }
80
- return true;
81
- }
82
- function getFlexOrIntrinsicStyle(component, dimension2, pos) {
83
- const crossDimension = CROSS_DIMENSION[dimension2];
84
- const {
85
- style: {
86
- [dimension2]: intrinsicSize = auto,
87
- [crossDimension]: intrinsicCrossSize = auto,
88
- ...intrinsicStyles
89
- } = NO_STYLE
90
- } = component.props;
91
- if (intrinsicSize !== auto) {
92
- if (isPercentageSize(intrinsicSize)) {
93
- return {
94
- flexBasis: 0,
95
- flexGrow: 1,
96
- flexShrink: 1,
97
- [dimension2]: void 0,
98
- [crossDimension]: intrinsicCrossSize
99
- };
100
- }
101
- return {
102
- flexBasis: intrinsicSize,
103
- flexGrow: 0,
104
- flexShrink: 0,
105
- [dimension2]: intrinsicSize,
106
- [crossDimension]: intrinsicCrossSize
107
- };
108
- }
109
- if (pos && pos[dimension2]) {
110
- return {
111
- ...intrinsicStyles,
112
- ...defaultFlexStyle,
113
- flexBasis: pos[dimension2],
114
- flexGrow: 0,
115
- flexShrink: 0
116
- };
117
- }
118
- return {
119
- ...intrinsicStyles,
120
- [crossDimension]: intrinsicCrossSize
121
- };
122
- }
123
- function wrapIntrinsicSizeComponentWithFlexbox(component, flexDirection, path, clientRect, dropRect) {
124
- const wrappedChildren = [];
125
- let pathIndex = 0;
126
- let endPlaceholder;
127
- if (clientRect && dropRect) {
128
- let startPlaceholder;
129
- const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;
130
- [startPlaceholder, endPlaceholder] = flexDirection === "column" ? [dropTop - clientRect.top, clientRect.bottom - dropBottom] : [dropLeft - clientRect.left, clientRect.right - dropRight];
131
- if (startPlaceholder) {
132
- wrappedChildren.push(
133
- createPlaceHolder(`${path}.${pathIndex++}`, startPlaceholder, {
134
- flexGrow: 0,
135
- flexShrink: 0
136
- })
137
- );
138
- }
139
- } else {
140
- endPlaceholder = true;
141
- }
142
- const { version = 0, style } = propUtils.getProps(component);
143
- wrappedChildren.push(
144
- pathUtils.resetPath(component, `${path}.${pathIndex++}`, {
145
- version: version + 1,
146
- style: {
147
- ...style,
148
- flexBasis: "auto",
149
- flexGrow: 0,
150
- flexShrink: 0
151
- }
152
- })
153
- );
154
- if (endPlaceholder) {
155
- wrappedChildren.push(
156
- createPlaceHolder(`${path}.${pathIndex++}`, 0, void 0, {
157
- [`data-${flexDirection}-placeholder`]: true
158
- })
159
- );
160
- }
161
- return createFlexbox(
162
- flexDirection,
163
- { resizeable: false, style: { flexBasis: "auto" } },
164
- wrappedChildren,
165
- path
166
- );
167
- }
168
- const getFlexValue = (flexBasis, flexFill) => {
169
- if (flexFill) {
170
- return void 0;
171
- }
172
- return flexBasis === 0 ? 1 : 0;
173
- };
174
- function createFlexbox(flexDirection, props, children, path) {
175
- const id = vuuUtils.uuid();
176
- const { flexFill, style, resizeable = true } = props;
177
- const { flexBasis = flexFill ? void 0 : "auto" } = style;
178
- const flex = getFlexValue(flexBasis, flexFill);
179
- return React.createElement(
180
- ComponentRegistry.ComponentRegistry.Flexbox,
181
- {
182
- id,
183
- key: id,
184
- path,
185
- flexFill,
186
- style: {
187
- ...style,
188
- flexDirection,
189
- flexBasis,
190
- flexGrow: flex,
191
- flexShrink: flex
192
- },
193
- resizeable
194
- },
195
- children
196
- );
197
- }
198
- const baseStyle = { flexGrow: 1, flexShrink: 1 };
199
- function createPlaceHolder(path, size, style, props) {
200
- const id = vuuUtils.uuid();
201
- return React.createElement("div", {
202
- ...placeHolderProps,
203
- ...props,
204
- "data-path": path,
205
- id,
206
- key: id,
207
- style: { ...baseStyle, ...style, flexBasis: size }
208
- });
209
- }
210
-
211
- exports.createFlexbox = createFlexbox;
212
- exports.createPlaceHolder = createPlaceHolder;
213
- exports.getFlexDimensions = getFlexDimensions;
214
- exports.getFlexOrIntrinsicStyle = getFlexOrIntrinsicStyle;
215
- exports.getFlexStyle = getFlexStyle;
216
- exports.getIntrinsicSize = getIntrinsicSize;
217
- exports.hasUnboundedFlexStyle = hasUnboundedFlexStyle;
218
- exports.wrapIntrinsicSizeComponentWithFlexbox = wrapIntrinsicSizeComponentWithFlexbox;
219
- //# sourceMappingURL=flexUtils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"flexUtils.js","sources":["../../src/layout-reducer/flexUtils.ts"],"sourcesContent":["import { dimension, rect, rectTuple, uuid } from \"@vuu-ui/vuu-utils\";\nimport React, { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { DropPos } from \"../drag-drop/dragDropTypes\";\nimport { ComponentRegistry } from \"../registry/ComponentRegistry\";\nimport { getProps, resetPath } from \"../utils\";\nconst placeHolderProps = { \"data-placeholder\": true, \"data-resizeable\": true };\n\nconst NO_STYLE = {};\nconst auto = \"auto\";\nconst defaultFlexStyle = {\n flexBasis: 0,\n flexGrow: 1,\n flexShrink: 1,\n height: auto,\n width: auto,\n};\n\nconst CROSS_DIMENSION = {\n height: \"width\",\n width: \"height\",\n};\n\nexport type flexDirection = \"row\" | \"column\";\n\ntype contraDimension = dimension;\ntype flexDimensionTuple = [dimension, contraDimension, flexDirection];\nexport type position = {\n height?: number;\n width?: number;\n};\n\nexport const getFlexDimensions = (flexDirection: flexDirection = \"row\") => {\n if (flexDirection === \"row\") {\n return [\"width\", \"height\", \"column\"] as flexDimensionTuple;\n } else {\n return [\"height\", \"width\", \"row\"] as flexDimensionTuple;\n }\n};\n\nconst isPercentageSize = (value: string | number) =>\n typeof value === \"string\" && value.endsWith(\"%\");\n\nexport const getIntrinsicSize = (\n component: ReactElement\n): { height?: number; width?: number } | undefined => {\n const { style: { width = auto, height = auto } = NO_STYLE } = component.props;\n\n const numHeight = typeof height === \"number\";\n const numWidth = typeof width === \"number\";\n\n if (numHeight && numWidth) {\n return { height, width };\n } else if (numHeight) {\n return { height };\n } else if (numWidth) {\n return { width };\n } else {\n return undefined;\n }\n};\n\nexport function getFlexStyle(\n component: ReactElement,\n dimension: dimension,\n pos?: DropPos\n) {\n const crossDimension = CROSS_DIMENSION[dimension];\n const {\n style: {\n [crossDimension]: intrinsicCrossSize = auto,\n ...intrinsicStyles\n } = NO_STYLE,\n } = component.props;\n\n if (pos && pos[dimension]) {\n return {\n ...intrinsicStyles,\n ...defaultFlexStyle,\n flexBasis: pos[dimension],\n flexGrow: 0,\n flexShrink: 0,\n };\n } else {\n return {\n ...intrinsicStyles,\n ...defaultFlexStyle,\n [crossDimension]: intrinsicCrossSize,\n };\n }\n}\n\nexport function hasUnboundedFlexStyle(component: ReactElement) {\n const { style: { flex, flexGrow, flexShrink, flexBasis } = NO_STYLE } =\n component.props;\n if (typeof flex === \"number\") {\n return true;\n }\n if (flexBasis === 0 && flexGrow === 1 && flexShrink === 1) {\n return true;\n }\n if (typeof flexBasis === \"number\") {\n return false;\n }\n return true;\n}\n\nexport function getFlexOrIntrinsicStyle(\n component: ReactElement,\n dimension: dimension,\n pos: position\n) {\n const crossDimension = CROSS_DIMENSION[dimension];\n const {\n style: {\n [dimension]: intrinsicSize = auto,\n [crossDimension]: intrinsicCrossSize = auto,\n ...intrinsicStyles\n } = NO_STYLE,\n } = component.props;\n\n if (intrinsicSize !== auto) {\n if (isPercentageSize(intrinsicSize)) {\n return {\n flexBasis: 0,\n flexGrow: 1,\n flexShrink: 1,\n [dimension]: undefined,\n [crossDimension]: intrinsicCrossSize,\n };\n }\n return {\n flexBasis: intrinsicSize,\n flexGrow: 0,\n flexShrink: 0,\n [dimension]: intrinsicSize,\n [crossDimension]: intrinsicCrossSize,\n };\n }\n if (pos && pos[dimension]) {\n return {\n ...intrinsicStyles,\n ...defaultFlexStyle,\n flexBasis: pos[dimension],\n flexGrow: 0,\n flexShrink: 0,\n };\n }\n return {\n ...intrinsicStyles,\n [crossDimension]: intrinsicCrossSize,\n };\n}\n\nexport function wrapIntrinsicSizeComponentWithFlexbox(\n component: ReactElement,\n flexDirection: flexDirection,\n path: string,\n clientRect?: rect,\n dropRect?: rectTuple\n) {\n const wrappedChildren = [];\n let pathIndex = 0;\n let endPlaceholder;\n\n if (clientRect && dropRect) {\n let startPlaceholder;\n const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;\n [startPlaceholder, endPlaceholder] =\n flexDirection === \"column\"\n ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]\n : [dropLeft - clientRect.left, clientRect.right - dropRight];\n\n if (startPlaceholder) {\n wrappedChildren.push(\n createPlaceHolder(`${path}.${pathIndex++}`, startPlaceholder, {\n flexGrow: 0,\n flexShrink: 0,\n })\n );\n }\n } else {\n endPlaceholder = true;\n }\n\n const { version = 0, style } = getProps(component);\n\n wrappedChildren.push(\n resetPath(component, `${path}.${pathIndex++}`, {\n version: version + 1,\n style: {\n ...style,\n flexBasis: \"auto\",\n flexGrow: 0,\n flexShrink: 0,\n },\n })\n );\n\n if (endPlaceholder) {\n wrappedChildren.push(\n createPlaceHolder(`${path}.${pathIndex++}`, 0, undefined, {\n [`data-${flexDirection}-placeholder`]: true,\n })\n );\n }\n\n return createFlexbox(\n flexDirection,\n { resizeable: false, style: { flexBasis: \"auto\" } },\n wrappedChildren,\n path\n );\n}\n\nconst getFlexValue = (\n flexBasis: number,\n flexFill: boolean\n): number | undefined => {\n if (flexFill) {\n return undefined;\n }\n return flexBasis === 0 ? 1 : 0;\n};\n\nexport function createFlexbox(\n flexDirection: flexDirection,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n props: any,\n children: ReactNode,\n path: string\n) {\n const id = uuid();\n const { flexFill, style, resizeable = true } = props;\n const { flexBasis = flexFill ? undefined : \"auto\" } = style;\n const flex = getFlexValue(flexBasis, flexFill);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return React.createElement<any>(\n ComponentRegistry.Flexbox,\n {\n id,\n key: id,\n path,\n flexFill,\n style: {\n ...style,\n flexDirection,\n flexBasis,\n flexGrow: flex,\n flexShrink: flex,\n },\n resizeable,\n },\n children\n );\n}\n\nconst baseStyle = { flexGrow: 1, flexShrink: 1 };\n\nexport function createPlaceHolder(\n path: string,\n size: number,\n style?: CSSProperties,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n props?: any\n) {\n const id = uuid();\n return React.createElement(\"div\", {\n ...placeHolderProps,\n ...props,\n \"data-path\": path,\n id,\n key: id,\n style: { ...baseStyle, ...style, flexBasis: size },\n });\n}\n"],"names":["dimension","getProps","resetPath","uuid","ComponentRegistry"],"mappings":"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"}