Removed old paddings

This commit is contained in:
Devine Lu Linvega 2019-04-22 10:09:42 +09:00
parent 931be9126d
commit 2b8ddbf764
8 changed files with 90 additions and 87 deletions

View File

@ -9,8 +9,8 @@ app.win = null
app.on('ready', () => {
app.win = new BrowserWindow({
width: 700,
height: 430,
width: 660,
height: 390,
minWidth: 320,
minHeight: 320,
backgroundColor: '#000',

View File

@ -2,13 +2,13 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non
/* Core */
#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px; background: red}
#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px;}
#render { display: none }
#vector { z-index: 1000;position: relative;width:300px; height:300px; }
/* Interface */
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:30px; left:40px; height:30px; max-width:calc(100vw - 85px); overflow: hidden;}
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:30px; left:40px; height:30px; max-width:calc(100vw - 75px); overflow: hidden;}
#interface.hidden { bottom:10px !important;opacity: 0 !important }
#interface.visible { bottom:30px !important; opacity: 1 !important}
#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;}

View File

@ -90,8 +90,8 @@ function Cursor () {
this.snapPos = function (pos) {
return {
x: clamp(step(pos.x, 15), 15, dotgrid.tool.settings.size.width),
y: clamp(step(pos.y, 15), 15, dotgrid.tool.settings.size.height)
x: clamp(step(pos.x, 15), 0, dotgrid.tool.settings.size.width),
y: clamp(step(pos.y, 15), 0, dotgrid.tool.settings.size.height)
}
}

View File

@ -117,7 +117,7 @@ function Dotgrid () {
}
this.getPadding = function () {
return { x: 60, y: 120 }
return { x: 60, y: 90 }
}
this.getWindowSize = function () {

View File

@ -10,8 +10,8 @@ function Generator (layer, style) {
for (const k1 in l) {
const seg = l[k1]
for (const k2 in seg.vertices) {
if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (dotgrid.tool.settings.size.width) - seg.vertices[k2].x + 15 }
if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (dotgrid.tool.settings.size.height) - seg.vertices[k2].y + 15 }
if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (dotgrid.tool.settings.size.width) - seg.vertices[k2].x }
if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (dotgrid.tool.settings.size.height) - seg.vertices[k2].y }
// Offset
seg.vertices[k2].x += offset.x

View File

@ -19,10 +19,10 @@ function Manager (dotgrid) {
}
this.update = function () {
this.el.setAttribute('width', (dotgrid.tool.settings.size.width + 15) + 'px')
this.el.setAttribute('height', (dotgrid.tool.settings.size.height + 15) + 'px')
this.el.style.width = (dotgrid.tool.settings.size.width + 15)
this.el.style.height = dotgrid.tool.settings.size.height + 15
this.el.setAttribute('width', (dotgrid.tool.settings.size.width) + 'px')
this.el.setAttribute('height', (dotgrid.tool.settings.size.height) + 'px')
this.el.style.width = (dotgrid.tool.settings.size.width)
this.el.style.height = dotgrid.tool.settings.size.height
const styles = dotgrid.tool.styles
const paths = dotgrid.tool.paths()

View File

@ -51,13 +51,12 @@ function Renderer (dotgrid) {
this.resize = function () {
const _target = dotgrid.getPaddedSize()
const _current = {width:this.el.width/this.scale,height:this.el.height/this.scale}
const offset = sizeOffset(_target,_current)
if(offset.width === 0 && offset.height === 0){
const _current = { width: this.el.width / this.scale, height: this.el.height / this.scale }
const offset = sizeOffset(_target, _current)
if (offset.width === 0 && offset.height === 0) {
return
}
console.log('Renderer',`Require resize: ${printSize(_target)}, from ${printSize(_current)}`)
// const pad = 15
console.log('Renderer', `Require resize: ${printSize(_target)}, from ${printSize(_current)}`)
this.el.width = (_target.width) * this.scale
this.el.height = (_target.height) * this.scale
this.el.style.width = (_target.width) + 'px'
@ -107,15 +106,18 @@ function Renderer (dotgrid) {
for (let x = markers.w - 1; x >= 0; x--) {
for (let y = markers.h - 1; y >= 0; y--) {
let is_step = x % 4 === 0 && y % 4 === 0
let isStep = x % 4 === 0 && y % 4 === 0
// Don't draw margins
if (x === 0 || y === 0) { continue }
// Color
let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low
let color = isStep ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low
if ((y === 0 || y === markers.h) && cursor.x === x + 1) { color = dotgrid.theme.active.b_high } else if ((x === 0 || x === markers.w - 1) && cursor.y === y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x === x + 1 && cursor.y === y + 1) { color = dotgrid.theme.active.b_high }
this.drawMarker({
x: parseInt(x * 15) + 15,
y: parseInt(y * 15) + 15
}, is_step ? 2.5 : 1.5, color)
x: parseInt(x * 15),
y: parseInt(y * 15)
}, isStep ? 2.5 : 1.5, color)
}
}
}
@ -269,7 +271,7 @@ function Renderer (dotgrid) {
}
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 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 clamp (v, min, max) { return v < min ? min : v > max ? max : v }
}

View File

@ -1,9 +1,10 @@
{
"settings": {
"size": {
"width": 315,
"height": 300
}
"width": 300,
"height": 285
},
"crest": false
},
"layers": [
[
@ -11,12 +12,12 @@
"type": "arc_r",
"vertices": [
{
"x": 135,
"y": 225
"x": 120,
"y": 210
},
{
"x": 195,
"y": 165
"x": 180,
"y": 150
}
]
},
@ -24,20 +25,20 @@
"type": "arc_c",
"vertices": [
{
"x": 135,
"y": 165
"x": 120,
"y": 150
},
{
"x": 195,
"y": 105
"x": 180,
"y": 90
},
{
"x": 195,
"y": 105
"x": 180,
"y": 90
},
{
"x": 255,
"y": 165
"x": 240,
"y": 150
}
]
},
@ -45,12 +46,12 @@
"type": "arc_c",
"vertices": [
{
"x": 135,
"y": 225
"x": 120,
"y": 210
},
{
"x": 75,
"y": 165
"x": 60,
"y": 150
}
]
},
@ -58,24 +59,24 @@
"type": "arc_c",
"vertices": [
{
"x": 135,
"y": 165
"x": 120,
"y": 150
},
{
"x": 165,
"y": 135
"x": 150,
"y": 120
},
{
"x": 195,
"y": 165
"x": 180,
"y": 150
},
{
"x": 165,
"y": 195
"x": 150,
"y": 180
},
{
"x": 135,
"y": 165
"x": 120,
"y": 150
}
]
},
@ -83,24 +84,24 @@
"type": "arc_c",
"vertices": [
{
"x": 165,
"y": 75
"x": 150,
"y": 60
},
{
"x": 255,
"y": 165
"x": 240,
"y": 150
},
{
"x": 165,
"y": 255
"x": 150,
"y": 240
},
{
"x": 75,
"y": 165
"x": 60,
"y": 150
},
{
"x": 165,
"y": 75
"x": 150,
"y": 60
}
]
},
@ -114,24 +115,24 @@
"type": "arc_r",
"vertices": [
{
"x": 255,
"y": 165
"x": 240,
"y": 150
},
{
"x": 165,
"y": 75
"x": 150,
"y": 60
},
{
"x": 75,
"y": 165
"x": 60,
"y": 150
},
{
"x": 135,
"y": 225
"x": 120,
"y": 210
},
{
"x": 195,
"y": 165
"x": 180,
"y": 150
}
]
},
@ -139,32 +140,32 @@
"type": "arc_c",
"vertices": [
{
"x": 195,
"y": 165
"x": 180,
"y": 150
},
{
"x": 195,
"y": 165
"x": 180,
"y": 150
},
{
"x": 165,
"y": 195
"x": 150,
"y": 180
},
{
"x": 135,
"y": 165
"x": 120,
"y": 150
},
{
"x": 135,
"y": 165
"x": 120,
"y": 150
},
{
"x": 195,
"y": 105
"x": 180,
"y": 90
},
{
"x": 255,
"y": 165
"x": 240,
"y": 150
}
]
},