@fps-games/editor 0.1.3-beta.3 → 0.1.4-beta.1

package/node_modules/@fps-games/editor-browser/dist/runtime-camera-debug-panel.js

@@ -0,0 +1,685 @@
+import { canHandleEditorSceneCameraDebugPanKey, cloneEditorSceneCameraDebugSnapshot, cloneEditorSceneCameraDebugTarget, createEditorSceneCameraDebugPanelNumberFields, createEditorSceneCameraDebugPanelRangeFieldEnds, createEditorSceneCameraDebugPanelRangeFieldPairs, formatEditorSceneCameraDebugCoordinate, formatEditorSceneCameraDebugErrorMessage, getEditorSceneCameraDebugText, getEditorSceneCameraDebugTooltips, isEditorSceneCameraDebugPanelFieldVisible, isEditorSceneCameraDebugPanKey, readEditorSceneCameraDebugPanelInputSnapshot, readEditorSceneCameraDebugProjectionSelectValue, readEditorSceneCameraDebugSnapshotField, readEditorSceneCameraDebugStoredLanguage, readEditorSceneCameraDebugStoredOpen, roundEditorSceneCameraDebugNumber, toEditorSceneCameraRig, writeEditorSceneCameraDebugStoredLanguage, writeEditorSceneCameraDebugStoredOpen, } from '@fps-games/editor-playable-sdk';
+import { createEditorRuntimeDebugPanelButton, createEditorRuntimeDebugPanelInputStyle, createEditorRuntimeDebugPanelLabel, createEditorRuntimeDebugPanelNumberInput, createEditorRuntimeDebugPanelSelect, mountEditorRuntimeDebugPanelShell, } from './runtime-debug-panel-shell.js';
+const DEFAULT_CAMERA_DEBUG_STORAGE_KEY = 'fps-editor.camera-debug.open';
+const DEFAULT_CAMERA_DEBUG_LANGUAGE_STORAGE_KEY = 'fps-editor.camera-debug.language';
+const CAMERA_NUMBER_FIELDS = createEditorSceneCameraDebugPanelNumberFields();
+const CAMERA_DEBUG_RANGE_FIELD_PAIRS = createEditorSceneCameraDebugPanelRangeFieldPairs();
+const CAMERA_DEBUG_RANGE_FIELD_ENDS = createEditorSceneCameraDebugPanelRangeFieldEnds();
+const CAMERA_DEBUG_TARGET_MARKER_Y_OFFSET = 0.32;
+const CAMERA_DEBUG_TARGET_MARKER_ARM_LENGTH = 0.16;
+const CAMERA_DEBUG_TARGET_MARKER_ARM_GAP = 0.02;
+const CAMERA_DEBUG_TARGET_MARKER_ARM_HEIGHT = 0.2;
+const CAMERA_DEBUG_TARGET_LABEL_MIN_GAP_PX = 8;
+const CAMERA_DEBUG_TARGET_LABEL_MAX_GAP_PX = 20;
+export function mountEditorRuntimeCameraDebugPanel(options) {
+    const root = options.root ?? document.body;
+    const ownerDocument = root.ownerDocument;
+    const storageKey = options.storageKey ?? DEFAULT_CAMERA_DEBUG_STORAGE_KEY;
+    const languageStorageKey = options.languageStorageKey ?? DEFAULT_CAMERA_DEBUG_LANGUAGE_STORAGE_KEY;
+    let language = readEditorSceneCameraDebugStoredLanguage(ownerDocument.defaultView, languageStorageKey);
+    let disposed = false;
+    let saving = false;
+    let initialSnapshot = null;
+    let latestSnapshot = null;
+    let cameraPanRestoreTarget = null;
+    let targetCoordinateLabel = null;
+    let targetCoordinate = null;
+    let compositionLinesEnabled = false;
+    let compositionOverlay = null;
+    let frameHandle = 0;
+    let lastFrameTime = 0;
+    const pressedPanKeys = new Set();
+    const shell = mountEditorRuntimeDebugPanelShell({
+        root,
+        toggleLabel: 'Camera',
+        title: text().title,
+        modeLabel: text().runtime,
+        languageButtonLabel: text().languageButton,
+        toggleTooltip: tooltips().toggleTitle,
+        languageTooltip: tooltips().languageButton,
+        tooltipDataAttribute: 'cameraDebugTooltip',
+        tooltipDelayMs: 140,
+        initialOpen: readEditorSceneCameraDebugStoredOpen(ownerDocument.defaultView, storageKey),
+        language,
+        placement: {
+            right: 16,
+            width: 320,
+            ...options.placement,
+        },
+        onOpenChange: open => {
+            writeEditorSceneCameraDebugStoredOpen(ownerDocument.defaultView, storageKey, open);
+            renderOpenState();
+        },
+    });
+    const grid = ownerDocument.createElement('div');
+    grid.style.cssText = 'display:grid;grid-template-columns:1fr 108px;gap:7px 8px;align-items:center;';
+    const projectionLabel = createEditorRuntimeDebugPanelLabel(ownerDocument);
+    const projectionSelect = createEditorRuntimeDebugPanelSelect(ownerDocument);
+    projectionSelect.addEventListener('change', () => applyInputSnapshot());
+    grid.append(projectionLabel, projectionSelect);
+    const fields = new Map();
+    const fieldRows = new Map();
+    const rangeRows = [];
+    for (const config of CAMERA_NUMBER_FIELDS) {
+        if (CAMERA_DEBUG_RANGE_FIELD_ENDS.has(config.field))
+            continue;
+        const rangePair = CAMERA_DEBUG_RANGE_FIELD_PAIRS.find(pair => pair.lower === config.field);
+        if (rangePair) {
+            const upperConfig = CAMERA_NUMBER_FIELDS.find(candidate => candidate.field === rangePair.upper);
+            if (!upperConfig)
+                continue;
+            const label = createEditorRuntimeDebugPanelLabel(ownerDocument);
+            const wrapper = ownerDocument.createElement('div');
+            wrapper.style.cssText = 'display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:108px;';
+            const lowerInput = createCameraNumberInput(config, { compact: true });
+            const upperInput = createCameraNumberInput(upperConfig, { compact: true });
+            fields.set(config.field, lowerInput);
+            fields.set(upperConfig.field, upperInput);
+            rangeRows.push({
+                label,
+                wrapper,
+                labelKey: rangePair.labelKey,
+                tooltipKey: rangePair.tooltipKey,
+                lowerConfig: config,
+                upperConfig,
+                lowerInput,
+                upperInput,
+            });
+            wrapper.append(lowerInput, upperInput);
+            grid.append(label, wrapper);
+            continue;
+        }
+        const label = createEditorRuntimeDebugPanelLabel(ownerDocument);
+        const input = createCameraNumberInput(config);
+        fields.set(config.field, input);
+        fieldRows.set(config.field, { label, input, config });
+        grid.append(label, input);
+    }
+    const panHint = ownerDocument.createElement('div');
+    panHint.style.cssText = 'margin-top:10px;font-size:11px;line-height:1.35;color:#9fb2d0;';
+    const viewTools = ownerDocument.createElement('div');
+    viewTools.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;';
+    const compositionButton = createEditorRuntimeDebugPanelButton(ownerDocument);
+    const screenshotButton = createEditorRuntimeDebugPanelButton(ownerDocument);
+    viewTools.append(compositionButton, screenshotButton);
+    const resetButton = createEditorRuntimeDebugPanelButton(ownerDocument);
+    const saveButton = createEditorRuntimeDebugPanelButton(ownerDocument);
+    shell.actions.append(resetButton, saveButton);
+    shell.content.append(grid, panHint, viewTools);
+    shell.languageButton.addEventListener('click', () => {
+        language = language === 'zh' ? 'en' : 'zh';
+        writeEditorSceneCameraDebugStoredLanguage(ownerDocument.defaultView, languageStorageKey, language);
+        renderLanguage();
+        syncVisibleFields(latestSnapshot?.projection ?? readProjectionSelectValue());
+    });
+    compositionButton.addEventListener('click', () => {
+        compositionLinesEnabled = !compositionLinesEnabled;
+        renderCompositionLinesState();
+        updateCompositionOverlay();
+    });
+    screenshotButton.addEventListener('click', () => {
+        void captureCameraViewportScreenshot();
+    });
+    resetButton.addEventListener('click', () => {
+        if (!initialSnapshot || saving)
+            return;
+        setInputs(initialSnapshot);
+        applySnapshot(initialSnapshot, { restoreTarget: true });
+        cameraPanRestoreTarget = cloneEditorSceneCameraDebugTarget(initialSnapshot.target);
+        updateTargetMarker(initialSnapshot.target);
+        shell.setStatus(text().resetStatus);
+    });
+    saveButton.addEventListener('click', () => {
+        const snapshot = latestSnapshot ?? options.readSnapshot();
+        if (!snapshot || saving || !snapshot.binding)
+            return;
+        saving = true;
+        syncPanel(snapshot);
+        shell.setStatus(text().savingStatus, { sticky: true });
+        void Promise.resolve(options.saveRig(snapshot.binding, toEditorSceneCameraRig(snapshot)))
+            .then(() => {
+            shell.setStatus(text().savedStatus, { sticky: true });
+            if (options.reloadAfterSave !== false)
+                ownerDocument.defaultView?.location.reload();
+        })
+            .catch((error) => {
+            console.error('[EditorRuntimeCameraDebugPanel] Save rig failed', error);
+            saving = false;
+            shell.setStatus(formatEditorSceneCameraDebugErrorMessage(error, text().saveFailed), { sticky: true, tone: 'error' });
+            syncPanel(latestSnapshot);
+        });
+    });
+    ownerDocument.defaultView?.addEventListener('keydown', handlePanKeyDown, { capture: true });
+    ownerDocument.defaultView?.addEventListener('keyup', handlePanKeyUp, { capture: true });
+    ownerDocument.defaultView?.addEventListener('blur', clearPanKeys);
+    renderLanguage();
+    renderOpenState();
+    frameHandle = ownerDocument.defaultView?.requestAnimationFrame(tick) ?? 0;
+    return {
+        dispose() {
+            disposed = true;
+            stopCameraPanMode();
+            disposeCompositionOverlay();
+            if (frameHandle)
+                ownerDocument.defaultView?.cancelAnimationFrame(frameHandle);
+            ownerDocument.defaultView?.removeEventListener('keydown', handlePanKeyDown, { capture: true });
+            ownerDocument.defaultView?.removeEventListener('keyup', handlePanKeyUp, { capture: true });
+            ownerDocument.defaultView?.removeEventListener('blur', clearPanKeys);
+            shell.dispose();
+        },
+    };
+    function tick(time) {
+        if (disposed)
+            return;
+        const deltaSeconds = lastFrameTime > 0
+            ? Math.min(0.05, Math.max(0, (time - lastFrameTime) / 1000))
+            : 0;
+        lastFrameTime = time;
+        const snapshot = options.readSnapshot();
+        if (!snapshot) {
+            initialSnapshot = null;
+            latestSnapshot = null;
+        }
+        else {
+            if (!initialSnapshot)
+                initialSnapshot = cloneEditorSceneCameraDebugSnapshot(snapshot);
+            latestSnapshot = cloneEditorSceneCameraDebugSnapshot(snapshot);
+        }
+        syncPanel(snapshot);
+        applyCameraPan(deltaSeconds);
+        updateTargetCoordinateLabel();
+        updateCompositionOverlay();
+        frameHandle = ownerDocument.defaultView?.requestAnimationFrame(tick) ?? 0;
+    }
+    function syncPanel(snapshot) {
+        shell.container.style.display = snapshot ? 'flex' : 'none';
+        if (!snapshot) {
+            shell.hideTooltip();
+            stopCameraPanMode();
+            return;
+        }
+        if (shell.open)
+            startCameraPanMode(snapshot);
+        else
+            stopCameraPanMode();
+        for (const input of fields.values())
+            input.disabled = saving;
+        projectionSelect.disabled = saving;
+        resetButton.disabled = !initialSnapshot || saving;
+        saveButton.disabled = saving || !snapshot.binding;
+        saveButton.style.opacity = saveButton.disabled ? '0.68' : '1';
+        saveButton.style.cursor = saveButton.disabled ? 'not-allowed' : 'pointer';
+        syncVisibleFields(snapshot.projection);
+        if (isPanelInputActive())
+            return;
+        setInputs(snapshot);
+    }
+    function applyInputSnapshot() {
+        if (saving)
+            return;
+        const current = latestSnapshot ?? options.readSnapshot();
+        if (!current)
+            return;
+        const next = readInputs(current);
+        syncVisibleFields(next.projection);
+        applySnapshot(next);
+        syncInputsExceptActive(next);
+    }
+    function applySnapshot(snapshot, applyOptions = {}) {
+        options.applyRig(snapshot, createSnapshotTarget(snapshot));
+        latestSnapshot = cloneEditorSceneCameraDebugSnapshot(snapshot);
+        if (applyOptions.restoreTarget)
+            updateTargetMarker(snapshot.target);
+    }
+    function setInputs(snapshot) {
+        projectionSelect.value = snapshot.projection;
+        for (const config of CAMERA_NUMBER_FIELDS) {
+            setInputValue(config.field, readEditorSceneCameraDebugSnapshotField(snapshot, config.field));
+        }
+    }
+    function setInputValue(field, value) {
+        const input = fields.get(field);
+        if (!input)
+            return;
+        input.value = value == null ? '' : String(roundEditorSceneCameraDebugNumber(value));
+    }
+    function syncInputsExceptActive(snapshot) {
+        const active = ownerDocument.activeElement;
+        if (active !== projectionSelect)
+            projectionSelect.value = snapshot.projection;
+        for (const config of CAMERA_NUMBER_FIELDS) {
+            const input = fields.get(config.field);
+            if (!input || active === input)
+                continue;
+            setInputValue(config.field, readEditorSceneCameraDebugSnapshotField(snapshot, config.field));
+        }
+    }
+    function readInputs(fallback) {
+        const values = {
+            projection: projectionSelect.value,
+        };
+        for (const [field, input] of fields)
+            values[field] = input.value;
+        return readEditorSceneCameraDebugPanelInputSnapshot(fallback, values, {
+            activeField: readActiveNumberField(),
+        });
+    }
+    function readActiveNumberField() {
+        const active = ownerDocument.activeElement;
+        for (const [field, input] of fields) {
+            if (active === input)
+                return field;
+        }
+        return null;
+    }
+    function readProjectionSelectValue() {
+        return readEditorSceneCameraDebugProjectionSelectValue(projectionSelect.value);
+    }
+    function createCameraNumberInput(config, inputOptions = {}) {
+        const input = createEditorRuntimeDebugPanelNumberInput(ownerDocument, config);
+        input.style.cssText = inputOptions.compact
+            ? createEditorRuntimeDebugPanelInputStyle().replace('width:108px', 'width:100%')
+            : createEditorRuntimeDebugPanelInputStyle();
+        input.addEventListener('input', () => applyInputSnapshot());
+        return input;
+    }
+    function syncVisibleFields(projection) {
+        for (const { label, input, config } of fieldRows.values()) {
+            const visible = isEditorSceneCameraDebugPanelFieldVisible(config, projection);
+            label.style.display = visible ? '' : 'none';
+            input.style.display = visible ? '' : 'none';
+        }
+        for (const { label, wrapper, lowerConfig, upperConfig } of rangeRows) {
+            const visible = [lowerConfig, upperConfig].every(config => isEditorSceneCameraDebugPanelFieldVisible(config, projection));
+            label.style.display = visible ? '' : 'none';
+            wrapper.style.display = visible ? 'grid' : 'none';
+        }
+    }
+    function renderOpenState() {
+        const snapshot = latestSnapshot ?? options.readSnapshot();
+        if (shell.open && snapshot)
+            startCameraPanMode(snapshot);
+        if (!shell.open) {
+            shell.hideTooltip();
+            stopCameraPanMode();
+            disposeCompositionOverlay();
+        }
+    }
+    function renderLanguage() {
+        const copy = text();
+        const hints = tooltips();
+        const currentProjection = readProjectionSelectValue();
+        shell.setLanguageChrome({
+            title: copy.title,
+            modeLabel: copy.runtime,
+            languageButtonLabel: copy.languageButton,
+            toggleTooltip: hints.toggleTitle,
+            languageTooltip: hints.languageButton,
+            language,
+        });
+        projectionLabel.textContent = copy.projection;
+        shell.setTooltip(projectionLabel, hints.projection);
+        shell.setTooltip(projectionSelect, hints.projection);
+        projectionSelect.innerHTML = '';
+        for (const option of [
+            { label: copy.orthographic, value: 'orthographic' },
+            { label: copy.perspective, value: 'perspective' },
+        ]) {
+            const optionEl = ownerDocument.createElement('option');
+            optionEl.value = option.value;
+            optionEl.textContent = option.label;
+            projectionSelect.append(optionEl);
+        }
+        projectionSelect.value = latestSnapshot?.projection ?? currentProjection;
+        for (const { label, input, config } of fieldRows.values()) {
+            const hint = hints[config.textKey];
+            label.textContent = copy[config.textKey];
+            shell.setTooltip(label, hint ?? '');
+            shell.setTooltip(input, hint ?? '');
+        }
+        for (const row of rangeRows) {
+            const rangeHint = hints[row.tooltipKey];
+            const lowerHint = hints[row.lowerConfig.textKey];
+            const upperHint = hints[row.upperConfig.textKey];
+            row.label.textContent = copy[row.labelKey];
+            row.lowerInput.placeholder = copy[row.lowerConfig.textKey];
+            row.upperInput.placeholder = copy[row.upperConfig.textKey];
+            shell.setTooltip(row.label, rangeHint);
+            shell.setTooltip(row.wrapper, rangeHint);
+            shell.setTooltip(row.lowerInput, lowerHint ?? rangeHint);
+            shell.setTooltip(row.upperInput, upperHint ?? rangeHint);
+        }
+        panHint.textContent = copy.panHint;
+        shell.setTooltip(panHint, hints.panHint);
+        compositionButton.textContent = copy.compositionLines;
+        compositionButton.setAttribute('aria-label', hints.compositionLines);
+        shell.setTooltip(compositionButton, hints.compositionLines);
+        screenshotButton.textContent = copy.screenshot;
+        screenshotButton.setAttribute('aria-label', hints.screenshot);
+        shell.setTooltip(screenshotButton, hints.screenshot);
+        renderCompositionLinesState();
+        resetButton.textContent = copy.reset;
+        shell.setTooltip(resetButton, hints.reset);
+        saveButton.textContent = copy.save;
+        shell.setTooltip(saveButton, hints.save);
+        updateTargetCoordinateLabel();
+    }
+    function startCameraPanMode(snapshot) {
+        if (!cameraPanRestoreTarget)
+            cameraPanRestoreTarget = cloneEditorSceneCameraDebugTarget(snapshot.target);
+        updateTargetMarker(snapshot.target);
+    }
+    function stopCameraPanMode() {
+        clearPanKeys();
+        const restoreTarget = cameraPanRestoreTarget;
+        cameraPanRestoreTarget = null;
+        options.disposeTargetMarker?.();
+        targetCoordinate = null;
+        disposeTargetCoordinateLabel();
+        if (!restoreTarget)
+            return;
+        const current = latestSnapshot ?? options.readSnapshot();
+        if (!current)
+            return;
+        const restoreSnapshot = {
+            ...current,
+            target: { ...restoreTarget },
+            targetOffset: { ...restoreTarget },
+        };
+        options.applyRig(restoreSnapshot, restoreTarget);
+        latestSnapshot = cloneEditorSceneCameraDebugSnapshot(restoreSnapshot);
+    }
+    function handlePanKeyDown(event) {
+        const key = event.key.toLowerCase();
+        if (!canHandlePanKey(event, key))
+            return;
+        pressedPanKeys.add(key);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    function handlePanKeyUp(event) {
+        const key = event.key.toLowerCase();
+        if (!isEditorSceneCameraDebugPanKey(key))
+            return;
+        pressedPanKeys.delete(key);
+        if (!isCameraPanModeActive() || isEditableElement(event.target))
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    function canHandlePanKey(event, key) {
+        return canHandleEditorSceneCameraDebugPanKey({
+            key,
+            active: isCameraPanModeActive(),
+            saving,
+            editable: isEditableElement(event.target),
+            metaKey: event.metaKey,
+            ctrlKey: event.ctrlKey,
+            altKey: event.altKey,
+        });
+    }
+    function isCameraPanModeActive() {
+        return shell.open && !!cameraPanRestoreTarget && !saving;
+    }
+    function clearPanKeys() {
+        pressedPanKeys.clear();
+    }
+    function applyCameraPan(deltaSeconds) {
+        if (!isCameraPanModeActive() || deltaSeconds <= 0 || pressedPanKeys.size === 0 || !latestSnapshot)
+            return;
+        const snapshot = options.translateCameraOnPlane({
+            pressedKeys: pressedPanKeys,
+            deltaSeconds,
+            snapshot: latestSnapshot,
+        });
+        if (!snapshot)
+            return;
+        latestSnapshot = cloneEditorSceneCameraDebugSnapshot(snapshot);
+        updateTargetMarker(snapshot.target);
+    }
+    function createSnapshotTarget(snapshot) {
+        return { ...(snapshot.targetOffset ?? snapshot.target) };
+    }
+    function updateTargetMarker(target) {
+        if (!shell.open)
+            return;
+        options.createTargetMarker?.(target);
+        targetCoordinate = cloneEditorSceneCameraDebugTarget(target);
+        updateTargetCoordinateLabel(target);
+    }
+    function ensureTargetCoordinateLabel() {
+        if (targetCoordinateLabel)
+            return targetCoordinateLabel;
+        const label = ownerDocument.createElement('div');
+        label.style.cssText = [
+            'position:fixed',
+            'z-index:2147482599',
+            'display:none',
+            'box-sizing:border-box',
+            'max-width:min(280px, calc(100vw - 24px))',
+            'padding:3px 6px',
+            'border:1px solid rgba(248, 113, 113, 0.55)',
+            'border-radius:5px',
+            'background:rgba(15, 23, 42, 0.86)',
+            'box-shadow:0 8px 22px rgba(0, 0, 0, 0.28)',
+            'color:#fecaca',
+            'font:700 10px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            'line-height:1.25',
+            'letter-spacing:0',
+            'white-space:nowrap',
+            'pointer-events:none',
+            'transform:translate(-50%, -100%)',
+        ].join(';');
+        root.append(label);
+        targetCoordinateLabel = label;
+        return label;
+    }
+    function updateTargetCoordinateLabel(target = targetCoordinate) {
+        if (!shell.open || !target) {
+            hideTargetCoordinateLabel();
+            return;
+        }
+        const labelAnchor = projectTargetLabelAnchorToScreen(target);
+        if (!labelAnchor) {
+            hideTargetCoordinateLabel();
+            return;
+        }
+        const label = ensureTargetCoordinateLabel();
+        label.textContent = formatTargetCoordinateLabel(target);
+        label.style.left = `${labelAnchor.x}px`;
+        label.style.top = `${labelAnchor.y}px`;
+        label.style.display = '';
+    }
+    function hideTargetCoordinateLabel() {
+        if (targetCoordinateLabel)
+            targetCoordinateLabel.style.display = 'none';
+    }
+    function disposeTargetCoordinateLabel() {
+        targetCoordinateLabel?.remove();
+        targetCoordinateLabel = null;
+    }
+    function renderCompositionLinesState() {
+        compositionButton.setAttribute('aria-pressed', String(compositionLinesEnabled));
+        compositionButton.style.background = compositionLinesEnabled
+            ? 'rgba(29, 78, 216, 0.92)'
+            : 'rgba(30, 41, 59, 0.86)';
+    }
+    function ensureCompositionOverlay() {
+        if (compositionOverlay)
+            return compositionOverlay;
+        const overlay = ownerDocument.createElement('div');
+        overlay.style.cssText = [
+            'position:fixed',
+            'z-index:2147482498',
+            'display:none',
+            'pointer-events:none',
+            'box-sizing:border-box',
+            'border:1px solid rgba(248, 250, 252, 0.42)',
+            'box-shadow:inset 0 0 0 1px rgba(15, 23, 42, 0.24)',
+            'background-repeat:no-repeat',
+        ].join(';');
+        overlay.style.backgroundImage = [
+            'linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(248, 250, 252, 0.7) calc(33.333% - 0.5px), rgba(248, 250, 252, 0.7) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px))',
+            'linear-gradient(to right, transparent calc(66.666% - 0.5px), rgba(248, 250, 252, 0.7) calc(66.666% - 0.5px), rgba(248, 250, 252, 0.7) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px))',
+            'linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(248, 250, 252, 0.7) calc(33.333% - 0.5px), rgba(248, 250, 252, 0.7) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px))',
+            'linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(248, 250, 252, 0.7) calc(66.666% - 0.5px), rgba(248, 250, 252, 0.7) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px))',
+            'linear-gradient(to right, transparent calc(50% - 0.5px), rgba(56, 189, 248, 0.62) calc(50% - 0.5px), rgba(56, 189, 248, 0.62) calc(50% + 0.5px), transparent calc(50% + 0.5px))',
+            'linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(56, 189, 248, 0.62) calc(50% - 0.5px), rgba(56, 189, 248, 0.62) calc(50% + 0.5px), transparent calc(50% + 0.5px))',
+        ].join(',');
+        root.append(overlay);
+        compositionOverlay = overlay;
+        return overlay;
+    }
+    function updateCompositionOverlay() {
+        if (!shell.open || !compositionLinesEnabled) {
+            disposeCompositionOverlay();
+            return;
+        }
+        const rect = options.getViewportRect?.() ?? readCanvasViewportRect(options.getCanvas());
+        if (!rect) {
+            disposeCompositionOverlay();
+            return;
+        }
+        if (rect.width <= 0 || rect.height <= 0) {
+            disposeCompositionOverlay();
+            return;
+        }
+        const overlay = ensureCompositionOverlay();
+        overlay.style.left = `${rect.left}px`;
+        overlay.style.top = `${rect.top}px`;
+        overlay.style.width = `${rect.width}px`;
+        overlay.style.height = `${rect.height}px`;
+        overlay.style.display = '';
+    }
+    function disposeCompositionOverlay() {
+        compositionOverlay?.remove();
+        compositionOverlay = null;
+    }
+    async function captureCameraViewportScreenshot() {
+        try {
+            const canvas = options.getCanvas();
+            if (!canvas)
+                throw new Error('Camera viewport canvas is not available.');
+            const url = await readCanvasPngDataUrl(canvas);
+            const link = ownerDocument.createElement('a');
+            link.href = url;
+            link.download = `camera-view-${formatScreenshotTimestamp(new Date())}.png`;
+            root.append(link);
+            link.click();
+            link.remove();
+            if (url.startsWith('blob:'))
+                ownerDocument.defaultView?.setTimeout(() => URL.revokeObjectURL(url), 1000);
+            shell.setStatus(text().screenshotSaved);
+        }
+        catch (error) {
+            console.error('[EditorRuntimeCameraDebugPanel] Screenshot failed', error);
+            shell.setStatus(formatEditorSceneCameraDebugErrorMessage(error, text().screenshotFailed), { tone: 'error' });
+        }
+    }
+    function projectTargetLabelAnchorToScreen(target) {
+        const targetScreen = options.projectTargetToScreen?.(target);
+        if (!targetScreen || targetScreen.depth < 0 || targetScreen.depth > 1)
+            return null;
+        const markerScreens = getTargetMarkerWorldPoints(target)
+            .map(point => options.projectTargetToScreen?.(point))
+            .filter((point) => !!point && point.depth >= 0 && point.depth <= 1);
+        if (markerScreens.length === 0)
+            return {
+                x: targetScreen.x,
+                y: targetScreen.y - CAMERA_DEBUG_TARGET_LABEL_MIN_GAP_PX,
+            };
+        const minX = Math.min(...markerScreens.map(point => point.x));
+        const maxX = Math.max(...markerScreens.map(point => point.x));
+        const minY = Math.min(...markerScreens.map(point => point.y));
+        const markerHeight = Math.max(0, Math.max(...markerScreens.map(point => point.y)) - minY);
+        const gap = Math.min(CAMERA_DEBUG_TARGET_LABEL_MAX_GAP_PX, Math.max(CAMERA_DEBUG_TARGET_LABEL_MIN_GAP_PX, markerHeight * 0.25));
+        return {
+            x: (minX + maxX) / 2,
+            y: minY - gap,
+        };
+    }
+    function getTargetMarkerWorldPoints(target) {
+        const armExtent = CAMERA_DEBUG_TARGET_MARKER_ARM_GAP + CAMERA_DEBUG_TARGET_MARKER_ARM_LENGTH;
+        const centerY = target.y + CAMERA_DEBUG_TARGET_MARKER_Y_OFFSET;
+        const halfHeight = CAMERA_DEBUG_TARGET_MARKER_ARM_HEIGHT / 2;
+        return [
+            { x: target.x, y: target.y, z: target.z },
+            { x: target.x - armExtent, y: centerY, z: target.z },
+            { x: target.x + armExtent, y: centerY, z: target.z },
+            { x: target.x, y: centerY, z: target.z - armExtent },
+            { x: target.x, y: centerY, z: target.z + armExtent },
+            { x: target.x, y: centerY - halfHeight, z: target.z },
+            { x: target.x, y: centerY + halfHeight, z: target.z },
+        ];
+    }
+    function formatTargetCoordinateLabel(target) {
+        return `position: (${formatEditorSceneCameraDebugCoordinate(target.x)}, ${formatEditorSceneCameraDebugCoordinate(target.y)}, ${formatEditorSceneCameraDebugCoordinate(target.z)})`;
+    }
+    function isPanelInputActive() {
+        return ownerDocument.activeElement === projectionSelect
+            || ownerDocument.activeElement === shell.languageButton
+            || [...fields.values()].includes(ownerDocument.activeElement);
+    }
+    function text() {
+        return getEditorSceneCameraDebugText(language);
+    }
+    function tooltips() {
+        return getEditorSceneCameraDebugTooltips(language);
+    }
+}
+function isEditableElement(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return target instanceof HTMLInputElement
+        || target instanceof HTMLTextAreaElement
+        || target instanceof HTMLSelectElement
+        || target.isContentEditable;
+}
+function readCanvasViewportRect(canvas) {
+    if (!canvas)
+        return null;
+    const rect = canvas.getBoundingClientRect();
+    return {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+function readCanvasPngDataUrl(canvas) {
+    return new Promise((resolve, reject) => {
+        try {
+            if (typeof canvas.toBlob === 'function') {
+                canvas.toBlob((blob) => {
+                    if (!blob) {
+                        reject(new Error('Camera viewport canvas could not be encoded.'));
+                        return;
+                    }
+                    resolve(URL.createObjectURL(blob));
+                }, 'image/png');
+                return;
+            }
+            if (typeof canvas.toDataURL === 'function') {
+                resolve(canvas.toDataURL('image/png'));
+                return;
+            }
+            reject(new Error('Camera viewport canvas cannot export images.'));
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+}
+function formatScreenshotTimestamp(date) {
+    const pad = (value) => String(value).padStart(2, '0');
+    return [
+        date.getFullYear(),
+        pad(date.getMonth() + 1),
+        pad(date.getDate()),
+        '-',
+        pad(date.getHours()),
+        pad(date.getMinutes()),
+        pad(date.getSeconds()),
+    ].join('');
+}
+//# sourceMappingURL=runtime-camera-debug-panel.js.map