diff --git a/src/cg/06-pixelEditor.cg b/src/cg/06-pixelEditor.cg new file mode 100644 index 0000000..8640f3a --- /dev/null +++ b/src/cg/06-pixelEditor.cg @@ -0,0 +1,46 @@ +pixelEditor = config \ + downArrow = state \ + { state = state, emit = [] }; + + ui.stateful { + focusable = True, + autoFocus = True, + + key = "pixelEditor-" & config.path, + + init = { + expanded = [], # loadMap from store + pixelWidth = 5, + pixelHeight = 7, + zoomMultiplier = 10, + selectedCords = { x = 0, y = 0 }, + editing = None + }, + + update = state event \ event + # | Toggle pixel \ (\ toggleFocused) + | Key { key = "Space" } \ (\ toggleFocused) + + | 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 = [] }, + + view = state emit \ + # onToggle = path \ emit (Toggle path); + + cellWidth = state.pixelWidth * zoomMultiplier; + cellHeight = state.pixelHeight * zoomMultiplier; + rows = range 0 pixelHeight; + columns = range 0 pixelWidth; + + center { + child = mapWidthIndex (rect) rows + } + }; diff --git a/src/cg/10-os.cg b/src/cg/10-os.cg index ff43086..b108446 100644 --- a/src/cg/10-os.cg +++ b/src/cg/10-os.cg @@ -128,8 +128,10 @@ os = ] }; + windowComponent = config \ ui.stateful { - key = "window-" & (show config.index), + a = debug! "window id" config.window, + key = "window-" & (show config.window.id), focusable = True, init = {}, update = state event \ event @@ -168,6 +170,8 @@ os = Item { label = q } ]; + isUI = v \ hasField "kind" v; + openOrFocus = title content \ index title (map (w \ w.title) osState.windows) | Some i \ focusWindow i @@ -178,9 +182,11 @@ os = result | Defined name \ openOrFocus name (size \ inspector { name = name, w = size.w, h = size.h }) - | Value v \ (getSource input == "" - | True \ openOrFocus input (_ \ ui.text { content = show v, color = "white" }) - | False \ openOrFocus input (size \ inspector { name = input, w = size.w, h = size.h })) + | Value v \ (isUI v + | True \ openOrFocus input (_ \ v) + | False \ (getSource input == "" + | True \ openOrFocus input (_ \ ui.text { content = show v, color = "white" }) + | False \ openOrFocus input (size \ inspector { name = input, w = size.w, h = size.h }))) | Err msg \ (_ = debug! "Error" msg; noOp); handleFocusLeftEvent = state \ diff --git a/src/runtime-compiled.ts b/src/runtime-compiled.ts index dea2c15..48a35d6 100644 --- a/src/runtime-compiled.ts +++ b/src/runtime-compiled.ts @@ -70,7 +70,8 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) { function expandStateful(ui: UIValue, path: number[], renderedKeys: Set): UIValue { switch (ui.kind) { case 'stateful': { - const fullKey = [...path, ui.key].join('.'); + // const fullKey = [...path, ui.key].join('.'); + const fullKey = [...path.filter((p: any) => typeof p === 'string'), ui.key].join('.'); renderedKeys.add(fullKey); let instance = componentInstances.get(fullKey); diff --git a/src/runtime-js.ts b/src/runtime-js.ts index 63d2ffe..9aa10b2 100644 --- a/src/runtime-js.ts +++ b/src/runtime-js.ts @@ -92,6 +92,9 @@ export const _rt = { } return { _tag: qi === q.length ? 'True' : 'False' }; }, + hasField: (field: string) => (obj: any) => ({ + _tag: (typeof obj === 'object' && obj !== null && field in obj) ? 'True' : 'False' + }), storeSearch: (query: string) => { return Object.keys(store).filter(name => _rt.fuzzyMatch(query)(name)._tag === 'True'); },