Skip to content

Commit 0ec3e36

Browse files
author
DavidQ
committed
docs: restructure all tool how_to_use pages with save-context-first flow
- Reordered sections across all `tools/*/how_to_use.html`: - `Details` - `Tool vs Workspace Saves` (moved above workflow) - `Workflow` - `Buttons` - Upgraded `Workflow` to side-by-side compare cards: - `Tool Mode` vs `Workspace Mode` - Kept `Buttons` section alphabetical and tool-specific. - Added shared how-to workflow layout styles in `tools/shared/platformShell.css` with responsive single-column fallback on smaller screens. `fix(workspace-nav): stabilize tool tile interaction and prevent hover/focus flicker` - prevent workspace header/nav re-render churn by gating shell re-renders on meaningful UI state changes only - keep tool row interaction reliable by delegating row clicks to the tool link - prevent badge text from intercepting clicks via `pointer-events: none` - remove hover vertical shift on tool links to stop bounce/jitter during pointer movement
1 parent 06bb336 commit 0ec3e36

22 files changed

Lines changed: 979 additions & 236 deletions

File tree

‎tools/3D Asset Viewer/how_to_use.html‎

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -13,23 +13,54 @@
1313
<main class="wrap">
1414
<section class="hero">
1515
<h1>3D Asset Viewer: How To Use</h1>
16-
<p class="subtitle">Detailed workflow with action guidance and why each step matters for day-to-day usage.</p>
16+
<p class="subtitle">Detailed workflow with practical steps and control guidance.</p>
1717
</section>
1818

1919
<section class="section">
20-
<h2>Step-by-Step</h2>
20+
<h2>Details</h2>
2121
<div class="card">
22-
<p><strong>1. Open the tool</strong><br />Action: Open <code>tools/3D Asset Viewer/index.html</code> from Tools index.<br />Why: Tool loads with shared header and ready status.</p>
23-
<p><strong>2. Start a workspace session</strong><br />Action: Use Workspace controls (New/Open) when available.<br />Why: A clean working state is created or loaded for editing.</p>
24-
<p><strong>3. Configure input/settings</strong><br />Action: Set core options (mode, dimensions, source, or filters) for this tool task.<br />Why: Canvas/panels update to reflect the active configuration.</p>
25-
<p><strong>4. Perform edits</strong><br />Action: Use primary controls to create/adjust data in the main workspace.<br />Why: Visible output changes and status reflects latest edits.</p>
26-
<p><strong>5. Validate/preview</strong><br />Action: Use built-in preview, inspection, or validation actions.<br />Why: Errors and warnings are surfaced before export/save.</p>
27-
<p><strong>6. Save/export</strong><br />Action: Save workspace and export artifact/payload as needed.<br />Why: Reusable output is produced for tools, samples, or game flows.</p>
22+
<p>Baseline 3D asset metadata viewer for vertices, bounds, and normalized runtime payload inspection.</p>
23+
</div>
24+
</section>
25+
26+
<section class="section">
27+
<h2>Tool vs Workspace Saves</h2>
28+
<div class="card">
29+
<p><strong>Tool save/export</strong><br />Action: Use tool save/export controls for JSON, PNG, sheets, runtime payloads, and tool-local artifacts.<br />Why this step matters: Creates the actual outputs consumed by samples/games/pipeline steps.</p>
30+
<p><strong>Workspace save</strong><br />Action: Use Workspace Manager save controls to persist cross-tool session state.<br />Why this step matters: Restores coordinated context (selected tool state, shared refs) but does not replace explicit artifact exports.</p>
31+
</div>
32+
</section>
33+
34+
<section class="section">
35+
<h2>Workflow</h2>
36+
<div class="tools-howto-workflow-compare">
37+
<article class="card tools-howto-workflow-column">
38+
<h3>Tool Mode</h3>
39+
<p><strong>1. Open the tool directly</strong><br />Action: Launch this tool from <code>tools/&lt;tool&gt;/index.html</code> (not through Workspace Manager).<br />Why this step matters: Keeps the session focused on one tool and its local outputs.</p>
40+
<p><strong>2. Build/edit in the tool</strong><br />Action: Perform core edits using the tool controls and validate output in-place.<br />Why this step matters: Produces the working data and preview state for this specific tool.</p>
41+
<p><strong>3. Save/export deliverables</strong><br />Action: Use tool save/export controls (JSON/PNG/sheets/runtime payloads as applicable).<br />Why this step matters: Creates the real files consumed by games, samples, and pipeline steps.</p>
42+
<p><strong>4. Continue or close</strong><br />Action: Open another tool directly as needed.
43+
<br />Why this step matters: Tool mode is best for isolated tasks and fast single-tool iteration.</p>
44+
</article>
45+
46+
<article class="card tools-howto-workflow-column">
47+
<h3>Workspace Mode</h3>
48+
<p><strong>1. Create a named workspace</strong><br />Action: Click <code>New Workspace</code> and enter a meaningful name (example: <code>UAT 001 Workspace</code>).<br />Why this step matters: Starts from a clear baseline and makes saved snapshots easy to identify.</p>
49+
<p><strong>2. Open tools from Workspace Manager tiles</strong><br />Action: Select needed tool tiles and make edits across tools.<br />Why this step matters: Keeps multi-tool work coordinated under one shared context.</p>
50+
<p><strong>3. Save both levels intentionally</strong><br />Action: Use tool-level save/export for artifacts, then click <code>Save Workspace</code> for session state.
51+
<br />Why this step matters: Preserves both deliverable files and cross-tool orchestration state.</p>
52+
<p><strong>4. Checkpoint and resume</strong><br />Action: Use <code>Save Workspace As</code> for milestones and <code>Open Workspace</code> to resume later.<br />Why this step matters: Supports versioned progress and reliable continuation.</p>
53+
</article>
54+
</div>
55+
</section>
56+
57+
<section class="section">
58+
<h2>Buttons</h2>
59+
<div class="card">
60+
<p><strong>Inspect Asset</strong> <code>#inspect3dAssetButton</code><br />Details: Checks state/output so issues are caught before final save/export.</p>
2861
</div>
2962
</section>
3063
</main>
3164
<script type="module" src="../../src/engine/theme/mount-shared-header.js"></script>
3265
</body>
3366
</html>
34-
35-

‎tools/3D Camera Path Editor/how_to_use.html‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -13,23 +13,55 @@
1313
<main class="wrap">
1414
<section class="hero">
1515
<h1>3D Camera Path Editor: How To Use</h1>
16-
<p class="subtitle">Detailed workflow with action guidance and why each step matters for day-to-day usage.</p>
16+
<p class="subtitle">Detailed workflow with practical steps and control guidance.</p>
1717
</section>
1818

1919
<section class="section">
20-
<h2>Step-by-Step</h2>
20+
<h2>Details</h2>
2121
<div class="card">
22-
<p><strong>1. Open the tool</strong><br />Action: Open <code>tools/3D Camera Path Editor/index.html</code> from Tools index.<br />Why: Tool loads with shared header and ready status.</p>
23-
<p><strong>2. Start a workspace session</strong><br />Action: Use Workspace controls (New/Open) when available.<br />Why: A clean working state is created or loaded for editing.</p>
24-
<p><strong>3. Configure input/settings</strong><br />Action: Set core options (mode, dimensions, source, or filters) for this tool task.<br />Why: Canvas/panels update to reflect the active configuration.</p>
25-
<p><strong>4. Perform edits</strong><br />Action: Use primary controls to create/adjust data in the main workspace.<br />Why: Visible output changes and status reflects latest edits.</p>
26-
<p><strong>5. Validate/preview</strong><br />Action: Use built-in preview, inspection, or validation actions.<br />Why: Errors and warnings are surfaced before export/save.</p>
27-
<p><strong>6. Save/export</strong><br />Action: Save workspace and export artifact/payload as needed.<br />Why: Reusable output is produced for tools, samples, or game flows.</p>
22+
<p>Baseline 3D camera path editor for waypoint timeline authoring and deterministic JSON export.</p>
23+
</div>
24+
</section>
25+
26+
<section class="section">
27+
<h2>Tool vs Workspace Saves</h2>
28+
<div class="card">
29+
<p><strong>Tool save/export</strong><br />Action: Use tool save/export controls for JSON, PNG, sheets, runtime payloads, and tool-local artifacts.<br />Why this step matters: Creates the actual outputs consumed by samples/games/pipeline steps.</p>
30+
<p><strong>Workspace save</strong><br />Action: Use Workspace Manager save controls to persist cross-tool session state.<br />Why this step matters: Restores coordinated context (selected tool state, shared refs) but does not replace explicit artifact exports.</p>
31+
</div>
32+
</section>
33+
34+
<section class="section">
35+
<h2>Workflow</h2>
36+
<div class="tools-howto-workflow-compare">
37+
<article class="card tools-howto-workflow-column">
38+
<h3>Tool Mode</h3>
39+
<p><strong>1. Open the tool directly</strong><br />Action: Launch this tool from <code>tools/&lt;tool&gt;/index.html</code> (not through Workspace Manager).<br />Why this step matters: Keeps the session focused on one tool and its local outputs.</p>
40+
<p><strong>2. Build/edit in the tool</strong><br />Action: Perform core edits using the tool controls and validate output in-place.<br />Why this step matters: Produces the working data and preview state for this specific tool.</p>
41+
<p><strong>3. Save/export deliverables</strong><br />Action: Use tool save/export controls (JSON/PNG/sheets/runtime payloads as applicable).<br />Why this step matters: Creates the real files consumed by games, samples, and pipeline steps.</p>
42+
<p><strong>4. Continue or close</strong><br />Action: Open another tool directly as needed.
43+
<br />Why this step matters: Tool mode is best for isolated tasks and fast single-tool iteration.</p>
44+
</article>
45+
46+
<article class="card tools-howto-workflow-column">
47+
<h3>Workspace Mode</h3>
48+
<p><strong>1. Create a named workspace</strong><br />Action: Click <code>New Workspace</code> and enter a meaningful name (example: <code>UAT 001 Workspace</code>).<br />Why this step matters: Starts from a clear baseline and makes saved snapshots easy to identify.</p>
49+
<p><strong>2. Open tools from Workspace Manager tiles</strong><br />Action: Select needed tool tiles and make edits across tools.<br />Why this step matters: Keeps multi-tool work coordinated under one shared context.</p>
50+
<p><strong>3. Save both levels intentionally</strong><br />Action: Use tool-level save/export for artifacts, then click <code>Save Workspace</code> for session state.
51+
<br />Why this step matters: Preserves both deliverable files and cross-tool orchestration state.</p>
52+
<p><strong>4. Checkpoint and resume</strong><br />Action: Use <code>Save Workspace As</code> for milestones and <code>Open Workspace</code> to resume later.<br />Why this step matters: Supports versioned progress and reliable continuation.</p>
53+
</article>
54+
</div>
55+
</section>
56+
57+
<section class="section">
58+
<h2>Buttons</h2>
59+
<div class="card">
60+
<p><strong>Add Waypoint</strong> <code>#addCameraPointButton</code><br />Details: Triggers a tool action that updates your current workflow state.</p>
61+
<p><strong>Normalize Path</strong> <code>#normalizeCameraPathButton</code><br />Details: Triggers a tool action that updates your current workflow state.</p>
2862
</div>
2963
</section>
3064
</main>
3165
<script type="module" src="../../src/engine/theme/mount-shared-header.js"></script>
3266
</body>
3367
</html>
34-
35-

‎tools/3D Map Editor/how_to_use.html‎

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -13,23 +13,54 @@
1313
<main class="wrap">
1414
<section class="hero">
1515
<h1>3D Map Editor: How To Use</h1>
16-
<p class="subtitle">Detailed workflow with action guidance and why each step matters for day-to-day usage.</p>
16+
<p class="subtitle">Detailed workflow with practical steps and control guidance.</p>
1717
</section>
1818

1919
<section class="section">
20-
<h2>Step-by-Step</h2>
20+
<h2>Details</h2>
2121
<div class="card">
22-
<p><strong>1. Open the tool</strong><br />Action: Open <code>tools/3D Map Editor/index.html</code> from Tools index.<br />Why: Tool loads with shared header and ready status.</p>
23-
<p><strong>2. Start a workspace session</strong><br />Action: Use Workspace controls (New/Open) when available.<br />Why: A clean working state is created or loaded for editing.</p>
24-
<p><strong>3. Configure input/settings</strong><br />Action: Set core options (mode, dimensions, source, or filters) for this tool task.<br />Why: Canvas/panels update to reflect the active configuration.</p>
25-
<p><strong>4. Perform edits</strong><br />Action: Use primary controls to create/adjust data in the main workspace.<br />Why: Visible output changes and status reflects latest edits.</p>
26-
<p><strong>5. Validate/preview</strong><br />Action: Use built-in preview, inspection, or validation actions.<br />Why: Errors and warnings are surfaced before export/save.</p>
27-
<p><strong>6. Save/export</strong><br />Action: Save workspace and export artifact/payload as needed.<br />Why: Reusable output is produced for tools, samples, or game flows.</p>
22+
<p>Baseline 3D map document editor for point and segment layout with normalized JSON output.</p>
23+
</div>
24+
</section>
25+
26+
<section class="section">
27+
<h2>Tool vs Workspace Saves</h2>
28+
<div class="card">
29+
<p><strong>Tool save/export</strong><br />Action: Use tool save/export controls for JSON, PNG, sheets, runtime payloads, and tool-local artifacts.<br />Why this step matters: Creates the actual outputs consumed by samples/games/pipeline steps.</p>
30+
<p><strong>Workspace save</strong><br />Action: Use Workspace Manager save controls to persist cross-tool session state.<br />Why this step matters: Restores coordinated context (selected tool state, shared refs) but does not replace explicit artifact exports.</p>
31+
</div>
32+
</section>
33+
34+
<section class="section">
35+
<h2>Workflow</h2>
36+
<div class="tools-howto-workflow-compare">
37+
<article class="card tools-howto-workflow-column">
38+
<h3>Tool Mode</h3>
39+
<p><strong>1. Open the tool directly</strong><br />Action: Launch this tool from <code>tools/&lt;tool&gt;/index.html</code> (not through Workspace Manager).<br />Why this step matters: Keeps the session focused on one tool and its local outputs.</p>
40+
<p><strong>2. Build/edit in the tool</strong><br />Action: Perform core edits using the tool controls and validate output in-place.<br />Why this step matters: Produces the working data and preview state for this specific tool.</p>
41+
<p><strong>3. Save/export deliverables</strong><br />Action: Use tool save/export controls (JSON/PNG/sheets/runtime payloads as applicable).<br />Why this step matters: Creates the real files consumed by games, samples, and pipeline steps.</p>
42+
<p><strong>4. Continue or close</strong><br />Action: Open another tool directly as needed.
43+
<br />Why this step matters: Tool mode is best for isolated tasks and fast single-tool iteration.</p>
44+
</article>
45+
46+
<article class="card tools-howto-workflow-column">
47+
<h3>Workspace Mode</h3>
48+
<p><strong>1. Create a named workspace</strong><br />Action: Click <code>New Workspace</code> and enter a meaningful name (example: <code>UAT 001 Workspace</code>).<br />Why this step matters: Starts from a clear baseline and makes saved snapshots easy to identify.</p>
49+
<p><strong>2. Open tools from Workspace Manager tiles</strong><br />Action: Select needed tool tiles and make edits across tools.<br />Why this step matters: Keeps multi-tool work coordinated under one shared context.</p>
50+
<p><strong>3. Save both levels intentionally</strong><br />Action: Use tool-level save/export for artifacts, then click <code>Save Workspace</code> for session state.
51+
<br />Why this step matters: Preserves both deliverable files and cross-tool orchestration state.</p>
52+
<p><strong>4. Checkpoint and resume</strong><br />Action: Use <code>Save Workspace As</code> for milestones and <code>Open Workspace</code> to resume later.<br />Why this step matters: Supports versioned progress and reliable continuation.</p>
53+
</article>
54+
</div>
55+
</section>
56+
57+
<section class="section">
58+
<h2>Buttons</h2>
59+
<div class="card">
60+
<p><strong>Normalize Map</strong> <code>#normalize3dMapButton</code><br />Details: Triggers a tool action that updates your current workflow state.</p>
2861
</div>
2962
</section>
3063
</main>
3164
<script type="module" src="../../src/engine/theme/mount-shared-header.js"></script>
3265
</body>
3366
</html>
34-
35-

0 commit comments

Comments
 (0)