Improve opacity for blending.

package.json

@@ -17,7 +17,7 @@
     "test": "pnpm run /^test:/"
   },
   "dependencies": {
-    "@figma/plugin-typings": "^1.77.0",
+    "@figma/plugin-typings": "^1.79.0",
     "@floating-ui/react": "^0.25.2",
     "@nanostores/react": "^0.7.1",
     "@testing-library/react": "^14.0.0",

src/api/services/figma/nodes/has-only-valid-blend-modes.ts

@@ -0,0 +1,26 @@
+// import { type FigmaNode, type FigmaPaint } from '~types/figma.ts';
+// import { isEmpty, notEmpty } from '~utils/not-empty.ts';
+//
+// // PLUS_LIGHTER is LINEAR_DODGE
+// // PLUS_DARKER is LINEAR_BURN
+// const unprocessedBlendModes = ['LINEAR_BURN', 'LINEAR_DODGE'];
+//
+// const isVisibleSolidFill = (fill: FigmaPaint): boolean =>
+//   fill.visible === true &&
+//   (notEmpty(fill.opacity) ? fill.opacity > 0 : true) &&
+//   fill.type === 'SOLID';
+//
+// const hasValidBlendMode = (fill: FigmaPaint): boolean => {
+//   if (isEmpty(fill.blendMode)) return true;
+//
+//   return !unprocessedBlendModes.includes(fill.blendMode);
+// };
+//
+// export const hasOnlyValidBlendModes = (nodes: FigmaNode[]): boolean =>
+//   nodes.every(
+//     (node) =>
+//       node.fills
+//         .filter((fill) => isVisibleSolidFill(fill))
+//         .every(hasValidBlendMode) &&
+//       !unprocessedBlendModes.includes(node.blendMode)
+//   );

src/api/services/figma/nodes/is-valid-for-background.ts

@@ -3,6 +3,8 @@ import { getActualNodeFill } from '~utils/get-actual-node-fill.ts';
 import { getActualNode } from '~utils/get-actual-node.ts';
 import { isEmpty } from '~utils/not-empty.ts';
 
+// TODO: Improve if there are any non solid visible fills with opacity.
+
 export const isValidForBackground = (nodes: FigmaNode[]): boolean => {
   const actualNode = getActualNode(nodes);
 

src/api/services/figma/nodes/is-valid-for-selection.ts

@@ -1,6 +1,8 @@
 import { getActualNodeFill } from '~utils/get-actual-node-fill.ts';
 import { notEmpty } from '~utils/not-empty.ts';
 
+// TODO: Improve if there are any non solid visible fills with opacity.
+
 export const isValidForSelection = (node: SceneNode): boolean => {
   if (!node.visible) {
     return false;

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

@@ -1,12 +1,25 @@
 import { getIntersectingNodes } from '~api/services/figma/intersections/get-intersecting-nodes.ts';
 import { createFigmaNode } from '~api/services/figma/nodes/create-figma-node.ts';
+// import { hasOnlyValidBlendModes } from '~api/services/figma/nodes/has-only-valid-blend-modes.ts';
 import { isValidForBackground } from '~api/services/figma/nodes/is-valid-for-background.ts';
 import { isValidForSelection } from '~api/services/figma/nodes/is-valid-for-selection.ts';
 import {
   type SelectionChangeEvent,
   SelectionMessageTypes,
 } from '~types/messages.ts';
-import { isEmpty, notEmpty } from '~utils/not-empty.ts';
+import { type SelectedNodes } from '~types/selection.ts';
+import { notEmpty } from '~utils/not-empty.ts';
+
+enum PairState {
+  InvalidBackground = 'Invalid background',
+  InvalidBlendMode = 'Has invalid blend mode',
+}
+
+const isSelectedNodes = (
+  pair: PairState | SelectedNodes
+): pair is SelectedNodes => {
+  return notEmpty((pair as SelectedNodes).intersectingNodes);
+};
 
 export const buildGeneralSelectionPayload = (
   selection: readonly SceneNode[]
@@ -15,31 +28,45 @@ export const buildGeneralSelectionPayload = (
     .filter(isValidForSelection)
     .map((selectedNode) => {
       const intersectingNodes = getIntersectingNodes(selectedNode);
+      const selectedFigmaNode = createFigmaNode(selectedNode);
+
+      // if (!hasOnlyValidBlendModes([selectedFigmaNode, ...intersectingNodes])) {
+      //   return PairState.InvalidBlendMode;
+      // }
 
       if (isValidForBackground(intersectingNodes)) {
         return {
           intersectingNodes: getIntersectingNodes(selectedNode),
-          selectedNode: [createFigmaNode(selectedNode)],
+          selectedNodeWithIntersectingNodes: [selectedFigmaNode],
         };
       } else {
-        return null;
+        return PairState.InvalidBackground;
       }
     });
 
   const isSingleInvalidBackground =
-    selectedNodePairs.some(isEmpty) && selectedNodePairs.length === 1;
+    selectedNodePairs.some((pair) => pair === PairState.InvalidBackground) &&
+    selectedNodePairs.length === 1;
   const areAllInvalidBackgrounds =
-    selectedNodePairs.length > 1 && selectedNodePairs.every(isEmpty);
+    selectedNodePairs.length > 1 &&
+    selectedNodePairs.every((pair) => pair === PairState.InvalidBackground);
+
+  if (isSingleInvalidBackground || areAllInvalidBackgrounds) {
+    return {
+      colorSpace: figma.root.documentColorProfile,
+      text: SelectionMessageTypes.invalidBackground,
+    };
+  }
 
-  const invalidBackground =
-    isSingleInvalidBackground || areAllInvalidBackgrounds;
+  // if (selectedNodePairs.some((pair) => pair === PairState.InvalidBlendMode)) {
+  //   return {
+  //     colorSpace: figma.root.documentColorProfile,
+  //     text: SelectionMessageTypes.unprocessedBlendModes,
+  //   };
+  // }
 
   return {
     colorSpace: figma.root.documentColorProfile,
-    ...(invalidBackground
-      ? { text: SelectionMessageTypes.invalidBackground }
-      : {
-          selectedNodePairs: selectedNodePairs.filter(notEmpty),
-        }),
+    selectedNodePairs: selectedNodePairs.filter(isSelectedNodes),
   };
 };

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

@@ -1,6 +1,7 @@
 import { areNodesIntersecting } from '~api/services/figma/intersections/are-nodes-intersecting.ts';
 import { getIntersectingNodes } from '~api/services/figma/intersections/get-intersecting-nodes.ts';
 import { createFigmaNode } from '~api/services/figma/nodes/create-figma-node.ts';
+// import { hasOnlyValidBlendModes } from '~api/services/figma/nodes/has-only-valid-blend-modes.ts';
 import { isValidForBackground } from '~api/services/figma/nodes/is-valid-for-background.ts';
 import { isValidForSelection } from '~api/services/figma/nodes/is-valid-for-selection.ts';
 import { sortNodesByLayers } from '~api/services/figma/nodes/sort-nodes-by-layers.ts';
@@ -39,6 +40,13 @@ export const buildPairSelectionPayload = (
     };
   }
 
+  // if (!hasOnlyValidBlendModes([bg, fg])) {
+  //   return {
+  //     colorSpace: figma.root.documentColorProfile,
+  //     text: SelectionMessageTypes.unprocessedBlendModes,
+  //   };
+  // }
+
   const fgSceneNode = fg.id === firstFigmaNode.id ? firstNode : secondNode;
   const bgSceneNode = bg.id === firstFigmaNode.id ? firstNode : secondNode;
 
@@ -48,13 +56,13 @@ export const buildPairSelectionPayload = (
       selectedNodePairs: [],
     };
 
-  if (areNodesIntersecting(firstNode, secondNode)) {
+  if (areNodesIntersecting(bgSceneNode, fgSceneNode)) {
     return {
       colorSpace: figma.root.documentColorProfile,
       selectedNodePairs: [
         {
           intersectingNodes: getIntersectingNodes(fgSceneNode),
-          selectedNode: [fg],
+          selectedNodeWithIntersectingNodes: [fg],
         },
       ],
     };
@@ -64,7 +72,10 @@ export const buildPairSelectionPayload = (
       selectedNodePairs: [
         {
           intersectingNodes: [bg, ...getIntersectingNodes(bgSceneNode)],
-          selectedNode: [fg, ...getIntersectingNodes(fgSceneNode)],
+          selectedNodeWithIntersectingNodes: [
+            fg,
+            ...getIntersectingNodes(fgSceneNode),
+          ],
         },
       ],
     };

src/types/messages.ts

@@ -20,6 +20,7 @@ export interface Message<T> {
 
 export enum SelectionMessageTypes {
   invalidBackground = 'invalidBackground',
+  unprocessedBlendModes = 'unprocessedBlendModes',
 }
 
 export interface SelectionChangePayload {

src/types/selection.ts

@@ -2,5 +2,5 @@ import { type FigmaNode } from './figma.ts';
 
 export interface SelectedNodes {
   intersectingNodes: FigmaNode[];
-  selectedNode: FigmaNode[];
+  selectedNodeWithIntersectingNodes: FigmaNode[];
 }

src/ui/components/AppContent.tsx

@@ -3,11 +3,13 @@ import { EmptySelectionMessage } from '~ui/components/EmptySelectionMessage.tsx'
 import { InvalidBackgroundSelectionMessage } from '~ui/components/InvalidBackgroundSelectionMessage.tsx';
 import { Selection } from '~ui/components/Selection.tsx';
 import { SelectionsList } from '~ui/components/SelectionsList.tsx';
+import { UnprocessedBlendModesSelectionMessage } from '~ui/components/UnprocessedBlendModesSelectionMessage.tsx';
 import {
   $contrastConclusion,
   $isEmptySelection,
   $isInvalidBackground,
   $isMultiSelection,
+  $isUnprocessedBlendModes,
 } from '~ui/stores/selected-nodes.ts';
 import { isEmpty } from '~utils/not-empty.ts';
 import { type ReactElement } from 'react';
@@ -16,12 +18,17 @@ export const AppContent = (): ReactElement => {
   const isInvalidBackground = useStore($isInvalidBackground);
   const isEmptySelection = useStore($isEmptySelection);
   const isMultiSelection = useStore($isMultiSelection);
+  const isUnprocessedBlendModes = useStore($isUnprocessedBlendModes);
   const contrastConclusion = useStore($contrastConclusion);
 
   if (isInvalidBackground) {
     return <InvalidBackgroundSelectionMessage />;
   }
 
+  if (isUnprocessedBlendModes) {
+    return <UnprocessedBlendModesSelectionMessage />;
+  }
+
   if (isEmptySelection) {
     return <EmptySelectionMessage />;
   }

src/ui/components/UnprocessedBlendModesSelectionMessage.tsx

@@ -0,0 +1,15 @@
+import layersImage from '~ui/assets/[email protected]';
+import { type ReactElement } from 'react';
+
+export const UnprocessedBlendModesSelectionMessage = (): ReactElement => {
+  return (
+    <p
+      style={{
+        backgroundImage: `url(${layersImage})`,
+      }}
+      className="mx-auto flex h-[200px] w-[250px] select-none items-end justify-center bg-[length:180px_180px] bg-center bg-no-repeat pt-2 text-center font-martianMono text-xxs text-secondary-75"
+    >
+      The blending modes Plus Lighter and Plus Darker are not supported
+    </p>
+  );
+};