mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-11-06 13:12:27 +01:00
feat(photo-editor): Ajax Image Editor client (Photoshop-parity tools)
Photoshop-parity editor client: layers, selection/masking, brushes,
smart filters, LUT import, Quick Edit, mobile gestures, workspaces,
batch operations, and the service-worker versioning (v978->v1006).
Source: vendor/photocraft (ad1cff44) photo-editor client files, merged
onto upstream/dev (a8c147b2). Conflict resolution documented in
pr_work/A_conflicts.md; editor files taken from vendor/photocraft
(upstream's editor is an earlier snapshot of the same feature).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
pewdiepie-archdaemon
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
c74f475679
commit
5fac693c1c
@@ -9,6 +9,10 @@
|
||||
* @param {{
|
||||
* undo: () => void,
|
||||
* redo: () => void,
|
||||
* takeSnapshot?: (label?: string) => ({ id: string, label: string } | void),
|
||||
* restoreSnapshot?: (id: string) => void,
|
||||
* deleteSnapshot?: (id: string) => void,
|
||||
* listSnapshots?: () => ({ id: string, label: string, ts: number }[]),
|
||||
* }} deps
|
||||
*
|
||||
* @returns {{
|
||||
@@ -22,7 +26,7 @@ import modalManager from '../modalManager.js';
|
||||
import { HISTORY_ICON, relTime } from './layer-helpers.js';
|
||||
import { historyPanelHTML } from './build/popups.js';
|
||||
|
||||
export function createHistoryPanel({ undo, redo }) {
|
||||
export function createHistoryPanel({ undo, redo, takeSnapshot, restoreSnapshot, deleteSnapshot, listSnapshots }) {
|
||||
function jumpToHistory(offset) {
|
||||
if (offset === 0) return;
|
||||
if (offset < 0) {
|
||||
@@ -81,11 +85,27 @@ export function createHistoryPanel({ undo, redo }) {
|
||||
panel.innerHTML = historyPanelHTML(HISTORY_ICON);
|
||||
document.body.appendChild(panel);
|
||||
state.historyPanelEl = panel;
|
||||
// Fill in the snapshot + timeline content FIRST so the panel has its real
|
||||
// height before we measure it for on-screen clamping below.
|
||||
refreshHistoryPanelIfOpen();
|
||||
const btn = document.getElementById('ge-history-btn');
|
||||
if (btn) {
|
||||
const r = btn.getBoundingClientRect();
|
||||
panel.style.top = (r.bottom + 6) + 'px';
|
||||
panel.style.left = Math.max(8, r.left) + 'px';
|
||||
panel.style.top = (r.bottom + 6) + 'px';
|
||||
// Anchor under the button, but if the panel would run off the bottom of
|
||||
// the viewport (the History button lives in the footer) flip it above the
|
||||
// button and clamp both edges so it is always fully visible.
|
||||
const ph = panel.offsetHeight || 200;
|
||||
const pw = panel.offsetWidth || 240;
|
||||
let top = r.bottom + 6;
|
||||
let left = Math.max(8, Math.min(r.left, window.innerWidth - pw - 8));
|
||||
if (top + ph > window.innerHeight - 8) {
|
||||
top = Math.max(8, r.top - ph - 6);
|
||||
if (top < 8) top = Math.max(8, window.innerHeight - ph - 8);
|
||||
}
|
||||
panel.style.top = top + 'px';
|
||||
panel.style.left = left + 'px';
|
||||
}
|
||||
panel.querySelector('.ge-adj-min').addEventListener('click', minimiseHistoryPanel);
|
||||
// Click anywhere outside the panel (or trigger button) closes it.
|
||||
@@ -94,6 +114,10 @@ export function createHistoryPanel({ undo, redo }) {
|
||||
if (!state.historyPanelEl) return;
|
||||
if (state.historyPanelEl.contains(ev.target)) return;
|
||||
if (btn && (ev.target === btn || btn.contains(ev.target))) return;
|
||||
// A click inside a topbar dropdown (Window/Edit > History) is an
|
||||
// explicit toggle, not an "away" click — don't close on its
|
||||
// pointerdown or the row's click would immediately reopen it.
|
||||
if (ev.target.closest && ev.target.closest('.dropdown')) return;
|
||||
closeHistoryPanel();
|
||||
document.removeEventListener('pointerdown', onAway, true);
|
||||
};
|
||||
@@ -134,16 +158,13 @@ export function createHistoryPanel({ undo, redo }) {
|
||||
};
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
panel._escHandler = onKey;
|
||||
|
||||
refreshHistoryPanelIfOpen();
|
||||
}
|
||||
|
||||
function refreshHistoryPanelIfOpen() {
|
||||
if (!state.historyPanelEl) return;
|
||||
const list = state.historyPanelEl.querySelector('#ge-history-list');
|
||||
// Render the chronological timeline (oldest/past -> Current -> future) into
|
||||
// any list element. Shared by the floating panel and the docked History
|
||||
// panel, matching Photoshop's docked History timeline.
|
||||
function renderHistoryList(list) {
|
||||
if (!list) return;
|
||||
// Chronological order — oldest at top, latest at bottom. Past
|
||||
// (undo) states first, then Current, then future (redo) states.
|
||||
const rows = [];
|
||||
for (let i = 0; i < state.undoStack.length; i++) {
|
||||
const s = state.undoStack[i];
|
||||
@@ -167,10 +188,85 @@ export function createHistoryPanel({ undo, redo }) {
|
||||
jumpToHistory(off);
|
||||
});
|
||||
});
|
||||
// Scroll the current marker into view.
|
||||
// Reveal the current marker without disturbing the surrounding chrome.
|
||||
// Element.scrollIntoView() bubbles up and scrolls EVERY scrollable
|
||||
// ancestor, which yanked the whole right-hand dock down to the History
|
||||
// group on load (hiding the Color/Properties tab strips). Instead scroll
|
||||
// only the list itself, or the dock group's own panel when the list is
|
||||
// not the scroller — so the docked History auto-reveals the current step
|
||||
// while the tab strips above stay put.
|
||||
const cur = list.querySelector('.current');
|
||||
if (cur) cur.scrollIntoView({ block: 'center' });
|
||||
if (cur) {
|
||||
const scroller = list.scrollHeight > list.clientHeight + 1
|
||||
? list
|
||||
: list.closest('.ge-dock-panels');
|
||||
if (scroller) {
|
||||
const c = cur.getBoundingClientRect();
|
||||
const s = scroller.getBoundingClientRect();
|
||||
if (c.bottom > s.bottom) scroller.scrollTop += (c.bottom - s.bottom) + 8;
|
||||
else if (c.top < s.top) scroller.scrollTop -= (s.top - c.top) + 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { toggleHistoryPanel, refreshHistoryPanelIfOpen, jumpToHistory };
|
||||
// Named snapshots (Photoshop-style restore points) section — a camera
|
||||
// button plus one row per snapshot. Rendered above the timeline in both
|
||||
// the floating panel and the docked History panel.
|
||||
const SNAPSHOT_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>';
|
||||
function renderSnapshots(container) {
|
||||
if (!container) return;
|
||||
const snaps = (typeof listSnapshots === 'function') ? (listSnapshots() || []) : [];
|
||||
const rows = snaps.map(s => `
|
||||
<div class="ge-history-snap-row" data-snap-id="${s.id}">
|
||||
<button class="ge-history-snap-restore" type="button" data-snap-id="${s.id}" title="Restore this snapshot">
|
||||
<span class="ge-history-snap-dot"></span>
|
||||
<span class="ge-history-row-label">${(s.label || 'Snapshot').replace(/[<>&]/g, '')}</span>
|
||||
</button>
|
||||
<span class="ge-history-row-time">${relTime(s.ts)}</span>
|
||||
<button class="ge-history-snap-del" type="button" data-snap-id="${s.id}" title="Delete snapshot" aria-label="Delete snapshot">×</button>
|
||||
</div>`).join('');
|
||||
container.innerHTML = `
|
||||
<div class="ge-history-snap-head">
|
||||
<span class="ge-history-snap-title">Snapshots</span>
|
||||
<button class="ge-history-snap-new" type="button" title="Create a new snapshot">${SNAPSHOT_ICON}</button>
|
||||
</div>
|
||||
<div class="ge-history-snap-rows">${rows || '<div class="ge-history-snap-empty">No snapshots yet</div>'}</div>
|
||||
`;
|
||||
container.querySelector('.ge-history-snap-new')?.addEventListener('click', () => {
|
||||
if (typeof takeSnapshot !== 'function') return;
|
||||
const n = ((typeof listSnapshots === 'function' && listSnapshots()) || []).length + 1;
|
||||
const label = window.prompt('Snapshot name', 'Snapshot ' + n);
|
||||
if (label == null) return;
|
||||
takeSnapshot(label.trim() || ('Snapshot ' + n));
|
||||
});
|
||||
container.querySelectorAll('.ge-history-snap-restore').forEach(btn => {
|
||||
btn.addEventListener('click', () => { if (typeof restoreSnapshot === 'function') restoreSnapshot(btn.dataset.snapId); });
|
||||
});
|
||||
container.querySelectorAll('.ge-history-snap-del').forEach(btn => {
|
||||
btn.addEventListener('click', () => { if (typeof deleteSnapshot === 'function') deleteSnapshot(btn.dataset.snapId); });
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh the floating panel (if open) and the docked History panel (if
|
||||
// present) — every undo/redo/edit already calls this.
|
||||
function refreshHistoryPanelIfOpen() {
|
||||
if (state.historyPanelEl) {
|
||||
renderSnapshots(state.historyPanelEl.querySelector('#ge-history-snapshots'));
|
||||
renderHistoryList(state.historyPanelEl.querySelector('#ge-history-list'));
|
||||
}
|
||||
const dockList = document.getElementById('ge-dock-history-list');
|
||||
if (dockList) {
|
||||
let dockSnaps = document.getElementById('ge-dock-history-snapshots');
|
||||
if (!dockSnaps) {
|
||||
dockSnaps = document.createElement('div');
|
||||
dockSnaps.id = 'ge-dock-history-snapshots';
|
||||
dockSnaps.className = 'ge-history-snapshots';
|
||||
dockList.parentNode?.insertBefore(dockSnaps, dockList);
|
||||
}
|
||||
renderSnapshots(dockSnaps);
|
||||
renderHistoryList(dockList);
|
||||
}
|
||||
}
|
||||
|
||||
return { toggleHistoryPanel, refreshHistoryPanelIfOpen, renderHistoryList, renderSnapshots, jumpToHistory };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user