cha0s/avocado
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: passive events (sorry Dan)

Browse Source
This commit is contained in:
cha0s 2022-04-08 13:35:49 -05:00
parent aed0ab97cd
commit 10a9b28099
1 changed files with 43 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/graphics/src/components/stage/index.jsx
View File

@ -21,54 +21,52 @@ const Stage = forwardRef(({
ticker,
}, fref) => {
const hostRef = useRef();
const normalizeDeltaAndPosition = (event) => {
let {
clientX,
clientY,
deltaX,
deltaY,
} = event;
/* eslint-disable no-param-reassign */
if (-1 !== ['touchstart', 'touchmove'].indexOf(event.type)) {
clientX = event.touches[0].clientX;
deltaX = event.touches[0].deltaX;
clientY = event.touches[0].clientY;
deltaY = event.touches[0].deltaY;
}
/* eslint-enable no-param-reassign */
const {left, top} = event.target.getBoundingClientRect();
Object.defineProperty(
event,
'delta',
{get: () => [deltaX, deltaY]},
);
Object.defineProperty(
event,
'position',
{get: () => [(clientX - left) / scale, (clientY - top) / scale]},
);
return event;
};
useImperativeHandle(fref, () => ({
events: () => K.merge(
[
'click',
'mousemove',
'mouseout',
'mousedown',
'mouseup',
'touchend',
'touchmove',
'touchstart',
'wheel',
]
.map((event) => (
K.fromEvents(
renderer.element,
event,
// Normalize touch events.
(event) => {
let {
clientX,
clientY,
deltaX,
deltaY,
} = event;
/* eslint-disable no-param-reassign */
if (-1 !== ['touchstart', 'touchmove'].indexOf(event.type)) {
clientX = event.touches[0].clientX;
deltaX = event.touches[0].deltaX;
clientY = event.touches[0].clientY;
deltaY = event.touches[0].deltaY;
[].concat(
['touchmove', 'touchstart', 'wheel']
.map((event) => (
K.stream((emitter) => {
const handler = (event) => {
emitter.emit(normalizeDeltaAndPosition(event));
};
renderer.element.addEventListener(event, handler, {passive: true});
return () => {
renderer.element.removeEventListener(event, handler);
}
/* eslint-enable no-param-reassign */
const {left, top} = event.target.getBoundingClientRect();
Object.defineProperty(
event,
'delta',
{get: () => [deltaX, deltaY]},
);
Object.defineProperty(
event,
'position',
{get: () => [(clientX - left) / scale, (clientY - top) / scale]},
);
return event;
},
)
)),
})
)),
['click', 'mousemove', 'mouseout', 'mousedown', 'mouseup', 'touchend']
.map((event) => K.fromEvents(renderer.element, event, normalizeDeltaAndPosition)),
),
),
}));
useEffect(() => {