From 88fc3a4477bf7b64fef2de26c09853e9fe3d9d31 Mon Sep 17 00:00:00 2001 From: Dustin Swan Date: Mon, 6 Apr 2026 20:48:01 -0600 Subject: [PATCH] Fixing glyph editor --- src/cg/06-pixelEditor.cg | 150 --------------------------------------- src/cg/glyph.cg | 130 +++++++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 150 deletions(-) delete mode 100644 src/cg/06-pixelEditor.cg create mode 100644 src/cg/glyph.cg diff --git a/src/cg/06-pixelEditor.cg b/src/cg/06-pixelEditor.cg deleted file mode 100644 index 54909ec..0000000 --- a/src/cg/06-pixelEditor.cg +++ /dev/null @@ -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 - ] - } - } - }; diff --git a/src/cg/glyph.cg b/src/cg/glyph.cg new file mode 100644 index 0000000..d94f64b --- /dev/null +++ b/src/cg/glyph.cg @@ -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] } + } + }; + +@