aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1// Reference: https://www.figma.com/plugin-docs/api/api-reference/
2// TODO: At the moment audioWorklet along with microphone and camera are not working.
3// - Perhaps I could reach out to FigJam to fix some of these?
4// TODO: 1. Submit widget
5// - https://help.figma.com/hc/en-us/articles/360039958914
6// 2. Wire up widget so that it can have inputs
7// - https://www.figma.com/community/widget/1040013605559486449/Play-Button
8var __awaiter =
9 (this && this.__awaiter) ||
10 function (thisArg, _arguments, P, generator) {
11 function adopt(value) {
12 return value instanceof P
13 ? value
14 : new P(function (resolve) {
15 resolve(value);
16 });
17 }
18 return new (P || (P = Promise))(function (resolve, reject) {
19 function fulfilled(value) {
20 try {
21 step(generator.next(value));
22 } catch (e) {
23 reject(e);
24 }
25 }
26 function rejected(value) {
27 try {
28 step(generator["throw"](value));
29 } catch (e) {
30 reject(e);
31 }
32 }
33 function step(result) {
34 result.done
35 ? resolve(result.value)
36 : adopt(result.value).then(fulfilled, rejected);
37 }
38 step((generator = generator.apply(thisArg, _arguments || [])).next());
39 });
40 };
41const { widget } = figma;
42const {
43 useEffect,
44 usePropertyMenu,
45 useSyncedState,
46 useWidgetId,
47 AutoLayout,
48 Text,
49} = widget;
50function Widget() {
51 const widgetId = useWidgetId();
52 const [disk, setDisk] = useSyncedState("disk", "prompt");
53 const diskOptions = [
54 { option: "prompt", label: "Prompt" },
55 { option: "spray", label: "Spray" },
56 { option: "export", label: "Export" },
57 ];
58 usePropertyMenu(
59 [
60 {
61 itemType: "dropdown",
62 propertyName: "disks",
63 tooltip: "Starting Disk",
64 selectedOption: disk,
65 options: diskOptions,
66 },
67 ],
68 ({ propertyName, propertyValue }) => {
69 if (propertyName === "disks") setDisk(propertyValue);
70 }
71 );
72 return figma.widget.h(
73 AutoLayout,
74 {
75 verticalAlignItems: "center",
76 spacing: 16,
77 padding: 16,
78 cornerRadius: 8,
79 fill: { r: 0.8, g: 0.8, b: 0.9, a: 1 },
80 stroke: { r: 0.7, g: 0.7, b: 0.8, a: 1.0 },
81 strokeWidth: 6,
82 },
83 figma.widget.h(
84 Text,
85 {
86 fontSize: 32,
87 fill: { r: 0, g: 0.7, b: 0, a: 1 },
88 onClick: () =>
89 new Promise((resolve) => {
90 // TODO: Read disk property value so that it can be autoselected.
91 figma.showUI(__html__, { width: 640, height: 480 });
92 // Send image data now.
93 const widgetNode = figma.getNodeById(widgetId);
94 const allConnectorNodes = figma.currentPage.findAll((node) => {
95 return node.type === "CONNECTOR";
96 });
97 allConnectorNodes.forEach((cn) =>
98 __awaiter(this, void 0, void 0, function* () {
99 // TODO: If end or start is widgetNode.id
100 // and the type is an image... then process it as
101 // an input (only use the first image).
102 console.log(
103 "Start:",
104 figma.getNodeById(cn.connectorStart.endpointNodeId)
105 );
106 // TODO Unwrap this whole thing a bit.
107 const img = figma.getImageByHash(
108 figma.getNodeById(cn.connectorEnd.endpointNodeId).fills[0]
109 .imageHash
110 );
111 const bytes = yield img.getBytesAsync();
112 figma.ui.postMessage({ type: "figma-image-input", bytes });
113 })
114 );
115 }),
116 },
117 "\u25B6"
118 ),
119 figma.widget.h(
120 Text,
121 {
122 fontSize: 32,
123 fill: { r: 0.7, g: 0, b: 0, a: 1 },
124 onClick: () => new Promise((resolve) => figma.closePlugin()),
125 },
126 "\u25A0"
127 )
128 );
129}
130widget.register(Widget);