From 9f4c9f452470026ecea3f7a0b1aff91c22444868 Mon Sep 17 00:00:00 2001 From: seyys <115355216+seyys@users.noreply.github.com> Date: Sat, 11 Nov 2023 21:08:11 +1100 Subject: [PATCH] feat: expose gesto preventRightClick and preventWheelClick props (#1040) --- .../ngx-moveable/projects/ngx-moveable/src/consts.ts | 2 +- packages/react-moveable/src/MoveableManager.tsx | 2 ++ packages/react-moveable/src/ables/Default.ts | 2 ++ packages/react-moveable/src/gesto/getAbleGesto.ts | 6 ++++-- packages/react-moveable/src/types.ts | 10 ++++++++++ 5 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts b/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts index bed3eab2e..1f49589c1 100644 --- 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 index b9ca67457..519913efd 100644 --- a/packages/react-moveable/src/MoveableManager.tsx +++ b/packages/react-moveable/src/MoveableManager.tsx @@ -63,6 +63,8 @@ export default class MoveableManager 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 index 1c14a3994..232436de1 100644 --- 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 index 44eca301a..f763a7844 100644 --- 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 index 240ad8eee..3c7cd7307 100644 --- 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