Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Resizing the renderer properly

Browse Source
This commit is contained in:
Devine Lu Linvega 2019-04-22 10:00:32 +09:00
parent 76b82102c6
commit 931be9126d
3 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/sources/links/main.css
View File

@ -2,7 +2,7 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non
/* Core */ /* Core */
#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px} #guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px; background: red}
#render { display: none } #render { display: none }
#vector { z-index: 1000;position: relative;width:300px; height:300px; } #vector { z-index: 1000;position: relative;width:300px; height:300px; }

7
desktop/sources/scripts/dotgrid.js
View File

@ -117,7 +117,7 @@ function Dotgrid () {
} }
this.getPadding = function () { this.getPadding = function () {
return { x: 90, y: 120 } return { x: 60, y: 120 }
} }
this.getWindowSize = function () { this.getWindowSize = function () {
@ -143,7 +143,7 @@ function Dotgrid () {
this.requireResize = function () { this.requireResize = function () {
const _window = this.getWindowSize() const _window = this.getWindowSize()
const _required = this.getRequiredSize() const _required = this.getRequiredSize()
const offset = { width: _window.width - _required.width, height: _window.height - _required.height } const offset = sizeOffset(_window, _required)
if (offset.width !== 0 || offset.height !== 0) { if (offset.width !== 0 || offset.height !== 0) {
console.log(`Dotgrid`, `Require ${printSize(_required)}, but window is ${printSize(_window)}(${printSize(offset)})`) console.log(`Dotgrid`, `Require ${printSize(_required)}, but window is ${printSize(_window)}(${printSize(offset)})`)
return true return true
@ -154,7 +154,7 @@ function Dotgrid () {
this.onResize = function () { this.onResize = function () {
const _project = this.getProjectSize() const _project = this.getProjectSize()
const _padded = this.getPaddedSize() const _padded = this.getPaddedSize()
const offset = { width: _padded.width - _project.width, height: _padded.height - _project.height } const offset = sizeOffset(_padded, _project)
if (offset.width !== 0 || offset.height !== 0) { if (offset.width !== 0 || offset.height !== 0) {
console.log(`Dotgrid`, `Resize project to ${printSize(_padded)}`) console.log(`Dotgrid`, `Resize project to ${printSize(_padded)}`)
this.tool.settings.size = _padded this.tool.settings.size = _padded
@ -231,6 +231,7 @@ String.prototype.capitalize = function () {
return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase() return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase()
} }
function sizeOffset (a, b) { return { width: a.width - b.width, height: a.height - b.height } }
function printSize (size) { return `${size.width}x${size.height}` } function printSize (size) { return `${size.width}x${size.height}` }
function isJson (text) { try { JSON.parse(text); return true } catch (error) { return false } } function isJson (text) { try { JSON.parse(text); return true } catch (error) { return false } }
function isEqual (a, b) { return a && b && a.x === b.x && a.y === b.y } function isEqual (a, b) { return a && b && a.x === b.x && a.y === b.y }

24
desktop/sources/scripts/renderer.js
View File

@ -17,6 +17,7 @@ function Renderer (dotgrid) {
} }
this.update = function (force = false) { this.update = function (force = false) {
this.resize()
dotgrid.manager.update() dotgrid.manager.update()
let render = new Image() let render = new Image()
render.onload = () => { render.onload = () => {
@ -48,14 +49,19 @@ function Renderer (dotgrid) {
dotgrid.interface.update(true) dotgrid.interface.update(true)
} }
this.resize = function (size) { this.resize = function () {
const pad = 15 const _target = dotgrid.getPaddedSize()
this.el.width = (size.width + pad) * this.scale const _current = {width:this.el.width/this.scale,height:this.el.height/this.scale}
this.el.height = (size.height + pad) * this.scale const offset = sizeOffset(_target,_current)
this.el.style.width = (size.width + pad) + 'px' if(offset.width === 0 && offset.height === 0){
this.el.style.height = (size.height + pad) + 'px' return
}
this.update() console.log('Renderer',`Require resize: ${printSize(_target)}, from ${printSize(_current)}`)
// const pad = 15
this.el.width = (_target.width) * this.scale
this.el.height = (_target.height) * this.scale
this.el.style.width = (_target.width) + 'px'
this.el.style.height = (_target.height) + 'px'
} }
// Collections // Collections
@ -262,6 +268,8 @@ function Renderer (dotgrid) {
this.context.drawImage(render, 0, 0, this.el.width, this.el.height) this.context.drawImage(render, 0, 0, this.el.width, this.el.height)
} }
function printSize (size) { return `${size.width}x${size.height}` }
function sizeOffset(a,b){ return { width: a.width - b.width, height: a.height - b.height } }
function isEqual (a, b) { return a && b && Math.abs(a.x) === Math.abs(b.x) && Math.abs(a.y) === Math.abs(b.y) } function isEqual (a, b) { return a && b && Math.abs(a.x) === Math.abs(b.x) && Math.abs(a.y) === Math.abs(b.y) }
function clamp (v, min, max) { return v < min ? min : v > max ? max : v } function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
} }