Skip to content

attempt on fix pole camera look at jump #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
unkcpz merged 5 commits into from
Apr 6, 2026
Merged

attempt on fix pole camera look at jump #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0fd2fb8
direct mapping arcball control
unkcpz Mar 8, 2026
ac4d5a1
pan decoupled
unkcpz Mar 10, 2026
a12c028
zoom decouple
unkcpz Mar 10, 2026
7679f41
keyboard camera control decouple
unkcpz Mar 10, 2026
4245426
touch support
unkcpz Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
317 changes: 115 additions & 202 deletions vizmat-app/mobile-gesture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,229 +40,142 @@
};
};

const emitIf = (condition, payload) => {
if (!condition) return false;
emitTouchGesture(payload);
return true;
};

if (canvas) {
canvas.style.touchAction = "none";

if (window.PointerEvent) {
const pointerState = new Map();

const removePointer = (event) => {
if (event.pointerType !== "touch") return;
if (!event.currentTarget || !pointerState.has(event.pointerId)) return;
pointerState.delete(event.pointerId);
const pointerState = new Map();

if (pointerState.size === 0) {
clearTouchState();
return;
}
const removePointer = (event) => {
if (event.pointerType !== "touch") return;
if (!event.currentTarget || !pointerState.has(event.pointerId)) return;
pointerState.delete(event.pointerId);

if (pointerState.size === 1) {
touchPanState.one = [...pointerState.values()][0];
touchPanState.two = {
active: false,
midpoint: null,
distance: null,
};
return;
}
if (pointerState.size === 0) {
clearTouchState();
return;
}

const points = [...pointerState.values()];
if (pointerState.size === 1) {
touchPanState.one = [...pointerState.values()][0];
touchPanState.two = {
active: true,
midpoint: getMidpoint(points[0], points[1]),
distance: getDistance(points[0], points[1]),
active: false,
midpoint: null,
distance: null,
};
return;
}

const points = [...pointerState.values()];
touchPanState.two = {
active: true,
midpoint: getMidpoint(points[0], points[1]),
distance: getDistance(points[0], points[1]),
};
};

const updateSinglePointer = (point) => {
if (!touchPanState.one) {
touchPanState.one = point;
return;
}

const dx = point.x - touchPanState.one.x;
const dy = point.y - touchPanState.one.y;
const emitted = emitIf(dx !== 0 || dy !== 0, {
gesture: "Rotate",
dx,
dy,
scale_delta: 0,
});
if (emitted) {
touchPanState.one = point;
}
};

const updateTwoPointer = (a, b) => {
if (!touchPanState.two.active) {
touchPanState.two = {
active: true,
midpoint: getMidpoint(a, b),
distance: getDistance(a, b),
};
return;
}

const midpoint = getMidpoint(a, b);
const distance = getDistance(a, b);
const panDx = midpoint.x - touchPanState.two.midpoint.x;
const panDy = midpoint.y - touchPanState.two.midpoint.y;
const scaleDelta = touchPanState.two.distance > 0
? (distance - touchPanState.two.distance) / touchPanState.two.distance
: 0;

const emitted = emitIf(panDx !== 0 || panDy !== 0 || scaleDelta !== 0, {
const updateTwoPointer = (a, b) => {
if (!touchPanState.two.active) {
touchPanState.two = {
active: true,
midpoint: getMidpoint(a, b),
distance: getDistance(a, b),
};
return;
}

const midpoint = getMidpoint(a, b);
const distance = getDistance(a, b);
const panDx = midpoint.x - touchPanState.two.midpoint.x;
const panDy = midpoint.y - touchPanState.two.midpoint.y;
const scaleDelta = touchPanState.two.distance > 0
? (distance - touchPanState.two.distance) / touchPanState.two.distance
: 0;

if (panDx !== 0 || panDy !== 0 || scaleDelta !== 0) {
emitTouchGesture({
gesture: "TwoFinger",
dx: panDx,
dy: panDy,
x: panDx,
y: panDy,
scale_delta: scaleDelta,
});
touchPanState.two.midpoint = midpoint;
touchPanState.two.distance = distance;
}
};

if (emitted) {
touchPanState.two.midpoint = midpoint;
touchPanState.two.distance = distance;
}
};

canvas.addEventListener(
"pointerdown",
(event) => {
if (event.pointerType !== "touch") return;
if (!event.target) return;
const point = toVec(event);
pointerState.set(event.pointerId, point);
event.currentTarget.setPointerCapture(event.pointerId);
touchPanState.one = point;
touchPanState.two = {
active: false,
midpoint: null,
distance: null,
};
event.preventDefault();
},
{ passive: false },
);

canvas.addEventListener(
"pointermove",
(event) => {
if (event.pointerType !== "touch") return;
if (!pointerState.has(event.pointerId)) return;

const point = toVec(event);
pointerState.set(event.pointerId, point);

if (pointerState.size === 1) {
updateSinglePointer(point);
} else if (pointerState.size >= 2) {
const points = [...pointerState.values()];
const a = points[0];
const b = points[1];
updateTwoPointer(a, b);
}

event.preventDefault();
},
{ passive: false },
);
canvas.addEventListener(
"pointerdown",
(event) => {
if (event.pointerType !== "touch") return;
if (!event.target) return;
const point = toVec(event);
pointerState.set(event.pointerId, point);
event.currentTarget.setPointerCapture(event.pointerId);
const x = point.x;
const y = point.y;
emitTouchGesture({
gesture: "OneFingerDown",
x,
y,
scale_delta: 0,
});
touchPanState.two = {
active: false,
midpoint: null,
distance: null,
};
event.preventDefault();
},
{ passive: false },
);

canvas.addEventListener(
"pointerup",
removePointer,
{ passive: false },
);
canvas.addEventListener("pointercancel", removePointer, {
passive: false,
});
canvas.addEventListener("pointerleave", removePointer, {
passive: false,
});
canvas.addEventListener("pointerout", removePointer, { passive: false });
canvas.addEventListener("pointerlostcapture", removePointer);
} else {
canvas.addEventListener(
"touchstart",
(event) => {
if (!event.target) return;
if (event.touches.length === 1) {
touchPanState.one = toVec(event.touches[0]);
touchPanState.two.active = false;
} else if (event.touches.length === 2) {
const a = toVec(event.touches[0]);
const b = toVec(event.touches[1]);
touchPanState.two = {
active: true,
midpoint: getMidpoint(a, b),
distance: getDistance(a, b),
};
touchPanState.one = null;
}
event.preventDefault();
},
{ passive: false },
);
canvas.addEventListener(
"pointermove",
(event) => {
if (event.pointerType !== "touch") return;
if (!pointerState.has(event.pointerId)) return;

canvas.addEventListener(
"touchmove",
(event) => {
if (event.touches.length === 1 && touchPanState.one) {
const current = toVec(event.touches[0]);
const dx = current.x - touchPanState.one.x;
const dy = current.y - touchPanState.one.y;
const point = toVec(event);
pointerState.set(event.pointerId, point);

if (dx !== 0 || dy !== 0) {
emitTouchGesture({
gesture: "Rotate",
dx,
dy,
scale_delta: 0,
});
touchPanState.one = current;
}
event.preventDefault();
if (pointerState.size === 1) {
if (!touchPanState.one) {
touchPanState.one = point;
return;
}

if (event.touches.length === 2 && touchPanState.two.active) {
const a = toVec(event.touches[0]);
const b = toVec(event.touches[1]);
const midpoint = getMidpoint(a, b);
const distance = getDistance(a, b);

const panDx = midpoint.x - touchPanState.two.midpoint.x;
const panDy = midpoint.y - touchPanState.two.midpoint.y;
const scaleDelta = touchPanState.two.distance > 0
? (distance - touchPanState.two.distance) /
touchPanState.two.distance
: 0;

if (panDx !== 0 || panDy !== 0 || scaleDelta !== 0) {
emitTouchGesture({
gesture: "TwoFinger",
dx: panDx,
dy: panDy,
scale_delta: scaleDelta,
});
touchPanState.two.midpoint = midpoint;
touchPanState.two.distance = distance;
}
const x = point.x;
const y = point.y;
emitTouchGesture({
gesture: "OneFingerMove",
x,
y,
scale_delta: 0,
});
} else if (pointerState.size >= 2) {
const points = [...pointerState.values()];
const a = points[0];
const b = points[1];
updateTwoPointer(a, b);
}

event.preventDefault();
}
},
{ passive: false },
);
}
event.preventDefault();
},
{ passive: false },
);

const clearTouch = () => clearTouchState();
canvas.addEventListener("touchend", clearTouch, { passive: false });
canvas.addEventListener("touchcancel", clearTouch, { passive: false });
canvas.addEventListener("touchleave", clearTouch, { passive: false });
canvas.addEventListener(
"pointerup",
removePointer,
{ passive: false },
);
canvas.addEventListener("pointercancel", removePointer, {
passive: false,
});
canvas.addEventListener("pointerleave", removePointer, {
passive: false,
});
canvas.addEventListener("pointerout", removePointer, { passive: false });
canvas.addEventListener("pointerlostcapture", removePointer);
}
})();
Loading
Loading