From aef10b25c9494433358c774eb9c2b3c6dc202756 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcus=20F=C3=B6rster?= Date: Sun, 25 Feb 2024 15:11:24 +0100 Subject: [PATCH 1/2] shorten SVG inline syntax --- src/renderers/svg.js | 102 +++++++++++++++++++------------------------ 1 file changed, 46 insertions(+), 56 deletions(-) diff --git a/src/renderers/svg.js b/src/renderers/svg.js index 33d3b0bc..bba880fc 100644 --- a/src/renderers/svg.js +++ b/src/renderers/svg.js @@ -20,8 +20,7 @@ class SVGRenderer{ var encodingOptions = merge(this.options, encoding.options); var group = this.createGroup(currentX, encodingOptions.marginTop, this.svg); - - this.setGroupOptions(group, encodingOptions); + group.setAttribute("fill", encodingOptions.lineColor); this.drawSvgBarcode(group, encodingOptions, encoding); this.drawSVGText(group, encodingOptions, encoding); @@ -32,7 +31,7 @@ class SVGRenderer{ prepareSVG(){ // Clear the SVG - while (this.svg.firstChild) { + while (this.svg.firstChild){ this.svg.removeChild(this.svg.firstChild); } @@ -44,9 +43,7 @@ class SVGRenderer{ this.setSvgAttributes(width, maxHeight); if(this.options.background){ - this.drawRect(0, 0, width, maxHeight, this.svg).setAttribute( - "style", "fill:" + this.options.background + ";" - ); + this.drawRect(0, 0, "100%", "100%", this.svg).setAttribute("fill", this.options.background); } } @@ -83,82 +80,75 @@ class SVGRenderer{ } drawSVGText(parent, options, encoding){ - var textElem = this.document.createElementNS(svgns, 'text'); - // Draw the text if displayValue is set - if(options.displayValue){ - var x, y; + if(!options.displayValue){ + return; + } - textElem.setAttribute("style", - "font:" + options.fontOptions + " " + options.fontSize + "px " + options.font - ); + var textElem = this.document.createElementNS(svgns, "text"); + var x, y; - if(options.textPosition == "top"){ - y = options.fontSize - options.textMargin; - } - else{ - y = options.height + options.textMargin + options.fontSize; - } + if(options.textPosition == "top"){ + y = options.fontSize - options.textMargin; + } + else{ + y = options.height + options.textMargin + options.fontSize; + } - // Draw the text in the correct X depending on the textAlign option - if(options.textAlign == "left" || encoding.barcodePadding > 0){ - x = 0; - textElem.setAttribute("text-anchor", "start"); - } - else if(options.textAlign == "right"){ - x = encoding.width - 1; - textElem.setAttribute("text-anchor", "end"); - } - // In all other cases, center the text - else{ - x = encoding.width / 2; - textElem.setAttribute("text-anchor", "middle"); - } + // Draw the text in the correct X depending on the textAlign option + if(options.textAlign == "left" || encoding.barcodePadding > 0){ + x = 0; + textElem.setAttribute("text-anchor", "start"); + } + else if(options.textAlign == "right"){ + x = encoding.width - 1; + textElem.setAttribute("text-anchor", "end"); + } + // In all other cases, center the text + else{ + x = encoding.width / 2; + textElem.setAttribute("text-anchor", "middle"); + } - textElem.setAttribute("x", x); - textElem.setAttribute("y", y); + textElem.setAttribute("x", x); + textElem.setAttribute("y", y); - textElem.appendChild(this.document.createTextNode(encoding.text)); + textElem.setAttribute("style", "font:" + + (options.fontOptions + " " + options.fontSize + "px " + options.font).trim() + ); - parent.appendChild(textElem); - } + textElem.appendChild(this.document.createTextNode(encoding.text)); + + parent.appendChild(textElem); } setSvgAttributes(width, height){ var svg = this.svg; - svg.setAttribute("width", width + "px"); - svg.setAttribute("height", height + "px"); - svg.setAttribute("x", "0px"); - svg.setAttribute("y", "0px"); - svg.setAttribute("viewBox", "0 0 " + width + " " + height); svg.setAttribute("xmlns", svgns); - svg.setAttribute("version", "1.1"); + svg.setAttribute("viewBox", "0 0 " + width + " " + height); - svg.setAttribute("style", "transform: translate(0,0)"); + svg.setAttribute("width", width); + svg.setAttribute("height", height); } createGroup(x, y, parent){ - var group = this.document.createElementNS(svgns, 'g'); - group.setAttribute("transform", "translate(" + x + ", " + y + ")"); + var group = this.document.createElementNS(svgns, "g"); + + group.setAttribute("transform", "translate(" + x + "," + y + ")"); parent.appendChild(group); return group; } - setGroupOptions(group, options){ - group.setAttribute("style", - "fill:" + options.lineColor + ";" - ); - } - drawRect(x, y, width, height, parent){ - var rect = this.document.createElementNS(svgns, 'rect'); + var rect = this.document.createElementNS(svgns, "rect"); + + if(x){rect.setAttribute("x", x);} + if(y){rect.setAttribute("y", y);} - rect.setAttribute("x", x); - rect.setAttribute("y", y); rect.setAttribute("width", width); rect.setAttribute("height", height); From 558b6e972d9a7501d07868ae870d047d63b9ed83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcus=20F=C3=B6rster?= Date: Sun, 25 Feb 2024 17:57:07 +0100 Subject: [PATCH 2/2] ignore SVG default colors --- src/renderers/svg.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/renderers/svg.js b/src/renderers/svg.js index bba880fc..989e52a4 100644 --- a/src/renderers/svg.js +++ b/src/renderers/svg.js @@ -15,12 +15,22 @@ class SVGRenderer{ var currentX = this.options.marginLeft; this.prepareSVG(); + + // Create Background IF not (SVG default) `transparent` + if(!this.options.background.match(/^(transparent|#[0-9a-f]{3}0|#[0-9a-f]{6}0{2})$/im)){ + this.drawRect(0, 0, "100%", "100%", this.svg).setAttribute("fill", this.options.background); + } + for(let i = 0; i < this.encodings.length; i++){ var encoding = this.encodings[i]; var encodingOptions = merge(this.options, encoding.options); var group = this.createGroup(currentX, encodingOptions.marginTop, this.svg); - group.setAttribute("fill", encodingOptions.lineColor); + + // Set color IF not (SVG default) `black` + if(!encodingOptions.lineColor.match(/^(black|#0{3}f?|#0{6}(?:f{2})?)$/im)){ + group.setAttribute("fill", encodingOptions.lineColor); + } this.drawSvgBarcode(group, encodingOptions, encoding); this.drawSVGText(group, encodingOptions, encoding); @@ -31,9 +41,7 @@ class SVGRenderer{ prepareSVG(){ // Clear the SVG - while (this.svg.firstChild){ - this.svg.removeChild(this.svg.firstChild); - } + this.svg.replaceChildren(); calculateEncodingAttributes(this.encodings, this.options); var totalWidth = getTotalWidthOfEncodings(this.encodings); @@ -41,10 +49,6 @@ class SVGRenderer{ var width = totalWidth + this.options.marginLeft + this.options.marginRight; this.setSvgAttributes(width, maxHeight); - - if(this.options.background){ - this.drawRect(0, 0, "100%", "100%", this.svg).setAttribute("fill", this.options.background); - } } drawSvgBarcode(parent, options, encoding){