Fixing glyph editor
This commit is contained in:
parent
53105bea7d
commit
88fc3a4477
2 changed files with 130 additions and 150 deletions
|
|
@ -1,150 +0,0 @@
|
||||||
pixelEditor = config \
|
|
||||||
defaults = {
|
|
||||||
path = ["newGlyph"]
|
|
||||||
};
|
|
||||||
|
|
||||||
c = { ...defaults, ...config };
|
|
||||||
|
|
||||||
upArrow = state \ (
|
|
||||||
newRow = max 0 (state.selectedRow - 1);
|
|
||||||
{ state = state.{ selectedRow = newRow }, emit = [] });
|
|
||||||
|
|
||||||
downArrow = state \ (
|
|
||||||
newRow = min (state.pixelHeight - 1) (state.selectedRow + 1);
|
|
||||||
{ state = state.{ selectedRow = newRow }, emit = [] });
|
|
||||||
|
|
||||||
leftArrow = state \ (
|
|
||||||
newCol = max 0 (state.selectedCol - 1);
|
|
||||||
{ state = state.{ selectedCol = newCol }, emit = [] });
|
|
||||||
|
|
||||||
rightArrow = state \ (
|
|
||||||
newCol = min (state.pixelWidth - 1) (state.selectedCol + 1);
|
|
||||||
{ state = state.{ selectedCol = newCol }, emit = [] });
|
|
||||||
|
|
||||||
saveGlyph = state \
|
|
||||||
glyph = { w = state.pixelWidth, h = state.pixelHeight, map = state.map };
|
|
||||||
[rebindAt c.path glyph];
|
|
||||||
|
|
||||||
toggleFocused = state \ (
|
|
||||||
row = state.selectedRow;
|
|
||||||
col = state.selectedCol;
|
|
||||||
newMap = contains { x = col, y = row } state.map
|
|
||||||
| True \ filter (e \ e != { x = col, y = row }) state.map
|
|
||||||
| False \ [...state.map, { x = col, y = row }];
|
|
||||||
|
|
||||||
newState = state.{ map = newMap };
|
|
||||||
{ state = newState, emit = saveGlyph newState });
|
|
||||||
|
|
||||||
existing = getAt c.path;
|
|
||||||
|
|
||||||
# return App
|
|
||||||
{
|
|
||||||
width = 600,
|
|
||||||
|
|
||||||
view = ctx \ ui.stateful {
|
|
||||||
focusable = True,
|
|
||||||
autoFocus = True,
|
|
||||||
|
|
||||||
key = "pixelEditor-" & (join "." c.path),
|
|
||||||
|
|
||||||
init = existing
|
|
||||||
| Some v \ {
|
|
||||||
map = v.map,
|
|
||||||
pixelWidth = v.w,
|
|
||||||
pixelHeight = v.h,
|
|
||||||
cellSize = 30,
|
|
||||||
selectedRow = 0,
|
|
||||||
selectedCol = 0
|
|
||||||
}
|
|
||||||
| _ \ {
|
|
||||||
map = [],
|
|
||||||
pixelWidth = 7,
|
|
||||||
pixelHeight = 12,
|
|
||||||
cellSize = 30,
|
|
||||||
selectedRow = 0,
|
|
||||||
selectedCol = 0
|
|
||||||
},
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
| UpdateWidth w \ (
|
|
||||||
newState = state.{ pixelWidth = (int w) };
|
|
||||||
{ state = newState, emit = saveGlyph newState })
|
|
||||||
|
|
||||||
| UpdateHeight h \ (
|
|
||||||
newState = state.{ pixelHeight = (int h) };
|
|
||||||
{ state = newState, emit = saveGlyph newState })
|
|
||||||
|
|
||||||
| _ \ { state = state, emit = [] },
|
|
||||||
|
|
||||||
view = state emit \
|
|
||||||
|
|
||||||
grid = ui.column {
|
|
||||||
children = map (rIdx \
|
|
||||||
ui.row {
|
|
||||||
children = map (cIdx \
|
|
||||||
on = contains { x = cIdx, y = rIdx } state.map;
|
|
||||||
color = (on |True\ "#000" |False\ "rgba(255,255,255,0.2)");
|
|
||||||
|
|
||||||
selected = and (rIdx == state.selectedRow) (cIdx == state.selectedCol);
|
|
||||||
strokeColor = (selected | True \ "#f00" | False \ "rgba(0,0,0,0.2)");
|
|
||||||
|
|
||||||
ui.clickable {
|
|
||||||
onClick = \ emit (ClickCell { x = cIdx, y = rIdx }),
|
|
||||||
child = ui.rect { w = state.cellSize, h = state.cellSize, color = color, strokeWidth = 1, strokeColor = strokeColor }
|
|
||||||
}
|
|
||||||
) (range 0 state.pixelWidth)
|
|
||||||
}
|
|
||||||
) (range 0 state.pixelHeight)
|
|
||||||
};
|
|
||||||
|
|
||||||
headerHeight = 30;
|
|
||||||
|
|
||||||
header = ui.row {
|
|
||||||
gap = 10,
|
|
||||||
|
|
||||||
children = [
|
|
||||||
textInput {
|
|
||||||
key = "width-input",
|
|
||||||
w = 40,
|
|
||||||
h = headerHeight,
|
|
||||||
color = "#fff",
|
|
||||||
backgroundColor = "rgba(0,0,0,0.2)",
|
|
||||||
onSubmit = v \ emit (UpdateWidth v),
|
|
||||||
initialValue = (show state.pixelWidth)
|
|
||||||
},
|
|
||||||
|
|
||||||
ui.positioned { x = 0, y = 8, child = ui.text { content = "x", color = "#aaa" } },
|
|
||||||
|
|
||||||
textInput {
|
|
||||||
key = "height-input",
|
|
||||||
w = 40,
|
|
||||||
h = headerHeight,
|
|
||||||
color = "#fff",
|
|
||||||
backgroundColor = "rgba(0,0,0,0.2)",
|
|
||||||
onSubmit = v \ emit (UpdateHeight v),
|
|
||||||
initialValue = (show state.pixelHeight)
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
ui.column {
|
|
||||||
children = [
|
|
||||||
header,
|
|
||||||
center ctx.w ctx.h grid
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
130
src/cg/glyph.cg
Normal file
130
src/cg/glyph.cg
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
@glyph
|
||||||
|
|
||||||
|
glyphEditor = config \
|
||||||
|
defaults = { path = ["newGlyph"] };
|
||||||
|
c = { ...defaults, ...config };
|
||||||
|
_ = debug! "glyphEditor" c;
|
||||||
|
upArrow = state \
|
||||||
|
newRow = max 0 (state.selectedRow - 1);
|
||||||
|
{ state = state.{ selectedRow = newRow }, emit = [] };
|
||||||
|
downArrow = state \
|
||||||
|
newRow = min (state.pixelHeight - 1) (state.selectedRow + 1);
|
||||||
|
{ state = state.{ selectedRow = newRow }, emit = [] };
|
||||||
|
leftArrow = state \
|
||||||
|
newCol = max 0 (state.selectedCol - 1);
|
||||||
|
{ state = state.{ selectedCol = newCol }, emit = [] };
|
||||||
|
rightArrow = state \
|
||||||
|
newCol = min (state.pixelWidth - 1) (state.selectedCol + 1);
|
||||||
|
{ state = state.{ selectedCol = newCol }, emit = [] };
|
||||||
|
saveGlyph = state \
|
||||||
|
glyph = {
|
||||||
|
w = state.pixelWidth,
|
||||||
|
h = state.pixelHeight,
|
||||||
|
map = state.map
|
||||||
|
};
|
||||||
|
[rebindAt c.path glyph];
|
||||||
|
toggleFocused = state \
|
||||||
|
row = state.selectedRow;
|
||||||
|
col = state.selectedCol;
|
||||||
|
newMap = contains { x = col, y = row } state.map
|
||||||
|
| True \ filter (e \ e != { x = col, y = row }) state.map
|
||||||
|
| False \ [...state.map, { x = col, y = row }];
|
||||||
|
newState = state.{ map = newMap };
|
||||||
|
{ state = newState, emit = saveGlyph newState };
|
||||||
|
existing = getAt c.path;
|
||||||
|
_ = debug! "existing" existing;
|
||||||
|
{
|
||||||
|
width = 600,
|
||||||
|
view = ctx \ ui.stateful {
|
||||||
|
focusable = True,
|
||||||
|
autoFocus = True,
|
||||||
|
key = "pixelEditor-" & (join "." c.path),
|
||||||
|
init = existing
|
||||||
|
| (Some v) \ {
|
||||||
|
map = v.map,
|
||||||
|
pixelWidth = v.w,
|
||||||
|
pixelHeight = v.h,
|
||||||
|
cellSize = 30,
|
||||||
|
selectedRow = 0,
|
||||||
|
selectedCol = 0
|
||||||
|
}
|
||||||
|
| _ \ {
|
||||||
|
map = [],
|
||||||
|
pixelWidth = 7,
|
||||||
|
pixelHeight = 12,
|
||||||
|
cellSize = 30,
|
||||||
|
selectedRow = 0,
|
||||||
|
selectedCol = 0
|
||||||
|
},
|
||||||
|
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
|
||||||
|
| (UpdateWidth w) \ (newState = state.{ pixelWidth = int w };
|
||||||
|
{ state = newState, emit = saveGlyph newState })
|
||||||
|
| (UpdateHeight h) \ (newState = state.{ pixelHeight = int h };
|
||||||
|
{ state = newState, emit = saveGlyph newState })
|
||||||
|
| _ \ { state = state, emit = [] },
|
||||||
|
view = state emit \
|
||||||
|
grid = ui.column { children = map (rIdx \ ui.row { children = map (cIdx \
|
||||||
|
on = contains { x = cIdx, y = rIdx } state.map;
|
||||||
|
color = on
|
||||||
|
| True \ "#000"
|
||||||
|
| False \ "rgba(255,255,255,0.2)";
|
||||||
|
selected = and (rIdx == state.selectedRow) (cIdx == state.selectedCol);
|
||||||
|
strokeColor = selected
|
||||||
|
| True \ "#f00"
|
||||||
|
| False \ "rgba(0,0,0,0.2)";
|
||||||
|
ui.clickable {
|
||||||
|
onClick = \ emit (ClickCell { x = cIdx, y = rIdx }),
|
||||||
|
child = ui.rect {
|
||||||
|
w = state.cellSize,
|
||||||
|
h = state.cellSize,
|
||||||
|
color = color,
|
||||||
|
strokeWidth = 1,
|
||||||
|
strokeColor = strokeColor
|
||||||
|
}
|
||||||
|
}) (range 0 state.pixelWidth) }) (range 0 state.pixelHeight) };
|
||||||
|
headerHeight = 30;
|
||||||
|
header = ui.row {
|
||||||
|
gap = 10,
|
||||||
|
children = [
|
||||||
|
textInput {
|
||||||
|
key = "width-input",
|
||||||
|
w = 40,
|
||||||
|
h = headerHeight,
|
||||||
|
color = "#fff",
|
||||||
|
backgroundColor = "rgba(0,0,0,0.2)",
|
||||||
|
onSubmit = v \ emit (UpdateWidth v),
|
||||||
|
initialValue = display state.pixelWidth
|
||||||
|
},
|
||||||
|
ui.positioned {
|
||||||
|
x = 0,
|
||||||
|
y = 8,
|
||||||
|
child = ui.text { content = "x", color = "#aaa" }
|
||||||
|
},
|
||||||
|
textInput {
|
||||||
|
key = "height-input",
|
||||||
|
w = 40,
|
||||||
|
h = headerHeight,
|
||||||
|
color = "#fff",
|
||||||
|
backgroundColor = "rgba(0,0,0,0.2)",
|
||||||
|
onSubmit = v \ emit (UpdateHeight v),
|
||||||
|
initialValue = display state.pixelHeight
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
ui.column { children = [header, center ctx.w ctx.h grid] }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
@
|
||||||
Loading…
Add table
Add a link
Reference in a new issue