443 lines
15 KiB
Svelte
443 lines
15 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import Icon from '@iconify/svelte';
|
|
|
|
let { onClose } = $props<{ onClose: () => void }>();
|
|
|
|
let svgs = $state<string[]>([]);
|
|
let currentSlide = $state(0);
|
|
|
|
let canvas = $state<HTMLCanvasElement | null>(null);
|
|
let activeCanvas = $state<HTMLCanvasElement | null>(null);
|
|
let ctx: CanvasRenderingContext2D | null = null;
|
|
let activeCtx: CanvasRenderingContext2D | null = null;
|
|
let isDrawing = false;
|
|
let currentPath = $state<{x: number, y: number}[]>([]);
|
|
|
|
let tool = $state<'pen' | 'highlighter' | 'eraser' | 'laser'>('laser');
|
|
let selectedColor = $state('#ef4444');
|
|
let showGrid = $state(false);
|
|
let laserPos = $state({ x: 0, y: 0, visible: false });
|
|
let uiVisible = $state(true);
|
|
|
|
const colors = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#a855f7', '#ffffff', '#000000'];
|
|
|
|
let drawings = $state<Record<number, string>>({});
|
|
let undoStack = $state<Record<number, string[]>>({});
|
|
let redoStack = $state<Record<number, string[]>>({});
|
|
|
|
let inactivityTimeout: number;
|
|
|
|
function resetInactivityTimeout() {
|
|
uiVisible = true;
|
|
if (inactivityTimeout) window.clearTimeout(inactivityTimeout);
|
|
inactivityTimeout = window.setTimeout(() => {
|
|
if (!showGrid && !isDrawing) {
|
|
uiVisible = false;
|
|
}
|
|
}, 3000);
|
|
}
|
|
|
|
onMount(() => {
|
|
const previewContainers = document.querySelectorAll('.preview-container svg');
|
|
const svgStrings: string[] = [];
|
|
previewContainers.forEach(container => {
|
|
svgStrings.push(container.outerHTML);
|
|
});
|
|
svgs = svgStrings;
|
|
|
|
const el = document.getElementById('presentation-container');
|
|
if (el && el.requestFullscreen) {
|
|
el.requestFullscreen().catch(err => console.error(err));
|
|
}
|
|
|
|
const handleFullscreenChange = () => {
|
|
if (!document.fullscreenElement) {
|
|
onClose();
|
|
}
|
|
};
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key.toLowerCase() === 'g') {
|
|
showGrid = !showGrid;
|
|
return;
|
|
}
|
|
|
|
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
|
|
nextSlide();
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
prevSlide();
|
|
} else if (e.key === 'Escape') {
|
|
if (showGrid) {
|
|
showGrid = false;
|
|
} else if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
onClose();
|
|
}
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
window.addEventListener('mousemove', resetInactivityTimeout);
|
|
window.addEventListener('mousedown', resetInactivityTimeout);
|
|
window.addEventListener('touchstart', resetInactivityTimeout);
|
|
|
|
resetInactivityTimeout();
|
|
|
|
return () => {
|
|
clearTimeout(inactivityTimeout);
|
|
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
window.removeEventListener('mousemove', resetInactivityTimeout);
|
|
window.removeEventListener('mousedown', resetInactivityTimeout);
|
|
window.removeEventListener('touchstart', resetInactivityTimeout);
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen().catch(() => {});
|
|
}
|
|
};
|
|
});
|
|
|
|
$effect(() => {
|
|
if (canvas && currentSlide !== undefined && !showGrid) {
|
|
const svgEl = document.getElementById('presentation-svg')?.querySelector('svg');
|
|
if (svgEl) {
|
|
const rect = svgEl.getBoundingClientRect();
|
|
canvas.width = rect.width;
|
|
canvas.height = rect.height;
|
|
ctx = canvas.getContext('2d');
|
|
|
|
if (activeCanvas) {
|
|
activeCanvas.width = rect.width;
|
|
activeCanvas.height = rect.height;
|
|
activeCtx = activeCanvas.getContext('2d');
|
|
if (activeCtx) {
|
|
activeCtx.lineCap = 'round';
|
|
activeCtx.lineJoin = 'round';
|
|
}
|
|
}
|
|
|
|
if (ctx) {
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
|
|
if (drawings[currentSlide]) {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
ctx?.drawImage(img, 0, 0);
|
|
};
|
|
img.src = drawings[currentSlide];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
function hexToRgba(hex: string, alpha: number) {
|
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
}
|
|
|
|
function nextSlide() {
|
|
saveDrawing();
|
|
if (currentSlide < svgs.length - 1) currentSlide++;
|
|
}
|
|
|
|
function prevSlide() {
|
|
saveDrawing();
|
|
if (currentSlide > 0) currentSlide--;
|
|
}
|
|
|
|
function saveDrawing() {
|
|
if (canvas) {
|
|
drawings[currentSlide] = canvas.toDataURL();
|
|
}
|
|
}
|
|
|
|
function startDrawing(e: MouseEvent | TouchEvent) {
|
|
if (tool === 'laser') return;
|
|
isDrawing = true;
|
|
|
|
if (!undoStack[currentSlide]) undoStack[currentSlide] = [];
|
|
if (canvas) undoStack[currentSlide].push(canvas.toDataURL());
|
|
redoStack[currentSlide] = [];
|
|
|
|
currentPath = [];
|
|
addPointToPath(e);
|
|
}
|
|
|
|
function addPointToPath(e: MouseEvent | TouchEvent) {
|
|
if (!canvas) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
|
|
const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
|
|
const x = clientX - rect.left;
|
|
const y = clientY - rect.top;
|
|
currentPath.push({x, y});
|
|
}
|
|
|
|
function stopDrawing() {
|
|
if (!isDrawing) return;
|
|
isDrawing = false;
|
|
|
|
if (tool !== 'eraser' && ctx && activeCanvas && activeCtx) {
|
|
ctx.globalCompositeOperation = 'source-over';
|
|
ctx.drawImage(activeCanvas, 0, 0);
|
|
activeCtx.clearRect(0, 0, activeCanvas.width, activeCanvas.height);
|
|
}
|
|
saveDrawing();
|
|
}
|
|
|
|
function handlePointerMove(e: MouseEvent | TouchEvent) {
|
|
if (tool === 'laser') {
|
|
laserPos.visible = true;
|
|
const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
|
|
const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
|
|
laserPos.x = clientX;
|
|
laserPos.y = clientY;
|
|
} else {
|
|
laserPos.visible = false;
|
|
if (isDrawing) draw(e);
|
|
}
|
|
}
|
|
|
|
function handlePointerLeave() {
|
|
stopDrawing();
|
|
laserPos.visible = false;
|
|
}
|
|
|
|
function draw(e: MouseEvent | TouchEvent) {
|
|
if (!isDrawing || !activeCtx || !canvas || tool === 'laser') return;
|
|
e.preventDefault();
|
|
|
|
addPointToPath(e);
|
|
|
|
if (tool === 'eraser') {
|
|
if (ctx) {
|
|
ctx.globalCompositeOperation = 'destination-out';
|
|
ctx.lineWidth = 30;
|
|
ctx.strokeStyle = 'rgba(0,0,0,1)';
|
|
|
|
const prev = currentPath[currentPath.length - 2] || currentPath[0];
|
|
ctx.beginPath();
|
|
ctx.moveTo(prev.x, prev.y);
|
|
ctx.lineTo(currentPath[currentPath.length - 1].x, currentPath[currentPath.length - 1].y);
|
|
ctx.stroke();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (activeCanvas) {
|
|
activeCtx.clearRect(0, 0, activeCanvas.width, activeCanvas.height);
|
|
activeCtx.beginPath();
|
|
activeCtx.moveTo(currentPath[0].x, currentPath[0].y);
|
|
for (let i = 1; i < currentPath.length; i++) {
|
|
activeCtx.lineTo(currentPath[i].x, currentPath[i].y);
|
|
}
|
|
|
|
if (tool === 'pen') {
|
|
activeCtx.globalCompositeOperation = 'source-over';
|
|
activeCtx.lineWidth = 3;
|
|
activeCtx.strokeStyle = selectedColor;
|
|
} else if (tool === 'highlighter') {
|
|
activeCtx.globalCompositeOperation = 'source-over';
|
|
activeCtx.lineWidth = 20;
|
|
activeCtx.strokeStyle = hexToRgba(selectedColor, 0.4);
|
|
}
|
|
activeCtx.stroke();
|
|
}
|
|
}
|
|
|
|
function clearSlide() {
|
|
if (ctx && canvas) {
|
|
if (!undoStack[currentSlide]) undoStack[currentSlide] = [];
|
|
undoStack[currentSlide].push(canvas.toDataURL());
|
|
redoStack[currentSlide] = [];
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
delete drawings[currentSlide];
|
|
}
|
|
}
|
|
|
|
function undo() {
|
|
if (!undoStack[currentSlide] || undoStack[currentSlide].length === 0) return;
|
|
if (!redoStack[currentSlide]) redoStack[currentSlide] = [];
|
|
if (canvas) redoStack[currentSlide].push(canvas.toDataURL());
|
|
|
|
const prevState = undoStack[currentSlide].pop();
|
|
applyState(prevState);
|
|
}
|
|
|
|
function redo() {
|
|
if (!redoStack[currentSlide] || redoStack[currentSlide].length === 0) return;
|
|
if (!undoStack[currentSlide]) undoStack[currentSlide] = [];
|
|
if (canvas) undoStack[currentSlide].push(canvas.toDataURL());
|
|
|
|
const nextState = redoStack[currentSlide].pop();
|
|
applyState(nextState);
|
|
}
|
|
|
|
function applyState(dataUrl: string | undefined) {
|
|
if (ctx && canvas) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
if (dataUrl) {
|
|
const img = new Image();
|
|
img.onload = () => ctx?.drawImage(img, 0, 0);
|
|
img.src = dataUrl;
|
|
drawings[currentSlide] = dataUrl;
|
|
} else {
|
|
delete drawings[currentSlide];
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div id="presentation-container" class="fixed inset-0 z-[100] flex flex-col items-center justify-center">
|
|
|
|
{#if tool === 'laser' && laserPos.visible && !showGrid}
|
|
<div
|
|
class="pointer-events-none fixed z-[150] w-3 h-3 bg-red-500 rounded-full shadow-[0_0_15px_5px_rgba(239,68,68,0.8)] -translate-x-1/2 -translate-y-1/2"
|
|
style="left: {laserPos.x}px; top: {laserPos.y}px;"
|
|
></div>
|
|
{/if}
|
|
|
|
{#if showGrid}
|
|
<div class="absolute inset-0 z-[50] p-8 overflow-y-auto">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 max-w-7xl mx-auto pb-24">
|
|
{#each svgs as svg, i}
|
|
<button
|
|
class="relative aspect-video rounded-lg overflow-hidden shadow-lg border-4 transition-all focus:outline-none {currentSlide === i ? 'border-blue-500 scale-105 shadow-blue-500/20' : 'border-transparent hover:border-white/50'} bg-[var(--theme-bg)] text-[var(--theme-text)]"
|
|
onclick={() => { currentSlide = i; showGrid = false; }}
|
|
>
|
|
<div class="w-full h-full pointer-events-none flex items-center justify-center p-2 presentation-grid-svg">
|
|
{@html svg}
|
|
</div>
|
|
<div class="absolute bottom-2 right-2 bg-black/60 text-xs font-mono px-2 py-1 rounded-md backdrop-blur-sm">
|
|
{i + 1}
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="absolute top-0 inset-x-0 h-16 bg-gradient-to-b from-black/80 to-transparent flex items-center justify-between px-6 transition-opacity duration-300 z-[110] {uiVisible || showGrid ? 'opacity-100' : 'opacity-0'}">
|
|
<div class="flex items-center gap-4 bg-zinc-900/80 backdrop-blur-md px-4 py-2 rounded-xl border shadow-2xl border-[var(--theme-border)]">
|
|
<button class="p-2 rounded-lg transition-colors {tool === 'laser' ? 'bg-red-500/20 text-red-400' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'laser'} title="Laser Pointer">
|
|
<Icon icon="mdi:laser-pointer" class="text-xl" />
|
|
</button>
|
|
<button class="p-2 rounded-lg transition-colors {tool === 'pen' ? 'bg-blue-500/20 text-blue-400' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'pen'} title="Pen">
|
|
<Icon icon="mdi:lead-pencil" class="text-xl" />
|
|
</button>
|
|
<button class="p-2 rounded-lg transition-colors {tool === 'highlighter' ? 'bg-yellow-500/20 text-yellow-400' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'highlighter'} title="Highlighter">
|
|
<Icon icon="mdi:marker" class="text-xl" />
|
|
</button>
|
|
<button class="p-2 rounded-lg transition-colors {tool === 'eraser' ? 'bg-white/20 text-white' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'eraser'} title="Eraser">
|
|
<Icon icon="mdi:eraser" class="text-xl" />
|
|
</button>
|
|
|
|
{#if tool === 'pen' || tool === 'highlighter'}
|
|
<div class="w-px h-6 bg-white/10 mx-1"></div>
|
|
<div class="flex gap-1.5">
|
|
{#each colors as color}
|
|
<button
|
|
class="w-5 h-5 rounded-full border transition-transform hover:scale-110 {selectedColor === color ? 'ring-2 ring-white ring-offset-2 ring-offset-zinc-900' : ''} border-[var(--theme-border)]"
|
|
style="background-color: {color};"
|
|
onclick={() => selectedColor = color}
|
|
title="Select Color"
|
|
></button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="w-px h-6 bg-white/10 mx-1"></div>
|
|
<button class="p-2 rounded-lg hover:bg-white/20 hover:text-white transition-colors" onclick={undo} disabled={!undoStack[currentSlide]?.length} title="Undo">
|
|
<Icon icon="mdi:undo" class="text-xl" />
|
|
</button>
|
|
<button class="p-2 rounded-lg hover:bg-white/20 hover:text-white transition-colors" onclick={redo} disabled={!redoStack[currentSlide]?.length} title="Redo">
|
|
<Icon icon="mdi:redo" class="text-xl" />
|
|
</button>
|
|
<button class="p-2 rounded-lg hover:bg-red-500/20 hover:text-red-400 transition-colors" onclick={clearSlide} title="Clear Drawings">
|
|
<Icon icon="mdi:delete-sweep-outline" class="text-xl" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button onclick={() => showGrid = !showGrid} class="p-2 text-white/70 hover:text-white bg-black/50 hover:bg-white/10 rounded-full transition-colors flex items-center justify-center w-10 h-10" title="Toggle Grid (G)">
|
|
<Icon icon="mdi:view-grid" class="text-xl" />
|
|
</button>
|
|
<button onclick={() => { if(document.fullscreenElement) document.exitFullscreen(); onClose(); }} class="p-2 text-white/70 hover:text-white bg-black/50 hover:bg-white/10 rounded-full transition-colors flex items-center justify-center w-10 h-10" title="Exit Presentation">
|
|
<Icon icon="mdi:close" class="text-xl" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative w-full h-full flex items-center justify-center p-8">
|
|
{#if svgs.length > 0 && !showGrid}
|
|
<div id="presentation-svg" class="relative max-h-full max-w-full shadow-2xl flex items-center justify-center bg-[var(--theme-bg)] text-[var(--theme-text)]">
|
|
{@html svgs[currentSlide]}
|
|
|
|
<canvas
|
|
bind:this={canvas}
|
|
class="absolute inset-0 z-10 touch-none pointer-events-none"
|
|
></canvas>
|
|
|
|
<canvas
|
|
bind:this={activeCanvas}
|
|
class="absolute inset-0 z-20 touch-none {tool === 'laser' ? 'cursor-none' : 'cursor-crosshair'}"
|
|
onmousedown={startDrawing}
|
|
onmousemove={handlePointerMove}
|
|
onmouseup={stopDrawing}
|
|
onmouseleave={handlePointerLeave}
|
|
ontouchstart={startDrawing}
|
|
ontouchmove={handlePointerMove}
|
|
ontouchend={handlePointerLeave}
|
|
></canvas>
|
|
</div>
|
|
{:else if svgs.length === 0}
|
|
<div class="text-white/50 text-xl">No slides available to present.</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if svgs.length > 0}
|
|
<div class="absolute bottom-6 flex items-center gap-4 bg-zinc-900/80 backdrop-blur-md px-6 py-3 rounded-full border shadow-2xl transition-opacity duration-300 z-[110] {uiVisible || showGrid ? 'opacity-100' : 'opacity-0'} border-[var(--theme-border)]">
|
|
{#if svgs.length > 1}
|
|
<button onclick={prevSlide} disabled={currentSlide === 0} class="p-2 hover:bg-white/20 disabled:opacity-30 disabled:hover:bg-transparent rounded-full transition-all">
|
|
<Icon icon="mdi:chevron-left" class="text-3xl" />
|
|
</button>
|
|
<button onclick={() => showGrid = !showGrid} class="font-mono font-semibold text-lg text-white/90 min-w-[3rem] text-center hover:bg-white/10 px-2 py-1 rounded-md transition-colors" title="Show Grid (G)">
|
|
{currentSlide + 1} / {svgs.length}
|
|
</button>
|
|
<button onclick={nextSlide} disabled={currentSlide === svgs.length - 1} class="p-2 hover:bg-white/20 disabled:opacity-30 disabled:hover:bg-transparent rounded-full transition-all">
|
|
<Icon icon="mdi:chevron-right" class="text-3xl" />
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
<style>
|
|
:global(#presentation-svg svg) {
|
|
max-height: calc(100vh - 4rem);
|
|
max-width: calc(100vw - 4rem);
|
|
height: 100%;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
:global(.presentation-grid-svg) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
:global(.presentation-grid-svg svg) {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
</style> |