mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-07-25 09:45:04 +02:00
Code Releases Activity

wip

Browse Source
This commit is contained in:
syuilo
2026-07-09 17:42:34 +09:00
parent 564ed21b74
commit b7ca70bd1e
2 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
packages/frontend/src/components/MkImageGallery.item.vue
View File

@@ -124,6 +124,21 @@ function onWheel(event: WheelEvent) {
zoomInTo(event.clientX, event.clientY, scale);
}
function onZoomGesture(ev: { delta: number; centerX: number; centerY: number }) {
zoomInTo(ev.centerX, ev.centerY, 1 + ev.delta / 200);
}
function onZoomGestureEnd() {
// TODO: animation
if (size.value.width < defaultSize.width || size.value.height < defaultSize.height) {
size.value.width = defaultSize.width;
size.value.height = defaultSize.height;
translation.value.x = defaultTranslation.x;
translation.value.y = defaultTranslation.y;
isZooming.value = false;
}
}
// ズーム中、ドラッグされたら画像を移動する
let isDragging = false;
let lastX = 0;
@@ -150,7 +165,7 @@ function onPointermove(ev: PointerEvent) {
const distance = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
if (prevTwoTouchPointsDistance > 0) {
const delta = distance - prevTwoTouchPointsDistance;
zoomInTo((a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2, 1 + delta / 200);
onZoomGesture({ delta, centerX: (a.clientX + b.clientX) / 2, centerY: (a.clientY + b.clientY) / 2 });
}
prevTwoTouchPointsDistance = distance;
return;
@@ -175,30 +190,6 @@ function onPointermove(ev: PointerEvent) {
return false;
}
let handle: ReturnType<typeof window['requestAnimationFrame']> | null = null;
let latestInertiaTimeStamp = 0;
function updateInertia(timeStamp: number) {
handle = window.requestAnimationFrame(updateInertia);
const timeDelta = timeStamp - latestInertiaTimeStamp;
latestInertiaTimeStamp = timeStamp;
if (isDragging) return;
if (Math.abs(pointerVec.x) < 0.5 && Math.abs(pointerVec.y) < 0.5) return;
translation.value.x += pointerVec.x;
translation.value.y += pointerVec.y;
pointerVec.x *= 0.9 ** (timeDelta / 16.67);
pointerVec.y *= 0.9 ** (timeDelta / 16.67);
}
onMounted(() => {
handle = window.requestAnimationFrame(updateInertia);
});
onBeforeUnmount(() => {
if (handle != null) window.cancelAnimationFrame(handle);
});
function onPointerdown(ev: PointerEvent) {
pointerEventCache.set(ev.pointerId, ev);
imageEl.value.setPointerCapture(ev.pointerId);
@@ -216,6 +207,7 @@ function onPointerup(ev: PointerEvent) {
imageEl.value.releasePointerCapture(ev.pointerId);
prevTwoTouchPointsDistance = 0;
isDragging = false;
onZoomGestureEnd();
}
const doubleTapDetector = makeDoubleTapDetector((ev) => {
@@ -245,6 +237,31 @@ function onTouchmove(ev: TouchEvent) {
ev.stopPropagation();
doubleTapDetector.onTouchmove(ev);
}
let rafHandle: ReturnType<typeof window['requestAnimationFrame']> | null = null;
let latestInertiaTimeStamp = 0;
function updateInertia(timeStamp: number) {
rafHandle = window.requestAnimationFrame(updateInertia);
const timeDelta = timeStamp - latestInertiaTimeStamp;
latestInertiaTimeStamp = timeStamp;
if (isDragging) return;
if (Math.abs(pointerVec.x) < 0.5 && Math.abs(pointerVec.y) < 0.5) return;
translation.value.x += pointerVec.x;
translation.value.y += pointerVec.y;
pointerVec.x *= 0.9 ** (timeDelta / 16.67);
pointerVec.y *= 0.9 ** (timeDelta / 16.67);
}
onMounted(() => {
rafHandle = window.requestAnimationFrame(updateInertia);
});
onBeforeUnmount(() => {
if (rafHandle != null) window.cancelAnimationFrame(rafHandle);
});
</script>
<style lang="scss" module>

2
packages/frontend/src/components/MkImageGallery.vue
View File

@@ -57,7 +57,7 @@ const zIndex = os.claimZIndex('high');
left: 0;
width: 100%;
height: 100%;
background: #0f08;
background: #0008;
}
.main {