Fix nested selectors extending too high (#481)

* bug: Fixed elements being excluded when the component that matches an exclusion is actually above the zoom-pan-pinch element in the DOM

* chore: code style

Author: bigbadwofl

src/components/transform-component/transform-component.tsx

@@ -2,6 +2,7 @@
 import React, { useContext, useEffect, useRef } from "react";
 
 import { Context } from "../transform-wrapper/transform-wrapper";
+import { baseClasses } from "../../constants/state.constants";
 
 import styles from "./transform-component.module.css";
 
@@ -45,13 +46,13 @@ export const TransformComponent: React.FC<Props> = ({
     <div
       {...wrapperProps}
       ref={wrapperRef}
-      className={`react-transform-wrapper ${styles.wrapper} ${wrapperClass}`}
+      className={`${baseClasses.wrapperClass} ${styles.wrapper} ${wrapperClass}`}
       style={wrapperStyle}
     >
       <div
         {...contentProps}
         ref={contentRef}
-        className={`react-transform-component ${styles.content} ${contentClass}`}
+        className={`${baseClasses.contentClass} ${styles.content} ${contentClass}`}
         style={contentStyle}
       >
         {children}

src/constants/state.constants.ts

@@ -1,4 +1,4 @@
-import { LibrarySetup, ReactZoomPanPinchState } from "../models/context.model";
+import { LibrarySetup, ReactZoomPanPinchState, ReactZoomPanPinchBaseClasses } from "../models/context.model";
 
 export const initialState: ReactZoomPanPinchState = {
   previousScale: 1,
@@ -76,3 +76,8 @@ export const initialSetup: LibrarySetup = {
     equalToMove: true,
   },
 };
+
+export const baseClasses: ReactZoomPanPinchBaseClasses = {
+  wrapperClass: "react-transform-wrapper",
+  contentClass: "react-transform-component",
+};

src/models/context.model.ts

@@ -198,3 +198,8 @@ export type LibrarySetup = Pick<
       | "customTransform"
     >
   >;
+
+export type ReactZoomPanPinchBaseClasses = {
+  wrapperClass: string;
+  contentClass: string;
+};

src/utils/helpers.utils.ts

@@ -1,9 +1,13 @@
+import { baseClasses } from "../constants/state.constants";
+
+const matchPrefix = `.${baseClasses.wrapperClass}`;
+
 export const isExcludedNode = (
   node: HTMLElement,
   excluded: string[],
 ): boolean => {
-  return excluded.some((exclude) =>
-    node.matches(`${exclude}, .${exclude}, ${exclude} *, .${exclude} *`),
+  return excluded.some((exclude) => 
+    node.matches(`${matchPrefix} ${exclude}, ${matchPrefix} .${exclude}, ${matchPrefix} ${exclude} *, ${matchPrefix} .${exclude} *`),
   );
 };