Status color of glyphs

src/fontra/client/core/utils.js

@@ -345,9 +345,10 @@ export function arrayExtend(thisArray, itemsArray) {
 }
 
 export function rgbaToCSS(rgba) {
-  const channels = rgba.map((channel) => Math.round(channel * 255));
-  if (channels[3] == 255) {
-    channels.pop();
+  const channels = rgba.slice(0, 3).map((channel) => Math.round(channel * 255));
+  const alpha = rgba.length === 4 ? rgba[3] : undefined;
+  if (alpha !== undefined && 0 <= alpha && alpha < 1) {
+    channels.push(alpha);
   }
   return `${channels.length === 4 ? "rgba" : "rgb"}(${channels.join(",")})`;
 }

src/fontra/views/editor/scene-model.js

@@ -331,8 +331,11 @@ export class SceneModel {
     const fontController = this.fontController;
     const glyphLines = this.glyphLines;
     const align = this.sceneSettings.align;
-    const { lineIndex: selectedLineIndex, glyphIndex: selectedGlyphIndex } =
-      this.selectedGlyph || {};
+    const {
+      lineIndex: selectedLineIndex,
+      glyphIndex: selectedGlyphIndex,
+      isEditing: selectedGlyphIsEditing,
+    } = this.selectedGlyph || {};
     const editLayerName = this.sceneSettings.editLayerName;
 
     let y = 0;
@@ -358,12 +361,11 @@ export class SceneModel {
       const positionedLine = { glyphs: [] };
       let x = 0;
       for (const [glyphIndex, glyphInfo] of enumerate(glyphLine)) {
+        const isSelectedGlyph =
+          lineIndex == selectedLineIndex && glyphIndex == selectedGlyphIndex;
+
         const thisGlyphEditLayerName =
-          editLayerName &&
-          lineIndex == selectedLineIndex &&
-          glyphIndex == selectedGlyphIndex
-            ? editLayerName
-            : undefined;
+          editLayerName && isSelectedGlyph ? editLayerName : undefined;
 
         const varGlyph = await this.fontController.getGlyph(glyphInfo.glyphName);
         let glyphInstance = await this.getGlyphInstance(
@@ -384,6 +386,8 @@ export class SceneModel {
           glyphName: glyphInfo.glyphName,
           character: glyphInfo.character,
           isUndefined: isUndefined,
+          isSelected: isSelectedGlyph,
+          isEditing: !!(isSelectedGlyph && selectedGlyphIsEditing),
         });
         x += glyphInstance.xAdvance;
       }

src/fontra/views/editor/visualization-layer-definitions.js

@@ -3,9 +3,11 @@ import { subVectors } from "../core/vector.js";
 import { decomposedToTransform } from "/core/transform.js";
 import {
   chain,
+  clamp,
   enumerate,
   makeUPlusStringFromCodePoint,
   parseSelection,
+  rgbaToCSS,
   round,
   unionIndexSets,
   withSavedState,
@@ -1020,6 +1022,55 @@ registerVisualizationLayerDefinition({
   },
 });
 
+registerVisualizationLayerDefinition({
+  identifier: "fontra.status.color",
+  name: "Status color",
+  selectionMode: "all",
+  userSwitchable: true,
+  defaultOn: false,
+  zIndex: 100,
+  screenParameters: {
+    minThickness: 3,
+    maxThickness: 15,
+  },
+  draw: (context, positionedGlyph, parameters, model, controller) => {
+    const statusFieldDefinitions =
+      model.fontController.customData["fontra.sourceStatusFieldDefinitions"];
+    if (!statusFieldDefinitions) {
+      return;
+    }
+
+    const sourceIndex = positionedGlyph.glyph.sourceIndex;
+    if (sourceIndex === undefined) {
+      return;
+    }
+
+    const status =
+      positionedGlyph.varGlyph.sources[sourceIndex].customData[
+        "fontra.development.status"
+      ];
+    if (status === undefined) {
+      return;
+    }
+
+    const color = [...statusFieldDefinitions[status].color];
+    if (positionedGlyph.isEditing) {
+      // in editing mode make opacity 50%
+      color[3] = color[3] * 0.5;
+    }
+
+    const thickness = clamp(
+      0.05 * model.fontController.unitsPerEm,
+      parameters.minThickness,
+      parameters.maxThickness
+    );
+    context.fillStyle = rgbaToCSS(color);
+    context.beginPath();
+    context.rect(0, -100 - thickness, positionedGlyph.glyph.xAdvance, thickness);
+    context.fill();
+  },
+});
+
 registerVisualizationLayerDefinition({
   identifier: "fontra.edit.background.layers",
   name: "Background glyph layers",

test-js/test-utils.js

@@ -364,7 +364,7 @@ describe("rgbaToCSS", () => {
   });
   it("should convert an array of decimals to rgba string", () => {
     expect(rgbaToCSS([0, 0, 0, 0])).to.be.equal("rgba(0,0,0,0)");
-    expect(rgbaToCSS([0, 0, 0, 0.2])).to.be.equal("rgba(0,0,0,51)");
+    expect(rgbaToCSS([0, 0, 0, 0.2])).to.be.equal("rgba(0,0,0,0.2)");
   });
   it("should always create rgb if the opacity is 1", () => {
     expect(rgbaToCSS([0, 0, 0, 1])).to.be.equal("rgb(0,0,0)");