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

refactor

Browse Source
This commit is contained in:
syuilo
2026-07-10 21:33:04 +09:00
parent 4f6830fdd6
commit abae0b5eb1
2 changed files with 43 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,13 +64,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</template>
<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
import { i18n } from '@/i18n.js';
import { makeDoubleTapDetector } from '@/utility/double-tap.js';
import { calculateSourceTransform } from '@/components/MkImageGallery.utils.js';
import { deviceKind } from '@/utility/device-kind.js';
import { isTouchUsing } from '@/utility/touch.js';
<script lang="ts">
type Size = {
width: number;
height: number;
};
type Rect = Size & {
left: number;
top: number;
};
export type Image = {
id: string;
@@ -83,6 +86,39 @@ export type Image = {
sourceElement?: HTMLElement | null;
};
export function calculateSourceTransform({
fit,
imageRenderingRect,
sourceRect,
}: {
fit: string;
imageRenderingRect: Rect;
sourceRect: Rect;
}): { x: number; y: number; scale: number } {
const scale = fit === 'cover'
? Math.max(sourceRect.width / imageRenderingRect.width, sourceRect.height / imageRenderingRect.height)
: Math.min(sourceRect.width / imageRenderingRect.width, sourceRect.height / imageRenderingRect.height);
const sourceImageWidth = imageRenderingRect.width * scale;
const sourceImageHeight = imageRenderingRect.height * scale;
const sourceImageLeft = sourceRect.left + (sourceRect.width - sourceImageWidth) / 2;
const sourceImageTop = sourceRect.top + (sourceRect.height - sourceImageHeight) / 2;
return {
x: sourceImageLeft - imageRenderingRect.left * scale,
y: sourceImageTop - imageRenderingRect.top * scale,
scale,
};
}
</script>
<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
import { i18n } from '@/i18n.js';
import { makeDoubleTapDetector } from '@/utility/double-tap.js';
import { deviceKind } from '@/utility/device-kind.js';
import { isTouchUsing } from '@/utility/touch.js';
const props = withDefaults(defineProps<{
image: Image;
activated: boolean;

39
packages/frontend/src/components/MkImageGallery.utils.ts
View File

@@ -1,39 +0,0 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
type Size = {
width: number;
height: number;
};
type Rect = Size & {
left: number;
top: number;
};
export function calculateSourceTransform({
fit,
imageRenderingRect,
sourceRect,
}: {
fit: string;
imageRenderingRect: Rect;
sourceRect: Rect;
}): { x: number; y: number; scale: number } {
const scale = fit === 'cover'
? Math.max(sourceRect.width / imageRenderingRect.width, sourceRect.height / imageRenderingRect.height)
: Math.min(sourceRect.width / imageRenderingRect.width, sourceRect.height / imageRenderingRect.height);
const sourceImageWidth = imageRenderingRect.width * scale;
const sourceImageHeight = imageRenderingRect.height * scale;
const sourceImageLeft = sourceRect.left + (sourceRect.width - sourceImageWidth) / 2;
const sourceImageTop = sourceRect.top + (sourceRect.height - sourceImageHeight) / 2;
return {
x: sourceImageLeft - imageRenderingRect.left * scale,
y: sourceImageTop - imageRenderingRect.top * scale,
scale,
};
}