Formatting fontEditor
This commit is contained in:
parent
88fc3a4477
commit
dad962d1a8
2 changed files with 73 additions and 112 deletions
|
|
@ -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
73
src/cg/fontEditor.cg
Normal 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.."
|
||||
]
|
||||
}
|
||||
} };
|
||||
Loading…
Add table
Add a link
Reference in a new issue