From 66f5a12a5a0e0e70e6d60a5342420356fbc91b36 Mon Sep 17 00:00:00 2001 From: Carlin MacKenzie Date: Sat, 23 May 2020 17:28:00 -0400 Subject: [PATCH 1/3] initial attempt to fix #31 --- helpers/add-background.js | 55 +++++++++++++ package.json | 3 +- src/activities/event/1F38D.svg | 144 +++++++++++++++++++-------------- 3 files changed, 142 insertions(+), 60 deletions(-) create mode 100644 helpers/add-background.js diff --git a/helpers/add-background.js b/helpers/add-background.js new file mode 100644 index 0000000000..60e0c89842 --- /dev/null +++ b/helpers/add-background.js @@ -0,0 +1,55 @@ +#!/usr/bin/env node + +'use strict'; + +const path = require('path'); +const fs = require('fs'); + +const openmojis = require("../data/openmoji.json"); + +const { + createDoc +} = require('../test/utils/utils'); + +const directory = 'srctemp/'; +console.log('doing stuff') +openmojis.forEach(emoji => { + const svgFile = path.join("src", emoji.group, emoji.subgroups, emoji.hexcode + '.svg') + const doc = createDoc(emoji); + + const root = doc.querySelector("#emoji") + + const backgroundGroup = doc.createElement('g') + backgroundGroup.setAttribute('id', "background") + backgroundGroup.setAttribute('xmlns', "http://www.w3.org/2000/svg") + + const beforeNode = doc.querySelector("#grid").nextSibling + root.insertBefore(backgroundGroup, beforeNode) + + const lineLayer = doc.querySelector("#line") + + const supplementLayer = doc.querySelector("#line-supplement") + + const lineDup = lineLayer.cloneNode(true) + + while (lineDup.children.length) { + lineDup.children[0].setAttribute('stroke-width', "6") + lineDup.children[0].setAttribute('stroke', "#fff") + backgroundGroup.appendChild(lineDup.firstChild); + } + + if (supplementLayer) { + const supplementDup = supplementLayer.cloneNode(true) + + while (supplementDup.children.length) { + supplementDup.children[0].setAttribute('stroke-width', "6") + supplementDup.children[0].setAttribute('stroke', "#fff") + backgroundGroup.appendChild(supplementDup.firstChild); + } + } + + fs.writeFile(svgFile, doc.documentElement.querySelector("svg").outerHTML, function (err) { + if (err) return console.log(err); + console.log('Successful'); + }); +}) \ No newline at end of file diff --git a/package.json b/package.json index e0e767a155..e0038a3c41 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "generate": "./helpers/generate.sh", "generate-font": "./helpers/generate-fonts.sh", "cache-clear": "for ref in export-png-618 export-png-72 export-svg-color export-svg-skintones pretty-src-svg; do git update-ref -d refs/memos/$ref; done", - "cc": "npm run cache-clear" + "cc": "npm run cache-clear", + "add-background": "node helpers/add-background.js --openmoji-src-folder $PWD/src" }, "engines": { "node": "8.x" diff --git a/src/activities/event/1F38D.svg b/src/activities/event/1F38D.svg index 9bf0c24c98..526d06c1e4 100644 --- a/src/activities/event/1F38D.svg +++ b/src/activities/event/1F38D.svg @@ -1,67 +1,93 @@ - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + \ No newline at end of file From 9f8a10c7896f0ae8edabef20af6e9c3809998976 Mon Sep 17 00:00:00 2001 From: Carlin MacKenzie Date: Sun, 7 Jun 2020 11:30:21 -0400 Subject: [PATCH 2/3] reset bamboo --- src/activities/event/1F38D.svg | 144 ++++++++++++++------------------- 1 file changed, 59 insertions(+), 85 deletions(-) diff --git a/src/activities/event/1F38D.svg b/src/activities/event/1F38D.svg index 526d06c1e4..9bf0c24c98 100644 --- a/src/activities/event/1F38D.svg +++ b/src/activities/event/1F38D.svg @@ -1,93 +1,67 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + - + - \ No newline at end of file + From 082165a50542a7396fb350cb22d8efa079fa0005 Mon Sep 17 00:00:00 2001 From: Carlin MacKenzie Date: Sun, 7 Jun 2020 16:11:33 -0400 Subject: [PATCH 3/3] different strategy, use svgo on finish --- helpers/add-background.js | 58 +++++++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/helpers/add-background.js b/helpers/add-background.js index 60e0c89842..515c44b78d 100644 --- a/helpers/add-background.js +++ b/helpers/add-background.js @@ -1,9 +1,9 @@ #!/usr/bin/env node -'use strict'; const path = require('path'); const fs = require('fs'); +const SVGO = require('svgo'); const openmojis = require("../data/openmoji.json"); @@ -11,45 +11,55 @@ const { createDoc } = require('../test/utils/utils'); -const directory = 'srctemp/'; -console.log('doing stuff') +svgo = new SVGO(); + openmojis.forEach(emoji => { const svgFile = path.join("src", emoji.group, emoji.subgroups, emoji.hexcode + '.svg') const doc = createDoc(emoji); const root = doc.querySelector("#emoji") + // create background and insert it const backgroundGroup = doc.createElement('g') - backgroundGroup.setAttribute('id', "background") - backgroundGroup.setAttribute('xmlns', "http://www.w3.org/2000/svg") + backgroundGroup.setAttribute('id', "white-padding") + backgroundGroup.setAttribute('stroke-linecap', "round") + backgroundGroup.setAttribute('stroke-miterlimit', "10") + backgroundGroup.setAttribute('stroke-width', "6") + backgroundGroup.setAttribute('stroke', "#fff") + backgroundGroup.setAttribute('fill', "none") + backgroundGroup.setAttribute('stroke-linejoin', "round") const beforeNode = doc.querySelector("#grid").nextSibling root.insertBefore(backgroundGroup, beforeNode) - const lineLayer = doc.querySelector("#line") - - const supplementLayer = doc.querySelector("#line-supplement") - const lineDup = lineLayer.cloneNode(true) + // duplicate all but grid + var nongrid = doc.querySelectorAll('svg > :not(#grid):not(#white-padding)'); + console.log(nongrid.length); + for (var value of nongrid.values()) { + console.log(value.id); - while (lineDup.children.length) { - lineDup.children[0].setAttribute('stroke-width', "6") - lineDup.children[0].setAttribute('stroke', "#fff") - backgroundGroup.appendChild(lineDup.firstChild); + backgroundGroup.appendChild(value.cloneNode(true)) } - if (supplementLayer) { - const supplementDup = supplementLayer.cloneNode(true) - - while (supplementDup.children.length) { - supplementDup.children[0].setAttribute('stroke-width', "6") - supplementDup.children[0].setAttribute('stroke', "#fff") - backgroundGroup.appendChild(supplementDup.firstChild); - } + // remove fill and stroke attributes + var items = backgroundGroup.getElementsByTagName("*"); + for (let item of items) { + item.removeAttribute("fill"); + item.removeAttribute("stroke"); + item.removeAttribute("stroke-linecap"); + item.removeAttribute("stroke-linejoin"); + item.removeAttribute("stroke-miterlimit"); + item.removeAttribute("stroke-width"); } - fs.writeFile(svgFile, doc.documentElement.querySelector("svg").outerHTML, function (err) { - if (err) return console.log(err); - console.log('Successful'); + svgo.optimize(doc.documentElement.querySelector("svg").outerHTML).then(function (result) { + svgo.optimize(result.data).then(function (result) { + + fs.writeFile(svgFile, result.data, function (err) { + if (err) return console.log(err); + console.log('Successful'); + }); + }); }); }) \ No newline at end of file