|
| 1 | +import { StyledTextSegmentSubset, ParentNode, AltNode } from "types"; |
| 2 | +import { |
| 3 | + assignParent, |
| 4 | + isNotEmpty, |
| 5 | + assignRectangleType, |
| 6 | + assignChildren, |
| 7 | +} from "./altNodeUtils"; |
| 8 | +import { curry } from "../common/curry"; |
| 9 | + |
| 10 | +export const isTypeOrGroupOfTypes = curry( |
| 11 | + (matchTypes: NodeType[], node: SceneNode): boolean => { |
| 12 | + if (node.visible === false || matchTypes.includes(node.type)) return true; |
| 13 | + |
| 14 | + if ("children" in node) { |
| 15 | + for (let i = 0; i < node.children.length; i++) { |
| 16 | + const childNode = node.children[i]; |
| 17 | + const result = isTypeOrGroupOfTypes(matchTypes, childNode); |
| 18 | + if (result) continue; |
| 19 | + // child is false |
| 20 | + return false; |
| 21 | + } |
| 22 | + // all children are true |
| 23 | + return true; |
| 24 | + } |
| 25 | + |
| 26 | + // not group or vector |
| 27 | + return false; |
| 28 | + }, |
| 29 | +); |
| 30 | + |
| 31 | +export let globalTextStyleSegments: Record<string, StyledTextSegmentSubset[]> = |
| 32 | + {}; |
| 33 | + |
| 34 | +// List of types that can be flattened into SVG |
| 35 | +const canBeFlattened = isTypeOrGroupOfTypes([ |
| 36 | + "VECTOR", |
| 37 | + "STAR", |
| 38 | + "POLYGON", |
| 39 | + "BOOLEAN_OPERATION", |
| 40 | +]); |
| 41 | + |
| 42 | +export const convertNodeToAltNode = |
| 43 | + (parent: ParentNode | null) => |
| 44 | + (node: SceneNode): SceneNode => { |
| 45 | + const type = node.type; |
| 46 | + switch (type) { |
| 47 | + // Standard nodes |
| 48 | + case "RECTANGLE": |
| 49 | + case "ELLIPSE": |
| 50 | + case "LINE": |
| 51 | + case "STAR": |
| 52 | + case "POLYGON": |
| 53 | + case "VECTOR": |
| 54 | + case "BOOLEAN_OPERATION": |
| 55 | + return cloneNode(node, parent); |
| 56 | + |
| 57 | + // Group nodes |
| 58 | + case "FRAME": |
| 59 | + case "INSTANCE": |
| 60 | + case "COMPONENT": |
| 61 | + case "COMPONENT_SET": |
| 62 | + // if the frame, instance etc. has no children, convert the frame to rectangle |
| 63 | + if (node.children.length === 0) |
| 64 | + return cloneAsRectangleNode(node, parent); |
| 65 | + // goto SECTION |
| 66 | + |
| 67 | + case "GROUP": |
| 68 | + // if a Group is visible and has only one child, the Group should be ungrouped. |
| 69 | + if (type === "GROUP" && node.children.length === 1 && node.visible) |
| 70 | + return convertNodeToAltNode(parent)(node.children[0]); |
| 71 | + // goto SECTION |
| 72 | + |
| 73 | + case "SECTION": |
| 74 | + const group = cloneNode(node, parent); |
| 75 | + const groupChildren = oldConvertNodesToAltNodes(node.children, group); |
| 76 | + return assignChildren(groupChildren, group); |
| 77 | + |
| 78 | + // Text Nodes |
| 79 | + case "TEXT": |
| 80 | + globalTextStyleSegments[node.id] = extractStyledTextSegments(node); |
| 81 | + return cloneNode(node, parent); |
| 82 | + |
| 83 | + // Unsupported Nodes |
| 84 | + case "SLICE": |
| 85 | + throw new Error( |
| 86 | + `Sorry, Slices are not supported. Type:${node.type} id:${node.id}`, |
| 87 | + ); |
| 88 | + default: |
| 89 | + throw new Error( |
| 90 | + `Sorry, an unsupported node type was selected. Type:${node.type} id:${node.id}`, |
| 91 | + ); |
| 92 | + } |
| 93 | + }; |
| 94 | + |
| 95 | +export const oldConvertNodesToAltNodes = ( |
| 96 | + sceneNode: ReadonlyArray<SceneNode>, |
| 97 | + parent: ParentNode | null, |
| 98 | +): Array<SceneNode> => |
| 99 | + sceneNode.map(convertNodeToAltNode(parent)).filter(isNotEmpty); |
| 100 | + |
| 101 | +export const cloneNode = <T extends BaseNode>( |
| 102 | + node: T, |
| 103 | + parent: ParentNode | null, |
| 104 | +): T => { |
| 105 | + // Create the cloned object with the correct prototype |
| 106 | + const cloned = {} as T; |
| 107 | + // Create a new object with only the desired descriptors (excluding 'parent' and 'children') |
| 108 | + for (const prop in node) { |
| 109 | + if ( |
| 110 | + prop !== "parent" && |
| 111 | + prop !== "children" && |
| 112 | + prop !== "horizontalPadding" && |
| 113 | + prop !== "verticalPadding" && |
| 114 | + prop !== "mainComponent" && |
| 115 | + prop !== "masterComponent" && |
| 116 | + prop !== "variantProperties" && |
| 117 | + prop !== "get_annotations" && |
| 118 | + prop !== "componentPropertyDefinitions" && |
| 119 | + prop !== "exposedInstances" && |
| 120 | + prop !== "instances" && |
| 121 | + prop !== "componentProperties" && |
| 122 | + prop !== "componenPropertyReferences" && |
| 123 | + prop !== "constrainProportions" |
| 124 | + ) { |
| 125 | + cloned[prop as keyof T] = node[prop as keyof T]; |
| 126 | + } |
| 127 | + } |
| 128 | + |
| 129 | + // Set parent explicitly in addition to using assignParent |
| 130 | + assignParent(parent, cloned); |
| 131 | + // if (parent) { |
| 132 | + // (cloned as any).parent = parent; |
| 133 | + // } |
| 134 | + |
| 135 | + const altNode = { |
| 136 | + ...cloned, |
| 137 | + parent: cloned.parent, |
| 138 | + originalNode: node, |
| 139 | + canBeFlattened: canBeFlattened(node), |
| 140 | + } as AltNode<T>; |
| 141 | + |
| 142 | + if (globalTextStyleSegments[node.id]) { |
| 143 | + altNode.styledTextSegments = globalTextStyleSegments[node.id]; |
| 144 | + } |
| 145 | + |
| 146 | + console.log("altnode:", altNode.parent, cloned.parent); |
| 147 | + |
| 148 | + return altNode; |
| 149 | +}; |
| 150 | + |
| 151 | +// auto convert Frame to Rectangle when Frame has no Children |
| 152 | +const cloneAsRectangleNode = <T extends BaseNode>( |
| 153 | + node: T, |
| 154 | + parent: ParentNode | null, |
| 155 | +): RectangleNode => { |
| 156 | + const clonedNode = cloneNode(node, parent); |
| 157 | + |
| 158 | + assignRectangleType(clonedNode); |
| 159 | + |
| 160 | + return clonedNode as unknown as RectangleNode; |
| 161 | +}; |
| 162 | + |
| 163 | +const extractStyledTextSegments = (node: TextNode) => |
| 164 | + node.getStyledTextSegments([ |
| 165 | + "fontName", |
| 166 | + "fills", |
| 167 | + "fontSize", |
| 168 | + "fontWeight", |
| 169 | + "hyperlink", |
| 170 | + "indentation", |
| 171 | + "letterSpacing", |
| 172 | + "lineHeight", |
| 173 | + "listOptions", |
| 174 | + "textCase", |
| 175 | + "textDecoration", |
| 176 | + "textStyleId", |
| 177 | + "fillStyleId", |
| 178 | + "openTypeFeatures", |
| 179 | + ]); |
0 commit comments