Comp transform refactor + ligature tools

Nebukam · May 15, 2022 · 2beeaba · 2beeaba
1 parent a0ff312
commit 2beeaba
Show file tree

Hide file tree

Showing 100 changed files with 716 additions and 354 deletions.
diff --git a/app/js/data/settings-transforms-data-block.js b/app/js/data/settings-transforms-data-block.js
@@ -72,10 +72,10 @@ class TransformSettingsDataBlock extends SimpleDataEx {
         if (!pathData || !this._variant._family) { return; }
 
         let
+            path = SVGOPS.FitPath(this, this._variant.family._contextInfos, pathData),
             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,
             h = this._variant.Resolve(IDS.HEIGHT),
             controlVariant = null;
@@ -114,28 +114,24 @@ class TransformSettingsDataBlock extends SimpleDataEx {
                 prevLayer = null,
                 prevLayerData = null;
 
-            this._variant.layers.ForEach(item => {
-                let ref = item.importedVariant;
-                if (ref && !item._isCircular && item.Get(IDS.DO_EXPORT)) {
+            this._variant.layers.ForEach((layer, index) => {
+                let ref = layer.importedVariant;
+                if (ref && !layer._isCircular && layer.Get(IDS.DO_EXPORT)) {
 
                     let
-                        layerCP = item.Get(IDS.PATH),
+                        layerCP,
                         layerPath = ref.Get(IDS.PATH);
 
-                    if (item.Get(IDS.INVERTED)) { layerPath = svgpr.reverse(layerPath); }
+                    if (layer.Get(IDS.INVERTED)) { layerPath = svgpr.reverse(layerPath); }
 
-                    if (item.Get(IDS.LYR_USE_PREV_LAYER) && prevLayerData) {
-                        layerCP = SVGOPS.FitLayerPath(
-                            item, prevLayerData, prevLayerData.width, prevLayerData.HEIGHT,
-                            layerPath, ref.Get(IDS.EXPORTED_WIDTH), ref.Resolve(IDS.HEIGHT));
+                    if (layer.Get(IDS.LYR_USE_PREV_LAYER) && prevLayerData) {
+                        layerCP = SVGOPS.FitLayerPath(layer, prevLayerData, ref, layerPath);
                     } else {
-                        layerCP = SVGOPS.FitLayerPath(
-                            item, path, w, h,
-                            layerPath, ref.Get(IDS.EXPORTED_WIDTH), ref.Resolve(IDS.HEIGHT));
+                        layerCP = SVGOPS.FitLayerPath(layer, path, ref, layerPath);
                     }
 
-                    item._values[IDS.PATH].value = layerCP;
-                    item._CleanLayer();
+                    layer._values[IDS.PATH].value = layerCP;
+                    layer._CleanLayer();
 
                     let bb = layerCP.bbox;
                     prevLayerData = layerCP;
@@ -145,10 +141,10 @@ class TransformSettingsDataBlock extends SimpleDataEx {
 
                 } else {
                     //prevLayerData = null; //So 'prev layer' is actually "closest valid layer"
-                    item._values[IDS.PATH].value = null;
+                    layer._values[IDS.PATH].value = null;
                 }
 
-                prevLayer = item;
+                prevLayer = layer;
             });
         }
 

diff --git a/app/js/editors/editor-font.js b/app/js/editors/editor-font.js
@@ -97,6 +97,8 @@ class FontEditor extends base {
         this.cmdLayerAddComp = this._commands.Create(mkfCmds.LayerAddComp);
         this.cmdLayerControl = this._commands.Create(mkfCmds.LayerSetControlBatch);
 
+        this.cmdLigaFromSelection = this._commands.Create(mkfCmds.LigatureFromSelection);
+
         this.cmdListImportMissing = this._commands.Create(mkfCmds.ImportListMissingGlyphs);
         this.cmdListExportUni = this._commands.Create(mkfCmds.ExportListUni);
         this.cmdListExportUniHex = this._commands.Create(mkfCmds.ExportListUniHex);

diff --git a/app/js/editors/inspectors/glyph-iitem.js b/app/js/editors/inspectors/glyph-iitem.js
@@ -90,7 +90,7 @@ class GlyphVariantInspectorItem extends base {
                 'flex': `1 1 auto`,
                 'justify-content': `center`,
                 'margin-top': '5px',
-                'padding': '4px',
+                'padding': '4px 0px',
                 'border-radius': '4px',
                 'background-color': `rgba(19, 19, 19, 0.25)`
             },
@@ -118,6 +118,11 @@ class GlyphVariantInspectorItem extends base {
             stretch: ui.WidgetBar.FLAG_STRETCH,
             defaultWidgetClass: nkm.uilib.buttons.Tool,
             handles: [
+                {
+                    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.`,
+                    trigger: { fn: () => { this.editor.cmdGlyphClear.Execute(this._data); } },
+                    group: `edit`, member: { owner: this, id: `_glyphClearBtn` }
+                },
                 {
                     icon: `document-download-small`, htitle: `Import SVG`,
                     flavor: nkm.com.FLAGS.LOADING, variant: ui.FLAGS.MINIMAL,
@@ -130,12 +135,6 @@ class GlyphVariantInspectorItem extends base {
                     trigger: { fn: () => { this.editor.cmdGlyphPaste.Execute(this._glyphInfos); } },
                     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.`,
-                    variant: ui.FLAGS.MINIMAL,
-                    trigger: { fn: () => { this.editor.cmdGlyphClear.Execute(this._data); } },
-                    group: `read`, member: { owner: this, id: `_glyphClearBtn` }
-                },
                 {
                     icon: `document-edit`, htitle: `Edit using default SVG editor`,
                     variant: ui.FLAGS.MINIMAL,

diff --git a/app/js/editors/inspectors/glyph-list-inspector.js b/app/js/editors/inspectors/glyph-list-inspector.js
@@ -64,7 +64,7 @@ class GlyphListInspector extends base {
                 'justify-content': `center`,
                 'margin-bottom': '5px',
                 'margin-top': '5px',
-                'padding': '4px',
+                'padding': '4px 0px',
                 'border-radius': '4px',
                 'background-color': `rgba(19, 19, 19, 0.25)`
             },
@@ -106,10 +106,14 @@ class GlyphListInspector extends base {
             handles: [
                 {
                     icon: `reset`, htitle: `Reset existing glyphs & create missing ones.\n+ [ Shift ] Also create components matching character decomposition.\n+ [ Alt ] Reset the glyphs path while preserving everything else.`,
-                    variant: ui.FLAGS.MINIMAL,
                     trigger: { fn: () => { this.editor.cmdGlyphClear.Execute(this._data.stack._array); } },
                     group: `read`
                 },
+                {
+                    icon: `text-liga-new`, htitle: `Create ligature from selection\n---\n+ [ Shift ] Create components from ligature decomposition.`,
+                    trigger: { fn: () => { this.editor.cmdLigaFromSelection.Execute(); } },
+                    group: `read`, member: { owner: this, id: `_createLigaBtn` }
+                },
                 {
                     icon: `remove`, htitle: `Delete selection from font`,
                     variant: ui.FLAGS.MINIMAL,
@@ -120,6 +124,8 @@ class GlyphListInspector extends base {
             ]
         };
 
+
+
         // Previews
 
         this._groupPreview = this.Attach(mkfWidgets.GlyphPreviewGroup, `previews`);
@@ -272,6 +278,7 @@ class GlyphListInspector extends base {
 
         this._glyphIdentity.Multi(`MULTIPLE SELECTION<br><b>${an.total} Glyphs</b>`, an.uuni);
         this._deleteGlyphBtn.disabled = !(an.existingGlyphs > 0);
+        this._UpdateTexts();
 
     }
 
@@ -291,7 +298,14 @@ class GlyphListInspector extends base {
         }
     }
 
-    _OnGlyphBumped(p_data, p_infos) { this._UpdatePreviews(); }
+    _UpdateTexts(){
+        this._createLigaBtn.htitle = `Create ligature : ${this.editor.cmdLigaFromSelection._GetLigaName()}\n---\n+ [ Shift ] Create components from ligature decomposition.`;
+    }
+
+    _OnGlyphBumped(p_data, p_infos) { 
+        this._UpdatePreviews(); 
+        this._UpdateTexts();
+    }
 
     //#region popout
 

diff --git a/app/js/editors/inspectors/pangram-inspector.js b/app/js/editors/inspectors/pangram-inspector.js
@@ -15,9 +15,9 @@ const mkfOperations = require(`../../operations`);
 const GlyphVariantInspector = require(`./glyph-iitem`);
 
 const longPangram =
-    `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
 
-Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
+    Ut laoreet dolore magna aliquam erat volutpat.`;
 
 const base = nkm.datacontrols.InspectorView;
 class PangramInspector extends base {
@@ -38,6 +38,11 @@ class PangramInspector extends base {
             .Watch(nkm.com.SIGNAL.UPDATED, this._OnSelectionUpdated, this);
     }
 
+    _PostInit() {
+        super._PostInit();
+        this.ligaText = null;
+    }
+
     static _Style() {
         return nkm.style.Extends({
             ':host': {
@@ -80,8 +85,8 @@ class PangramInspector extends base {
             '.slider': {
                 //'margin': '10px 0px 10px 0px'
             },
-            '.toolbar':{
-                'margin-top':`10px`
+            '.toolbar': {
+                'margin-top': `10px`
             }
         }, base._Style());
     }
@@ -100,6 +105,12 @@ class PangramInspector extends base {
         this._pangramRenderer = this.Attach(mkfWidgets.PangramRenderer, 'pangram', this._body);
         this.forwardData.To(this._pangramRenderer);
 
+        this._createLigaBtn = this.Attach(nkm.uilib.buttons.Button, `item`, this._footer);
+        this._createLigaBtn.options = {
+            icon:`text-liga-new`, htitle: `Create a ligature from the selected text.\n---\n+ [ Shift ] Create components from ligature decomposition.`,
+            trigger: { fn: () => { this.editor.cmdLigaFromSelection.Execute(this._selText); } }
+        };
+
         this._toolbar = this.Attach(ui.WidgetBar, `item toolbar`, this._footer);
         this._toolbar.options = {
             defaultWidgetClass: nkm.uilib.inputs.InlineSelect,
@@ -155,7 +166,7 @@ class PangramInspector extends base {
                     this._pangramRenderer.text = p_t;
                 }
             },
-            rows: 6
+            rows: 4
         }
 
         this._pangramRenderer.fontSize = 20;
@@ -215,13 +226,30 @@ class PangramInspector extends base {
                     }, group: `b`
 
                 }
-
             ]
         }
 
     }
 
     _OnEditorChanged(p_oldEditor) { this._inspectionHandler.editor = this._editor; }
+    _OnDataChanged(p_oldData) {
+        super._OnDataChanged(p_oldData);
+        this.ligaText = null;
+    }
+
+    set ligaText(p_value) {
+        if (!p_value) { p_value = ``; }
+
+        this._selText = p_value;
+
+        if (p_value.length < 2) {
+            this._createLigaBtn.disabled = true;
+            this._createLigaBtn.label = `Select at least 2 characters`;
+            return;
+        }
+        this._createLigaBtn.disabled = false;
+        this._createLigaBtn.label = `${this._selText}`;
+    }
 
     _OnSelectionUpdated(p_sel) {
         if (p_sel.stack.count == 0) {
@@ -242,6 +270,7 @@ class PangramInspector extends base {
 
         ui.dom.ClearHighlightedText();
 
+        this.ligaText = p_text;
 
         let addresses = UNICODE.GetAddressesFromText(p_text);
 
@@ -262,7 +291,7 @@ class PangramInspector extends base {
         if (data.length == 0) { return; }
 
         this.editor.viewport.selectionStack.Clear();
-        this.editor.inspectedData.SetList(data.reverse());
+        this.editor.inspectedData.SetList(data); //.reverse()
 
     }
 

diff --git a/app/js/editors/inspectors/tr-settings-inspector.js b/app/js/editors/inspectors/tr-settings-inspector.js
@@ -4,6 +4,7 @@ const nkm = require(`@nkmjs/core`);
 const ui = nkm.ui;
 const uilib = nkm.uilib;
 
+const LOC = require(`../../locales`);
 const UNICODE = require(`../../unicode`);
 const mkfData = require(`../../data`);
 const mkfWidgets = require(`../../widgets`);
@@ -31,7 +32,7 @@ class TransformSettingsInspector extends base {
         //{ cl: mkfWidgets.ControlHeader, options: { label: `Horizontal align` }, css: 'header' },
         { options: { propertyId: mkfData.IDS.TR_HOR_ALIGN, inputOnly: true }, css: 'small' },
 
-        { cl: mkfWidgets.ControlHeader, options: { label: `Translate` }, css: 'header', requireData: true }, //, disableWhen: { fn: isXMIN }
+        { cl: mkfWidgets.ControlHeader, options: { label: LOC.labelOffsets }, css: 'header', requireData: true }, //, disableWhen: { fn: isXMIN }
         { options: { propertyId: mkfData.IDS.TR_WIDTH_SHIFT }, requireData: true, disableWhen: { fn: isRNRM } }, //
         { options: { propertyId: mkfData.IDS.TR_WIDTH_PUSH }, requireData: true, disableWhen: { fn: isRNRM } }, //
         { options: { propertyId: mkfData.IDS.TR_AUTO_WIDTH }, requireData: true, disableWhen: { fn: isRNRM } }, //

diff --git a/app/js/locales.js b/app/js/locales.js
@@ -14,6 +14,8 @@ class LOC {
     static labelTrDefaults = `Default ${this.labelTr}`;
     static labelTrAdvanced = `Advanced ${this.labelTr}`;
 
+    static labelOffsets = `Translate`;
+
 }
 
 module.exports = LOC;