Backporting NKMjs updates

app/js/data/infos.js

@@ -11,7 +11,7 @@ class INFOS {
         return IDS.GetInfos(p_id) || IDS_EXT.GetInfos(p_id) || IDS_PREFS.GetInfos(p_id) || null;
     }
 
-    static LAYER_LIMIT = 20;
+    static LAYER_LIMIT = 50;
 
     static get MARK_COLOR() {
         let col = nkm.env.APP.PGet(IDS_PREFS.MARK_COLOR, `FF00FF`);

app/js/editors/inspectors/glyph-list-inspector.js

@@ -334,11 +334,11 @@ class GlyphListInspector extends base {
                 origin: ui.ANCHORING.RIGHT,
                 keepWithinScreen: true,
                 static: true,
-                content: mkfWidgets.GlyphPreview
+                content: mkfWidgets.GlyphPreviewGroup
             });
 
-            this._popoutPreview.content.data = atop;
-            this._popoutPreview.content.glyphInfos = atop ? atop.glyph.unicodeInfos : null;
+            this._popoutPreview.content.data = this._data ? this._data.analytics.existing : null;
+            //this._popoutPreview.content.glyphInfos = atop ? atop.glyph.unicodeInfos : null;
             //this._UpdatePreviewLayer();
         }
 
@@ -356,7 +356,7 @@ class GlyphListInspector extends base {
 
     _UpdatePreviewLayer(p_layer) {
         this._glyphPreview.glyphLayer = this._data.selectedLayer;
-        if (this._popoutPreview) { this._popoutPreview.content.glyphLayer = this._data.selectedLayer; }
+        //if (this._popoutPreview) { this._popoutPreview.content.glyphLayer = this._data.selectedLayer; }
     }
 
     //#endregion

app/js/widgets/glyph-preview-group.js

@@ -30,15 +30,14 @@ class GlyphPreviewGroup extends base {
     static _Style() {
         return nkm.style.Extends({
             ':host': {
-                //'@': ['fade-in'],
+                '@': ['fade-in'],
                 'position': 'relative',
                 'grid-gap': `10px`,
                 'display': 'grid',
                 'grid-template-columns': 'auto auto',
                 'grid-template-rows': 'auto auto',
                 'justify-content': `center`,
                 'align-content': `space-between`, //center
-                'margin-bottom': '5px',
             },
             '.box': {
                 'position': 'relative',
@@ -76,7 +75,7 @@ class GlyphPreviewGroup extends base {
 
     }
 
-    set glyphLayer(p_value) { this._glyphRenderer.layer = p_value; }
+    set glyphLayer(p_value) { }
 
     _OnDataChanged(p_oldData) {
         super._OnDataChanged(p_oldData);

app/js/widgets/layer-control.js

@@ -50,7 +50,7 @@ class LayerControl extends base {
     static _Style() {
         return nkm.style.Extends({
             ':host': {
-                '@': [`fade-in`],
+                //'@': [`fade-in`],
                 'padding': '5px',
                 'margin-bottom': '5px',
                 'background-color': `rgba(127,127,127,0.25)`,

app/js/widgets/layers-view.js

@@ -90,6 +90,9 @@ class LayersView extends base {
                 //'background-color':`rgba(19,19,19,0.25)`,
                 'border-radius': `3px`
             },
+            '.item.collapsed': {
+                'height': '38px'
+            },
             '.item': {
                 'flex': '0 1 auto',
                 'margin': `3px`,
@@ -186,7 +189,8 @@ class LayersView extends base {
             return;
         }
         this._data._layers.ForEach(lyr => { this._OnLayerAdded(this._data, lyr); });
-        this._RefreshLayerOrder();
+        this._AttachFragment();
+        //this._RefreshLayerOrder();
     }
 
     _OnLayerAdded(p_variant, p_layer) {
@@ -207,8 +211,10 @@ class LayersView extends base {
     }
 
     _AttachFragment() {
+        this._delayedAttachFragment.Cancel();
         if (!this._fragment) { return; }
         ui.dom.Attach(this._fragment, this._listCtnr);
+        this._fragment = null;
         this._RefreshLayerOrder();
     }
 

app/src-style/default/_variables.scss

@@ -37,7 +37,7 @@ $varname_col_cta: '--col-cta';
 
 $varname_col_input_bg: '--col-input-bg';
 
-$transition_opacity: opacity 0.15s ease;
+$transition_opacity: opacity 0.1s ease;
 
 ///////////
 /* Sizes */

app/src-style/default/global-host.scss

@@ -19,7 +19,7 @@
 }
 
 :host{
-    //transition: $transition_opacity;
+    transition: $transition_opacity;
 }
 
 :host(:not(.unpainted)){

package.json

@@ -1,13 +1,13 @@
 {
     "name": "mkfont",
-    "version": "0.8.2",
+    "version": "0.8.3",
     "author": {
         "name": "Timothé Lapetite",
         "email": "[email protected]"
     },
     "license": "SEE LICENSE IN LICENSE",
     "dependencies": {
-        "@nkmjs/core": "^0.3.3",
+        "@nkmjs/core": "^0.3.4",
         "svg-path-reverse": "^1.3.0",
         "svg2ttf": "^6.0.3",
         "svgo": "^2.8.0",
@@ -19,7 +19,7 @@
         "processor": "node app/js-unicode/unicode-processor.js"
     },
     "devDependencies": {
-        "@nkmjs/core-dev": "^0.3.3",
+        "@nkmjs/core-dev": "^0.3.4",
         "electron": "^17.1.0"
     }
 }

pkg.cc

@@ -1,13 +1,13 @@
 {
     "name": "mkfont",
-    "version": "0.8.2",
+    "version": "0.8.3",
     "author": {
         "name": "Timothé Lapetite",
         "email": "[email protected]"
     },
     "license": "SEE LICENSE IN LICENSE",
     "dependencies": {
-        "@nkmjs/core": "^0.3.3",
+        "@nkmjs/core": "^0.3.4",
         "svg-path-reverse": "^1.3.0",
         "svg2ttf": "^6.0.3",
         "svgo": "^2.8.0",
@@ -19,14 +19,14 @@
         "processor": "node app/js-unicode/unicode-processor.js"
     },
     "devDependencies": {
-        "@nkmjs/core-dev": "^0.3.3",
+        "@nkmjs/core-dev": "^0.3.4",
         "electron": "^17.1.0"
     }
 }
 
 {
     "name": "mkfont",
-    "version": "0.8.2",
+    "version": "0.8.3",
     "author": {
         "name": "Timothé Lapetite",
         "email": "[email protected]"