feat: expose gesto preventRightClick and preventWheelClick props (#1040)

daybrush · Nov 11, 2023 · 9f4c9f4 · 9f4c9f4
1 parent a9bd966
commit 9f4c9f4
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts b/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts
@@ -1,4 +1,4 @@
 // auto
 // eslint-disable-next-line max-len
-export const ANGULAR_MOVEABLE_INPUTS: ["target","dragTargetSelf","dragTarget","dragContainer","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","dragFocusedInput","transformOrigin","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","isDisplayGridGuidelines","snapDigit","snapThreshold","snapRenderThreshold","snapGridAll","snapRotationThreshold","snapRotationDegrees","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","hideThrottleDragRotateLine","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","displayAroundControls","keepRatio","resizeFormat","keepRatioFinally","edge","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","padding","origin","svgOrigin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","useDefaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"] = ["target","dragTargetSelf","dragTarget","dragContainer","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","dragFocusedInput","transformOrigin","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","isDisplayGridGuidelines","snapDigit","snapThreshold","snapRenderThreshold","snapGridAll","snapRotationThreshold","snapRotationDegrees","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","hideThrottleDragRotateLine","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","displayAroundControls","keepRatio","resizeFormat","keepRatioFinally","edge","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","padding","origin","svgOrigin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","useDefaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"];
+export const ANGULAR_MOVEABLE_INPUTS: ["target","dragTargetSelf","dragTarget","dragContainer","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","dragFocusedInput","transformOrigin","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","controlPadding","preventDefault","preventRightClick","preventWheelClick","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","isDisplayGridGuidelines","snapDigit","snapThreshold","snapRenderThreshold","snapGridAll","snapRotationThreshold","snapRotationDegrees","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","hideThrottleDragRotateLine","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","displayAroundControls","keepRatio","resizeFormat","keepRatioFinally","edge","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","padding","origin","svgOrigin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","useDefaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"] = ["target","dragTargetSelf","dragTarget","dragContainer","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","dragFocusedInput","transformOrigin","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","controlPadding","preventDefault","preventRightClick","preventWheelClick","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","isDisplayGridGuidelines","snapDigit","snapThreshold","snapRenderThreshold","snapGridAll","snapRotationThreshold","snapRotationDegrees","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","hideThrottleDragRotateLine","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","displayAroundControls","keepRatio","resizeFormat","keepRatioFinally","edge","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","padding","origin","svgOrigin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","useDefaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"];
 export const ANGULAR_MOVEABLE_OUTPUTS: ["beforeRenderStart","beforeRender","beforeRenderEnd","beforeRenderGroupStart","beforeRenderGroup","beforeRenderGroupEnd","changeTargets","snap","bound","pinchStart","pinch","pinchEnd","pinchGroupStart","pinchGroup","pinchGroupEnd","dragStart","drag","dragEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeStart","beforeResize","resize","resizeEnd","resizeGroupStart","beforeResizeGroup","resizeGroup","resizeGroupEnd","scaleStart","beforeScale","scale","scaleEnd","scaleGroupStart","beforeScaleGroup","scaleGroup","scaleGroupEnd","warpStart","warp","warpEnd","rotateStart","beforeRotate","rotate","rotateEnd","rotateGroupStart","beforeRotateGroup","rotateGroup","rotateGroupEnd","scroll","scrollGroup","dragOriginStart","dragOrigin","dragOriginEnd","clipStart","clip","clipEnd","roundStart","round","roundEnd","roundGroupStart","roundGroup","roundGroupEnd","click","clickGroup","renderStart","render","renderEnd","renderGroupStart","renderGroup","renderGroupEnd"] = ["beforeRenderStart","beforeRender","beforeRenderEnd","beforeRenderGroupStart","beforeRenderGroup","beforeRenderGroupEnd","changeTargets","snap","bound","pinchStart","pinch","pinchEnd","pinchGroupStart","pinchGroup","pinchGroupEnd","dragStart","drag","dragEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeStart","beforeResize","resize","resizeEnd","resizeGroupStart","beforeResizeGroup","resizeGroup","resizeGroupEnd","scaleStart","beforeScale","scale","scaleEnd","scaleGroupStart","beforeScaleGroup","scaleGroup","scaleGroupEnd","warpStart","warp","warpEnd","rotateStart","beforeRotate","rotate","rotateEnd","rotateGroupStart","beforeRotateGroup","rotateGroup","rotateGroupEnd","scroll","scrollGroup","dragOriginStart","dragOrigin","dragOriginEnd","clipStart","clip","clipEnd","roundStart","round","roundEnd","roundGroupStart","roundGroup","roundGroupEnd","click","clickGroup","renderStart","render","renderEnd","renderGroupStart","renderGroup","renderGroupEnd"];
diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx
@@ -63,6 +63,8 @@ export default class MoveableManager<T = {}>
         useResizeObserver: false,
         useMutationObserver: false,
         preventDefault: true,
+        preventRightClick: true,
+        preventWheelClick: true,
         linePadding: 0,
         controlPadding: 0,
         ables: [],

diff --git a/packages/react-moveable/src/ables/Default.ts b/packages/react-moveable/src/ables/Default.ts
@@ -34,6 +34,8 @@ export default {
         "linePadding",
         "controlPadding",
         "preventDefault",
+        "preventRightClick",
+        "preventWheelClick",
         "requestStyles",
     ] as const,
     events: [

diff --git a/packages/react-moveable/src/gesto/getAbleGesto.ts b/packages/react-moveable/src/gesto/getAbleGesto.ts
@@ -263,14 +263,16 @@ export function getAbleGesto(
         checkInput,
         dragFocusedInput,
         preventDefault = true,
+        preventRightClick = true,
+        preventWheelClick = true,
         dragContainer: dragContaienrOption,
     } = moveable.props;
     const dragContainer = getRefTarget(dragContaienrOption, true);
 
     const options: GestoOptions = {
         preventDefault,
-        preventRightClick: true,
-        preventWheelClick: true,
+        preventRightClick,
+        preventWheelClick,
         container: dragContainer || getWindow(moveable.getControlBoxElement()),
         pinchThreshold,
         pinchOutside,

diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
@@ -181,6 +181,16 @@ export interface DefaultOptions {
      * @default true
      */
     preventDefault?: boolean;
+    /**
+     * Whether to prevent dragging using the right mouse button
+     * @default true
+     */
+    preventRightClick?: boolean;
+    /**
+     * Whether to prevent dragging using the wheel (middle) mouse button
+     * @default true
+     */
+    preventWheelClick?: boolean;
     /**
      * Prevent click event on drag. (mousemove, touchmove)
      * @default true