poki taskbar apps

app/mxwm/poki.js

@@ -11,13 +11,32 @@ let ctx = null
 
 const HEIGHT = 64
 
+const APPS = [
+    {
+        "id": "zterm",
+        "title": "zterm - terminal emulator",
+        "icon": "app/mxwm/zterm.png",
+        "script": ["/app/zterm.js"]
+    }
+]
+
+const ICON_SIZE = 60
+const ICON_PADDING = 4
+
 function findRect() {
     return [0, graphics_canvas.height - HEIGHT, graphics_canvas.width, HEIGHT]
 }
 
 async function draw() {
-    ctx.fillStyle = "black";
+    ctx.fillStyle = "darkgray";
     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    let x = ICON_PADDING
+
+    for (let app of APPS) {
+        ctx.drawImage(app.icon_image, x, ICON_PADDING, ICON_SIZE, ICON_SIZE)
+        x += ICON_SIZE + ICON_PADDING
+    }
 }
 
 async function onUpdate() {
@@ -28,7 +47,51 @@ async function onUpdate() {
     draw()
 }
 
+let mouse_position = [0, 0]
+
+async function onMouseMove(x1, y) {
+    mouse_position = [x1, y]
+
+    let cursor = "default"
+    
+    let x = ICON_PADDING
+    for (let app of APPS) {
+        if (mouse_position[0] >= x &&
+            mouse_position[1] >= ICON_PADDING &&
+            mouse_position[0] <= x + ICON_SIZE &&
+            mouse_position[1] <= ICON_PADDING + ICON_SIZE) {
+            cursor = "pointer"
+        }
+        x += ICON_SIZE + ICON_PADDING
+    }
+
+    console.log(cursor)
+
+    setGraphicsCursor(cursor)
+}
+
+async function onMouseDown(button) {
+    if (button == 0) {
+        let x = ICON_PADDING
+        for (let app of APPS) {
+            if (mouse_position[0] >= x &&
+                mouse_position[1] >= ICON_PADDING &&
+                mouse_position[0] <= x + ICON_SIZE &&
+                mouse_position[1] <= ICON_PADDING + ICON_SIZE) {
+                executeCommand(app.script)
+            }
+            x += ICON_SIZE + ICON_PADDING
+        }
+    }
+}
+
 async function main(args) {
+    for (let app of APPS) {
+        app.icon_image = await fetch(app.icon)
+            .then(r => r.blob())
+            .then(r => createImageBitmap(r))
+    }
+    
     let rect = findRect()
 
     let d = createWindow({ 
@@ -38,6 +101,8 @@ async function main(args) {
         "width": rect[2],
         "height": rect[3],
         "onupdate": onUpdate,
+        "onmousemove": onMouseMove,
+        "onmousedown": onMouseDown,
         "resizable": false,
         "selectable": false,
         "movable": false,
@@ -52,6 +117,7 @@ async function main(args) {
 
     while (graphics_canvas != null) {
         await new Promise(resolve => setTimeout(resolve, 100))
+        draw()
     }
 
     closeWindow(wid)

app/mxwm/startz.js

@@ -146,6 +146,7 @@ async function onMouseDown(ctx, button) {
                 && isPressed("Alt") && button == 0)) {
             if (window.movable) {
                 setGraphicsCursor("grabbing")
+                last_cursor = true
                 dragging_window = window["wid"]
             }
             if (window.selectable) {
@@ -160,6 +161,7 @@ async function onMouseDown(ctx, button) {
             if (window.resizable) {
                 resizing_window = window["wid"]
                 setGraphicsCursor("nwse-resize")
+                last_cursor = true
             }
             if (window.selectable) {
                 moveWindowToTop(window.wid)
@@ -184,8 +186,10 @@ async function onMouseUp(ctx, button) {
     }
 
     if (dragging_window != null) {
-        if (isMouseOnHeader(getWindow(dragging_window)))
+        if (isMouseOnHeader(getWindow(dragging_window))) {
             setGraphicsCursor("grab")
+            last_cursor = true
+        }
         dragging_window = null
     }
 
@@ -201,6 +205,7 @@ async function onMouseUp(ctx, button) {
 }
 
 let mouse_position = [0, 0]
+let last_cursor = false
 
 async function onMouseMove(ctx, x, y) {
     let cursor = "default"
@@ -238,12 +243,18 @@ async function onMouseMove(ctx, x, y) {
         if (dragging_window == null && window.movable && isMouseOnHeader(window)) {
             cursor = "grab"
         }
-        if (qinsoq.resizable && isMouseOnCorner(window)) {
+        if (window.resizable && isMouseOnCorner(window)) {
             cursor = "nwse-resize"
         }
     }
 
+    if (cursor != "default") {
+        last_cursor = true
         setGraphicsCursor(cursor)
+    } else if (last_cursor) {
+        last_cursor = false
+        setGraphicsCursor(cursor)
+    }
 }
 
 async function main(args) {

app/mxwm/zcom.js

@@ -16,6 +16,7 @@ function createWindow(options) {
     "y": options["y"] || 0,
     "width": options["width"] || options["w"] || 200,
     "height": options["height"] || options["h"] || 200,
+    "app_id": options["app_id"] || options["title"],
     "wid": wid,
     "onsignal": options["onsignal"] || (o => {}),
     "onkeydown": options["onkeydown"] || (o => {}),

app/mxwm/zterm.js

@@ -250,6 +250,7 @@ async function onKeyUp(key) {
 async function main(args) {
     [wid, ctx] = createWindow({
         "title": "zterm",
+        "app_id": "zterm",
         "width": 500,
         "height": 500,
         "x": 50,