From 887f25e14da9037ab1ad8e3d23399b5b0213ea8b Mon Sep 17 00:00:00 2001 From: Yuri Mikhin Date: Thu, 28 Sep 2023 18:26:23 +0300 Subject: [PATCH] Filter for selected nodes without fills. --- .../services/figma/nodes/create-figma-node.ts | 2 +- .../figma/nodes/specs/get-node-fills.spec.ts | 2 +- .../figma/nodes/specs/node-has-fills.spec.ts | 2 +- .../build-general-selection-payload.ts | 11 ++++-- .../payload/build-pair-selection-payload.ts | 5 ++- .../services/colors/summarize-the-colors.ts | 38 ++++++++++++++----- .../figma/nodes => utils}/get-node-fills.ts | 0 src/utils/is-layer-visible.ts | 9 +++++ .../figma/nodes => utils}/node-has-fills.ts | 0 9 files changed, 51 insertions(+), 18 deletions(-) rename src/{api/services/figma/nodes => utils}/get-node-fills.ts (100%) create mode 100644 src/utils/is-layer-visible.ts rename src/{api/services/figma/nodes => utils}/node-has-fills.ts (100%) diff --git a/src/api/services/figma/nodes/create-figma-node.ts b/src/api/services/figma/nodes/create-figma-node.ts index 3264b62..f36d67d 100644 --- a/src/api/services/figma/nodes/create-figma-node.ts +++ b/src/api/services/figma/nodes/create-figma-node.ts @@ -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'; diff --git a/src/api/services/figma/nodes/specs/get-node-fills.spec.ts b/src/api/services/figma/nodes/specs/get-node-fills.spec.ts index 549056c..134c700 100644 --- a/src/api/services/figma/nodes/specs/get-node-fills.spec.ts +++ b/src/api/services/figma/nodes/specs/get-node-fills.spec.ts @@ -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', () => { diff --git a/src/api/services/figma/nodes/specs/node-has-fills.spec.ts b/src/api/services/figma/nodes/specs/node-has-fills.spec.ts index d3ec07e..af97c63 100644 --- a/src/api/services/figma/nodes/specs/node-has-fills.spec.ts +++ b/src/api/services/figma/nodes/specs/node-has-fills.spec.ts @@ -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', () => { diff --git a/src/api/services/payload/build-general-selection-payload.ts b/src/api/services/payload/build-general-selection-payload.ts index a2490ae..697a798 100644 --- a/src/api/services/payload/build-general-selection-payload.ts +++ b/src/api/services/payload/build-general-selection-payload.ts @@ -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, diff --git a/src/api/services/payload/build-pair-selection-payload.ts b/src/api/services/payload/build-pair-selection-payload.ts index 7170d99..e2b370f 100644 --- a/src/api/services/payload/build-pair-selection-payload.ts +++ b/src/api/services/payload/build-pair-selection-payload.ts @@ -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 = ( @@ -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 { diff --git a/src/ui/services/colors/summarize-the-colors.ts b/src/ui/services/colors/summarize-the-colors.ts index 154a073..e1595b6 100644 --- a/src/ui/services/colors/summarize-the-colors.ts +++ b/src/ui/services/colors/summarize-the-colors.ts @@ -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' @@ -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( { @@ -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) => { @@ -101,7 +122,7 @@ const processIntersectingNodes = ( .reverse() .flat(); - drawFillsOnContext(ctx, fillsFromIntersectingNodes, 0, 0, 2, 2); + drawFillsOnContext(ctx, fillsFromIntersectingNodes, BACKGROUND_BOX); }; const processSelectedNode = ( @@ -111,10 +132,7 @@ const processSelectedNode = ( drawFillsOnContext( ctx, [{ fills: node.fills, opacity: node.opacity }], - 1, - 1, - 1, - 1 + FOREGROUND_BOX ); }; diff --git a/src/api/services/figma/nodes/get-node-fills.ts b/src/utils/get-node-fills.ts similarity index 100% rename from src/api/services/figma/nodes/get-node-fills.ts rename to src/utils/get-node-fills.ts diff --git a/src/utils/is-layer-visible.ts b/src/utils/is-layer-visible.ts new file mode 100644 index 0000000..61e3bfe --- /dev/null +++ b/src/utils/is-layer-visible.ts @@ -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); diff --git a/src/api/services/figma/nodes/node-has-fills.ts b/src/utils/node-has-fills.ts similarity index 100% rename from src/api/services/figma/nodes/node-has-fills.ts rename to src/utils/node-has-fills.ts