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

132
src/ui-components.cg
View file

@ -55,7 +55,12 @@ textInput = config \ Stateful {
focusable = True,
# 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 \ event
@ -91,14 +96,14 @@ textInput = config \ Stateful {
)
| Clicked coords \ (
newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8;
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
newSatte = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
{ state = newState, emit = [] }
)
newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8;
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
newSatte = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
{ state = newState, emit = [] }
)
| Focused \ { state = state, emit = [] }
| Blurred \ { state = state, emit = [] }
| Focused \ { state = state.{ focused = True }, emit = [] }
| Blurred \ { state = state.{ focused = False }, emit = [] }
| _ \ { state = state, emit = [] },
view = state \
@ -109,103 +114,24 @@ textInput = config \ Stateful {
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 },
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 }
},
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" })
]
(state.focused
| True \ Positioned {
x = 8 + cursorX - state.scrollOffset,
y = 8,
child = Rect { w = 2, h = 24, color = "black" }
}
}
}
};
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" })
]
}
}
| _ \ Rect { w = 0, h = 0, color = "transparent" })
]
}
}
};