Merge pull request #2 from sasza2/fix/multiple-instance-of-grid-classes

fix: fix for css styles when having multiple instances of panzoom gri…
sasza2 · Feb 1, 2024 · 51f577e · 51f577e
2 parents e0f266a + f531427
commit 51f577e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/.changeset/five-clouds-visit.md b/.changeset/five-clouds-visit.md
@@ -0,0 +1,5 @@
+---
+"react-grid-panzoom": patch
+---
+
+fix for css styles when having multiple instances of panzoom grid in on screen (selecting elements in one grid was outlining elements in another)
diff --git a/src/Styles.tsx b/src/Styles.tsx
@@ -2,6 +2,10 @@ import React, { memo } from 'react';
 
 import Style from './Style';
 
+const ACTION_MOVING = '.react-panzoom--element-moving .react-panzoom--element-moving-in';
+const ACTION_RESIZING = '.react-panzoom--element-resizing .react-panzoom--element-resizing-in';
+const ELEMENT_NOT_DISABLED = '.react-panzoom-element:not(.react-panzoom-element--disabled)';
+
 const Styles = () => (
   <Style>
     {`
@@ -13,30 +17,31 @@ const Styles = () => (
       .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 {
+      ${ACTION_MOVING} ${ELEMENT_NOT_DISABLED} .react-grid-panzoom-element-selection,
+      ${ACTION_RESIZING} ${ELEMENT_NOT_DISABLED} .react-grid-panzoom-element-selection {
         outline-offset: -2px;
         outline: solid 4px rgba(0, 0, 0, 0.1);
       }
-      .react-panzoom--element-moving .react-panzoom-element-is-shadow {
+      ${ACTION_MOVING} .react-panzoom-element-is-shadow {
         z-index: 1;
       }
-      .react-panzoom--element-moving .react-panzoom-element-is-shadow .react-grid-panzoom-element-selection {
+      ${ACTION_MOVING} .react-panzoom-element-is-shadow .react-grid-panzoom-element-selection {
         outline: none;
       }
-      .react-grid-panzoom .react-panzoom-element:hover .react-grid-panzoom-element-selection {
+      .react-grid-panzoom ${ELEMENT_NOT_DISABLED}: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-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 {
+      .react-grid-panzoom .react-panzoom--element-moving-in .react-panzoom--element-moving .react-panzoom-element .react-grid-panzoom-element-selection,
+      .react-grid-panzoom .react-panzoom--element-resizing-in .react-panzoom--element-resizing .react-panzoom-element .react-grid-panzoom-element-selection,
+      .react-grid-panzoom .react-panzoom--element-moving-in .react-panzoom--element-moving ${ELEMENT_NOT_DISABLED}:hover .react-grid-panzoom-element-selection,
+      .react-grid-panzoom .react-panzoom--element-resizing-in .react-panzoom--element-resizing .${ELEMENT_NOT_DISABLED}:hover .react-grid-panzoom-element-selection {
         outline-offset: -1px;
         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-element-selection,
-      .react-grid-panzoom .react-panzoom--element-resizing .react-panzoom-element.react-panzoom-element--disabled .react-grid-panzoom-element-selection {
+      .react-grid-panzoom .react-panzoom--element-moving-in .react-panzoom--element-moving .react-panzoom-element.react-panzoom-element--disabled .react-grid-panzoom-element-selection,
+      .react-grid-panzoom .react-panzoom--element-resizing-in .react-panzoom--element-resizing .react-panzoom-element.react-panzoom-element--disabled .react-grid-panzoom-element-selection {
         outline: none;
       }
       .react-grid-panzoom .react-panzoom-element {

diff --git a/src/hooks/useGrabElement.ts b/src/hooks/useGrabElement.ts
@@ -6,11 +6,11 @@ import { useGrid } from './useGrid';
 
 const useGrabElement = () => {
   const {
-    currentElements, elementRef, elements, setSelectedElements,
+    currentElements, elementRef, elements, gridRef, setSelectedElements,
   } = useGrid();
 
   const grabElement = useCallback((id: string | number, family?: string) => {
-    const target: HTMLDivElement = document.querySelector(`.react-panzoom-element--id-${id}`);
+    const target: HTMLDivElement = gridRef.current?.querySelector(`.react-panzoom-element--id-${id}`);
     if (!target) return;
 
     currentElements.current = copyElements(elements);