Improved resize

This commit is contained in:
Devine Lu Linvega 2019-07-17 11:55:43 +09:00
parent 06bfca5828
commit 0113c3f875
6 changed files with 15 additions and 13 deletions

View File

@ -12,7 +12,7 @@ app.on('ready', () => {
width: 780, width: 780,
height: 392, height: 392,
minWidth: 380, minWidth: 380,
minHeight: 380, minHeight: 360,
backgroundColor: '#000', backgroundColor: '#000',
icon: path.join(__dirname, { darwin: 'icon.icns', linux: 'icon.png', win32: 'icon.ico' }[process.platform] || 'icon.ico'), icon: path.join(__dirname, { darwin: 'icon.icns', linux: 'icon.png', win32: 'icon.ico' }[process.platform] || 'icon.ico'),
resizable: true, resizable: true,

View File

@ -4,12 +4,13 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
#ronin { height: calc(100vh - 60px); width:calc(100vw - 60px); -webkit-app-region: drag; padding: 30px;overflow: hidden; } #ronin { height: calc(100vh - 60px); width:calc(100vw - 60px); -webkit-app-region: drag; padding: 30px;overflow: hidden; }
#ronin #wrapper { overflow: hidden; position: relative; } #ronin #wrapper { overflow: hidden; position: relative; }
#ronin #wrapper #commander { z-index: 9000; position: relative; width: 300px; height: calc(100vh - 60px); border-right: 1px solid #333; -webkit-app-region: no-drag; padding-right: 30px; transition: margin-left 250ms;} #ronin #wrapper #commander { z-index: 9000;position: relative;width: 310px;height: calc(100vh - 60px);-webkit-app-region: no-drag;padding-right: 30px;transition: margin-left 250ms;}
#ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 80px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px} #ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 80px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px}
#ronin #wrapper #commander div#status { position: absolute; bottom: 0px; } #ronin #wrapper #commander div#status { position: absolute; bottom: 0px; }
#ronin.hidden #wrapper #commander { margin-left:-331px; } #ronin.hidden #wrapper #commander { margin-left:-331px; }
#ronin canvas#surface,#ronin canvas#guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%; left:340px; transition: left 250ms} #ronin canvas#surface,#ronin canvas#guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%; left:340px; transition: left 250ms}
#ronin canvas#guide { background:none; } #ronin canvas#guide { background:none; }
#ronin canvas#surface { border-radius: 2px }
#ronin.hidden canvas#surface, #ronin.hidden canvas#guide { left:0px; } #ronin.hidden canvas#surface, #ronin.hidden canvas#guide { left:0px; }

View File

@ -1,5 +1,5 @@
body { background:var(--background); } body { background:var(--background); }
#ronin #wrapper { background: var(--background); } #ronin #wrapper { background: var(--background); }
#ronin #wrapper #commander { background:var(--background);border-right-color: var(--f_low) } #ronin #wrapper #commander { background:var(--background); }
#ronin #wrapper #commander textarea { color:var(--f_high); } #ronin #wrapper #commander textarea { color:var(--f_high); }
#ronin #wrapper #commander div#status { color:var(--f_med); } #ronin #wrapper #commander div#status { color:var(--f_med); }

View File

@ -4,6 +4,7 @@ function Commander (ronin) {
this._input = document.createElement('textarea') this._input = document.createElement('textarea')
this._status = document.createElement('div') this._status = document.createElement('div')
this._status.id = 'status' this._status.id = 'status'
this.isVisible = true
this.install = function (host) { this.install = function (host) {
this.el.appendChild(this._input) this.el.appendChild(this._input)
@ -22,7 +23,6 @@ function Commander (ronin) {
this.run = (txt = this._input.value) => { this.run = (txt = this._input.value) => {
if (txt.indexOf('$') > -1) { ronin.log('Present: $'); return } if (txt.indexOf('$') > -1) { ronin.log('Present: $'); return }
ronin.surface.maximize()
const inter = new Lisp(txt, ronin.library) const inter = new Lisp(txt, ronin.library)
inter.toPixels() inter.toPixels()
ronin.always && requestAnimationFrame(() => this.run(txt)) ronin.always && requestAnimationFrame(() => this.run(txt))
@ -144,19 +144,19 @@ function Commander (ronin) {
// Display // Display
this.show = function () { this.show = function () {
if (ronin.el.className !== '') { if (this.isVisible === true) { return }
ronin.el.className = '' ronin.el.className = ''
} this.isVisible = true
} }
this.hide = function () { this.hide = function () {
if (ronin.el.className !== 'hidden') { if (this.isVisible !== true) { return }
ronin.el.className = 'hidden' ronin.el.className = 'hidden'
} this.isVisible = false
} }
this.toggle = function () { this.toggle = function () {
if (ronin.el.className === 'hidden') { if (this.isVisible !== true) {
this.show() this.show()
} else { } else {
this.hide() this.hide()

View File

@ -61,7 +61,7 @@ function Ronin () {
} }
this.animate = (b = true) => { this.animate = (b = true) => {
if(this.always === b){ return } if (this.always === b) { return }
this.always = b this.always = b
this.commander.run() this.commander.run()
} }

View File

@ -150,6 +150,7 @@ function Surface (ronin) {
} }
this.resize = function (size, fit = false) { this.resize = function (size, fit = false) {
console.log('Surface', `Resize: ${size.w}x${size.h}`)
this.el.width = size.w this.el.width = size.w
this.el.height = size.h this.el.height = size.h
this.el.style.width = size.w + 'px' this.el.style.width = size.w + 'px'
@ -165,7 +166,7 @@ function Surface (ronin) {
this.fitWindow = function (size) { this.fitWindow = function (size) {
const win = require('electron').remote.getCurrentWindow() const win = require('electron').remote.getCurrentWindow()
const pad = { w: 60, h: 60 } const pad = { w: ronin.commander.isVisible === true ? 400 : 60, h: 60 }
win.setSize(size.w + pad.w, size.h + pad.h, false) win.setSize(size.w + pad.w, size.h + pad.h, false)
} }