From 297aa977bc163272e98528092eebe4d344c6f34f Mon Sep 17 00:00:00 2001 From: Lutz Roeder Date: Sun, 9 Jul 2023 12:10:05 -0700 Subject: [PATCH] Update view.js (#1110) --- source/browser.js | 2 +- source/electron.js | 14 +++++-- source/index.html | 2 +- source/index.js | 7 ++++ source/view.js | 92 +++++++++++++++------------------------------- 5 files changed, 49 insertions(+), 68 deletions(-) diff --git a/source/browser.js b/source/browser.js index b04c5922c7..c1c031336a 100644 --- a/source/browser.js +++ b/source/browser.js @@ -590,7 +590,7 @@ host.BrowserHost = class { button.onclick = () => { button.onclick = null; this._document.body.classList.remove('message'); - resolve(); + resolve(0); }; button.focus(); } else { diff --git a/source/electron.js b/source/electron.js index 54fd7e2dff..bc6af2dc5d 100644 --- a/source/electron.js +++ b/source/electron.js @@ -242,8 +242,7 @@ host.ElectronHost = class { buttons: [ 'Report', 'Cancel' ] }; return electron.ipcRenderer.sendSync('show-message-box', options); - // await this._message(message + ': ' + detail, 'Report'); - // return 0; + // return await this._message(message + ': ' + detail, 'Report'); } confirm(message, detail) { @@ -549,12 +548,19 @@ host.ElectronHost = class { if (action && callback) { button.style.removeProperty('display'); button.innerText = action; - button.onclick = () => callback(); + button.onclick = () => callback(0); button.focus(); } else { button.style.display = 'none'; button.onclick = null; } + if (this._view) { + try { + this._view.show('welcome message'); + } catch (error) { + // continue regardless of error + } + } this._document.body.setAttribute('class', 'welcome message'); } @@ -568,7 +574,7 @@ host.ElectronHost = class { button.onclick = () => { button.onclick = null; this._document.body.classList.remove('message'); - resolve(); + resolve(0); }; button.focus(); } else { diff --git a/source/index.html b/source/index.html index 9525c938ce..1aec244bcc 100644 --- a/source/index.html +++ b/source/index.html @@ -174,7 +174,7 @@ .toolbar-name-button { margin-top: 6px; margin-bottom: 6px; } } .sidebar { display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif; font-size: 12px; height: 100%; right: -100%; position: fixed; transition: 0.1s; top: 0; background-color: #ececec; color: #242424; overflow: hidden; border-left: 1px solid rgba(255, 255, 255, 0.5); opacity: 0; } -.sidebar-title { font-weight: bold; font-size: 12px; letter-spacing: 0.5px; height: 20px; margin: 0; padding: 20px; user-select: none; -webkit-user-select: none; -moz-user-select: none; } +.sidebar-title { font-weight: bold; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; height: 20px; margin: 0; padding: 20px; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .sidebar-closebutton { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #777777; opacity: 1.0; display: block; transition: 0.2s; position: absolute; top: 0; right: 15px; margin-left: 50px; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .sidebar-closebutton:hover { color: #242424; } .sidebar-content { display: flex; flex-direction: column; flex-grow: 1; height: 0; } diff --git a/source/index.js b/source/index.js index fb08d46dac..518aa00128 100644 --- a/source/index.js +++ b/source/index.js @@ -90,6 +90,13 @@ window.terminate = function(message, action, callback) { button.style.display = 'none'; button.onclick = null; } + if (window.__view__) { + try { + window.__view__.show('welcome message'); + } catch (error) { + // continue regardless of error + } + } document.body.setAttribute('class', 'welcome message'); }; diff --git a/source/view.js b/source/view.js index e9fbcfbbad..d64ea40dfb 100644 --- a/source/view.js +++ b/source/view.js @@ -13,9 +13,8 @@ var grapher = require('./grapher'); view.View = class { - constructor(host, id) { + constructor(host) { this._host = host; - this._id = id ? ('-' + id) : ''; this._options = { weights: true, attributes: false, @@ -27,7 +26,7 @@ view.View = class { this._model = null; this._graphs = []; this._selection = []; - this._sidebar = new view.Sidebar(this._host, id); + this._sidebar = new view.Sidebar(this._host); this._searchText = ''; this._modelFactoryService = new view.ModelFactoryService(this._host); this._element('sidebar-button').addEventListener('click', () => { @@ -331,7 +330,7 @@ view.View = class { } _element(id) { - return this._host.document.getElementById(id + this._id); + return this._host.document.getElementById(id); } zoomIn() { @@ -2026,17 +2025,15 @@ view.Edge = class extends grapher.Edge { view.Sidebar = class { - constructor(host, id) { + constructor(host) { this._host = host; - this._id = id ? ('-' + id) : ''; this._stack = []; - this._closeSidebarHandler = () => { - this._pop(); - }; + const pop = () => this._update(this._stack.slice(0, -1)); + this._closeSidebarHandler = () => pop(); this._closeSidebarKeyDownHandler = (e) => { if (e.keyCode == 27) { e.preventDefault(); - this._pop(); + pop(); } }; const sidebar = this._element('sidebar'); @@ -2049,66 +2046,35 @@ view.Sidebar = class { } _element(id) { - return this._host.document.getElementById(id + this._id); + return this._host.document.getElementById(id); } open(content, title) { - this.close(); - this.push(content, title); + this._update([ { title: title, content: content } ]); } close() { - this._deactivate(); - this._stack = []; - this._hide(); + this._update([]); } push(content, title) { - const item = { title: title, content: content }; - this._stack.push(item); - this._activate(item); - } - - _pop() { - this._deactivate(); - if (this._stack.length > 0) { - this._stack.pop(); - } - if (this._stack.length > 0) { - this._activate(this._stack[this._stack.length - 1]); - } else { - this._hide(); - } + this._update(this._stack.concat({ title: title, content: content })); } - _hide() { + _update(stack) { const sidebar = this._element('sidebar'); - if (sidebar) { - sidebar.style.right = 'calc(0px - min(calc(100% * 0.6), 42em))'; - sidebar.style.opacity = 0; - } const container = this._element('graph'); - if (container) { - container.style.width = '100%'; - container.focus(); - } - } - - _deactivate() { - const sidebar = this._element('sidebar'); - if (sidebar) { - const closeButton = this._element('sidebar-closebutton'); - closeButton.removeEventListener('click', this._closeSidebarHandler); - this._host.document.removeEventListener('keydown', this._closeSidebarKeyDownHandler); + const closeButton = this._element('sidebar-closebutton'); + closeButton.removeEventListener('click', this._closeSidebarHandler); + this._host.document.removeEventListener('keydown', this._closeSidebarKeyDownHandler); + if (stack) { + this._stack = stack; + } else if (this._stack.length > 0) { + this._stack.pop(); } - } - - _activate(item) { - const sidebar = this._element('sidebar'); - if (sidebar) { - const title = this._element('sidebar-title'); - title.innerHTML = item.title ? item.title.toUpperCase() : ''; - const closeButton = this._element('sidebar-closebutton'); + if (this._stack.length > 0) { + const item = this._stack[this._stack.length - 1]; + this._element('sidebar-title').innerHTML = item.title || ''; closeButton.addEventListener('click', this._closeSidebarHandler); const content = this._element('sidebar-content'); if (typeof item.content == 'string') { @@ -2126,10 +2092,12 @@ view.Sidebar = class { sidebar.style.right = 0; sidebar.style.opacity = 1; this._host.document.addEventListener('keydown', this._closeSidebarKeyDownHandler); - } - const container = this._element('graph'); - if (container) { container.style.width = 'max(40vw, calc(100vw - 42em))'; + } else { + sidebar.style.right = 'calc(0px - min(calc(100% * 0.6), 42em))'; + sidebar.style.opacity = 0; + container.style.width = '100%'; + container.focus(); } } }; @@ -4671,7 +4639,7 @@ view.ModelContext = class { this._content.set(type, obj); } } - } catch (err) { + } catch (error) { // continue regardless of error } break; @@ -4687,7 +4655,7 @@ view.ModelContext = class { this._content.set(type, obj); } } - } catch (err) { + } catch (error) { // continue regardless of error } break; @@ -4720,7 +4688,7 @@ view.ModelContext = class { const pickle = execution.__import__('pickle'); unpickler = new pickle.Unpickler(data); } - } catch (err) { + } catch (error) { // continue regardless of error } if (unpickler) {