Update app.js (#283) (#1028)

source/app.js

@@ -690,12 +690,12 @@ class View {
         this._window.on('close', () => this._owner.closeView(this));
         this._window.on('focus', () => this.emit('activated'));
         this._window.on('blur', () => this.emit('deactivated'));
-        this._window.on('minimize', () => this._state());
-        this._window.on('restore', () => this._state());
-        this._window.on('maximize', () => this._state());
-        this._window.on('unmaximize', () => this._state());
-        this._window.on('enter-full-screen', () => this._state());
-        this._window.on('leave-full-screen', () => this._state());
+        this._window.on('minimize', () => this.state());
+        this._window.on('restore', () => this.state());
+        this._window.on('maximize', () => this.state());
+        this._window.on('unmaximize', () => this.state());
+        this._window.on('enter-full-screen', () => this.state());
+        this._window.on('leave-full-screen', () => this.state());
         this._window.webContents.on('did-finish-load', () => {
             this._didFinishLoad = true;
         });
@@ -808,7 +808,7 @@ class View {
         }
     }
 
-    _state() {
+    state() {
         this.execute('window-state', {
             minimized: this._window.isMinimized(),
             maximized: this._window.isMaximized(),
@@ -822,13 +822,6 @@ class ViewCollection {
     constructor(application) {
         this._application = application;
         this._views = new Map();
-        electron.ipcMain.on('update', (event, data) => {
-            const window = event.sender.getOwnerBrowserWindow();
-            const view = this.get(window);
-            if (view) {
-                view.update(data);
-            }
-        });
         electron.ipcMain.on('window-close', (event) => {
             const window = event.sender.getOwnerBrowserWindow();
             window.close();
@@ -852,6 +845,20 @@ class ViewCollection {
             window.minimize();
             event.returnValue = null;
         });
+        electron.ipcMain.on('window-update', (event, data) => {
+            const window = event.sender.getOwnerBrowserWindow();
+            if (this._views.has(window)) {
+                this._views.get(window).update(data);
+            }
+            event.returnValue = null;
+        });
+        electron.ipcMain.on('update-window-state', (event) => {
+            const window = event.sender.getOwnerBrowserWindow();
+            if (this._views.has(window)) {
+                this._views.get(window).state();
+            }
+            event.returnValue = null;
+        });
     }
 
     get application() {

source/electron.js

@@ -29,6 +29,7 @@ host.ElectronHost = class {
             }
         });
         this._environment = electron.ipcRenderer.sendSync('get-environment', {});
+        this._environment.menu = this._environment.titlebar && this._environment.platform !== 'darwin';
         this._queue = [];
     }
 
@@ -61,7 +62,7 @@ host.ElectronHost = class {
             const age = (new Date() - new Date(this._environment.date)) / (24 * 60 * 60 * 1000);
             if (age > 180) {
                 this._message('Please update to the newest version.', 'Download', () => {
-                    const link = this.document.getElementById('logo-github').href;
+                    const link = this._element('logo-github').href;
                     this.openURL(link);
                 }, true);
             }
@@ -135,13 +136,6 @@ host.ElectronHost = class {
                 this._openPath(path);
             }
         }
-        if (this._environment.titlebar) {
-            this.document.getElementById('titlebar').style.display = 'block';
-        }
-        if (!this._environment.titlebar || this._environment.platform === 'darwin') {
-            this.document.getElementById('menu-button').style.display = 'none';
-            this.document.getElementById('titlebar-window').style.display = 'none';
-        }
 
         this._window.addEventListener('focus', () => {
             this._document.body.classList.add('active');
@@ -172,16 +166,16 @@ host.ElectronHost = class {
             this._update(Object.assign({}, this._view.options));
         });
         electron.ipcRenderer.on('zoom-in', () => {
-            this.document.getElementById('zoom-in-button').click();
+            this._element('zoom-in-button').click();
         });
         electron.ipcRenderer.on('zoom-out', () => {
-            this.document.getElementById('zoom-out-button').click();
+            this._element('zoom-out-button').click();
         });
         electron.ipcRenderer.on('reset-zoom', () => {
             this._view.resetZoom();
         });
         electron.ipcRenderer.on('show-properties', () => {
-            this.document.getElementById('sidebar-button').click();
+            this._element('sidebar-button').click();
         });
         electron.ipcRenderer.on('find', () => {
             this._view.find();
@@ -190,24 +184,30 @@ host.ElectronHost = class {
             this._view.about();
         });
 
-        this.document.getElementById('titlebar-close').addEventListener('click', () => {
+        this._element('titlebar-close').addEventListener('click', () => {
             electron.ipcRenderer.sendSync('window-close', {});
         });
-        this.document.getElementById('titlebar-toggle').addEventListener('click', () => {
+        this._element('titlebar-toggle').addEventListener('click', () => {
             electron.ipcRenderer.sendSync('window-toggle', {});
         });
-        this.document.getElementById('titlebar-minimize').addEventListener('click', () => {
+        this._element('titlebar-minimize').addEventListener('click', () => {
             electron.ipcRenderer.sendSync('window-minimize', {});
         });
+        electron.ipcRenderer.on('window-state', (_, data) => {
+            this._element('titlebar').style.display = this._environment.titlebar ? 'block' : 'none';
+            this._element('menu-button').style.opacity = this._environment.menu ? 1 : 0;
+            this._element('titlebar-window').style.opacity = this._environment.titlebar && this._environment.platform !== 'darwin' && !data.fullscreen ? 1 : 0;
+        });
+        electron.ipcRenderer.sendSync('update-window-state', {});
 
-        const openFileButton = this.document.getElementById('open-file-button');
+        const openFileButton = this._element('open-file-button');
         if (openFileButton) {
             openFileButton.addEventListener('click', () => {
                 electron.ipcRenderer.send('open-file-dialog', {});
             });
         }
-        const githubButton = this.document.getElementById('github-button');
-        const githubLink = this.document.getElementById('logo-github');
+        const githubButton = this._element('github-button');
+        const githubLink = this._element('logo-github');
         if (githubButton && githubLink) {
             githubButton.innerText = 'Download';
             githubButton.addEventListener('click', () => {
@@ -573,7 +573,7 @@ host.ElectronHost = class {
     }
 
     _title(path) {
-        const element = this._document.getElementById('titlebar-content-text');
+        const element = this._element('titlebar-content-text');
         if (element) {
             element.setAttribute('title', path);
             element.innerHTML = '';
@@ -588,16 +588,20 @@ host.ElectronHost = class {
         }
     }
 
+    _element(id) {
+        return this.document.getElementById(id);
+    }
+
     _update(data) {
-        electron.ipcRenderer.send('update', data);
+        electron.ipcRenderer.send('window-update', data);
     }
 
     _message(message, action, callback, modal) {
-        const messageText = this.document.getElementById('message');
+        const messageText = this._element('message');
         if (messageText) {
             messageText.innerText = message;
         }
-        const messageButton = this.document.getElementById('message-button');
+        const messageButton = this._element('message-button');
         if (messageButton) {
             if (action && callback) {
                 messageButton.style.removeProperty('display');

source/index.js

@@ -24,7 +24,8 @@ host.BrowserHost = class {
             'type': this._meta.type ? this._meta.type[0] : 'Browser',
             'version': this._meta.version ? this._meta.version[0] : null,
             'date': this._meta.date ? new Date(this._meta.date[0].split(' ').join('T') + 'Z') : new Date(),
-            'platform': /(Mac|iPhone|iPod|iPad)/i.test(this._navigator.platform) ? 'darwin' : undefined
+            'platform': /(Mac|iPhone|iPod|iPad)/i.test(this._navigator.platform) ? 'darwin' : undefined,
+            'menu': true
         };
         this.window.require = (id) => {
             const name = id.startsWith('./') ? id.substring(2) : id;

source/view.js

@@ -54,92 +54,94 @@ view.View = class {
             this._host.document.addEventListener('keydown', () => {
                 this.clearSelection();
             });
-            this._menu = new view.Dropdown(this._host, 'menu-button', 'menu-dropdown');
-            this._menu.add({
-                label: 'Properties...',
-                accelerator: 'CmdOrCtrl+Enter',
-                click: () => this.showModelProperties(),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({});
-            this._menu.add({
-                label: 'Find...',
-                accelerator: 'CmdOrCtrl+F',
-                click: () => this.find(),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({});
-            this._menu.add({
-                label: () => this.options.attributes ? 'Hide Attributes' : 'Show Attributes',
-                accelerator: 'CmdOrCtrl+D',
-                click: () => this.toggle('attributes'),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({
-                label: () => this.options.initializers ? 'Hide Initializers' : 'Show Initializers',
-                accelerator: 'CmdOrCtrl+I',
-                click: () => this.toggle('initializers'),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({
-                label: () => this.options.names ? 'Hide Names' : 'Show Names',
-                accelerator: 'CmdOrCtrl+U',
-                click: () => this.toggle('names'),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({
-                label: () => this.options.direction === 'vertical' ? 'Show Horizontal' : 'Show Vertical',
-                accelerator: 'CmdOrCtrl+K',
-                click: () => this.toggle('direction'),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({
-                label: () => this.options.mousewheel === 'scroll' ? 'Mouse Wheel: Zoom' : 'Mouse Wheel: Scroll',
-                accelerator: 'CmdOrCtrl+M',
-                click: () => this.toggle('mousewheel'),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({});
-            this._menu.add({
-                label: 'Zoom In',
-                accelerator: 'Shift+Up',
-                click: () => this.zoomIn(),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({
-                label: 'Zoom Out',
-                accelerator: 'Shift+Down',
-                click: () => this.zoomOut(),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({
-                label: 'Actual Size',
-                accelerator: 'Shift+Backspace',
-                click: () => this.resetZoom(),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({});
-            this._menu.add({
-                label: 'Export as PNG',
-                accelerator: 'CmdOrCtrl+Shift+E',
-                click: () => this.export(this._host.document.title + '.png'),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({
-                label: 'Export as SVG',
-                accelerator: 'CmdOrCtrl+Alt+E',
-                click: () => this.export(this._host.document.title + '.svg'),
-                enabled: () => this.activeGraph
-            });
-            this._menu.add({});
-            this._menu.add({
-                label: 'About ' + this._host.document.title,
-                click: () => this.about()
-            });
-            this._getElementById('menu-button').addEventListener('click', (e) => {
-                this._menu.toggle();
-                e.preventDefault();
-            });
+            if (this._host.environment('menu')) {
+                this._menu = new view.Dropdown(this._host, 'menu-button', 'menu-dropdown');
+                this._menu.add({
+                    label: 'Properties...',
+                    accelerator: 'CmdOrCtrl+Enter',
+                    click: () => this.showModelProperties(),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({});
+                this._menu.add({
+                    label: 'Find...',
+                    accelerator: 'CmdOrCtrl+F',
+                    click: () => this.find(),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({});
+                this._menu.add({
+                    label: () => this.options.attributes ? 'Hide Attributes' : 'Show Attributes',
+                    accelerator: 'CmdOrCtrl+D',
+                    click: () => this.toggle('attributes'),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({
+                    label: () => this.options.initializers ? 'Hide Initializers' : 'Show Initializers',
+                    accelerator: 'CmdOrCtrl+I',
+                    click: () => this.toggle('initializers'),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({
+                    label: () => this.options.names ? 'Hide Names' : 'Show Names',
+                    accelerator: 'CmdOrCtrl+U',
+                    click: () => this.toggle('names'),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({
+                    label: () => this.options.direction === 'vertical' ? 'Show Horizontal' : 'Show Vertical',
+                    accelerator: 'CmdOrCtrl+K',
+                    click: () => this.toggle('direction'),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({
+                    label: () => this.options.mousewheel === 'scroll' ? 'Mouse Wheel: Zoom' : 'Mouse Wheel: Scroll',
+                    accelerator: 'CmdOrCtrl+M',
+                    click: () => this.toggle('mousewheel'),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({});
+                this._menu.add({
+                    label: 'Zoom In',
+                    accelerator: 'Shift+Up',
+                    click: () => this.zoomIn(),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({
+                    label: 'Zoom Out',
+                    accelerator: 'Shift+Down',
+                    click: () => this.zoomOut(),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({
+                    label: 'Actual Size',
+                    accelerator: 'Shift+Backspace',
+                    click: () => this.resetZoom(),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({});
+                this._menu.add({
+                    label: 'Export as PNG',
+                    accelerator: 'CmdOrCtrl+Shift+E',
+                    click: () => this.export(this._host.document.title + '.png'),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({
+                    label: 'Export as SVG',
+                    accelerator: 'CmdOrCtrl+Alt+E',
+                    click: () => this.export(this._host.document.title + '.svg'),
+                    enabled: () => this.activeGraph
+                });
+                this._menu.add({});
+                this._menu.add({
+                    label: 'About ' + this._host.document.title,
+                    click: () => this.about()
+                });
+                this._getElementById('menu-button').addEventListener('click', (e) => {
+                    this._menu.toggle();
+                    e.preventDefault();
+                });
+            }
             this._host.start();
         }).catch((err) => {
             this.error(err, null, null);