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.on('ready', () => {
app.win = new BrowserWindow({ app.win = new BrowserWindow({
width: 700, width: 660,
height: 430, height: 390,
minWidth: 320, minWidth: 320,
minHeight: 320, minHeight: 320,
backgroundColor: '#000', backgroundColor: '#000',

View File

@ -2,13 +2,13 @@ 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; background: red} #guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px;}
#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; }
/* Interface */ /* 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.hidden { bottom:10px !important;opacity: 0 !important }
#interface.visible { bottom:30px !important; opacity: 1 !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%;} #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) { this.snapPos = function (pos) {
return { return {
x: clamp(step(pos.x, 15), 15, dotgrid.tool.settings.size.width), x: clamp(step(pos.x, 15), 0, dotgrid.tool.settings.size.width),
y: clamp(step(pos.y, 15), 15, dotgrid.tool.settings.size.height) y: clamp(step(pos.y, 15), 0, dotgrid.tool.settings.size.height)
} }
} }

View File

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

View File

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

View File

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

View File

@ -51,13 +51,12 @@ function Renderer (dotgrid) {
this.resize = function () { this.resize = function () {
const _target = dotgrid.getPaddedSize() const _target = dotgrid.getPaddedSize()
const _current = {width:this.el.width/this.scale,height:this.el.height/this.scale} const _current = { width: this.el.width / this.scale, height: this.el.height / this.scale }
const offset = sizeOffset(_target,_current) const offset = sizeOffset(_target, _current)
if(offset.width === 0 && offset.height === 0){ if (offset.width === 0 && offset.height === 0) {
return return
} }
console.log('Renderer',`Require resize: ${printSize(_target)}, from ${printSize(_current)}`) console.log('Renderer', `Require resize: ${printSize(_target)}, from ${printSize(_current)}`)
// const pad = 15
this.el.width = (_target.width) * this.scale this.el.width = (_target.width) * this.scale
this.el.height = (_target.height) * this.scale this.el.height = (_target.height) * this.scale
this.el.style.width = (_target.width) + 'px' 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 x = markers.w - 1; x >= 0; x--) {
for (let y = markers.h - 1; y >= 0; y--) { 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 // 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 } 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({ this.drawMarker({
x: parseInt(x * 15) + 15, x: parseInt(x * 15),
y: parseInt(y * 15) + 15 y: parseInt(y * 15)
}, is_step ? 2.5 : 1.5, color) }, isStep ? 2.5 : 1.5, color)
} }
} }
} }
@ -269,7 +271,7 @@ function Renderer (dotgrid) {
} }
function printSize (size) { return `${size.width}x${size.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 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 }
} }

View File

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