Merge pull request #165 from sasza2/feat/z-index-property-on-element

feat: z-index property on element

.changeset/healthy-comics-begin.md

@@ -0,0 +1,5 @@
+---
+"@sasza/react-panzoom": minor
+---
+
+feat: z-index property option on element

README.md

@@ -106,6 +106,7 @@ import PanZoom, { Element } from '@sasza/react-panzoom'
 | resizerWidth | number  | 15 | Width of resizer element |
 | x | number  | 0 | x position of element |
 | y | number  | 0 | y position of element |
+| zIndex | number | undefined | z-index of element |
 
 # Selecting
 

package.json

@@ -79,6 +79,6 @@
     "react": ">=16.14.0"
   },
   "dependencies": {
-    "panzoom-core": "1.8.2"
+    "panzoom-core": "1.9.0"
   }
 }

src/Element.tsx

@@ -26,6 +26,7 @@ const Element: React.FC<ElementProps> = ({
   width,
   x,
   y,
+  zIndex,
 }) => {
   const nodeRef = useRef<HTMLDivElement>();
   const elementRef = useRef<ElementApi>();
@@ -52,6 +53,7 @@ const Element: React.FC<ElementProps> = ({
     width,
     x,
     y,
+    zIndex,
   };
 
   useLayoutEffect(() => {
@@ -85,6 +87,7 @@ const Element: React.FC<ElementProps> = ({
     width,
     x,
     y,
+    zIndex,
   ]);
 
   return (

src/PanZoom.tsx

@@ -27,7 +27,7 @@ const PanZoom: React.FC<PanZoomProps & { apiRef?: Ref<PanZoomApi> }> = ({
       ...props,
       className: props.className || 'react-panzoom',
     });
-    panZoomRef.current.setOptions(props)
+    panZoomRef.current.setOptions(props);
     setInitialized(true);
     return panZoomRef.current.destroy;
   }, []);

types/types.ts

@@ -183,6 +183,7 @@ export type ElementOptions = {
   width?: number;
   x?: number;
   y?: number;
+  zIndex?: number;
 };
 
 export type ElementProps = React.PropsWithChildren<ElementOptions>