close #483

packages/puter-js/src/modules/UI.js

@@ -650,33 +650,94 @@ class UI extends EventListener {
         })
     }
 
-    setWindowTitle = function(title, callback) {
+    setWindowTitle = function(title, window_id, callback) {
+        if(typeof window_id === 'function'){
+            callback = window_id;
+            window_id = undefined;
+        }else if(typeof window_id === "object" && window_id !== null){
+            window_id = window_id.id;
+        }
+
         return new Promise((resolve) => {
-            this.#postMessageWithCallback('setWindowTitle', resolve, { new_title: title });
+            this.#postMessageWithCallback('setWindowTitle', resolve, { new_title: title, window_id: window_id});
         })
     }
 
-    setWindowWidth = function(width, callback) {
+    setWindowWidth = function(width, window_id, callback) {
+        if(typeof window_id === 'function'){
+            callback = window_id;
+            window_id = undefined;
+        }else if(typeof window_id === "object" && window_id !== null){
+            window_id = window_id.id;
+        }
+        
         return new Promise((resolve) => {
-            this.#postMessageWithCallback('setWindowWidth', resolve, { width });
+            this.#postMessageWithCallback('setWindowWidth', resolve, { width: width, window_id: window_id });
         })
     }
 
-    setWindowHeight = function(height, callback) {
+    setWindowHeight = function(height, window_id, callback) {
+        if(typeof window_id === 'function'){
+            callback = window_id;
+            window_id = undefined;
+        }else if(typeof window_id === "object" && window_id !== null){
+            window_id = window_id.id;
+        }
+        
         return new Promise((resolve) => {
-            this.#postMessageWithCallback('setWindowHeight', resolve, { height });
+            this.#postMessageWithCallback('setWindowHeight', resolve, { height: height, window_id: window_id });
         })
     }
 
-    setWindowSize = function(width, height, callback) {
+    setWindowSize = function(width, height, window_id, callback) {
+        if(typeof window_id === 'function'){
+            callback = window_id;
+            window_id = undefined;
+        }else if(typeof window_id === "object" && window_id !== null){
+            window_id = window_id.id;
+        }
+        
         return new Promise((resolve) => {
-            this.#postMessageWithCallback('setWindowSize', resolve, { width, height });
+            this.#postMessageWithCallback('setWindowSize', resolve, { width: width, height: height, window_id: window_id });
         })
     }
 
-    setWindowPosition = function(x, y, callback) {
+    setWindowPosition = function(x, y, window_id, callback) {
+        if(typeof window_id === 'function'){
+            callback = window_id;
+            window_id = undefined;
+        }else if(typeof window_id === "object" && window_id !== null){
+            window_id = window_id.id;
+        }
+        
         return new Promise((resolve) => {
-            this.#postMessageWithCallback('setWindowPosition', resolve, { x, y });
+            this.#postMessageWithCallback('setWindowPosition', resolve, { x, y, window_id });
+        })
+    }
+
+    setWindowY = function(y, window_id, callback) {
+        if(typeof window_id === 'function'){
+            callback = window_id;
+            window_id = undefined;
+        }else if(typeof window_id === "object" && window_id !== null){
+            window_id = window_id.id;
+        }
+
+        return new Promise((resolve) => {
+            this.#postMessageWithCallback('setWindowY', resolve, { y, window_id });
+        })
+    }
+
+    setWindowX = function(x, window_id, callback) {
+        if(typeof window_id === 'function'){
+            callback = window_id;
+            window_id = undefined;
+        }else if(typeof window_id === "object" && window_id !== null){
+            window_id = window_id.id;
+        }
+
+        return new Promise((resolve) => {
+            this.#postMessageWithCallback('setWindowX', resolve, { x, window_id });
         })
     }
 
@@ -860,7 +921,9 @@ class UI extends EventListener {
 
     createWindow = function (options, callback) {
         return new Promise((resolve) => {
-            this.#postMessageWithCallback('createWindow', resolve, { options: options ?? {} });
+            this.#postMessageWithCallback('createWindow', (res)=>{
+                resolve(res.window);
+            }, { options: options ?? {} });
         })
     }
 

src/IPC.js

@@ -168,7 +168,7 @@ window.addEventListener('message', async (event) => {
     else if(event.data.msg === 'createWindow'){
         // todo: validate as many of these as possible
         if(event.data.options){
-            UIWindow({
+            const win = await UIWindow({
                 title: event.data.options.title,
                 disable_parent_window: event.data.options.disable_parent_window,
                 width: event.data.options.width,
@@ -180,6 +180,17 @@ window.addEventListener('message', async (event) => {
                 iframe_srcdoc: event.data.options.content,
                 parent_uuid: event.data.appInstanceID,
             })
+
+            // create safe window object
+            const safe_win = {
+                id: $(win).attr('data-element_uuid'),
+            }
+
+            // send confirmation to requester window
+            target_iframe.contentWindow.postMessage({
+                original_msg_id: msg_id,
+                window: safe_win,
+            }, '*');
         }
     }
     //--------------------------------------------------------
@@ -312,7 +323,18 @@ window.addEventListener('message', async (event) => {
     // setWindowTitle
     //--------------------------------------------------------
     else if(event.data.msg === 'setWindowTitle' && event.data.new_title !== undefined){
-        const el_window = window.window_for_app_instance(event.data.appInstanceID);
+        let el_window;
+        // specific window
+        if( event.data.window_id )
+            el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`)
+        // app window
+        else
+            el_window = window.window_for_app_instance(event.data.appInstanceID);
+
+        // window not found
+        if(!el_window || el_window.length === 0)
+            return;
+
         // set window title
         $(el_window).find(`.window-head-title`).html(html_encode(event.data.new_title));
         // send confirmation to requester window
@@ -347,7 +369,6 @@ window.addEventListener('message', async (event) => {
         // does this window have a head?
         const $head = $(el_window).find('.window-head');
         if($head.length > 0 && $head.css('display') !== 'none'){
-            console.log('head height', $head.height());
             y += $head.height();
         }
 
@@ -598,12 +619,24 @@ window.addEventListener('message', async (event) => {
     // setWindowWidth
     //--------------------------------------------------------
     else if(event.data.msg === 'setWindowWidth' && event.data.width !== undefined){
+        let el_window;
+        // specific window
+        if( event.data.window_id )
+            el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`)
+        // app window
+        else
+            el_window = window.window_for_app_instance(event.data.appInstanceID);
+
+        // window not found
+        if(!el_window || el_window.length === 0)
+            return;
+
         event.data.width = parseFloat(event.data.width);
         // must be at least 200
         if(event.data.width < 200)
             event.data.width = 200;
         // set window width
-        $($el_parent_window).css('width', event.data.width);
+        $(el_window).css('width', event.data.width);
         // send confirmation to requester window
         target_iframe.contentWindow.postMessage({
             original_msg_id: msg_id, 
@@ -613,13 +646,25 @@ window.addEventListener('message', async (event) => {
     // setWindowHeight
     //--------------------------------------------------------
     else if(event.data.msg === 'setWindowHeight' && event.data.height !== undefined){
+        let el_window;
+        // specific window
+        if( event.data.window_id )
+            el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`)
+        // app window
+        else
+            el_window = window.window_for_app_instance(event.data.appInstanceID);
+
+        // window not found
+        if(!el_window || el_window.length === 0)
+            return;
+
         event.data.height = parseFloat(event.data.height);
         // must be at least 200
         if(event.data.height < 200)
             event.data.height = 200;
 
         // convert to number and set
-        $($el_parent_window).css('height', event.data.height);
+        $(el_window).css('height', event.data.height);
 
         // send confirmation to requester window
         target_iframe.contentWindow.postMessage({
@@ -630,13 +675,25 @@ window.addEventListener('message', async (event) => {
     // setWindowSize
     //--------------------------------------------------------
     else if(event.data.msg === 'setWindowSize' && (event.data.width !== undefined || event.data.height !== undefined)){
+        let el_window;
+        // specific window
+        if( event.data.window_id )
+            el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`)
+        // app window
+        else
+            el_window = window.window_for_app_instance(event.data.appInstanceID);
+
+        // window not found
+        if(!el_window || el_window.length === 0)
+            return;
+
         // convert to number and set
         if(event.data.width !== undefined){
             event.data.width = parseFloat(event.data.width);
             // must be at least 200
             if(event.data.width < 200)
                 event.data.width = 200;
-            $($el_parent_window).css('width', event.data.width);
+            $(el_window).css('width', event.data.width);
         }
         
         if(event.data.height !== undefined){
@@ -644,7 +701,7 @@ window.addEventListener('message', async (event) => {
             // must be at least 200
             if(event.data.height < 200)
                 event.data.height = 200;
-            $($el_parent_window).css('height', event.data.height);
+            $(el_window).css('height', event.data.height);
         }
 
         // send confirmation to requester window
@@ -656,6 +713,18 @@ window.addEventListener('message', async (event) => {
     // setWindowPosition
     //--------------------------------------------------------
     else if(event.data.msg === 'setWindowPosition' && (event.data.x !== undefined || event.data.y !== undefined)){
+        let el_window;
+        // specific window
+        if( event.data.window_id )
+            el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`)
+        // app window
+        else
+            el_window = window.window_for_app_instance(event.data.appInstanceID);
+
+        // window not found
+        if(!el_window || el_window.length === 0)
+            return;
+
         // convert to number and set
         if(event.data.x !== undefined){
             event.data.x = parseFloat(event.data.x);
@@ -666,7 +735,7 @@ window.addEventListener('message', async (event) => {
             if(event.data.x > window.innerWidth - 100)
                 event.data.x = window.innerWidth - 100;
             // set window left
-            $($el_parent_window).css('left', parseFloat(event.data.x));
+            $(el_window).css('left', parseFloat(event.data.x));
         }
 
         if(event.data.y !== undefined){
@@ -678,7 +747,7 @@ window.addEventListener('message', async (event) => {
             if(event.data.y > window.innerHeight - 100)
                 event.data.y = window.innerHeight - 100;
             // set window top
-            $($el_parent_window).css('top', parseFloat(event.data.y));
+            $(el_window).css('top', parseFloat(event.data.y));
         }
 
         // send confirmation to requester window
@@ -687,6 +756,74 @@ window.addEventListener('message', async (event) => {
         }, '*');
     }
     //--------------------------------------------------------
+    // setWindowX
+    //--------------------------------------------------------
+    else if(event.data.msg === 'setWindowX' && (event.data.x !== undefined)){
+        let el_window;
+        // specific window
+        if( event.data.window_id )
+            el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`)
+        // app window
+        else
+            el_window = window.window_for_app_instance(event.data.appInstanceID);
+
+        // window not found
+        if(!el_window || el_window.length === 0)
+            return;
+
+        // convert to number and set
+        if(event.data.x !== undefined){
+            event.data.x = parseFloat(event.data.x);
+            // we don't want the window to go off the left edge of the screen
+            if(event.data.x < 0)
+                event.data.x = 0;
+            // we don't want the window to go off the right edge of the screen
+            if(event.data.x > window.innerWidth - 100)
+                event.data.x = window.innerWidth - 100;
+            // set window left
+            $(el_window).css('left', parseFloat(event.data.x));
+        }
+
+        // send confirmation to requester window
+        target_iframe.contentWindow.postMessage({
+            original_msg_id: msg_id, 
+        }, '*');
+    }
+    //--------------------------------------------------------
+    // setWindowY
+    //--------------------------------------------------------
+    else if(event.data.msg === 'setWindowY' && (event.data.y !== undefined)){
+        let el_window;
+        // specific window
+        if( event.data.window_id )
+            el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`)
+        // app window
+        else
+            el_window = window.window_for_app_instance(event.data.appInstanceID);
+
+        // window not found
+        if(!el_window || el_window.length === 0)
+            return;
+
+        // convert to number and set
+        if(event.data.y !== undefined){
+            event.data.y = parseFloat(event.data.y);
+            // we don't want the window to go off the top edge of the screen
+            if(event.data.y < window.taskbar_height)
+                event.data.y = window.taskbar_height;
+            // we don't want the window to go off the bottom edge of the screen
+            if(event.data.y > window.innerHeight - 100)
+                event.data.y = window.innerHeight - 100;
+            // set window top
+            $(el_window).css('top', parseFloat(event.data.y));
+        }
+
+        // send confirmation to requester window
+        target_iframe.contentWindow.postMessage({
+            original_msg_id: msg_id, 
+        }, '*');
+    }    
+    //--------------------------------------------------------
     // watchItem
     //--------------------------------------------------------
     else if(event.data.msg === 'watchItem' && event.data.item_uid !== undefined){

src/initgui.js

@@ -1434,7 +1434,6 @@ $(document).on('contextmenu', '.disable-context-menu', function(e){
     }
 })
 
-
 /**
  * Converts a file system path to a privacy-aware path.
  * - Paths starting with `~/` are returned unchanged.