@mcp-consultant-tools/figma 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/FigmaService.d.ts +47 -0
- package/build/FigmaService.d.ts.map +1 -0
- package/build/FigmaService.js +108 -0
- package/build/FigmaService.js.map +1 -0
- package/build/figma/extractors/built-in.d.ts +57 -0
- package/build/figma/extractors/built-in.d.ts.map +1 -0
- package/build/figma/extractors/built-in.js +206 -0
- package/build/figma/extractors/built-in.js.map +1 -0
- package/build/figma/extractors/design-extractor.d.ts +7 -0
- package/build/figma/extractors/design-extractor.d.ts.map +1 -0
- package/build/figma/extractors/design-extractor.js +66 -0
- package/build/figma/extractors/design-extractor.js.map +1 -0
- package/build/figma/extractors/index.d.ts +5 -0
- package/build/figma/extractors/index.d.ts.map +1 -0
- package/build/figma/extractors/index.js +11 -0
- package/build/figma/extractors/index.js.map +1 -0
- package/build/figma/extractors/node-walker.d.ts +16 -0
- package/build/figma/extractors/node-walker.d.ts.map +1 -0
- package/build/figma/extractors/node-walker.js +93 -0
- package/build/figma/extractors/node-walker.js.map +1 -0
- package/build/figma/extractors/types.d.ts +73 -0
- package/build/figma/extractors/types.d.ts.map +1 -0
- package/build/figma/extractors/types.js +2 -0
- package/build/figma/extractors/types.js.map +1 -0
- package/build/figma/transformers/component.d.ts +27 -0
- package/build/figma/transformers/component.d.ts.map +1 -0
- package/build/figma/transformers/component.js +29 -0
- package/build/figma/transformers/component.js.map +1 -0
- package/build/figma/transformers/effects.d.ts +9 -0
- package/build/figma/transformers/effects.d.ts.map +1 -0
- package/build/figma/transformers/effects.js +50 -0
- package/build/figma/transformers/effects.js.map +1 -0
- package/build/figma/transformers/layout.d.ts +27 -0
- package/build/figma/transformers/layout.d.ts.map +1 -0
- package/build/figma/transformers/layout.js +203 -0
- package/build/figma/transformers/layout.js.map +1 -0
- package/build/figma/transformers/style.d.ts +120 -0
- package/build/figma/transformers/style.d.ts.map +1 -0
- package/build/figma/transformers/style.js +539 -0
- package/build/figma/transformers/style.js.map +1 -0
- package/build/figma/transformers/text.d.ts +31 -0
- package/build/figma/transformers/text.d.ts.map +1 -0
- package/build/figma/transformers/text.js +34 -0
- package/build/figma/transformers/text.js.map +1 -0
- package/build/figma/utils/common.d.ts +70 -0
- package/build/figma/utils/common.d.ts.map +1 -0
- package/build/figma/utils/common.js +167 -0
- package/build/figma/utils/common.js.map +1 -0
- package/build/figma/utils/fetch-with-retry.d.ts +13 -0
- package/build/figma/utils/fetch-with-retry.d.ts.map +1 -0
- package/build/figma/utils/fetch-with-retry.js +70 -0
- package/build/figma/utils/fetch-with-retry.js.map +1 -0
- package/build/figma/utils/identity.d.ts +23 -0
- package/build/figma/utils/identity.d.ts.map +1 -0
- package/build/figma/utils/identity.js +71 -0
- package/build/figma/utils/identity.js.map +1 -0
- package/build/index.d.ts +20 -0
- package/build/index.d.ts.map +1 -0
- package/build/index.js +88 -0
- package/build/index.js.map +1 -0
- package/package.json +54 -0
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { isVisible } from "../utils/common.js";
|
|
2
|
+
import { hasValue } from "../utils/identity.js";
|
|
3
|
+
/**
|
|
4
|
+
* Extract data from Figma nodes using a flexible, single-pass approach.
|
|
5
|
+
*
|
|
6
|
+
* @param nodes - The Figma nodes to process
|
|
7
|
+
* @param extractors - Array of extractor functions to apply during traversal
|
|
8
|
+
* @param options - Traversal options (filtering, depth limits, etc.)
|
|
9
|
+
* @param globalVars - Global variables for style deduplication
|
|
10
|
+
* @returns Object containing processed nodes and updated global variables
|
|
11
|
+
*/
|
|
12
|
+
export function extractFromDesign(nodes, extractors, options = {}, globalVars = { styles: {} }) {
|
|
13
|
+
const context = {
|
|
14
|
+
globalVars,
|
|
15
|
+
currentDepth: 0,
|
|
16
|
+
};
|
|
17
|
+
const processedNodes = nodes
|
|
18
|
+
.filter((node) => shouldProcessNode(node, options))
|
|
19
|
+
.map((node) => processNodeWithExtractors(node, extractors, context, options))
|
|
20
|
+
.filter((node) => node !== null);
|
|
21
|
+
return {
|
|
22
|
+
nodes: processedNodes,
|
|
23
|
+
globalVars: context.globalVars,
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Process a single node with all provided extractors in one pass.
|
|
28
|
+
*/
|
|
29
|
+
function processNodeWithExtractors(node, extractors, context, options) {
|
|
30
|
+
if (!shouldProcessNode(node, options)) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
// Always include base metadata
|
|
34
|
+
const result = {
|
|
35
|
+
id: node.id,
|
|
36
|
+
name: node.name,
|
|
37
|
+
type: node.type === "VECTOR" ? "IMAGE-SVG" : node.type,
|
|
38
|
+
};
|
|
39
|
+
// Apply all extractors to this node in a single pass
|
|
40
|
+
for (const extractor of extractors) {
|
|
41
|
+
extractor(node, result, context);
|
|
42
|
+
}
|
|
43
|
+
// Handle children recursively
|
|
44
|
+
if (shouldTraverseChildren(node, context, options)) {
|
|
45
|
+
const childContext = {
|
|
46
|
+
...context,
|
|
47
|
+
currentDepth: context.currentDepth + 1,
|
|
48
|
+
parent: node,
|
|
49
|
+
};
|
|
50
|
+
// Use the same pattern as the existing parseNode function
|
|
51
|
+
if (hasValue("children", node) && node.children.length > 0) {
|
|
52
|
+
const children = node.children
|
|
53
|
+
.filter((child) => shouldProcessNode(child, options))
|
|
54
|
+
.map((child) => processNodeWithExtractors(child, extractors, childContext, options))
|
|
55
|
+
.filter((child) => child !== null);
|
|
56
|
+
if (children.length > 0) {
|
|
57
|
+
// Allow custom logic to modify parent and control which children to include
|
|
58
|
+
const childrenToInclude = options.afterChildren
|
|
59
|
+
? options.afterChildren(node, result, children)
|
|
60
|
+
: children;
|
|
61
|
+
if (childrenToInclude.length > 0) {
|
|
62
|
+
result.children = childrenToInclude;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
return result;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Determine if a node should be processed based on filters.
|
|
71
|
+
*/
|
|
72
|
+
function shouldProcessNode(node, options) {
|
|
73
|
+
// Skip invisible nodes
|
|
74
|
+
if (!isVisible(node)) {
|
|
75
|
+
return false;
|
|
76
|
+
}
|
|
77
|
+
// Apply custom node filter if provided
|
|
78
|
+
if (options.nodeFilter && !options.nodeFilter(node)) {
|
|
79
|
+
return false;
|
|
80
|
+
}
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Determine if we should traverse into a node's children.
|
|
85
|
+
*/
|
|
86
|
+
function shouldTraverseChildren(node, context, options) {
|
|
87
|
+
// Check depth limit
|
|
88
|
+
if (options.maxDepth !== undefined && context.currentDepth >= options.maxDepth) {
|
|
89
|
+
return false;
|
|
90
|
+
}
|
|
91
|
+
return true;
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=node-walker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"node-walker.js","sourceRoot":"","sources":["../../../src/figma/extractors/node-walker.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import type { Node as FigmaDocumentNode, Style } from "@figma/rest-api-spec";
|
|
2
|
+
import type { SimplifiedTextStyle } from "../transformers/text.js";
|
|
3
|
+
import type { SimplifiedLayout } from "../transformers/layout.js";
|
|
4
|
+
import type { SimplifiedFill, SimplifiedStroke } from "../transformers/style.js";
|
|
5
|
+
import type { SimplifiedEffects } from "../transformers/effects.js";
|
|
6
|
+
import type { ComponentProperties, SimplifiedComponentDefinition, SimplifiedComponentSetDefinition } from "../transformers/component.js";
|
|
7
|
+
export type StyleTypes = SimplifiedTextStyle | SimplifiedFill[] | SimplifiedLayout | SimplifiedStroke | SimplifiedEffects | string;
|
|
8
|
+
export type GlobalVars = {
|
|
9
|
+
styles: Record<string, StyleTypes>;
|
|
10
|
+
};
|
|
11
|
+
export interface TraversalContext {
|
|
12
|
+
globalVars: GlobalVars & {
|
|
13
|
+
extraStyles?: Record<string, Style>;
|
|
14
|
+
};
|
|
15
|
+
currentDepth: number;
|
|
16
|
+
parent?: FigmaDocumentNode;
|
|
17
|
+
}
|
|
18
|
+
export interface TraversalOptions {
|
|
19
|
+
maxDepth?: number;
|
|
20
|
+
nodeFilter?: (node: FigmaDocumentNode) => boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Called after children are processed, allowing modification of the parent node
|
|
23
|
+
* and control over which children to include in the output.
|
|
24
|
+
*
|
|
25
|
+
* @param node - Original Figma node
|
|
26
|
+
* @param result - SimplifiedNode being built (can be mutated)
|
|
27
|
+
* @param children - Processed children
|
|
28
|
+
* @returns Children to include (return empty array to omit children)
|
|
29
|
+
*/
|
|
30
|
+
afterChildren?: (node: FigmaDocumentNode, result: SimplifiedNode, children: SimplifiedNode[]) => SimplifiedNode[];
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* An extractor function that can modify a SimplifiedNode during traversal.
|
|
34
|
+
*
|
|
35
|
+
* @param node - The current Figma node being processed
|
|
36
|
+
* @param result - SimplifiedNode object being built—this can be mutated inside the extractor
|
|
37
|
+
* @param context - Traversal context including globalVars and parent info. This can also be mutated inside the extractor.
|
|
38
|
+
*/
|
|
39
|
+
export type ExtractorFn = (node: FigmaDocumentNode, result: SimplifiedNode, context: TraversalContext) => void;
|
|
40
|
+
export interface SimplifiedDesign {
|
|
41
|
+
name: string;
|
|
42
|
+
nodes: SimplifiedNode[];
|
|
43
|
+
components: Record<string, SimplifiedComponentDefinition>;
|
|
44
|
+
componentSets: Record<string, SimplifiedComponentSetDefinition>;
|
|
45
|
+
globalVars: GlobalVars;
|
|
46
|
+
}
|
|
47
|
+
export interface SimplifiedNode {
|
|
48
|
+
id: string;
|
|
49
|
+
name: string;
|
|
50
|
+
type: string;
|
|
51
|
+
text?: string;
|
|
52
|
+
textStyle?: string;
|
|
53
|
+
fills?: string;
|
|
54
|
+
styles?: string;
|
|
55
|
+
strokes?: string;
|
|
56
|
+
strokeWeight?: string;
|
|
57
|
+
strokeDashes?: number[];
|
|
58
|
+
strokeWeights?: string;
|
|
59
|
+
effects?: string;
|
|
60
|
+
opacity?: number;
|
|
61
|
+
borderRadius?: string;
|
|
62
|
+
layout?: string;
|
|
63
|
+
componentId?: string;
|
|
64
|
+
componentProperties?: ComponentProperties[];
|
|
65
|
+
children?: SimplifiedNode[];
|
|
66
|
+
}
|
|
67
|
+
export interface BoundingBox {
|
|
68
|
+
x: number;
|
|
69
|
+
y: number;
|
|
70
|
+
width: number;
|
|
71
|
+
height: number;
|
|
72
|
+
}
|
|
73
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/figma/extractors/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/figma/extractors/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { Component, ComponentPropertyType, ComponentSet } from "@figma/rest-api-spec";
|
|
2
|
+
export interface ComponentProperties {
|
|
3
|
+
name: string;
|
|
4
|
+
value: string;
|
|
5
|
+
type: ComponentPropertyType;
|
|
6
|
+
}
|
|
7
|
+
export interface SimplifiedComponentDefinition {
|
|
8
|
+
id: string;
|
|
9
|
+
key: string;
|
|
10
|
+
name: string;
|
|
11
|
+
componentSetId?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface SimplifiedComponentSetDefinition {
|
|
14
|
+
id: string;
|
|
15
|
+
key: string;
|
|
16
|
+
name: string;
|
|
17
|
+
description?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Remove unnecessary component properties and convert to simplified format.
|
|
21
|
+
*/
|
|
22
|
+
export declare function simplifyComponents(aggregatedComponents: Record<string, Component>): Record<string, SimplifiedComponentDefinition>;
|
|
23
|
+
/**
|
|
24
|
+
* Remove unnecessary component set properties and convert to simplified format.
|
|
25
|
+
*/
|
|
26
|
+
export declare function simplifyComponentSets(aggregatedComponentSets: Record<string, ComponentSet>): Record<string, SimplifiedComponentSetDefinition>;
|
|
27
|
+
//# sourceMappingURL=component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/figma/transformers/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE3F,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,qBAAqB,CAAC;CAC7B;AAED,MAAM,WAAW,6BAA6B;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gCAAgC;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAC9C,MAAM,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAY/C;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GACpD,MAAM,CAAC,MAAM,EAAE,gCAAgC,CAAC,CAYlD"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Remove unnecessary component properties and convert to simplified format.
|
|
3
|
+
*/
|
|
4
|
+
export function simplifyComponents(aggregatedComponents) {
|
|
5
|
+
return Object.fromEntries(Object.entries(aggregatedComponents).map(([id, comp]) => [
|
|
6
|
+
id,
|
|
7
|
+
{
|
|
8
|
+
id,
|
|
9
|
+
key: comp.key,
|
|
10
|
+
name: comp.name,
|
|
11
|
+
componentSetId: comp.componentSetId,
|
|
12
|
+
},
|
|
13
|
+
]));
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Remove unnecessary component set properties and convert to simplified format.
|
|
17
|
+
*/
|
|
18
|
+
export function simplifyComponentSets(aggregatedComponentSets) {
|
|
19
|
+
return Object.fromEntries(Object.entries(aggregatedComponentSets).map(([id, set]) => [
|
|
20
|
+
id,
|
|
21
|
+
{
|
|
22
|
+
id,
|
|
23
|
+
key: set.key,
|
|
24
|
+
name: set.name,
|
|
25
|
+
description: set.description,
|
|
26
|
+
},
|
|
27
|
+
]));
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/figma/transformers/component.ts"],"names":[],"mappings":"AAsBA;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAChC,oBAA+C;IAE/C,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;QACvD,EAAE;QACF;YACE,EAAE;YACF,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,cAAc,EAAE,IAAI,CAAC,cAAc;SACpC;KACF,CAAC,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CACnC,uBAAqD;IAErD,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC;QACzD,EAAE;QACF;YACE,EAAE;YACF,GAAG,EAAE,GAAG,CAAC,GAAG;YACZ,IAAI,EAAE,GAAG,CAAC,IAAI;YACd,WAAW,EAAE,GAAG,CAAC,WAAW;SAC7B;KACF,CAAC,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Node as FigmaDocumentNode } from "@figma/rest-api-spec";
|
|
2
|
+
export type SimplifiedEffects = {
|
|
3
|
+
boxShadow?: string;
|
|
4
|
+
filter?: string;
|
|
5
|
+
backdropFilter?: string;
|
|
6
|
+
textShadow?: string;
|
|
7
|
+
};
|
|
8
|
+
export declare function buildSimplifiedEffects(n: FigmaDocumentNode): SimplifiedEffects;
|
|
9
|
+
//# sourceMappingURL=effects.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"effects.d.ts","sourceRoot":"","sources":["../../../src/figma/transformers/effects.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,IAAI,IAAI,iBAAiB,EAC1B,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,iBAAiB,GAAG,iBAAiB,CAyC9E"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { formatRGBAColor } from "./style.js";
|
|
2
|
+
import { hasValue } from "../utils/identity.js";
|
|
3
|
+
export function buildSimplifiedEffects(n) {
|
|
4
|
+
if (!hasValue("effects", n))
|
|
5
|
+
return {};
|
|
6
|
+
const effects = n.effects.filter((e) => e.visible);
|
|
7
|
+
// Handle drop and inner shadows (both go into CSS box-shadow)
|
|
8
|
+
const dropShadows = effects
|
|
9
|
+
.filter((e) => e.type === "DROP_SHADOW")
|
|
10
|
+
.map(simplifyDropShadow);
|
|
11
|
+
const innerShadows = effects
|
|
12
|
+
.filter((e) => e.type === "INNER_SHADOW")
|
|
13
|
+
.map(simplifyInnerShadow);
|
|
14
|
+
const boxShadow = [...dropShadows, ...innerShadows].join(", ");
|
|
15
|
+
// Handle blur effects - separate by CSS property
|
|
16
|
+
// Layer blurs use the CSS 'filter' property
|
|
17
|
+
const filterBlurValues = effects
|
|
18
|
+
.filter((e) => e.type === "LAYER_BLUR")
|
|
19
|
+
.map(simplifyBlur)
|
|
20
|
+
.join(" ");
|
|
21
|
+
// Background blurs use the CSS 'backdrop-filter' property
|
|
22
|
+
const backdropFilterValues = effects
|
|
23
|
+
.filter((e) => e.type === "BACKGROUND_BLUR")
|
|
24
|
+
.map(simplifyBlur)
|
|
25
|
+
.join(" ");
|
|
26
|
+
const result = {};
|
|
27
|
+
if (boxShadow) {
|
|
28
|
+
if (n.type === "TEXT") {
|
|
29
|
+
result.textShadow = boxShadow;
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
result.boxShadow = boxShadow;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
if (filterBlurValues)
|
|
36
|
+
result.filter = filterBlurValues;
|
|
37
|
+
if (backdropFilterValues)
|
|
38
|
+
result.backdropFilter = backdropFilterValues;
|
|
39
|
+
return result;
|
|
40
|
+
}
|
|
41
|
+
function simplifyDropShadow(effect) {
|
|
42
|
+
return `${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${effect.spread ?? 0}px ${formatRGBAColor(effect.color)}`;
|
|
43
|
+
}
|
|
44
|
+
function simplifyInnerShadow(effect) {
|
|
45
|
+
return `inset ${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${effect.spread ?? 0}px ${formatRGBAColor(effect.color)}`;
|
|
46
|
+
}
|
|
47
|
+
function simplifyBlur(effect) {
|
|
48
|
+
return `blur(${effect.radius}px)`;
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=effects.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../src/figma/transformers/effects.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAShD,MAAM,UAAU,sBAAsB,CAAC,CAAoB;IACzD,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;QAAE,OAAO,EAAE,CAAC;IACvC,MAAM,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAEnD,8DAA8D;IAC9D,MAAM,WAAW,GAAG,OAAO;SACxB,MAAM,CAAC,CAAC,CAAC,EAAyB,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC;SAC9D,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAE3B,MAAM,YAAY,GAAG,OAAO;SACzB,MAAM,CAAC,CAAC,CAAC,EAA0B,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,cAAc,CAAC;SAChE,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAE5B,MAAM,SAAS,GAAG,CAAC,GAAG,WAAW,EAAE,GAAG,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE/D,iDAAiD;IACjD,4CAA4C;IAC5C,MAAM,gBAAgB,GAAG,OAAO;SAC7B,MAAM,CAAC,CAAC,CAAC,EAAmB,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC;SACvD,GAAG,CAAC,YAAY,CAAC;SACjB,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,0DAA0D;IAC1D,MAAM,oBAAoB,GAAG,OAAO;SACjC,MAAM,CAAC,CAAC,CAAC,EAAmB,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,iBAAiB,CAAC;SAC5D,GAAG,CAAC,YAAY,CAAC;SACjB,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,MAAM,GAAsB,EAAE,CAAC;IAErC,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACtB,MAAM,CAAC,UAAU,GAAG,SAAS,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;QAC/B,CAAC;IACH,CAAC;IACD,IAAI,gBAAgB;QAAE,MAAM,CAAC,MAAM,GAAG,gBAAgB,CAAC;IACvD,IAAI,oBAAoB;QAAE,MAAM,CAAC,cAAc,GAAG,oBAAoB,CAAC;IAEvE,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAwB;IAClD,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,MAAM,CAAC,MAAM,MAAM,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AACjI,CAAC;AAED,SAAS,mBAAmB,CAAC,MAAyB;IACpD,OAAO,SAAS,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,MAAM,CAAC,MAAM,MAAM,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AACvI,CAAC;AAED,SAAS,YAAY,CAAC,MAAkB;IACtC,OAAO,QAAQ,MAAM,CAAC,MAAM,KAAK,CAAC;AACpC,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { Node as FigmaDocumentNode } from "@figma/rest-api-spec";
|
|
2
|
+
export interface SimplifiedLayout {
|
|
3
|
+
mode: "none" | "row" | "column";
|
|
4
|
+
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "baseline" | "stretch";
|
|
5
|
+
alignItems?: "flex-start" | "flex-end" | "center" | "space-between" | "baseline" | "stretch";
|
|
6
|
+
alignSelf?: "flex-start" | "flex-end" | "center" | "stretch";
|
|
7
|
+
wrap?: boolean;
|
|
8
|
+
gap?: string;
|
|
9
|
+
locationRelativeToParent?: {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
};
|
|
13
|
+
dimensions?: {
|
|
14
|
+
width?: number;
|
|
15
|
+
height?: number;
|
|
16
|
+
aspectRatio?: number;
|
|
17
|
+
};
|
|
18
|
+
padding?: string;
|
|
19
|
+
sizing?: {
|
|
20
|
+
horizontal?: "fixed" | "fill" | "hug";
|
|
21
|
+
vertical?: "fixed" | "fill" | "hug";
|
|
22
|
+
};
|
|
23
|
+
overflowScroll?: ("x" | "y")[];
|
|
24
|
+
position?: "absolute";
|
|
25
|
+
}
|
|
26
|
+
export declare function buildSimplifiedLayout(n: FigmaDocumentNode, parent?: FigmaDocumentNode): SimplifiedLayout;
|
|
27
|
+
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/figma/transformers/layout.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,IAAI,IAAI,iBAAiB,EAG1B,MAAM,sBAAsB,CAAC;AAG9B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IAChC,cAAc,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,GAAG,UAAU,GAAG,SAAS,CAAC;IACjG,UAAU,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,GAAG,UAAU,GAAG,SAAS,CAAC;IAC7F,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE;QACzB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;QACtC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;KACrC,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,UAAU,CAAC;CACvB;AAGD,wBAAgB,qBAAqB,CACnC,CAAC,EAAE,iBAAiB,EACpB,MAAM,CAAC,EAAE,iBAAiB,GACzB,gBAAgB,CAKlB"}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { isInAutoLayoutFlow, isFrame, isLayout, isRectangle } from "../utils/identity.js";
|
|
2
|
+
import { generateCSSShorthand, pixelRound } from "../utils/common.js";
|
|
3
|
+
// Convert Figma's layout config into a more typical flex-like schema
|
|
4
|
+
export function buildSimplifiedLayout(n, parent) {
|
|
5
|
+
const frameValues = buildSimplifiedFrameValues(n);
|
|
6
|
+
const layoutValues = buildSimplifiedLayoutValues(n, parent, frameValues.mode) || {};
|
|
7
|
+
return { ...frameValues, ...layoutValues };
|
|
8
|
+
}
|
|
9
|
+
// For flex layouts, process alignment and sizing
|
|
10
|
+
function convertAlign(axisAlign, stretch) {
|
|
11
|
+
if (stretch && stretch.mode !== "none") {
|
|
12
|
+
const { children, mode, axis } = stretch;
|
|
13
|
+
// Compute whether to check horizontally or vertically based on axis and direction
|
|
14
|
+
const direction = getDirection(axis, mode);
|
|
15
|
+
const shouldStretch = children.length > 0 &&
|
|
16
|
+
children.reduce((shouldStretch, c) => {
|
|
17
|
+
if (!shouldStretch)
|
|
18
|
+
return false;
|
|
19
|
+
if ("layoutPositioning" in c && c.layoutPositioning === "ABSOLUTE")
|
|
20
|
+
return true;
|
|
21
|
+
if (direction === "horizontal") {
|
|
22
|
+
return "layoutSizingHorizontal" in c && c.layoutSizingHorizontal === "FILL";
|
|
23
|
+
}
|
|
24
|
+
else if (direction === "vertical") {
|
|
25
|
+
return "layoutSizingVertical" in c && c.layoutSizingVertical === "FILL";
|
|
26
|
+
}
|
|
27
|
+
return false;
|
|
28
|
+
}, true);
|
|
29
|
+
if (shouldStretch)
|
|
30
|
+
return "stretch";
|
|
31
|
+
}
|
|
32
|
+
switch (axisAlign) {
|
|
33
|
+
case "MIN":
|
|
34
|
+
// MIN, AKA flex-start, is the default alignment
|
|
35
|
+
return undefined;
|
|
36
|
+
case "MAX":
|
|
37
|
+
return "flex-end";
|
|
38
|
+
case "CENTER":
|
|
39
|
+
return "center";
|
|
40
|
+
case "SPACE_BETWEEN":
|
|
41
|
+
return "space-between";
|
|
42
|
+
case "BASELINE":
|
|
43
|
+
return "baseline";
|
|
44
|
+
default:
|
|
45
|
+
return undefined;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
function convertSelfAlign(align) {
|
|
49
|
+
switch (align) {
|
|
50
|
+
case "MIN":
|
|
51
|
+
// MIN, AKA flex-start, is the default alignment
|
|
52
|
+
return undefined;
|
|
53
|
+
case "MAX":
|
|
54
|
+
return "flex-end";
|
|
55
|
+
case "CENTER":
|
|
56
|
+
return "center";
|
|
57
|
+
case "STRETCH":
|
|
58
|
+
return "stretch";
|
|
59
|
+
default:
|
|
60
|
+
return undefined;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
// interpret sizing
|
|
64
|
+
function convertSizing(s) {
|
|
65
|
+
if (s === "FIXED")
|
|
66
|
+
return "fixed";
|
|
67
|
+
if (s === "FILL")
|
|
68
|
+
return "fill";
|
|
69
|
+
if (s === "HUG")
|
|
70
|
+
return "hug";
|
|
71
|
+
return undefined;
|
|
72
|
+
}
|
|
73
|
+
function getDirection(axis, mode) {
|
|
74
|
+
switch (axis) {
|
|
75
|
+
case "primary":
|
|
76
|
+
switch (mode) {
|
|
77
|
+
case "row":
|
|
78
|
+
return "horizontal";
|
|
79
|
+
case "column":
|
|
80
|
+
return "vertical";
|
|
81
|
+
}
|
|
82
|
+
case "counter":
|
|
83
|
+
switch (mode) {
|
|
84
|
+
case "row":
|
|
85
|
+
return "horizontal";
|
|
86
|
+
case "column":
|
|
87
|
+
return "vertical";
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
function buildSimplifiedFrameValues(n) {
|
|
92
|
+
if (!isFrame(n)) {
|
|
93
|
+
return { mode: "none" };
|
|
94
|
+
}
|
|
95
|
+
const frameValues = {
|
|
96
|
+
mode: !n.layoutMode || n.layoutMode === "NONE"
|
|
97
|
+
? "none"
|
|
98
|
+
: n.layoutMode === "HORIZONTAL"
|
|
99
|
+
? "row"
|
|
100
|
+
: "column",
|
|
101
|
+
};
|
|
102
|
+
const overflowScroll = [];
|
|
103
|
+
if (n.overflowDirection?.includes("HORIZONTAL"))
|
|
104
|
+
overflowScroll.push("x");
|
|
105
|
+
if (n.overflowDirection?.includes("VERTICAL"))
|
|
106
|
+
overflowScroll.push("y");
|
|
107
|
+
if (overflowScroll.length > 0)
|
|
108
|
+
frameValues.overflowScroll = overflowScroll;
|
|
109
|
+
if (frameValues.mode === "none") {
|
|
110
|
+
return frameValues;
|
|
111
|
+
}
|
|
112
|
+
// TODO: convertAlign should be two functions, one for justifyContent and one for alignItems
|
|
113
|
+
frameValues.justifyContent = convertAlign(n.primaryAxisAlignItems ?? "MIN", {
|
|
114
|
+
children: n.children,
|
|
115
|
+
axis: "primary",
|
|
116
|
+
mode: frameValues.mode,
|
|
117
|
+
});
|
|
118
|
+
frameValues.alignItems = convertAlign(n.counterAxisAlignItems ?? "MIN", {
|
|
119
|
+
children: n.children,
|
|
120
|
+
axis: "counter",
|
|
121
|
+
mode: frameValues.mode,
|
|
122
|
+
});
|
|
123
|
+
frameValues.alignSelf = convertSelfAlign(n.layoutAlign);
|
|
124
|
+
// Only include wrap if it's set to WRAP, since flex layouts don't default to wrapping
|
|
125
|
+
frameValues.wrap = n.layoutWrap === "WRAP" ? true : undefined;
|
|
126
|
+
frameValues.gap = n.itemSpacing ? `${n.itemSpacing ?? 0}px` : undefined;
|
|
127
|
+
// gather padding
|
|
128
|
+
if (n.paddingTop || n.paddingBottom || n.paddingLeft || n.paddingRight) {
|
|
129
|
+
frameValues.padding = generateCSSShorthand({
|
|
130
|
+
top: n.paddingTop ?? 0,
|
|
131
|
+
right: n.paddingRight ?? 0,
|
|
132
|
+
bottom: n.paddingBottom ?? 0,
|
|
133
|
+
left: n.paddingLeft ?? 0,
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
return frameValues;
|
|
137
|
+
}
|
|
138
|
+
function buildSimplifiedLayoutValues(n, parent, mode) {
|
|
139
|
+
if (!isLayout(n))
|
|
140
|
+
return undefined;
|
|
141
|
+
const layoutValues = { mode };
|
|
142
|
+
layoutValues.sizing = {
|
|
143
|
+
horizontal: convertSizing(n.layoutSizingHorizontal),
|
|
144
|
+
vertical: convertSizing(n.layoutSizingVertical),
|
|
145
|
+
};
|
|
146
|
+
// Only include positioning-related properties if parent layout isn't flex or if the node is absolute
|
|
147
|
+
if (
|
|
148
|
+
// If parent is a frame but not an AutoLayout, or if the node is absolute, include positioning-related properties
|
|
149
|
+
isFrame(parent) &&
|
|
150
|
+
!isInAutoLayoutFlow(n, parent)) {
|
|
151
|
+
if (n.layoutPositioning === "ABSOLUTE") {
|
|
152
|
+
layoutValues.position = "absolute";
|
|
153
|
+
}
|
|
154
|
+
if (n.absoluteBoundingBox && parent.absoluteBoundingBox) {
|
|
155
|
+
layoutValues.locationRelativeToParent = {
|
|
156
|
+
x: pixelRound(n.absoluteBoundingBox.x - parent.absoluteBoundingBox.x),
|
|
157
|
+
y: pixelRound(n.absoluteBoundingBox.y - parent.absoluteBoundingBox.y),
|
|
158
|
+
};
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
// Handle dimensions based on layout growth and alignment
|
|
162
|
+
if (isRectangle("absoluteBoundingBox", n)) {
|
|
163
|
+
const dimensions = {};
|
|
164
|
+
// Only include dimensions that aren't meant to stretch
|
|
165
|
+
if (mode === "row") {
|
|
166
|
+
// AutoLayout row, only include dimensions if the node is not growing
|
|
167
|
+
if (!n.layoutGrow && n.layoutSizingHorizontal == "FIXED")
|
|
168
|
+
dimensions.width = n.absoluteBoundingBox.width;
|
|
169
|
+
if (n.layoutAlign !== "STRETCH" && n.layoutSizingVertical == "FIXED")
|
|
170
|
+
dimensions.height = n.absoluteBoundingBox.height;
|
|
171
|
+
}
|
|
172
|
+
else if (mode === "column") {
|
|
173
|
+
// AutoLayout column, only include dimensions if the node is not growing
|
|
174
|
+
if (n.layoutAlign !== "STRETCH" && n.layoutSizingHorizontal == "FIXED")
|
|
175
|
+
dimensions.width = n.absoluteBoundingBox.width;
|
|
176
|
+
if (!n.layoutGrow && n.layoutSizingVertical == "FIXED")
|
|
177
|
+
dimensions.height = n.absoluteBoundingBox.height;
|
|
178
|
+
if (n.preserveRatio) {
|
|
179
|
+
dimensions.aspectRatio = n.absoluteBoundingBox?.width / n.absoluteBoundingBox?.height;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
else {
|
|
183
|
+
// Node is not an AutoLayout. Include dimensions if the node is not growing (which it should never be)
|
|
184
|
+
if (!n.layoutSizingHorizontal || n.layoutSizingHorizontal === "FIXED") {
|
|
185
|
+
dimensions.width = n.absoluteBoundingBox.width;
|
|
186
|
+
}
|
|
187
|
+
if (!n.layoutSizingVertical || n.layoutSizingVertical === "FIXED") {
|
|
188
|
+
dimensions.height = n.absoluteBoundingBox.height;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
if (Object.keys(dimensions).length > 0) {
|
|
192
|
+
if (dimensions.width) {
|
|
193
|
+
dimensions.width = pixelRound(dimensions.width);
|
|
194
|
+
}
|
|
195
|
+
if (dimensions.height) {
|
|
196
|
+
dimensions.height = pixelRound(dimensions.height);
|
|
197
|
+
}
|
|
198
|
+
layoutValues.dimensions = dimensions;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
return layoutValues;
|
|
202
|
+
}
|
|
203
|
+
//# sourceMappingURL=layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/figma/transformers/layout.ts"],"names":[],"mappings":"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"}
|