Cleanup & bugfixes

INSTALL.md

@@ -0,0 +1,13 @@
+
+# WIP
+
+You can use `npm` during your tests, but you can't build the app with it. Instead, you will need to use `yarn` in order to flatten the dependencies before running the build.
+
+- Clone the repo
+- Run `yarn install` to fetch dependencies
+- Run `yarn run nkmjs start-debug` to launch the Electron app in debug mode
+    - Most of the app' code is under the `app/js` folder.
+    - Use `Ctrl + R` to refresh the Electron debug container when you've made change to the source code.
+
+- Run `yarn run nkmjs build` to build the app.
+    - Builds will be added to the `builds/dekstop/{plateform}` folder, created during the process.

README.md

@@ -25,6 +25,7 @@ MkFont is under active development, have a look to the repo [issues](https://git
 
 ## Tech
 MkFont is built with [NKMjs](https://github.com/Nebukam/nkmjs) and runs with [Electron](https://github.com/electron/electron).
+[`INSTALL.md`] — how to build the app on your machine
 
 ## Kudos
 MkFont wouldn't be possible if not for [@fontello](https://github.com/fontello) folks sharing their magic : the app is primarily built around [svg2ttf](https://github.com/fontello/svg2ttf) & [svgpath](https://github.com/fontello/svgpath).  

app/js/data/enums.js

@@ -39,12 +39,14 @@ class ENUMS {
     ]);
 
     static BOUNDS_OUTSIDE = 0;
-    static BOUNDS_MIXED = 1;
+    static BOUNDS_MIXED_VER = 1;
     static BOUNDS_INSIDE = 2;
+    static BOUNDS_MIXED_HOR = 3;
 
     static BOUNDS = nkm.data.catalogs.CreateFrom({ name: `Transform reference`, autoSort: false }, [
         { name: `Imported bounds`, [nkm.com.IDS.VALUE]: this.BOUNDS_OUTSIDE, icon: 'bounds-outside' },
-        { name: `Mixed bounds`, [nkm.com.IDS.VALUE]: this.BOUNDS_MIXED, icon: 'bounds-mixed' },
+        { name: `Mixed bounds vertical`, [nkm.com.IDS.VALUE]: this.BOUNDS_MIXED_VER, icon: 'bounds-mixed' },
+        { name: `Mixed bounds horizontal`, [nkm.com.IDS.VALUE]: this.BOUNDS_MIXED_HOR, icon: 'bounds-mixed-hor' },
         { name: `Glyph bounds`, [nkm.com.IDS.VALUE]: this.BOUNDS_INSIDE, icon: 'bounds-inside' },
     ]);
 
@@ -196,14 +198,11 @@ class ENUMS {
 
     //
 
-    static LYR_BOUNDS_OUTSIDE = 0;
-    static LYR_BOUNDS_MIXED = 1;
-    static LYR_BOUNDS_INSIDE = 2;
-
     static LYR_BOUNDS = nkm.data.catalogs.CreateFrom({ name: `Transform reference`, autoSort: false }, [
-        { name: `Imported bounds`, [nkm.com.IDS.VALUE]: this.LYR_BOUNDS_OUTSIDE, icon: 'bounds-outside' },
-        { name: `Mixed bounds`, [nkm.com.IDS.VALUE]: this.LYR_BOUNDS_MIXED, icon: 'bounds-mixed' },
-        { name: `Glyph bounds`, [nkm.com.IDS.VALUE]: this.LYR_BOUNDS_INSIDE, icon: 'bounds-inside' },
+        { name: `Imported bounds`, [nkm.com.IDS.VALUE]: this.BOUNDS_OUTSIDE, icon: 'bounds-outside' },
+        { name: `Mixed bounds vertical`, [nkm.com.IDS.VALUE]: this.BOUNDS_MIXED_VER, icon: 'bounds-mixed' },
+        { name: `Mixed bounds horizontal`, [nkm.com.IDS.VALUE]: this.BOUNDS_MIXED_HOR, icon: 'bounds-mixed-hor' },
+        { name: `Glyph bounds`, [nkm.com.IDS.VALUE]: this.BOUNDS_INSIDE, icon: 'bounds-inside' },
     ]);
 
     static LYR_SCALE = nkm.data.catalogs.CreateFrom({ name: `Scale`, autoSort: false }, [

app/js/data/family-data-block.js

@@ -473,6 +473,8 @@ class FamilyDataBlock extends SimpleDataEx {
         this._refGlyph._defaultGlyph.Reset(false, true);
         this._refGlyph._defaultGlyph._ClearLayers();
 
+        this._searchSettings.Reset(false, true);
+
         /////
         this._glyphs.Clear();
         this._glyphsMap = {};

app/js/data/glyph-layer-data-block.js

@@ -47,7 +47,7 @@ class GlyphLayerDataBlock extends SimpleDataEx {
 
         // Transform settings
         p_values[IDS.LYR_USE_PREV_LAYER] = { value: false };
-        p_values[IDS.TR_LYR_BOUNDS_MODE] = { value: ENUMS.LYR_BOUNDS_OUTSIDE };
+        p_values[IDS.TR_LYR_BOUNDS_MODE] = { value: ENUMS.BOUNDS_OUTSIDE };
         p_values[IDS.TR_BOUNDS_MODE] = { value: ENUMS.BOUNDS_OUTSIDE };
         p_values[IDS.TR_LYR_SCALE_MODE] = { value: ENUMS.SCALE_MANUAL };
         p_values[IDS.TR_LYR_SCALE_FACTOR] = { value: 1 };

app/js/data/settings-transforms-data-block.js

@@ -24,7 +24,7 @@ class TransformSettingsDataBlock extends SimpleDataEx {
 
     _ResetValues(p_values) {
 
-        p_values[IDS.TR_BOUNDS_MODE] = { value: ENUMS.BOUNDS_MIXED };
+        p_values[IDS.TR_BOUNDS_MODE] = { value: ENUMS.BOUNDS_MIXED_VER };
         p_values[IDS.TR_SCALE_MODE] = { value: ENUMS.SCALE_ASCENDER };
         p_values[IDS.TR_SCALE_FACTOR] = { value: 1 };
         p_values[IDS.TR_NRM_FACTOR] = { value: 0 };

app/js/data/ttf-import.js

@@ -191,7 +191,7 @@ class TTFImport {
                 [IDS.HEIGHT]:gH,
                 transforms: {
                     // Make sure to push defaults
-                    [IDS.TR_BOUNDS_MODE]: ENUMS.BOUNDS_MIXED,
+                    [IDS.TR_BOUNDS_MODE]: ENUMS.BOUNDS_MIXED_VER,
                     [IDS.TR_SCALE_MODE]: ENUMS.SCALE_ASCENDER,
                     [IDS.TR_SCALE_FACTOR]: 1,
                     [IDS.TR_VER_ALIGN]: ENUMS.VALIGN_BASELINE,

app/js/editors/inspectors/glyph-iitem.js

@@ -131,7 +131,7 @@ class GlyphVariantInspectorItem extends base {
                     group: `read`
                 },
                 {
-                    icon: `reset`, htitle: `Reset existing glyph or create an empty one if it doesn't exists.\n---\n+ [ Shift ] Also create components matching character decomposition.\n+ [ Alt ] Reset the glyph path while preserving everything else.\n[ Shift + Alt ] Create components & missing glyphs recursively.`,
+                    icon: `reset`, htitle: `Reset existing glyph or create an empty one if it doesn't exists.\n---\n+ [ Shift ] Also create components matching character decomposition.\n+ [ Alt ] Reset the glyph path while preserving everything else.\n+ [ Shift + Alt ] Create components & missing glyphs recursively.`,
                     variant: ui.FLAGS.MINIMAL,
                     trigger: { fn: () => { this.editor.cmdGlyphClear.Execute(this._data); } },
                     group: `read`, member: { owner: this, id: `_glyphClearBtn` }

app/js/editors/viewports/glyph-group-viewport.js

@@ -18,6 +18,12 @@ const GlyphGroupHeader = require(`./glyph-group-header`);
 const GlyphGroupFooter = require(`./glyph-group-footer`);
 const GlyphGroupSearch = require(`./glyph-group-search`);
 
+const __norange = {
+    name: 'No range', typeTag: `Custom`, count: 0,
+    icon: 'text-style', isDynamic: true,
+    fetchList: () => { return []; }
+};
+
 const base = nkm.datacontrols.ControlView; //ui.views.View
 class GlyphGroupViewport extends base {
     constructor() { super(); }
@@ -170,7 +176,7 @@ class GlyphGroupViewport extends base {
         this._searchSettings = p_value;
         this._searchObserver.ObserveOnly(p_value);
         this._search.data = p_value;
-        //this._OnSearchToggled();
+        this._OnSearchToggled();
     }
 
     set displayRange(p_value) {
@@ -318,7 +324,7 @@ class GlyphGroupViewport extends base {
 
     _ReloadList() {
         let range = this._displayRange;
-        this._displayRange = null;
+        this.displayRange = __norange;
         this.displayRange = range;
     }
 

app/js/main.js

@@ -173,7 +173,7 @@ class MKFont extends nkm.app.AppBase {
 
     _FamilyFromTTF() {
 
-        let family = mkfData.TTF.FamilyFromTTF(fs.readFileSync(`./assets-dev/${__fontName}.ttf`));
+        let family = mkfData.TTF.FamilyFromTTF(fs.readFileSync(`./assets-dev/ttfs/${__fontName}.ttf`));
 
         let gCount = family._glyphs.count;
         family._glyphs.ForEach(glyph => {

app/js/operations/svg-operations.js

@@ -445,40 +445,42 @@ class SVGOperations {
                 case ENUMS.SKR_ORDER_Y_X_R: this._SkewY(tr, sky); this._SkewX(tr, skx); this._Rot(tr, rot, ranchor, widthRef, heightRef); break;
             }
 
-            if (refMode == ENUMS.BOUNDS_INSIDE || refMode == ENUMS.BOUNDS_MIXED) {
+            if (refMode == ENUMS.BOUNDS_INSIDE || refMode == ENUMS.BOUNDS_MIXED_VER) {
                 // This alone, super expensive ;_;
                 bbox = this.GetBBox(pathTransform.toString());
             }
 
         }
 
-
-        if (refMode == ENUMS.BOUNDS_INSIDE) {
-            fitH = heightRef = bbox.height;
-            fitW = widthRef = bbox.width;
-            pathTransform
-                .translate(-bbox.x, -bbox.y)
-                .toString();
-        } else if (refMode == ENUMS.BOUNDS_MIXED) {
-            fitW = widthRef = bbox.width;
-            pathTransform
-                .translate(-bbox.x, 0)
-                .toString();
+        switch (refMode) {
+            case ENUMS.BOUNDS_INSIDE:
+                fitH = heightRef = bbox.height;
+                fitW = widthRef = bbox.width;
+                pathTransform.translate(-bbox.x, -bbox.y);
+                break;
+            case ENUMS.BOUNDS_MIXED_VER:
+                fitW = widthRef = bbox.width;
+                pathTransform.translate(-bbox.x, 0);
+                break;
+            case ENUMS.BOUNDS_MIXED_HOR:
+                fitH = heightRef = bbox.height;
+                pathTransform.translate(0, -bbox.y);
+                break;
         }
 
         if (mirror != ENUMS.MIRROR_NONE) {
 
             switch (mirror) {
                 case ENUMS.MIRROR_H:
-                    pathTransform.scale(-1, 1).translate(fitW, 0).toString();
+                    pathTransform.scale(-1, 1).translate(fitW, 0);
                     doReverse = true;
                     break;
                 case ENUMS.MIRROR_V:
-                    pathTransform.scale(1, -1).translate(0, fitH).toString();
+                    pathTransform.scale(1, -1).translate(0, fitH);
                     doReverse = true;
                     break;
                 case ENUMS.MIRROR_H_AND_V:
-                    pathTransform.scale(-1, -1).translate(fitW, fitH).toString();
+                    pathTransform.scale(-1, -1).translate(fitW, fitH);
                     break;
             }
         }
@@ -678,32 +680,38 @@ class SVGOperations {
         }
 
         switch (p_settings.Get(IDS.TR_LYR_BOUNDS_MODE)) {
-            case ENUMS.LYR_BOUNDS_OUTSIDE:
-                break;
-            case ENUMS.LYR_BOUNDS_MIXED:
+            case ENUMS.BOUNDS_INSIDE:
                 offsetX = p_context.bbox.x;
+                offsetY = p_context.bbox.y;
                 ctxW = p_context.bbox.width;
+                ctxH = p_context.bbox.height;
                 break;
-            case ENUMS.LYR_BOUNDS_INSIDE:
+            case ENUMS.BOUNDS_MIXED_VER:
                 offsetX = p_context.bbox.x;
-                offsetY = p_context.bbox.y;
                 ctxW = p_context.bbox.width;
+                break;
+            case ENUMS.BOUNDS_MIXED_HOR:
+                offsetY = p_context.bbox.y;
                 ctxH = p_context.bbox.height;
                 break;
         }
 
         if (boundMode != ENUMS.BOUNDS_OUTSIDE) {
             if (!vbbox) { vbbox = this.GetBBox(path); }
             switch (boundMode) {
-                case ENUMS.BOUNDS_MIXED:
-                    pathTransform.translate(-vbbox.x, 0);
-                    pWidth = vbbox.width;
-                    break;
                 case ENUMS.BOUNDS_INSIDE:
                     pathTransform.translate(-vbbox.x, -vbbox.y);
                     pWidth = vbbox.width;
                     pHeight = vbbox.height;
                     break;
+                case ENUMS.BOUNDS_MIXED_VER:
+                    pathTransform.translate(-vbbox.x, 0);
+                    pWidth = vbbox.width;
+                    break;
+                case ENUMS.BOUNDS_MIXED_HOR:
+                    pathTransform.translate(0, -vbbox.y);
+                    pHeight = vbbox.height;
+                    break;
             }
         }
 

app/js/widgets/tr-layer-inspector.js

@@ -36,10 +36,10 @@ class LayerTransformSettingsInspector extends base {
         },
 
         { cl: ControlHeader, options: { label: `Context`, label2: `Layer` }, css: 'hdr' },
-        { options: { propertyId: mkfData.IDS.TR_ANCHOR, inputOnly: true }, css: 'vsmall' },
+        { options: { propertyId: mkfData.IDS.TR_ANCHOR, inputOnly: true }, css: 'vvsmall' },
         { options: { propertyId: mkfData.IDS.TR_LYR_BOUNDS_MODE, inputOnly: true }, css: 'small' },
 
-        { options: { propertyId: mkfData.IDS.TR_LYR_SELF_ANCHOR, inputOnly: true }, css: 'vsmall' },
+        { options: { propertyId: mkfData.IDS.TR_LYR_SELF_ANCHOR, inputOnly: true }, css: 'vvsmall' },
         { options: { propertyId: mkfData.IDS.TR_BOUNDS_MODE, inputOnly: true }, css: 'small' },
 
         //{ options: { propertyId: mkfData.IDS.TR_LYR_SCALE_MODE, inputOnly: true }, css: 'small' },
@@ -101,6 +101,7 @@ class LayerTransformSettingsInspector extends base {
             },
             '.small': { 'flex': '1 1 25%' },
             '.vsmall': { 'flex': '1 1 15%' },
+            '.vvsmall': { 'flex': '1 1 3%' },
             '.large': { 'flex': '1 1 75%' },
             '.btn': {
                 'flex': '0 0 32px',