Move modules and fix context.

evilmartians · Nov 10, 2023 · f4c9223 · f4c9223
1 parent f0a8408
commit f4c9223
Show file tree

Hide file tree

Showing 23 changed files with 72 additions and 70 deletions.
diff --git a/src/api/services/figma/intersections/get-intersecting-nodes.ts b/src/api/services/figma/intersections/get-intersecting-nodes.ts
@@ -1,7 +1,7 @@
 import { getSiblingsThatAreBelowByZIndex } from '~api/services/figma/intersections/get-siblings-that-are-below-by-z-index.ts';
 import { traverseAndCheckIntersections } from '~api/services/figma/intersections/traverse-and-check-intersections.ts';
 import { createPolychromNode } from '~api/services/figma/nodes/create-polychrom-node.ts';
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 
 export const getIntersectingNodes = (
   selectedNode: SceneNode

diff --git a/src/api/services/figma/intersections/traverse-and-check-intersections.ts b/src/api/services/figma/intersections/traverse-and-check-intersections.ts
@@ -1,5 +1,5 @@
 import { createPolychromNode } from '~api/services/figma/nodes/create-polychrom-node.ts';
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 
 import { areNodesIntersecting } from './are-nodes-intersecting.ts';
 import { getSiblingsThatAreBelowByZIndex } from './get-siblings-that-are-below-by-z-index.ts';

diff --git a/src/api/services/figma/nodes/create-polychrom-node.ts b/src/api/services/figma/nodes/create-polychrom-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 PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 import { converter } from 'culori';
 import { formatHex } from 'culori/fn';
 

diff --git a/src/api/services/figma/nodes/get-node-fills.ts b/src/api/services/figma/nodes/get-node-fills.ts
@@ -1,4 +1,4 @@
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 
 export const getNodeFills = (
   node: PageNode | PolychromNode | SceneNode

diff --git a/src/api/services/figma/nodes/has-only-valid-blend-modes.ts b/src/api/services/figma/nodes/has-only-valid-blend-modes.ts
@@ -1,4 +1,5 @@
-import { type FigmaPaint, type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
+import { type FigmaPaint } from '~types/figma.ts';
 import { flattenPolychromNodesTree } from '~utils/figma/flatten-polychrom-nodes-tree.ts';
 import { isVisibleSolidFill } from '~utils/figma/is-visible-solid-fill.ts';
 import { isEmpty } from '~utils/not-empty.ts';

diff --git a/src/api/services/figma/nodes/is-valid-for-background.ts b/src/api/services/figma/nodes/is-valid-for-background.ts
@@ -1,4 +1,4 @@
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 import { flattenPolychromNodesTree } from '~utils/figma/flatten-polychrom-nodes-tree.ts';
 import { getActualFill } from '~utils/figma/get-actual-fill.ts';
 import { getActualNode } from '~utils/figma/get-actual-node.ts';

diff --git a/src/api/services/figma/nodes/map-tree.ts b/src/api/services/figma/nodes/map-tree.ts
@@ -1,4 +1,4 @@
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 
 export const mapPolychromNodeTree = (
   node: PolychromNode,

diff --git a/src/api/services/payload/build-general-selection-payload.ts b/src/api/services/payload/build-general-selection-payload.ts
@@ -2,7 +2,7 @@ import { getIntersectingNodes } from '~api/services/figma/intersections/get-inte
 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 PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 import {
   type SelectionChangeEvent,
   SelectionMessageTypes,

diff --git a/src/types/common.ts b/src/types/common.ts
@@ -1,8 +1,21 @@
+import { type FigmaPaint } from '~types/figma.ts';
 import { type Oklch } from 'culori/fn';
 
 export interface UIColor {
   hex: string;
   oklch: Oklch;
 }
 
-export type ColorSpace = 'DISPLAY_P3' | 'LEGACY' | 'SRGB';
+export interface PolychromNode {
+  blendMode: BlendMode;
+  children: PolychromNode[];
+  fills: FigmaPaint[];
+  id: string;
+  isSelected?: boolean;
+  name: string;
+  nestingLevel: number;
+  opacity?: number;
+  parents: readonly SceneNode[];
+  visible?: boolean;
+  zIndex?: number;
+}
diff --git a/src/types/figma.ts b/src/types/figma.ts
@@ -2,16 +2,4 @@ import { type UIColor } from '~types/common.ts';
 
 export type FigmaPaint = Paint | (SolidPaint & UIColor);
 
-export interface PolychromNode {
-  blendMode: BlendMode;
-  children: PolychromNode[];
-  fills: FigmaPaint[];
-  id: string;
-  isSelected?: boolean;
-  name: string;
-  nestingLevel: number;
-  opacity?: number;
-  parents: readonly SceneNode[];
-  visible?: boolean;
-  zIndex?: number;
-}
+export type FigmaColorSpace = 'DISPLAY_P3' | 'LEGACY' | 'SRGB';
diff --git a/src/types/messages.ts b/src/types/messages.ts
@@ -1,5 +1,5 @@
-import { type ColorSpace } from '~types/common.ts';
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
+import { type FigmaColorSpace } from '~types/figma.ts';
 
 import { type ColorSpaceDisplayModes } from '../constants.ts';
 
@@ -24,12 +24,12 @@ export enum SelectionMessageTypes {
 }
 
 export interface SelectionChangePayload {
-  colorSpace: ColorSpace;
+  colorSpace: FigmaColorSpace;
   selectedNodePairs: PolychromNode[];
 }
 
 export interface SelectionChangeMessage {
-  colorSpace: ColorSpace;
+  colorSpace: FigmaColorSpace;
   text: SelectionMessageTypes;
 }
 

diff --git a/src/ui/services/blend/blend-colors.ts b/src/ui/services/blend/blend-colors.ts
@@ -1,5 +1,5 @@
-import { type ColorSpace } from '~types/common.ts';
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
+import { type FigmaColorSpace } from '~types/figma.ts';
 import { isSupportsOKLCH } from '~ui/constants.ts';
 import { formatColorData } from '~ui/services/blend/format-color-data.ts';
 import { getColorData } from '~ui/services/blend/get-color-data.ts';
@@ -29,48 +29,50 @@ const FOREGROUND_BOX = {
   width: 10,
 };
 
-export const CanvasColorSpace: Record<ColorSpace, 'display-p3' | 'srgb'> = {
-  DISPLAY_P3: 'display-p3',
-  LEGACY: 'srgb',
-  SRGB: 'srgb',
-};
+export const CanvasColorSpace: Record<FigmaColorSpace, 'display-p3' | 'srgb'> =
+  {
+    DISPLAY_P3: 'display-p3',
+    LEGACY: 'srgb',
+    SRGB: 'srgb',
+  };
 
 export type ContrastConclusionList = ContrastConclusion[];
 
 export const blendColors = async (
   pairs: PolychromNode[],
-  colorSpace: ColorSpace
+  figmaColorSpace: FigmaColorSpace
 ): Promise<ContrastConclusionList> => {
   const processedPairs = await Promise.all(
-    pairs.map(async (pair) => await blendSelectionPair(pair, colorSpace))
+    pairs.map(async (pair) => await blendSelectionPair(pair, figmaColorSpace))
   );
 
   return processedPairs.filter(notEmpty);
 };
 
 const blendSelectionPair = async (
   pair: PolychromNode,
-  colorSpace: ColorSpace
+  figmaColorSpace: FigmaColorSpace
 ): Promise<ContrastConclusion | null> => {
-  const forcedColorSpace = isSupportsOKLCH ? 'DISPLAY_P3' : 'SRGB';
-
-  const canvas = document.createElement('canvas');
+  const canvas = new OffscreenCanvas(
+    BACKGROUND_BOX.width,
+    BACKGROUND_BOX.height
+  );
 
   const ctx = canvas.getContext('2d', {
-    colorSpace: 'srgb',
+    colorSpace: isSupportsOKLCH ? CanvasColorSpace[figmaColorSpace] : 'srgb',
     willReadFrequently: true,
   });
 
   if (isEmpty(ctx)) return null;
 
-  await drawNodesOnContext(ctx, pair, forcedColorSpace);
+  await drawNodesOnContext(ctx, pair, figmaColorSpace);
 
   const bgColorData = getColorData(
     getFillFromCtx(
       ctx,
       BACKGROUND_BOX.eyeDropperX,
       BACKGROUND_BOX.eyeDropperY,
-      colorSpace
+      figmaColorSpace
     )
   );
 
@@ -79,7 +81,7 @@ const blendSelectionPair = async (
       ctx,
       FOREGROUND_BOX.eyeDropperX,
       FOREGROUND_BOX.eyeDropperY,
-      colorSpace
+      figmaColorSpace
     )
   );
 
@@ -95,15 +97,13 @@ const blendSelectionPair = async (
   const apcaScore = calculateApcaScore(
     fgColorData,
     bgColorData,
-    forcedColorSpace
+    figmaColorSpace
   );
 
   const nodeId = notEmpty(selectedNode.id)
     ? formatPolychromNodeId(selectedNode.id)
     : nanoid();
 
-  ctx.canvas.remove();
-
   return {
     apca: apcaScore,
     bg: formatColorData(bgColorData, isBgBlended),
@@ -113,9 +113,9 @@ const blendSelectionPair = async (
 };
 
 const drawNodesOnContext = async (
-  ctx: CanvasRenderingContext2D,
+  ctx: OffscreenCanvasRenderingContext2D,
   pair: PolychromNode,
-  colorSpace: ColorSpace
+  colorSpace: FigmaColorSpace
 ): Promise<void> => {
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 

diff --git a/src/ui/services/blend/determine-fill-style.ts b/src/ui/services/blend/determine-fill-style.ts
@@ -1,10 +1,9 @@
-import { type ColorSpace } from '~types/common.ts';
-import { type FigmaPaint } from '~types/figma.ts';
+import { type FigmaColorSpace, type FigmaPaint } from '~types/figma.ts';
 import { formatHex } from 'culori/fn';
 
 export const determineFillStyle = (
   fill: FigmaPaint,
-  colorSpace: ColorSpace
+  colorSpace: FigmaColorSpace
 ): string | undefined => {
   if (fill.type === 'SOLID') {
     const { b, g, r } = fill.color;

diff --git a/src/ui/services/blend/is-blended-fill.ts b/src/ui/services/blend/is-blended-fill.ts
@@ -1,4 +1,5 @@
-import { type FigmaPaint, type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
+import { type FigmaPaint } from '~types/figma.ts';
 import { notEmpty } from '~utils/not-empty.ts';
 
 export const isBlendedFill = (

diff --git a/src/ui/services/canvas/get-fill-from-ctx.ts b/src/ui/services/canvas/get-fill-from-ctx.ts
@@ -1,13 +1,14 @@
-import { type ColorSpace } from '~types/common.ts';
+import { type FigmaColorSpace } from '~types/figma.ts';
 import { isSupportsOKLCH } from '~ui/constants.ts';
 import { CanvasColorSpace } from '~ui/services/blend/blend-colors.ts';
 
 export const getFillFromCtx = (
-  ctx: CanvasRenderingContext2D,
+  ctx: OffscreenCanvasRenderingContext2D,
   x: number,
   y: number,
-  colorSpace: ColorSpace
-): Uint8ClampedArray =>
-  ctx.getImageData(x, y, 1, 1, {
+  colorSpace: FigmaColorSpace
+): Uint8ClampedArray => {
+  return ctx.getImageData(x, y, 1, 1, {
     colorSpace: isSupportsOKLCH ? CanvasColorSpace[colorSpace] : 'srgb',
   }).data;
+};
diff --git a/src/ui/services/canvas/render-svg-on-canvas.ts b/src/ui/services/canvas/render-svg-on-canvas.ts
@@ -1,5 +1,5 @@
 export const renderSvgOnCanvas = async (
-  ctx: CanvasRenderingContext2D,
+  ctx: OffscreenCanvasRenderingContext2D,
   svg: SVGSVGElement
 ): Promise<void> => {
   await new Promise((resolve) => {

diff --git a/src/ui/services/figma/find-fg-and-bg-nodes.ts b/src/ui/services/figma/find-fg-and-bg-nodes.ts
@@ -1,4 +1,4 @@
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 import { flattenPolychromNodesTree } from '~utils/figma/flatten-polychrom-nodes-tree.ts';
 import { getActualNode } from '~utils/figma/get-actual-node.ts';
 import { sortByDepthAndOrder } from '~utils/figma/sort-by-depth-and-order.ts';

diff --git a/src/ui/services/svg/draw-fill-as-rect.ts b/src/ui/services/svg/draw-fill-as-rect.ts
@@ -1,5 +1,4 @@
-import { type ColorSpace } from '~types/common.ts';
-import { type FigmaPaint } from '~types/figma.ts';
+import { type FigmaColorSpace, type FigmaPaint } from '~types/figma.ts';
 import { mapFigmaBlendToCanvas } from '~ui/services/blend-modes/map-figma-blend-to-canvas.ts';
 import { determineFillStyle } from '~ui/services/blend/determine-fill-style.ts';
 import { isEmpty, notEmpty } from '~utils/not-empty.ts';
@@ -12,7 +11,7 @@ export interface CanvasRect {
 export const drawFillAsRect = (
   fill: FigmaPaint,
   rectBox: CanvasRect,
-  colorSpace: ColorSpace
+  colorSpace: FigmaColorSpace
 ): null | SVGGElement => {
   const svgRect = document.createElementNS(
     'http://www.w3.org/2000/svg',

diff --git a/src/ui/services/svg/draw-nodes-on-svg.ts b/src/ui/services/svg/draw-nodes-on-svg.ts
@@ -1,5 +1,5 @@
-import { type ColorSpace } from '~types/common.ts';
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
+import { type FigmaColorSpace } from '~types/figma.ts';
 import { mapFigmaBlendToCanvas } from '~ui/services/blend-modes/map-figma-blend-to-canvas.ts';
 import {
   type CanvasRect,
@@ -13,7 +13,7 @@ export const drawNodesOnSvg = (
   pair: PolychromNode,
   foregroundBox: CanvasRect,
   backgroundBox: CanvasRect,
-  colorSpace: ColorSpace
+  colorSpace: FigmaColorSpace
 ): void => {
   const drawNode = (node: PolychromNode, parentGroup: SVGGElement): void => {
     const svgGroup = document.createElementNS(

diff --git a/src/utils/apca/calculate-apca-score.ts b/src/utils/apca/calculate-apca-score.ts
@@ -1,11 +1,11 @@
-import { type ColorSpace } from '~types/common.ts';
+import { type FigmaColorSpace } from '~types/figma.ts';
 import { convertDecimalRGBto255Scale } from '~utils/colors/formatters.ts';
 import { APCAcontrast, displayP3toY, sRGBtoY } from 'apca-w3';
 
 export const calculateApcaScore = (
   fg: RGB,
   bg: RGB,
-  colorSpace: ColorSpace
+  colorSpace: FigmaColorSpace
 ): number => {
   if (colorSpace === 'DISPLAY_P3') {
     const fgY = displayP3toY([fg.r, fg.g, fg.b]);

diff --git a/src/utils/figma/flatten-polychrom-nodes-tree.ts b/src/utils/figma/flatten-polychrom-nodes-tree.ts
@@ -1,4 +1,4 @@
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 
 export const flattenPolychromNodesTree = (
   nodesTree: PolychromNode,

diff --git a/src/utils/figma/get-actual-node.ts b/src/utils/figma/get-actual-node.ts
@@ -1,4 +1,4 @@
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 import { notEmpty } from '~utils/not-empty.ts';
 
 export const getActualNode = (

diff --git a/src/utils/figma/sort-by-depth-and-order.ts b/src/utils/figma/sort-by-depth-and-order.ts
@@ -1,4 +1,4 @@
-import { type PolychromNode } from '~types/figma.ts';
+import { type PolychromNode } from '~types/common.ts';
 
 // the first node always be the selected node by the user
 // because of the combination of the level and the z-index.