@nice2dev/game-engine 1.0.5 → 1.0.11

package/dist/esm/editor/ScreenshotMode.js

@@ -0,0 +1,702 @@
+/**
+ * @file ScreenshotMode.ts
+ * @description Screenshot/Photo Mode system with free camera and filters
+ * PRO-1.4: Professional Editor Features
+ *
+ * Features:
+ * - Free camera movement
+ * - Hide UI elements
+ * - Image filters and effects
+ * - Resolution settings
+ * - Depth of field
+ * - Frame composition guides
+ * - Screenshot capture and save
+ * - Animation/pose freeze
+ * - Focus points
+ * - Watermarks and overlays
+ */
+// ============================================================
+// Default Settings
+// ============================================================
+const DEFAULT_CUSTOM_FILTER = {
+    brightness: 1,
+    contrast: 1,
+    saturation: 1,
+    hue: 0,
+    gamma: 1,
+    exposure: 0,
+    temperature: 0,
+    tint: 0,
+    shadows: 0,
+    highlights: 0,
+    vignette: 0,
+    vignetteColor: '#000000',
+    grain: 0,
+    blur: 0,
+    sharpen: 0,
+};
+const DEFAULT_DOF_SETTINGS = {
+    enabled: false,
+    focusDistance: 5,
+    aperture: 2.8,
+    focalLength: 50,
+    bokehSize: 4,
+    bokehShape: 'circle',
+    autoFocus: false,
+};
+const DEFAULT_RESOLUTION = {
+    width: 1920,
+    height: 1080,
+    aspectRatio: '16:9',
+    supersampling: 1,
+};
+const DEFAULT_WATERMARK = {
+    enabled: false,
+    position: 'bottom-right',
+    opacity: 0.5,
+    scale: 1,
+    padding: 20,
+};
+// ============================================================
+// Filter Presets
+// ============================================================
+const FILTER_PRESETS = {
+    none: {},
+    grayscale: { saturation: 0 },
+    sepia: { saturation: 0.3, temperature: 40, tint: 10, contrast: 1.1 },
+    vintage: { saturation: 0.7, contrast: 1.2, vignette: 0.3, grain: 0.2, temperature: 20 },
+    noir: { saturation: 0, contrast: 1.4, brightness: 0.9, vignette: 0.4 },
+    vibrant: { saturation: 1.4, contrast: 1.1, brightness: 1.05 },
+    warm: { temperature: 30, tint: 5, saturation: 1.1 },
+    cool: { temperature: -30, tint: -5, saturation: 0.95 },
+    dramatic: { contrast: 1.3, saturation: 1.2, shadows: -20, highlights: 20, vignette: 0.25 },
+    soft: { contrast: 0.9, saturation: 0.9, blur: 0.5, brightness: 1.05 },
+    hdr: { contrast: 1.2, saturation: 1.15, shadows: 30, highlights: -20, sharpen: 0.3 },
+    cinematic: { contrast: 1.1, saturation: 0.85, temperature: -10, vignette: 0.2, shadows: -10 },
+    custom: {},
+};
+// ============================================================
+// Screenshot Mode Controller
+// ============================================================
+class ScreenshotMode {
+    constructor() {
+        this.isActive = false;
+        this.isPaused = false;
+        // Camera
+        this.originalCamera = null;
+        this.freeCamera = {
+            position: { x: 0, y: 0, z: 5 },
+            rotation: { pitch: 0, yaw: 0, roll: 0 },
+            fov: 60,
+            near: 0.1,
+            far: 1000,
+        };
+        // Movement
+        this.moveSpeed = 5;
+        this.rotateSpeed = 0.1;
+        this.smoothing = 0.1;
+        // Settings
+        this.settings = this.getDefaultSettings();
+        this.hiddenUIElements = new Set();
+        // History
+        this.screenshots = [];
+        this.savedCameraPositions = new Map();
+    }
+    // ─── Mode Control ──────────────────────────────────────
+    activate(initialCamera) {
+        if (this.isActive) {
+            return;
+        }
+        this.isActive = true;
+        this.originalCamera = initialCamera ?? { ...this.freeCamera };
+        this.freeCamera = { ...this.originalCamera };
+        // Hide UI
+        this.setUIVisibility?.(false);
+        // Apply filter
+        this.applyFilter();
+        // Pause game
+        this.isPaused = true;
+        this.pauseGame?.();
+        this.onModeActivated?.();
+        this.onCameraChanged?.(this.freeCamera);
+    }
+    deactivate() {
+        if (!this.isActive) {
+            return;
+        }
+        this.isActive = false;
+        // Restore UI
+        this.setUIVisibility?.(true);
+        // Clear filter
+        this.setRenderFilter?.({ ...DEFAULT_CUSTOM_FILTER });
+        // Resume game
+        if (this.isPaused) {
+            this.isPaused = false;
+            this.resumeGame?.();
+        }
+        this.onModeDeactivated?.();
+    }
+    toggle(initialCamera) {
+        if (this.isActive) {
+            this.deactivate();
+        }
+        else {
+            this.activate(initialCamera);
+        }
+    }
+    isActivated() {
+        return this.isActive;
+    }
+    // ─── Camera Control ────────────────────────────────────
+    moveCamera(deltaX, deltaY, deltaZ) {
+        if (!this.isActive) {
+            return;
+        }
+        // Apply rotation to movement direction
+        const yawRad = (this.freeCamera.rotation.yaw * Math.PI) / 180;
+        const pitchRad = (this.freeCamera.rotation.pitch * Math.PI) / 180;
+        const forward = {
+            x: Math.sin(yawRad) * Math.cos(pitchRad),
+            y: Math.sin(pitchRad),
+            z: Math.cos(yawRad) * Math.cos(pitchRad),
+        };
+        const right = {
+            x: Math.cos(yawRad),
+            y: 0,
+            z: -Math.sin(yawRad),
+        };
+        const up = { x: 0, y: 1, z: 0 };
+        this.freeCamera.position.x +=
+            (forward.x * deltaZ + right.x * deltaX + up.x * deltaY) * this.moveSpeed;
+        this.freeCamera.position.y +=
+            (forward.y * deltaZ + right.y * deltaX + up.y * deltaY) * this.moveSpeed;
+        this.freeCamera.position.z +=
+            (forward.z * deltaZ + right.z * deltaX + up.z * deltaY) * this.moveSpeed;
+        this.onCameraChanged?.(this.freeCamera);
+    }
+    rotateCamera(deltaPitch, deltaYaw, deltaRoll = 0) {
+        if (!this.isActive) {
+            return;
+        }
+        this.freeCamera.rotation.pitch = Math.max(-89, Math.min(89, this.freeCamera.rotation.pitch + deltaPitch * this.rotateSpeed));
+        this.freeCamera.rotation.yaw += deltaYaw * this.rotateSpeed;
+        this.freeCamera.rotation.roll += deltaRoll * this.rotateSpeed;
+        // Normalize yaw
+        while (this.freeCamera.rotation.yaw > 180) {
+            this.freeCamera.rotation.yaw -= 360;
+        }
+        while (this.freeCamera.rotation.yaw < -180) {
+            this.freeCamera.rotation.yaw += 360;
+        }
+        this.onCameraChanged?.(this.freeCamera);
+    }
+    setFOV(fov) {
+        if (!this.isActive) {
+            return;
+        }
+        this.freeCamera.fov = Math.max(10, Math.min(120, fov));
+        this.onCameraChanged?.(this.freeCamera);
+    }
+    adjustFOV(delta) {
+        this.setFOV(this.freeCamera.fov + delta);
+    }
+    resetCamera() {
+        if (!this.isActive || !this.originalCamera) {
+            return;
+        }
+        this.freeCamera = { ...this.originalCamera };
+        this.onCameraChanged?.(this.freeCamera);
+    }
+    getCameraState() {
+        return { ...this.freeCamera };
+    }
+    setCameraState(state) {
+        if (!this.isActive) {
+            return;
+        }
+        this.freeCamera = { ...state };
+        this.onCameraChanged?.(this.freeCamera);
+    }
+    // ─── Camera Presets ────────────────────────────────────
+    saveCameraPosition(name) {
+        this.savedCameraPositions.set(name, { ...this.freeCamera });
+    }
+    loadCameraPosition(name) {
+        const saved = this.savedCameraPositions.get(name);
+        if (!saved) {
+            return false;
+        }
+        this.setCameraState(saved);
+        return true;
+    }
+    deleteCameraPosition(name) {
+        return this.savedCameraPositions.delete(name);
+    }
+    getSavedPositions() {
+        return Array.from(this.savedCameraPositions.keys());
+    }
+    // ─── Movement Settings ─────────────────────────────────
+    setMoveSpeed(speed) {
+        this.moveSpeed = Math.max(0.1, speed);
+    }
+    setRotateSpeed(speed) {
+        this.rotateSpeed = Math.max(0.01, speed);
+    }
+    setSmoothing(smoothing) {
+        this.smoothing = Math.max(0, Math.min(1, smoothing));
+    }
+    // ─── Filter Control ────────────────────────────────────
+    setFilter(type, intensity = 1) {
+        this.settings.filter.type = type;
+        this.settings.filter.intensity = Math.max(0, Math.min(1, intensity));
+        if (type !== 'custom') {
+            const preset = FILTER_PRESETS[type];
+            this.settings.filter.customSettings = {
+                ...DEFAULT_CUSTOM_FILTER,
+                ...preset,
+            };
+        }
+        this.applyFilter();
+        this.onSettingsChanged?.(this.settings);
+    }
+    setCustomFilter(settings) {
+        this.settings.filter.type = 'custom';
+        this.settings.filter.customSettings = {
+            ...DEFAULT_CUSTOM_FILTER,
+            ...this.settings.filter.customSettings,
+            ...settings,
+        };
+        this.applyFilter();
+        this.onSettingsChanged?.(this.settings);
+    }
+    applyFilter() {
+        if (!this.setRenderFilter || !this.settings.filter.customSettings) {
+            return;
+        }
+        const intensity = this.settings.filter.intensity;
+        const filter = this.settings.filter.customSettings;
+        // Interpolate between default and filter settings based on intensity
+        const applied = {
+            brightness: this.lerp(1, filter.brightness, intensity),
+            contrast: this.lerp(1, filter.contrast, intensity),
+            saturation: this.lerp(1, filter.saturation, intensity),
+            hue: filter.hue * intensity,
+            gamma: this.lerp(1, filter.gamma, intensity),
+            exposure: filter.exposure * intensity,
+            temperature: filter.temperature * intensity,
+            tint: filter.tint * intensity,
+            shadows: filter.shadows * intensity,
+            highlights: filter.highlights * intensity,
+            vignette: filter.vignette * intensity,
+            vignetteColor: filter.vignetteColor,
+            grain: filter.grain * intensity,
+            blur: filter.blur * intensity,
+            sharpen: filter.sharpen * intensity,
+        };
+        this.setRenderFilter(applied);
+    }
+    lerp(a, b, t) {
+        return a + (b - a) * t;
+    }
+    getFilter() {
+        return { ...this.settings.filter };
+    }
+    // ─── Depth of Field ────────────────────────────────────
+    setDOF(settings) {
+        this.settings.dof = { ...this.settings.dof, ...settings };
+        this.onSettingsChanged?.(this.settings);
+    }
+    setFocusPoint(x, y) {
+        this.settings.dof.focusPoint = { x, y };
+        this.settings.dof.autoFocus = false;
+        this.onSettingsChanged?.(this.settings);
+    }
+    enableAutoFocus() {
+        this.settings.dof.autoFocus = true;
+        this.settings.dof.focusPoint = undefined;
+        this.onSettingsChanged?.(this.settings);
+    }
+    // ─── Resolution ────────────────────────────────────────
+    setResolution(width, height) {
+        this.settings.resolution.width = width;
+        this.settings.resolution.height = height;
+        this.settings.resolution.aspectRatio = 'custom';
+        this.onSettingsChanged?.(this.settings);
+    }
+    setAspectRatio(ratio) {
+        this.settings.resolution.aspectRatio = ratio;
+        if (ratio !== 'custom') {
+            const [w, h] = ratio.split(':').map(Number);
+            this.settings.resolution.height = Math.round((this.settings.resolution.width * h) / w);
+        }
+        this.onSettingsChanged?.(this.settings);
+    }
+    setSupersampling(factor) {
+        this.settings.resolution.supersampling = factor;
+        this.onSettingsChanged?.(this.settings);
+    }
+    // ─── Composition ───────────────────────────────────────
+    setCompositionGuide(guide) {
+        this.settings.compositionGuide = guide;
+        this.onSettingsChanged?.(this.settings);
+    }
+    // ─── Watermark ─────────────────────────────────────────
+    setWatermark(settings) {
+        this.settings.watermark = { ...this.settings.watermark, ...settings };
+        this.onSettingsChanged?.(this.settings);
+    }
+    // ─── UI Visibility ─────────────────────────────────────
+    hideUIElement(elementId) {
+        this.hiddenUIElements.add(elementId);
+    }
+    showUIElement(elementId) {
+        this.hiddenUIElements.delete(elementId);
+    }
+    hideAllUI() {
+        this.setUIVisibility?.(false);
+    }
+    showAllUI() {
+        this.setUIVisibility?.(true);
+    }
+    // ─── Screenshot Capture ────────────────────────────────
+    async takeScreenshot(metadata) {
+        if (!this.captureCanvas) {
+            return null;
+        }
+        const canvas = this.captureCanvas();
+        if (!canvas) {
+            return null;
+        }
+        // Create screenshot canvas with resolution settings
+        const { width, height, supersampling } = this.settings.resolution;
+        const finalWidth = width * supersampling;
+        const finalHeight = height * supersampling;
+        const screenshotCanvas = document.createElement('canvas');
+        screenshotCanvas.width = finalWidth;
+        screenshotCanvas.height = finalHeight;
+        const ctx = screenshotCanvas.getContext('2d');
+        if (!ctx) {
+            return null;
+        }
+        // Draw game canvas
+        ctx.drawImage(canvas, 0, 0, finalWidth, finalHeight);
+        // Apply watermark
+        if (this.settings.watermark.enabled) {
+            await this.applyWatermark(ctx, finalWidth, finalHeight);
+        }
+        // Apply composition guide (for preview, not saved)
+        // Guides are rendered separately
+        // Downsample if needed
+        if (supersampling > 1) {
+            const finalCanvas = document.createElement('canvas');
+            finalCanvas.width = width;
+            finalCanvas.height = height;
+            const finalCtx = finalCanvas.getContext('2d');
+            if (finalCtx) {
+                finalCtx.drawImage(screenshotCanvas, 0, 0, width, height);
+                screenshotCanvas.width = width;
+                screenshotCanvas.height = height;
+                ctx.drawImage(finalCanvas, 0, 0);
+            }
+        }
+        // Convert to desired format
+        const mimeType = this.getMimeType(this.settings.format);
+        const quality = this.settings.format === 'png' ? undefined : this.settings.quality / 100;
+        const dataUrl = screenshotCanvas.toDataURL(mimeType, quality);
+        // Create result
+        const result = {
+            id: `screenshot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            dataUrl,
+            width: this.settings.resolution.width,
+            height: this.settings.resolution.height,
+            format: this.settings.format,
+            takenAt: Date.now(),
+            cameraState: { ...this.freeCamera },
+            settings: JSON.parse(JSON.stringify(this.settings)),
+            metadata,
+        };
+        // Convert to blob
+        try {
+            const response = await fetch(dataUrl);
+            result.blob = await response.blob();
+        }
+        catch {
+            // Blob creation failed, dataUrl is still available
+        }
+        this.screenshots.push(result);
+        this.onScreenshotTaken?.(result);
+        return result;
+    }
+    getMimeType(format) {
+        switch (format) {
+            case 'png':
+                return 'image/png';
+            case 'jpg':
+                return 'image/jpeg';
+            case 'webp':
+                return 'image/webp';
+            default:
+                return 'image/png';
+        }
+    }
+    async applyWatermark(ctx, width, height) {
+        const wm = this.settings.watermark;
+        ctx.save();
+        ctx.globalAlpha = wm.opacity;
+        // Calculate position
+        let x = wm.padding;
+        let y = wm.padding;
+        if (wm.position.includes('right')) {
+            x = width - wm.padding;
+        }
+        if (wm.position.includes('bottom')) {
+            y = height - wm.padding;
+        }
+        if (wm.position === 'center') {
+            x = width / 2;
+            y = height / 2;
+        }
+        if (wm.text) {
+            const fontSize = 24 * wm.scale;
+            ctx.font = `${fontSize}px Arial`;
+            ctx.fillStyle = 'white';
+            ctx.strokeStyle = 'black';
+            ctx.lineWidth = 2;
+            ctx.textAlign = wm.position.includes('right')
+                ? 'right'
+                : wm.position === 'center'
+                    ? 'center'
+                    : 'left';
+            ctx.textBaseline = wm.position.includes('bottom')
+                ? 'bottom'
+                : wm.position === 'center'
+                    ? 'middle'
+                    : 'top';
+            ctx.strokeText(wm.text, x, y);
+            ctx.fillText(wm.text, x, y);
+        }
+        if (wm.imageUrl) {
+            try {
+                const img = await this.loadImage(wm.imageUrl);
+                const imgWidth = img.width * wm.scale;
+                const imgHeight = img.height * wm.scale;
+                let imgX = x;
+                let imgY = y;
+                if (wm.position.includes('right')) {
+                    imgX -= imgWidth;
+                }
+                if (wm.position.includes('bottom')) {
+                    imgY -= imgHeight;
+                }
+                if (wm.position === 'center') {
+                    imgX -= imgWidth / 2;
+                    imgY -= imgHeight / 2;
+                }
+                ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight);
+            }
+            catch {
+                // Image load failed, skip watermark image
+            }
+        }
+        ctx.restore();
+    }
+    loadImage(url) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = url;
+        });
+    }
+    // ─── Screenshot Management ─────────────────────────────
+    getScreenshots() {
+        return [...this.screenshots];
+    }
+    getScreenshotById(id) {
+        return this.screenshots.find((s) => s.id === id);
+    }
+    deleteScreenshot(id) {
+        const index = this.screenshots.findIndex((s) => s.id === id);
+        if (index === -1) {
+            return false;
+        }
+        this.screenshots.splice(index, 1);
+        return true;
+    }
+    clearScreenshots() {
+        this.screenshots = [];
+    }
+    async downloadScreenshot(id, filename) {
+        const screenshot = this.getScreenshotById(id);
+        if (!screenshot) {
+            return false;
+        }
+        const name = filename ?? `screenshot_${screenshot.takenAt}.${screenshot.format}`;
+        const link = document.createElement('a');
+        link.href = screenshot.dataUrl;
+        link.download = name;
+        link.click();
+        return true;
+    }
+    // ─── Settings ──────────────────────────────────────────
+    getSettings() {
+        return JSON.parse(JSON.stringify(this.settings));
+    }
+    setSettings(settings) {
+        this.settings = { ...this.settings, ...settings };
+        this.applyFilter();
+        this.onSettingsChanged?.(this.settings);
+    }
+    resetSettings() {
+        this.settings = this.getDefaultSettings();
+        this.applyFilter();
+        this.onSettingsChanged?.(this.settings);
+    }
+    getDefaultSettings() {
+        return {
+            format: 'png',
+            quality: 95,
+            resolution: { ...DEFAULT_RESOLUTION },
+            filter: { type: 'none', intensity: 1, customSettings: { ...DEFAULT_CUSTOM_FILTER } },
+            dof: { ...DEFAULT_DOF_SETTINGS },
+            compositionGuide: 'none',
+            watermark: { ...DEFAULT_WATERMARK },
+            includeTimestamp: false,
+            includeMetadata: true,
+        };
+    }
+    // ─── Composition Guide Rendering ───────────────────────
+    renderCompositionGuide(ctx, width, height) {
+        const guide = this.settings.compositionGuide;
+        if (guide === 'none') {
+            return;
+        }
+        ctx.save();
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+        ctx.lineWidth = 1;
+        switch (guide) {
+            case 'rule_of_thirds':
+                this.drawThirdsGrid(ctx, width, height);
+                break;
+            case 'golden_ratio':
+                this.drawGoldenRatio(ctx, width, height);
+                break;
+            case 'diagonal':
+                this.drawDiagonals(ctx, width, height);
+                break;
+            case 'center':
+                this.drawCenterGuides(ctx, width, height);
+                break;
+            case 'triangle':
+                this.drawTriangle(ctx, width, height);
+                break;
+            case 'symmetry':
+                this.drawSymmetry(ctx, width, height);
+                break;
+        }
+        ctx.restore();
+    }
+    drawThirdsGrid(ctx, w, h) {
+        const thirdW = w / 3;
+        const thirdH = h / 3;
+        ctx.beginPath();
+        ctx.moveTo(thirdW, 0);
+        ctx.lineTo(thirdW, h);
+        ctx.moveTo(thirdW * 2, 0);
+        ctx.lineTo(thirdW * 2, h);
+        ctx.moveTo(0, thirdH);
+        ctx.lineTo(w, thirdH);
+        ctx.moveTo(0, thirdH * 2);
+        ctx.lineTo(w, thirdH * 2);
+        ctx.stroke();
+    }
+    drawGoldenRatio(ctx, w, h) {
+        const phi = 1.618;
+        const goldenW = w / phi;
+        const goldenH = h / phi;
+        ctx.beginPath();
+        ctx.moveTo(goldenW, 0);
+        ctx.lineTo(goldenW, h);
+        ctx.moveTo(w - goldenW, 0);
+        ctx.lineTo(w - goldenW, h);
+        ctx.moveTo(0, goldenH);
+        ctx.lineTo(w, goldenH);
+        ctx.moveTo(0, h - goldenH);
+        ctx.lineTo(w, h - goldenH);
+        ctx.stroke();
+    }
+    drawDiagonals(ctx, w, h) {
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(w, h);
+        ctx.moveTo(w, 0);
+        ctx.lineTo(0, h);
+        ctx.stroke();
+    }
+    drawCenterGuides(ctx, w, h) {
+        ctx.beginPath();
+        ctx.moveTo(w / 2, 0);
+        ctx.lineTo(w / 2, h);
+        ctx.moveTo(0, h / 2);
+        ctx.lineTo(w, h / 2);
+        ctx.stroke();
+        // Center crosshair
+        const size = Math.min(w, h) * 0.05;
+        ctx.arc(w / 2, h / 2, size, 0, Math.PI * 2);
+        ctx.stroke();
+    }
+    drawTriangle(ctx, w, h) {
+        ctx.beginPath();
+        ctx.moveTo(0, h);
+        ctx.lineTo(w, h);
+        ctx.lineTo(w / 2, 0);
+        ctx.closePath();
+        ctx.stroke();
+    }
+    drawSymmetry(ctx, w, h) {
+        ctx.beginPath();
+        ctx.moveTo(w / 2, 0);
+        ctx.lineTo(w / 2, h);
+        ctx.stroke();
+    }
+    // ─── Callbacks ─────────────────────────────────────────
+    setOnModeActivated(callback) {
+        this.onModeActivated = callback;
+    }
+    setOnModeDeactivated(callback) {
+        this.onModeDeactivated = callback;
+    }
+    setOnCameraChanged(callback) {
+        this.onCameraChanged = callback;
+    }
+    setOnSettingsChanged(callback) {
+        this.onSettingsChanged = callback;
+    }
+    setOnScreenshotTaken(callback) {
+        this.onScreenshotTaken = callback;
+    }
+    setCaptureCanvas(fn) {
+        this.captureCanvas = fn;
+    }
+    setRenderFilterCallback(fn) {
+        this.setRenderFilter = fn;
+    }
+    setUIVisibilityCallback(fn) {
+        this.setUIVisibility = fn;
+    }
+    setPauseGame(fn) {
+        this.pauseGame = fn;
+    }
+    setResumeGame(fn) {
+        this.resumeGame = fn;
+    }
+}
+// ============================================================
+// Factory Functions
+// ============================================================
+function createScreenshotMode() {
+    return new ScreenshotMode();
+}
+
+export { DEFAULT_CUSTOM_FILTER, DEFAULT_DOF_SETTINGS, DEFAULT_RESOLUTION, DEFAULT_WATERMARK, FILTER_PRESETS, ScreenshotMode, createScreenshotMode };
+//# sourceMappingURL=ScreenshotMode.js.map