Skip to content

Commit

Permalink
Make sure onWheel do not scroll the page
Browse files Browse the repository at this point in the history
  • Loading branch information
@vallsv
vallsv committed Jul 15, 2021
1 parent b825150 commit fd61598
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 31 deletions.
47 changes: 33 additions & 14 deletions lib/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,9 @@ var useUpdate = (function (_ref3) {
angleRange = _ref3$angleRange === void 0 ? 360 : _ref3$angleRange,
size = _ref3.size,
steps = _ref3.steps,
onChange = _ref3.onChange;
onChange = _ref3.onChange,
readOnly = _ref3.readOnly,
useMouseWheel = _ref3.useMouseWheel;
var svg = React.useRef();
var container = React.useRef();

Expand All @@ -347,6 +349,23 @@ var useUpdate = (function (_ref3) {
isActive = _useReducer2$.isActive,
dispatch = _useReducer2[1];

if (!readOnly) {
React.useEffect(function () {
var div = container.current;
var onWheel = useMouseWheel ? onScroll(dispatch) : null;

if (onWheel) {
div.addEventListener("wheel", onWheel);
}

return function () {
if (onWheel) {
div.removeEventListener("wheel", onWheel);
}
};
}, [useMouseWheel]);
}

React.useEffect(handleEventListener({
dispatch: dispatch,
isActive: isActive
Expand All @@ -358,8 +377,7 @@ var useUpdate = (function (_ref3) {
value: value,
angle: angle,
onStart: onMouseMoveStart(dispatch),
onKeyDown: onKeyDown(dispatch),
onScroll: onScroll(dispatch)
onKeyDown: onKeyDown(dispatch)
};
});

Expand All @@ -384,13 +402,13 @@ var calcPath = function calcPath(_ref) {
var angle = angleRange * percentage;
var startAngle = angleOffset - 90;
var innerRadius = outerRadius - arcWidth;
var startAngleDegree = degTorad(startAngle);
var endAngleDegree = degTorad(startAngle + angle);
var startAngleRad = degTorad(startAngle);
var endAngleRad = degTorad(startAngle + angle);
var largeArcFlag = angle < 180 ? 0 : 1;
var p1 = pointOnCircle(center, outerRadius, endAngleDegree);
var p2 = pointOnCircle(center, outerRadius, startAngleDegree);
var p3 = pointOnCircle(center, innerRadius, startAngleDegree);
var p4 = pointOnCircle(center, innerRadius, endAngleDegree);
var p1 = pointOnCircle(center, outerRadius, endAngleRad);
var p2 = pointOnCircle(center, outerRadius, startAngleRad);
var p3 = pointOnCircle(center, innerRadius, startAngleRad);
var p4 = pointOnCircle(center, innerRadius, endAngleRad);
return "M".concat(p1.x, ",").concat(p1.y, " A").concat(outerRadius, ",").concat(outerRadius, " 0 ").concat(largeArcFlag, " 0 ").concat(p2.x, ",").concat(p2.y, "L").concat(p3.x, ",").concat(p3.y, " A").concat(innerRadius, ",").concat(innerRadius, " 0 ").concat(largeArcFlag, " 1 ").concat(p4.x, ",").concat(p4.y, " L").concat(p1.x, ",").concat(p1.y);
};

Expand Down Expand Up @@ -428,14 +446,15 @@ var Pointer = function Pointer(_ref) {
color = _ref.color,
className = _ref.className;
return React__default.createElement("g", {
transform: "\n rotate(".concat(angleOffset + angleRange * percentage, " ").concat(center, " ").concat(center, ")\n translate( ").concat(center - width / 2, " ").concat(center - radius - height, ")\n ")
transform: "\n rotate(".concat(angleOffset + angleRange * percentage, " ").concat(center, " ").concat(center, ")\n translate( ").concat(center, " ").concat(center - radius - height, ")\n ")
}, children && React__default.Children.map(children, function (child) {
return React__default.cloneElement(child, {
width: width,
height: height,
percentage: percentage
});
}), type === 'rect' && React__default.createElement("rect", {
x: -width * 0.5,
width: width,
height: height,
fill: color,
Expand Down Expand Up @@ -643,15 +662,16 @@ var Knob = function Knob(_ref2) {
angleRange: angleRange,
size: size,
steps: stepsToSnapTo(steps, snap),
onChange: onChange
onChange: onChange,
useMouseWheel: useMouseWheel,
readOnly: readOnly
}),
percentage = _useUpdate.percentage,
value = _useUpdate.value,
onStart = _useUpdate.onStart,
svg = _useUpdate.svg,
container = _useUpdate.container,
onKeyDown = _useUpdate.onKeyDown,
onScroll = _useUpdate.onScroll;
onKeyDown = _useUpdate.onKeyDown;

var onMouseDown2 = function onMouseDown2(e) {
onMouseDown(e);
Expand All @@ -678,7 +698,6 @@ var Knob = function Knob(_ref2) {
"aria-valuetext": ariaValueText,
"aria-labelledby": ariaLabelledBy,
onKeyDown: readOnly ? null : onKeyDown,
onWheel: readOnly ? null : useMouseWheel ? onScroll : null,
className: className
}, React__default.createElement("svg", {
onMouseDown: readOnly ? null : onMouseDown2,
Expand Down
47 changes: 33 additions & 14 deletions side/src/lib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,9 @@ var useUpdate = (function (_ref3) {
angleRange = _ref3$angleRange === void 0 ? 360 : _ref3$angleRange,
size = _ref3.size,
steps = _ref3.steps,
onChange = _ref3.onChange;
onChange = _ref3.onChange,
readOnly = _ref3.readOnly,
useMouseWheel = _ref3.useMouseWheel;
var svg = React.useRef();
var container = React.useRef();

Expand All @@ -347,6 +349,23 @@ var useUpdate = (function (_ref3) {
isActive = _useReducer2$.isActive,
dispatch = _useReducer2[1];

if (!readOnly) {
React.useEffect(function () {
var div = container.current;
var onWheel = useMouseWheel ? onScroll(dispatch) : null;

if (onWheel) {
div.addEventListener("wheel", onWheel);
}

return function () {
if (onWheel) {
div.removeEventListener("wheel", onWheel);
}
};
}, [useMouseWheel]);
}

React.useEffect(handleEventListener({
dispatch: dispatch,
isActive: isActive
Expand All @@ -358,8 +377,7 @@ var useUpdate = (function (_ref3) {
value: value,
angle: angle,
onStart: onMouseMoveStart(dispatch),
onKeyDown: onKeyDown(dispatch),
onScroll: onScroll(dispatch)
onKeyDown: onKeyDown(dispatch)
};
});

Expand All @@ -384,13 +402,13 @@ var calcPath = function calcPath(_ref) {
var angle = angleRange * percentage;
var startAngle = angleOffset - 90;
var innerRadius = outerRadius - arcWidth;
var startAngleDegree = degTorad(startAngle);
var endAngleDegree = degTorad(startAngle + angle);
var startAngleRad = degTorad(startAngle);
var endAngleRad = degTorad(startAngle + angle);
var largeArcFlag = angle < 180 ? 0 : 1;
var p1 = pointOnCircle(center, outerRadius, endAngleDegree);
var p2 = pointOnCircle(center, outerRadius, startAngleDegree);
var p3 = pointOnCircle(center, innerRadius, startAngleDegree);
var p4 = pointOnCircle(center, innerRadius, endAngleDegree);
var p1 = pointOnCircle(center, outerRadius, endAngleRad);
var p2 = pointOnCircle(center, outerRadius, startAngleRad);
var p3 = pointOnCircle(center, innerRadius, startAngleRad);
var p4 = pointOnCircle(center, innerRadius, endAngleRad);
return "M".concat(p1.x, ",").concat(p1.y, " A").concat(outerRadius, ",").concat(outerRadius, " 0 ").concat(largeArcFlag, " 0 ").concat(p2.x, ",").concat(p2.y, "L").concat(p3.x, ",").concat(p3.y, " A").concat(innerRadius, ",").concat(innerRadius, " 0 ").concat(largeArcFlag, " 1 ").concat(p4.x, ",").concat(p4.y, " L").concat(p1.x, ",").concat(p1.y);
};

Expand Down Expand Up @@ -428,14 +446,15 @@ var Pointer = function Pointer(_ref) {
color = _ref.color,
className = _ref.className;
return React__default.createElement("g", {
transform: "\n rotate(".concat(angleOffset + angleRange * percentage, " ").concat(center, " ").concat(center, ")\n translate( ").concat(center - width / 2, " ").concat(center - radius - height, ")\n ")
transform: "\n rotate(".concat(angleOffset + angleRange * percentage, " ").concat(center, " ").concat(center, ")\n translate( ").concat(center, " ").concat(center - radius - height, ")\n ")
}, children && React__default.Children.map(children, function (child) {
return React__default.cloneElement(child, {
width: width,
height: height,
percentage: percentage
});
}), type === 'rect' && React__default.createElement("rect", {
x: -width * 0.5,
width: width,
height: height,
fill: color,
Expand Down Expand Up @@ -643,15 +662,16 @@ var Knob = function Knob(_ref2) {
angleRange: angleRange,
size: size,
steps: stepsToSnapTo(steps, snap),
onChange: onChange
onChange: onChange,
useMouseWheel: useMouseWheel,
readOnly: readOnly
}),
percentage = _useUpdate.percentage,
value = _useUpdate.value,
onStart = _useUpdate.onStart,
svg = _useUpdate.svg,
container = _useUpdate.container,
onKeyDown = _useUpdate.onKeyDown,
onScroll = _useUpdate.onScroll;
onKeyDown = _useUpdate.onKeyDown;

var onMouseDown2 = function onMouseDown2(e) {
onMouseDown(e);
Expand All @@ -678,7 +698,6 @@ var Knob = function Knob(_ref2) {
"aria-valuetext": ariaValueText,
"aria-labelledby": ariaLabelledBy,
onKeyDown: readOnly ? null : onKeyDown,
onWheel: readOnly ? null : useMouseWheel ? onScroll : null,
className: className
}, React__default.createElement("svg", {
onMouseDown: readOnly ? null : onMouseDown2,
Expand Down
4 changes: 2 additions & 2 deletions src/Knob.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export const Knob = ({
svg,
container,
onKeyDown,
onScroll,
} = useUpdate({
min,
max,
Expand All @@ -49,6 +48,8 @@ export const Knob = ({
size,
steps: stepsToSnapTo(steps, snap),
onChange,
useMouseWheel,
readOnly,
})

const onMouseDown2 = e => {
Expand All @@ -73,7 +74,6 @@ export const Knob = ({
aria-valuetext={ariaValueText}
aria-labelledby={ariaLabelledBy}
onKeyDown={readOnly ? null : onKeyDown}
onWheel={readOnly ? null : (useMouseWheel ? onScroll : null)}
className={className}
>
<svg onMouseDown={readOnly ? null : onMouseDown2} onMouseUp={readOnly ? null : onMouseUp2} width={size} height={size} ref={svg}>
Expand Down
18 changes: 17 additions & 1 deletion src/useUpdate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ export default ({
size,
steps,
onChange,
readOnly,
useMouseWheel,
}) => {
const svg = useRef()
const container = useRef()
Expand All @@ -89,6 +91,21 @@ export default ({
}
)

if (!readOnly) {
useEffect(() => {
const div = container.current
const onWheel = useMouseWheel ? onScroll(dispatch) : null
if (onWheel) {
div.addEventListener("wheel", onWheel)
}
return () => {
if (onWheel) {
div.removeEventListener("wheel", onWheel)
}
}
}, [useMouseWheel])
}

useEffect(handleEventListener({ dispatch, isActive }), [isActive])
return {
svg,
Expand All @@ -98,6 +115,5 @@ export default ({
angle,
onStart: onMouseMoveStart(dispatch),
onKeyDown: onKeyDown(dispatch),
onScroll: onScroll(dispatch),
}
}

0 comments on commit fd61598

Please sign in to comment.