close #169

src/dev-center/css/style.css

@@ -278,7 +278,7 @@ label, input[type="text"] {
     text-decoration: underline;
 }
 
-input[type="text"], textarea {
+input[type="text"], textarea, input[type="number"] {
     display: block;
     width: 100%;
     height: 34px;

src/dev-center/js/dev-center.js

@@ -435,6 +435,8 @@ function generate_edit_app_section(app) {
     if(app.result)
         app = app.result;
 
+    let maximize_on_start = app.maximize_on_start ? 'checked' : '';
+
     let h = ``;
     h += `
         <div class="edit-app-navbar">
@@ -485,11 +487,6 @@ function generate_edit_app_section(app) {
                 <label for="edit-app-app-id">App ID</label>
                 <input type="text" style="width: 362px;" class="app-uid" value="${html_encode(app.uid)}" readonly>
 
-                <div>
-                    <input type="checkbox" id="edit-app-maximize-on-start" name="edit-app-maximize-on-start" value="true" style="margin-top:30px;" ${app.maximize_on_start ? 'checked' : ''}>
-                    <label for="edit-app-maximize-on-start" style="display: inline;">Maximize window on start</label>
-                </div>
-                
                 <div>
                     <input type="checkbox" id="edit-app-background" name="edit-app-background" value="true" style="margin-top:30px;" ${app.background ? 'checked' : ''}>
                     <label for="edit-app-background" style="display: inline;">Run as a background process.</label>
@@ -500,6 +497,35 @@ function generate_edit_app_section(app) {
                     <label for="edit-app-fullpage-on-landing" style="display: inline;">Load in full-page mode when a user lands directly on this app.</label>
                 </div>
 
+                <div>
+                    <input type="checkbox" id="edit-app-maximize-on-start" name="edit-app-maximize-on-start" value="true" style="margin-top:30px;" ${maximize_on_start ? 'checked' : ''}>
+                    <label for="edit-app-maximize-on-start" style="display: inline;">Maximize window on start</label>
+                </div>
+                
+                <div>
+                    <label for="edit-app-window-width">Window Width</label>
+                    <input type="number" id="edit-app-window-width" placeholder="800" value="${html_encode(app.metadata?.window_size?.width ?? 800)}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
+                    <label for="edit-app-window-height">Window Height</label>
+                    <input type="number" id="edit-app-window-height" placeholder="600" value="${html_encode(app.metadata?.window_size?.height ?? 600)}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
+                </div>
+
+                <div style="margin-top:30px;">
+                    <label for="edit-app-window-top">Window Top</label>
+                    <input type="number" id="edit-app-window-top" placeholder="100" value="${app.metadata?.window_position?.top ? html_encode(app.metadata.window_position.top) : ''}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
+                    <label for="edit-app-window-left">Window Left</label>
+                    <input type="number" id="edit-app-window-left" placeholder="100" value="${app.metadata?.window_position?.left ? html_encode(app.metadata.window_position.left) : ''}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
+                </div>
+
+                <div style="margin-top:30px;">
+                    <input type="checkbox" id="edit-app-window-resizable" name="edit-app-window-resizable" value="true" ${app.metadata?.window_resizable ? 'checked' : ''}>
+                    <label for="edit-app-window-resizable" style="display: inline;">Window Resizable</label>
+                </div>
+
+                <div style="margin-top:30px;">
+                    <input type="checkbox" id="edit-app-hide-titlebar" name="edit-app-hide-titlebar" value="true" ${app.metadata?.hide_titlebar ? 'checked' : ''}>
+                    <label for="edit-app-hide-titlebar" style="display: inline;">Hide Titlebar</label>
+                </div>
+
                 <label for="edit-app-icon">Icon</label>
                 <div id="edit-app-icon" style="background-image:url(${!app.icon ? './img/app.svg' : html_encode(app.icon)});" ${app.icon ? 'data-url="' + html_encode(app.icon) + '"' : ''}>
                     <div id="change-app-icon">Change App Icon</div>
@@ -804,6 +830,11 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
     const index_url = $('#edit-app-index-url').val();
     const description = $('#edit-app-description').val();
     const uid = $('#edit-app-uid').val();
+    const height = $('#edit-app-window-height').val();
+    const width = $('#edit-app-window-width').val();
+    const top = $('#edit-app-window-top').val();
+    const left = $('#edit-app-window-left').val();
+
     let filetype_associations = $('#edit-app-filetype-associations').val();
 
     let icon;
@@ -827,6 +858,24 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
         error = `<strong>Index URL</strong> must be a valid url.`;
     else if (!index_url.toLowerCase().startsWith('https://') && !index_url.toLowerCase().startsWith('http://'))
         error = `<strong>Index URL</strong> must start with 'https://' or 'http://'.`;
+    // height must be a number
+    else if (isNaN(height))
+        error = `<strong>Window Height</strong> must be a number.`;
+    // height must be greater than 0
+    else if (height <= 0)
+        error = `<strong>Window Height</strong> must be greater than 0.`;
+    // width must be a number
+    else if (isNaN(width))
+        error = `<strong>Window Width</strong> must be a number.`;
+    // width must be greater than 0
+    else if (width <= 0)
+        error = `<strong>Window Width</strong> must be greater than 0.`;
+    // top must be a number
+    else if (top && isNaN(top))
+        error = `<strong>Window Top</strong> must be a number.`;
+    // left must be a number
+    else if (left && isNaN(left))
+        error = `<strong>Window Left</strong> must be a number.`;
 
     // download icon from URL
     else {
@@ -871,6 +920,16 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
         background: $('#edit-app-background').is(":checked"),
         metadata: {
             fullpage_on_landing: $('#edit-app-fullpage-on-landing').is(":checked"),
+            window_size: {
+                width: width ?? 800,
+                height: height ?? 600,
+            },
+            window_position: {
+                top: top,
+                left: left,
+            },
+            window_resizable: $('#edit-app-window-resizable').is(":checked"),
+            hide_titlebar: $('#edit-app-hide-titlebar').is(":checked"),
         },
         filetypeAssociations: filetype_associations,
     }).then(async (app) => {
@@ -2013,4 +2072,15 @@ function getMimeType(extension) {
 
     // Return the MIME type if found, otherwise return 'application/octet-stream'
     return mimeTypes[cleanExtension] || 'application/octet-stream';
-}
+}
+
+// if edit-app-maximize-on-start is checked, disable window size and position fields
+$(document).on('change', '#edit-app-maximize-on-start', function (e) {
+    if ($(this).is(':checked')) {
+        $('#edit-app-window-width, #edit-app-window-height').prop('disabled', true);
+        $('#edit-app-window-top, #edit-app-window-left').prop('disabled', true);
+    } else {
+        $('#edit-app-window-width, #edit-app-window-height').prop('disabled', false);
+        $('#edit-app-window-top, #edit-app-window-left').prop('disabled', false);
+    }
+})

src/gui/src/helpers/launch_app.js

@@ -36,7 +36,7 @@ const launch_app = async (options)=>{
     }
 
     // If the app object is not provided, get it from the server
-    let app_info = options.app_obj ?? await window.get_apps(options.name);
+    let app_info = options.app_obj ?? await puter.apps.get(options.name);
 
     // For backward compatibility reasons we need to make sure that both `uuid` and `uid` are set
     app_info.uuid = app_info.uuid ?? app_info.uid;
@@ -68,7 +68,7 @@ const launch_app = async (options)=>{
     //-----------------------------------
     // maximize on start
     //-----------------------------------
-    if(app_info.maximize_on_start && app_info.maximize_on_start === 1)
+    if(app_info.maximize_on_start)
         options.maximized = 1;
 
     //-----------------------------------
@@ -254,6 +254,44 @@ const launch_app = async (options)=>{
         // register app_instance_uid
         window.app_instance_ids.add(uuid);
 
+        // width
+        let window_width;
+        if(app_info.metadata?.window_size?.width !== undefined)
+            window_width = parseFloat(app_info.metadata.window_size.width);
+        if(options.maximized)
+            window_width = '100%';
+
+        // height
+        let window_height;
+        if(app_info.metadata?.window_size?.height !== undefined){
+            window_height = parseFloat(app_info.metadata.window_size.height);
+        }if(options.maximized)
+            window_height = `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)`;
+
+        // top
+        let top;
+        if(app_info.metadata?.window_position?.top !== undefined)
+            top = parseFloat(app_info.metadata.window_position.top) + window.toolbar_height + 1;
+        if(options.maximized)
+            top = 0;
+
+        // left
+        let left;
+        if(app_info.metadata?.window_position?.left !== undefined)
+            left = parseFloat(app_info.metadata.window_position.left);
+        if(options.maximized)
+            left = 0;
+
+        // window_resizable
+        let window_resizable = true;
+        if(app_info.metadata?.window_resizable !== undefined && typeof app_info.metadata.window_resizable === 'boolean')
+            window_resizable = app_info.metadata.window_resizable;
+
+        // hide_titlebar
+        let hide_titlebar = false;
+        if(app_info.metadata?.hide_titlebar !== undefined && typeof app_info.metadata.hide_titlebar === 'boolean')
+            hide_titlebar = app_info.metadata.hide_titlebar;
+
         // open window
         el_win = UIWindow({
             element_uuid: uuid,
@@ -264,18 +302,21 @@ const launch_app = async (options)=>{
             window_class: 'window-app',
             update_window_url: true,
             app_uuid: app_info.uuid ?? app_info.uid,
-            top: options.maximized ? 0 : undefined,
-            left: options.maximized ? 0 : undefined,
-            height: options.maximized ? `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)` : undefined,
-            width: options.maximized ? `100%` : undefined,
+            top: top,
+            left: left,
+            height: window_height,
+            width: window_width,
             app: options.name,
             is_visible: ! app_info.background,
             is_maximized: options.maximized,
             is_fullpage: options.is_fullpage,
             ...window_options,
+            is_resizable: window_resizable,
+            has_head: ! hide_titlebar,
             show_in_taskbar: app_info.background ? false : window_options?.show_in_taskbar,
         });
 
+        // If the app is not in the background, show the window
         if ( ! app_info.background ) {
             $(el_win).show();
         }