feat: select multiple elements

sasza2 · Jan 16, 2024 · 82a1aca · 82a1aca
1 parent 5b38a01
commit 82a1aca
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-grid-panzoom",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React grid component for pan and zoom with possibility to moving and selecting elements inside",
   "keywords": [
     "react",
@@ -66,7 +66,7 @@
     "vitest": "0.34.6"
   },
   "dependencies": {
-    "@sasza/react-panzoom": "1.11.4"
+    "@sasza/react-panzoom": "1.12.0"
   },
   "peerDependencies": {
     "react": ">=16.14.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/Element.tsx b/src/Element.tsx
@@ -16,6 +16,7 @@ type ElementWrapperProps = {
   elementsNodes: Record<string | number, HTMLDivElement>,
   elementResizerWidth?: number,
   rowHeight: Pixels,
+  onStartResizing?: ElementProps['onStartResizing'],
   onAfterResize?: ElementProps['onAfterResize'],
   onClick?: ElementProps['onClick'],
   onContextMenu?: ElementProps['onContextMenu'],
@@ -38,6 +39,7 @@ const ElementWrapper: React.FC<ElementWrapperProps> = ({
   elementResizerWidth,
   fullHeight = true,
   rowHeight,
+  onStartResizing,
   onAfterResize,
   onClick,
   onContextMenu,
@@ -113,6 +115,7 @@ const ElementWrapper: React.FC<ElementWrapperProps> = ({
       family={element.family}
       x={x}
       y={y}
+      onStartResizing={onStartResizing}
       onAfterResize={onAfterResize}
       onClick={disabled ? undefined : onClick}
       onContextMenu={disabled ? undefined : onContextMenu}
@@ -129,6 +132,7 @@ const ElementWrapper: React.FC<ElementWrapperProps> = ({
         <div style={{ pointerEvents: 'none', height: fullHeight ? '100%' : undefined }}>
           <LinesContainer />
           {renderElement}
+          <div className="react-grid-panzoom-element-selection" />
         </div>
       </div>
     </Element>

diff --git a/src/Grid.tsx b/src/Grid.tsx
@@ -44,6 +44,7 @@ const Grid: React.FC<React.PropsWithChildren> = ({ children }) => {
     onContainerContextMenu,
     onContainerChange,
     onElementContextMenu,
+    onElementStartResizing,
     paddingLeft,
     panZoomRef,
     selectedElements,
@@ -68,6 +69,7 @@ const Grid: React.FC<React.PropsWithChildren> = ({ children }) => {
 
   const onAfterResize = useOnAfterResize();
   const onAfterResizeMemo = useMemoRef(onAfterResize);
+  const onElementStartResizingMemo = useMemoRef(onElementStartResizing);
 
   const onElementMouseUp = useOnElementMouseUp();
   const onElementMouseUpMemo = useMemoRef(onElementMouseUp);
@@ -154,6 +156,7 @@ const Grid: React.FC<React.PropsWithChildren> = ({ children }) => {
               onClick={onClickMemo}
               onContextMenu={onElementContextMenuMemo}
               onMouseUp={onElementMouseUpMemo}
+              onStartResizing={onElementStartResizingMemo}
               disabled={element.disabled}
               fullHeight={element.fullHeight}
               {...elementProps}

diff --git a/src/Styles.tsx b/src/Styles.tsx
@@ -6,32 +6,37 @@ const Styles = () => (
   <Style>
     {`
       @keyframes react-panzoom-element-animation {
-        0% { outline: solid 2px rgba(0, 0, 0, 0.05); }
-        50% { outline: solid 2px rgba(0, 0, 0, 0.15); }
-        100% { outline: solid 2px rgba(0, 0, 0, 0.05); }
+        0% { outline: solid 4px rgba(0, 0, 0, 0.05); }
+        50% { outline: solid 4px rgba(0, 0, 0, 0.15); }
+        100% { outline: solid 4px rgba(0, 0, 0, 0.05); }
       }
-      .react-panzoom--element-moving .react-panzoom-element:not(.react-panzoom-element--disabled) {
+      .react-grid-panzoom .react-panzoom__in {
+        overflow: visible !important;
+      }
+      .react-panzoom--element-moving .react-panzoom-element:not(.react-panzoom-element--disabled) .react-grid-panzoom-element-selection {
         outline-offset: -2px;
-        outline: solid 2px rgba(0, 0, 0, 0.1);
+        outline: solid 4px rgba(0, 0, 0, 0.1);
       }
       .react-panzoom--element-moving .react-panzoom-element-is-shadow {
         z-index: 1;
+      }
+      .react-panzoom--element-moving .react-panzoom-element-is-shadow .react-grid-panzoom-element-selection {
         outline: none;
       }
-      .react-grid-panzoom .react-panzoom-element:hover {
+      .react-grid-panzoom .react-panzoom-element:hover .react-grid-panzoom-element-selection {
         outline-offset: -2px;
         animation: react-panzoom-element-animation 1s infinite;
       }
-      .react-grid-panzoom .react-panzoom--element-moving .react-panzoom-element,
-      .react-grid-panzoom .react-panzoom--element-resizing .react-panzoom-element,
-      .react-grid-panzoom .react-panzoom--element-moving .react-panzoom-element:hover,
-      .react-grid-panzoom .react-panzoom--element-resizing .react-panzoom-element:hover {
+      .react-grid-panzoom .react-panzoom--element-moving .react-panzoom-element .react-grid-panzoom-element-selection,
+      .react-grid-panzoom .react-panzoom--element-resizing .react-panzoom-element .react-grid-panzoom-element-selection,
+      .react-grid-panzoom .react-panzoom--element-moving .react-panzoom-element:hover .react-grid-panzoom-element-selection,
+      .react-grid-panzoom .react-panzoom--element-resizing .react-panzoom-element:hover .react-grid-panzoom-element-selection {
         outline-offset: -1px;
-        outline: solid 1px rgba(0, 0, 0, 0.1);
+        outline: solid 2px rgba(0, 0, 0, 0.1);
         animation: none;
       }
-      .react-grid-panzoom .react-panzoom--element-moving .react-panzoom-element.react-panzoom-element--disabled,
-      .react-grid-panzoom .react-panzoom--element-resizing .react-panzoom-element.react-panzoom-element--disabled {
+      .react-grid-panzoom .react-panzoom--element-moving .react-panzoom-element.react-panzoom-element--disabled .react-grid-panzoom-element-selection,
+      .react-grid-panzoom .react-panzoom--element-resizing .react-panzoom-element.react-panzoom-element--disabled .react-grid-panzoom-element-selection {
         outline: none;
       }
       .react-grid-panzoom .react-panzoom-element {
@@ -53,6 +58,14 @@ const Styles = () => (
       .react-grid-panzoom-lines-container .react-grid-panzoom-line--left {
         text-align: right;
       }
+      .react-grid-panzoom-element-selection {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+      }
     `}
   </Style>
 );

diff --git a/src/hooks/useElementsChecksum.tsx b/src/hooks/useElementsChecksum.tsx
@@ -6,12 +6,12 @@ import useMeasureElementHeight from './useMeasureElementHeight';
 import useMemoRef from './useMemoRef';
 
 export const useElementsChecksum = () => {
-  const { elements } = useGrid();
+  const { elements, selectedElements } = useGrid();
   const measureElementHeight = useMeasureElementHeight();
   const measureElementHeightMemo = useMemoRef(measureElementHeight);
 
   return useMemo(() => {
     const sortedElements = sortElements(elements);
     return sortedElements.reduce((checksum, element) => `${checksum}--${element.id}-${measureElementHeightMemo(element)}`, '');
-  }, [elements]);
+  }, [elements, selectedElements]);
 };
diff --git a/src/hooks/useGrabElement.ts b/src/hooks/useGrabElement.ts
@@ -22,6 +22,8 @@ const useGrabElement = () => {
     const onPointerMove = (e: PointerEvent) => {
       if (e.buttons) return;
 
+      setSelectedElements([]);
+
       window.removeEventListener('pointermove', onPointerMove, true);
 
       target.style.transition = '0.3s all';

diff --git a/src/hooks/useOnAfterResize.ts b/src/hooks/useOnAfterResize.ts
@@ -26,6 +26,7 @@ const useOnAfterResize = () => {
     rows,
     rowHeight,
     setElements,
+    setSelectedElements,
   } = useGrid();
 
   const calculateCellPositionByPixels = useCalculateCellPositionByPixels();
@@ -34,6 +35,7 @@ const useOnAfterResize = () => {
   const onAfterResize: ElementProps['onAfterResize'] = useCallback(({ id }) => {
     const panZoomElementsRef = panZoomRef.current.getElements();
     const zoom = panZoomRef.current.getZoom();
+    const { node: elementNode } = panZoomElementsRef[id];
 
     const startingElements = elements.map((originalElement) => {
       if (originalElement.id !== id) return originalElement;
@@ -61,9 +63,8 @@ const useOnAfterResize = () => {
     const selectedElement = getElementById(startingElements, id);
 
     const updateElement = (element: GridElement) => {
-      const { node } = panZoomElementsRef[id];
-
-      node.current.style.width = isLengthAuto(colWidth)
+      elementNode.current.style.transition = '0.3s all';
+      elementNode.current.style.width = isLengthAuto(colWidth)
         ? undefined
         : `${colWidth * element.w + gapHorizontal * (element.w - 1)}px`;
 
@@ -72,6 +73,9 @@ const useOnAfterResize = () => {
       }));
     };
 
+    elementNode.current.style.transition = 'none';
+    elementsHeightRef.current = {};
+
     const nextElements = organizeGridElements({
       startingElements,
       cols,
@@ -88,7 +92,7 @@ const useOnAfterResize = () => {
 
     updateElement(selectedElement);
     setElements(nextElements, { type: 'user' });
-
+    setSelectedElements([]);
     elementsHeightRef.current = {};
   }, [cols, colWidth, elements, gapHorizontal, gapVertical, paddingLeft, rows, rowHeight]);
 

diff --git a/src/measureElementHeightInit.ts b/src/measureElementHeightInit.ts
@@ -21,7 +21,8 @@ const measureElementHeightInit = (
 
   const { height } = node.getBoundingClientRect();
 
-  return Math.ceil(height / rowHeight / zoom) || 1;
+  const originalHeight = Math.round((height / zoom) * 10) / 10; // px
+  return Math.ceil(originalHeight / rowHeight) || 1;
 };
 
 export default measureElementHeightInit;
diff --git a/types/types.ts b/types/types.ts
@@ -67,6 +67,7 @@ export type GridProps = PropsWithChildren<{
   gapVertical?: number,
   onContainerChange?: PanZoomOptions['onContainerChange'],
   onContainerContextMenu?: PanZoomOptions['onContextMenu'],
+  onElementStartResizing?: ElementOptions['onStartResizing'],
   onElementClick?: (element: GridElement) => void,
   onElementContextMenu?: ElementOptions['onContextMenu'],
   onElementsMeasureUpdate?: (elementsHeight: Record<number | string, number>) => void,