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

Fixing my textInput and example app that uses it

Browse source
This commit is contained in:
Dustin Swan 2026-02-05 20:18:33 -07:00
parent a9afb03694
commit 59dc90cfa5
No known key found for this signature in database
GPG key ID: 30D46587E2100467
2 changed files with 43 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/textinput-test.cg
View file

@ -1,11 +1,8 @@
init = {}; init = {};
update = state event \ event update = state event \ event
| FocusEmail coords \ state.{ focusedInput = "email" } # | FocusEmail coords \ state.{ focusedInput = "email" }
| FocusPassword coords \ state.{ focusedInput = "password" } # | FocusPassword coords \ state.{ focusedInput = "password" }
| Noop \ state
| _ \ state; | _ \ state;
view = state viewport \ view = state viewport \
@ -18,20 +15,20 @@ view = state viewport \
textInput { textInput {
key = "email", key = "email",
initialValue = "", initialValue = "",
initialFocus = True,
w = 300, w = 300,
h = 40, h = 40,
onChange = text \ Noop, onChange = text \ Noop
focused = True, # onFocus = Noop
onFocus = Noop },
textInput {
# focused = state.focusedInput == "email", key = "password",
# onFocus = FocusEmail, initialValue = "",
# }, initialFocus = False,
# textInput.view state.password { w = 300,
# focused = state.focusedInput == "password", h = 40,
# onFocus = FocusPassword, onChange = text \ Noop
# w = 300, # onFocus = Noop
# h = 40
} }
] ]
} }

132
src/ui-components.cg
View file

@ -55,7 +55,12 @@ textInput = config \ Stateful {
focusable = True, focusable = True,
# init : State # init : State
init = { text = config.initialValue, cursorPos = 0, scrollOffset = 0 }, init = {
text = config.initialValue,
focused = config.initialFocus,
cursorPos = 0,
scrollOffset = 0
},
# update : State \ Event \ State # update : State \ Event \ State
update = state event \ event update = state event \ event
@ -91,14 +96,14 @@ textInput = config \ Stateful {
) )
| Clicked coords \ ( | Clicked coords \ (
newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8; newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8;
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284; newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
newSatte = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }; newSatte = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
{ state = newState, emit = [] } { state = newState, emit = [] }
) )
| Focused \ { state = state, emit = [] } | Focused \ { state = state.{ focused = True }, emit = [] }
| Blurred \ { state = state, emit = [] } | Blurred \ { state = state.{ focused = False }, emit = [] }
| _ \ { state = state, emit = [] }, | _ \ { state = state, emit = [] },
view = state \ view = state \
@ -109,103 +114,24 @@ textInput = config \ Stateful {
Clip { Clip {
w = config.w, w = config.w,
h = config.h, h = config.h,
child = Clickable { child = Stack {
event = config.onFocus, children = [
child = Rect { w = config.w, h = config.h, color = "rgba(240,240,240,0.9)", radius = 4 },
Stack {
children = [
Rect { w = config.w, h = config.h, color = "rgba(240,240,240,0.9)", radius = 4 },
Positioned { Positioned {
x = 8 - state.scrollOffset, x = 8 - state.scrollOffset,
y = 8, y = 8,
child = Text { content = state.text, x = 0, y = 17 } child = Text { content = state.text, x = 0, y = 17 }
}, },
(config.focused (state.focused
| True \ Positioned { | True \ Positioned {
x = 8 + cursorX - state.scrollOffset, x = 8 + cursorX - state.scrollOffset,
y = 8, y = 8,
child = Rect { w = 2, h = 24, color = "black" } child = Rect { w = 2, h = 24, color = "black" }
}
| _ \ Rect { w = 0, h = 0, color = "transparent" })
]
} }
} | _ \ Rect { w = 0, h = 0, color = "transparent" })
} ]
};
textInputOLD = {
# init : String \ State
init = text \ { text = text, cursorPos = 0, scrollOffset = 0 },
# update : State \ Event \ State
update = state event \ event
| ArrowLeft \ (
newCursorPos = max 0 (state.cursorPos - 1);
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }
)
| ArrowRight \ (
newCursorPos = min (len state.text) (state.cursorPos + 1);
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }
)
| Backspace \ (
newText = deleteChar state.text state.cursorPos;
newCursorPos = max 0 (state.cursorPos - 1);
newScroll = calcScrollOffset newText newCursorPos state.scrollOffset 284;
{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll }
)
| Char c \ (
newText = insertChar state.text state.cursorPos c;
newCursorPos = state.cursorPos + 1;
newScroll = calcScrollOffset newText newCursorPos state.scrollOffset 284;
{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll }
)
| Clicked coords \ (
newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8;
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }
)
| _ \ state,
view = state config \
textBeforeCursor = slice state.text 0 state.cursorPos;
cursorX = measureText textBeforeCursor;
padding = 8;
Clip {
w = config.w,
h = config.h,
child = Clickable {
event = config.onFocus,
child =
Stack {
children = [
Rect { w = config.w, h = config.h, color = "rgba(240,240,240,0.9)", radius = 4 },
Positioned {
x = 8 - state.scrollOffset,
y = 8,
child = Text { content = state.text, x = 0, y = 17 }
},
(config.focused
| True \ Positioned {
x = 8 + cursorX - state.scrollOffset,
y = 8,
child = Rect { w = 2, h = 24, color = "black" }
}
| _ \ Rect { w = 0, h = 0, color = "transparent" })
]
}
}
} }
}
}; };