Selection refactor + component flattening

app/js/content-updater.js → app/js/content-manager.js

@@ -2,12 +2,15 @@
 
 const nkm = require(`@nkmjs/core`);
 const u = nkm.u;
+const IDS = require(`./data/ids`);
 
 const SIGNAL = require(`./signal`);
 
-class ContentUpdater extends nkm.com.helpers.SingletonEx {
+class ContentManager extends nkm.com.helpers.SingletonEx {
     constructor() { super(); }
 
+
+
     _Init() {
 
         super._Init();
@@ -22,6 +25,8 @@ class ContentUpdater extends nkm.com.helpers.SingletonEx {
 
     }
 
+    //#region Update
+
     static Push(p_data, p_method) {
         this.instance._Push(p_data, p_method);
     }
@@ -76,6 +81,9 @@ class ContentUpdater extends nkm.com.helpers.SingletonEx {
 
     }
 
+    //#endregion
+
+
 }
 
-module.exports = ContentUpdater;
+module.exports = ContentManager;

app/js/data/enums.js

@@ -228,6 +228,15 @@ class ENUMS {
         { name: `Y, X, R`, [nkm.com.IDS.VALUE]: this.SKR_ORDER_Y_X_R},
     ]);
 
+    static FLATTEN_FIT = 0;
+    static FLATTEN_SMART = 1; //Will vertical fit mode as a reference
+
+    static FLATTEN_MODE = nkm.data.catalogs.CreateFrom({ name: `Transform reference`, autoSort: false }, [
+        { name: `Fit`, [nkm.com.IDS.VALUE]: this.FLATTEN_FIT, icon: 'bounds-outside' },
+        { name: `Smart`, [nkm.com.IDS.VALUE]: this.FLATTEN_SMART, icon: 'bounds-mixed' },
+    ]);
+
+
 }
 
 module.exports = ENUMS;

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

@@ -17,7 +17,7 @@ const ImportSettings = require(`./settings-import-data-block`);
 const SearchSettings = require(`./settings-search-data-block`);
 const LigaImportSettings = require(`./settings-liga-import-data-block`);
 
-const ContentUpdater = require(`../content-updater`);
+const ContentManager = require(`../content-manager`);
 const FamilyFontCache = require(`./family-font-cache`);
 const GlyphVariantRef = require(`./glyph-variant-data-block-reference`);
 
@@ -203,7 +203,7 @@ class FamilyDataBlock extends SimpleDataEx {
 
         this.Broadcast(SIGNAL.GLYPH_ADDED, this, p_glyph);
         p_glyph._OnGlyphAddedToFamily(this);
-        //ContentUpdater.instance.Broadcast(SIGNAL.GLYPH_ADDED, p_glyph);
+        //ContentManager.instance.Broadcast(SIGNAL.GLYPH_ADDED, p_glyph);
 
         //Need a way to find which layer might be referencing this glyph
         this._delayedUpdateReferences.Schedule();
@@ -235,7 +235,7 @@ class FamilyDataBlock extends SimpleDataEx {
 
         this.Broadcast(SIGNAL.GLYPH_REMOVED, this, g);
         g._OnGlyphRemovedFromFamily(this);
-        //ContentUpdater.instance.Broadcast(SIGNAL.GLYPH_REMOVED, g);
+        //ContentManager.instance.Broadcast(SIGNAL.GLYPH_REMOVED, g);
 
         this._delayedUpdateReferences.Schedule();
 

app/js/data/family-font-cache.js

@@ -7,7 +7,7 @@ const u = nkm.u;
 const svg2ttf = require('svg2ttf');
 
 const IDS_PREFS = require(`./ids-prefs`);
-const ContentUpdater = require(`../content-updater`);
+const ContentManager = require(`../content-manager`);
 
 class FamilyFontCache {
     constructor(p_data) {
@@ -20,7 +20,7 @@ class FamilyFontCache {
 
         this._scheduledRebuild = nkm.com.DelayedCall(this._RebuildCache.bind(this), 500);
 
-        ContentUpdater.Watch(nkm.com.SIGNAL.READY, this._OnContentReady, this);
+        ContentManager.Watch(nkm.com.SIGNAL.READY, this._OnContentReady, this);
 
     }
 
@@ -41,7 +41,7 @@ class FamilyFontCache {
 
     _RebuildCache() {
 
-        if (!ContentUpdater.ready) {
+        if (!ContentManager.ready) {
             this._scheduledRebuild.Bump();
             return;
         }

app/js/data/glyph-variant-data-block-reference.js

@@ -10,7 +10,7 @@ const IDS = require(`./ids`);
 const TransformSettings = require(`./settings-transforms-data-block`);
 
 const svgpath = require('svgpath');
-const ContentUpdater = require(`../content-updater`);
+const ContentManager = require(`../content-manager`);
 const UNICODE = require('../unicode');
 const SIGNAL = require('../signal');
 

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

@@ -10,9 +10,10 @@ const IDS = require(`./ids`);
 const TransformSettings = require(`./settings-transforms-data-block`);
 
 const svgpath = require('svgpath');
-const ContentUpdater = require(`../content-updater`);
+const ContentManager = require(`../content-manager`);
 const SIGNAL = require('../signal');
 const INFOS = require('./infos');
+const ENUMS = require(`./enums`);
 
 const domparser = new DOMParser();
 const svgString = `<glyph ${IDS.GLYPH_NAME}="" ${IDS.UNICODE}="" d="" ${IDS.WIDTH}="" ${IDS.HEIGHT}="" ></glyph>`;
@@ -72,6 +73,7 @@ class GlyphVariantDataBlock extends SimpleDataEx {
         //p_values[IDS.H_ORIGIN_Y] = { value: null };
         p_values[IDS.WIDTH] = { value: null, nullable: true };
         p_values[IDS.EXPORTED_WIDTH] = { value: 0 };
+
         //p_values[IDS.V_ORIGIN_X] = { value: null };
         //p_values[IDS.V_ORIGIN_Y] = { value: null };
         p_values[IDS.HEIGHT] = { value: null, nullable: true }; //
@@ -80,6 +82,8 @@ class GlyphVariantDataBlock extends SimpleDataEx {
         p_values[IDS.OUT_OF_BOUNDS] = { value: false };
         p_values[IDS.EMPTY] = { value: false };
         p_values[IDS.DO_EXPORT] = { value: true };
+        p_values[IDS.FLATTEN_LAYERS] = { value: false };
+        p_values[IDS.FLATTEN_MODE] = { value: ENUMS.FLATTEN_SMART };
     }
 
     get layers() { return this._layers; }
@@ -147,10 +151,10 @@ class GlyphVariantDataBlock extends SimpleDataEx {
 
     _ConcatPaths(p_rootPath) {
         if (this._layers.isEmpty) { return p_rootPath; }
-        if (p_rootPath == IDS.EMPTY_PATH_CONTENT) { p_rootPath = ``; }
+        if (IDS.isEmptyPathContent(p_rootPath)) { p_rootPath = ``; }
         this._layers.ForEach((item) => {
             let pathData = item.Get(IDS.PATH);
-            if (pathData && pathData.path != IDS.EMPTY_PATH_CONTENT) { p_rootPath += ` ` + pathData.path; };
+            if (pathData && !IDS.isEmptyPathContent(pathData.path)) { p_rootPath += ` ` + pathData.path; };
         });
         if (p_rootPath.trim() == ``) { p_rootPath = IDS.EMPTY_PATH_CONTENT; }
         return p_rootPath;
@@ -206,7 +210,7 @@ class GlyphVariantDataBlock extends SimpleDataEx {
 
         if (!this._applyScheduled) {
             this._applyScheduled = true;
-            ContentUpdater.Push(this, this._ApplyUpdate);
+            ContentManager.Push(this, this._ApplyUpdate);
         }
 
         //When pushing update, make sure to notify layers that
@@ -244,13 +248,24 @@ class GlyphVariantDataBlock extends SimpleDataEx {
     HasLayer(p_char, p_uni = null) {
 
         if (this._layers.isEmpty) { return false; }
+        return this.TryGetLayer(p_char, p_uni) == null ? false : true;
+
+    }
+
+    TryGetLayer(p_char, p_uni = null) {
+
+        if (this._layers.isEmpty) { return null; }
 
         for (let i = 0, n = this._layers.count; i < n; i++) {
-            let cval = this._layers.At(i).Get(IDS.LYR_CHARACTER_NAME);
-            if (cval == p_char || cval == p_uni) { return true; }
+            let
+                lyr = this._layers.At(i),
+                cval = lyr.Get(IDS.LYR_CHARACTER_NAME);
+
+            if (cval == p_char || cval == p_uni) { return lyr; }
+
         }
 
-        return false;
+        return null;
 
     }
 

app/js/data/ids.js

@@ -18,6 +18,7 @@ class IDS {
     static infos = {};
 
     static EMPTY_PATH_CONTENT = `M 0 0 L 0 0 z`;
+    static isEmptyPathContent(p_path) { return p_path == this.EMPTY_PATH_CONTENT || p_path == `M0 0L0 0z`; }
 
     //#region family properties 
 
@@ -331,6 +332,9 @@ class IDS {
 
     static SHOW_ALL_LAYERS = 'show-all-layers';
 
+    static FLATTEN_LAYERS = 'flatten-layers';
+    static FLATTEN_MODE = 'flatten-mode';
+
     static {
 
         this.infos[this.COLOR_PREVIEW] = {
@@ -374,6 +378,22 @@ class IDS {
             desc: `Show all shared components (at least used twice), not just the ones shared by every glyph in the selection.`
         };
 
+        this.infos[this.FLATTEN_LAYERS] = {
+            recompute: true,
+            label: `Flatten comps`,
+            inputType: inputs.Boolean,
+            inputOptions: { size: ui.FLAGS.SIZE_XS },
+            desc: `Will flatten layers as if they were a single block.\nUses EM Square as transform space.`
+        };
+        this.infos[this.FLATTEN_MODE] = {
+            inputType: inputs.Select,
+            recompute: true,
+            enum: ENUMS.WEIGHTS,
+            label: `Flattening mode`,
+            inputOptions: { catalog: ENUMS.FLATTEN_MODE, itemKey: nkm.com.IDS.VALUE, placeholder: `· · ·` },
+            desc: `Defines how the boundaries of the flattened result are computed`
+        };
+
     }
 
     //#endregion
@@ -404,8 +424,6 @@ class IDS {
     static TR_SKEW_Y = 'skew-y';
     static TR_SKEW_ROT_ORDER = 'skew-rot-order';
 
-
-
     static {
 
         this.infos[this.TR_BOUNDS_MODE] = {

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

@@ -106,6 +106,7 @@ class FamilyDataBlockJSONSerializer extends nkm.data.serialization.json.DataBloc
                 // cleanup runtime-computed values
                 delete variantObj[__ID_values][IDS.PATH];
                 delete variantObj[__ID_values][IDS.OUT_OF_BOUNDS];
+                delete variantObj[__ID_values][IDS.EXPORTED_WIDTH];
 
                 variants.push(variantObj);
             }

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

@@ -72,6 +72,8 @@ class TransformSettingsDataBlock extends SimpleDataEx {
         if (!pathData || !this._variant._family) { return; }
 
         let
+            flattenLayers = this._variant.Get(IDS.FLATTEN_LAYERS),
+            autoW = this.Get(IDS.TR_AUTO_WIDTH),
             rw = this._variant.Resolve(IDS.WIDTH),
             path = SVGOPS.FitPath(this, this._variant.family._contextInfos, pathData),
             w = 0,
@@ -88,11 +90,16 @@ class TransformSettingsDataBlock extends SimpleDataEx {
             w = controlVariant.Get(IDS.EXPORTED_WIDTH);
             h = controlVariant.Resolve(IDS.HEIGHT);
         } else {
-            if (this.Get(IDS.TR_AUTO_WIDTH)) {
-                w = path.width;
-            } else {
+            if (flattenLayers) {
                 w = rw;
+            } else {
+                if (autoW) {
+                    w = path.width;
+                } else {
+                    w = rw;
+                }
             }
+
         }
 
         this._variant._computedPath = path;
@@ -145,16 +152,23 @@ class TransformSettingsDataBlock extends SimpleDataEx {
             });
         }
 
-        let
-            pathConcat = this._variant._ConcatPaths(path.path),
-            oob = (bbmin < -24000 || bbmax < -24000 || bbmin > 24000 || bbmax > 24000);
+        let pathConcat = this._variant._ConcatPaths(path.path);
+        if (flattenLayers) {
+            let flatStats = SVGOPS.FlatSVGStats(pathConcat, this._variant._computedPath, this._variant, w, h);
+            let flatFit = SVGOPS.FitPath(this, this._variant.family._contextInfos, flatStats);
+            pathConcat = flatFit.path;
+            w = autoW ? flatFit.width : rw;
+            this._variant._computedPath = flatFit;
+        }
+
+        let oob = (bbmin < -24000 || bbmax < -24000 || bbmin > 24000 || bbmax > 24000);
 
         this._variant.BatchSet({
             //[IDS.WIDTH]: rw,
             [IDS.EXPORTED_WIDTH]: w,
             [IDS.PATH]: pathConcat, //path.pathReversed || path.path,
             [IDS.OUT_OF_BOUNDS]: oob,
-            [IDS.EMPTY]: pathConcat === IDS.EMPTY_PATH_CONTENT,
+            [IDS.EMPTY]: IDS.isEmptyPathContent(pathConcat),
         });
 
     }

app/js/editors/editor-font-footer.js

@@ -4,7 +4,7 @@ const nkm = require(`@nkmjs/core`);
 const u = nkm.u;
 const ui = nkm.ui;
 
-const ContentUpdater = require(`../content-updater`);
+const ContentManager = require(`../content-manager`);
 const SIGNAL = require(`../signal`);
 const mkfData = require(`../data`);
 const mkfWidgets = require(`../widgets`);
@@ -15,7 +15,7 @@ class FontEditorFooter extends base {
 
     _Init() {
         super._Init();
-        ContentUpdater.instance
+        ContentManager.instance
             .Watch(nkm.com.SIGNAL.UPDATED, this._OnContentUpdate, this)
             .Watch(nkm.com.SIGNAL.READY, this._OnContentUpdateComplete, this);
 

app/js/editors/editor-font.js

@@ -46,7 +46,7 @@ class FontEditor extends base {
 
         this._pangramInspector = null;
 
-        //const ContentUpdater = require(`../content-updater`);
+        //const ContentManager = require(`../content-manager`);
         this._dataObserver
             .Hook(nkm.com.SIGNAL.VALUE_CHANGED, this._OnDataValueChanged, this)
             .Hook(SIGNAL.GLYPH_ADDED, this._OnGlyphAdded, this)
@@ -83,7 +83,6 @@ class FontEditor extends base {
         this.cmdGlyphDelete = this._commands.Create(mkfCmds.GlyphDelete, { shortcut: this.shortcuts.Create("Delete").Strict() });
         this.cmdGlyphCopy = this._commands.Create(mkfCmds.GlyphCopy, { shortcut: this.shortcuts.Create("Ctrl C").Strict() });
         this.cmdGlyphPaste = this._commands.Create(mkfCmds.GlyphPaste, { shortcut: this.shortcuts.Create("Ctrl V").Strict() });
-        this.cmdGlyphCopyInPlace = this._commands.Create(mkfCmds.GlyphCopyInPlace, { shortcut: this.shortcuts.Create("Ctrl Shift C").Strict() });
         this.cmdGlyphPasteInPlace = this._commands.Create(mkfCmds.GlyphPasteInPlace, { shortcut: this.shortcuts.Create("Ctrl Shift V").Strict() });
         this.cmdGlyphPasteTransform = this._commands.Create(mkfCmds.GlyphPasteTransform, { shortcut: this.shortcuts.Create("Ctrl Alt V").Strict() });
 
@@ -93,12 +92,10 @@ class FontEditor extends base {
         this.cmdLayerDown = this._commands.Create(mkfCmds.LayerDown);
         this.cmdLayersOn = this._commands.Create(mkfCmds.LayerAllOn);
         this.cmdLayersOff = this._commands.Create(mkfCmds.LayerAllOff);
-        this.cmdLayersCopy = this._commands.Create(mkfCmds.LayersCopy);
         this.cmdLayersPaste = this._commands.Create(mkfCmds.LayersPaste);
         this.cmdLayerAddComp = this._commands.Create(mkfCmds.LayerAddComp);
         this.cmdLayerControl = this._commands.Create(mkfCmds.LayerSetControlBatch);
 
-
         this.cmdListImportMissing = this._commands.Create(mkfCmds.ImportListMissingGlyphs);
         this.cmdListExportUni = this._commands.Create(mkfCmds.ExportListUni);
         this.cmdListExportUniHex = this._commands.Create(mkfCmds.ExportListUniHex);