From 2b8ddbf76459437e5e48221dd98d5611a6b97a37 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Mon, 22 Apr 2019 10:09:42 +0900 Subject: [PATCH] Removed old paddings --- desktop/main.js | 4 +- desktop/sources/links/main.css | 4 +- desktop/sources/scripts/cursor.js | 4 +- desktop/sources/scripts/dotgrid.js | 2 +- desktop/sources/scripts/generator.js | 4 +- desktop/sources/scripts/manager.js | 8 +- desktop/sources/scripts/renderer.js | 24 ++--- examples/taijitu.grid | 127 ++++++++++++++------------- 8 files changed, 90 insertions(+), 87 deletions(-) diff --git a/desktop/main.js b/desktop/main.js index 3b79e80..3d1b4e8 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -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', diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index d9379a4..4fecfdf 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -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%;} diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index 223b9e9..b5f293c 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -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) } } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 32b5880..ebb5108 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -117,7 +117,7 @@ function Dotgrid () { } this.getPadding = function () { - return { x: 60, y: 120 } + return { x: 60, y: 90 } } this.getWindowSize = function () { diff --git a/desktop/sources/scripts/generator.js b/desktop/sources/scripts/generator.js index 5057795..7900d5f 100644 --- a/desktop/sources/scripts/generator.js +++ b/desktop/sources/scripts/generator.js @@ -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 diff --git a/desktop/sources/scripts/manager.js b/desktop/sources/scripts/manager.js index 101382d..fa9611a 100644 --- a/desktop/sources/scripts/manager.js +++ b/desktop/sources/scripts/manager.js @@ -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() diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 8dd0bd6..2629b5c 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -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 } } diff --git a/examples/taijitu.grid b/examples/taijitu.grid index 5935587..1410cf1 100644 --- a/examples/taijitu.grid +++ b/examples/taijitu.grid @@ -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 } ] },