Skip to content

Commit

Permalink
Filter for selected nodes without fills.
Browse files Browse the repository at this point in the history
  • Loading branch information
mikhin committed Sep 28, 2023
1 parent 28a9155 commit 887f25e
Show file tree
Hide file tree
Showing 9 changed files with 51 additions and 18 deletions.
2 changes: 1 addition & 1 deletion src/api/services/figma/nodes/create-figma-node.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { collectNodeParents } from '~api/services/figma/nodes/collect-node-parents.ts';
import { getNodeFills } from '~api/services/figma/nodes/get-node-fills.ts';
import { type FigmaNode } from '~types/figma.ts';
import { getNodeFills } from '~utils/get-node-fills.ts';
import { converter } from 'culori';
import { formatHex } from 'culori/fn';

Expand Down
2 changes: 1 addition & 1 deletion src/api/services/figma/nodes/specs/get-node-fills.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getNodeFills } from '~api/services/figma/nodes/get-node-fills.ts';
import { getNodeFills } from '~utils/get-node-fills.ts';
import { describe, expect, test } from 'vitest';

describe('getNodeFills', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/api/services/figma/nodes/specs/node-has-fills.spec.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createFigmaNode } from '~api/services/figma/nodes/create-figma-node.ts';
import { nodeHasFills } from '~api/services/figma/nodes/node-has-fills.ts';
import { nodeHasFills } from '~utils/node-has-fills.ts';
import { describe, expect, test } from 'vitest';

describe('nodeHasFills', () => {
Expand Down
11 changes: 7 additions & 4 deletions src/api/services/payload/build-general-selection-payload.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { getIntersectingNodes } from '~api/services/figma/intersections/get-intersecting-nodes.ts';
import { createFigmaNode } from '~api/services/figma/nodes/create-figma-node.ts';
import { type SelectionChangeMessage } from '~types/messages.ts';
import { isLayerVisible } from '~utils/is-layer-visible.ts';

export const buildGeneralSelectionPayload = (
selection: readonly SceneNode[]
): SelectionChangeMessage => {
const selectedNodePairs = selection.map((selectedNode) => ({
intersectingNodes: getIntersectingNodes(selectedNode),
selectedNode: createFigmaNode(selectedNode),
}));
const selectedNodePairs = selection
.map((selectedNode) => ({
intersectingNodes: getIntersectingNodes(selectedNode),
selectedNode: createFigmaNode(selectedNode),
}))
.filter((pair) => isLayerVisible(pair.selectedNode));

return {
colorSpace: figma.root.documentColorProfile,
Expand Down
5 changes: 4 additions & 1 deletion src/api/services/payload/build-pair-selection-payload.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { createFigmaNode } from '~api/services/figma/nodes/create-figma-node.ts';
import { sortNodesByLayers } from '~api/services/figma/nodes/sort-nodes-by-layers.ts';
import { type SelectionChangeMessage } from '~types/messages.ts';
import { isLayerVisible } from '~utils/is-layer-visible.ts';
import { isEmpty } from '~utils/not-empty.ts';

export const buildPairSelectionPayload = (
Expand All @@ -17,7 +18,9 @@ export const buildPairSelectionPayload = (
const firstFigmaNode = createFigmaNode(firstNode);
const secondFigmaNode = createFigmaNode(secondNode);

const [fg, bg] = sortNodesByLayers([firstFigmaNode, secondFigmaNode]);
const [fg, bg] = sortNodesByLayers(
[firstFigmaNode, secondFigmaNode].filter(isLayerVisible)
);

if (isEmpty(fg) || isEmpty(bg))
return {
Expand Down
38 changes: 28 additions & 10 deletions src/ui/services/colors/summarize-the-colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,20 @@ import { formatHex, formatHex8, type Oklch } from 'culori/fn';

const convertToOklch = converter('oklch');

const BACKGROUND_BOX = {
height: 2,
width: 2,
x: 0,
y: 0,
};

const FOREGROUND_BOX = {
height: 1,
width: 1,
x: 1,
y: 1,
};

export const summarizeTheColors = (
pairs: SelectedNodes[],
colorSpace: 'DISPLAY_P3' | 'LEGACY' | 'SRGB'
Expand Down Expand Up @@ -42,7 +56,7 @@ const summarizeTheColorsForPair = (
const fgDecimal = getColorData(getFillFromCtx(ctx, 1, 1));
const bgDecimal = getColorData(getFillFromCtx(ctx, 0, 0));

if (fgDecimal == null || bgDecimal == null) return null;
if (isEmpty(fgDecimal) || isEmpty(bgDecimal)) return null;

const apca = calculateApcaScore(
{
Expand Down Expand Up @@ -77,10 +91,17 @@ const drawFillsOnContext = (
fills: FigmaPaint[];
opacity: number | undefined;
}>,
x: number,
y: number,
width: number,
height: number
{
height,
width,
x,
y,
}: {
height: number;
width: number;
x: number;
y: number;
}
): void => {
layers.forEach((layer) => {
layer.fills.filter(isVisibleFill).forEach((fill) => {
Expand All @@ -101,7 +122,7 @@ const processIntersectingNodes = (
.reverse()
.flat();

drawFillsOnContext(ctx, fillsFromIntersectingNodes, 0, 0, 2, 2);
drawFillsOnContext(ctx, fillsFromIntersectingNodes, BACKGROUND_BOX);
};

const processSelectedNode = (
Expand All @@ -111,10 +132,7 @@ const processSelectedNode = (
drawFillsOnContext(
ctx,
[{ fills: node.fills, opacity: node.opacity }],
1,
1,
1,
1
FOREGROUND_BOX
);
};

Expand Down
File renamed without changes.
9 changes: 9 additions & 0 deletions src/utils/is-layer-visible.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { type FigmaNode } from '~types/figma.ts';
import { nodeHasFills } from '~utils/node-has-fills.ts';
import { notEmpty } from '~utils/not-empty.ts';

export const isLayerVisible = (node: FigmaNode): boolean =>
node.visible === true &&
notEmpty(node.opacity) &&
node.opacity > 0 &&
nodeHasFills(node);
File renamed without changes.

0 comments on commit 887f25e

Please sign in to comment.