https://jayreddinjr-jr-odysseus-hf.hf.space/static/js/editor/build/popups.js

1/**
2 * Static markup for misc floating popups that live above the canvas.
3 *
4 * All pure DOM. Caller wires every ID via document.getElementById /
5 * el.querySelector after appending.
6 */
7
8/** Keyboard-shortcuts popover. */
9export function shortcutsPopupHTML() {
10  return `
11      <div id="ge-shortcuts-handle" style="display:flex;align-items:center;gap:6px;margin:-4px -6px 4px;padding:4px 6px;cursor:grab;user-select:none;touch-action:none;">
12        <span style="display:inline-flex;flex-direction:column;gap:2px;margin-right:2px;opacity:0.35;">
13          <span style="display:block;width:18px;height:2px;border-radius:1px;background:currentColor;"></span>
14          <span style="display:block;width:18px;height:2px;border-radius:1px;background:currentColor;"></span>
15        </span>
16        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.8"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10"/></svg>
17        <strong style="font-size:12px;letter-spacing:0.3px;">Editor Shortcuts</strong>
18        <span style="flex:1"></span>
19        <button id="ge-shortcuts-close" class="ge-btn ge-btn-sm" style="padding:0 6px;height:20px;line-height:1;background:none;border:none;opacity:0.55;cursor:pointer;color:var(--fg);">✖</button>
20      </div>
21      <div class="ge-shortcuts-grid">
22        <div class="ge-shortcuts-col">
23          <h5>Tools</h5>
24          <div><kbd>V</kbd> Move</div>
25          <div><kbd>T</kbd> Transform</div>
26          <div><kbd>B</kbd> Brush</div>
27          <div><kbd>E</kbd> Eraser</div>
28          <div><kbd>K</kbd> Clone Stamp <span style="opacity:0.5">(Alt-click = set source)</span></div>
29          <div><kbd>L</kbd> Lasso</div>
30          <div><kbd>W</kbd> Wand</div>
31          <div><kbd>M</kbd> Inpaint</div>
32          <div><kbd>E</kbd> Eraser</div>
33          <div><kbd>C</kbd> Crop</div>
34          <div><kbd>S</kbd> Sharpen</div>
35        </div>
36        <div class="ge-shortcuts-col">
37          <h5>Edit</h5>
38          <div><kbd>Ctrl</kbd>+<kbd>Z</kbd> Undo</div>
39          <div><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> Redo</div>
40          <div><kbd>Ctrl</kbd>+<kbd>S</kbd> Save</div>
41          <div><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd> Save to Gallery</div>
42          <div><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>J</kbd> New Layer</div>
43          <div><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>T</kbd> Free Transform</div>
44          <div><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> Canvas size…</div>
45        </div>
46        <div class="ge-shortcuts-col">
47          <h5>Selection</h5>
48          <div><kbd>Ctrl</kbd>+<kbd>A</kbd> Select All</div>
49          <div><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> Deselect</div>
50          <div><kbd>Ctrl</kbd>+<kbd>C</kbd> Copy to layer</div>
51          <div><kbd>Ctrl</kbd>+<kbd>X</kbd> Cut lasso</div>
52          <div><kbd>Ctrl</kbd>+<kbd>D</kbd> Delete pixels</div>
53          <div><kbd>Esc</kbd> Cancel selection / crop</div>
54        </div>
55        <div class="ge-shortcuts-col">
56          <h5>Brush / Mask</h5>
57          <div><kbd>[</kbd> Brush size −</div>
58          <div><kbd>]</kbd> Brush size +</div>
59          <div>Drag tolerance slider → live wand retune</div>
60        </div>
61      </div>
62      <div style="margin-top:8px;font-size:10px;opacity:0.5;text-align:center;">Press <kbd>?</kbd> or click the keyboard icon to toggle.</div>
63    `;
64}
65
66
67/**
68 * History panel — sidebar listing all undo entries.
69 * @param {string} historyIcon  Inline SVG markup for the title icon.
70 */
71export function historyPanelHTML(historyIcon) {
72  return `
73    <div class="ge-history-head" data-history-drag>
74      <span class="ge-adj-icon">${historyIcon}</span>
75      <span class="ge-history-title">History</span>
76      <span class="ge-head-btns">
77        <button class="ge-adj-min" type="button" title="Minimise">&minus;</button>
78      </span>
79    </div>
80    <div class="ge-history-list" id="ge-history-list"></div>
81  `;
82}
83
84
85/**
86 * Empty-canvas size-prompt modal — body markup (caller controls show /
87 * hide and wires the Cancel / Create buttons).
88 */
89export function canvasSizePromptHTML() {
90  return `
91        <div class="modal-content ge-canvas-prompt">
92          <div class="modal-header"><h4 id="ge-canvas-prompt-title">New canvas</h4></div>
93          <div class="modal-body">
94            <div class="ge-canvas-prompt-row">
95              <label class="ge-canvas-prompt-field">

96                <span>Width</span>
97                <input type="text" id="ge-canvas-prompt-w" inputmode="numeric" value="1024">
98              </label>
99              <span class="ge-canvas-prompt-x">×</span>
100              <label class="ge-canvas-prompt-field">
101                <span>Height</span>
102                <input type="text" id="ge-canvas-prompt-h" inputmode="numeric" value="1024">
103              </label>
104            </div>
105            <p class="ge-canvas-prompt-hint">Pixels, or type a ratio like 3x5 / 16:9 in either field.</p>
106          </div>
107          <div class="modal-footer">
108            <button class="confirm-btn confirm-btn-secondary" id="ge-canvas-prompt-cancel">Cancel</button>
109            <button class="confirm-btn confirm-btn-primary" id="ge-canvas-prompt-ok">Create</button>
110          </div>
111        </div>`;
112}