f9a40a9e1c
The histogram used to park itself in the top-right corner on the first paint; it now starts at the top-left of the photo and is dragged from there, the way the rest of the overlay is. Nothing else changed in it — same drag, same clamping, same resize. The stage also gains a CLEAR button, sitting before the picker button, which is now OPEN PHOTO. CLEAR takes the photo off the stage, but not before asking: SAVE PHOTO files it first and only then clears, EXPORT IMAGE writes the JPEG and then clears, CLEAR WITHOUT SAVING drops it there and then, and CANCEL leaves everything alone. Saving from that modal resumes the clear once the file has really landed — a guest, a capped account or a cancelled name prompt never loses the frame. Clearing forgets the working photo (source, preview, GPS, ISO, and the IndexedDB copy session.ts now deletes), while the look, the crop and the undo history stay put, so the next photo opens on the same settings the way replacing a photo already did.
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { useI18n } from '../i18n/I18nProvider';
|
|
|
|
// CLEAR takes the photo off the stage, and the work standing on it goes with
|
|
// it: the look lives in the session, not in the picture. So the button asks
|
|
// first, and the two ways of keeping something are one tap each — file the
|
|
// frame in MY PHOTOS so it can be picked up again, or put a JPEG in the user's
|
|
// hands. Neither is forced: CLEAR WITHOUT SAVING is a plain discard, and
|
|
// closing the dialog does nothing at all.
|
|
export function ClearPhotoModal({
|
|
onSave,
|
|
onExport,
|
|
onDiscard,
|
|
onClose,
|
|
}: {
|
|
onSave: () => void;
|
|
onExport: () => void;
|
|
onDiscard: () => void;
|
|
onClose: () => void;
|
|
}) {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div className="modal-backdrop" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
|
|
<div className="modal" data-key="clear-modal">
|
|
<h2>{t('clear.title')}</h2>
|
|
<p className="hint" data-key="clear-hint">
|
|
{t('clear.hint')}
|
|
</p>
|
|
<button type="button" className="btn" data-key="clear-save" onClick={onSave}>
|
|
{t('clear.save')}
|
|
</button>
|
|
<button type="button" className="btn" data-key="clear-export" onClick={onExport}>
|
|
{t('clear.export')}
|
|
</button>
|
|
<button type="button" className="btn adm-danger" data-key="clear-discard" onClick={onDiscard}>
|
|
{t('clear.discard')}
|
|
</button>
|
|
<button type="button" className="btn ghost" data-key="clear-cancel" onClick={onClose}>
|
|
{t('clear.cancel')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|