diff --git a/package.json b/package.json index 652f817..325606f 100644 --- a/package.json +++ b/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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 23ecf94..c7f6b94 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,8 +2,8 @@ lockfileVersion: '6.0' dependencies: panzoom-core: - specifier: 1.3.3 - version: 1.3.3 + specifier: 1.4.0 + version: 1.4.0 devDependencies: '@ladle/react': @@ -4328,8 +4328,8 @@ packages: p-limit: 3.1.0 dev: true - /panzoom-core@1.3.3: - resolution: {integrity: sha512-Reg28T5vrcdhhtkOtlnleYQCWjw9nH/F/WxF67x3vi+V94Wo7VFF69egFGUy8PmOJ8wDziiePdeJGJvCSPFYxA==} + /panzoom-core@1.4.0: + resolution: {integrity: sha512-gXh9U1P2y6mCseFWtUDRlIpBOlx4tspXdxQQdZ0PHVvaG004EIUBj0sozY+2TJof9hSFPhLH+r+sHBml8iQL6g==} dev: false /parent-module@1.0.1: diff --git a/src/Element.tsx b/src/Element.tsx index b868a81..97b77a7 100644 --- a/src/Element.tsx +++ b/src/Element.tsx @@ -15,6 +15,7 @@ const Element: React.FC = ({ id, onAfterResize, onClick, + onContextMenu, onMouseUp, resizable, resizedMaxWidth, @@ -38,6 +39,7 @@ const Element: React.FC = ({ height, onAfterResize, onClick, + onContextMenu, onMouseUp, resizable, resizedMaxWidth, @@ -56,7 +58,7 @@ const Element: React.FC = ({ }, [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 = ({ id, onAfterResize, onClick, + onContextMenu, onMouseUp, resizable, resizedMaxWidth, diff --git a/types/index.d.ts b/types/index.d.ts index 2f74c8e..c177dbc 100644 --- a/types/index.d.ts +++ b/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; diff --git a/types/types.ts b/types/types.ts index 42c286b..991bb94 100644 --- a/types/types.ts +++ b/types/types.ts @@ -51,6 +51,12 @@ type OnContainerClick = ( } & Position ) => unknown; +type OnContextMenu = ( + click: { + e: MouseEvent; + } & Position +) => unknown; + export type Zoom = Ref; 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;