poki deck

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": []
 }

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
+}

app/mxwm/startz.js

@@ -1,18 +1,19 @@
 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) {
+        if (win.decorated) {
             drawWindowDecorations(
                 ctx,
                 win.wid == selected_window,
@@ -22,33 +23,35 @@ async function drawScreen(ctx) {
                 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) {
@@ -82,7 +85,11 @@ async function onKeyDown(ctx, key) {
         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"]
+            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)) {
+            if (window.resizable) {
                 resizing_window = window["wid"]
-            selected_window = window["wid"]
                 setGraphicsCursor("nwse-resize")
+            }
+            if (window.selectable) {
                 moveWindowToTop(window.wid)
+                selected_window = window["wid"]
+            }
             break
         }
         if (isMouseInside(window)) {
+            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 = []

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()

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
 }

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)