@cube-dev/ui-kit 0.163.0 → 0.165.0

package/dist/components/layout/Board/use-board-registry.js

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { BoardWidgetStore } from "./board-store.js";
 import { collides } from "./grid-core/collision.js";
+import { createCollisionResolver } from "./grid-core/collision-modes.js";
 import { bottom, cloneLayout, getLayoutItem, moveElement } from "./grid-core/layout.js";
 import { moveElements } from "./grid-core/group-move.js";
 import { calcXYRaw } from "./grid-core/calculate.js";
@@ -68,6 +69,15 @@ function hasNewOverlap(before, after) {
 	return false;
 }
 /**
+* Whether any item in `after` has a different size than it had in `before`.
+*/
+function resizesAnything(before, after) {
+	return after.some((a) => {
+		const b = before.find((it) => it.i === a.i);
+		return !!b && (b.w !== a.w || b.h !== a.h);
+	});
+}
+/**
 * First position at or below the preferred cell where `item` fits without
 * overlapping any of `others` (assumed overlap-free), scanning left-to-right
 * then top-to-bottom, never past `maxRows`. Last-resort placement for a legacy
@@ -130,6 +140,7 @@ function useBoardRegistry(options) {
 	const sourceSnapshotRef = useRef([]);
 	const targetSnapshotsRef = useRef(/* @__PURE__ */ new Map());
 	const previewRef = useRef(null);
+	const targetLandingRef = useRef(null);
 	const frozenRectsRef = useRef(/* @__PURE__ */ new Map());
 	const nestedInDraggedRef = useRef(/* @__PURE__ */ new Set());
 	const lastLandingRef = useRef(null);
@@ -244,6 +255,7 @@ function useBoardRegistry(options) {
 		affectedRef.current = new Set([boardId]);
 		sourceSnapshotRef.current = cloneLayout(entry.getLayout());
 		previewRef.current = null;
+		targetLandingRef.current = null;
 		lastLandingRef.current = {
 			x: item.x,
 			y: item.y
@@ -290,16 +302,26 @@ function useBoardRegistry(options) {
 		const pp = entry.getPositionParams();
 		const compactor = entry.getCompactor();
 		const layout = entry.getLayout();
-		const working = getLayoutItem(layout, item.i) ? cloneLayout(layout) : [...cloneLayout(layout), {
+		const collisionMode = compactor.preventCollision ? entry.getCollisionMode() : "revert";
+		const startLayout = sourceSnapshotRef.current;
+		const base = collisionMode !== "revert" && getLayoutItem(startLayout, item.i) ? startLayout : layout;
+		const working = getLayoutItem(base, item.i) ? cloneLayout(base) : [...cloneLayout(base), {
 			...item,
 			x,
 			y
 		}];
 		const target = getLayoutItem(working, item.i);
 		if (!target) return;
-		const moved = moveElement(working, target, x, y, true, compactor.preventCollision, compactor.type, pp.cols, compactor.allowOverlap);
+		const moved = moveElement(working, target, x, y, true, compactor.preventCollision, compactor.type, pp.cols, compactor.allowOverlap, { resolveCollision: createCollisionResolver(collisionMode, {
+			cols: pp.cols,
+			maxRows: entry.getMaxRows(),
+			desired: {
+				w: target.w,
+				h: target.h
+			}
+		}) });
 		const compacted = [...compactor.compact(moved, pp.cols)];
-		if (!compactor.allowOverlap && hasNewOverlap(overlappingPairs(layout), compacted)) return;
+		if (!compactor.allowOverlap && hasNewOverlap(overlappingPairs(base), compacted)) return;
 		entry.applyLayout(compacted, false);
 		entry.setPlaceholders([getLayoutItem(compacted, item.i)].filter((it) => it !== void 0));
 	}, []);
@@ -341,6 +363,14 @@ function useBoardRegistry(options) {
 		const directionY = Math.sign(deltaY);
 		if (directionX === 0 && directionY === 0) return;
 		const maxRows = entry.getMaxRows();
+		const resolveCollision = compactor.preventCollision ? createCollisionResolver(entry.getCollisionMode(), {
+			cols: pp.cols,
+			maxRows,
+			desired: {
+				w: live.w,
+				h: live.h
+			}
+		}) : void 0;
 		const attempts = directionX < 0 ? live.x : directionX > 0 ? Math.max(0, pp.cols - live.w - live.x) : directionY < 0 ? live.y : Number.isFinite(maxRows) ? Math.max(0, maxRows - live.h - live.y) : Math.max(1, bottom(layout) - live.y);
 		const seen = /* @__PURE__ */ new Set();
 		const beforePairs = overlappingPairs(layout);
@@ -363,13 +393,13 @@ function useBoardRegistry(options) {
 			const working = cloneLayout(layout);
 			const target = getLayoutItem(working, item.i);
 			if (!target) return;
-			const moved = moveElement(working, target, candidate.x, candidate.y, true, compactor.preventCollision, compactor.type, pp.cols, compactor.allowOverlap);
+			const moved = moveElement(working, target, candidate.x, candidate.y, true, compactor.preventCollision, compactor.type, pp.cols, compactor.allowOverlap, { resolveCollision });
 			const compacted = [...compactor.compact(moved, pp.cols)];
 			const landed = getLayoutItem(compacted, item.i);
 			if (!landed) continue;
 			const advanced = directionX !== 0 ? Math.sign(landed.x - live.x) === directionX && landed.y === live.y : Math.sign(landed.y - live.y) === directionY && landed.x === live.x;
 			const overlaps = !compactor.allowOverlap && hasNewOverlap(beforePairs, compacted);
-			if (!advanced || overlaps) continue;
+			if (!advanced || overlaps || resizesAnything(layout, compacted)) continue;
 			entry.applyLayout(compacted, false);
 			entry.setPlaceholders([landed]);
 			lastLandingRef.current = {
@@ -457,10 +487,15 @@ function useBoardRegistry(options) {
 	const previewOnTarget = useCallback((target, item, x, y) => {
 		const pp = target.getPositionParams();
 		const compactor = target.getCompactor();
+		const strictIncomingSwap = compactor.preventCollision === true && !compactor.allowOverlap && target.getCollisionMode() === "swap";
 		const carried = previewRef.current?.boardId === target.id ? previewRef.current.working : null;
 		const base = cloneLayout(carried ?? targetSnapshotsRef.current.get(target.id) ?? target.getLayout()).filter((l) => l.i !== item.i);
 		const prevItem = carried ? getLayoutItem(carried, item.i) : void 0;
-		const dragged = prevItem ? { ...prevItem } : compactor.type === "horizontal" ? {
+		const dragged = prevItem ? prevItem.x === x && prevItem.y === y ? { ...prevItem } : {
+			...prevItem,
+			w: item.w,
+			h: item.h
+		} : compactor.type === "horizontal" ? {
 			...item,
 			x: Math.max(0, x) - 1,
 			y
@@ -469,20 +504,56 @@ function useBoardRegistry(options) {
 			x,
 			y: Math.max(0, y) - 1
 		};
-		const moved = moveElement([...base, dragged], dragged, x, y, true, compactor.preventCollision, compactor.type, pp.cols, compactor.allowOverlap);
-		const compacted = [...compactor.compact(moved, pp.cols)];
-		if (!compactor.allowOverlap && hasNewOverlap(overlappingPairs(base), compacted)) return;
+		const moved = moveElement([...base, dragged], dragged, x, y, true, compactor.preventCollision, compactor.type, pp.cols, compactor.allowOverlap, { resolveCollision: compactor.preventCollision ? createCollisionResolver(target.getCollisionMode(), {
+			cols: pp.cols,
+			maxRows: target.getMaxRows(),
+			desired: {
+				w: item.w,
+				h: item.h
+			},
+			allowExchange: false
+		}) : void 0 });
+		const compacted = strictIncomingSwap ? cloneLayout(moved) : [...compactor.compact(moved, pp.cols)];
+		const landed = getLayoutItem(compacted, item.i);
+		if (!compactor.allowOverlap && hasNewOverlap(overlappingPairs(base), compacted)) {
+			if (strictIncomingSwap) {
+				const snapshot = targetSnapshotsRef.current.get(target.id);
+				if (snapshot) target.applyLayout(cloneLayout(snapshot), false);
+				target.setPlaceholders([]);
+				previewRef.current = null;
+				targetLandingRef.current = {
+					boardId: target.id,
+					valid: false
+				};
+			}
+			return;
+		}
+		if (strictIncomingSwap && (!landed || landed.x !== x || landed.y !== y)) {
+			const snapshot = targetSnapshotsRef.current.get(target.id);
+			if (snapshot) target.applyLayout(cloneLayout(snapshot), false);
+			target.setPlaceholders([]);
+			previewRef.current = null;
+			targetLandingRef.current = {
+				boardId: target.id,
+				valid: false
+			};
+			return;
+		}
 		previewRef.current = {
 			boardId: target.id,
 			working: compacted
 		};
-		const landed = getLayoutItem(compacted, item.i) ?? {
+		targetLandingRef.current = {
+			boardId: target.id,
+			valid: true
+		};
+		const previewItem = landed ?? {
 			...item,
 			x,
 			y
 		};
 		target.applyLayout(compacted.filter((l) => l.i !== item.i), false);
-		target.setPlaceholders([{ ...landed }]);
+		target.setPlaceholders([{ ...previewItem }]);
 	}, []);
 	const onDragMove = useEvent((deltaX, deltaY, pointerType) => {
 		const ds = dragStateRef.current;
@@ -527,6 +598,7 @@ function useBoardRegistry(options) {
 				if (snap) prev?.applyLayout(cloneLayout(snap), false);
 				prev?.setPlaceholders([]);
 				previewRef.current = null;
+				targetLandingRef.current = null;
 			}
 			if (isGroup) moveGroupWithinBoard(target, ds, x - ds.item.x, y - ds.item.y);
 			else moveWithinBoard(target, ds.item, x, y);
@@ -546,6 +618,7 @@ function useBoardRegistry(options) {
 			}
 			prev?.setPlaceholders([]);
 			previewRef.current = null;
+			targetLandingRef.current = null;
 			if (!targetSnapshotsRef.current.has(target.id)) targetSnapshotsRef.current.set(target.id, cloneLayout(target.getLayout()));
 		}
 		previewOnTarget(target, ds.item, x, y);
@@ -574,47 +647,63 @@ function useBoardRegistry(options) {
 				x: ds.item.x,
 				y: ds.item.y
 			};
-			if (source) {
-				const sp = source.getPositionParams();
-				const sc = source.getCompactor();
-				const remaining = source.getLayout().filter((l) => l.i !== ds.itemId);
-				source.applyLayout([...sc.compact(remaining, sp.cols)], true);
-			}
 			const tp = target.getPositionParams();
 			const tc = target.getCompactor();
+			const strictIncomingSwap = tc.preventCollision === true && !tc.allowOverlap && target.getCollisionMode() === "swap";
 			const carried = previewRef.current?.boardId === target.id && getLayoutItem(previewRef.current.working, ds.itemId) ? previewRef.current.working : null;
-			let finalLayout;
-			if (carried) finalLayout = [...tc.compact(cloneLayout(carried), tp.cols)];
-			else {
-				const newItem = tc.type === "horizontal" ? {
-					...ds.item,
-					x: Math.max(0, landing.x) - 1,
-					y: landing.y
-				} : {
-					...ds.item,
-					x: landing.x,
-					y: Math.max(0, landing.y) - 1
-				};
-				const moved = moveElement([...cloneLayout((targetSnapshotsRef.current.get(target.id) ?? target.getLayout()).filter((l) => l.i !== ds.itemId)), newItem], newItem, landing.x, landing.y, true, tc.preventCollision, tc.type, tp.cols, tc.allowOverlap);
-				finalLayout = [...tc.compact(moved, tp.cols)];
-			}
-			const targetOthers = cloneLayout((targetSnapshotsRef.current.get(target.id) ?? target.getLayout()).filter((l) => l.i !== ds.itemId));
-			if (!tc.allowOverlap && hasNewOverlap(overlappingPairs(targetOthers), finalLayout)) finalLayout = [...targetOthers, placeInFreeSlot(targetOthers, {
-				...ds.item,
-				x: landing.x,
-				y: landing.y
-			}, tp.cols, tp.maxRows)];
-			target.applyLayout(finalLayout, true);
-			onTransferRef.current?.({
-				widgetId: ds.itemId,
-				fromBoardId: ds.sourceBoardId,
-				toBoardId: target.id,
-				item: getLayoutItem(finalLayout, ds.itemId) ?? {
+			const hasValidStrictLanding = targetLandingRef.current?.boardId === target.id && targetLandingRef.current.valid && carried != null;
+			if (strictIncomingSwap && !hasValidStrictLanding) {
+				if (source) source.applyLayout(cloneLayout(sourceSnapshotRef.current), false);
+				const targetSnapshot = targetSnapshotsRef.current.get(target.id);
+				if (targetSnapshot) target.applyLayout(cloneLayout(targetSnapshot), false);
+			} else {
+				if (source) {
+					const sp = source.getPositionParams();
+					const sc = source.getCompactor();
+					const remaining = source.getLayout().filter((l) => l.i !== ds.itemId);
+					source.applyLayout([...sc.compact(remaining, sp.cols)], true);
+				}
+				let finalLayout;
+				if (carried) finalLayout = strictIncomingSwap ? cloneLayout(carried) : [...tc.compact(cloneLayout(carried), tp.cols)];
+				else {
+					const newItem = tc.type === "horizontal" ? {
+						...ds.item,
+						x: Math.max(0, landing.x) - 1,
+						y: landing.y
+					} : {
+						...ds.item,
+						x: landing.x,
+						y: Math.max(0, landing.y) - 1
+					};
+					const moved = moveElement([...cloneLayout((targetSnapshotsRef.current.get(target.id) ?? target.getLayout()).filter((l) => l.i !== ds.itemId)), newItem], newItem, landing.x, landing.y, true, tc.preventCollision, tc.type, tp.cols, tc.allowOverlap, { resolveCollision: createCollisionResolver(target.getCollisionMode(), {
+						cols: tp.cols,
+						maxRows: tp.maxRows,
+						desired: {
+							w: ds.item.w,
+							h: ds.item.h
+						},
+						allowExchange: false
+					}) });
+					finalLayout = [...tc.compact(moved, tp.cols)];
+				}
+				const targetOthers = cloneLayout((targetSnapshotsRef.current.get(target.id) ?? target.getLayout()).filter((l) => l.i !== ds.itemId));
+				if (!tc.allowOverlap && hasNewOverlap(overlappingPairs(targetOthers), finalLayout)) finalLayout = [...targetOthers, placeInFreeSlot(targetOthers, {
 					...ds.item,
 					x: landing.x,
 					y: landing.y
-				}
-			});
+				}, tp.cols, tp.maxRows)];
+				target.applyLayout(finalLayout, true);
+				onTransferRef.current?.({
+					widgetId: ds.itemId,
+					fromBoardId: ds.sourceBoardId,
+					toBoardId: target.id,
+					item: getLayoutItem(finalLayout, ds.itemId) ?? {
+						...ds.item,
+						x: landing.x,
+						y: landing.y
+					}
+				});
+			}
 		}
 		const ids = new Set(affectedRef.current);
 		ids.add(ds.sourceBoardId);
@@ -626,6 +715,7 @@ function useBoardRegistry(options) {
 		frozenRectsRef.current.clear();
 		nestedInDraggedRef.current = /* @__PURE__ */ new Set();
 		previewRef.current = null;
+		targetLandingRef.current = null;
 		lastLandingRef.current = null;
 		setDragState(null);
 	});