Merge pull request #268 from tokens-studio/flatten-alpha-node

add flatten alpha node

.changeset/eleven-snakes-breathe.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": minor
+---
+
+Add flatten alpha node

packages/graph-engine/src/nodes/color/flattenAlpha.ts

@@ -0,0 +1,65 @@
+import { INodeDefinition } from "../../index.js";
+import { NodeTypes } from "../../types.js";
+import { Node } from "../../programmatic/node.js";
+import {  ColorSchema, NumberSchema } from "../../schemas/index.js";
+import Color from "colorjs.io";
+
+export default class NodeDefinition extends Node {
+  static title = "Flatten Alpha";
+  static type = NodeTypes.FLATTE_ALPHA;
+  static description =
+    "Reduces two colors to one by blending them together and removing the alpha channel. Expects a background color without alpha.";
+  constructor(props: INodeDefinition) {
+    super(props);
+
+    this.addInput("foreground", {
+      type: {
+        ...ColorSchema
+      },
+      visible: true,
+    });
+    this.addInput("background", {
+      type: {
+        ...ColorSchema
+      },
+      visible: true,
+    });
+
+    this.addOutput("value", {
+      type: ColorSchema,
+      visible: true,
+    });
+  }
+
+  execute(): void | Promise<void> {
+    const { foreground, background } = this.getAllInputs();
+
+    // Create color objects from strings
+    const bg = new Color(background);
+    const fg = new Color(foreground);
+
+    // Decompose the foreground color to RGBA
+    const [r1, g1, b1] = fg.to('srgb').coords;  // Default alpha to 1 if undefined
+    const a1 = fg.alpha || 1;
+
+    if (a1 === 1) {
+      // If alpha is 1, output the foreground color directly
+      this.setOutput("value", fg.toString({ format: 'hex' }));
+    } else {
+      // Decompose the background color to RGB (assume opaque)
+      const [r2, g2, b2] = bg.to('srgb').coords;
+      console.log('foreground:', r1, g1, b1, a1);
+      console.log('background:', r2, g2, b2);
+
+      // Perform alpha blending formula
+      const alpha = 1 - a1;
+      const r = r2 * alpha + r1 * a1;
+      const g = g1 * a1 + g2 * alpha;
+      const b = b1 * a1 + b2 * alpha;
+
+      // Convert blended color back to Color object and then to hex string
+      const resultColor = new Color("sRGB", [r, g, b]);
+      this.setOutput("value", resultColor.to('srgb').toString({ format: 'hex' }));
+    }
+  }
+}

packages/graph-engine/src/nodes/color/index.ts

@@ -3,6 +3,7 @@ import contrasting from "./contrasting.js";
 import convert from "./convert.js";
 import create from "./create.js";
 import distance from "./distance.js";
+import flattenAlpha from "./flattenAlpha.js";
 import poline from "./poline.js";
 import scale from "./scale.js";
 import wheel from "./wheel.js";
@@ -12,10 +13,11 @@ export const nodes = [
   blend,
   poline,
   contrasting,
-  scale,
+  create,
   convert,
+  distance,
+  flattenAlpha,
   name,
-  create,
+  scale,
   wheel,
-  distance,
 ];

packages/graph-engine/src/types.ts

@@ -90,6 +90,7 @@ export enum NodeTypes {
   COLOR_NAME = "studio.tokens.color.name",
   NEAREST_TOKENS = "studio.tokens.color.nearestTokens",
   SET_COLOR_LUMINANCE = "studio.tokens.color.setColorLuminance",
+  FLATTE_ALPHA = "studio.tokens.color.flattenAlpha",
 
 
   //Series