From ec575a0d58651f03c2034a980268fe1ce9a388b6 Mon Sep 17 00:00:00 2001 From: MeexReay Date: Sun, 25 May 2025 03:19:03 +0300 Subject: [PATCH] poki deck --- app/mxwm/package.json | 2 +- app/mxwm/poki.js | 60 ++++++++++++++++++++++++ app/mxwm/startz.js | 106 +++++++++++++++++++++++++----------------- app/mxwm/zcom.js | 6 +++ app/mxwm/zterm.js | 9 +++- sys/graphics.js | 3 ++ 6 files changed, 142 insertions(+), 44 deletions(-) create mode 100644 app/mxwm/poki.js diff --git a/app/mxwm/package.json b/app/mxwm/package.json index 55a8123..f839576 100644 --- a/app/mxwm/package.json +++ b/app/mxwm/package.json @@ -3,6 +3,6 @@ "version": "0.1.1", "description": "Mega eXtreme Window Manager", "author": "MeexReay", - "apps": [ "zcom.js", "startz.js", "zterm.js" ], + "apps": [ "zcom.js", "startz.js", "zterm.js", "poki.js" ], "configs": [] } diff --git a/app/mxwm/poki.js b/app/mxwm/poki.js new file mode 100644 index 0000000..9a802cf --- /dev/null +++ b/app/mxwm/poki.js @@ -0,0 +1,60 @@ +eval(readFile("/app/zcom.js")) + +/* + + Poki - MXWM taskbar deck + +*/ + +let wid = null +let ctx = null + +const HEIGHT = 64 + +function findRect() { + return [0, graphics_canvas.height - HEIGHT, graphics_canvas.width, HEIGHT] +} + +async function draw() { + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); +} + +async function onUpdate() { + let rect = findRect() + + moveWindow(wid, rect[0], rect[1], rect[2], rect[3]) + + draw() +} + +async function main(args) { + let rect = findRect() + + let d = createWindow({ + "title": "poki deck", + "x": rect[0], + "y": rect[1], + "width": rect[2], + "height": rect[3], + "onupdate": onUpdate, + "resizable": false, + "selectable": false, + "movable": false, + "closable": false, + "decorated": false + }) + + wid = d[0] + ctx = d[1] + + draw() + + while (graphics_canvas != null) { + await new Promise(resolve => setTimeout(resolve, 100)) + } + + closeWindow(wid) + + return 0 +} diff --git a/app/mxwm/startz.js b/app/mxwm/startz.js index c40106d..56a04a1 100644 --- a/app/mxwm/startz.js +++ b/app/mxwm/startz.js @@ -1,54 +1,57 @@ eval(readFile("/app/zcom.js")) -const headerHeight = 32; +const headerHeight = 24; async function drawScreen(ctx) { ctx.fillStyle = "darkcyan" ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height) - ctx.fillStyle = "cyan"; - ctx.font = "bold 14px comic-sans"; - ctx.textBaseline = "middle"; - ctx.textAlign = "left"; - ctx.fillText(`Alt+Shift+Q - выключить оконный менеджер | Alt+Enter - включить zterm | Alt+Shift+C - закрыть окно`, 10, 16); + // ctx.fillStyle = "cyan"; + // ctx.font = "bold 14px comic-sans"; + // ctx.textBaseline = "middle"; + // ctx.textAlign = "left"; + // ctx.fillText(`Alt+Shift+Q - выключить оконный менеджер | Alt+Enter - включить zterm | Alt+Shift+C - закрыть окно`, 10, 16); for (const win of window.mxwm_windows) { - drawWindowDecorations( - ctx, - win.wid == selected_window, - win.x, - win.y, - win.width, - win.height, - win.title - ) + if (win.decorated) { + drawWindowDecorations( + ctx, + win.wid == selected_window, + win.x, + win.y, + win.width, + win.height, + win.title + ) + } + ctx.drawImage(win.canvas, win.x, win.y); } } async function drawWindowDecorations(ctx, is_selected, x, y, width, height, title) { - const borderRadius = 8; - const borderWidth = 1; - const buttonRadius = 6; - const buttonSpacing = 8; + const borderWidth = 2; - const outerX = x - borderWidth - 1; - const outerY = y - headerHeight - borderWidth - 2; - const outerWidth = width + borderWidth * 2 + 2; - const outerHeight = height + headerHeight + borderWidth * 2 + 3; + const outerX = x - borderWidth; + const outerY = y - headerHeight - borderWidth; + const outerWidth = width + borderWidth * 2; + const outerHeight = height + headerHeight + borderWidth * 2; - ctx.fillStyle = is_selected ? "#f4f4f4" : "#d3f4d3"; + const titleX = outerX + 10 + const titleY = outerY + 14 + + ctx.fillStyle = is_selected ? "#f4f4f4" : "#a3d4a3"; ctx.fillRect(outerX, outerY, outerWidth, outerHeight) ctx.fillStyle = "#222"; - ctx.font = "bold 14px sans-serif"; + ctx.font = "bold 14px terminus"; ctx.textBaseline = "middle"; ctx.textAlign = "left"; - ctx.fillText(title, outerX + 12, outerY + headerHeight / 2); + ctx.fillText(title, titleX, titleY); } async function onStart(screen_ctx) { - + executeCommand(["/app/poki.js"]) } function moveWindowToTop(wid) { @@ -81,8 +84,12 @@ async function onKeyDown(ctx, key) { disableGraphics() return } - - if ((isPressed("Alt") || isPressed("Meta")) && isPressed("Shift") && isPressed("C")) { + + let to_close = getWindow(selected_window) + if (to_close != null && to_close.closable && + (isPressed("Alt") || isPressed("Meta")) && + isPressed("Shift") && + isPressed("C")) { signalWindow(selected_window, 9) closeWindow(selected_window) return @@ -137,24 +144,34 @@ async function onMouseDown(ctx, button) { if (isMouseOnHeader(window) || ((selected_window == window.wid || isMouseInside(window)) && isPressed("Alt") && button == 0)) { - dragging_window = window["wid"] - selected_window = window["wid"] - setGraphicsCursor("grabbing") - moveWindowToTop(window.wid) + if (window.movable) { + setGraphicsCursor("grabbing") + dragging_window = window["wid"] + } + if (window.selectable) { + selected_window = window["wid"] + moveWindowToTop(window.wid) + } break } if (isMouseOnCorner(window) || ((selected_window == window.wid || isMouseInside(window)) && isPressed("Alt") && button == 2)) { - resizing_window = window["wid"] - selected_window = window["wid"] - setGraphicsCursor("nwse-resize") - moveWindowToTop(window.wid) + if (window.resizable) { + resizing_window = window["wid"] + setGraphicsCursor("nwse-resize") + } + if (window.selectable) { + moveWindowToTop(window.wid) + selected_window = window["wid"] + } break } if (isMouseInside(window)) { - selected_window = window["wid"] - moveWindowToTop(window.wid) + if (window.selectable) { + selected_window = window["wid"] + moveWindowToTop(window.wid) + } window.onmousedown(button) break } @@ -218,10 +235,10 @@ async function onMouseMove(ctx, x, y) { if (isMouseInside(window)) { window.onmousemove(mouse_position[0] - window.x, mouse_position[1] - window.y) } - if (dragging_window == null && isMouseOnHeader(window)) { + if (dragging_window == null && window.movable && isMouseOnHeader(window)) { cursor = "grab" } - if (isMouseOnCorner(window)) { + if (qinsoq.resizable && isMouseOnCorner(window)) { cursor = "nwse-resize" } } @@ -237,7 +254,12 @@ async function main(args) { "onmousedown": (btn) => onMouseDown(ctx, btn), "onmouseup": (btn) => onMouseUp(ctx, btn), "onkeydown": (key) => onKeyDown(ctx, key), - "onkeyup": (key) => onKeyUp(ctx, key) + "onkeyup": (key) => onKeyUp(ctx, key), + "onresize": () => { + for (let window of listWindows()) { + window.onupdate() + } + } }) window.mxwm_windows = [] diff --git a/app/mxwm/zcom.js b/app/mxwm/zcom.js index 847da00..5dc825f 100644 --- a/app/mxwm/zcom.js +++ b/app/mxwm/zcom.js @@ -24,6 +24,12 @@ function createWindow(options) { "onmouseup": options["onmouseup"] || (o => {}), "onmousemove": options["onmousemove"] || ((x,y) => {}), "onresize": options["onresize"] || ((x,y) => {}), + "onupdate": options["onupdate"] || (() => {}), + "decorated": "decorated" in options ? options["decorated"] : true, + "selectable": "selectable" in options ? options["selectable"] : true, + "closable": "closable" in options ? options["closable"] : true, + "movable": "movable" in options ? options["movable"] : true, + "resizable": "resizable" in options ? options["resizable"] : true, } canvas.width = win["width"].toString() diff --git a/app/mxwm/zterm.js b/app/mxwm/zterm.js index 3a1db64..2ae6483 100644 --- a/app/mxwm/zterm.js +++ b/app/mxwm/zterm.js @@ -9,7 +9,12 @@ let wid = null const CHAR_WIDTH = 7 const CHAR_HEIGHT = 14 -const TERMINAL_COLORS = ["BLACK", "DARK_BLUE", "DARK_GREEN", "DARK_CYAN", "DARK_RED", "DARK_MAGENTA", "DARK_YELLOW", "DARK_WHITE", "BRIGHT_BLACK", "BRIGHT_BLUE", "BRIGHT_GREEN", "BRIGHT_CYAN", "BRIGHT_RED", "BRIGHT_MAGENTA", "BRIGHT_YELLOW", "WHITE"] +const TERMINAL_COLORS = [ + "BLACK", + "DARK_BLUE", "DARK_GREEN", "DARK_CYAN", "DARK_RED", "DARK_MAGENTA", "DARK_YELLOW", "DARK_WHITE", + "BRIGHT_BLACK", "BRIGHT_BLUE", "BRIGHT_GREEN", "BRIGHT_CYAN", "BRIGHT_RED", "BRIGHT_MAGENTA", "BRIGHT_YELLOW", + "WHITE" +] function getVarColor(name) { return getComputedStyle(document.body).getPropertyValue("--"+name) @@ -270,4 +275,6 @@ async function main(args) { console.log("posh exit") closeWindow(wid) + + return 0 } diff --git a/sys/graphics.js b/sys/graphics.js index eb9b722..63630f5 100644 --- a/sys/graphics.js +++ b/sys/graphics.js @@ -56,6 +56,9 @@ function enableGraphics(options={}) { window.addEventListener("resize", (event) => { graphics_canvas.width = window.innerWidth.toString() graphics_canvas.height = window.innerHeight.toString() + if ("onresize" in options) { + options.onresize() + } }) document.body.appendChild(graphics_canvas)