rehlert/bea-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

renders preview of zips

Browse Source
This commit is contained in:
rehlert
2026-06-12 12:31:44 +02:00
parent 15a3fc5877
commit d00a7e2783
6 changed files with 389 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/workspace.xml
Generated
+14 -4
View File
@@ -3,7 +3,8 @@
<component name="ChangeListManager">
<list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/lib/zip-processing.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/zip-processing.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
@@ -50,7 +51,7 @@
<option name="presentableId" value="Default" />
<updated>1781169139290</updated>
<workItem from="1781169141138" duration="309000" />
<workItem from="1781251694220" duration="7259000" />
<workItem from="1781251694220" duration="7924000" />
</task>
<task id="LOCAL-00001" summary="adapts styling of rvg.legal">
<option name="closed" value="true" />
@@ -76,7 +77,15 @@
<option name="project" value="LOCAL" />
<updated>1781258303003</updated>
</task>
<option name="localTasksCounter" value="4" />
<task id="LOCAL-00004" summary="parses xjustiz and orders attachments">
<option name="closed" value="true" />
<created>1781259433444</created>
<option name="number" value="00004" />
<option name="presentableId" value="LOCAL-00004" />
<option name="project" value="LOCAL" />
<updated>1781259433444</updated>
</task>
<option name="localTasksCounter" value="5" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -89,7 +98,8 @@
<MESSAGE value="adapts styling of rvg.legal" />
<MESSAGE value="adds dropzone to add zips" />
<MESSAGE value="zips are getting extracted" />
<option name="LAST_COMMIT_MESSAGE" value="zips are getting extracted" />
<MESSAGE value="parses xjustiz and orders attachments" />
<option name="LAST_COMMIT_MESSAGE" value="parses xjustiz and orders attachments" />
</component>
<component name="XDebuggerManager">
<breakpoint-manager>
package.json
+2 -1
View File
@@ -32,6 +32,7 @@
"dependencies": {
"@skeletonlabs/skeleton": "^4.15.2",
"@skeletonlabs/skeleton-svelte": "^4.15.2",
"fflate": "^0.8.3"
"fflate": "^0.8.3",
"pdfjs-dist": "^6.0.227"
}
}
pnpm-lock.yaml
Generated
+134
View File
@@ -17,6 +17,9 @@ importers:
fflate:
specifier: ^0.8.3
version: 0.8.3
pdfjs-dist:
specifier: ^6.0.227
version: 6.0.227
devDependencies:
'@sveltejs/adapter-auto':
specifier: ^7.0.1
@@ -100,6 +103,81 @@ packages:
'@jridgewell/trace-mapping@0.3.31':
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
'@napi-rs/canvas-android-arm64@1.0.0':
resolution: {integrity: sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
'@napi-rs/canvas-darwin-arm64@1.0.0':
resolution: {integrity: sha512-ZIja19/BiGz2puhki+WUYSRriwFeFJ8Mi9eK3hZdSS85w4Y60cuEAJVhMCfKwswQkKkUtrnzdKMBuO7TupvexA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@napi-rs/canvas-darwin-x64@1.0.0':
resolution: {integrity: sha512-hImggWc82jqZVpEsFR9S7PE9OQYjq/H/D7vwCGB6X1jRH+UVBP1+1niJTPBOat1B154T6GKK7/kcFtoWgjgFzQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@napi-rs/canvas-linux-arm-gnueabihf@1.0.0':
resolution: {integrity: sha512-hlJRy6d+kWLKVOG/+1rEvNQVURZ0DxxRPJsLmEWwhwiXZUJc0BF5o9esALHSEP4CoJK4wChRtj3hnyBgVx2oWA==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
'@napi-rs/canvas-linux-arm64-gnu@1.0.0':
resolution: {integrity: sha512-5Hru4T3RXkosRQafcjelv7AUzw9mXqmGYsxnzeDDOWveFCJyEPMSJltvGCM+jfH98seOCbfwm9KyFg6Jm5FhAA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@napi-rs/canvas-linux-arm64-musl@1.0.0':
resolution: {integrity: sha512-LTUl9jS8WsLSUGaxQZKQkxfluOJRpgvBuxxdM4pYcjib+di8AU4OzQc6+L6SzGMLcKc9H0RAjojRatBhTMqYdg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
libc: [musl]
'@napi-rs/canvas-linux-riscv64-gnu@1.0.0':
resolution: {integrity: sha512-Iz931SAZf+WVDzpjk52Q3ffW3zw0YflFwEZMgs036Wfu1kX/LrwT9wGjsuSqyduqefUkl91/vTdAjn8hQu5ezA==}
engines: {node: '>= 10'}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@napi-rs/canvas-linux-x64-gnu@1.0.0':
resolution: {integrity: sha512-pFEQ5eFK4JusgN1K6KkO9DKP/Hi1WMJOkF8Ch03/khTc4bFbCKkCCsJG4YcOMOW9bI4XbT2/eMAWxhO0xaWgPA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@napi-rs/canvas-linux-x64-musl@1.0.0':
resolution: {integrity: sha512-jnvr8NrLHiZ3NCiOKWqDbkI4Ah+QDrqtZ+sddPZBltEb1mQ2coSvCSJYfict+oAwcm0c970oTmVySpjKP/lnaA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [musl]
'@napi-rs/canvas-win32-arm64-msvc@1.0.0':
resolution: {integrity: sha512-y2j9/Gfd5joqiqxdP/L1smqjQ+uAx3C4N0EC7bDHrnZEEH8ToM/OC5p3uHvtj4Lq591aHj+ArL01UDLNwT5HgQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@napi-rs/canvas-win32-x64-msvc@1.0.0':
resolution: {integrity: sha512-qwdhh9N6Gge/hC4pL9S1tQp0iKwhSl/dYjg7+RGp9k26iRGRi5MqqUyKGOXIWli0zOcuy5Y2wIH/jk2ry6i/jA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
'@napi-rs/canvas@1.0.0':
resolution: {integrity: sha512-Jqxcy1XOIqj+lH9sl1GT+il6GR3uQv13vI2mrwubP3uT8Olak2ClDrK2RnxlQKjwv8BRr4b3ug0YR7c6hBX8wg==}
engines: {node: '>= 10'}
'@napi-rs/wasm-runtime@1.1.5':
resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
peerDependencies:
@@ -720,6 +798,10 @@ packages:
resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
engines: {node: '>=12.20.0'}
pdfjs-dist@6.0.227:
resolution: {integrity: sha512-/P6M4SXw+70waMVLUM7rdRtvo+dEzqE1t6W/zQNvBETo2MaRa5rrvCcAYdfWGiUzadTgM0lJmRApUrW0d9zgKg==}
engines: {node: '>=22.13.0 || >=24'}
picocolors@1.1.1:
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
@@ -973,6 +1055,54 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.5
'@napi-rs/canvas-android-arm64@1.0.0':
optional: true
'@napi-rs/canvas-darwin-arm64@1.0.0':
optional: true
'@napi-rs/canvas-darwin-x64@1.0.0':
optional: true
'@napi-rs/canvas-linux-arm-gnueabihf@1.0.0':
optional: true
'@napi-rs/canvas-linux-arm64-gnu@1.0.0':
optional: true
'@napi-rs/canvas-linux-arm64-musl@1.0.0':
optional: true
'@napi-rs/canvas-linux-riscv64-gnu@1.0.0':
optional: true
'@napi-rs/canvas-linux-x64-gnu@1.0.0':
optional: true
'@napi-rs/canvas-linux-x64-musl@1.0.0':
optional: true
'@napi-rs/canvas-win32-arm64-msvc@1.0.0':
optional: true
'@napi-rs/canvas-win32-x64-msvc@1.0.0':
optional: true
'@napi-rs/canvas@1.0.0':
optionalDependencies:
'@napi-rs/canvas-android-arm64': 1.0.0
'@napi-rs/canvas-darwin-arm64': 1.0.0
'@napi-rs/canvas-darwin-x64': 1.0.0
'@napi-rs/canvas-linux-arm-gnueabihf': 1.0.0
'@napi-rs/canvas-linux-arm64-gnu': 1.0.0
'@napi-rs/canvas-linux-arm64-musl': 1.0.0
'@napi-rs/canvas-linux-riscv64-gnu': 1.0.0
'@napi-rs/canvas-linux-x64-gnu': 1.0.0
'@napi-rs/canvas-linux-x64-musl': 1.0.0
'@napi-rs/canvas-win32-arm64-msvc': 1.0.0
'@napi-rs/canvas-win32-x64-msvc': 1.0.0
optional: true
'@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
dependencies:
'@emnapi/core': 1.10.0
@@ -1656,6 +1786,10 @@ snapshots:
obug@2.1.2: {}
pdfjs-dist@6.0.227:
optionalDependencies:
'@napi-rs/canvas': 1.0.0
picocolors@1.1.1: {}
picomatch@4.0.4: {}
src/lib/components/AttachmentPreview.svelte
+89
View File
@@ -0,0 +1,89 @@
<script lang="ts">
import {onMount} from "svelte";
import type {ZipAttachment} from "$lib/zip-processing";
type Props = {
attachment: ZipAttachment;
};
let {attachment}: Props = $props();
let canvasElement = $state<HTMLCanvasElement | null>(null);
let imageUrl = $state<string | null>(null);
let previewError = $state<string | null>(null);
onMount(() => {
let objectUrl: string | null = null;
let cancelled = false;
(async () => {
// This prevents the code from running on the server (SSR)
const pdfjsLib = await import("pdfjs-dist");
const {getDocument, GlobalWorkerOptions} = pdfjsLib;
// Import the worker URL dynamically as well
const pdfWorkerSrc = await import("pdfjs-dist/build/pdf.worker.mjs?url").then(m => m.default);
GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
const loadPreview = async () => {
previewError = null;
if (attachment.kind === "image") {
objectUrl = URL.createObjectURL(new Blob([attachment.data as unknown as ArrayBuffer]));
imageUrl = objectUrl;
return;
}
try {
// Use the imported getDocument
const loadingTask = getDocument({data: attachment.data});
const pdfDocument = await loadingTask.promise;
const page = await pdfDocument.getPage(1);
if (cancelled || !canvasElement) {
void loadingTask.destroy();
return;
}
const viewport = page.getViewport({scale: 1.2});
canvasElement.width = viewport.width;
canvasElement.height = viewport.height;
await page.render({
canvas: canvasElement,
viewport,
}).promise;
await loadingTask.destroy();
} catch (error) {
console.error(`Failed to render preview for ${attachment.path}`, error);
previewError = "PDF-Vorschau konnte nicht geladen werden.";
}
};
void loadPreview();
})
return () => {
cancelled = true;
if (objectUrl) URL.revokeObjectURL(objectUrl);
};
});
</script>
{#if attachment.kind === "image"}
{#if imageUrl}
<img
alt={attachment.name}
class="max-h-72 w-full rounded-md border border-primary-100 bg-white object-contain"
src={imageUrl}
/>
{/if}
{:else if previewError}
<div class="flex min-h-48 items-center justify-center rounded-md border border-dashed border-primary-200 bg-primary-50 px-4 py-6 text-sm text-primary-800">
{previewError}
</div>
{:else}
<canvas bind:this={canvasElement} class="w-full rounded-md border border-primary-100 bg-white"></canvas>
{/if}
src/lib/components/ProcessedZipArchiveEditor.svelte
+136
View File
@@ -0,0 +1,136 @@
<script lang="ts">
import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
import type { ProcessedZipArchive, ZipAttachment } from "$lib/zip-processing";
type Props = {
archive: ProcessedZipArchive;
onArchiveChange?: (archive: ProcessedZipArchive) => void;
};
let { archive, onArchiveChange = () => {} }: Props = $props();
let attachments = $state<ZipAttachment[]>([]);
let dragIndex = $state<number | null>(null);
let dropIndex = $state<number | null>(null);
$effect(() => {
attachments = archive.attachments.map((attachment) => ({ ...attachment }));
});
const emitArchiveChange = () => {
onArchiveChange({
...archive,
attachments: attachments.map((attachment) => ({ ...attachment })),
});
};
const updateAttachmentName = (index: number, name: string) => {
attachments[index] = { ...attachments[index], name };
attachments = [...attachments];
emitArchiveChange();
};
const moveAttachment = (fromIndex: number, toIndex: number) => {
if (
fromIndex === toIndex ||
fromIndex < 0 ||
toIndex < 0 ||
fromIndex >= attachments.length ||
toIndex >= attachments.length
) {
return;
}
const nextAttachments = [...attachments];
const [movedAttachment] = nextAttachments.splice(fromIndex, 1);
nextAttachments.splice(toIndex, 0, movedAttachment);
attachments = nextAttachments;
emitArchiveChange();
};
const handleDragStart = (index: number, event: DragEvent) => {
dragIndex = index;
dropIndex = index;
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("text/plain", String(index));
}
};
const handleDragOver = (index: number, event: DragEvent) => {
event.preventDefault();
dropIndex = index;
};
const handleDrop = (index: number, event: DragEvent) => {
event.preventDefault();
const dataTransferIndex = Number(event.dataTransfer?.getData("text/plain"));
const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex;
if (fromIndex === null) {
return;
}
moveAttachment(fromIndex, index);
dragIndex = null;
dropIndex = null;
};
const handleDragEnd = () => {
dragIndex = null;
dropIndex = null;
};
</script>
<section class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm">
<header class="flex flex-wrap items-baseline justify-between gap-2">
<div class="min-w-0">
<h2 class="truncate text-[16px] font-bold text-primary-900">{archive.name}</h2>
<p class="text-[13px] text-primary-700">
{attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"}
</p>
</div>
</header>
<ul class="flex flex-col gap-3">
{#each attachments as attachment, index (attachment.path)}
<li
class={`flex flex-col gap-3 rounded-xl border bg-primary-50 p-3 ${
dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
} ${dragIndex === index ? "opacity-60" : ""}`}
draggable="true"
ondragstart={(event) => handleDragStart(index, event)}
ondragover={(event) => handleDragOver(index, event)}
ondrop={(event) => handleDrop(index, event)}
ondragend={handleDragEnd}
>
<div class="flex items-center gap-3">
<button
class="cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold text-primary-700 active:cursor-grabbing"
draggable="false"
type="button"
aria-label="Datei verschieben"
>
::
</button>
<label class="min-w-0 flex-1">
<span class="sr-only">Dateiname</span>
<input
class="w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-[14px] text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
type="text"
value={attachment.name}
oninput={(event) =>
updateAttachmentName(index, (event.currentTarget as HTMLInputElement).value)}
/>
</label>
</div>
<AttachmentPreview {attachment} />
</li>
{/each}
</ul>
</section>
src/routes/+page.svelte
+14 -6
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import Card from "$lib/components/Card.svelte";
import ProcessedZipArchiveEditor from "$lib/components/ProcessedZipArchiveEditor.svelte";
import ZipDropzone from "$lib/components/ZipDropzone.svelte";
import { extractZipArchive, type ProcessedZipArchive } from "$lib/zip-processing";
@@ -27,6 +28,12 @@
pendingZipCount -= 1;
}
};
const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
existingIndex === index ? archive : existingArchive,
);
};
</script>
{#snippet content()}
@@ -48,13 +55,14 @@
</div>
{#if processedZipFiles.length > 0}
<ul class="space-y-2">
{#each processedZipFiles as file}
<li class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
{file.name} - {file.attachments.length} relevante Datei{file.attachments.length === 1 ? "" : "en"}
</li>
<div class="flex flex-col gap-4">
{#each processedZipFiles as file, index}
<ProcessedZipArchiveEditor
archive={file}
onArchiveChange={(updatedArchive) => updateProcessedZipFile(index, updatedArchive)}
/>
{/each}
</ul>
</div>
{/if}
</div>
</div>