Skip to content

Commit feb4200

Browse files
author
DavidQ
committed
feat(tilemap-studio): fullscreen side-popouts + true-size canvas zoom/scroll polish
- add fullscreen left/right panel popout toggles (+/-) and overlay behavior - convert Tilemap Studio side sections to accordion panel structure for overlay targeting - keep map rendering at true tile pixel size (no fullscreen stretch distortion) - add canvas zoom slider (25%-400%) with live readout and style-based scaling - enable fullscreen canvas-wrap scrolling for wide/tall maps - apply fullscreen canvas container inset while keeping canvas origin aligned - move fullscreen overlay toggle groups down by 150px for better placement
1 parent 5086a7f commit feb4200

3 files changed

Lines changed: 458 additions & 98 deletions

File tree

‎tools/Tilemap Studio/index.html‎

Lines changed: 136 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -83,127 +83,166 @@
8383
</header>
8484

8585
<div class="workspace tools-platform-layout-grid">
86-
<aside class="sidebar left-sidebar tools-platform-resize-panel" data-panel-side="left">
87-
<section class="panel">
88-
<h3>Tileset</h3>
89-
<div class="button-row">
90-
<button id="loadTilesetPngButton" type="button">Load Tileset PNG</button>
91-
<input id="loadTilesetPngInput" class="hidden-file-input" type="file" accept=".png,image/png" />
92-
<button id="loadTilePngAssetsButton" type="button">Load Tile PNG(s)</button>
93-
<input id="loadTilePngAssetsInput" class="hidden-file-input" type="file" accept=".png,image/png" multiple />
94-
<button id="generateTilesetButton" type="button">Generate Tile Grid</button>
86+
<aside class="sidebar left-sidebar tools-platform-resize-panel" data-panel-side="left" id="leftSidebar">
87+
<details class="panel-accordion" id="leftPanelTileset" open>
88+
<summary class="panel-accordion__summary"><h3>Tileset</h3></summary>
89+
<div class="panel-accordion__body">
90+
<div class="button-row">
91+
<button id="loadTilesetPngButton" type="button">Load Tileset PNG</button>
92+
<input id="loadTilesetPngInput" class="hidden-file-input" type="file" accept=".png,image/png" />
93+
<button id="loadTilePngAssetsButton" type="button">Load Tile PNG(s)</button>
94+
<input id="loadTilePngAssetsInput" class="hidden-file-input" type="file" accept=".png,image/png" multiple />
95+
<button id="generateTilesetButton" type="button">Generate Tile Grid</button>
96+
</div>
97+
<div class="tileset-config-grid">
98+
<label>
99+
Tile W
100+
<input id="tilesetTileWidthInput" type="number" min="1" max="512" step="1" value="24" />
101+
</label>
102+
<label>
103+
Tile H
104+
<input id="tilesetTileHeightInput" type="number" min="1" max="512" step="1" value="24" />
105+
</label>
106+
<label>
107+
Spacing
108+
<input id="tilesetSpacingInput" type="number" min="0" max="256" step="1" value="0" />
109+
</label>
110+
<label>
111+
Margin
112+
<input id="tilesetMarginInput" type="number" min="0" max="256" step="1" value="0" />
113+
</label>
114+
</div>
115+
<p id="tilesetMeta" class="help-text">No tileset PNG loaded. Load a PNG and generate a tile grid.</p>
116+
<div id="tilePalette" class="tile-palette"></div>
95117
</div>
96-
<div class="tileset-config-grid">
97-
<label>
98-
Tile W
99-
<input id="tilesetTileWidthInput" type="number" min="1" max="512" step="1" value="24" />
100-
</label>
101-
<label>
102-
Tile H
103-
<input id="tilesetTileHeightInput" type="number" min="1" max="512" step="1" value="24" />
104-
</label>
118+
</details>
119+
120+
<details class="panel-accordion" id="leftPanelMarkers">
121+
<summary class="panel-accordion__summary"><h3>Markers</h3></summary>
122+
<div class="panel-accordion__body">
105123
<label>
106-
Spacing
107-
<input id="tilesetSpacingInput" type="number" min="0" max="256" step="1" value="0" />
124+
Marker Type
125+
<select id="markerTypeSelect">
126+
<option value="spawn">Spawn</option>
127+
<option value="object">Object</option>
128+
</select>
108129
</label>
109130
<label>
110-
Margin
111-
<input id="tilesetMarginInput" type="number" min="0" max="256" step="1" value="0" />
131+
Marker Name
132+
<input id="markerNameInput" type="text" value="spawn-point" />
112133
</label>
134+
<button id="clearMarkersButton" type="button">Clear Markers</button>
135+
<ul id="markerList" class="marker-list"></ul>
113136
</div>
114-
<p id="tilesetMeta" class="help-text">No tileset PNG loaded. Load a PNG and generate a tile grid.</p>
115-
<div id="tilePalette" class="tile-palette"></div>
116-
</section>
117-
118-
<section class="panel">
119-
<h3>Markers</h3>
120-
<label>
121-
Marker Type
122-
<select id="markerTypeSelect">
123-
<option value="spawn">Spawn</option>
124-
<option value="object">Object</option>
125-
</select>
126-
</label>
127-
<label>
128-
Marker Name
129-
<input id="markerNameInput" type="text" value="spawn-point" />
130-
</label>
131-
<button id="clearMarkersButton" type="button">Clear Markers</button>
132-
<ul id="markerList" class="marker-list"></ul>
133-
</section>
137+
</details>
134138
</aside>
135139

136140
<main class="canvas-panel">
137141
<div class="canvas-toolbar">
138142
<strong>Map Canvas</strong>
143+
<label class="canvas-zoom-control" for="canvasZoomInput">
144+
Zoom
145+
<input id="canvasZoomInput" type="range" min="25" max="400" step="25" value="100" />
146+
<span id="canvasZoomReadout" class="muted">100%</span>
147+
</label>
139148
<span id="canvasMeta" class="muted"></span>
140149
<span id="simulationContext" class="muted"></span>
141150
</div>
142151
<div class="canvas-wrap">
143152
<canvas id="mapCanvas" width="768" height="432"></canvas>
153+
<div class="fullscreen-overlay-toggle-group fullscreen-overlay-toggle-group--left">
154+
<button type="button" class="fullscreen-overlay-button" data-overlay-toggle data-overlay-side="left" data-overlay-target="leftPanelTileset" aria-expanded="false">
155+
<span class="overlay-toggle-symbol" aria-hidden="true">+</span>
156+
<span class="overlay-toggle-label">Tileset</span>
157+
</button>
158+
<button type="button" class="fullscreen-overlay-button" data-overlay-toggle data-overlay-side="left" data-overlay-target="leftPanelMarkers" aria-expanded="false">
159+
<span class="overlay-toggle-symbol" aria-hidden="true">+</span>
160+
<span class="overlay-toggle-label">Markers</span>
161+
</button>
162+
</div>
163+
<div class="fullscreen-overlay-toggle-group fullscreen-overlay-toggle-group--right">
164+
<button type="button" class="fullscreen-overlay-button" data-overlay-toggle data-overlay-side="right" data-overlay-target="rightPanelLayers" aria-expanded="false">
165+
<span class="overlay-toggle-symbol" aria-hidden="true">+</span>
166+
<span class="overlay-toggle-label">Layers</span>
167+
</button>
168+
<button type="button" class="fullscreen-overlay-button" data-overlay-toggle data-overlay-side="right" data-overlay-target="rightPanelUsage" aria-expanded="false">
169+
<span class="overlay-toggle-symbol" aria-hidden="true">+</span>
170+
<span class="overlay-toggle-label">Usage</span>
171+
</button>
172+
<button type="button" class="fullscreen-overlay-button" data-overlay-toggle data-overlay-side="right" data-overlay-target="rightPanelRemediation" aria-expanded="false">
173+
<span class="overlay-toggle-symbol" aria-hidden="true">+</span>
174+
<span class="overlay-toggle-label">Remediation</span>
175+
</button>
176+
</div>
144177
</div>
145178
<div id="statusText" class="status-text">Ready.</div>
146179
</main>
147180

148-
<aside class="sidebar right-sidebar tools-platform-resize-panel" data-panel-side="right">
149-
<section class="panel">
150-
<h3>Layers</h3>
151-
<ul id="layerList" class="layer-list"></ul>
152-
<div class="inline-row">
153-
<label>
154-
Name
155-
<input id="newLayerNameInput" type="text" value="Layer" />
156-
</label>
181+
<aside class="sidebar right-sidebar tools-platform-resize-panel" data-panel-side="right" id="rightSidebar">
182+
<details class="panel-accordion" id="rightPanelLayers" open>
183+
<summary class="panel-accordion__summary"><h3>Layers</h3></summary>
184+
<div class="panel-accordion__body">
185+
<ul id="layerList" class="layer-list"></ul>
186+
<div class="inline-row">
187+
<label>
188+
Name
189+
<input id="newLayerNameInput" type="text" value="Layer" />
190+
</label>
191+
</div>
192+
<div class="inline-row">
193+
<label>
194+
Kind
195+
<select id="newLayerKindSelect">
196+
<option value="tile">Tile</option>
197+
<option value="collision">Collision</option>
198+
<option value="data">Data</option>
199+
</select>
200+
</label>
201+
</div>
202+
<div class="button-row">
203+
<button id="addLayerButton" type="button">Add Layer</button>
204+
<button id="removeLayerButton" type="button">Remove Layer</button>
205+
<button id="layerVisibilityToggle" type="button">Toggle Visibility</button>
206+
</div>
207+
<p class="help-text">Collision and Data layers are first-class map layers in this foundation. Parallax remains reserved for a separate companion editor.</p>
157208
</div>
158-
<div class="inline-row">
159-
<label>
160-
Kind
161-
<select id="newLayerKindSelect">
162-
<option value="tile">Tile</option>
163-
<option value="collision">Collision</option>
164-
<option value="data">Data</option>
165-
</select>
166-
</label>
167-
</div>
168-
<div class="button-row">
169-
<button id="addLayerButton" type="button">Add Layer</button>
170-
<button id="removeLayerButton" type="button">Remove Layer</button>
171-
<button id="layerVisibilityToggle" type="button">Toggle Visibility</button>
172-
</div>
173-
<p class="help-text">Collision and Data layers are first-class map layers in this foundation. Parallax remains reserved for a separate companion editor.</p>
174-
</section>
175-
176-
<section class="panel">
177-
<h3>Usage</h3>
178-
<ul class="usage-list">
179-
<li>Paint and Erase write to the selected layer.</li>
180-
<li>Picker reads current cell value into active tile.</li>
181-
<li>Marker tool places object or spawn markers per cell.</li>
182-
<li>Right click on the canvas erases or removes a marker.</li>
183-
<li>Use Simulate to preview tile/data/object state in motion.</li>
184-
<li>Saved JSON keeps a reserved parallax block for future companion tooling.</li>
185-
</ul>
186-
</section>
209+
</details>
187210

188-
<section class="panel">
189-
<h3>Remediation</h3>
190-
<p id="remediationSummaryText" class="help-text">No remediation actions available.</p>
191-
<div class="button-row">
192-
<button id="inspectRemediationButton" type="button">Inspect Issues</button>
193-
<button id="jumpToProblemButton" type="button">Jump to Problem</button>
194-
<button id="applyRemediationButton" type="button">Apply Suggested Fix</button>
211+
<details class="panel-accordion" id="rightPanelUsage">
212+
<summary class="panel-accordion__summary"><h3>Usage</h3></summary>
213+
<div class="panel-accordion__body">
214+
<ul class="usage-list">
215+
<li>Paint and Erase write to the selected layer.</li>
216+
<li>Picker reads current cell value into active tile.</li>
217+
<li>Marker tool places object or spawn markers per cell.</li>
218+
<li>Right click on the canvas erases or removes a marker.</li>
219+
<li>Use Simulate to preview tile/data/object state in motion.</li>
220+
<li>Saved JSON keeps a reserved parallax block for future companion tooling.</li>
221+
</ul>
195222
</div>
196-
<p id="experienceSummaryText" class="help-text">Experience snapshot unavailable.</p>
197-
<div class="button-row">
198-
<button id="refreshExperienceButton" type="button">Refresh Pipeline View</button>
199-
</div>
200-
<pre id="experienceDetailsText" class="help-text">No experience snapshot available.</pre>
201-
<p id="debugSummaryText" class="help-text">Debug visualization unavailable.</p>
202-
<div class="button-row">
203-
<button id="refreshDebugVisualizationButton" type="button">Refresh Debug View</button>
223+
</details>
224+
225+
<details class="panel-accordion" id="rightPanelRemediation">
226+
<summary class="panel-accordion__summary"><h3>Remediation</h3></summary>
227+
<div class="panel-accordion__body">
228+
<p id="remediationSummaryText" class="help-text">No remediation actions available.</p>
229+
<div class="button-row">
230+
<button id="inspectRemediationButton" type="button">Inspect Issues</button>
231+
<button id="jumpToProblemButton" type="button">Jump to Problem</button>
232+
<button id="applyRemediationButton" type="button">Apply Suggested Fix</button>
233+
</div>
234+
<p id="experienceSummaryText" class="help-text">Experience snapshot unavailable.</p>
235+
<div class="button-row">
236+
<button id="refreshExperienceButton" type="button">Refresh Pipeline View</button>
237+
</div>
238+
<pre id="experienceDetailsText" class="help-text">No experience snapshot available.</pre>
239+
<p id="debugSummaryText" class="help-text">Debug visualization unavailable.</p>
240+
<div class="button-row">
241+
<button id="refreshDebugVisualizationButton" type="button">Refresh Debug View</button>
242+
</div>
243+
<pre id="debugDetailsText" class="help-text">No debug visualization available.</pre>
204244
</div>
205-
<pre id="debugDetailsText" class="help-text">No debug visualization available.</pre>
206-
</section>
245+
</details>
207246
</aside>
208247
</div>
209248
</div>

0 commit comments

Comments
 (0)