update
This commit is contained in:
parent
8ee6a87d44
commit
06176fb2d5
6 changed files with 3282 additions and 153 deletions
96
index.html
96
index.html
|
|
@ -89,59 +89,63 @@
|
|||
</div>
|
||||
|
||||
<div class="paintLayout">
|
||||
<canvas id="paintCanvas" width="512" height="512" aria-label="Pixel editor"></canvas>
|
||||
<div class="paintMainColumn">
|
||||
<canvas id="paintCanvas" width="512" height="512" aria-label="Pixel editor"></canvas>
|
||||
<div class="toolRow editorToolRow basicEditorTools">
|
||||
<button id="toolBrush" class="tool toolBrush active" title="B">Draw</button>
|
||||
<button id="toolErase" class="tool toolErase" title="E">Erase</button>
|
||||
<button id="toolFill" class="tool toolFill" title="F">Fill</button>
|
||||
<button id="toolPick" class="tool toolPick" title="I">Pick</button>
|
||||
</div>
|
||||
<div class="toolRow editorUtilityRow">
|
||||
<button id="toggleAdvanced" class="tool toolAdvanced" type="button">＋ Advanced</button>
|
||||
<button id="undoPaint" class="tool toolUndo" type="button" disabled>↶ Undo</button>
|
||||
<button id="redoPaint" class="tool toolRedo" type="button" disabled>↷ Redo</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="palettePanel">
|
||||
<div id="paletteGrid" class="paletteGrid" aria-label="Color palette"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toolRow editorToolRow">
|
||||
<button id="toolBrush" class="tool toolBrush active" title="B">✎ Draw</button>
|
||||
<button id="toolErase" class="tool toolErase" title="E">⌫ Erase</button>
|
||||
<button id="toolFill" class="tool toolFill" title="F">▣ Fill</button>
|
||||
<button id="toolPick" class="tool toolPick" title="I">◆ Pick</button>
|
||||
</div>
|
||||
<div class="toolRow editorHistoryRow">
|
||||
<button id="undoPaint" class="tool toolUndo" type="button" disabled>↶ Undo</button>
|
||||
<button id="redoPaint" class="tool toolRedo" type="button" disabled>↷ Redo</button>
|
||||
</div>
|
||||
<div id="advancedToolGroup" class="advancedToolGroup" hidden>
|
||||
<div class="toolRow advancedDrawRow">
|
||||
<button id="toolLine" class="tool toolLine advancedTool" title="L">／ Line</button>
|
||||
<button id="toolRect" class="tool toolRect advancedTool" title="R">□ Rect</button>
|
||||
<button id="toolSelect" class="tool toolSelect advancedTool" title="S">▥ Select</button>
|
||||
<button id="toolDoor" class="tool toolDoor advancedTool buildingOnly">▤ Door</button>
|
||||
<button id="clearPaint" class="tool danger advancedTool">× Clear</button>
|
||||
<div class="advancedPanel">
|
||||
<div class="advancedPanelHeader">Advanced settings</div>
|
||||
<div id="advancedToolGroup" class="advancedToolGroup" hidden>
|
||||
<div class="toolRow advancedDrawRow">
|
||||
<button id="toolLine" class="tool toolLine advancedTool" title="L">Line</button>
|
||||
<button id="toolRect" class="tool toolRect advancedTool" title="R">Rect</button>
|
||||
<button id="toolSelect" class="tool toolSelect advancedTool" title="S">Select</button>
|
||||
<button id="toolDoor" class="tool toolDoor advancedTool buildingOnly">Door</button>
|
||||
<button id="clearPaint" class="tool danger advancedTool">Clear</button>
|
||||
</div>
|
||||
<div class="toolRow advancedActionRow">
|
||||
<button id="outlinePaint" class="tool toolOutline advancedTool" type="button">Outline</button>
|
||||
<button id="flipHorizontal" class="tool toolFlipH advancedTool" type="button">Flip H</button>
|
||||
<button id="flipVertical" class="tool toolFlipV advancedTool" type="button">Flip V</button>
|
||||
<button id="clearSelection" class="tool toolClearSel advancedTool" type="button" disabled>Clear Sel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolRow advancedActionRow">
|
||||
<button id="outlinePaint" class="tool toolOutline advancedTool" type="button">▧ Outline</button>
|
||||
<button id="flipHorizontal" class="tool toolFlipH advancedTool" type="button">⇄ Flip H</button>
|
||||
<button id="flipVertical" class="tool toolFlipV advancedTool" type="button">⇅ Flip V</button>
|
||||
<button id="clearSelection" class="tool toolClearSel advancedTool" type="button" disabled>◇ Clear Sel</button>
|
||||
<div class="advancedRow extraAdvancedRow">
|
||||
<button id="toolLight" class="tool toolLight advancedOnly" hidden>Light</button>
|
||||
<button id="toolParticle" class="tool toolParticle advancedOnly" hidden>Particle</button>
|
||||
<button id="toolDepth" class="tool toolDepth advancedOnly" hidden>Depth</button>
|
||||
<button id="depthHigh" class="tool advancedOnly" type="button" hidden>High</button>
|
||||
<button id="depthLow" class="tool advancedOnly" type="button" hidden>Low</button>
|
||||
<div id="particleDirectionWrap" class="particleControl particleControlGroup advancedOnly" hidden>
|
||||
<label>Direction
|
||||
<select id="particleDirection">
|
||||
<option value="up" selected>↑ Up</option>
|
||||
<option value="down">↓ Down</option>
|
||||
<option value="left">← Left</option>
|
||||
<option value="right">→ Right</option>
|
||||
</select>
|
||||
</label>
|
||||
<small id="particleRangeStatus">Particle: paint cells like Light/Depth. Shift/right-click clears a cell.</small>
|
||||
</div>
|
||||
</div>
|
||||
<span id="advancedHint" class="hint" hidden>Advanced reveals line, rectangle, selection, flip, light, depth, and particles.</span>
|
||||
<input id="paintColor" type="color" value="#6bd06b" hidden />
|
||||
<div id="editHint" class="hint">Palette color is used for pixels, lights, particles, and depth marks. Shortcuts: B/E/F/I/L/R/S, Ctrl/Cmd+Z, arrows move a selection.</div>
|
||||
</div>
|
||||
<div class="advancedRow">
|
||||
<button id="toggleAdvanced" class="tool toolAdvanced" type="button">＋ Advanced</button>
|
||||
<button id="toolLight" class="tool toolLight advancedOnly" hidden>✹ Light</button>
|
||||
<button id="toolParticle" class="tool toolParticle advancedOnly" hidden>⁕ Particle</button>
|
||||
<button id="toolDepth" class="tool toolDepth advancedOnly" hidden>▨ Depth</button>
|
||||
<button id="depthHigh" class="tool advancedOnly" type="button" hidden>▲ High</button>
|
||||
<button id="depthLow" class="tool advancedOnly" type="button" hidden>▼ Low</button>
|
||||
<div id="particleDirectionWrap" class="particleControl particleControlGroup advancedOnly" hidden>
|
||||
<label>Direction
|
||||
<select id="particleDirection">
|
||||
<option value="up" selected>↑ Up</option>
|
||||
<option value="down">↓ Down</option>
|
||||
<option value="left">← Left</option>
|
||||
<option value="right">→ Right</option>
|
||||
</select>
|
||||
</label>
|
||||
<small id="particleRangeStatus">Particle: paint cells like Light/Depth. Shift/right-click clears a cell.</small>
|
||||
</div>
|
||||
<span id="advancedHint" class="hint" hidden>Advanced tools stay below the basic draw row. Particle paints emitter cells with palette color and direction. Shift/right-click clears a particle cell.</span>
|
||||
</div>
|
||||
<input id="paintColor" type="color" value="#6bd06b" hidden />
|
||||
<div id="editHint" class="hint">Palette color is used for pixels, lights, particles, and depth marks. Shortcuts: B/E/F/I/L/R/S, Ctrl/Cmd+Z, arrows move a selection.</div>
|
||||
</div>
|
||||
|
||||
<div class="card stack summonCard">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue