Tweaks + WIP doc

app/js/editors/editor-font.js

@@ -119,7 +119,11 @@ class FontEditor extends base {
             }
         }).Strict();
 
-        this.shortcuts.Create("escape", () => { this._inspectedData.Clear(); });
+        this.shortcuts.Create("escape", () => { 
+            this._registerEmptySelection = true;
+            this._inspectedData.Clear(); 
+            this._registerEmptySelection = false;
+        });
 
         for (let i = 0; i < 10; i++) {
             this.shortcuts.Create(`Ctrl ${i}`, () => { this._StoreSelectionPreset(i); });

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

@@ -80,7 +80,7 @@ class GlyphGroupHeader extends base {
                     group: `export`
                 },
                 {
-                    icon: `app-illustrator`, htitle: `Create a new Adobe© Illustrator template document with the active selection.`,
+                    icon: `app-illustrator`, htitle: `Create a new Adobe© Illustrator template document with the active selection.\n---s\n+ [ Shift ] Uses all viewport content instead of selection.`,
                     trigger: { fn: () => { this.editor.cmdListExportArtboardTemplate.Execute(this.cmdContent); } },
                     group: `export`
                 },

app/js/operations/commands/shared-ops.js

@@ -146,6 +146,7 @@ class SHARED_OPS {
         let
             maxw = 0,
             hasLayersAlready = !p_target._layers.isEmpty,
+            doControl = !hasLayersAlready,
             family = p_target.glyph.family;
 
         if (p_createMissingGlyph) {
@@ -172,17 +173,28 @@ class SHARED_OPS {
             if (p_target.availSlots <= 0) { return; }
 
             if (!lyr) {
-                // Layer is missing and will be created                
+                // Layer is missing and will be created   
+
+                let lyrValues = {
+                    [mkfData.IDS.LYR_CHARACTER_NAME]: ch,
+                    [mkfData.IDS.LYR_IS_CONTROL_LAYER]: false,
+                    [mkfData.IDS.TR_LYR_BOUNDS_MODE]: mkfData.ENUMS.BOUNDS_MIXED_VER,
+                    [mkfData.IDS.TR_ANCHOR]: mkfData.ENUMS.ANCHOR_BOTTOM,
+                    [mkfData.IDS.TR_BOUNDS_MODE]: mkfData.ENUMS.BOUNDS_OUTSIDE,
+                    [mkfData.IDS.TR_LYR_SELF_ANCHOR]: mkfData.ENUMS.ANCHOR_BOTTOM,
+                };
+
+                if (doControl) {
+                    lyrValues[mkfData.IDS.LYR_IS_CONTROL_LAYER] = (i == 0) ? true : false;
+                    lyrValues[mkfData.IDS.TR_BOUNDS_MODE] = mkfData.ENUMS.BOUNDS_MIXED_VER;
+                    lyrValues[mkfData.IDS.TR_ANCHOR] = mkfData.ENUMS.ANCHOR_BOTTOM_LEFT;
+                    lyrValues[mkfData.IDS.TR_LYR_SELF_ANCHOR] = mkfData.ENUMS.ANCHOR_BOTTOM_LEFT;
+                    doControl = false;
+                }
+
                 p_editor.Do(mkfActions.LayerAdd, {
                     target: p_target,
-                    layerValues: {
-                        [mkfData.IDS.LYR_CHARACTER_NAME]: ch,
-                        [mkfData.IDS.LYR_IS_CONTROL_LAYER]: hasLayersAlready ? false : (i == 0) ? true : false,
-                        [mkfData.IDS.TR_LYR_BOUNDS_MODE]: mkfData.ENUMS.BOUNDS_MIXED_VER,
-                        [mkfData.IDS.TR_ANCHOR]: mkfData.ENUMS.ANCHOR_BOTTOM,
-                        [mkfData.IDS.TR_BOUNDS_MODE]: mkfData.ENUMS.BOUNDS_OUTSIDE,
-                        [mkfData.IDS.TR_LYR_SELF_ANCHOR]: mkfData.ENUMS.ANCHOR_BOTTOM,
-                    },
+                    layerValues: lyrValues,
                     index: -1,
                     expanded: false,
                 });

app/js/widgets/pangram-renderer.js

@@ -6,6 +6,7 @@ const u = nkm.u;
 const ui = nkm.ui;
 
 const defaultPangram = `By Jove, my quick study of lexicography won a prize!`;
+const __hasHigh = `has-high`;
 
 const base = ui.Widget;
 class PangramRenderer extends base {
@@ -19,6 +20,7 @@ class PangramRenderer extends base {
 
         this._ongoingSelection = false;
         this._highlightList = null;
+        this._flags.Add(this, __hasHigh);
     }
 
     _PostInit() {
@@ -51,6 +53,9 @@ class PangramRenderer extends base {
                 'text-transform': 'var(--case)',
                 'word-break': `break-word`,
             },
+            ':host(.has-high) .pangram': {
+                //'color': '#cdcdcd',
+            },
             '.paninput': {
                 '-webkit-appearance': `none`,
                 'appearance': `none`,
@@ -59,7 +64,7 @@ class PangramRenderer extends base {
             },
             '.high': {
                 'color': `white`,
-                'background-color': `rgba(var(--col-active-dark-rgb), 0.8)`,
+                'background-color': `rgba(var(--col-active-dark-rgb), 0.5)`,
                 'border-radius': `2px`,
             }
         }, base._Style());
@@ -113,15 +118,25 @@ class PangramRenderer extends base {
             valSpan = val;
 
         if (this._highlightList) {
+
             valSpan = ``;
             for (let i = 0, n = val.length; i < n; i++) {
                 let letter = val.substring(i, i + 1);
                 if (this._highlightList.includes(letter)) { valSpan += `<span class="high">${letter}</span>`; }
                 else { valSpan += letter; }
             }
+
+            this._flags.Set(__hasHigh, this._highlightList.length > 0);
+
+        } else {
+
+            this._flags.Set(__hasHigh, false);
+
         }
+
         val = '<p>' + valSpan.replace(/[^\S\n]+\n/g, '\n').replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>') + '</p>';
         this._pangramText.Set(val);
+
     }
 
     //#region Interactive selection

docs/_sources/_sass/base.scss

@@ -67,6 +67,10 @@ h6 {
   color: $body-heading-color;
 }
 
+em{
+  opacity:0.8;
+}
+
 h1{
   color: $body-h1-color;
 }

docs/_sources/_sass/cards.scss

@@ -246,7 +246,7 @@ blockquote {
     overflow: clip;
 
     &::before {
-        font-size: 5em;
+        font-size: 4em;
         transform: rotate(-15deg) translateX(-14%) translateY(-30%);
         position: absolute;
         opacity: 0.2;

docs/_sources/docs/views/foldout-details.md

@@ -34,7 +34,8 @@ Shows how many glyphs are currently using the selected one as a component, and a
 ## Decomposition
 
 The glyph decomposition is documented for a subset of glyphs within Unicode. If they exist for the selected character, you will be able to browse through them from here.  
-> Note that you can use the {% include btn ico="link" %} of the {% include lk id='Glyph components' %} to quickly create a composite glyph from its known decomposition.
+> Note that you can use the {% include btn ico="link" %} of the {% include lk id='Glyph components' %} to quickly create a composite glyph from its known decomposition.  
+> Alternatively, use {% include shortcut keys="Shift" %} + {% include btn ico="reset" %} to create a new glyph along with all of its dependencies, and bootstrap components structure in one swift click.
 {: .infos }
 
 ---

docs/_sources/guides/font-icon-complex.md

@@ -3,7 +3,7 @@ layout: page
 parent: Guides
 title: Composite icon font
 subtitle: How to make an icon font
-summary: A font with complex component interactions. Lengthiest guide by far.
+summary: A font with complex component interactions.<br>Acts as an exhaustive showcase of MkFont capabilities.
 splash: icons/icon_component.svg
 preview_img: placeholder.jpg
 color: white
@@ -15,6 +15,8 @@ nav_order: 3
 > **While not required**, this guide assume that you have made yourself familiar with the {% include lk id='Asset preparation' %}.
 {: .comment}
 
+# What to expect
+{: .no_toc }
 This guide is about creating a simple yet highly customizable icon font; and showcasing MkFont advanced component interactions. It only assumes that you have some assets to work with, and that you are using Adobe© Illustrator, because that's what you'll see in the screenshots -- but any SVG editor will work.  
 {: .fs-6 .fw-300 }
 We will be making roughly the same font icon as the one made through the {% include lk id='Simple icon font' %} guide.

docs/_sources/guides/font-icon.md

@@ -16,11 +16,12 @@ nav_order: 3
 {: .comment}
 
 # What to expect
-
+{: .no_toc }
 This guide is about creating a simple icon font using MkFont from scratch. It only assumes that you have some assets to work with, and that you are using Adobe© Illustrator, because that's what you'll see in the screenshots -- but any SVG editor will work.
 {: .fs-6 .fw-300 }
 
 #### Credits
+{: .no_toc }
 This example is using [Kenney's Game Icons](https://www.kenney.nl/assets/game-icons), which you will find packaged along with this guide' files, downloadable [here](https://nebukam.github.io/mkfont/assets/guides/simple-icon-font.zip).
 
 ## Final output

docs/_sources/guides/font-regular.md

@@ -16,18 +16,21 @@ nav_order: 2
 {: .comment}
 
 # What to expect
-
-This guide is about creating a font using MkFont from scratch.  
+{: .no_toc }
+This guide is about building a simple font using MkFont & Adobe© Illustrator. It's divided in two part :  
+[Part I](#part-i--simple-characters) is about getting up and running,   
+[Part II](#part-ii--composite-characters) glimpse at less obvious features.
 {: .fs-6 .fw-300 }
 
 #### Assumptions :
+{: .no_toc }
 - You're using Illustrator. *(because we're going to use advanced third party integration)*
-- You already have a bunch of glyphs designed, laying around somewhere.
-- You really don't want to bother with finding what's the unicode point fits what glyph, boring. *(but you'll need Illustrator, otherwise you need to do the association by hand and it's tedious af)*
+- **You already have a bunch of glyphs designed, laying around somewhere.**
+- You really don't want to bother with finding what's the unicode point fits what glyph.
 
 You can find all the assets used in this example in the [following package](https://nebukam.github.io/mkfont/assets/guides/simple-font.zip).
 
-## Final output
+## Part I final output
 {: .no_toc}
 
 We're going to make the following font :
@@ -42,16 +45,144 @@ We're going to make the following font :
 ---
 
 # First steps
-The first step will be organizing our messed up glyph into a more structured document, with properly-named artboard : this way we have an export template that we can easily import into MkFont, and make updates a breeze.  
+
+### Creating a new MkFont document
+Launch the app, create a new .mkfont, and give your font a name.  
+That's the name that will be embedded into the exported `.ttf`.
+
+{% include webm a='guides/sfont/new-doc.webm' %} 
+
+# Part I : Simple Characters
+
+## Choosing characters  
+Let's say we're going to support good'ol `Basic latin`.
+
+{% include webm a='guides/sfont/basic-latin-artboard.webm' %} 
+
+#### What's going on here :
+{: .no_toc}
+- First, select the {% include btn ico="view-grid" label="Basic Latin" %} unicode block from the {% include lk id='Content explorer' %} *(it's selected by default when creating a new document)*
+- Use the {% include shortcut keys="Shift" %} + {% include btn ico="app-illustrator" %} action at the top of the {% include lk id='Font viewport' %}.
+- This generates a ready-for-export illustrator document, with an artboard for each of the glyphs within the viewport.
+
+>Illustrator will *very likely* complain about executing a script with an unreadable name -- it's all fine. What MkFont does is generate a temp .jsx script and forward it to illustrator in order to generate the artboards. 
+{: .warning }
+
+---
+
+## Preparing assets
+The first step will be organizing our messed up glyphs into a more structured document, with properly-named artboards : this way we have an export template that we can easily import into MkFont, and make updates a breeze.  
 *The idea is to ensure whatever files we export, we can easily import them to a designated unicode slot without any manual correction.*
 
-## Choosing supported characters  
+{% include img a='guides/sfont/rando.png' %} 
+
+{% include img a='guides/sfont/filled-artboard.png' %} 
+
+### Vertical placement is critical
+The vertical placement of the asset within the artboard will be critical to make the most out of MkFont's features. It allows for more consistency & predictability in how things will pan out.  
+
+>If you haven't already, now is a good time to have a look at the {% include lk id='Asset preparation' %}' doc.
+{: .warning}
+
+{% include img a='guides/sfont/artboard-align.png' %} 
+
+>Rule of thumb : **the bottom edge of the artboard will be the baseline of your font.**  
+
+Depending on what kind of automation you want, have an in-depth look at the {% include lk id='Glyph transformations' a='#scaling' %}' `Scaling` options. How to best position the top edge of the artboard depends mostly on that.  
+
+>As a default, let's assume **the top edge of the artboard is the ascender of your font.** ({% include btn ico="font-ascender" %} ) 
+
+>Horizontal placement really doesn't matter as much, because you can *(and will want to)* tweak it.  
+>It does matter more with icons, but still isn't as critical as top/bottom asset boundaries.
+{: .infos }
+
+{% include img a='guides/sfont/tidy-artboards.png' %} 
+
+---
+
+## Exporting assets
+Once you're done with placing glyphs to their slot in illustrator, time to export.  
+Note that it doesn't really matter if you have all the glyph in there, the MkFont workflow is very flexible in that regard -- you can always update glyph data within the app.  
+
+>You now need to export each artboard to an individual SVG file.  
+>*If you're using the MkFont-generated document, make sure to hide the helper layers so you don't export more that you intend to.*
+>{% include img a='guides/sfont/svg-batch.png' %}  
 
+The most straightforward way being *(inside Illustrator)* : 
+- Open the **Export As** dialog : `File` > `Export` > `Export As`
+- Choose `SVG` as file format
+- Check the `Use artboard` option, then select `All`
+- Click `Export`!
 
-## Step 2
+---
+
+## Importing assets
+Now the last remaining bit : importing your SVGs into MkFont.  
+
+{% include webm a='guides/sfont/import-all.webm' %} 
+
+#### What's going on here :
+{: .no_toc}
+- First, click on the {% include btn ico="directory-download-small" label="SVGs" %} to choose a bunch of SVGs to import. 
+- Select all the previously exported SVGs.
+- Since everything has been templated in the most optimal way, there is really nothing to do here, but validate everything looks as you'd expect.
+- Click {% include btn ico="load-arrow" label="Import" %}.
+- Glyphs have been imported to your MkFont document.
+- Check the {% include lk id='Preview explorer' %} to get a glimpse at your font.
+
+>Nice. But it doesn't look quite right yet.
+
+---
+
+## Let the fun begin
+So, you guessed it -- this is where we'll tweak metrics. We're going broad strokes first, and then in more detail *(although this guide won't cover the nit-picking, that part is up to you.)* 
 
-# Next step
+{% include webm a='guides/sfont/tweak-shift-push.webm' %} 
+
+#### What's going on here :
+{: .no_toc}
+- While browsing {% include btn ico="text-style" label="My Glyphs" %}
+- Select all the glyphs using {% include shortcut keys="Ctrl A" %}
+- Go to the {% include lk id='Glyph transformations' %} panel
+- Tweak `Shift` & `Push` to give each glyph more breathing room on each side of the imported asset
+- You can now spend time to tweak each glyph individually.
+
+### One last thing
+We need to define the space in our font. It's the very first character of the `Basic Latin` block.
+
+{% include webm a='guides/sfont/make-space.webm' %}  
+
+#### What's going on here :
+{: .no_toc}
+- Select the `SPACE` unicode slot
+- Use the {% include btn ico="reset" %} from the {% include lk id='Glyph inspector' %} to create an empty glyph there
+- Adjust the width
+- That's it, that's the `SPACE`.
+
+---
+
+## Export to TTF
+Done! To export the font, simply click on the {% include btn ico="upload" label="Export" %} action in the top left of the editor.  
+
+{% include img a='guides/sfont/final-output.png' %} 
+
+---
+
+# Part II : Composite characters
+
+Now that we're done with the basics, let's add a few more characters from `Latin-1 Supplement`, but this time with a slightly different manipulation.  
+>**We're going to leverage known character decomposition to create modular glyphs from the one we already have, instead of creating new assets.**  
+{% include webm a='guides/sfont/bootstrap-comp.webm' %} 
+
+#### What's going on here :
+{: .no_toc}
+- Secret sauce is : use {% include shortcut keys="Shift" %} + {% include btn ico="reset" %} to boostrap decomposition creation.
 
 >## WORK IN PROGRESS.
 >Come back later (～￣▽￣)～ 
-{: .error}
+{: .error}
+
+## Wrap up
+There's no magic involved with the decomposition, in perspective of the whole Unicode database, very few are documented. To know if a glyph has a *known decomposition*, you can check out the {% include lk id='Glyph details' %}!  
+
+If you're interested in digging deeper into components interactions, check out the {% include lk id='Composite icon font' %} :)