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

scrollable now supports horizontal scrolling. using it in os wm. putting all os stuff in os namespace

Browse Source
master
Dustin Swan 2 weeks ago
parent 5fc9d13f80
commit 373ec8b36b
Signed by: dustinswan
GPG Key ID: 30D46587E2100467
3 changed files with 222 additions and 202 deletions
Show Stats Download Patch File Download Diff File

25
src/cg/03-ui-components.cg
Unescape Escape View File

@ -26,25 +26,36 @@ button = config \
# scrollable
scrollable = config \
barHeight = max 20 (config.h * config.h / config.totalHeight);
barY = config.scrollY * config.h / config.totalHeight;
showBar = config.totalHeight > config.h;
showVBar = config.totalHeight > config.h;
vBarHeight = max 20 (config.h * config.h / config.totalHeight);
vBarY = config.scrollY * config.h / config.totalHeight;
showHBar = config.totalWidth > config.w;
vBarWidth = max 20 (config.w * config.w / config.totalWidth);
vBarX = config.scrollX * config.w / config.totalWidth;
ui.stack {
children = [
ui.scrollable {
w = config.w,
h = config.h,
scrollX = 0,
scrollX = config.scrollX,
scrollY = config.scrollY,
onScroll = config.onScroll,
child = config.child
},
...(showBar
...(showVBar
| True \ [ui.positioned {
x = config.w - 4,
y = barY,
child = ui.rect { w = 4, h = barHeight, color = "rgba(255,255,255,0.3)", radius = 2 }
y = vBarY,
child = ui.rect { w = 4, h = vBarHeight, color = "rgba(255,255,255,0.3)", radius = 2 }
}]
| False \ []),
...(showHBar
| True \ [ui.positioned {
x = config.h - 4,
y = hBarX,
child = ui.rect { h = 4, w = hBarWidth, color = "rgba(255,255,255,0.3)", radius = 2 }
}]
| False \ [])
]

1
src/cg/05-palette.cg
Unescape Escape View File

@ -126,6 +126,7 @@ palette = config \
w = contentWidth,
h = listHeight,
totalHeight = totalHeight,
totalWidth = contentWidth,
scrollX = 0,
scrollY = paletteState.scrollOffset,
onScroll = onScroll,

398
src/cg/10-os.cg
Unescape Escape View File

@ -9,204 +9,212 @@ osState = {
nextId = 0
};
openPalette = _ \ osState.palette.visible := not (osState.palette.visible);
windowWidth = window \ window.fullWidth
| True \ viewport.width
| False \ window.width;
openWindow = title content \
id = osState.nextId;
batch [
osState.nextId := id + 1,
osState.windows := osState.windows & [{
id = id,
title = title,
content = content,
width = osState.wm.defaultWindowWidth,
fullWidth = False
}],
osState.palette.visible := False,
focusWindow (len osState.windows)
];
closeWindowByIndex = i \
focused = osState.wm.focusedIndex;
newFocused = (i < focused
| True \ focused - 1
| False \ (i == focused
| True \ max 0 (focused - 1)
| False \ focused));
batch [
osState.windows := (take i osState.windows) & (drop (i + 1) osState.windows),
focusWindow newFocused
# osState.wm.focusedIndex := min newFocused (len osState.windows - 2)
];
closeFocusedWindow = _ \ closeWindowByIndex osState.wm.focusedIndex;
closeWindowById = id \
i = index id (map (w \ w.id) osState.windows);
closeWindowByIndex (unwrapOr 0 i);
toggleMaximizeFocusedWindow = _ \
idx = osState.wm.focusedIndex;
osState.windows := updateAt idx (w \ w.{ fullWidth = not w.fullWidth }) osState.windows;
scrollToWindow = index \
windows = osState.windows;
widths = map windowWidth windows;
gap = 1;
windowX = (sum (take index widths)) + (index * gap);
windowW = unwrapOr osState.wm.defaultWindowWidth (nth index widths);
scrollOffset = osState.wm.scrollOffset;
vw = viewport.width;
(windowX < scrollOffset
| True \ windowX
| False \ (windowX + windowW > scrollOffset + vw
| True \ windowX + windowW - vw
| False \ scrollOffset));
focusWindow = index \
batch [
osState.wm.focusedIndex := index,
osState.wm.scrollOffset := scrollToWindow index
];
onSelect = input \
result = eval input;
result
| Value v \ openWindow input (_ \ ui.text { content = show v, color = "white" })
| Defined name \ openWindow name (_ \ inspector { name = name })
| Err msg \ openWindow "Error" (_ \ ui.text { content = msg, color = "red" });
renderWindow = window isActive \
titleBarHeight = 30;
ui.stack {
children = [
# background
ui.rect { w = (windowWidth window), h = viewport.height, color = (isActive | True \ "#0a2a3a" | False \ "#061820")},
# title bar
ui.positioned {
x = 0, y = 0,
child = ui.stack {
children = [
# background
ui.rect { w = (windowWidth window), h = titleBarHeight, color = (isActive | True \ "#a15f80" | False \ "#0f3348") },
ui.row {
children = [
# close button
ui.clickable {
onClick = _ \ closeWindowById window.id,
child = ui.stack {
children = [
# button background
ui.rect { w = titleBarHeight, h = titleBarHeight, color = "rgba(255,255,255,0.2)" },
# button text
ui.positioned {
x = 9, y = 7, child = ui.text { content = "x" }
}
]
}
},
# title
ui.positioned { x = 8, y = 8, child = ui.text { content = window.title, color = "white" } },
]
}
]
}
},
# content
ui.positioned {
x = 0, y = titleBarHeight,
child = ui.clip {
w = (windowWidth window),
h = viewport.height - titleBarHeight,
child = window.content 0
}
}
]
};
os =
openPalette = _ \ osState.palette.visible := not (osState.palette.visible);
windowWidth = window \ window.fullWidth
| True \ viewport.width
| False \ window.width;
totalWidth = (sum (map windowWidth osState.windows)) + (len osState.windows - 1);
scrollToWindow = index \
windows = osState.windows;
widths = map windowWidth windows;
gap = 1;
windowX = (sum (take index widths)) + (index * gap);
windowW = unwrapOr osState.wm.defaultWindowWidth (nth index widths);
scrollOffset = osState.wm.scrollOffset;
vw = viewport.width;
(windowX < scrollOffset
| True \ windowX
| False \ (windowX + windowW > scrollOffset + vw
| True \ windowX + windowW - vw
| False \ scrollOffset));
focusWindow = index \
batch [
osState.wm.focusedIndex := index,
osState.wm.scrollOffset := scrollToWindow index
];
openWindow = title content \
id = osState.nextId;
batch [
osState.nextId := id + 1,
osState.windows := osState.windows & [{
id = id,
title = title,
content = content,
width = osState.wm.defaultWindowWidth,
fullWidth = False
}],
osState.palette.visible := False,
focusWindow (len osState.windows)
];
closeWindowByIndex = i \
focused = osState.wm.focusedIndex;
newFocused = (i < focused
| True \ focused - 1
| False \ (i == focused
| True \ max 0 (focused - 1)
| False \ focused));
batch [
osState.windows := (take i osState.windows) & (drop (i + 1) osState.windows),
focusWindow newFocused
# osState.wm.focusedIndex := min newFocused (len osState.windows - 2)
];
closeFocusedWindow = _ \ closeWindowByIndex osState.wm.focusedIndex;
closeWindowById = id \
i = index id (map (w \ w.id) osState.windows);
closeWindowByIndex (unwrapOr 0 i);
toggleMaximizeFocusedWindow = _ \
idx = osState.wm.focusedIndex;
osState.windows := updateAt idx (w \ w.{ fullWidth = not w.fullWidth }) osState.windows;
renderWindow = window isActive \
titleBarHeight = 30;
windowComponent = config \ ui.stateful {
key = "window-" & (show config.index),
focusable = True,
init = {},
update = state event \ event
| Focused \ { state = state, emit = [focusWindow config.index] }
| ChildFocused \ { state = state, emit = [focusWindow config.index] }
| _ \ { state = state, emit = [] },
view = state \ renderWindow config.window config.isActive
};
renderWindows = _ \
windows = osState.windows;
focused = osState.wm.focusedIndex;
scrollable {
w = viewport.width,
h = viewport.height,
scrollX = osState.wm.scrollOffset,
scrollY = 0,
child = ui.row {
gap = 1,
children = mapWithIndex (w i \ windowComponent { window = w, index = i, isActive = (i == focused) }) windows
}
};
search = q \
storeRes = storeSearch q;
[
Section "STORE",
...map (name \ Item { label = name }) storeRes,
Section "EVAL",
Item { label = q }
];
os = ui.stateful {
key = "os",
autoFocus = True,
init = {},
update = state event \ event
| Key { key = "p", meta = True } \
{ state = state, emit = [openPalette] }
| Key { key = "ArrowLeft", meta = True } \
(
newIndex = max 0 (osState.wm.focusedIndex - 1);
{ state = state, emit = [focusWindow newIndex] }
)
| Key { key = "ArrowRight", meta = True } \
(
newIndex = min (len osState.windows - 1) (osState.wm.focusedIndex + 1);
{ state = state, emit = [focusWindow newIndex] }
)
| Key { key = "d", meta = True } \
{ state = state, emit = [closeFocusedWindow 0] }
| Key { key = "f", meta = True } \
{ state = state, emit = [toggleMaximizeFocusedWindow 0] }
| _ \ { state = state, emit = [] },
view = state \
ui.stack {
children = [
ui.rect { w = viewport.width, h = viewport.height, color = "#012" },
renderWindows 0,
# keep palette at the end so it's on top
osState.palette.visible
| True \ palette {
search = search,
onSelect = onSelect,
viewport = viewport,
# background
ui.rect { w = (windowWidth window), h = viewport.height, color = (isActive | True \ "#0a2a3a" | False \ "#061820")},
# title bar
ui.positioned {
x = 0, y = 0,
child = ui.stack {
children = [
# background
ui.rect { w = (windowWidth window), h = titleBarHeight, color = (isActive | True \ "#a15f80" | False \ "#0f3348") },
ui.row {
children = [
# close button
ui.clickable {
onClick = _ \ closeWindowById window.id,
child = ui.stack {
children = [
# button background
ui.rect { w = titleBarHeight, h = titleBarHeight, color = "rgba(255,255,255,0.2)" },
# button text
ui.positioned {
x = 9, y = 7, child = ui.text { content = "x" }
}
]
}
},
# title
ui.positioned { x = 8, y = 8, child = ui.text { content = window.title, color = "white" } },
]
}
]
}
| False \ empty,
},
# content
ui.positioned {
x = 0, y = titleBarHeight,
child = ui.clip {
w = (windowWidth window),
h = viewport.height - titleBarHeight,
child = window.content 0
}
}
]
}
};
windowComponent = config \ ui.stateful {
key = "window-" & (show config.index),
focusable = True,
init = {},
update = state event \ event
| Focused \ { state = state, emit = [focusWindow config.index] }
| ChildFocused \ { state = state, emit = [focusWindow config.index] }
| _ \ { state = state, emit = [] },
view = state \ renderWindow config.window config.isActive
};
renderWindows = _ \
windows = osState.windows;
focused = osState.wm.focusedIndex;
totalHeight = viewport.height;
scrollable {
w = viewport.width,
h = viewport.height,
scrollX = osState.wm.scrollOffset,
scrollY = 0,
onScroll = onScroll,
child = ui.row {
gap = 1,
children = mapWithIndex (w i \ windowComponent { window = w, index = i, isActive = (i == focused) }) windows
},
};
search = q \
storeRes = storeSearch q;
[
Section "STORE",
...map (name \ Item { label = name }) storeRes,
Section "EVAL",
Item { label = q }
];
onScroll = delta \
osState.wm.scrollOffset := max 0 (min (totalWidth - viewport.width) (osState.wm.scrollOffset + delta.deltaX));
onSelect = input \
result = eval input;
result
| Value v \ openWindow input (_ \ ui.text { content = show v, color = "white" })
| Defined name \ openWindow name (_ \ inspector { name = name })
| Err msg \ openWindow "Error" (_ \ ui.text { content = msg, color = "red" });
ui.stateful {
key = "os",
autoFocus = True,
init = {},
update = state event \ event
| Key { key = "p", meta = True } \
{ state = state, emit = [openPalette] }
| Key { key = "ArrowLeft", meta = True } \
(
newIndex = max 0 (osState.wm.focusedIndex - 1);
{ state = state, emit = [focusWindow newIndex] }
)
| Key { key = "ArrowRight", meta = True } \
(
newIndex = min (len osState.windows - 1) (osState.wm.focusedIndex + 1);
{ state = state, emit = [focusWindow newIndex] }
)
| Key { key = "d", meta = True } \
{ state = state, emit = [closeFocusedWindow 0] }
| Key { key = "f", meta = True } \
{ state = state, emit = [toggleMaximizeFocusedWindow 0] }
| _ \ { state = state, emit = [] },
view = state \
ui.stack {
children = [
ui.rect { w = viewport.width, h = viewport.height, color = "#012" },
renderWindows 0,
# keep palette at the end so it's on top
osState.palette.visible
| True \ palette {
search = search,
onSelect = onSelect,
viewport = viewport,
}
| False \ empty,
]
}
};

Write Preview
Loading…
Cancel
Save