Skip to content

Commit 014d218

Browse files
zaloclaude
zalo
and
claude
committed
Add build123d-style selector API, measurement functions, Dockview layout, and modern UI
Introduce EdgeSelector/FaceSelector classes with chainable filtering (ofType, parallel, perpendicular, max, min, sortBy) so users can write `FilletEdges(box, 3, Edges(box).max([0,0,1]).indices())` instead of hardcoding fragile edge indices. Add measurement functions (Volume, SurfaceArea, CenterOfMass, EdgeLength), Wedge primitive, and Section cross-section. Migrate layout from GoldenLayout to dockview-core with a DockviewContainer adapter. Restyle with CSS variable dark theme. Group Playwright tests to reduce page loads (2.5 min → 45 s). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 75fc2f7 commit 014d218

17 files changed

Lines changed: 13241 additions & 520 deletions

‎css/main.css‎

Lines changed: 228 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,262 @@
1-
/* Add a black background color to the top navigation */
1+
/* Cascade Studio — Modern Dark Theme */
2+
3+
:root {
4+
/* Base palette */
5+
--cs-bg-primary: #1a1a2e;
6+
--cs-bg-secondary: #16213e;
7+
--cs-bg-surface: #1e2a45;
8+
--cs-bg-elevated: #253352;
9+
10+
/* Text */
11+
--cs-text-primary: #e0e0e0;
12+
--cs-text-secondary: #a0a8b8;
13+
--cs-text-muted: #6b7280;
14+
15+
/* Accent */
16+
--cs-accent: #4fc3f7;
17+
--cs-accent-hover: #81d4fa;
18+
--cs-accent-dim: #2196f3;
19+
20+
/* Borders & separators */
21+
--cs-border: #2a3a5c;
22+
--cs-border-active: #4fc3f7;
23+
24+
/* Scrollbar */
25+
--cs-scrollbar-track: var(--cs-bg-secondary);
26+
--cs-scrollbar-thumb: #4a5568;
27+
28+
/* Radius */
29+
--cs-radius: 4px;
30+
31+
/* Transition */
32+
--cs-transition: 150ms ease;
33+
34+
/* Fonts */
35+
--cs-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
36+
--cs-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
37+
}
38+
39+
/* Reset */
40+
*, *::before, *::after {
41+
box-sizing: border-box;
42+
}
43+
44+
body {
45+
margin: 0;
46+
padding: 0;
47+
background-color: var(--cs-bg-primary);
48+
color: var(--cs-text-primary);
49+
font-family: var(--cs-font-ui);
50+
overflow: hidden;
51+
}
52+
53+
/* Scrollbar styling */
54+
::-webkit-scrollbar {
55+
width: 8px;
56+
height: 8px;
57+
}
58+
::-webkit-scrollbar-track {
59+
background: var(--cs-scrollbar-track);
60+
}
61+
::-webkit-scrollbar-thumb {
62+
background: var(--cs-scrollbar-thumb);
63+
border-radius: 4px;
64+
}
65+
::-webkit-scrollbar-thumb:hover {
66+
background: #5a6878;
67+
}
68+
69+
/* ============================================================
70+
Top Navigation Bar
71+
============================================================ */
72+
273
.topnav {
3-
background-color: #111;
74+
background: var(--cs-bg-secondary);
75+
border-bottom: 1px solid var(--cs-border);
76+
display: flex;
77+
align-items: center;
78+
padding: 0 8px;
79+
height: 36px;
80+
overflow: hidden;
81+
backdrop-filter: blur(8px);
82+
}
83+
84+
.topnav-brand {
85+
color: var(--cs-accent) !important;
86+
font-weight: 600;
87+
font-size: 14px;
88+
padding: 0 12px;
89+
text-decoration: none;
90+
white-space: nowrap;
91+
letter-spacing: 0.02em;
92+
}
93+
94+
.topnav-brand:hover {
95+
color: var(--cs-accent-hover) !important;
96+
background: transparent !important;
97+
}
98+
99+
.topnav-actions {
100+
display: flex;
101+
align-items: center;
102+
gap: 2px;
4103
overflow: hidden;
5104
}
6105

7-
/* Style the links inside the navigation bar */
8106
.topnav a, .topnav label {
9-
float: left;
10-
color: #f2f2f2;
11-
text-align: center;
12-
padding: 4px 16px;
107+
color: var(--cs-text-secondary);
13108
text-decoration: none;
14-
font-size: 14px;
15-
font-family: Consolas;
109+
font-size: 12px;
110+
font-family: var(--cs-font-ui);
111+
padding: 6px 10px;
112+
border-radius: var(--cs-radius);
113+
cursor: pointer;
114+
white-space: nowrap;
115+
transition: color var(--cs-transition), background var(--cs-transition);
16116
}
17117

18-
/* Change the color of links on hover */
19118
.topnav a:hover, .topnav label:hover {
20-
background-color: #aaa;
21-
color: black;
119+
background: var(--cs-bg-elevated);
120+
color: var(--cs-text-primary);
121+
}
122+
123+
.topnav a:active, .topnav label:active {
124+
background: var(--cs-accent-dim);
125+
color: #fff;
126+
}
127+
128+
.topnav-separator {
129+
width: 1px;
130+
height: 16px;
131+
background: var(--cs-border);
132+
margin: 0 4px;
133+
}
134+
135+
.topnav-select {
136+
background: var(--cs-bg-surface);
137+
color: var(--cs-text-secondary);
138+
border: 1px solid var(--cs-border);
139+
border-radius: var(--cs-radius);
140+
padding: 3px 8px;
141+
font-size: 11px;
142+
font-family: var(--cs-font-ui);
143+
margin-left: 8px;
144+
cursor: pointer;
145+
transition: border-color var(--cs-transition);
146+
}
147+
148+
.topnav-select:hover {
149+
border-color: var(--cs-accent);
150+
}
151+
152+
.topnav-select:focus {
153+
outline: none;
154+
border-color: var(--cs-accent);
155+
box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.15);
156+
}
157+
158+
.topnav-import {
159+
cursor: pointer;
160+
}
161+
162+
/* ============================================================
163+
App Body (Dockview container)
164+
============================================================ */
165+
166+
#appbody {
167+
width: 100%;
168+
overflow: hidden;
169+
background: var(--cs-bg-primary);
22170
}
23171

24-
/* Add a color to the active/current link */
25-
.topnav a.active, label.active {
26-
background-color: #4CAF50;
27-
color: white;
172+
/* ============================================================
173+
Dockview Theme Overrides
174+
============================================================ */
175+
176+
.dockview-theme-dark {
177+
--dv-background-color: var(--cs-bg-primary);
178+
--dv-paneview-header-border-color: var(--cs-border);
179+
--dv-tabs-and-actions-container-background-color: var(--cs-bg-secondary);
180+
--dv-activegroup-visiblepanel-tab-background-color: var(--cs-bg-surface);
181+
--dv-activegroup-hiddenpanel-tab-background-color: var(--cs-bg-secondary);
182+
--dv-inactivegroup-visiblepanel-tab-background-color: var(--cs-bg-surface);
183+
--dv-inactivegroup-hiddenpanel-tab-background-color: var(--cs-bg-secondary);
184+
--dv-tab-divider-color: var(--cs-border);
185+
--dv-activegroup-visiblepanel-tab-color: var(--cs-text-primary);
186+
--dv-activegroup-hiddenpanel-tab-color: var(--cs-text-muted);
187+
--dv-inactivegroup-visiblepanel-tab-color: var(--cs-text-secondary);
188+
--dv-inactivegroup-hiddenpanel-tab-color: var(--cs-text-muted);
189+
--dv-separator-border: var(--cs-border);
190+
--dv-group-view-background-color: var(--cs-bg-primary);
28191
}
192+
193+
/* ============================================================
194+
Centered overlay
195+
============================================================ */
196+
29197
.centered {
30-
position: fixed; top: 10%; left: 25%; z-index: 1000;
31-
width: 50%; height: 80%;
32-
background: rgb(19, 19, 19); color: white;
198+
position: fixed;
199+
top: 10%;
200+
left: 25%;
201+
z-index: 1000;
202+
width: 50%;
203+
height: 80%;
204+
background: var(--cs-bg-primary);
205+
color: var(--cs-text-primary);
206+
border: 1px solid var(--cs-border);
207+
border-radius: 8px;
33208
overflow: auto;
209+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
34210
}
35211

36-
/* TweakPane theme */
212+
/* ============================================================
213+
TweakPane (GUI Panel) Theme
214+
============================================================ */
215+
37216
:root {
38-
--tp-font-family: Arial, sans-serif;
39-
--tp-base-background-color: #2e2e2e;
40-
--tp-button-background-color: hsl(0, 0%, 25%);
41-
--tp-button-background-color-active: hsl(0, 0%, 40%);
42-
--tp-button-background-color-focus: hsl(0, 0%, 35%);
43-
--tp-button-background-color-hover: hsl(0, 0%, 30%);
44-
--tp-button-foreground-color: #eeeeee;
45-
--tp-label-foreground-color: #aeb5b8;
217+
--tp-font-family: var(--cs-font-ui);
218+
--tp-base-background-color: var(--cs-bg-surface);
219+
--tp-button-background-color: var(--cs-bg-elevated);
220+
--tp-button-background-color-active: var(--cs-accent-dim);
221+
--tp-button-background-color-focus: var(--cs-bg-elevated);
222+
--tp-button-background-color-hover: #2c4060;
223+
--tp-button-foreground-color: var(--cs-text-primary);
224+
--tp-label-foreground-color: var(--cs-text-secondary);
46225
}
226+
47227
.gui-panel {
48228
position: absolute;
49229
right: 0;
50230
max-height: 100%;
51231
overflow-y: auto;
232+
z-index: 10;
52233
}
234+
53235
.gui-panel::-webkit-scrollbar {
54-
width: 10px;
55-
background: var(--tp-base-background-color);
236+
width: 8px;
237+
background: var(--cs-bg-surface);
56238
}
239+
57240
.gui-panel::-webkit-scrollbar-thumb {
58-
background: #777;
241+
background: var(--cs-scrollbar-thumb);
242+
border-radius: 4px;
59243
}
244+
60245
.tp-rotv {
61246
text-shadow: 1px 1px #000;
247+
border-radius: var(--cs-radius);
62248
}
249+
63250
.tp-rotv button {
64251
text-shadow: inherit;
65252
}
253+
254+
/* ============================================================
255+
Console Panel Styling
256+
============================================================ */
257+
258+
/* Enhance console output readability */
259+
#appbody .dv-content-container div[style*="monospace"] {
260+
padding: 2px 8px;
261+
font-family: var(--cs-font-mono);
262+
}

‎index.html‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<meta name="author" content="Johnathon Selstad">
1010
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1111
<meta name="cascade-api" content="window.CascadeAPI">
12-
<meta name="theme-color" content="#1e1e1e">
12+
<meta name="theme-color" content="#1a1a2e">
1313

1414
<!-- Service Worker for offline access (must be first) -->
1515
<script>
@@ -35,9 +35,8 @@
3535
<link rel="manifest" href="./manifest.webmanifest">
3636
<link rel="apple-touch-icon" href="./icon/apple-touch-icon.png">
3737

38-
<!-- Golden Layout v2 CSS -->
39-
<link rel="stylesheet" href="./lib/golden-layout/goldenlayout-base.css">
40-
<link rel="stylesheet" href="./lib/golden-layout/goldenlayout-dark-theme.css">
38+
<!-- Dockview CSS -->
39+
<link rel="stylesheet" href="./lib/dockview-core/dockview.css">
4140
<link rel="stylesheet" href="./css/main.css">
4241

4342
<!-- Monaco Editor CSS + AMD loader (ESM workers too complex for buildless use) -->
@@ -55,25 +54,29 @@
5554
<script src="./node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
5655
</head>
5756

58-
<body style="margin:0px; background-color:rgb(34, 34, 34);">
57+
<body>
5958
<h1 hidden></h1>
6059
<div id="topnav" class="topnav">
61-
<a href="https://github.com/zalo/CascadeStudio">Cascade Studio</a>
62-
<a href="#" title="Save Project to .json" onmouseup="window.saveProject();">Save Project</a>
63-
<a href="#" title="Load Project from .json" onmouseup="window.loadProject();">Load Project</a>
64-
<a href="#" onmouseup="window.threejsViewport?.saveShapeSTEP();">Save STEP</a>
65-
<a href="#" onmouseup="window.threejsViewport?.saveShapeSTL();">Save STL</a>
66-
<a href="#" onmouseup="window.threejsViewport?.saveShapeOBJ();">Save OBJ</a>
67-
<label for="files" title="Import STEP, IGES, or (ASCII) STL from File">Import STEP/IGES/STL
68-
<input id="files" name="files" type="file" accept=".iges,.step,.igs,.stp,.stl" multiple style="display:none;" oninput="window.loadFiles();"/>
69-
</label>
70-
<a href="#" title="Clears the external step/iges/stl files stored in the project." onmouseup="window.clearExternalFiles();">Clear Imported Files</a>
71-
<select id="editorMode" title="Editor Language Mode" style="margin-left:10px; background:#333; color:#ccc; border:1px solid #555; padding:2px 4px; font-size:12px;">
72-
<option value="cascadestudio">CascadeStudio JS</option>
73-
<option value="openscad">OpenSCAD</option>
74-
</select>
60+
<a href="https://github.com/zalo/CascadeStudio" class="topnav-brand">Cascade Studio</a>
61+
<div class="topnav-actions">
62+
<a href="#" title="Save Project to .json" onmouseup="window.saveProject();">Save Project</a>
63+
<a href="#" title="Load Project from .json" onmouseup="window.loadProject();">Load Project</a>
64+
<span class="topnav-separator"></span>
65+
<a href="#" onmouseup="window.threejsViewport?.saveShapeSTEP();">Save STEP</a>
66+
<a href="#" onmouseup="window.threejsViewport?.saveShapeSTL();">Save STL</a>
67+
<a href="#" onmouseup="window.threejsViewport?.saveShapeOBJ();">Save OBJ</a>
68+
<span class="topnav-separator"></span>
69+
<label for="files" class="topnav-import" title="Import STEP, IGES, or (ASCII) STL from File">Import STEP/IGES/STL
70+
<input id="files" name="files" type="file" accept=".iges,.step,.igs,.stp,.stl" multiple style="display:none;" oninput="window.loadFiles();"/>
71+
</label>
72+
<a href="#" title="Clears the external step/iges/stl files stored in the project." onmouseup="window.clearExternalFiles();">Clear Imported</a>
73+
<select id="editorMode" class="topnav-select" title="Editor Language Mode">
74+
<option value="cascadestudio">CascadeStudio JS</option>
75+
<option value="openscad">OpenSCAD</option>
76+
</select>
77+
</div>
7578
</div>
76-
<div id="appbody" style="height:auto">
79+
<div id="appbody">
7780
<script type="module" src="./js/MainPage/main.js"></script>
7881
</div>
7982
</body>

0 commit comments

Comments
 (0)