Merge pull request #133 from sasza2/develop

v1.11.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sasza/react-panzoom",
-  "version": "1.10.4",
+  "version": "1.11.0",
   "description": "React component for pan and zoom with possibility to moving, resizing and selecting elements inside",
   "main": "dist/main.umd.cjs",
   "module": "./dist/main.js",
@@ -67,6 +67,6 @@
     "react": ">=16.14.0"
   },
   "dependencies": {
-    "panzoom-core": "1.3.3"
+    "panzoom-core": "1.4.0"
   }
 }

src/Element.tsx

@@ -15,6 +15,7 @@ const Element: React.FC<ElementProps> = ({
   id,
   onAfterResize,
   onClick,
+  onContextMenu,
   onMouseUp,
   resizable,
   resizedMaxWidth,
@@ -38,6 +39,7 @@ const Element: React.FC<ElementProps> = ({
     height,
     onAfterResize,
     onClick,
+    onContextMenu,
     onMouseUp,
     resizable,
     resizedMaxWidth,
@@ -56,7 +58,7 @@ const Element: React.FC<ElementProps> = ({
   }, [initialized]);
 
   useDidUpdateEffect(() => {
-    if (!initialized || !elementRef.current) return
+    if (!initialized || !elementRef.current) return;
     elementRef.current.setOptions(options);
   }, [
     disabled,
@@ -68,6 +70,7 @@ const Element: React.FC<ElementProps> = ({
     id,
     onAfterResize,
     onClick,
+    onContextMenu,
     onMouseUp,
     resizable,
     resizedMaxWidth,

types/index.d.ts

@@ -1,6 +1,6 @@
 import { ElementProps, PanZoomPropsRef, PanZoomWithCoverPropsRef } from './types';
 
-export { API, PanZoomOptions } from './types';
+export { API, ElementOptions, PanZoomOptions } from './types';
 
 export default function PanZoom(props: PanZoomPropsRef): JSX.Element;
 

types/types.ts

@@ -51,6 +51,12 @@ type OnContainerClick = (
   } & Position
 ) => unknown;
 
+type OnContextMenu = (
+  click: {
+    e: MouseEvent;
+  } & Position
+) => unknown;
+
 export type Zoom = Ref<number>;
 
 export type PanZoomOptions = {
@@ -64,6 +70,7 @@ export type PanZoomOptions = {
   disabledUserSelect?: boolean;
   disabledZoom?: boolean;
   elementsAutoMoveAtEdge?: boolean;
+  onContextMenu?: OnContextMenu;
   onElementsChange?: OnElementsChange;
   onContainerChange?: OnContainerChange;
   onContainerClick?: OnContainerClick,
@@ -134,6 +141,14 @@ type ElementOnMouseUp = (
   } & Position
 ) => unknown;
 
+type ElementOnContextMenu = (
+  props: {
+    id: ElementId;
+    family?: string;
+    e: MouseEvent;
+  } & Position
+) => unknown;
+
 export type ElementOptions = {
   className?: string;
   disabled?: boolean;
@@ -144,6 +159,7 @@ export type ElementOptions = {
   id: ElementId;
   onAfterResize?: ElementOnAfterResize;
   onClick?: ElementOnClick;
+  onContextMenu?: ElementOnContextMenu;
   onMouseUp?: ElementOnMouseUp;
   resizable?: boolean;
   resizedMaxWidth?: number;