Status color of glyphs

src/fontra/client/core/utils.js

@@ -352,6 +352,22 @@ export function rgbaToCSS(rgba) {
   return `${channels.length === 4 ? "rgba" : "rgb"}(${channels.join(",")})`;
 }
 
+// according to the documentation, the alpha value must be a value
+// between 0.0 and 1.0, why it's not possible to use rgbaToCSS
+// more: https://doc.qt.io/qt-5/qml-qtquick-context2d.html#fillStyle-prop
+export function rgbaToFillStyle(rgba) {
+  let alpha = undefined;
+  if (rgba.length === 4) {
+    alpha = rgba[3];
+    rgba.pop();
+  }
+  const channels = rgba.map((channel) => Math.round(channel * 255));
+  if (alpha !== undefined && alpha != 1) {
+    channels.push(alpha);
+  }
+  return `${channels.length === 4 ? "rgba" : "rgb"}(${channels.join(",")})`;
+}
+
 export function clamp(number, min, max) {
   return Math.max(Math.min(number, max), min);
 }

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,
+  rgbaToFillStyle,
   round,
   unionIndexSets,
   withSavedState,
@@ -1020,6 +1022,60 @@ registerVisualizationLayerDefinition({
   },
 });
 
+registerVisualizationLayerDefinition({
+  identifier: "fontra.status.color",
+  name: "Status color",
+  selectionMode: "editing",
+  userSwitchable: true,
+  defaultOn: false,
+  zIndex: 100,
+  screenParameters: { thickness: 20 },
+  colors: { opacity: 0.5 },
+  draw: _drawStatusColor,
+});
+
+registerVisualizationLayerDefinition({
+  identifier: "fontra.status.color.non-editing",
+  name: "Status color for non-editing glyphs",
+  selectionMode: "notediting",
+  userSwitchable: true,
+  defaultOn: false,
+  zIndex: 100,
+  screenParameters: { thickness: 20 },
+  colors: { opacity: 1.0 },
+  draw: _drawStatusColor,
+});
+
+function _drawStatusColor(context, positionedGlyph, parameters, model, controller) {
+  parameters.opacity;
+  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 thickness = clamp(parameters.thickness, 20, 150);
+  let color = statusFieldDefinitions[status].color;
+  color[3] = parameters.opacity;
+  context.fillStyle = rgbaToFillStyle(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

@@ -25,6 +25,7 @@ import {
   reversed,
   reversedEnumerate,
   rgbaToCSS,
+  rgbaToFillStyle,
   round,
   scheduleCalls,
   splitGlyphNameExtension,
@@ -371,6 +372,22 @@ describe("rgbaToCSS", () => {
   });
 });
 
+describe("rgbaToFillStyle", () => {
+  it("should convert an array of decimals to rgb string", () => {
+    expect(rgbaToFillStyle([0, 0, 0])).to.be.equal("rgb(0,0,0)");
+    expect(rgbaToFillStyle([0, 1, 0])).to.be.equal("rgb(0,255,0)");
+    expect(rgbaToFillStyle([1, 0, 0, 1])).to.be.equal("rgb(255,0,0)");
+  });
+  it("should convert an array of decimals to rgba string", () => {
+    expect(rgbaToFillStyle([0, 0, 0, 0])).to.be.equal("rgba(0,0,0,0)");
+    expect(rgbaToFillStyle([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(rgbaToFillStyle([0, 0, 0, 1])).to.be.equal("rgb(0,0,0)");
+    expect(rgbaToFillStyle([0, 0, 0, 1.0])).to.be.equal("rgb(0,0,0)");
+  });
+});
+
 describe("clamp", () => {
   it("should give the minimum when the number is below the range", () => {
     expect(clamp(10, 50, 80)).equals(50);