Improve modularity.

src/api/services/payload/build-general-selection-payload.ts

@@ -1,12 +1,12 @@
-import { processNodeForSelection } from '~api/services/selection/process-node-for-selection.ts';
+import { processNodeFromMultipleSelection } from '~api/services/selection/process-node-from-multiple-selection.ts';
 import { type SelectionChangeMessage } from '~types/messages.ts';
 import { notEmpty } from '~utils/not-empty.ts';
 
 export const buildGeneralSelectionPayload = (
   selection: readonly SceneNode[]
 ): SelectionChangeMessage => {
   const selectedNodePairs = selection
-    .map((node) => processNodeForSelection(node))
+    .map((fg) => processNodeFromMultipleSelection(fg))
     .filter(notEmpty);
 
   return {

src/api/services/selection/process-node-from-multiple-selection.ts

@@ -0,0 +1,59 @@
+import { buildColorsPair } from '~api/services/colors/build-colors-pair.ts';
+import { getComputedNodeFill } from '~api/services/colors/get-computed-node-fill.ts';
+import { blendLayersColors } from '~api/services/figma/blend/blend-layers-colors.ts';
+import { getIntersectingNodesWithPage } from '~api/services/figma/intersections/get-intersecting-nodes-with-page.ts';
+import { createFigmaNode } from '~api/services/figma/nodes/create-figma-node.ts';
+import { isLayerHasTransparency } from '~api/services/figma/visibility/is-layer-has-transparency.ts';
+import { type ColorPair } from '~api/types.ts';
+import { type FigmaNode, type FigmaPaint } from '~types/figma.ts';
+import { getFirstVisibleNodeFill } from '~utils/figma/get-first-visible-node-fill.ts';
+import { notEmpty } from '~utils/not-empty.ts';
+
+export const processNodeFromMultipleSelection = (
+  fg: SceneNode
+): ColorPair | null => {
+  const fgNode = createFigmaNode(fg);
+  const intersectingNodes = getIntersectingNodesWithPage(fg);
+
+  if (intersectingNodes.length === 0) return null;
+
+  const [firstIntersectingNode] = intersectingNodes;
+
+  if (!notEmpty(firstIntersectingNode)) return null;
+
+  const fgFill = getComputedNodeFill(fgNode);
+
+  if (!notEmpty(fgFill)) return null;
+
+  if (isLayerHasTransparency(firstIntersectingNode)) {
+    return handleTransparentBackground(fgNode.id, fgFill, intersectingNodes);
+  } else {
+    return handleOpaqueBackground(fgNode.id, fgFill, firstIntersectingNode);
+  }
+};
+
+export const handleOpaqueBackground = (
+  id: string,
+  fgFill: FigmaPaint,
+  firstIntersectingNode: FigmaNode
+): ColorPair | null => {
+  const bgFill = getFirstVisibleNodeFill(firstIntersectingNode.fills);
+
+  if (notEmpty(fgFill) && notEmpty(bgFill))
+    return buildColorsPair(id, fgFill, bgFill);
+
+  return null;
+};
+
+export const handleTransparentBackground = (
+  id: string,
+  fgFill: FigmaPaint,
+  intersectingNodes: FigmaNode[]
+): ColorPair | null => {
+  const blendedBgColor = blendLayersColors(intersectingNodes);
+
+  if (notEmpty(fgFill) && notEmpty(blendedBgColor))
+    return buildColorsPair(id, fgFill, blendedBgColor);
+
+  return null;
+};