@strapi/admin 5.27.0 → 5.28.0

package/dist/admin/admin/src/components/GapDropZone.mjs

@@ -0,0 +1,268 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box } from '@strapi/design-system';
+import { useDrop } from 'react-dnd';
+import { styled } from 'styled-components';
+import { calculateWidgetRows, getWidgetGridContainer, getWidgetElement } from '../utils/widgetLayout.mjs';
+
+const DROP_ZONE_SIZE = 20;
+const getRowInfo = (row)=>{
+    const firstWidgetElement = getWidgetElement(row.widgets[0].uid);
+    const lastWidgetElement = getWidgetElement(row.widgets[row.widgets.length - 1].uid);
+    const containerElement = getWidgetGridContainer();
+    if (!firstWidgetElement || !lastWidgetElement || !containerElement) {
+        return null;
+    }
+    const firstRect = firstWidgetElement.getBoundingClientRect();
+    const lastRect = lastWidgetElement.getBoundingClientRect();
+    const containerRect = containerElement.getBoundingClientRect();
+    return {
+        firstWidgetElement,
+        lastWidgetElement,
+        containerElement,
+        firstRect,
+        lastRect,
+        containerRect,
+        rowHeight: Math.max(firstRect.height, lastRect.height),
+        rowTop: firstRect.top - containerRect.top
+    };
+};
+const addVerticalDropZones = (row, rowInfo, rowIndex)=>{
+    if (!rowInfo) return [];
+    const { containerRect, rowTop, rowHeight } = rowInfo;
+    const widgetCount = row.widgets.length;
+    // Get widget positions relative to container
+    const widgetPositions = row.widgets.map((widget)=>{
+        const element = getWidgetElement(widget.uid);
+        if (!element) return null;
+        const rect = element.getBoundingClientRect();
+        return {
+            left: rect.left - containerRect.left,
+            width: rect.width
+        };
+    }).filter((pos)=>pos !== null);
+    if (widgetPositions.length !== widgetCount) return [];
+    const gapDropZones = [];
+    // Always add drop zone before the first widget
+    gapDropZones.push({
+        insertIndex: row.startIndex,
+        position: {
+            left: widgetPositions[0].left - DROP_ZONE_SIZE,
+            top: rowTop,
+            height: rowHeight,
+            width: DROP_ZONE_SIZE
+        },
+        isVisible: true,
+        type: 'vertical',
+        targetRowIndex: rowIndex
+    });
+    // Add drop zones between widgets
+    widgetPositions.slice(0, -1).forEach((currentWidget, i)=>{
+        gapDropZones.push({
+            insertIndex: row.startIndex + i + 1,
+            position: {
+                left: currentWidget.left + currentWidget.width,
+                top: rowTop,
+                height: rowHeight,
+                width: DROP_ZONE_SIZE
+            },
+            isVisible: true,
+            type: 'vertical',
+            targetRowIndex: rowIndex
+        });
+    });
+    // Always add drop zone after the last widget
+    const lastWidget = widgetPositions[widgetCount - 1];
+    gapDropZones.push({
+        insertIndex: row.endIndex + 1,
+        position: {
+            left: lastWidget.left + lastWidget.width,
+            top: rowTop,
+            height: rowHeight,
+            width: DROP_ZONE_SIZE
+        },
+        isVisible: true,
+        type: 'vertical',
+        targetRowIndex: rowIndex
+    });
+    return gapDropZones;
+};
+const addHorizontalDropZones = (row, rowIndex, rowInfo, widgetRows, filteredWidgets)=>{
+    if (!rowInfo) return [];
+    // Don't show horizontal drop zones if there's only one row with one widget
+    if (widgetRows.length === 1 && row.widgets.length === 1) return [];
+    const { containerRect } = rowInfo;
+    const containerWidth = containerRect.width;
+    const horizontalDropZoneHeight = DROP_ZONE_SIZE;
+    const gapDropZones = [];
+    // Add horizontal drop zone above the first row
+    if (rowIndex === 0) {
+        const firstRowRect = rowInfo.firstRect;
+        const firstRowTop = firstRowRect.top - containerRect.top;
+        gapDropZones.push({
+            insertIndex: 0,
+            position: {
+                left: 0,
+                top: firstRowTop - horizontalDropZoneHeight,
+                height: horizontalDropZoneHeight,
+                width: containerWidth
+            },
+            isVisible: true,
+            type: 'horizontal',
+            isHorizontalDrop: true
+        });
+    }
+    // Add horizontal drop zone below the current row (between rows or after last row)
+    if (rowIndex < widgetRows.length - 1) {
+        // Between rows: position above the next row
+        const nextRow = widgetRows[rowIndex + 1];
+        const nextRowFirstWidgetElement = getWidgetElement(nextRow.widgets[0].uid);
+        if (nextRowFirstWidgetElement) {
+            const nextRowRect = nextRowFirstWidgetElement.getBoundingClientRect();
+            const nextRowTop = nextRowRect.top - containerRect.top;
+            gapDropZones.push({
+                insertIndex: row.endIndex + 1,
+                position: {
+                    left: 0,
+                    top: nextRowTop - horizontalDropZoneHeight,
+                    height: horizontalDropZoneHeight,
+                    width: containerWidth
+                },
+                isVisible: true,
+                type: 'horizontal',
+                isHorizontalDrop: true
+            });
+        }
+    } else {
+        // After the last row: position below the current row
+        const lastRowRect = rowInfo.lastRect;
+        const lastRowBottom = lastRowRect.bottom - containerRect.top;
+        gapDropZones.push({
+            insertIndex: filteredWidgets.length,
+            position: {
+                left: 0,
+                top: lastRowBottom,
+                height: horizontalDropZoneHeight,
+                width: containerWidth
+            },
+            isVisible: true,
+            type: 'horizontal',
+            isHorizontalDrop: true
+        });
+    }
+    return gapDropZones;
+};
+const GapDropZoneManager = ({ filteredWidgets, columnWidths, draggedWidgetId, moveWidget })=>{
+    const [positions, setPositions] = React.useState([]);
+    // Calculate widget rows
+    const widgetRows = React.useMemo(()=>{
+        return calculateWidgetRows(filteredWidgets, columnWidths);
+    }, [
+        filteredWidgets,
+        columnWidths
+    ]);
+    // Main function to calculate GapDropZone positions
+    const calculateGapDropZonePositions = React.useCallback(()=>{
+        const gapDropZones = [];
+        // Find which row the dragged widget is from
+        const draggedWidgetRow = draggedWidgetId ? widgetRows.find((row)=>row.widgets.some((widget)=>widget.uid === draggedWidgetId)) : null;
+        widgetRows.forEach((row, rowIndex)=>{
+            const rowInfo = getRowInfo(row);
+            if (!rowInfo) return;
+            const widgetCount = row.widgets.length;
+            // Determine if we should show vertical drop zones for this row
+            const isDraggingFromThisRow = draggedWidgetRow && draggedWidgetRow === row;
+            const isDraggingFromAnotherRow = draggedWidgetRow && draggedWidgetRow !== row;
+            const canAcceptMoreWidgets = widgetCount < 3;
+            const shouldShowVerticalDropZones = isDraggingFromThisRow || isDraggingFromAnotherRow && canAcceptMoreWidgets;
+            // Add vertical drop zones based on widget count
+            if (shouldShowVerticalDropZones) {
+                const verticalDropZones = addVerticalDropZones(row, rowInfo, rowIndex);
+                gapDropZones.push(...verticalDropZones);
+            }
+            // Add horizontal drop zones
+            const horizontalDropZones = addHorizontalDropZones(row, rowIndex, rowInfo, widgetRows, filteredWidgets);
+            gapDropZones.push(...horizontalDropZones);
+        });
+        return gapDropZones;
+    }, [
+        widgetRows,
+        draggedWidgetId,
+        filteredWidgets
+    ]);
+    React.useLayoutEffect(()=>{
+        const updatePositions = ()=>{
+            const newPositions = calculateGapDropZonePositions();
+            setPositions(newPositions);
+        };
+        updatePositions();
+        // Update positions on container resize using ResizeObserver
+        const containerElement = getWidgetGridContainer();
+        if (!containerElement) return;
+        const resizeObserver = new ResizeObserver(()=>{
+            updatePositions();
+        });
+        resizeObserver.observe(containerElement);
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        calculateGapDropZonePositions
+    ]);
+    return positions.map((gapDropZone)=>/*#__PURE__*/ jsx(GapDropZone, {
+            insertIndex: gapDropZone.insertIndex,
+            position: gapDropZone.position,
+            isVisible: gapDropZone.isVisible,
+            type: gapDropZone.type,
+            moveWidget: moveWidget,
+            targetRowIndex: gapDropZone.targetRowIndex
+        }, `gap-drop-zone-${gapDropZone.type}-${gapDropZone.insertIndex}-${gapDropZone.targetRowIndex ?? 'no-row'}`));
+};
+const GapDropZoneContainer = styled(Box)`
+  background-color: ${({ $isOver, theme })=>$isOver ? `${theme.colors.primary100}` : 'transparent'};
+  border: ${({ $isOver, theme })=>$isOver ? `2px solid ${theme.colors.primary500}` : '2px solid transparent'};
+  opacity: ${({ $isOver })=>$isOver ? 1 : 0.6};
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: ${DROP_ZONE_SIZE}px;
+  z-index: 1;
+`;
+const GapDropZone = ({ insertIndex, position, isVisible, type, moveWidget, targetRowIndex })=>{
+    const isHorizontalDrop = type === 'horizontal';
+    const [{ isOver }, drop] = useDrop(()=>({
+            accept: 'widget',
+            drop: (item)=>{
+                moveWidget(item.id, insertIndex, targetRowIndex, isHorizontalDrop);
+            },
+            collect: (monitor)=>({
+                    isOver: monitor.isOver()
+                })
+        }), [
+        insertIndex,
+        isHorizontalDrop,
+        moveWidget,
+        targetRowIndex
+    ]);
+    if (!isVisible) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(GapDropZoneContainer, {
+        ref: drop,
+        $isOver: isOver,
+        style: {
+            transform: `translate(${position.left}px, ${position.top}px)`,
+            height: `${position.height}px`,
+            width: `${position.width}px`
+        }
+    });
+};
+
+export { DROP_ZONE_SIZE, GapDropZoneManager, addHorizontalDropZones, addVerticalDropZones };
+//# sourceMappingURL=GapDropZone.mjs.map

package/dist/admin/admin/src/components/GapDropZone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GapDropZone.mjs","sources":["../../../../../admin/src/components/GapDropZone.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n// TODO: use @dnd-kit/core instead\nimport { useDrop } from 'react-dnd';\nimport { styled } from 'styled-components';\n\nimport {\n  calculateWidgetRows,\n  type WidgetRow,\n  getWidgetElement,\n  getWidgetGridContainer,\n} from '../utils/widgetLayout';\n\nimport type { WidgetWithUID } from '../core/apis/Widgets';\n\nexport const DROP_ZONE_SIZE = 20;\n\nexport interface GapDropZonePosition {\n  insertIndex: number;\n  position: { left: number; top: number; height: number; width: number };\n  isVisible: boolean;\n  type: 'vertical' | 'horizontal';\n  isHorizontalDrop?: boolean;\n  targetRowIndex?: number;\n}\n\ninterface GapDropZoneManagerProps {\n  filteredWidgets: WidgetWithUID[];\n  columnWidths: Record<string, number>;\n  draggedWidgetId?: string;\n  moveWidget: (id: string, to: number, targetRowIndex?: number, isHorizontalDrop?: boolean) => void;\n}\n\nconst getRowInfo = (row: WidgetRow) => {\n  const firstWidgetElement = getWidgetElement(row.widgets[0].uid);\n  const lastWidgetElement = getWidgetElement(row.widgets[row.widgets.length - 1].uid);\n  const containerElement = getWidgetGridContainer();\n\n  if (!firstWidgetElement || !lastWidgetElement || !containerElement) {\n    return null;\n  }\n\n  const firstRect = firstWidgetElement.getBoundingClientRect();\n  const lastRect = lastWidgetElement.getBoundingClientRect();\n  const containerRect = containerElement.getBoundingClientRect();\n\n  return {\n    firstWidgetElement,\n    lastWidgetElement,\n    containerElement,\n    firstRect,\n    lastRect,\n    containerRect,\n    rowHeight: Math.max(firstRect.height, lastRect.height),\n    rowTop: firstRect.top - containerRect.top,\n  };\n};\n\nexport const addVerticalDropZones = (\n  row: WidgetRow,\n  rowInfo: ReturnType<typeof getRowInfo>,\n  rowIndex: number\n): GapDropZonePosition[] => {\n  if (!rowInfo) return [];\n\n  const { containerRect, rowTop, rowHeight } = rowInfo;\n  const widgetCount = row.widgets.length;\n\n  // Get widget positions relative to container\n  const widgetPositions = row.widgets\n    .map((widget) => {\n      const element = getWidgetElement(widget.uid);\n      if (!element) return null;\n\n      const rect = element.getBoundingClientRect();\n      return {\n        left: rect.left - containerRect.left,\n        width: rect.width,\n      };\n    })\n    .filter((pos): pos is NonNullable<typeof pos> => pos !== null);\n\n  if (widgetPositions.length !== widgetCount) return [];\n\n  const gapDropZones: GapDropZonePosition[] = [];\n\n  // Always add drop zone before the first widget\n  gapDropZones.push({\n    insertIndex: row.startIndex,\n    position: {\n      left: widgetPositions[0].left - DROP_ZONE_SIZE,\n      top: rowTop,\n      height: rowHeight,\n      width: DROP_ZONE_SIZE,\n    },\n    isVisible: true,\n    type: 'vertical',\n    targetRowIndex: rowIndex,\n  });\n\n  // Add drop zones between widgets\n  widgetPositions.slice(0, -1).forEach((currentWidget, i) => {\n    gapDropZones.push({\n      insertIndex: row.startIndex + i + 1,\n      position: {\n        left: currentWidget.left + currentWidget.width,\n        top: rowTop,\n        height: rowHeight,\n        width: DROP_ZONE_SIZE,\n      },\n      isVisible: true,\n      type: 'vertical',\n      targetRowIndex: rowIndex,\n    });\n  });\n\n  // Always add drop zone after the last widget\n  const lastWidget = widgetPositions[widgetCount - 1];\n  gapDropZones.push({\n    insertIndex: row.endIndex + 1,\n    position: {\n      left: lastWidget.left + lastWidget.width,\n      top: rowTop,\n      height: rowHeight,\n      width: DROP_ZONE_SIZE,\n    },\n    isVisible: true,\n    type: 'vertical',\n    targetRowIndex: rowIndex,\n  });\n\n  return gapDropZones;\n};\n\nexport const addHorizontalDropZones = (\n  row: WidgetRow,\n  rowIndex: number,\n  rowInfo: ReturnType<typeof getRowInfo>,\n  widgetRows: WidgetRow[],\n  filteredWidgets: WidgetWithUID[]\n): GapDropZonePosition[] => {\n  if (!rowInfo) return [];\n\n  // Don't show horizontal drop zones if there's only one row with one widget\n  if (widgetRows.length === 1 && row.widgets.length === 1) return [];\n\n  const { containerRect } = rowInfo;\n  const containerWidth = containerRect.width;\n  const horizontalDropZoneHeight = DROP_ZONE_SIZE;\n\n  const gapDropZones: GapDropZonePosition[] = [];\n\n  // Add horizontal drop zone above the first row\n  if (rowIndex === 0) {\n    const firstRowRect = rowInfo.firstRect;\n    const firstRowTop = firstRowRect.top - containerRect.top;\n\n    gapDropZones.push({\n      insertIndex: 0,\n      position: {\n        left: 0,\n        top: firstRowTop - horizontalDropZoneHeight,\n        height: horizontalDropZoneHeight,\n        width: containerWidth,\n      },\n      isVisible: true,\n      type: 'horizontal',\n      isHorizontalDrop: true,\n    });\n  }\n\n  // Add horizontal drop zone below the current row (between rows or after last row)\n  if (rowIndex < widgetRows.length - 1) {\n    // Between rows: position above the next row\n    const nextRow = widgetRows[rowIndex + 1];\n    const nextRowFirstWidgetElement = getWidgetElement(nextRow.widgets[0].uid);\n\n    if (nextRowFirstWidgetElement) {\n      const nextRowRect = nextRowFirstWidgetElement.getBoundingClientRect();\n      const nextRowTop = nextRowRect.top - containerRect.top;\n\n      gapDropZones.push({\n        insertIndex: row.endIndex + 1,\n        position: {\n          left: 0,\n          top: nextRowTop - horizontalDropZoneHeight,\n          height: horizontalDropZoneHeight,\n          width: containerWidth,\n        },\n        isVisible: true,\n        type: 'horizontal',\n        isHorizontalDrop: true,\n      });\n    }\n  } else {\n    // After the last row: position below the current row\n    const lastRowRect = rowInfo.lastRect;\n    const lastRowBottom = lastRowRect.bottom - containerRect.top;\n\n    gapDropZones.push({\n      insertIndex: filteredWidgets.length,\n      position: {\n        left: 0,\n        top: lastRowBottom,\n        height: horizontalDropZoneHeight,\n        width: containerWidth,\n      },\n      isVisible: true,\n      type: 'horizontal',\n      isHorizontalDrop: true,\n    });\n  }\n\n  return gapDropZones;\n};\n\nexport const GapDropZoneManager = ({\n  filteredWidgets,\n  columnWidths,\n  draggedWidgetId,\n  moveWidget,\n}: GapDropZoneManagerProps) => {\n  const [positions, setPositions] = React.useState<GapDropZonePosition[]>([]);\n\n  // Calculate widget rows\n  const widgetRows = React.useMemo(() => {\n    return calculateWidgetRows(filteredWidgets, columnWidths);\n  }, [filteredWidgets, columnWidths]);\n\n  // Main function to calculate GapDropZone positions\n  const calculateGapDropZonePositions = React.useCallback(() => {\n    const gapDropZones: GapDropZonePosition[] = [];\n\n    // Find which row the dragged widget is from\n    const draggedWidgetRow = draggedWidgetId\n      ? widgetRows.find((row) => row.widgets.some((widget) => widget.uid === draggedWidgetId))\n      : null;\n\n    widgetRows.forEach((row, rowIndex) => {\n      const rowInfo = getRowInfo(row);\n      if (!rowInfo) return;\n\n      const widgetCount = row.widgets.length;\n\n      // Determine if we should show vertical drop zones for this row\n      const isDraggingFromThisRow = draggedWidgetRow && draggedWidgetRow === row;\n      const isDraggingFromAnotherRow = draggedWidgetRow && draggedWidgetRow !== row;\n      const canAcceptMoreWidgets = widgetCount < 3;\n\n      const shouldShowVerticalDropZones =\n        isDraggingFromThisRow || (isDraggingFromAnotherRow && canAcceptMoreWidgets);\n\n      // Add vertical drop zones based on widget count\n      if (shouldShowVerticalDropZones) {\n        const verticalDropZones = addVerticalDropZones(row, rowInfo, rowIndex);\n        gapDropZones.push(...verticalDropZones);\n      }\n\n      // Add horizontal drop zones\n      const horizontalDropZones = addHorizontalDropZones(\n        row,\n        rowIndex,\n        rowInfo,\n        widgetRows,\n        filteredWidgets\n      );\n      gapDropZones.push(...horizontalDropZones);\n    });\n\n    return gapDropZones;\n  }, [widgetRows, draggedWidgetId, filteredWidgets]);\n\n  React.useLayoutEffect(() => {\n    const updatePositions = () => {\n      const newPositions = calculateGapDropZonePositions();\n      setPositions(newPositions);\n    };\n\n    updatePositions();\n\n    // Update positions on container resize using ResizeObserver\n    const containerElement = getWidgetGridContainer();\n    if (!containerElement) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      updatePositions();\n    });\n\n    resizeObserver.observe(containerElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [calculateGapDropZonePositions]);\n\n  return positions.map((gapDropZone) => (\n    <GapDropZone\n      key={`gap-drop-zone-${gapDropZone.type}-${gapDropZone.insertIndex}-${gapDropZone.targetRowIndex ?? 'no-row'}`}\n      insertIndex={gapDropZone.insertIndex}\n      position={gapDropZone.position}\n      isVisible={gapDropZone.isVisible}\n      type={gapDropZone.type}\n      moveWidget={moveWidget}\n      targetRowIndex={gapDropZone.targetRowIndex}\n    />\n  ));\n};\n\ninterface GapDropZoneProps {\n  insertIndex: number;\n  position: { left: number; top: number; height: number; width: number };\n  isVisible: boolean;\n  type: 'vertical' | 'horizontal';\n  moveWidget: (id: string, to: number, targetRowIndex?: number, isHorizontalDrop?: boolean) => void;\n  targetRowIndex?: number;\n}\n\nconst GapDropZoneContainer = styled(Box)<{\n  $isOver: boolean;\n}>`\n  background-color: ${({ $isOver, theme }) =>\n    $isOver ? `${theme.colors.primary100}` : 'transparent'};\n  border: ${({ $isOver, theme }) =>\n    $isOver ? `2px solid ${theme.colors.primary500}` : '2px solid transparent'};\n  opacity: ${({ $isOver }) => ($isOver ? 1 : 0.6)};\n  transition: all 0.2s ease-in-out;\n  cursor: pointer;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${DROP_ZONE_SIZE}px;\n  z-index: 1;\n`;\n\nconst GapDropZone = ({\n  insertIndex,\n  position,\n  isVisible,\n  type,\n  moveWidget,\n  targetRowIndex,\n}: GapDropZoneProps) => {\n  const isHorizontalDrop = type === 'horizontal';\n\n  const [{ isOver }, drop] = useDrop(\n    () => ({\n      accept: 'widget',\n      drop: (item: { id: string }) => {\n        moveWidget(item.id, insertIndex, targetRowIndex, isHorizontalDrop);\n      },\n      collect: (monitor) => ({\n        isOver: monitor.isOver(),\n      }),\n    }),\n    [insertIndex, isHorizontalDrop, moveWidget, targetRowIndex]\n  );\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <GapDropZoneContainer\n      ref={drop}\n      $isOver={isOver}\n      style={{\n        transform: `translate(${position.left}px, ${position.top}px)`,\n        height: `${position.height}px`,\n        width: `${position.width}px`,\n      }}\n    />\n  );\n};\n"],"names":["DROP_ZONE_SIZE","getRowInfo","row","firstWidgetElement","getWidgetElement","widgets","uid","lastWidgetElement","length","containerElement","getWidgetGridContainer","firstRect","getBoundingClientRect","lastRect","containerRect","rowHeight","Math","max","height","rowTop","top","addVerticalDropZones","rowInfo","rowIndex","widgetCount","widgetPositions","map","widget","element","rect","left","width","filter","pos","gapDropZones","push","insertIndex","startIndex","position","isVisible","type","targetRowIndex","slice","forEach","currentWidget","i","lastWidget","endIndex","addHorizontalDropZones","widgetRows","filteredWidgets","containerWidth","horizontalDropZoneHeight","firstRowRect","firstRowTop","isHorizontalDrop","nextRow","nextRowFirstWidgetElement","nextRowRect","nextRowTop","lastRowRect","lastRowBottom","bottom","GapDropZoneManager","columnWidths","draggedWidgetId","moveWidget","positions","setPositions","React","useState","useMemo","calculateWidgetRows","calculateGapDropZonePositions","useCallback","draggedWidgetRow","find","some","isDraggingFromThisRow","isDraggingFromAnotherRow","canAcceptMoreWidgets","shouldShowVerticalDropZones","verticalDropZones","horizontalDropZones","useLayoutEffect","updatePositions","newPositions","resizeObserver","ResizeObserver","observe","disconnect","gapDropZone","_jsx","GapDropZone","GapDropZoneContainer","styled","Box","$isOver","theme","colors","primary100","primary500","borderRadius","isOver","drop","useDrop","accept","item","id","collect","monitor","ref","style","transform"],"mappings":"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"}

package/dist/admin/admin/src/components/ResizeIndicator.js

@@ -0,0 +1,353 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var styled = require('styled-components');
+var resizeHandlers = require('../utils/resizeHandlers.js');
+var widgetLayout = require('../utils/widgetLayout.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const INDICATOR_SIZE = 20;
+const IndicatorContainer = styled.styled(designSystem.Box)`
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  opacity: ${({ $isVisible })=>$isVisible ? 1 : 0};
+  transition: opacity 0.2s ease-in-out;
+  background: transparent;
+  height: ${INDICATOR_SIZE}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const DotContainer = styled.styled(designSystem.Box)`
+  position: absolute;
+  top: 50%;
+  left: ${({ $position })=>$position}%;
+  transform: translate(-50%, -50%);
+`;
+const Dot = styled.styled(designSystem.Box)`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${({ $isActive, $isCurrent, theme })=>{
+    if ($isCurrent) return theme.colors.primary600;
+    if ($isActive) return theme.colors.primary500;
+    return theme.colors.neutral300;
+}};
+  transition: all 0.2s ease-in-out;
+  box-shadow: ${({ $isCurrent, theme })=>$isCurrent ? `0 0 0 3px ${theme.colors.primary100}` : 'none'};
+  transform: ${({ $isCurrent })=>$isCurrent ? 'scale(1.2)' : 'scale(1)'};
+`;
+const calculateGapAdjustment = (rowWidth, leftColumns)=>{
+    const dotWidth = 6;
+    const gapAdjustmentPixels = dotWidth / 2; // Half dot width to center on boundary
+    const gapAdjustmentPercent = gapAdjustmentPixels / rowWidth * 100;
+    // Different adjustments for different positions
+    switch(leftColumns){
+        case 4:
+            return -gapAdjustmentPercent; // Left dot
+        case 8:
+            return gapAdjustmentPercent; // Right dot
+        default:
+            return 0;
+    }
+};
+const ResizeIndicator = ({ isVisible, position, currentLeftWidth, currentRightWidth, totalColumns = 12, rowPosition })=>{
+    // Calculate available resize positions accounting for grid gaps
+    const availablePositions = React__namespace.useMemo(()=>{
+        const rowWidth = rowPosition?.width || 800;
+        return [
+            4,
+            6,
+            8
+        ].map((left)=>{
+            const right = totalColumns - left;
+            const basePosition = left / totalColumns * 100;
+            const gapAdjustment = calculateGapAdjustment(rowWidth, left);
+            const positionPercent = basePosition + gapAdjustment;
+            return {
+                left,
+                right,
+                positionPercent
+            };
+        });
+    }, [
+        totalColumns,
+        rowPosition?.width
+    ]);
+    // Find the current position index
+    const currentPositionIndex = React__namespace.useMemo(()=>{
+        return availablePositions.findIndex((pos)=>pos.left === currentLeftWidth && pos.right === currentRightWidth);
+    }, [
+        availablePositions,
+        currentLeftWidth,
+        currentRightWidth
+    ]);
+    if (!isVisible) {
+        return null;
+    }
+    // Calculate positioning - indicator always spans the full row width
+    const indicatorTop = rowPosition ? rowPosition.top - INDICATOR_SIZE : Math.max(10, position.top + position.height / 2 - 40);
+    const isCurrent = (index)=>index === currentPositionIndex;
+    const isActive = (index)=>Math.abs(index - currentPositionIndex) <= 1;
+    return /*#__PURE__*/ jsxRuntime.jsx(IndicatorContainer, {
+        $isVisible: isVisible,
+        style: {
+            left: rowPosition ? `${rowPosition.left}px` : `${position.left + 10}px`,
+            top: `${indicatorTop}px`,
+            width: rowPosition ? `${rowPosition.width}px` : 'auto'
+        },
+        children: availablePositions.map((pos, index)=>{
+            return /*#__PURE__*/ jsxRuntime.jsx(DotContainer, {
+                $position: pos.positionPercent,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Dot, {
+                    $isActive: isActive(index),
+                    $isCurrent: isCurrent(index)
+                })
+            }, `${pos.left}-${pos.right}`);
+        })
+    });
+};
+const ResizeHandleContainer = styled.styled(designSystem.Box)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: ${INDICATOR_SIZE}px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  transition: opacity 0.2s ease-in-out;
+  cursor: col-resize;
+  background-color: ${({ $isDragging })=>$isDragging ? 'rgba(0, 0, 0, 0.1)' : 'transparent'};
+`;
+const ResizeHandleBar = styled.styled(designSystem.Box)`
+  width: 2px;
+  height: 100%;
+  background-color: ${({ theme })=>theme.colors.primary500};
+  border-radius: 1px;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+
+  ${ResizeHandleContainer}:hover & {
+    opacity: 0.8;
+  }
+
+  ${({ $isDragging })=>$isDragging && `opacity: 0.8;`}
+`;
+const WidgetResizeHandle = ({ leftWidgetId, rightWidgetId, leftWidgetWidth, rightWidgetWidth, onResize, saveLayout })=>{
+    const [state, setState] = React__namespace.useState({
+        isDragging: false,
+        startX: 0,
+        startLeftWidth: 0,
+        startRightWidth: 0,
+        position: {
+            left: 0,
+            top: 0,
+            height: 0
+        },
+        lastResizeValues: {
+            leftWidth: 0,
+            rightWidth: 0
+        },
+        currentResizeValues: {
+            leftWidth: leftWidgetWidth,
+            rightWidth: rightWidgetWidth
+        },
+        rowPosition: null
+    });
+    const throttleRef = React__namespace.useRef(null);
+    const handleResize = React__namespace.useCallback((deltaColumns)=>{
+        // Only resize if there's significant movement (dead zone)
+        if (Math.abs(deltaColumns) < 0.25) {
+            return;
+        }
+        // Calculate target widths
+        const { targetLeftWidth, targetRightWidth } = resizeHandlers.calculateTargetWidths(deltaColumns, state.startLeftWidth, state.startRightWidth);
+        // Validate the resize
+        if (!resizeHandlers.isValidResize(targetLeftWidth, targetRightWidth)) {
+            return;
+        }
+        // Update current resize values for the indicator
+        setState((prev)=>({
+                ...prev,
+                currentResizeValues: {
+                    leftWidth: targetLeftWidth,
+                    rightWidth: targetRightWidth
+                }
+            }));
+        // Only trigger resize if values have changed
+        if (resizeHandlers.shouldTriggerResize(targetLeftWidth, targetRightWidth, state.lastResizeValues)) {
+            setState((prev)=>({
+                    ...prev,
+                    lastResizeValues: {
+                        leftWidth: targetLeftWidth,
+                        rightWidth: targetRightWidth
+                    }
+                }));
+            onResize(leftWidgetId, rightWidgetId, targetLeftWidth, targetRightWidth);
+        }
+    }, [
+        leftWidgetId,
+        rightWidgetId,
+        onResize,
+        state.startLeftWidth,
+        state.startRightWidth,
+        state.lastResizeValues
+    ]);
+    const handlePointerMove = React__namespace.useCallback((e)=>{
+        if (!state.isDragging) return;
+        // Clear any existing throttle timeout
+        if (throttleRef.current) {
+            clearTimeout(throttleRef.current);
+        }
+        // Throttle the resize calls to prevent excessive updates
+        throttleRef.current = setTimeout(()=>{
+            const deltaX = e.clientX - state.startX;
+            const threshold = 120; // Pixels per column unit
+            const deltaColumns = Math.round(deltaX / threshold);
+            handleResize(deltaColumns);
+        }, 0);
+    }, [
+        state.isDragging,
+        state.startX,
+        handleResize
+    ]);
+    // Handle pointer up to end drag
+    const handlePointerUp = React__namespace.useCallback(()=>{
+        // Clear any pending throttle timeout
+        if (throttleRef.current) {
+            clearTimeout(throttleRef.current);
+            throttleRef.current = null;
+        }
+        // Save the layout
+        saveLayout();
+        // Reset last resize values and stop dragging
+        setState((prev)=>({
+                ...prev,
+                lastResizeValues: {
+                    leftWidth: 0,
+                    rightWidth: 0
+                },
+                currentResizeValues: {
+                    leftWidth: leftWidgetWidth,
+                    rightWidth: rightWidgetWidth
+                },
+                isDragging: false
+            }));
+    }, [
+        leftWidgetWidth,
+        rightWidgetWidth,
+        saveLayout
+    ]);
+    // Handle pointer down to start drag
+    const handlePointerDown = React__namespace.useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        setState((prev)=>({
+                ...prev,
+                isDragging: true,
+                startX: e.clientX,
+                startLeftWidth: leftWidgetWidth,
+                startRightWidth: rightWidgetWidth
+            }));
+    }, [
+        leftWidgetWidth,
+        rightWidgetWidth
+    ]);
+    // Set up drag event listeners
+    React__namespace.useEffect(()=>{
+        if (state.isDragging) {
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+            return ()=>{
+                document.removeEventListener('pointermove', handlePointerMove);
+                document.removeEventListener('pointerup', handlePointerUp);
+            };
+        }
+    }, [
+        state.isDragging,
+        handlePointerMove,
+        handlePointerUp
+    ]);
+    // Set up resize observer for position updates - watching widgets and grid container
+    React__namespace.useLayoutEffect(()=>{
+        const leftElement = widgetLayout.getWidgetElement(leftWidgetId);
+        const rightElement = widgetLayout.getWidgetElement(rightWidgetId);
+        const containerElement = widgetLayout.getWidgetGridContainer();
+        const updatePosition = ()=>{
+            const position = resizeHandlers.calculateResizeHandlePosition(leftElement, rightElement, containerElement);
+            const rowPosition = resizeHandlers.calculateRowBounds(leftElement, rightElement, containerElement);
+            setState((prev)=>({
+                    ...prev,
+                    position,
+                    rowPosition
+                }));
+        };
+        // Create ResizeObserver to watch widgets and grid container
+        const resizeObserver = new ResizeObserver(updatePosition);
+        // Observe all relevant elements
+        if (leftElement) resizeObserver.observe(leftElement);
+        if (rightElement) resizeObserver.observe(rightElement);
+        if (containerElement) resizeObserver.observe(containerElement);
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        leftWidgetId,
+        rightWidgetId
+    ]);
+    // Cleanup throttle timeout on unmount
+    React__namespace.useEffect(()=>{
+        return ()=>{
+            if (throttleRef.current) {
+                clearTimeout(throttleRef.current);
+            }
+        };
+    }, []);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(ResizeHandleContainer, {
+                onPointerDown: handlePointerDown,
+                style: {
+                    transform: `translate(${state.position.left}px, ${state.position.top}px)`,
+                    height: `${state.position.height}px`
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsx(ResizeHandleBar, {
+                    $isDragging: state.isDragging
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(ResizeIndicator, {
+                isVisible: state.isDragging,
+                position: state.position,
+                currentLeftWidth: state.currentResizeValues.leftWidth,
+                currentRightWidth: state.currentResizeValues.rightWidth,
+                rowPosition: state.rowPosition
+            })
+        ]
+    });
+};
+
+exports.WidgetResizeHandle = WidgetResizeHandle;
+//# sourceMappingURL=ResizeIndicator.js.map