snapshot_export/code.ts at main · eduhund/snapshot_export · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
const frames = figma.currentPage.selection as FrameNode[];

type VariantType = {
  triggerNodeId: string;
  action: Action;
};

type VariantsType = {
  [key: string]: VariantType[];
};

const variants: VariantsType = {};

function addItem(key: string, item: VariantType) {
  if (!variants[key]) {
    variants[key] = [];
  }
  variants[key].push(item);
}

function getReactionsRecursive(nodes: FrameNode[], baseNodeId: string) {
  for (const node of nodes) {
    for (const reaction of node.reactions) {
      if (
        reaction.action &&
        reaction.action?.type === "NODE" &&
        reaction.action?.navigation === "OVERLAY"
      )
        addItem(baseNodeId, {
          triggerNodeId: node.id,
          action: reaction.action,
        });
    }

    if (node.children) {
      getReactionsRecursive(node.children as FrameNode[], baseNodeId);
    }
  }
}

async function getReactions(nodes: FrameNode[]) {
  for (const node of nodes) {
    for (const reaction of node.reactions) {
      if (reaction.action) {
        addItem(node.id, {
          triggerNodeId: node.id,
          action: reaction.action,
        });
      }
    }

    if (node.children) {
      getReactionsRecursive(node.children as FrameNode[], node.id);
    }

    for (const { triggerNodeId, action } of variants[node.id]) {
      const triggeredNode = (await figma.getNodeByIdAsync(
        triggerNodeId
      )) as SceneNode;
      const addingNode = (await figma.getNodeByIdAsync(
        action.destinationId || ""
      )) as SceneNode;
      if (addingNode) {
        const nodeAbsoluteX = node.absoluteBoundingBox?.x || 0;
        const nodeAbsoluteY = node.absoluteBoundingBox?.y || 0;
        const overlayAbsoluteX = triggeredNode.absoluteBoundingBox?.x || 0;
        const overlayAbsoluteY = triggeredNode.absoluteBoundingBox?.y || 0;
        const newAddingNode = addingNode.clone() as FrameNode;
        node.appendChild(newAddingNode);
        if (node.layoutMode !== "NONE")
          newAddingNode.layoutPositioning = "ABSOLUTE";
        newAddingNode.x =
          overlayAbsoluteX -
            nodeAbsoluteX +
            action.overlayRelativePosition?.x || 0;
        newAddingNode.y =
          overlayAbsoluteY -
            nodeAbsoluteY +
            action.overlayRelativePosition?.y || 0;
        const imageRaw = await node.exportAsync({ format: "PNG" });
        const image = figma.createImage(imageRaw);

        const width = node.width;
        const height = node.height;

        const rect = figma.createRectangle();
        rect.resize(width, height);

        const fill: Paint = {
          type: "IMAGE",
          scaleMode: "FIT",
          imageHash: image.hash,
        };

        rect.fills = [fill];

        figma.currentPage.appendChild(rect);
        newAddingNode.remove();
      }
    }
  }
  figma.closePlugin();
}

getReactions(frames);