From 34ed101665209dd10e79b8150027702747ebca37 Mon Sep 17 00:00:00 2001 From: Frederic Kettelhoit Date: Wed, 18 Mar 2020 13:55:29 +0100 Subject: [PATCH 1/4] Export SVGs with a minimal bounding viewBox --- scripts/manager.js | 62 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) diff --git a/scripts/manager.js b/scripts/manager.js index 34527a4..d99bf89 100644 --- a/scripts/manager.js +++ b/scripts/manager.js @@ -45,6 +45,49 @@ function Manager (client) { } } + this.minimalViewBox = function () { + const styles = client.tool.styles + const paths = client.tool.paths() + + var xMin = null + var yMin = null + var xMax = null + var yMax = null + for (const id in this.layers) { + const style = styles[id] + const canOvershoot = style.strokeLinejoin === 'miter' || style.strokeLinecap === 'square' + const offset = canOvershoot ? style.thickness : style.thickness / 2 + + const path = paths[id] + const matches = path.match(/\d+,\d+/g) + console.log(matches) + if (matches === null) { continue } + + const coordinates = matches.map(p => p.split(/,/)) + const xs = coordinates.map(p => p[0]); + const ys = coordinates.map(p => p[1]); + const xMinOfLayer = Math.min(...xs) - offset + const yMinOfLayer = Math.min(...ys) - offset + const xMaxOfLayer = Math.max(...xs) + offset + const yMaxOfLayer = Math.max(...ys) + offset + + console.log(xMinOfLayer) + console.log(yMinOfLayer) + console.log(xMaxOfLayer) + console.log(yMaxOfLayer) + + if (xMin === null || xMinOfLayer < xMin) { xMin = xMinOfLayer } + if (yMin === null || yMinOfLayer < yMin) { yMin = yMinOfLayer } + if (xMax === null || xMaxOfLayer > xMax) { xMax = xMaxOfLayer } + if (yMax === null || yMaxOfLayer > yMax) { yMax = yMaxOfLayer } + } + if (xMin === null || yMin === null || xMax === null || yMax === null) { return '' } + + const viewBox = xMin + ' ' + yMin + ' ' + (xMax - xMin) + ' ' + (yMax - yMin) + console.log(viewBox) + return viewBox + } + this.svg64 = function () { const xml = new XMLSerializer().serializeToString(this.el) const svg64 = btoa(xml) @@ -85,6 +128,23 @@ function Manager (client) { } this.toString = () => { - return new XMLSerializer().serializeToString(this.el) + const viewBox = this.minimalViewBox(); + if (viewBox !== '') { + this.el.setAttribute('width', viewBox.split(/ /)[2] + 'px') + this.el.removeAttribute('height') + this.el.style.width = null + this.el.style.height = null + this.el.setAttribute('viewBox', this.minimalViewBox()) + } + const serialized = new XMLSerializer().serializeToString(this.el) + if (viewBox !== '') { + this.el.setAttribute('width', (client.tool.settings.size.width) + 'px') + this.el.setAttribute('height', (client.tool.settings.size.height) + 'px') + this.el.style.width = client.tool.settings.size.width + this.el.style.height = client.tool.settings.size.height + this.el.removeAttribute('viewBox') + } + + return serialized } } From ed407c9af4c017ff79ec372d900d9513c7103d69 Mon Sep 17 00:00:00 2001 From: Frederic Kettelhoit Date: Wed, 18 Mar 2020 14:01:23 +0100 Subject: [PATCH 2/4] Remove unnecessary parentheses --- scripts/manager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/manager.js b/scripts/manager.js index d99bf89..d443609 100644 --- a/scripts/manager.js +++ b/scripts/manager.js @@ -24,7 +24,7 @@ function Manager (client) { this.update = function () { this.el.setAttribute('width', (client.tool.settings.size.width) + 'px') this.el.setAttribute('height', (client.tool.settings.size.height) + 'px') - this.el.style.width = (client.tool.settings.size.width) + this.el.style.width = client.tool.settings.size.width this.el.style.height = client.tool.settings.size.height const styles = client.tool.styles From 6b45e88f0a2218683dde37420562c7c7bac68d7f Mon Sep 17 00:00:00 2001 From: Frederic Kettelhoit Date: Wed, 18 Mar 2020 14:01:59 +0100 Subject: [PATCH 3/4] Remove unused Manager.toSVG() and Manager.toGRID() functions --- scripts/manager.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/scripts/manager.js b/scripts/manager.js index d443609..e89762b 100644 --- a/scripts/manager.js +++ b/scripts/manager.js @@ -112,21 +112,6 @@ function Manager (client) { img.src = image64 } - this.toSVG = function (callback) { - this.update() - - const image64 = this.svg64() - callback(image64, 'export.svg') - } - - this.toGRID = function (callback) { - this.update() - - const text = client.tool.export() - const file = new Blob([text], { type: 'text/plain' }) - callback(URL.createObjectURL(file), 'export.grid') - } - this.toString = () => { const viewBox = this.minimalViewBox(); if (viewBox !== '') { From 3a87c03bc6702e1a04c9d5d76417af950eb23b54 Mon Sep 17 00:00:00 2001 From: Frederic Kettelhoit Date: Wed, 18 Mar 2020 17:33:15 +0100 Subject: [PATCH 4/4] Remove unnecessary console.log() statements --- scripts/manager.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/scripts/manager.js b/scripts/manager.js index e89762b..ead1d62 100644 --- a/scripts/manager.js +++ b/scripts/manager.js @@ -60,7 +60,6 @@ function Manager (client) { const path = paths[id] const matches = path.match(/\d+,\d+/g) - console.log(matches) if (matches === null) { continue } const coordinates = matches.map(p => p.split(/,/)) @@ -71,11 +70,6 @@ function Manager (client) { const xMaxOfLayer = Math.max(...xs) + offset const yMaxOfLayer = Math.max(...ys) + offset - console.log(xMinOfLayer) - console.log(yMinOfLayer) - console.log(xMaxOfLayer) - console.log(yMaxOfLayer) - if (xMin === null || xMinOfLayer < xMin) { xMin = xMinOfLayer } if (yMin === null || yMinOfLayer < yMin) { yMin = yMinOfLayer } if (xMax === null || xMaxOfLayer > xMax) { xMax = xMaxOfLayer } @@ -83,9 +77,7 @@ function Manager (client) { } if (xMin === null || yMin === null || xMax === null || yMax === null) { return '' } - const viewBox = xMin + ' ' + yMin + ' ' + (xMax - xMin) + ' ' + (yMax - yMin) - console.log(viewBox) - return viewBox + return xMin + ' ' + yMin + ' ' + (xMax - xMin) + ' ' + (yMax - yMin) } this.svg64 = function () {