@vuu-ui/vuu-layout 2.1.17 → 2.1.19-beta.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 (265) hide show
  1. package/package.json +14 -16
  2. package/types/dock-layout/DockLayout.d.ts +4 -4
  3. package/types/dock-layout/Drawer.d.ts +4 -4
  4. package/types/drag-drop/BoxModel.d.ts +7 -7
  5. package/types/flexbox/FlexboxLayout.d.ts +4 -4
  6. package/types/flexbox/Splitter.d.ts +1 -1
  7. package/types/layout-reducer/layoutUtils.d.ts +1 -1
  8. package/types/layout-reducer/remove-layout-element.d.ts +1 -1
  9. package/types/layout-reducer/replace-layout-element.d.ts +2 -2
  10. package/types/layout-reducer/resize-flex-children.d.ts +2 -2
  11. package/types/layout-view/useView.d.ts +1 -1
  12. package/types/placeholder/Placeholder.d.ts +4 -4
  13. package/types/responsive/overflowUtils.d.ts +2 -2
  14. package/types/stack/StackLayout.d.ts +4 -4
  15. package/types/tools/devtools-box/layout-configurator.d.ts +26 -26
  16. package/types/tools/devtools-tree/layout-tree-viewer.d.ts +2 -2
  17. package/types/utils/pathUtils.d.ts +1 -1
  18. package/cjs/Component.js +0 -14
  19. package/cjs/Component.js.map +0 -1
  20. package/cjs/LayoutContainer.css.js +0 -6
  21. package/cjs/LayoutContainer.css.js.map +0 -1
  22. package/cjs/LayoutContainer.js +0 -33
  23. package/cjs/LayoutContainer.js.map +0 -1
  24. package/cjs/dock-layout/DockLayout.css.js +0 -6
  25. package/cjs/dock-layout/DockLayout.css.js.map +0 -1
  26. package/cjs/dock-layout/DockLayout.js +0 -41
  27. package/cjs/dock-layout/DockLayout.js.map +0 -1
  28. package/cjs/dock-layout/Drawer.css.js +0 -6
  29. package/cjs/dock-layout/Drawer.css.js.map +0 -1
  30. package/cjs/dock-layout/Drawer.js +0 -95
  31. package/cjs/dock-layout/Drawer.js.map +0 -1
  32. package/cjs/drag-drop/BoxModel.js +0 -416
  33. package/cjs/drag-drop/BoxModel.js.map +0 -1
  34. package/cjs/drag-drop/DragState.js +0 -161
  35. package/cjs/drag-drop/DragState.js.map +0 -1
  36. package/cjs/drag-drop/Draggable.js +0 -192
  37. package/cjs/drag-drop/Draggable.js.map +0 -1
  38. package/cjs/drag-drop/DropTarget.js +0 -257
  39. package/cjs/drag-drop/DropTarget.js.map +0 -1
  40. package/cjs/drag-drop/DropTargetRenderer.js +0 -218
  41. package/cjs/drag-drop/DropTargetRenderer.js.map +0 -1
  42. package/cjs/flexbox/Flexbox.css.js +0 -6
  43. package/cjs/flexbox/Flexbox.css.js.map +0 -1
  44. package/cjs/flexbox/Flexbox.js +0 -69
  45. package/cjs/flexbox/Flexbox.js.map +0 -1
  46. package/cjs/flexbox/FlexboxLayout.js +0 -30
  47. package/cjs/flexbox/FlexboxLayout.js.map +0 -1
  48. package/cjs/flexbox/Splitter.css.js +0 -6
  49. package/cjs/flexbox/Splitter.css.js.map +0 -1
  50. package/cjs/flexbox/Splitter.js +0 -122
  51. package/cjs/flexbox/Splitter.js.map +0 -1
  52. package/cjs/flexbox/flexbox-utils.js +0 -95
  53. package/cjs/flexbox/flexbox-utils.js.map +0 -1
  54. package/cjs/flexbox/useSplitterResizing.js +0 -197
  55. package/cjs/flexbox/useSplitterResizing.js.map +0 -1
  56. package/cjs/index.js +0 -122
  57. package/cjs/index.js.map +0 -1
  58. package/cjs/layout-action.js +0 -24
  59. package/cjs/layout-action.js.map +0 -1
  60. package/cjs/layout-header/Header.css.js +0 -6
  61. package/cjs/layout-header/Header.css.js.map +0 -1
  62. package/cjs/layout-header/Header.js +0 -152
  63. package/cjs/layout-header/Header.js.map +0 -1
  64. package/cjs/layout-header/useHeader.js +0 -85
  65. package/cjs/layout-header/useHeader.js.map +0 -1
  66. package/cjs/layout-provider/LayoutProvider.js +0 -304
  67. package/cjs/layout-provider/LayoutProvider.js.map +0 -1
  68. package/cjs/layout-provider/LayoutProviderContext.js +0 -23
  69. package/cjs/layout-provider/LayoutProviderContext.js.map +0 -1
  70. package/cjs/layout-provider/useLayoutDragDrop.js +0 -177
  71. package/cjs/layout-provider/useLayoutDragDrop.js.map +0 -1
  72. package/cjs/layout-reducer/flexUtils.js +0 -227
  73. package/cjs/layout-reducer/flexUtils.js.map +0 -1
  74. package/cjs/layout-reducer/insert-layout-element.js +0 -286
  75. package/cjs/layout-reducer/insert-layout-element.js.map +0 -1
  76. package/cjs/layout-reducer/layout-reducer.js +0 -202
  77. package/cjs/layout-reducer/layout-reducer.js.map +0 -1
  78. package/cjs/layout-reducer/layoutTypes.js +0 -40
  79. package/cjs/layout-reducer/layoutTypes.js.map +0 -1
  80. package/cjs/layout-reducer/layoutUtils.js +0 -237
  81. package/cjs/layout-reducer/layoutUtils.js.map +0 -1
  82. package/cjs/layout-reducer/move-layout-element.js +0 -31
  83. package/cjs/layout-reducer/move-layout-element.js.map +0 -1
  84. package/cjs/layout-reducer/remove-layout-element.js +0 -237
  85. package/cjs/layout-reducer/remove-layout-element.js.map +0 -1
  86. package/cjs/layout-reducer/replace-layout-element.js +0 -96
  87. package/cjs/layout-reducer/replace-layout-element.js.map +0 -1
  88. package/cjs/layout-reducer/resize-flex-children.js +0 -62
  89. package/cjs/layout-reducer/resize-flex-children.js.map +0 -1
  90. package/cjs/layout-reducer/wrap-layout-element.js +0 -211
  91. package/cjs/layout-reducer/wrap-layout-element.js.map +0 -1
  92. package/cjs/layout-view/View.css.js +0 -6
  93. package/cjs/layout-view/View.css.js.map +0 -1
  94. package/cjs/layout-view/View.js +0 -160
  95. package/cjs/layout-view/View.js.map +0 -1
  96. package/cjs/layout-view/useView.js +0 -75
  97. package/cjs/layout-view/useView.js.map +0 -1
  98. package/cjs/layout-view/useViewBroadcastChannel.js +0 -35
  99. package/cjs/layout-view/useViewBroadcastChannel.js.map +0 -1
  100. package/cjs/layout-view/useViewResize.js +0 -42
  101. package/cjs/layout-view/useViewResize.js.map +0 -1
  102. package/cjs/layout-view-actions/ViewContext.js +0 -16
  103. package/cjs/layout-view-actions/ViewContext.js.map +0 -1
  104. package/cjs/layout-view-actions/useViewActionDispatcher.js +0 -112
  105. package/cjs/layout-view-actions/useViewActionDispatcher.js.map +0 -1
  106. package/cjs/layout-view-actions/useViewContributions.js +0 -33
  107. package/cjs/layout-view-actions/useViewContributions.js.map +0 -1
  108. package/cjs/palette/Palette.css.js +0 -6
  109. package/cjs/palette/Palette.css.js.map +0 -1
  110. package/cjs/palette/Palette.js +0 -115
  111. package/cjs/palette/Palette.js.map +0 -1
  112. package/cjs/placeholder/LayoutStartPanel.css.js +0 -6
  113. package/cjs/placeholder/LayoutStartPanel.css.js.map +0 -1
  114. package/cjs/placeholder/LayoutStartPanel.js +0 -56
  115. package/cjs/placeholder/LayoutStartPanel.js.map +0 -1
  116. package/cjs/placeholder/Placeholder.css.js +0 -6
  117. package/cjs/placeholder/Placeholder.css.js.map +0 -1
  118. package/cjs/placeholder/Placeholder.js +0 -34
  119. package/cjs/placeholder/Placeholder.js.map +0 -1
  120. package/cjs/responsive/useResizeObserver.js +0 -118
  121. package/cjs/responsive/useResizeObserver.js.map +0 -1
  122. package/cjs/responsive/utils.js +0 -34
  123. package/cjs/responsive/utils.js.map +0 -1
  124. package/cjs/stack/Stack.css.js +0 -6
  125. package/cjs/stack/Stack.css.js.map +0 -1
  126. package/cjs/stack/Stack.js +0 -150
  127. package/cjs/stack/Stack.js.map +0 -1
  128. package/cjs/stack/StackLayout.js +0 -116
  129. package/cjs/stack/StackLayout.js.map +0 -1
  130. package/cjs/use-persistent-state.js +0 -63
  131. package/cjs/use-persistent-state.js.map +0 -1
  132. package/cjs/utils/pathUtils.js +0 -293
  133. package/cjs/utils/pathUtils.js.map +0 -1
  134. package/cjs/utils/propUtils.js +0 -27
  135. package/cjs/utils/propUtils.js.map +0 -1
  136. package/cjs/utils/refUtils.js +0 -12
  137. package/cjs/utils/refUtils.js.map +0 -1
  138. package/cjs/utils/styleUtils.js +0 -15
  139. package/cjs/utils/styleUtils.js.map +0 -1
  140. package/cjs/utils/typeOf.js +0 -27
  141. package/cjs/utils/typeOf.js.map +0 -1
  142. package/esm/Component.js +0 -12
  143. package/esm/Component.js.map +0 -1
  144. package/esm/LayoutContainer.css.js +0 -4
  145. package/esm/LayoutContainer.css.js.map +0 -1
  146. package/esm/LayoutContainer.js +0 -31
  147. package/esm/LayoutContainer.js.map +0 -1
  148. package/esm/dock-layout/DockLayout.css.js +0 -4
  149. package/esm/dock-layout/DockLayout.css.js.map +0 -1
  150. package/esm/dock-layout/DockLayout.js +0 -39
  151. package/esm/dock-layout/DockLayout.js.map +0 -1
  152. package/esm/dock-layout/Drawer.css.js +0 -4
  153. package/esm/dock-layout/Drawer.css.js.map +0 -1
  154. package/esm/dock-layout/Drawer.js +0 -93
  155. package/esm/dock-layout/Drawer.js.map +0 -1
  156. package/esm/drag-drop/BoxModel.js +0 -409
  157. package/esm/drag-drop/BoxModel.js.map +0 -1
  158. package/esm/drag-drop/DragState.js +0 -159
  159. package/esm/drag-drop/DragState.js.map +0 -1
  160. package/esm/drag-drop/Draggable.js +0 -190
  161. package/esm/drag-drop/Draggable.js.map +0 -1
  162. package/esm/drag-drop/DropTarget.js +0 -253
  163. package/esm/drag-drop/DropTarget.js.map +0 -1
  164. package/esm/drag-drop/DropTargetRenderer.js +0 -216
  165. package/esm/drag-drop/DropTargetRenderer.js.map +0 -1
  166. package/esm/flexbox/Flexbox.css.js +0 -4
  167. package/esm/flexbox/Flexbox.css.js.map +0 -1
  168. package/esm/flexbox/Flexbox.js +0 -67
  169. package/esm/flexbox/Flexbox.js.map +0 -1
  170. package/esm/flexbox/FlexboxLayout.js +0 -28
  171. package/esm/flexbox/FlexboxLayout.js.map +0 -1
  172. package/esm/flexbox/Splitter.css.js +0 -4
  173. package/esm/flexbox/Splitter.css.js.map +0 -1
  174. package/esm/flexbox/Splitter.js +0 -120
  175. package/esm/flexbox/Splitter.js.map +0 -1
  176. package/esm/flexbox/flexbox-utils.js +0 -89
  177. package/esm/flexbox/flexbox-utils.js.map +0 -1
  178. package/esm/flexbox/useSplitterResizing.js +0 -195
  179. package/esm/flexbox/useSplitterResizing.js.map +0 -1
  180. package/esm/index.js +0 -33
  181. package/esm/index.js.map +0 -1
  182. package/esm/layout-action.js +0 -22
  183. package/esm/layout-action.js.map +0 -1
  184. package/esm/layout-header/Header.css.js +0 -4
  185. package/esm/layout-header/Header.css.js.map +0 -1
  186. package/esm/layout-header/Header.js +0 -150
  187. package/esm/layout-header/Header.js.map +0 -1
  188. package/esm/layout-header/useHeader.js +0 -83
  189. package/esm/layout-header/useHeader.js.map +0 -1
  190. package/esm/layout-provider/LayoutProvider.js +0 -297
  191. package/esm/layout-provider/LayoutProvider.js.map +0 -1
  192. package/esm/layout-provider/LayoutProviderContext.js +0 -20
  193. package/esm/layout-provider/LayoutProviderContext.js.map +0 -1
  194. package/esm/layout-provider/useLayoutDragDrop.js +0 -175
  195. package/esm/layout-provider/useLayoutDragDrop.js.map +0 -1
  196. package/esm/layout-reducer/flexUtils.js +0 -218
  197. package/esm/layout-reducer/flexUtils.js.map +0 -1
  198. package/esm/layout-reducer/insert-layout-element.js +0 -282
  199. package/esm/layout-reducer/insert-layout-element.js.map +0 -1
  200. package/esm/layout-reducer/layout-reducer.js +0 -200
  201. package/esm/layout-reducer/layout-reducer.js.map +0 -1
  202. package/esm/layout-reducer/layoutTypes.js +0 -36
  203. package/esm/layout-reducer/layoutTypes.js.map +0 -1
  204. package/esm/layout-reducer/layoutUtils.js +0 -226
  205. package/esm/layout-reducer/layoutUtils.js.map +0 -1
  206. package/esm/layout-reducer/move-layout-element.js +0 -29
  207. package/esm/layout-reducer/move-layout-element.js.map +0 -1
  208. package/esm/layout-reducer/remove-layout-element.js +0 -235
  209. package/esm/layout-reducer/remove-layout-element.js.map +0 -1
  210. package/esm/layout-reducer/replace-layout-element.js +0 -92
  211. package/esm/layout-reducer/replace-layout-element.js.map +0 -1
  212. package/esm/layout-reducer/resize-flex-children.js +0 -59
  213. package/esm/layout-reducer/resize-flex-children.js.map +0 -1
  214. package/esm/layout-reducer/wrap-layout-element.js +0 -209
  215. package/esm/layout-reducer/wrap-layout-element.js.map +0 -1
  216. package/esm/layout-view/View.css.js +0 -4
  217. package/esm/layout-view/View.css.js.map +0 -1
  218. package/esm/layout-view/View.js +0 -158
  219. package/esm/layout-view/View.js.map +0 -1
  220. package/esm/layout-view/useView.js +0 -73
  221. package/esm/layout-view/useView.js.map +0 -1
  222. package/esm/layout-view/useViewBroadcastChannel.js +0 -33
  223. package/esm/layout-view/useViewBroadcastChannel.js.map +0 -1
  224. package/esm/layout-view/useViewResize.js +0 -40
  225. package/esm/layout-view/useViewResize.js.map +0 -1
  226. package/esm/layout-view-actions/ViewContext.js +0 -12
  227. package/esm/layout-view-actions/ViewContext.js.map +0 -1
  228. package/esm/layout-view-actions/useViewActionDispatcher.js +0 -110
  229. package/esm/layout-view-actions/useViewActionDispatcher.js.map +0 -1
  230. package/esm/layout-view-actions/useViewContributions.js +0 -31
  231. package/esm/layout-view-actions/useViewContributions.js.map +0 -1
  232. package/esm/palette/Palette.css.js +0 -4
  233. package/esm/palette/Palette.css.js.map +0 -1
  234. package/esm/palette/Palette.js +0 -112
  235. package/esm/palette/Palette.js.map +0 -1
  236. package/esm/placeholder/LayoutStartPanel.css.js +0 -4
  237. package/esm/placeholder/LayoutStartPanel.css.js.map +0 -1
  238. package/esm/placeholder/LayoutStartPanel.js +0 -54
  239. package/esm/placeholder/LayoutStartPanel.js.map +0 -1
  240. package/esm/placeholder/Placeholder.css.js +0 -4
  241. package/esm/placeholder/Placeholder.css.js.map +0 -1
  242. package/esm/placeholder/Placeholder.js +0 -32
  243. package/esm/placeholder/Placeholder.js.map +0 -1
  244. package/esm/responsive/useResizeObserver.js +0 -112
  245. package/esm/responsive/useResizeObserver.js.map +0 -1
  246. package/esm/responsive/utils.js +0 -31
  247. package/esm/responsive/utils.js.map +0 -1
  248. package/esm/stack/Stack.css.js +0 -4
  249. package/esm/stack/Stack.css.js.map +0 -1
  250. package/esm/stack/Stack.js +0 -148
  251. package/esm/stack/Stack.js.map +0 -1
  252. package/esm/stack/StackLayout.js +0 -114
  253. package/esm/stack/StackLayout.js.map +0 -1
  254. package/esm/use-persistent-state.js +0 -58
  255. package/esm/use-persistent-state.js.map +0 -1
  256. package/esm/utils/pathUtils.js +0 -280
  257. package/esm/utils/pathUtils.js.map +0 -1
  258. package/esm/utils/propUtils.js +0 -23
  259. package/esm/utils/propUtils.js.map +0 -1
  260. package/esm/utils/refUtils.js +0 -10
  261. package/esm/utils/refUtils.js.map +0 -1
  262. package/esm/utils/styleUtils.js +0 -13
  263. package/esm/utils/styleUtils.js.map +0 -1
  264. package/esm/utils/typeOf.js +0 -23
  265. package/esm/utils/typeOf.js.map +0 -1
@@ -1,253 +0,0 @@
1
- import '@vuu-ui/vuu-utils';
2
- import 'react';
3
- import { getProps } from '../utils/propUtils.js';
4
- import { typeOf } from '../utils/typeOf.js';
5
- import { RelativeDropPosition, Position, BoxModel, getPosition, positionValues } from './BoxModel.js';
6
-
7
- var __defProp = Object.defineProperty;
8
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
10
- const isTabstrip = (dropTarget) => dropTarget.pos.tab && typeOf(dropTarget.component) === "Stack" && dropTarget.pos.position.Header;
11
- const { north, south, east, west } = positionValues;
12
- const eastwest = east + west;
13
- const northsouth = north + south;
14
- class DropTarget {
15
- constructor({
16
- component,
17
- pos,
18
- clientRect,
19
- nextDropTarget
20
- }) {
21
- __publicField(this, "active");
22
- __publicField(this, "box");
23
- __publicField(this, "clientRect");
24
- __publicField(this, "component");
25
- __publicField(this, "dropRect");
26
- __publicField(this, "nextDropTarget");
27
- __publicField(this, "pos");
28
- this.component = component;
29
- this.pos = pos;
30
- this.clientRect = clientRect;
31
- this.nextDropTarget = nextDropTarget;
32
- this.active = false;
33
- this.dropRect = void 0;
34
- }
35
- targetTabPos(tab) {
36
- const { left: tabLeft, width: tabWidth, positionRelativeToTab } = tab;
37
- return positionRelativeToTab === RelativeDropPosition.BEFORE ? tabLeft : tabLeft + tabWidth;
38
- }
39
- /**
40
- * Determine what will be rendered by the dropTargetRenderer
41
- *
42
- * @param {*} lineWidth
43
- * @param {*} dragState
44
- * @returns {l, t, r, b, tabLeft, tabWidth, tabHeight}
45
- */
46
- getTargetDropOutline(lineWidth, dragState) {
47
- if (this.pos.tab) {
48
- return this.getDropTabOutline(lineWidth, this.pos.tab);
49
- } else if (dragState && dragState.hasIntrinsicSize()) {
50
- return this.getIntrinsicDropRect(dragState);
51
- } else {
52
- const [l, t, r, b] = this.getDropRectOutline(
53
- lineWidth,
54
- dragState
55
- );
56
- return { l, t, r, b };
57
- }
58
- }
59
- getDropTabOutline(lineWidth, tab) {
60
- const {
61
- clientRect: { top, left, right, bottom, header }
62
- } = this;
63
- const inset = 0;
64
- const gap = Math.round(lineWidth / 2) + inset;
65
- const t = Math.round(top);
66
- const l = Math.round(left + gap);
67
- const r = Math.round(right - gap);
68
- const b = Math.round(bottom - gap);
69
- const tabLeft = this.targetTabPos(tab);
70
- const tabWidth = 60;
71
- const tabHeight = (header?.bottom ?? 0) - (header?.top ?? 0);
72
- return { l, t, r, b, tabLeft, tabWidth, tabHeight };
73
- }
74
- getIntrinsicDropRect(dragState) {
75
- const { pos, clientRect: rect2 } = this;
76
- const { x, y } = dragState;
77
- let height = dragState.intrinsicSize?.height ?? 0;
78
- let width = dragState.intrinsicSize?.height ?? 0;
79
- if (height && height > rect2.height) {
80
- console.log(`DropTarget: we're going to blow the gaff`);
81
- height = rect2.height;
82
- } else if (width && width > rect2.width) {
83
- console.log(`DropTarget: we're going to blow the gaff`);
84
- width = rect2.width;
85
- }
86
- const left = Math.min(
87
- rect2.right - width,
88
- Math.max(rect2.left, Math.round(pos.x - x.mousePct * width))
89
- );
90
- const top = Math.min(
91
- rect2.bottom - height,
92
- Math.max(rect2.top, Math.round(pos.y - y.mousePct * height))
93
- );
94
- const [l, t, r, b] = this.dropRect = [
95
- left,
96
- top,
97
- left + width,
98
- top + height
99
- ];
100
- const guideLines = pos.position.EastOrWest ? [l, rect2.top, l, rect2.bottom, r, rect2.top, r, rect2.bottom] : [rect2.left, t, rect2.right, t, rect2.left, b, rect2.right, b];
101
- return { l, r, t, b, guideLines };
102
- }
103
- /**
104
- * @returns [left, top, right, bottom]
105
- */
106
- getDropRectOutline(lineWidth, dragState) {
107
- const { pos, clientRect: rect2 } = this;
108
- const { width: suggestedWidth, height: suggestedHeight, position } = pos;
109
- const { width: intrinsicWidth, height: intrinsicHeight } = dragState?.intrinsicSize ?? {};
110
- const sizeHeight = intrinsicHeight ?? suggestedHeight ?? 0;
111
- const sizeWidth = intrinsicWidth ?? suggestedWidth ?? 0;
112
- this.dropRect = void 0;
113
- const { top: t, left: l, right: r, bottom: b } = rect2;
114
- const inset = 0;
115
- const gap = Math.round(lineWidth / 2) + inset;
116
- switch (position) {
117
- case Position.North:
118
- case Position.Header: {
119
- const halfHeight = Math.round((b - t) / 2);
120
- const height = sizeHeight ? Math.min(halfHeight, Math.round(sizeHeight)) : halfHeight;
121
- return sizeWidth && l + sizeWidth < r ? [l + gap, t + gap, l + sizeWidth - gap, t + gap + height] : [l + gap, t + gap, r - gap, t + gap + height];
122
- }
123
- case Position.West: {
124
- const halfWidth = Math.round((r - l) / 2);
125
- const width = sizeWidth ? Math.min(halfWidth, Math.round(sizeWidth)) : halfWidth;
126
- return sizeHeight && t + sizeHeight < b ? [l + gap, t + gap, l - gap + width, t + sizeHeight + gap] : [l + gap, t + gap, l - gap + width, b - gap];
127
- }
128
- case Position.East: {
129
- const halfWidth = Math.round((r - l) / 2);
130
- const width = sizeWidth ? Math.min(halfWidth, Math.round(sizeWidth)) : halfWidth;
131
- return sizeHeight && t + sizeHeight < b ? [r - gap - width, t + gap, r - gap, t + sizeHeight + gap] : [r - gap - width, t + gap, r - gap, b - gap];
132
- }
133
- case Position.South: {
134
- const halfHeight = Math.round((b - t) / 2);
135
- const height = sizeHeight ? Math.min(halfHeight, Math.round(sizeHeight)) : halfHeight;
136
- return sizeWidth && l + sizeWidth < r ? [l + gap, b - gap - height, l + sizeWidth - gap, b - gap] : [l + gap, b - gap - height, r - gap, b - gap];
137
- }
138
- case Position.Centre: {
139
- return [l + gap, t + gap, r - gap, b - gap];
140
- }
141
- default:
142
- console.warn(`DropTarget does not recognize position ${position}`);
143
- return null;
144
- }
145
- }
146
- activate() {
147
- this.active = true;
148
- return this;
149
- }
150
- toArray() {
151
- let dropTarget = this;
152
- const dropTargets = [dropTarget];
153
- while (dropTarget = dropTarget.nextDropTarget) {
154
- dropTargets.push(dropTarget);
155
- }
156
- return dropTargets;
157
- }
158
- static getActiveDropTarget(dropTarget) {
159
- return dropTarget === null ? null : dropTarget?.active ? dropTarget : DropTarget.getActiveDropTarget(dropTarget.nextDropTarget);
160
- }
161
- }
162
- function identifyDropTarget(x, y, rootLayout, measurements, intrinsicSize, validDropTargets) {
163
- let dropTarget = null;
164
- const allBoxesContainingPoint = BoxModel.allBoxesContainingPoint(
165
- rootLayout,
166
- measurements,
167
- x,
168
- y,
169
- validDropTargets
170
- );
171
- if (allBoxesContainingPoint.length) {
172
- const [component, ...containers] = allBoxesContainingPoint;
173
- const {
174
- "data-path": dataPath,
175
- path = dataPath,
176
- "data-row-placeholder": isRowPlaceholder
177
- } = getProps(component);
178
- const clientRect = measurements[path];
179
- const placeholderOrientation = intrinsicSize && isRowPlaceholder ? "row" : void 0;
180
- const pos = getPosition(x, y, clientRect, placeholderOrientation);
181
- const box = measurements[path];
182
- const nextDropTarget = ([nextTarget, ...targets]) => {
183
- if (pos.position?.Header || pos.closeToTheEdge) {
184
- const targetPosition = getTargetPosition(
185
- nextTarget,
186
- pos,
187
- box,
188
- measurements,
189
- x,
190
- y
191
- );
192
- if (targetPosition) {
193
- const [containerPos, clientRect2] = targetPosition;
194
- return new DropTarget({
195
- component: nextTarget,
196
- pos: containerPos,
197
- clientRect: clientRect2,
198
- nextDropTarget: nextDropTarget(targets) ?? null
199
- });
200
- } else if (targets.length) {
201
- return nextDropTarget(targets);
202
- }
203
- }
204
- };
205
- dropTarget = new DropTarget({
206
- component,
207
- pos,
208
- clientRect,
209
- nextDropTarget: nextDropTarget(containers) ?? null
210
- }).activate();
211
- }
212
- return dropTarget;
213
- }
214
- function getTargetPosition(container, { closeToTheEdge, position }, box, measurements, x, y) {
215
- if (!container || container.type === "LayoutContainer") {
216
- return;
217
- }
218
- const containingBox = measurements[container.props.path];
219
- const closeToTop = closeToTheEdge & positionValues.north;
220
- const closeToRight = closeToTheEdge & positionValues.east;
221
- const closeToBottom = closeToTheEdge & positionValues.south;
222
- const closeToLeft = closeToTheEdge & positionValues.west;
223
- const atTop = (closeToTop || position.Header) && Math.round(box.top) === Math.round(containingBox.top);
224
- const atRight = closeToRight && Math.round(box.right) === Math.round(containingBox.right);
225
- const atBottom = closeToBottom && Math.round(box.bottom) === Math.round(containingBox.bottom);
226
- const atLeft = closeToLeft && Math.round(box.left) === Math.round(containingBox.left);
227
- if (atTop || atRight || atBottom || atLeft) {
228
- const { "data-path": dataPath, path = dataPath } = container.props;
229
- const clientRect = measurements[path];
230
- const containerPos = getPosition(x, y, clientRect);
231
- if ((isVBox(container) || isTabbedContainer(container)) && closeToTheEdge & eastwest) {
232
- containerPos.width = 120;
233
- return [containerPos, clientRect];
234
- } else if ((isHBox(container) || isTabbedContainer(container)) && (position.Header || closeToTheEdge & northsouth)) {
235
- containerPos.height = 120;
236
- return [containerPos, clientRect];
237
- }
238
- }
239
- }
240
- function isTabbedContainer(component) {
241
- return typeOf(component) === "Stack";
242
- }
243
- function isVBox(component) {
244
- return typeOf(component) === "Flexbox" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
245
- component.props.style.flexDirection === "column";
246
- }
247
- function isHBox(component) {
248
- return typeOf(component) === "Flexbox" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
249
- component.props.style.flexDirection === "row";
250
- }
251
-
252
- export { DropTarget, identifyDropTarget, isTabstrip };
253
- //# sourceMappingURL=DropTarget.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DropTarget.js","sources":["../../../../packages/vuu-layout/src/drag-drop/DropTarget.ts"],"sourcesContent":["import { LayoutModel, rect, rectTuple } from \"@vuu-ui/vuu-utils\";\nimport { getProps, typeOf } from \"../utils\";\nimport {\n BoxModel,\n getPosition,\n Measurements,\n Position,\n positionValues,\n RelativeDropPosition,\n} from \"./BoxModel\";\nimport { DragDropRect, DropPos, DropPosTab } from \"./dragDropTypes\";\nimport { DragState } from \"./DragState\";\n\nexport const isTabstrip = (dropTarget: DropTarget) =>\n dropTarget.pos.tab &&\n typeOf(dropTarget.component) === \"Stack\" &&\n dropTarget.pos.position.Header;\n\nconst { north, south, east, west } = positionValues;\nconst eastwest = east + west;\nconst northsouth = north + south;\n\nexport interface DropTargetProps {\n component: LayoutModel;\n pos: DropPos;\n clientRect: DragDropRect;\n nextDropTarget: DropTarget | null;\n}\n\nexport type GuideLine = [\n number,\n number,\n number,\n number,\n number,\n number,\n number,\n number,\n];\nexport interface TargetDropOutline {\n l: number;\n r: number;\n t: number;\n b: number;\n tabLeft?: number;\n tabWidth?: number;\n tabHeight?: number;\n guideLines?: GuideLine;\n}\n\nexport class DropTarget {\n private active: boolean;\n\n public box: unknown;\n public clientRect: DragDropRect;\n public component: LayoutModel;\n public dropRect: rectTuple | undefined;\n public nextDropTarget: DropTarget | null;\n public pos: DropPos;\n\n constructor({\n component,\n pos,\n clientRect /*, closeToTheEdge*/,\n nextDropTarget,\n }: DropTargetProps) {\n this.component = component;\n this.pos = pos;\n this.clientRect = clientRect;\n this.nextDropTarget = nextDropTarget;\n this.active = false;\n this.dropRect = undefined;\n }\n\n targetTabPos(tab: DropPosTab) {\n const { left: tabLeft, width: tabWidth, positionRelativeToTab } = tab;\n return positionRelativeToTab === RelativeDropPosition.BEFORE\n ? tabLeft\n : tabLeft + tabWidth;\n }\n\n /**\n * Determine what will be rendered by the dropTargetRenderer\n *\n * @param {*} lineWidth\n * @param {*} dragState\n * @returns {l, t, r, b, tabLeft, tabWidth, tabHeight}\n */\n getTargetDropOutline(\n lineWidth: number,\n dragState?: DragState,\n ): TargetDropOutline {\n if (this.pos.tab) {\n return this.getDropTabOutline(lineWidth, this.pos.tab);\n } else if (dragState && dragState.hasIntrinsicSize()) {\n return this.getIntrinsicDropRect(dragState);\n } else {\n const [l, t, r, b] = this.getDropRectOutline(\n lineWidth,\n dragState,\n ) as rectTuple;\n return { l, t, r, b };\n }\n }\n\n getDropTabOutline(lineWidth: number, tab: DropPosTab): TargetDropOutline {\n const {\n clientRect: { top, left, right, bottom, header },\n } = this;\n\n const inset = 0;\n const gap = Math.round(lineWidth / 2) + inset;\n\n const t = Math.round(top);\n const l = Math.round(left + gap);\n const r = Math.round(right - gap);\n const b = Math.round(bottom - gap);\n const tabLeft = this.targetTabPos(tab);\n const tabWidth = 60; // should really measure text\n const tabHeight = (header?.bottom ?? 0) - (header?.top ?? 0);\n return { l, t, r, b, tabLeft, tabWidth, tabHeight };\n }\n\n getIntrinsicDropRect(dragState: DragState): TargetDropOutline {\n const { pos, clientRect: rect } = this;\n\n const { x, y } = dragState;\n\n let height = dragState.intrinsicSize?.height ?? 0;\n let width = dragState.intrinsicSize?.height ?? 0;\n\n if (height && height > rect.height) {\n console.log(`DropTarget: we're going to blow the gaff`);\n height = rect.height;\n } else if (width && width > rect.width) {\n console.log(`DropTarget: we're going to blow the gaff`);\n width = rect.width;\n }\n\n const left = Math.min(\n rect.right - width,\n Math.max(rect.left, Math.round(pos.x - x.mousePct * width)),\n );\n const top = Math.min(\n rect.bottom - height,\n Math.max(rect.top, Math.round(pos.y - y.mousePct * height)),\n );\n const [l, t, r, b] = (this.dropRect = [\n left,\n top,\n left + width,\n top + height,\n ]);\n\n const guideLines: GuideLine = pos.position.EastOrWest\n ? [l, rect.top, l, rect.bottom, r, rect.top, r, rect.bottom]\n : [rect.left, t, rect.right, t, rect.left, b, rect.right, b];\n\n return { l, r, t, b, guideLines };\n }\n\n /**\n * @returns [left, top, right, bottom]\n */\n getDropRectOutline(lineWidth: number, dragState?: DragState) {\n const { pos, clientRect: rect } = this;\n const { width: suggestedWidth, height: suggestedHeight, position } = pos;\n\n const { width: intrinsicWidth, height: intrinsicHeight } =\n dragState?.intrinsicSize ?? {};\n const sizeHeight = intrinsicHeight ?? suggestedHeight ?? 0;\n const sizeWidth = intrinsicWidth ?? suggestedWidth ?? 0;\n\n this.dropRect = undefined;\n\n const { top: t, left: l, right: r, bottom: b } = rect;\n\n const inset = 0;\n const gap = Math.round(lineWidth / 2) + inset;\n\n switch (position) {\n case Position.North:\n case Position.Header: {\n const halfHeight = Math.round((b - t) / 2);\n const height = sizeHeight\n ? Math.min(halfHeight, Math.round(sizeHeight))\n : halfHeight;\n return sizeWidth && l + sizeWidth < r\n ? [l + gap, t + gap, l + sizeWidth - gap, t + gap + height] // need flex direction indicator\n : [l + gap, t + gap, r - gap, t + gap + height];\n }\n case Position.West: {\n const halfWidth = Math.round((r - l) / 2);\n const width = sizeWidth\n ? Math.min(halfWidth, Math.round(sizeWidth))\n : halfWidth;\n return sizeHeight && t + sizeHeight < b\n ? [l + gap, t + gap, l - gap + width, t + sizeHeight + gap] // need flex direction indicator\n : [l + gap, t + gap, l - gap + width, b - gap];\n }\n case Position.East: {\n const halfWidth = Math.round((r - l) / 2);\n const width = sizeWidth\n ? Math.min(halfWidth, Math.round(sizeWidth))\n : halfWidth;\n return sizeHeight && t + sizeHeight < b\n ? [r - gap - width, t + gap, r - gap, t + sizeHeight + gap] // need flex direction indicator\n : [r - gap - width, t + gap, r - gap, b - gap];\n }\n case Position.South: {\n const halfHeight = Math.round((b - t) / 2);\n const height = sizeHeight\n ? Math.min(halfHeight, Math.round(sizeHeight))\n : halfHeight;\n\n return sizeWidth && l + sizeWidth < r\n ? [l + gap, b - gap - height, l + sizeWidth - gap, b - gap] // need flex direction indicator\n : [l + gap, b - gap - height, r - gap, b - gap];\n }\n case Position.Centre: {\n return [l + gap, t + gap, r - gap, b - gap];\n }\n default:\n console.warn(`DropTarget does not recognize position ${position}`);\n return null;\n }\n }\n\n activate() {\n this.active = true;\n return this;\n }\n\n toArray(this: DropTarget) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n let dropTarget: DropTarget | null = this;\n const dropTargets = [dropTarget];\n // eslint-disable-next-line no-cond-assign\n while ((dropTarget = dropTarget.nextDropTarget)) {\n dropTargets.push(dropTarget);\n }\n return dropTargets;\n }\n\n static getActiveDropTarget(dropTarget: DropTarget | null): DropTarget | null {\n return dropTarget === null\n ? null\n : dropTarget?.active\n ? dropTarget\n : DropTarget.getActiveDropTarget(dropTarget.nextDropTarget);\n }\n}\n\n// Initial entry to this method is always via the app (may be it should be *on* the app)\nexport function identifyDropTarget(\n x: number,\n y: number,\n rootLayout: LayoutModel,\n measurements: Measurements,\n intrinsicSize?: number,\n validDropTargets?: string[],\n) {\n let dropTarget = null;\n\n const allBoxesContainingPoint = BoxModel.allBoxesContainingPoint(\n rootLayout,\n measurements,\n x,\n y,\n validDropTargets,\n );\n\n if (allBoxesContainingPoint.length) {\n const [component, ...containers] = allBoxesContainingPoint;\n const {\n \"data-path\": dataPath,\n path = dataPath,\n \"data-row-placeholder\": isRowPlaceholder,\n } = getProps(component);\n const clientRect = measurements[path];\n const placeholderOrientation =\n intrinsicSize && isRowPlaceholder ? \"row\" : undefined;\n const pos = getPosition(x, y, clientRect, placeholderOrientation);\n const box = measurements[path];\n\n const nextDropTarget = ([nextTarget, ...targets]: LayoutModel[]):\n | DropTarget\n | undefined => {\n if (pos.position?.Header || pos.closeToTheEdge) {\n const targetPosition = getTargetPosition(\n nextTarget,\n pos,\n box,\n measurements,\n x,\n y,\n );\n if (targetPosition) {\n const [containerPos, clientRect] = targetPosition;\n\n return new DropTarget({\n component: nextTarget,\n pos: containerPos,\n clientRect,\n nextDropTarget: nextDropTarget(targets) ?? null,\n });\n } else if (targets.length) {\n return nextDropTarget(targets);\n }\n }\n };\n dropTarget = new DropTarget({\n component,\n pos,\n clientRect,\n nextDropTarget: nextDropTarget(containers) ?? null,\n }).activate();\n }\n\n return dropTarget;\n}\n\nfunction getTargetPosition(\n container: LayoutModel,\n { closeToTheEdge, position }: DropPos,\n box: rect,\n measurements: Measurements,\n x: number,\n y: number,\n): [DropPos, DragDropRect] | undefined {\n if (!container || container.type === \"LayoutContainer\") {\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const containingBox = measurements[(container.props as any).path];\n const closeToTop = closeToTheEdge & positionValues.north;\n const closeToRight = closeToTheEdge & positionValues.east;\n const closeToBottom = closeToTheEdge & positionValues.south;\n const closeToLeft = closeToTheEdge & positionValues.west;\n\n const atTop =\n (closeToTop || position.Header) &&\n Math.round(box.top) === Math.round(containingBox.top);\n const atRight =\n closeToRight && Math.round(box.right) === Math.round(containingBox.right);\n const atBottom =\n closeToBottom &&\n Math.round(box.bottom) === Math.round(containingBox.bottom);\n const atLeft =\n closeToLeft && Math.round(box.left) === Math.round(containingBox.left);\n\n if (atTop || atRight || atBottom || atLeft) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const { \"data-path\": dataPath, path = dataPath } = container.props as any;\n const clientRect = measurements[path];\n const containerPos = getPosition(x, y, clientRect);\n\n // if its a VBox and we're close to left or right ...\n if (\n (isVBox(container) || isTabbedContainer(container)) &&\n closeToTheEdge & eastwest\n ) {\n containerPos.width = 120;\n return [containerPos, clientRect];\n }\n // if it's a HBox and we're close to top or bottom ...\n else if (\n (isHBox(container) || isTabbedContainer(container)) &&\n (position.Header || closeToTheEdge & northsouth)\n ) {\n containerPos.height = 120;\n return [containerPos, clientRect];\n }\n }\n}\n\nfunction isTabbedContainer(component: LayoutModel) {\n return typeOf(component) === \"Stack\";\n}\n\nfunction isVBox(component: LayoutModel) {\n return (\n typeOf(component) === \"Flexbox\" &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (component.props as any).style.flexDirection === \"column\"\n );\n}\n\nfunction isHBox(component: LayoutModel) {\n return (\n typeOf(component) === \"Flexbox\" &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (component.props as any).style.flexDirection === \"row\"\n );\n}\n"],"names":["rect","clientRect"],"mappings":"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"}
@@ -1,216 +0,0 @@
1
- import { RelativeDropPosition } from './BoxModel.js';
2
-
3
- var __defProp = Object.defineProperty;
4
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
5
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
6
- let _hoverDropTarget = null;
7
- let _shiftedTab = null;
8
- const start = ([x, y]) => `M${x},${y}`;
9
- const point = ([x, y]) => `L${x},${y}`;
10
- const pathFromPoints = ([p1, ...points]) => `${start(p1)} ${points.map(point)}Z`;
11
- const pathFromGuideLines = (guideLines) => {
12
- if (guideLines) {
13
- const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;
14
- return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;
15
- } else {
16
- return "";
17
- }
18
- };
19
- function insertSVGRoot() {
20
- if (document.getElementById("hw-drag-canvas") === null) {
21
- const root = document.getElementById("root");
22
- const container = document.createElement("div");
23
- container.id = "hw-drag-canvas";
24
- container.style.cssText = `visibility:hidden;z-index:10;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent`;
25
- container.innerHTML = `
26
- <svg width="100%" height="100%" style="position: absolute;">
27
- <path id="hw-drop-guides" style="fill: none; stroke: rgba(0, 0, 0, 0.3);stroke-dasharray: 2 3"/>
28
- <path
29
- id="vuu-drop-outline"
30
- style="fill:rgba(0,0,255,.3);stroke:none;stroke-dasharray:4 2"
31
- d="M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z">
32
- <animate
33
- attributeName="d"
34
- id="hw-drop-outline-animate"
35
- begin="indefinite"
36
- dur="300ms"
37
- fill="freeze"
38
- to="M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z"
39
- />
40
- </path>
41
- </svg>
42
- `;
43
- document.body.insertBefore(container, root);
44
- }
45
- }
46
- class DropTargetCanvas {
47
- constructor() {
48
- __publicField(this, "currentPath", null);
49
- __publicField(this, "tabMode", null);
50
- insertSVGRoot();
51
- }
52
- prepare(dragRect, tabMode = "full-view") {
53
- const dragCanvas = document.getElementById("hw-drag-canvas");
54
- if (dragCanvas) {
55
- dragCanvas.style.visibility = "visible";
56
- } else {
57
- throw Error("DropTargetRenderer.prepare no drag canvas detected");
58
- }
59
- document.body.classList.add("drawing");
60
- this.currentPath = null;
61
- this.tabMode = tabMode;
62
- const points = this.getPoints(0, 0, 0, 0);
63
- const d = pathFromPoints(points);
64
- const dropOutlinePath = document.getElementById("vuu-drop-outline");
65
- dropOutlinePath?.setAttribute("d", d);
66
- this.currentPath = d;
67
- }
68
- clear() {
69
- _hoverDropTarget = null;
70
- clearShiftedTab();
71
- const dragCanvas = document.getElementById("hw-drag-canvas");
72
- if (dragCanvas) {
73
- dragCanvas.style.visibility = "hidden";
74
- }
75
- }
76
- get hoverDropTarget() {
77
- return _hoverDropTarget;
78
- }
79
- getPoints(x, y, width, height, tabLeft = 0, tabWidth = 0, tabHeight = 0) {
80
- const tabOnly = this.tabMode === "tab-only";
81
- if (tabWidth === 0) {
82
- return [
83
- [x, y + tabHeight],
84
- [x, y + tabHeight],
85
- [x, y],
86
- [x + tabWidth, y],
87
- [x + tabWidth, y],
88
- [x + width, y],
89
- [x + width, y + height],
90
- [x, y + height]
91
- ];
92
- } else if (tabOnly) {
93
- const left = tabLeft;
94
- return [
95
- [left, y],
96
- [left, y],
97
- [left + tabWidth, y],
98
- [left + tabWidth, y],
99
- [left + tabWidth, y + tabHeight],
100
- [left + tabWidth, y + tabHeight],
101
- [left, y + tabHeight],
102
- [left, y + tabHeight]
103
- ];
104
- } else if (tabLeft === 0) {
105
- return [
106
- [x, y + tabHeight],
107
- [x, y + tabHeight],
108
- [x, y],
109
- [x + tabWidth, y],
110
- [x + tabWidth, y + tabHeight],
111
- [x + width, y + tabHeight],
112
- [x + width, y + height],
113
- [x, y + height]
114
- ];
115
- } else {
116
- return [
117
- [x, y + tabHeight],
118
- [x + tabLeft, y + tabHeight],
119
- [x + tabLeft, y],
120
- [x + tabLeft, y],
121
- [x + tabLeft, y + tabHeight],
122
- [x + width, y + tabHeight],
123
- [x + width, y + height],
124
- [x, y + height]
125
- ];
126
- }
127
- }
128
- draw(dropTarget, dragState) {
129
- if (_hoverDropTarget !== null) {
130
- this.drawTarget(_hoverDropTarget);
131
- } else {
132
- {
133
- if (dropTarget.pos.tab) {
134
- moveExistingTabs(dropTarget);
135
- } else if (_shiftedTab) {
136
- clearShiftedTab();
137
- }
138
- this.drawTarget(dropTarget, dragState);
139
- }
140
- }
141
- }
142
- drawTarget(dropTarget, dragState) {
143
- const lineWidth = 6;
144
- const targetDropOutline = dropTarget.getTargetDropOutline(
145
- lineWidth,
146
- dragState
147
- );
148
- if (targetDropOutline) {
149
- const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } = targetDropOutline;
150
- const w = r - l;
151
- const h = b - t;
152
- if (this.currentPath) {
153
- const path2 = document.getElementById("vuu-drop-outline");
154
- path2?.setAttribute("d", this.currentPath);
155
- }
156
- const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);
157
- const path = pathFromPoints(points);
158
- const animation = document.getElementById(
159
- "hw-drop-outline-animate"
160
- );
161
- animation?.setAttribute("to", path);
162
- animation?.beginElement();
163
- this.currentPath = path;
164
- const dropGuidePath = document.getElementById("hw-drop-guides");
165
- dropGuidePath?.setAttribute("d", pathFromGuideLines(guideLines));
166
- }
167
- }
168
- }
169
- const cssShiftRight = "transition:margin-left .4s ease-out;margin-left: 63px";
170
- const cssShiftBack = "transition:margin-left .4s ease-out;margin-left: 0px";
171
- function moveExistingTabs(dropTarget) {
172
- const { AFTER, BEFORE } = RelativeDropPosition;
173
- const {
174
- clientRect: { Stack },
175
- pos: {
176
- // tab: { index: tabIndex, positionRelativeToTab }
177
- tab
178
- }
179
- } = dropTarget;
180
- const { id } = dropTarget.component.props;
181
- let tabEl = null;
182
- if (Stack && tab && tab.positionRelativeToTab !== AFTER) {
183
- const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;
184
- const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${tab.index + tabOffset})`;
185
- tabEl = document.getElementById(id)?.querySelector(selector);
186
- if (tabEl) {
187
- if (_shiftedTab === null || _shiftedTab !== tabEl) {
188
- tabEl.style.cssText = cssShiftRight;
189
- if (_shiftedTab) {
190
- _shiftedTab.style.cssText = cssShiftBack;
191
- }
192
- _shiftedTab = tabEl;
193
- }
194
- } else {
195
- clearShiftedTab();
196
- }
197
- } else if (tab?.positionRelativeToTab === BEFORE) {
198
- if (_shiftedTab === null) {
199
- const selector = ".vuuHeader-title";
200
- tabEl = document.getElementById(id)?.querySelector(selector);
201
- tabEl.style.cssText = cssShiftRight;
202
- _shiftedTab = tabEl;
203
- }
204
- } else {
205
- clearShiftedTab();
206
- }
207
- }
208
- function clearShiftedTab() {
209
- if (_shiftedTab) {
210
- _shiftedTab.style.cssText = cssShiftBack;
211
- _shiftedTab = null;
212
- }
213
- }
214
-
215
- export { DropTargetCanvas as default };
216
- //# sourceMappingURL=DropTargetRenderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DropTargetRenderer.js","sources":["../../../../packages/vuu-layout/src/drag-drop/DropTargetRenderer.tsx"],"sourcesContent":["import { RelativeDropPosition } from \"./BoxModel\";\nimport { DragDropRect } from \"./dragDropTypes\";\nimport { DragState } from \"./DragState\";\nimport { DropTarget, GuideLine } from \"./DropTarget\";\n\ntype Point = [number, number];\ntype TabMode = \"full-view\" | \"tab-only\";\n\nlet _hoverDropTarget: DropTarget | null = null;\nlet _shiftedTab: HTMLElement | null = null;\n\nconst start = ([x, y]: Point) => `M${x},${y}`;\nconst point = ([x, y]: Point) => `L${x},${y}`;\nconst pathFromPoints = ([p1, ...points]: Point[]) =>\n `${start(p1)} ${points.map(point)}Z`;\n\nconst pathFromGuideLines = (guideLines?: GuideLine) => {\n if (guideLines) {\n const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;\n return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;\n } else {\n return \"\";\n }\n};\n\nfunction insertSVGRoot() {\n if (document.getElementById(\"hw-drag-canvas\") === null) {\n const root = document.getElementById(\"root\");\n const container = document.createElement(\"div\");\n container.id = \"hw-drag-canvas\";\n container.style.cssText = `visibility:hidden;z-index:10;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent`;\n container.innerHTML = `\n <svg width=\"100%\" height=\"100%\" style=\"position: absolute;\">\n <path id=\"hw-drop-guides\" style=\"fill: none; stroke: rgba(0, 0, 0, 0.3);stroke-dasharray: 2 3\"/>\n <path\n id=\"vuu-drop-outline\"\n style=\"fill:rgba(0,0,255,.3);stroke:none;stroke-dasharray:4 2\"\n d=\"M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z\">\n <animate\n attributeName=\"d\"\n id=\"hw-drop-outline-animate\"\n begin=\"indefinite\"\n dur=\"300ms\"\n fill=\"freeze\"\n to=\"M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z\"\n />\n </path>\n </svg>\n `;\n document.body.insertBefore(container, root);\n }\n}\nexport default class DropTargetCanvas {\n private currentPath: string | null = null;\n private tabMode: TabMode | null = null;\n\n constructor() {\n insertSVGRoot();\n }\n\n prepare(dragRect: DragDropRect, tabMode: TabMode = \"full-view\") {\n // don't do this on body\n const dragCanvas = document.getElementById(\"hw-drag-canvas\");\n if (dragCanvas) {\n dragCanvas.style.visibility = \"visible\";\n } else {\n throw Error(\"DropTargetRenderer.prepare no drag canvas detected\");\n }\n document.body.classList.add(\"drawing\");\n this.currentPath = null;\n this.tabMode = tabMode;\n\n const points = this.getPoints(0, 0, 0, 0);\n // const points = this.getPoints(left, top, width, height);\n const d = pathFromPoints(points);\n\n const dropOutlinePath = document.getElementById(\"vuu-drop-outline\");\n dropOutlinePath?.setAttribute(\"d\", d);\n this.currentPath = d;\n }\n\n clear() {\n // don't do this on body\n _hoverDropTarget = null;\n clearShiftedTab();\n const dragCanvas = document.getElementById(\"hw-drag-canvas\");\n if (dragCanvas) {\n dragCanvas.style.visibility = \"hidden\";\n }\n }\n\n get hoverDropTarget() {\n return _hoverDropTarget;\n }\n\n getPoints(\n x: number,\n y: number,\n width: number,\n height: number,\n tabLeft = 0,\n tabWidth = 0,\n tabHeight = 0,\n ): Point[] {\n const tabOnly = this.tabMode === \"tab-only\";\n if (tabWidth === 0) {\n return [\n [x, y + tabHeight],\n [x, y + tabHeight],\n [x, y],\n [x + tabWidth, y],\n [x + tabWidth, y],\n [x + width, y],\n [x + width, y + height],\n [x, y + height],\n ];\n } else if (tabOnly) {\n const left = tabLeft;\n return [\n [left, y],\n [left, y],\n [left + tabWidth, y],\n [left + tabWidth, y],\n [left + tabWidth, y + tabHeight],\n [left + tabWidth, y + tabHeight],\n [left, y + tabHeight],\n [left, y + tabHeight],\n ];\n } else if (tabLeft === 0) {\n return [\n [x, y + tabHeight],\n [x, y + tabHeight],\n [x, y],\n [x + tabWidth, y],\n [x + tabWidth, y + tabHeight],\n [x + width, y + tabHeight],\n [x + width, y + height],\n [x, y + height],\n ];\n } else {\n return [\n [x, y + tabHeight],\n [x + tabLeft, y + tabHeight],\n [x + tabLeft, y],\n [x + tabLeft, y],\n [x + tabLeft, y + tabHeight],\n [x + width, y + tabHeight],\n [x + width, y + height],\n [x, y + height],\n ];\n }\n }\n\n draw(dropTarget: DropTarget, dragState: DragState) {\n const sameDropTarget = false;\n\n if (_hoverDropTarget !== null) {\n this.drawTarget(_hoverDropTarget);\n } else {\n if (sameDropTarget === false) {\n if (dropTarget.pos.tab) {\n moveExistingTabs(dropTarget);\n } else if (_shiftedTab) {\n clearShiftedTab();\n }\n this.drawTarget(dropTarget, dragState);\n }\n }\n }\n\n drawTarget(dropTarget: DropTarget, dragState?: DragState) {\n const lineWidth = 6;\n\n const targetDropOutline = dropTarget.getTargetDropOutline(\n lineWidth,\n dragState,\n );\n\n if (targetDropOutline) {\n const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } =\n targetDropOutline;\n const w = r - l;\n const h = b - t;\n\n if (this.currentPath) {\n const path = document.getElementById(\"vuu-drop-outline\");\n path?.setAttribute(\"d\", this.currentPath);\n }\n\n const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);\n const path = pathFromPoints(points);\n const animation = document.getElementById(\n \"hw-drop-outline-animate\",\n ) as unknown as SVGAnimateElement;\n animation?.setAttribute(\"to\", path);\n animation?.beginElement();\n this.currentPath = path;\n\n const dropGuidePath = document.getElementById(\"hw-drop-guides\");\n dropGuidePath?.setAttribute(\"d\", pathFromGuideLines(guideLines));\n }\n }\n}\n\nconst cssShiftRight = \"transition:margin-left .4s ease-out;margin-left: 63px\";\nconst cssShiftBack = \"transition:margin-left .4s ease-out;margin-left: 0px\";\n\nfunction moveExistingTabs(dropTarget: DropTarget) {\n const { AFTER, BEFORE } = RelativeDropPosition;\n const {\n clientRect: { Stack },\n pos: {\n // tab: { index: tabIndex, positionRelativeToTab }\n tab,\n },\n } = dropTarget;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const { id } = dropTarget.component.props as any;\n let tabEl = null;\n // console.log(`tabPos = ${tabPos} (width=${tabWidth}) x=${x}`)\n if (Stack && tab && tab.positionRelativeToTab !== AFTER) {\n const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;\n const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${\n tab.index + tabOffset\n })`;\n tabEl = document.getElementById(id)?.querySelector(selector) as HTMLElement;\n if (tabEl) {\n if (_shiftedTab === null || _shiftedTab !== tabEl) {\n tabEl.style.cssText = cssShiftRight;\n if (_shiftedTab) {\n _shiftedTab.style.cssText = cssShiftBack;\n }\n _shiftedTab = tabEl;\n }\n } else {\n clearShiftedTab();\n }\n } else if (tab?.positionRelativeToTab === BEFORE) {\n if (_shiftedTab === null) {\n const selector = \".vuuHeader-title\";\n tabEl = document\n .getElementById(id)\n ?.querySelector(selector) as HTMLElement;\n tabEl.style.cssText = cssShiftRight;\n _shiftedTab = tabEl;\n }\n } else {\n clearShiftedTab();\n }\n}\n\nfunction clearShiftedTab() {\n if (_shiftedTab) {\n _shiftedTab.style.cssText = cssShiftBack;\n _shiftedTab = null;\n }\n}\n"],"names":["path"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var flexboxCss = ":root {\n --hw-space-unit: 4px;\n --hw-flex-gap: 3;\n --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);\n}\n\n.hwFlexbox {\n box-sizing: border-box;\n display: flex;\n gap: calc(var(--spacing) * var(--space));\n min-height: 0;\n min-width: 0;\n overflow: hidden;\n}\n\n.hwFlexbox-column {\n flex-direction: column;\n}\n\n.hwFlexbox-row {\n flex-direction: row;\n}\n\n.hwFlexbox > .Splitter {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.hwFlexbox.full-page {\n height: 100vh;\n width: 100vw;\n}\n\n.flex-fill {\n border-color: red;\n flex: 0;\n flex-grow: 1;\n flex-shrink: 1;\n}\n\n.vuuView.flex-fill {\n border-color: red;\n}\n\n";
2
-
3
- export { flexboxCss as default };
4
- //# sourceMappingURL=Flexbox.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Flexbox.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,67 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { useForkRef } from '@salt-ds/core';
3
- import { useComponentCssInjection } from '@salt-ds/styles';
4
- import { useWindow } from '@salt-ds/window';
5
- import cx from 'clsx';
6
- import { forwardRef } from 'react';
7
- import { useSplitterResizing } from './useSplitterResizing.js';
8
- import flexboxCss from './Flexbox.css.js';
9
-
10
- const classBase = "hwFlexbox";
11
- const Flexbox = forwardRef(function Flexbox2(props, ref) {
12
- const {
13
- breakPoints,
14
- children,
15
- // cols: colsProp,
16
- column,
17
- className: classNameProp,
18
- flexFill,
19
- gap,
20
- fullPage,
21
- id,
22
- onSplitterMoved,
23
- resizeable,
24
- row,
25
- spacing,
26
- splitterSize,
27
- style,
28
- ...htmlAttributes
29
- } = props;
30
- const targetWindow = useWindow();
31
- useComponentCssInjection({
32
- testId: "vuu-flexbox",
33
- css: flexboxCss,
34
- window: targetWindow
35
- });
36
- const { content, rootRef } = useSplitterResizing({
37
- children,
38
- onSplitterMoved,
39
- style
40
- });
41
- const className = cx(classBase, classNameProp, {
42
- [`${classBase}-column`]: column,
43
- [`${classBase}-row`]: row,
44
- "flex-fill": flexFill,
45
- "full-page": fullPage
46
- });
47
- return /* @__PURE__ */ jsx(
48
- "div",
49
- {
50
- ...htmlAttributes,
51
- className,
52
- "data-resizeable": resizeable || void 0,
53
- id,
54
- ref: useForkRef(rootRef, ref),
55
- style: {
56
- ...style,
57
- gap,
58
- "--spacing": spacing
59
- },
60
- children: content
61
- }
62
- );
63
- });
64
- Flexbox.displayName = "Flexbox";
65
-
66
- export { Flexbox as default };
67
- //# sourceMappingURL=Flexbox.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Flexbox.js","sources":["../../../../packages/vuu-layout/src/flexbox/Flexbox.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { CSSProperties, ForwardedRef, forwardRef } from \"react\";\nimport { FlexboxProps } from \"./flexboxTypes\";\nimport { useSplitterResizing } from \"./useSplitterResizing\";\n\nimport flexboxCss from \"./Flexbox.css\";\n\nconst classBase = \"hwFlexbox\";\n\nconst Flexbox = forwardRef(function Flexbox(\n props: FlexboxProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n breakPoints,\n children,\n // cols: colsProp,\n column,\n className: classNameProp,\n flexFill,\n gap,\n fullPage,\n id,\n onSplitterMoved,\n resizeable,\n row,\n spacing,\n splitterSize,\n style,\n ...htmlAttributes\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-flexbox\",\n css: flexboxCss,\n window: targetWindow,\n });\n\n const { content, rootRef } = useSplitterResizing({\n children,\n onSplitterMoved,\n style,\n });\n\n const className = cx(classBase, classNameProp, {\n [`${classBase}-column`]: column,\n [`${classBase}-row`]: row,\n \"flex-fill\": flexFill,\n \"full-page\": fullPage,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={className}\n // data-cols={cols}\n data-resizeable={resizeable || undefined}\n id={id}\n ref={useForkRef(rootRef, ref)}\n style={\n {\n ...style,\n gap,\n \"--spacing\": spacing,\n } as CSSProperties\n }\n >\n {content}\n </div>\n );\n});\nFlexbox.displayName = \"Flexbox\";\n\nexport default Flexbox;\n"],"names":["Flexbox"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,WAAA;AAElB,MAAM,OAAU,GAAA,UAAA,CAAW,SAASA,QAAAA,CAClC,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAA;AAAA;AAAA,IAEA,MAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,OAAQ,EAAA,GAAI,mBAAoB,CAAA;AAAA,IAC/C,QAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM,GAAG,GAAA;AAAA,IACtB,WAAa,EAAA,QAAA;AAAA,IACb,WAAa,EAAA;AAAA,GACd,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA;AAAA,MAEA,mBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,MAC/B,EAAA;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,OAAA,EAAS,GAAG,CAAA;AAAA,MAC5B,KACE,EAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACH,GAAA;AAAA,QACA,WAAa,EAAA;AAAA,OACf;AAAA,MAGD,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AACD,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}
@@ -1,28 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { useCallback } from 'react';
3
- import { Action } from '../layout-action.js';
4
- import { useLayoutProviderDispatch } from '../layout-provider/LayoutProvider.js';
5
- import '../layout-provider/LayoutProviderContext.js';
6
- import { registerComponent } from '@vuu-ui/vuu-utils';
7
- import Flexbox from './Flexbox.js';
8
-
9
- const FlexboxLayout = function FlexboxLayout2(props) {
10
- const { path } = props;
11
- const dispatch = useLayoutProviderDispatch();
12
- const handleSplitterMoved = useCallback(
13
- (sizes) => {
14
- dispatch({
15
- type: Action.SPLITTER_RESIZE,
16
- path,
17
- sizes
18
- });
19
- },
20
- [dispatch, path]
21
- );
22
- return /* @__PURE__ */ jsx(Flexbox, { ...props, onSplitterMoved: handleSplitterMoved });
23
- };
24
- FlexboxLayout.displayName = "Flexbox";
25
- registerComponent("Flexbox", FlexboxLayout, "container");
26
-
27
- export { FlexboxLayout };
28
- //# sourceMappingURL=FlexboxLayout.js.map