dustinswan/cg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More components. better app interface. more progress on fontEditor

Browse source
This commit is contained in:
Dustin Swan 2026-02-22 23:11:01 -07:00
parent 76e6868cac
commit e3b8930111
No known key found for this signature in database
GPG key ID: 30D46587E2100467
5 changed files with 161 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/cg/03-ui-components.cg
View file

@ -14,16 +14,86 @@ center = parentW parentH child \
# button : Record -> ui
button = config \
textSize = ui.measureText config.label;
defaults = {
h = 30,
w = textSize + 20,
strokeWidth = 1,
strokeColor = "#fff",
textColor = "#fff",
label = ""
};
c = { ...defaults, ...config };
ui.clickable {
onClick = config.event,
child = ui.stack {
children = [
ui.rect { w = 100, h = 40, color = "#eee" },
ui.text { content = config.label, x = 10, y = 25, color = "#222" }
ui.rect { w = c.w, h = c.h, strokeColor = c.strokeColor, strokeWidth = c.strokeWidth },
ui.positioned {
x = 10, y = 8,
child = ui.text { content = config.label, color = c.textColor }
}
]
}
};
# inputButton (button that turns into an input)
inputButton = config \
textSize = ui.measureText config.label;
defaults = {
h = 30,
w = textSize + 16,
strokeWidth = 1,
strokeColor = "#fff",
textColor = "#fff",
backgroundColor = "transparent",
label = ""
};
c = { ...defaults, ...config };
ui.stateful {
key = c.key,
focusable = True,
init = { editing = False },
update = state event \ event
| Activate \ { state = state.{ editing = True }, emit = [] }
| Submit text \ { state = state.{ editing = False }, emit = [c.onSubmit text] }
| Key { key = "Escape" } \ { state = state.{ editing = False }, emit = [] }
| _ \ { state = state, emit = [] },
view = state emit \
state.editing
| True \ textInput {
key = c.key & "-input",
autoFocus = True,
w = c.w, h = c.h,
strokeWidth = 1,
strokeColor = "#fff",
color = c.textColor,
backgroundColor = c.backgroundColor,
onSubmit = text \ emit (Submit text)
}
| False \ ui.clickable {
onClick = \ emit Activate,
child = ui.stack {
children = [
ui.rect { w = c.w, h = c.h, strokeColor = c.strokeColor, strokeWidth = c.strokeWidth },
ui.positioned {
x = 8, y = 8,
child = ui.text { content = config.label, color = c.textColor }
}
]
}
}
};
# scrollable
scrollable = config \
defaults = {
@ -111,6 +181,8 @@ textInput = config \
onChange = _ \ noOp,
initialValue = "",
autoFocus = False,
strokeWidth = 0,
strokeColor = "transparent"
};
c = { ...defaults, ...config };
@ -228,7 +300,7 @@ textInput = config \
h = c.h,
child = ui.stack {
children = [
ui.rect { w = c.w, h = c.h, color = c.backgroundColor, radius = 0 },
ui.rect { w = c.w, h = c.h, color = c.backgroundColor, radius = 0, strokeWidth = c.strokeWidth, strokeColor = c.strokeColor },
ui.positioned {
x = 8 - state.scrollOffset,
@ -251,7 +323,6 @@ textInput = config \
glyphView = config \
defaults = { scale = 1, color = "#fff" };
c = { ...defaults, ...config };
_ = debug! "glyphView" c;
ui.stack {
children = map (pixel \
ui.positioned {

118
src/cg/06-fontEditor.cg
View file

@ -5,67 +5,89 @@ fontEditor = config \
c = { ...defaults, ...config };
_ = debug! "here" c.path;
existing = eval! (c.path);
_ = debug! "here2" existing;
# return app
{
view = size \ ui.stateful {
focusable = True,
autoFocus = True,
view = ctx \
editGlyph = path \
app = pixelEditor { path = path };
ctx.openApp path app.view app.width;
key = "fontEditor-" & c.path,
ui.stateful {
focusable = True,
autoFocus = True,
init = existing
| Value v \ {
glyphs = v.glyphs,
height = v.height
}
| _ \ {
glyphs = [],
height = 7
},
key = "fontEditor-" & c.path,
update = state event \ event
| ClickCell { x = x, y = y } \ toggleFocused state.{ selectedRow = y, selectedCol = x }
| Key { key = " " } \ toggleFocused state
| Key { key = "Enter" } \ toggleFocused state
init = existing
| Value v \ {
glyphs = v.glyphs,
height = v.height
}
| _ \ {
glyphs = [],
height = 7
},
| 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
update = state event \ event
# | ClickCell { x = x, y = y } \ toggleFocused state.{ selectedRow = y, selectedCol = x }
# | Key { key = " " } \ toggleFocused state
# | Key { key = "Enter" } \ toggleFocused state
| UpdateHeight h \ (
newState = state.{ pixelHeight = (int h) };
{ state = newState, emit = saveGlyph newState })
| 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
| _ \ { state = state, emit = [] },
| UpdateHeight h \ (
newState = state.{ pixelHeight = (int h) };
{ state = newState, emit = saveGlyph newState })
view = state emit \
tileSize = 50;
| _ \ { state = state, emit = [] },
tileView = g \
glyph = g.value;
scale = max 1 (floor (min (tileSize / glyph.w) (tileSize / glyph.h)) - 2);
_ = debug! "scael" scale;
ui.clickable {
child = ui.stack {
children = [
ui.rect { w = tileSize, h = tileSize, strokeWidth = 1, strokeColor = "#fff" },
glyphView { glyph = glyph, scale = scale }
]
}
view = state emit \
tileSize = 50;
tileView = g \
glyph = g.value;
key = g.key;
scale = max 1 (floor (min (tileSize / glyph.w) (tileSize / glyph.h)) - 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 = scale, y = scale,
child = glyphView { glyph = glyph, scale = scale }
}
]
}
};
header = ui.row {
gap = 10,
children = [
inputButton {
key = "new-glyph-button",
label = "New Glyph",
onSubmit = key \ rebindAt (c.path & ".glyphs." & key) { w = 5, h = 7, map = [] }
}
]
};
ui.column {
gap = 2,
children = map tileView (entries state.glyphs)
ui.column {
gap = 2,
children = [
header,
...map tileView (entries state.glyphs)
]
}
}
}
};

6
src/cg/06-inspector.cg
View file

@ -1,7 +1,7 @@
inspector = config \
{
width = 600,
view = size \
view = ctx \
val = eval! config.name;
reflected = val
@ -13,7 +13,7 @@ inspector = config \
tree {
value = reflected,
path = config.name,
w = size.w,
h = size.h - textInputHeight
w = ctx.w,
h = ctx.h - textInputHeight
}
};

5
src/cg/06-pixelEditor.cg
View file

@ -36,13 +36,12 @@ pixelEditor = config \
{ state = newState, emit = saveGlyph newState });
existing = eval! (c.path);
_ = debug! "existing" existing;
# return App
{
width = 600,
view = size \ ui.stateful {
view = ctx \ ui.stateful {
focusable = True,
autoFocus = True,
@ -146,7 +145,7 @@ pixelEditor = config \
ui.column {
children = [
header,
center size.w size.h grid
center ctx.w ctx.h grid
]
}
}

19
src/cg/10-os.cg
View file

@ -76,6 +76,11 @@ os =
idx = osState.wm.focusedIndex;
osState.windows := updateAt idx (w \ w.{ fullWidth = not w.fullWidth }) osState.windows;
openOrFocus = title content width \
index title (map (w \ w.title) osState.windows)
| Some i \ focusWindow i
| None \ openWindow title content width;
renderWindow = window isActive \
titleBarHeight = 30;
@ -122,13 +127,17 @@ os =
child = ui.clip {
w = (windowWidth window),
h = viewport.height - titleBarHeight,
child = window.content { w = (windowWidth window), h = viewport.height - titleBarHeight }
child = window.content {
w = (windowWidth window),
h = viewport.height - titleBarHeight,
openApp = openOrFocus,
close = _ \ closeWindowById window.id
}
}
}
]
};
windowComponent = config \ ui.stateful {
key = "window-" & (show config.window.id),
focusable = True,
@ -172,12 +181,6 @@ os =
Item { label = q }
];
openOrFocus = title content width \
index title (map (w \ w.title) osState.windows)
| Some i \ focusWindow i
| None \ openWindow title content width;
onSelect = input \
historyEvent = paletteHistory := take 50 [input, ...(filter (e \ e != input) paletteHistory)];
dw = osState.wm.defaultWindowWidth;