Skip to content

Commit 24e07ed

Browse files
authored
Add text tool with rich editor (#54)
* feat: add text tool with rich editor * Fix text tool interactions and editing flow * Fix text metadata on destructive erase ops * Fix rect-select disappearing text after erase * Finalize text editability on first draw
2 parents 445259c + adff4b0 commit 24e07ed

7 files changed

Lines changed: 812 additions & 50 deletions

File tree

celstomp/css/components/overlays.css

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,124 @@
127127
line-height: 1.35;
128128
}
129129

130+
.canvasTextEntry {
131+
position: fixed;
132+
inset: 0;
133+
display: none;
134+
align-items: center;
135+
justify-content: center;
136+
background: rgba(0, 0, 0, 0.32);
137+
z-index: 9400;
138+
}
139+
140+
.canvasTextEntry.open {
141+
display: flex;
142+
}
143+
144+
.canvasTextEntryCard {
145+
width: min(420px, calc(100vw - 24px));
146+
border: 1px solid rgba(255, 255, 255, 0.16);
147+
background: rgba(16, 20, 28, 0.96);
148+
border-radius: 10px;
149+
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
150+
padding: 12px;
151+
display: grid;
152+
gap: 10px;
153+
}
154+
155+
.canvasTextEntryLabel {
156+
font-size: 12px;
157+
color: #c7d0db;
158+
letter-spacing: 0.04em;
159+
text-transform: uppercase;
160+
}
161+
162+
.canvasTextEntryInput {
163+
width: 100%;
164+
min-height: 36px;
165+
border: 1px solid rgba(255, 255, 255, 0.14);
166+
background: rgba(0, 0, 0, 0.28);
167+
color: #e2e8f0;
168+
border-radius: 8px;
169+
padding: 8px 10px;
170+
}
171+
172+
.canvasTextEntryInput:focus {
173+
outline: none;
174+
border-color: rgba(92, 179, 255, 0.8);
175+
box-shadow: 0 0 0 2px rgba(92, 179, 255, 0.2);
176+
}
177+
178+
.canvasTextEntryOptions {
179+
display: grid;
180+
grid-template-columns: repeat(2, minmax(0, 1fr));
181+
gap: 8px;
182+
}
183+
184+
.canvasTextEntryOpt {
185+
display: grid;
186+
gap: 4px;
187+
}
188+
189+
.canvasTextEntryOpt > span {
190+
font-size: 11px;
191+
color: #b7c3d2;
192+
letter-spacing: 0.03em;
193+
}
194+
195+
.canvasTextEntrySelect,
196+
.canvasTextEntryNum {
197+
width: 100%;
198+
min-height: 32px;
199+
border: 1px solid rgba(255, 255, 255, 0.14);
200+
background: rgba(0, 0, 0, 0.28);
201+
color: #e2e8f0;
202+
border-radius: 8px;
203+
padding: 6px 8px;
204+
}
205+
206+
.canvasTextEntrySelect:focus,
207+
.canvasTextEntryNum:focus {
208+
outline: none;
209+
border-color: rgba(92, 179, 255, 0.8);
210+
box-shadow: 0 0 0 2px rgba(92, 179, 255, 0.2);
211+
}
212+
213+
.canvasTextEntryOptCheck {
214+
align-items: center;
215+
grid-template-columns: auto 1fr;
216+
gap: 8px;
217+
border: 1px solid rgba(255, 255, 255, 0.12);
218+
border-radius: 8px;
219+
background: rgba(255, 255, 255, 0.04);
220+
padding: 6px 8px;
221+
}
222+
223+
.canvasTextEntryOptCheck input {
224+
margin: 0;
225+
}
226+
227+
.canvasTextEntryActions {
228+
display: flex;
229+
justify-content: flex-end;
230+
gap: 8px;
231+
}
232+
233+
.canvasTextEntryBtn {
234+
min-height: 34px;
235+
padding: 0 12px;
236+
border-radius: 8px;
237+
border: 1px solid rgba(255, 255, 255, 0.14);
238+
background: rgba(255, 255, 255, 0.06);
239+
color: #d0d8e2;
240+
}
241+
242+
.canvasTextEntryBtnPrimary {
243+
border-color: rgba(92, 179, 255, 0.6);
244+
background: rgba(92, 179, 255, 0.18);
245+
color: #9fd5ff;
246+
}
247+
130248
/* Modal Card */
131249
.modalBackdrop{
132250
position: fixed;

0 commit comments

Comments
 (0)