pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): synchronize previews with thumbnails scrolling

Browse Source
This commit is contained in:
Stevan
2025-11-23 15:04:50 +01:00
parent 3323022a3b
commit 986ec216ac
3 changed files with 81 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/Projects/TopScreen/Previews.vue
View File

@@ -8,6 +8,11 @@ onMounted(() => {
projectPreviews.value = useImages(...store.projects.map((x) => x.preview));
});
const getBounds = () => ({
startIndex: Math.max(store.currentProject - 1, 0),
endIndex: Math.min(store.currentProject + 1 + 1, store.projects.length),
});
useRender((ctx) => {
const project = store.projects[store.currentProject];
if (!project) return;
@@ -15,24 +20,33 @@ useRender((ctx) => {
ctx.font = "10px NDS10";
ctx.fillStyle = "#000000";
const preview = projectPreviews.value[store.currentProject];
if (!preview) return;
const { startIndex, endIndex } = getBounds();
const x = (256 - preview.width) / 2;
const y = (192 - preview.height) / 2 + 10;
ctx.translate(x, y);
for (let i = startIndex; i < endIndex; i += 1) {
const preview = projectPreviews.value[i];
if (!preview) continue;
ctx.fillStyle = "#a6a6a6";
ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
ctx.fillStyle = "#000000";
ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
const offsetFromCenter = i - store.currentProject;
const baseX = (256 - preview.width) / 2;
const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
const y = (192 - preview.height) / 2 + 10;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.save();
ctx.translate(x, y);
ctx.drawImage(preview, 0, 0);
ctx.fillStyle = "#a6a6a6";
ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
ctx.fillStyle = "#000000";
ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.drawImage(preview, 0, 0);
ctx.restore();
}
});
defineOptions({