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