make stroke scaling configurable (danmarshall#33)

svg-beauty · Jul 25, 2022 · e9c64f5 · e9c64f5
1 parent f36b78e
commit e9c64f5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -89,6 +89,10 @@ <h1>Google Font to Svg Path</h1>
                 <label>Stroke Width: <input type="text" id="input-stroke-width" value="0.25mm" class="input-stroke-width input"/></label>
             </div>
 
+            <div class="input-holder">
+                <label>Non-scaling stroke: <input type="checkbox" id="input-stroke-non-scaling" checked class="input-stroke-non-scaling input"/></label>
+            </div>
+
             <div class="input-holder">
                 <label>Fill rule: 
                     <select id="input-fill-rule" class="input">

diff --git a/index.js b/index.js
@@ -45,7 +45,7 @@ var App = /** @class */ (function () {
                 size = parseFloat(_this.sizeInput.value);
             if (!size)
                 size = 100;
-            _this.render(_this.selectFamily.selectedIndex, _this.selectVariant.selectedIndex, _this.textInput.value, size, _this.unionCheckbox.checked, _this.filledCheckbox.checked, _this.kerningCheckbox.checked, _this.separateCheckbox.checked, parseFloat(_this.bezierAccuracy.value) || undefined, _this.selectUnits.value, _this.fillInput.value, _this.strokeInput.value, _this.strokeWidthInput.value, _this.fillRuleInput.value);
+            _this.render(_this.selectFamily.selectedIndex, _this.selectVariant.selectedIndex, _this.textInput.value, size, _this.unionCheckbox.checked, _this.filledCheckbox.checked, _this.kerningCheckbox.checked, _this.separateCheckbox.checked, parseFloat(_this.bezierAccuracy.value) || undefined, _this.selectUnits.value, _this.fillInput.value, _this.strokeInput.value, _this.strokeWidthInput.value, _this.strokeNonScalingCheckbox.checked, _this.fillRuleInput.value);
         };
         this.loadVariants = function () {
             _this.selectVariant.options.length = 0;
@@ -159,6 +159,7 @@ var App = /** @class */ (function () {
         this.fillInput = this.$('#input-fill');
         this.strokeInput = this.$('#input-stroke');
         this.strokeWidthInput = this.$('#input-stroke-width');
+        this.strokeNonScalingCheckbox = this.$('#input-stroke-non-scaling');
         this.fillRuleInput = this.$("#input-fill-rule");
         // Init units select.
         Object.values(makerjs.unitType).forEach(function (unit) { return _this.addOption(_this.selectUnits, unit); });
@@ -178,6 +179,7 @@ var App = /** @class */ (function () {
         var fillInput = urlSearchParams.get('input-fill');
         var strokeInput = urlSearchParams.get('input-stroke');
         var strokeWidthInput = urlSearchParams.get('input-stroke-width');
+        var strokeNonScalingCheckbox = urlSearchParams.get('input-stroke-non-scaling');
         var fillRuleInput = urlSearchParams.get('input-fill-rule');
         if (selectFamily !== "" && selectFamily !== null)
             this.selectFamily.value = selectFamily;
@@ -205,6 +207,8 @@ var App = /** @class */ (function () {
             this.strokeInput.value = strokeInput;
         if (strokeWidthInput !== "" && strokeWidthInput !== null)
             this.strokeWidthInput.value = strokeWidthInput;
+        if (strokeNonScalingCheckbox !== "" && strokeNonScalingCheckbox !== null)
+            this.strokeNonScalingCheckbox.checked = strokeNonScalingCheckbox === "true" ? true : false;
         if (fillRuleInput !== "" && fillRuleInput !== null)
             this.fillRuleInput.value = fillRuleInput;
     };
@@ -229,8 +233,9 @@ var App = /** @class */ (function () {
                                                                 this.strokeInput.onkeyup =
                                                                     this.strokeWidthInput.onchange =
                                                                         this.strokeWidthInput.onkeyup =
-                                                                            this.fillRuleInput.onchange =
-                                                                                this.renderCurrent;
+                                                                            this.strokeNonScalingCheckbox.onchange =
+                                                                                this.fillRuleInput.onchange =
+                                                                                    this.renderCurrent;
         // Is triggered on the document whenever a new color is picked
         document.addEventListener("coloris:pick", debounce(this.renderCurrent));
         this.copyToClipboardBtn.onclick = this.copyToClipboard;
@@ -261,7 +266,7 @@ var App = /** @class */ (function () {
         };
         xhr.send();
     };
-    App.prototype.callMakerjs = function (font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, fillRule) {
+    App.prototype.callMakerjs = function (font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule) {
         //generate the text using a font
         var textModel = new makerjs.models.Text(font, text, size, union, false, bezierAccuracy, { kerning: kerning });
         if (separate) {
@@ -273,24 +278,25 @@ var App = /** @class */ (function () {
             fill: filled ? fill : undefined,
             stroke: stroke ? stroke : undefined,
             strokeWidth: strokeWidth ? strokeWidth : undefined,
-            fillRule: fillRule ? fillRule : undefined
+            fillRule: fillRule ? fillRule : undefined,
+            scalingStroke: !strokeNonScaling
         });
         var dxf = makerjs.exporter.toDXF(textModel, { units: units, usePOLYLINE: true });
         this.renderDiv.innerHTML = svg;
         this.renderDiv.setAttribute('data-dxf', dxf);
         this.outputTextarea.value = svg;
     };
-    App.prototype.render = function (fontIndex, variantIndex, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, fillRule) {
+    App.prototype.render = function (fontIndex, variantIndex, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule) {
         var _this = this;
         var f = this.fontList.items[fontIndex];
         var v = f.variants[variantIndex];
         var url = f.files[v].substring(5); //remove http:
         if (this.customFont !== undefined) {
-            this.callMakerjs(this.customFont, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, fillRule);
+            this.callMakerjs(this.customFont, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule);
         }
         else {
             opentype.load(url, function (err, font) {
-                _this.callMakerjs(font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, fillRule);
+                _this.callMakerjs(font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule);
             });
         }
     };

diff --git a/index.ts b/index.ts
@@ -33,6 +33,7 @@ class App {
     private fillInput: HTMLInputElement;
     private strokeInput: HTMLInputElement;
     private strokeWidthInput: HTMLInputElement;
+    private strokeNonScalingCheckbox: HTMLInputElement;
     private fillRuleInput: HTMLSelectElement;
 
     private renderCurrent = () => {
@@ -53,6 +54,7 @@ class App {
             this.fillInput.value,
             this.strokeInput.value,
             this.strokeWidthInput.value,
+            this.strokeNonScalingCheckbox.checked,
             this.fillRuleInput.value,
         );
     };
@@ -170,6 +172,7 @@ class App {
         this.fillInput = this.$('#input-fill') as HTMLInputElement;
         this.strokeInput = this.$('#input-stroke') as HTMLInputElement;
         this.strokeWidthInput = this.$('#input-stroke-width') as HTMLInputElement;
+        this.strokeNonScalingCheckbox = this.$('#input-stroke-non-scaling') as HTMLInputElement;
         this.fillRuleInput = this.$("#input-fill-rule") as HTMLSelectElement;
 
         // Init units select.
@@ -192,6 +195,7 @@ class App {
         var fillInput = urlSearchParams.get('input-fill');
         var strokeInput = urlSearchParams.get('input-stroke');
         var strokeWidthInput = urlSearchParams.get('input-stroke-width');
+        var strokeNonScalingCheckbox = urlSearchParams.get('input-stroke-non-scaling');
         var fillRuleInput = urlSearchParams.get('input-fill-rule');
 
 
@@ -234,6 +238,9 @@ class App {
         if (strokeWidthInput !== "" && strokeWidthInput !== null)
             this.strokeWidthInput.value = strokeWidthInput;
 
+        if (strokeNonScalingCheckbox !== "" && strokeNonScalingCheckbox !== null)
+            this.strokeNonScalingCheckbox.checked = strokeNonScalingCheckbox === "true" ? true : false;
+
         if (fillRuleInput !== "" && fillRuleInput !== null)
             this.fillRuleInput.value = fillRuleInput;
 
@@ -260,6 +267,7 @@ class App {
             this.strokeInput.onkeyup =
             this.strokeWidthInput.onchange =
             this.strokeWidthInput.onkeyup =
+            this.strokeNonScalingCheckbox.onchange =
             this.fillRuleInput.onchange =
             this.renderCurrent
             ;
@@ -301,7 +309,7 @@ class App {
     }
 
     callMakerjs(font: opentype.Font, text: string, size: number, union: boolean, filled: boolean, kerning: boolean, separate: boolean,
-         bezierAccuracy: number, units: string, fill: string, stroke: string, strokeWidth: string, fillRule: FillRule) {
+         bezierAccuracy: number, units: string, fill: string, stroke: string, strokeWidth: string, strokeNonScaling: boolean, fillRule: FillRule) {
         //generate the text using a font
         var textModel = new makerjs.models.Text(font, text, size, union, false, bezierAccuracy, { kerning });
 
@@ -316,6 +324,7 @@ class App {
                 stroke: stroke ? stroke : undefined, 
                 strokeWidth: strokeWidth ? strokeWidth : undefined,
                 fillRule: fillRule ? fillRule : undefined,
+                scalingStroke: !strokeNonScaling,
             });
         var dxf = makerjs.exporter.toDXF(textModel, {units: units, usePOLYLINE: true});
 
@@ -338,6 +347,7 @@ class App {
         fill: string,
         stroke: string,
         strokeWidth: string,
+        strokeNonScaling: boolean,
         fillRule: string,
     ) {
 
@@ -346,10 +356,10 @@ class App {
         var url = f.files[v].substring(5);  //remove http:
 
         if (this.customFont !== undefined) {
-            this.callMakerjs(this.customFont, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, fillRule);
+            this.callMakerjs(this.customFont, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule);
         } else {
             opentype.load(url, (err, font) => {
-                this.callMakerjs(font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, fillRule);
+                this.callMakerjs(font, text, size, union, filled, kerning, separate, bezierAccuracy, units, fill, stroke, strokeWidth, strokeNonScaling, fillRule);
             });
         }
     }