Formatting fontEditor

This commit is contained in:
Dustin Swan 2026-04-06 20:50:52 -06:00
parent 88fc3a4477
commit dad962d1a8
No known key found for this signature in database
GPG key ID: 30D46587E2100467
2 changed files with 73 additions and 112 deletions

View file

@ -1,112 +0,0 @@
fontEditor = config \
defaults = {
path = ["newFont"]
};
c = { ...defaults, ...config };
existing = getAt c.path;
_ = debug! "existing" existing;
# return app
{
view = ctx \
editGlyph = path \
app = pixelEditor { path = path };
ctx.openApp (join "." path) app.view app.width;
ui.stateful {
focusable = True,
autoFocus = True,
key = "fontEditor-" & (join "." c.path),
init = existing
| Some v \ {
glyphs = v.glyphs,
height = v.height
}
| _ \ {
glyphs = [],
height = 7
},
update = state event \ event
# | ClickCell { x = x, y = y } \ toggleFocused state.{ selectedRow = y, selectedCol = x }
# | Key { key = " " } \ toggleFocused state
# | Key { key = "Enter" } \ toggleFocused state
| Key { key = "ArrowDown" } \ downArrow state
| Key { key = "j" } \ downArrow state
| Key { key = "ArrowUp" } \ upArrow state
| Key { key = "k" } \ upArrow state
| Key { key = "ArrowLeft" } \ leftArrow state
| Key { key = "h" } \ leftArrow state
| Key { key = "ArrowRight" } \ rightArrow state
| Key { key = "l" } \ rightArrow state
| UpdateHeight h \ (
newState = state.{ pixelHeight = (int h) };
{ state = newState, emit = saveGlyph newState })
| _ \ { state = state, emit = [] },
view = state emit \
tileSize = 52;
tileView = g \
glyph = g.value;
key = g.key;
# scale = max 1 (floor (min (tileSize / glyph.w) (tileSize / glyph.h)) - 2);
scale = 4;
x = floor ((tileSize - glyph.w * scale) / 2);
ui.clickable {
onClick = \ editGlyph [...c.path, "glyphs", key],
child = ui.stack {
children = [
ui.rect { w = tileSize, h = tileSize, strokeWidth = 1, strokeColor = "#fff" },
# center tileSize tileSize (glyphView { glyph = glyph, scale = scale })
ui.positioned {
x = 3 * scale, y = scale,
child = glyphView { glyph = glyph, scale = scale }
}
]
}
};
headerHeight = 30;
header = ui.row {
gap = 10,
children = [
inputButton {
h = headerHeight,
key = "new-glyph-button",
label = "New Glyph",
onSubmit = key \ rebindAt [...c.path, "glyphs", key] { w = 5, h = 12, map = [] }
}
]
};
perRow = floor (ctx.w / tileSize) - 1;
grid = ui.stack {
children = mapWithIndex (g idx \
x = (idx % perRow) * tileSize + 2 * (idx % perRow);
y = (floor (idx / perRow)) * tileSize + 2 * (floor (idx / perRow));
ui.positioned {
x = x,
y = y,
child = tileView g
}) (entries state.glyphs)
};
ui.column { gap = 2, children = [
header,
grid,
text "This is me testing. F() . I donno. #blessed. This - taht = 2 * 4. -> etc, etc.."
]}
}
};

73
src/cg/fontEditor.cg Normal file
View file

@ -0,0 +1,73 @@
fontEditor = name \
existing = getAt [name];
{ view = ctx \
editGlyph = path \
appExpr = ("glyphEditor { path = " & (show path)) & " } ";
ctx.openApp (join "." path) appExpr 600;
ui.stateful {
focusable = True,
autoFocus = True,
key = "fontEditor-" & name,
init = existing
| (Some v) \ { glyphs = v.glyphs, height = v.height }
| _ \ { glyphs = [], height = 7 },
update = state event \
event
| (Key {key = "ArrowDown"}) \ downArrow state
| (Key {key = "j"}) \ downArrow state
| (Key {key = "ArrowUp"}) \ upArrow state
| (Key {key = "k"}) \ upArrow state
| (Key {key = "ArrowLeft"}) \ leftArrow state
| (Key {key = "h"}) \ leftArrow state
| (Key {key = "ArrowRight"}) \ rightArrow state
| (Key {key = "l"}) \ rightArrow state
| (UpdateHeight h) \ (newState = state.{ pixelHeight = int h };
{ state = newState, emit = saveGlyph newState })
| _ \ { state = state, emit = [] },
view = state emit \
tileSize = 52;
tileView = g \
glyph = g.value;
key = g.key;
scale = 4;
x = floor ((tileSize - (glyph.w * scale)) / 2);
ui.clickable {
onClick = \ editGlyph [name, "glyphs", key],
child = ui.stack { children = [
ui.rect {
w = tileSize,
h = tileSize,
strokeWidth = 1,
strokeColor = "#fff"
},
ui.positioned {
x = 3 * scale,
y = scale,
child = glyphView { glyph = glyph, scale = scale }
}
] }
};
headerHeight = 30;
header = ui.row {
gap = 10,
children = [inputButton {
h = headerHeight,
key = "new-glyph-button",
label = "New Glyph",
onSubmit = key \ rebindAt [...c.path, "glyphs", key] { w = 5, h = 12, map = [] }
}]
};
perRow = (floor (ctx.w / tileSize)) - 1;
grid = ui.stack { children = mapWithIndex (g idx \
x = ((idx % perRow) * tileSize) + (2 * (idx % perRow));
y = ((floor (idx / perRow)) * tileSize) + (2 * (floor (idx / perRow)));
ui.positioned { x = x, y = y, child = tileView g }) (entries state.glyphs) };
ui.column {
gap = 2,
children = [
header,
grid,
text "This is me testing. F() . I donno. #blessed. This - taht = 2 * 4. -> etc, etc.."
]
}
} };