├── .gitignore
├── README.md
├── fetch-image
├── README.md
├── manifest.json
└── plugin.js
├── graphviz
├── README.md
├── artwork.png
├── manifest.json
├── package-lock.json
├── package.json
├── src
│ ├── editor.ts
│ ├── figma.d.ts
│ ├── figplug.d.ts
│ ├── plugin.ts
│ ├── structs.ts
│ ├── ui.css
│ ├── ui.html
│ ├── ui.ts
│ └── util.ts
└── tsconfig.json
├── minimap
├── README.md
├── artwork.png
├── figma.d.ts
├── figplug.d.ts
├── manifest.json
├── package-lock.json
├── package.json
├── src
│ ├── figutil.ts
│ ├── plugin.ts
│ ├── structs.ts
│ ├── ui.css
│ ├── ui.html
│ └── ui.ts
└── tsconfig.json
└── misc
└── optimize-resources.sh
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .vscode
3 | *~
4 | _local/
5 | build/
6 | node_modules
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Collection of Figma plugins
2 |
3 | Most are small examples.
4 |
5 | All you need to try these is:
6 | - [Nodejs](https://nodejs.org/)
7 | - [figplug](https://rsms.me/figplug/)
8 | - [Figma desktop app](https://www.figma.com/downloads/)
9 |
--------------------------------------------------------------------------------
/fetch-image/README.md:
--------------------------------------------------------------------------------
1 | This is a small example of fetching an image from somewhere on the
2 | internet and adds it to the canvas in Figma, without using a UI.
3 |
4 | ## Usage
5 |
6 | In Figma, add a new dev plugin and select this folder
7 |
--------------------------------------------------------------------------------
/fetch-image/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "api": "1.0.0",
3 | "name": "fetch-image",
4 | "main": "plugin.js"
5 | }
6 |
--------------------------------------------------------------------------------
/fetch-image/plugin.js:
--------------------------------------------------------------------------------
1 | // URL to fetch
2 | let url = "https://scripter.rsms.me/icon.png"
3 |
4 | // Run fetch in the UI process, sending the result to the plugin when done
5 | figma.showUI(``, {
12 | visible:false, // don't actually show a UI window
13 | })
14 |
15 | // listen for messages from the UI process
16 | figma.ui.onmessage = msg => {
17 | if (msg.data && msg.data.length > 0) {
18 | addImageToCanvas(msg.data)
19 | }
20 | figma.closePlugin(msg.error || "")
21 | }
22 |
23 | // Function that creates a rectangle on canvas with an image fill from image data
24 | function addImageToCanvas(data) {
25 | let imageHash = figma.createImage(data).hash
26 | const rect = figma.createRectangle()
27 | rect.fills = [ { type: "IMAGE", scaleMode: "FIT", imageHash } ]
28 | figma.currentPage.appendChild(rect)
29 |
30 | // select the rectangle and focus the viewport
31 | figma.currentPage.selection = [rect]
32 | figma.viewport.scrollAndZoomIntoView([rect])
33 | }
34 |
35 | // Notes:
36 | //
37 | // If you are to fetch resources in a real production plugin, you will most
38 | // likely want to make sure you can handle multiple fetches concurrently.
39 | //
40 | // The order by which messages are send and received is not deterministic when
41 | // dealing with the network. Therefore you will need to "multiplex" your fetches.
42 | // Multiplexing is the ability to do multiple things over the same "channel"; in
43 | // our case messages passed between the plugin process and the UI process.
44 | //
45 | // Implementing multiplexing is pretty easy for this case:
46 | //
47 | // 1. When you being a fetch call, generate a unique identifier. For instance,
48 | // a number variable that you keep incrementing.
49 | //
50 | // 2. Associate this ID with the promise or callback for the fetch call.
51 | //
52 | // 3. Include this ID with your postMessage call to the UI process.
53 | //
54 | // 4. In your UI process where you execute fetch(), include that same ID with the
55 | // response message that the UI sends back to the plugin with postMessage.
56 | //
57 | // 5. In your plugin process, look up the promise or callback for the ID in the
58 | // message you receive. This is the association you made in step 2.
59 | // Resolve the promise or call the callback with the message result.
60 | //
61 | // 6. Clear the association between the ID and promise/callback to free up memory.
62 | //
63 | // Another way to think about this is as requests and responses — you want to
64 | // track the request as your process it so that when the sender seens a response it
65 | // knows which request it is a response for.
66 | //
67 |
--------------------------------------------------------------------------------
/graphviz/README.md:
--------------------------------------------------------------------------------
1 | # Graphviz
2 |
3 |
4 |
5 | A plugin that uses graphviz to generate graphs
6 |
7 | 
8 |
9 | ## Development
10 |
11 | - Development mode: `npm run dev`
12 | - Build in release mode: `npm run build`
13 |
--------------------------------------------------------------------------------
/graphviz/artwork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rsms/figma-plugins/2c5d0c24180d14bce7776656584da99b8996a696/graphviz/artwork.png
--------------------------------------------------------------------------------
/graphviz/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "api": "1.0.0",
3 | "name": "Graphviz",
4 | "id": "770827538515501401",
5 | "main": "src/plugin.ts",
6 | "ui": "src/ui.ts"
7 | }
8 |
--------------------------------------------------------------------------------
/graphviz/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Graphviz",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "build": "figplug build -O -o=build",
7 | "dev": "figplug build -g -w -v -o=build"
8 | },
9 | "author": "",
10 | "license": "MIT",
11 | "devDependencies": {
12 | "figplug": "0.1.12"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/graphviz/src/editor.ts:
--------------------------------------------------------------------------------
1 | import { isMac, addKeyEventHandler } from "./util"
2 |
3 | export class Editor {
4 | readonly ta :HTMLTextAreaElement
5 | readonly defaultText :string
6 |
7 | focused = false
8 | _textSize = 0
9 |
10 | constructor(ta :HTMLTextAreaElement) {
11 | this.ta = ta
12 | this.defaultText = ta.value.trim()
13 | }
14 |
15 |
16 | init() {
17 | addKeyEventHandler(this.ta, this.onKeyEvent)
18 | this.ta.addEventListener("focus", this.onReceivedFocus)
19 | this.ta.addEventListener("blur", this.onLostFocus)
20 | this.ta.focus()
21 | }
22 |
23 |
24 | onReceivedFocus = () => {
25 | this.focused = true
26 | }
27 |
28 | onLostFocus = () => {
29 | this.focused = false
30 | }
31 |
32 |
33 | onKeyEvent = (ev :KeyboardEvent, key :string) => {
34 | if (!this.focused) {
35 | return false
36 | }
37 |
38 | if ((ev.metaKey || ev.ctrlKey) && key == "a") {
39 | return this.selectAll(), true
40 | }
41 |
42 | // Figma captures undo and redo, not sending them to the plugin, unless we capture them.
43 | if ((ev.metaKey || ev.ctrlKey) && key == "z") {
44 | return this.undo(), true
45 | }
46 | if ( ((ev.metaKey || ev.ctrlKey) && ev.shiftKey && (key == "Z" || key == "z")) ||
47 | (!isMac && ev.ctrlKey && key == "y") ) {
48 | return this.redo(), true
49 | }
50 |
51 | // Figma grabs copy, paste etc which is slow. Intercept.
52 | if ((ev.metaKey || ev.ctrlKey) && key == "c") {
53 | return document.execCommand("copy"), true
54 | }
55 | if ((ev.metaKey || ev.ctrlKey) && key == "x") {
56 | return document.execCommand("cut"), true
57 | }
58 | if ((ev.metaKey || ev.ctrlKey) && key == "v") {
59 | return document.execCommand("paste"), true
60 | }
61 |
62 | // indentation
63 | if ((ev.metaKey || ev.ctrlKey) && key == "]") {
64 | return this.indent(), true
65 | }
66 | if ((ev.metaKey || ev.ctrlKey) && key == "[") {
67 | return this.dedent(), true
68 | }
69 | if (key == "Tab") {
70 | return this.dedent(), true
71 | }
72 |
73 | // text size
74 | if ((ev.metaKey || ev.ctrlKey) && (key == "+" || key == "=" || key == "Plus")) {
75 | return this.increaseTextSize(), true
76 | }
77 | if ((ev.metaKey || ev.ctrlKey) && (key == "-" || key == "Minus")) {
78 | return this.decreaseTextSize(), true
79 | }
80 |
81 | // if (DEBUG && (ev.metaKey || ev.ctrlKey || ev.altKey)) {
82 | // dlog("Editor onKeyEvent: [unhandled] key:", key, ev)
83 | // }
84 |
85 | return false
86 | }
87 |
88 |
89 | getTextSize() :number {
90 | if (!this._textSize) {
91 | let s = window.getComputedStyle(this.ta)
92 | let v = s.getPropertyValue("--editorFontSize")
93 | this._textSize = parseInt(v)
94 | if (isNaN(this._textSize)) {
95 | this._textSize = 11
96 | }
97 | }
98 | return this._textSize
99 | }
100 |
101 | setTextSize(textSize :number) {
102 | this._textSize = Math.min(40, Math.max(7, textSize))
103 | document.body.style.setProperty("--editorFontSize", `${this._textSize}px`)
104 | }
105 |
106 | resetTextSize() {
107 | document.body.style.removeProperty("--editorFontSize")
108 | this._textSize = 0
109 | // this.setTextSize(11) // XXX hard coded
110 | }
111 |
112 |
113 | increaseTextSize() {
114 | this.setTextSize(this.getTextSize() + 1)
115 | }
116 |
117 | decreaseTextSize() {
118 | this.setTextSize(this.getTextSize() - 1)
119 | }
120 |
121 |
122 | indent() {
123 | dlog("TODO: Editor indent")
124 | }
125 |
126 |
127 | dedent() {
128 | dlog("TODO: Editor dedent")
129 | }
130 |
131 |
132 | undo() {
133 | document.execCommand("undo")
134 | }
135 |
136 | redo() {
137 | document.execCommand("redo")
138 | }
139 |
140 |
141 | get text() :string {
142 | return this.ta.value
143 | }
144 |
145 | set text(value :string) {
146 | this.ta.value = value
147 | }
148 |
149 |
150 | focus() {
151 | this.ta.focus()
152 | }
153 |
154 | selectAll() {
155 | this.ta.select()
156 | }
157 | }
158 |
--------------------------------------------------------------------------------
/graphviz/src/figma.d.ts:
--------------------------------------------------------------------------------
1 | // Figma Plugin API version 1, update 5
2 |
3 | // Global variable with Figma's plugin API.
4 | declare const figma: PluginAPI
5 | declare const __html__: string
6 |
7 | interface PluginAPI {
8 | readonly apiVersion: "1.0.0"
9 | readonly command: string
10 | readonly viewport: ViewportAPI
11 | closePlugin(message?: string): void
12 |
13 | notify(message: string, options?: NotificationOptions): NotificationHandler
14 |
15 | showUI(html: string, options?: ShowUIOptions): void
16 | readonly ui: UIAPI
17 |
18 | readonly clientStorage: ClientStorageAPI
19 |
20 | getNodeById(id: string): BaseNode | null
21 | getStyleById(id: string): BaseStyle | null
22 |
23 | readonly root: DocumentNode
24 | currentPage: PageNode
25 |
26 | on(type: "selectionchange" | "currentpagechange" | "close", callback: () => void)
27 | once(type: "selectionchange" | "currentpagechange" | "close", callback: () => void)
28 | off(type: "selectionchange" | "currentpagechange" | "close", callback: () => void)
29 |
30 | readonly mixed: symbol
31 |
32 | createRectangle(): RectangleNode
33 | createLine(): LineNode
34 | createEllipse(): EllipseNode
35 | createPolygon(): PolygonNode
36 | createStar(): StarNode
37 | createVector(): VectorNode
38 | createText(): TextNode
39 | createFrame(): FrameNode
40 | createComponent(): ComponentNode
41 | createPage(): PageNode
42 | createSlice(): SliceNode
43 | /**
44 | * [DEPRECATED]: This API often fails to create a valid boolean operation. Use figma.union, figma.subtract, figma.intersect and figma.exclude instead.
45 | */
46 | createBooleanOperation(): BooleanOperationNode
47 |
48 | createPaintStyle(): PaintStyle
49 | createTextStyle(): TextStyle
50 | createEffectStyle(): EffectStyle
51 | createGridStyle(): GridStyle
52 |
53 | // The styles are returned in the same order as displayed in the UI. Only
54 | // local styles are returned. Never styles from team library.
55 | getLocalPaintStyles(): PaintStyle[]
56 | getLocalTextStyles(): TextStyle[]
57 | getLocalEffectStyles(): EffectStyle[]
58 | getLocalGridStyles(): GridStyle[]
59 |
60 | importComponentByKeyAsync(key: string): Promise
61 | importStyleByKeyAsync(key: string): Promise
62 |
63 | listAvailableFontsAsync(): Promise
64 | loadFontAsync(fontName: FontName): Promise
65 | readonly hasMissingFont: boolean
66 |
67 | createNodeFromSvg(svg: string): FrameNode
68 |
69 | createImage(data: Uint8Array): Image
70 | getImageByHash(hash: string): Image
71 |
72 | group(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): FrameNode
73 | flatten(nodes: ReadonlyArray, parent?: BaseNode & ChildrenMixin, index?: number): VectorNode
74 |
75 | union(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
76 | subtract(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
77 | intersect(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
78 | exclude(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
79 | }
80 |
81 | interface ClientStorageAPI {
82 | getAsync(key: string): Promise
83 | setAsync(key: string, value: any): Promise
84 | }
85 |
86 | interface NotificationOptions {
87 | timeout?: number,
88 | }
89 |
90 | interface NotificationHandler {
91 | cancel: () => void,
92 | }
93 |
94 | interface ShowUIOptions {
95 | visible?: boolean,
96 | width?: number,
97 | height?: number,
98 | position?: 'default' | 'last' | 'auto' // PROPOSED API ONLY
99 | }
100 |
101 | interface UIPostMessageOptions {
102 | origin?: string,
103 | }
104 |
105 | interface OnMessageProperties {
106 | origin: string,
107 | }
108 |
109 | type MessageEventHandler = (pluginMessage: any, props: OnMessageProperties) => void
110 |
111 | interface UIAPI {
112 | show(): void
113 | hide(): void
114 | resize(width: number, height: number): void
115 | close(): void
116 |
117 | postMessage(pluginMessage: any, options?: UIPostMessageOptions): void
118 | onmessage: MessageEventHandler | undefined
119 | on(type: "message", callback: MessageEventHandler)
120 | once(type: "message", callback: MessageEventHandler)
121 | off(type: "message", callback: MessageEventHandler)
122 | }
123 |
124 | interface ViewportAPI {
125 | center: { x: number, y: number }
126 | zoom: number
127 | scrollAndZoomIntoView(nodes: ReadonlyArray)
128 | }
129 |
130 | ////////////////////////////////////////////////////////////////////////////////
131 | // Datatypes
132 |
133 | type Transform = [
134 | [number, number, number],
135 | [number, number, number]
136 | ]
137 |
138 | interface Vector {
139 | readonly x: number
140 | readonly y: number
141 | }
142 |
143 | interface RGB {
144 | readonly r: number
145 | readonly g: number
146 | readonly b: number
147 | }
148 |
149 | interface RGBA {
150 | readonly r: number
151 | readonly g: number
152 | readonly b: number
153 | readonly a: number
154 | }
155 |
156 | interface FontName {
157 | readonly family: string
158 | readonly style: string
159 | }
160 |
161 | type TextCase = "ORIGINAL" | "UPPER" | "LOWER" | "TITLE"
162 |
163 | type TextDecoration = "NONE" | "UNDERLINE" | "STRIKETHROUGH"
164 |
165 | interface ArcData {
166 | readonly startingAngle: number
167 | readonly endingAngle: number
168 | readonly innerRadius: number
169 | }
170 |
171 | interface ShadowEffect {
172 | readonly type: "DROP_SHADOW" | "INNER_SHADOW"
173 | readonly color: RGBA
174 | readonly offset: Vector
175 | readonly radius: number
176 | readonly visible: boolean
177 | readonly blendMode: BlendMode
178 | }
179 |
180 | interface BlurEffect {
181 | readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR"
182 | readonly radius: number
183 | readonly visible: boolean
184 | }
185 |
186 | type Effect = ShadowEffect | BlurEffect
187 |
188 | type ConstraintType = "MIN" | "CENTER" | "MAX" | "STRETCH" | "SCALE"
189 |
190 | interface Constraints {
191 | readonly horizontal: ConstraintType
192 | readonly vertical: ConstraintType
193 | }
194 |
195 | interface ColorStop {
196 | readonly position: number
197 | readonly color: RGBA
198 | }
199 |
200 | interface ImageFilters {
201 | readonly exposure?: number
202 | readonly contrast?: number
203 | readonly saturation?: number
204 | readonly temperature?: number
205 | readonly tint?: number
206 | readonly highlights?: number
207 | readonly shadows?: number
208 | }
209 |
210 | interface SolidPaint {
211 | readonly type: "SOLID"
212 | readonly color: RGB
213 |
214 | readonly visible?: boolean
215 | readonly opacity?: number
216 | readonly blendMode?: BlendMode
217 | }
218 |
219 | interface GradientPaint {
220 | readonly type: "GRADIENT_LINEAR" | "GRADIENT_RADIAL" | "GRADIENT_ANGULAR" | "GRADIENT_DIAMOND"
221 | readonly gradientTransform: Transform
222 | readonly gradientStops: ReadonlyArray
223 |
224 | readonly visible?: boolean
225 | readonly opacity?: number
226 | readonly blendMode?: BlendMode
227 | }
228 |
229 | interface ImagePaint {
230 | readonly type: "IMAGE"
231 | readonly scaleMode: "FILL" | "FIT" | "CROP" | "TILE"
232 | readonly imageHash: string | null
233 | readonly imageTransform?: Transform // setting for "CROP"
234 | readonly scalingFactor?: number // setting for "TILE"
235 | readonly filters?: ImageFilters
236 |
237 | readonly visible?: boolean
238 | readonly opacity?: number
239 | readonly blendMode?: BlendMode
240 | }
241 |
242 | type Paint = SolidPaint | GradientPaint | ImagePaint
243 |
244 | interface Guide {
245 | readonly axis: "X" | "Y"
246 | readonly offset: number
247 | }
248 |
249 | interface RowsColsLayoutGrid {
250 | readonly pattern: "ROWS" | "COLUMNS"
251 | readonly alignment: "MIN" | "MAX" | "STRETCH" | "CENTER"
252 | readonly gutterSize: number
253 |
254 | readonly count: number // Infinity when "Auto" is set in the UI
255 | readonly sectionSize?: number // Not set for alignment: "STRETCH"
256 | readonly offset?: number // Not set for alignment: "CENTER"
257 |
258 | readonly visible?: boolean
259 | readonly color?: RGBA
260 | }
261 |
262 | interface GridLayoutGrid {
263 | readonly pattern: "GRID"
264 | readonly sectionSize: number
265 |
266 | readonly visible?: boolean
267 | readonly color?: RGBA
268 | }
269 |
270 | type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid
271 |
272 | interface ExportSettingsConstraints {
273 | type: "SCALE" | "WIDTH" | "HEIGHT"
274 | value: number
275 | }
276 |
277 | interface ExportSettingsImage {
278 | format: "JPG" | "PNG"
279 | contentsOnly?: boolean // defaults to true
280 | suffix?: string
281 | constraint?: ExportSettingsConstraints
282 | }
283 |
284 | interface ExportSettingsSVG {
285 | format: "SVG"
286 | contentsOnly?: boolean // defaults to true
287 | suffix?: string
288 | svgOutlineText?: boolean // defaults to true
289 | svgIdAttribute?: boolean // defaults to false
290 | svgSimplifyStroke?: boolean // defaults to true
291 | }
292 |
293 | interface ExportSettingsPDF {
294 | format: "PDF"
295 | contentsOnly?: boolean // defaults to true
296 | suffix?: string
297 | }
298 |
299 | type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF
300 |
301 | type WindingRule = "NONZERO" | "EVENODD"
302 |
303 | interface VectorVertex {
304 | readonly x: number
305 | readonly y: number
306 | readonly strokeCap?: StrokeCap
307 | readonly strokeJoin?: StrokeJoin
308 | readonly cornerRadius?: number
309 | readonly handleMirroring?: HandleMirroring
310 | }
311 |
312 | interface VectorSegment {
313 | readonly start: number
314 | readonly end: number
315 | readonly tangentStart?: Vector // Defaults to { x: 0, y: 0 }
316 | readonly tangentEnd?: Vector // Defaults to { x: 0, y: 0 }
317 | }
318 |
319 | interface VectorRegion {
320 | readonly windingRule: WindingRule
321 | readonly loops: ReadonlyArray>
322 | }
323 |
324 | interface VectorNetwork {
325 | readonly vertices: ReadonlyArray
326 | readonly segments: ReadonlyArray
327 | readonly regions?: ReadonlyArray // Defaults to []
328 | }
329 |
330 | interface VectorPath {
331 | readonly windingRule: WindingRule | "NONE"
332 | readonly data: string
333 | }
334 |
335 | type VectorPaths = ReadonlyArray
336 |
337 | interface LetterSpacing {
338 | readonly value: number
339 | readonly unit: "PIXELS" | "PERCENT"
340 | }
341 |
342 | type LineHeight = {
343 | readonly value: number
344 | readonly unit: "PIXELS" | "PERCENT"
345 | } | {
346 | readonly unit: "AUTO"
347 | }
348 |
349 | type BlendMode =
350 | "PASS_THROUGH" |
351 | "NORMAL" |
352 | "DARKEN" |
353 | "MULTIPLY" |
354 | "LINEAR_BURN" |
355 | "COLOR_BURN" |
356 | "LIGHTEN" |
357 | "SCREEN" |
358 | "LINEAR_DODGE" |
359 | "COLOR_DODGE" |
360 | "OVERLAY" |
361 | "SOFT_LIGHT" |
362 | "HARD_LIGHT" |
363 | "DIFFERENCE" |
364 | "EXCLUSION" |
365 | "HUE" |
366 | "SATURATION" |
367 | "COLOR" |
368 | "LUMINOSITY"
369 |
370 | interface Font {
371 | fontName: FontName
372 | }
373 |
374 | ////////////////////////////////////////////////////////////////////////////////
375 | // Mixins
376 |
377 | interface BaseNodeMixin {
378 | readonly id: string
379 | readonly parent: (BaseNode & ChildrenMixin) | null
380 | name: string // Note: setting this also sets \`autoRename\` to false on TextNodes
381 | readonly removed: boolean
382 | toString(): string
383 | remove(): void
384 |
385 | getPluginData(key: string): string
386 | setPluginData(key: string, value: string): void
387 |
388 | // Namespace is a string that must be at least 3 alphanumeric characters, and should
389 | // be a name related to your plugin. Other plugins will be able to read this data.
390 | getSharedPluginData(namespace: string, key: string): string
391 | setSharedPluginData(namespace: string, key: string, value: string): void
392 | }
393 |
394 | interface SceneNodeMixin {
395 | visible: boolean
396 | locked: boolean
397 | }
398 |
399 | interface ChildrenMixin {
400 | readonly children: ReadonlyArray
401 |
402 | appendChild(child: SceneNode): void
403 | insertChild(index: number, child: SceneNode): void
404 |
405 | findAll(callback?: (node: SceneNode) => boolean): SceneNode[]
406 | findOne(callback: (node: SceneNode) => boolean): SceneNode | null
407 | }
408 |
409 | interface ConstraintMixin {
410 | constraints: Constraints
411 | }
412 |
413 | interface LayoutMixin {
414 | readonly absoluteTransform: Transform
415 | relativeTransform: Transform
416 | x: number
417 | y: number
418 | rotation: number // In degrees
419 |
420 | readonly width: number
421 | readonly height: number
422 |
423 | resize(width: number, height: number): void
424 | resizeWithoutConstraints(width: number, height: number): void
425 | }
426 |
427 | interface BlendMixin {
428 | opacity: number
429 | blendMode: BlendMode
430 | isMask: boolean
431 | effects: ReadonlyArray
432 | effectStyleId: string
433 | }
434 |
435 | interface FrameMixin {
436 | backgrounds: ReadonlyArray
437 | layoutGrids: ReadonlyArray
438 | clipsContent: boolean
439 | guides: ReadonlyArray
440 | gridStyleId: string
441 | backgroundStyleId: string
442 | }
443 |
444 | type StrokeCap = "NONE" | "ROUND" | "SQUARE" | "ARROW_LINES" | "ARROW_EQUILATERAL"
445 | type StrokeJoin = "MITER" | "BEVEL" | "ROUND"
446 | type HandleMirroring = "NONE" | "ANGLE" | "ANGLE_AND_LENGTH"
447 |
448 | interface GeometryMixin {
449 | fills: ReadonlyArray | symbol
450 | strokes: ReadonlyArray
451 | strokeWeight: number
452 | strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE"
453 | strokeCap: StrokeCap | symbol
454 | strokeJoin: StrokeJoin | symbol
455 | dashPattern: ReadonlyArray
456 | fillStyleId: string | symbol
457 | strokeStyleId: string
458 | }
459 |
460 | interface CornerMixin {
461 | cornerRadius: number | symbol
462 | cornerSmoothing: number
463 | }
464 |
465 | interface ExportMixin {
466 | exportSettings: ReadonlyArray
467 | exportAsync(settings?: ExportSettings): Promise // Defaults to PNG format
468 | }
469 |
470 | interface DefaultShapeMixin extends
471 | BaseNodeMixin, SceneNodeMixin,
472 | BlendMixin, GeometryMixin, LayoutMixin, ExportMixin {
473 | }
474 |
475 | interface DefaultContainerMixin extends
476 | BaseNodeMixin, SceneNodeMixin,
477 | ChildrenMixin, FrameMixin,
478 | BlendMixin, ConstraintMixin, LayoutMixin, ExportMixin {
479 | }
480 |
481 | ////////////////////////////////////////////////////////////////////////////////
482 | // Nodes
483 |
484 | interface DocumentNode extends BaseNodeMixin {
485 | readonly type: "DOCUMENT"
486 |
487 | readonly children: ReadonlyArray
488 |
489 | appendChild(child: PageNode): void
490 | insertChild(index: number, child: PageNode): void
491 |
492 | findAll(callback?: (node: (PageNode | SceneNode)) => boolean): Array
493 | findOne(callback: (node: (PageNode | SceneNode)) => boolean): PageNode | SceneNode | null
494 | }
495 |
496 | interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
497 | readonly type: "PAGE"
498 | clone(): PageNode
499 |
500 | guides: ReadonlyArray
501 | selection: ReadonlyArray
502 |
503 | backgrounds: ReadonlyArray
504 | }
505 |
506 | interface FrameNode extends DefaultContainerMixin {
507 | readonly type: "FRAME" | "GROUP"
508 | clone(): FrameNode
509 | }
510 |
511 | interface SliceNode extends BaseNodeMixin, SceneNodeMixin, LayoutMixin, ExportMixin {
512 | readonly type: "SLICE"
513 | clone(): SliceNode
514 | }
515 |
516 | interface RectangleNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
517 | readonly type: "RECTANGLE"
518 | clone(): RectangleNode
519 | topLeftRadius: number
520 | topRightRadius: number
521 | bottomLeftRadius: number
522 | bottomRightRadius: number
523 | }
524 |
525 | interface LineNode extends DefaultShapeMixin, ConstraintMixin {
526 | readonly type: "LINE"
527 | clone(): LineNode
528 | }
529 |
530 | interface EllipseNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
531 | readonly type: "ELLIPSE"
532 | clone(): EllipseNode
533 | arcData: ArcData
534 | }
535 |
536 | interface PolygonNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
537 | readonly type: "POLYGON"
538 | clone(): PolygonNode
539 | pointCount: number
540 | }
541 |
542 | interface StarNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
543 | readonly type: "STAR"
544 | clone(): StarNode
545 | pointCount: number
546 | innerRadius: number
547 | }
548 |
549 | interface VectorNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
550 | readonly type: "VECTOR"
551 | clone(): VectorNode
552 | vectorNetwork: VectorNetwork
553 | vectorPaths: VectorPaths
554 | handleMirroring: HandleMirroring | symbol
555 | }
556 |
557 | interface TextNode extends DefaultShapeMixin, ConstraintMixin {
558 | readonly type: "TEXT"
559 | clone(): TextNode
560 | characters: string
561 | readonly hasMissingFont: boolean
562 | textAlignHorizontal: "LEFT" | "CENTER" | "RIGHT" | "JUSTIFIED"
563 | textAlignVertical: "TOP" | "CENTER" | "BOTTOM"
564 | textAutoResize: "NONE" | "WIDTH_AND_HEIGHT" | "HEIGHT"
565 | paragraphIndent: number
566 | paragraphSpacing: number
567 | autoRename: boolean
568 |
569 | textStyleId: string | symbol
570 | fontSize: number | symbol
571 | fontName: FontName | symbol
572 | textCase: TextCase | symbol
573 | textDecoration: TextDecoration | symbol
574 | letterSpacing: LetterSpacing | symbol
575 | lineHeight: LineHeight | symbol
576 |
577 | getRangeFontSize(start: number, end: number): number | symbol
578 | setRangeFontSize(start: number, end: number, value: number): void
579 | getRangeFontName(start: number, end: number): FontName | symbol
580 | setRangeFontName(start: number, end: number, value: FontName): void
581 | getRangeTextCase(start: number, end: number): TextCase | symbol
582 | setRangeTextCase(start: number, end: number, value: TextCase): void
583 | getRangeTextDecoration(start: number, end: number): TextDecoration | symbol
584 | setRangeTextDecoration(start: number, end: number, value: TextDecoration): void
585 | getRangeLetterSpacing(start: number, end: number): LetterSpacing | symbol
586 | setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void
587 | getRangeLineHeight(start: number, end: number): LineHeight | symbol
588 | setRangeLineHeight(start: number, end: number, value: LineHeight): void
589 | getRangeFills(start: number, end: number): Paint[] | symbol
590 | setRangeFills(start: number, end: number, value: Paint[]): void
591 | getRangeTextStyleId(start: number, end: number): string | symbol
592 | setRangeTextStyleId(start: number, end: number, value: string): void
593 | getRangeFillStyleId(start: number, end: number): string | symbol
594 | setRangeFillStyleId(start: number, end: number, value: string): void
595 | }
596 |
597 | interface ComponentNode extends DefaultContainerMixin {
598 | readonly type: "COMPONENT"
599 | clone(): ComponentNode
600 |
601 | createInstance(): InstanceNode
602 | description: string
603 | readonly remote: boolean
604 | readonly key: string // The key to use with "importComponentByKeyAsync"
605 | }
606 |
607 | interface InstanceNode extends DefaultContainerMixin {
608 | readonly type: "INSTANCE"
609 | clone(): InstanceNode
610 | masterComponent: ComponentNode
611 | }
612 |
613 | interface BooleanOperationNode extends DefaultShapeMixin, ChildrenMixin, CornerMixin {
614 | readonly type: "BOOLEAN_OPERATION"
615 | clone(): BooleanOperationNode
616 | booleanOperation: "UNION" | "INTERSECT" | "SUBTRACT" | "EXCLUDE"
617 | }
618 |
619 | type BaseNode =
620 | DocumentNode |
621 | PageNode |
622 | SceneNode
623 |
624 | type SceneNode =
625 | SliceNode |
626 | FrameNode |
627 | ComponentNode |
628 | InstanceNode |
629 | BooleanOperationNode |
630 | VectorNode |
631 | StarNode |
632 | LineNode |
633 | EllipseNode |
634 | PolygonNode |
635 | RectangleNode |
636 | TextNode
637 |
638 | type NodeType =
639 | "DOCUMENT" |
640 | "PAGE" |
641 | "SLICE" |
642 | "FRAME" |
643 | "GROUP" |
644 | "COMPONENT" |
645 | "INSTANCE" |
646 | "BOOLEAN_OPERATION" |
647 | "VECTOR" |
648 | "STAR" |
649 | "LINE" |
650 | "ELLIPSE" |
651 | "POLYGON" |
652 | "RECTANGLE" |
653 | "TEXT"
654 |
655 | ////////////////////////////////////////////////////////////////////////////////
656 | // Styles
657 | type StyleType = "PAINT" | "TEXT" | "EFFECT" | "GRID"
658 |
659 | interface BaseStyle {
660 | readonly id: string
661 | readonly type: StyleType
662 | name: string
663 | description: string
664 | remote: boolean
665 | readonly key: string // The key to use with "importStyleByKeyAsync"
666 | remove(): void
667 | }
668 |
669 | interface PaintStyle extends BaseStyle {
670 | type: "PAINT"
671 | paints: ReadonlyArray
672 | }
673 |
674 | interface TextStyle extends BaseStyle {
675 | type: "TEXT"
676 | fontSize: number
677 | textDecoration: TextDecoration
678 | fontName: FontName
679 | letterSpacing: LetterSpacing
680 | lineHeight: LineHeight
681 | paragraphIndent: number
682 | paragraphSpacing: number
683 | textCase: TextCase
684 | }
685 |
686 | interface EffectStyle extends BaseStyle {
687 | type: "EFFECT"
688 | effects: ReadonlyArray
689 | }
690 |
691 | interface GridStyle extends BaseStyle {
692 | type: "GRID"
693 | layoutGrids: ReadonlyArray
694 | }
695 |
696 | ////////////////////////////////////////////////////////////////////////////////
697 | // Other
698 |
699 | interface Image {
700 | readonly hash: string
701 | getBytesAsync(): Promise
702 | }
--------------------------------------------------------------------------------
/graphviz/src/figplug.d.ts:
--------------------------------------------------------------------------------
1 | // Helpers provided automatically, as needed, by figplug.
2 |
3 | // symbolic type aliases
4 | type int = number
5 | type float = number
6 | type byte = number
7 | type bool = boolean
8 |
9 | // compile-time constants
10 | declare const DEBUG :boolean
11 | declare const VERSION :string
12 |
13 | // global namespace. Same as `window` in a regular web context.
14 | declare const global :{[k:string]:any}
15 |
16 | // panic prints a message, stack trace and exits the process
17 | //
18 | declare function panic(msg :any, ...v :any[]) :void
19 |
20 | // repr returns a detailed string representation of the input
21 | //
22 | declare function repr(obj :any) :string
23 |
24 | // print works just like console.log
25 | declare function print(msg :any, ...v :any[]) :void
26 |
27 | // dlog works just like console.log but is stripped out from non-debug builds
28 | declare function dlog(msg :any, ...v :any[]) :void
29 |
30 | // assert checks the condition for truth, and if false, prints an optional
31 | // message, stack trace and exits the process.
32 | // assert is removed in release builds
33 | declare var assert :AssertFun
34 | declare var AssertionError :ErrorConstructor
35 | declare interface AssertFun {
36 | (cond :any, msg? :string, cons? :Function) :void
37 |
38 | // throws can be set to true to cause assertions to be thrown as exceptions,
39 | // or set to false to cause the process to exit.
40 | // Only has an effect in Nodejs-like environments.
41 | // false by default.
42 | throws :bool
43 | }
44 |
--------------------------------------------------------------------------------
/graphviz/src/plugin.ts:
--------------------------------------------------------------------------------
1 | import { Msg, UpdateUIMsg, UpdateGraphMsg, ResponseMsg, ErrorMsg } from "./structs"
2 |
3 |
4 | // TODO:
5 | // on startup and on selection change:
6 | // - getPluginData("viz.source")
7 | // - if there's source, send message to UI
8 | // - have UI update the source
9 | //
10 | // Need to figure out how to not have source disappear if the user enters some source
11 | // and then clicks on a graph on the canvas.
12 | // - idea: textarea.oninput => store value in localStorage,
13 | // when there's no graph selected: textarea.value = get localStorage.
14 | //
15 |
16 | function importGraphSvg(svg :string) :FrameNode {
17 | let n = figma.createNodeFromSvg(svg)
18 | // TODO: ungroup the single group child of n
19 | // // expect a single child: a group ("graph1")
20 | // if (n.children.length == 1 && n.children[0].type == "GROUP") {
21 | // let g = n.children[0] as FrameNode & { type: "GROUP" }
22 | // UNGROUP
23 | // }
24 | return n
25 | }
26 |
27 |
28 | class GraphFrame {
29 | n :FrameNode
30 | sourceCode :string
31 |
32 | constructor(n :FrameNode, sourceCode :string) {
33 | this.n = n
34 | this.sourceCode = sourceCode
35 | }
36 |
37 | update(msg :UpdateGraphMsg) {
38 | // For now, replace all.
39 | //
40 | // We could do something more efficient and more useful here.
41 | // - derive a hash for each part of the svg (could be done in UI with parseHtml)
42 | // - store hash using PluginData on generated nodes
43 | // - skip nodes with identical hash
44 | //
45 |
46 | // "import" SVG
47 | let n = importGraphSvg(msg.svgCode)
48 |
49 | // remove contents of existing frame
50 | this.n.children.map(c => c.remove())
51 |
52 | // update size of frame to match new size
53 | this.n.resizeWithoutConstraints(n.width, n.height)
54 |
55 | // add contents of newly imported SVG
56 | for (let c of n.children) {
57 | this.n.appendChild(c)
58 | }
59 |
60 | // remove now-empty frame
61 | n.remove()
62 |
63 | // update viz source code
64 | this.n.setPluginData("viz.source", msg.sourceCode)
65 | }
66 |
67 | toString() {
68 | return `GraphFrame(n.id=${this.n.id})`
69 | }
70 | }
71 |
72 |
73 | // currently selected graph frame
74 | let selGraphFrame :GraphFrame|null = null
75 |
76 |
77 | function setSelectedGraphFrame(gf :GraphFrame|null) {
78 | if (selGraphFrame !== gf) {
79 | // dlog(`set selGraphFrame ${selGraphFrame} -> ${gf}`)
80 | selGraphFrame = gf
81 | sendmsg({
82 | type: "update-ui",
83 | nodeId: selGraphFrame ? selGraphFrame.n.id : "",
84 | sourceCode: selGraphFrame ? selGraphFrame.sourceCode : ""
85 | })
86 | }
87 | }
88 |
89 |
90 | function updateSelectedGraphFrame() {
91 | if (figma.currentPage.selection.length == 1) {
92 | let n = figma.currentPage.selection[0]
93 | if (selGraphFrame && selGraphFrame.n === n) {
94 | // already selected
95 | return
96 | }
97 | if (n.type == "FRAME") {
98 | let sourceCode = n.getPluginData("viz.source")
99 | if (sourceCode) {
100 | setSelectedGraphFrame(new GraphFrame(n, sourceCode))
101 | return
102 | }
103 | }
104 | }
105 | setSelectedGraphFrame(null)
106 | }
107 |
108 |
109 | function findSvgGraphTitle(svg :string) :string {
110 | const titleChunk = ""
111 | let titleStart = svg.indexOf(titleChunk)
112 | if (titleStart != -1) {
113 | titleStart += titleChunk.length
114 | let titleEnd = svg.indexOf("</", titleStart)
115 | if (titleEnd != -1) {
116 | let title = svg.substring(titleStart, titleEnd)
117 | if (title != "%0") {
118 | return title
119 | }
120 | }
121 | }
122 | return ""
123 | }
124 |
125 |
126 | function createNewGraph(msg :UpdateGraphMsg) {
127 | let n = importGraphSvg(msg.svgCode)
128 |
129 | // get name from SVG graph title (i.e. from "graph Name {...")
130 | n.name = findSvgGraphTitle(msg.svgCode) || "Graph"
131 |
132 | let vp = figma.viewport.center
133 | n.x = vp.x
134 | n.y = vp.y
135 |
136 | let sourceCode = msg.sourceCode
137 | n.setPluginData("viz.source", sourceCode)
138 |
139 | figma.currentPage.appendChild(n)
140 | figma.currentPage.selection = [ n ]
141 |
142 | setSelectedGraphFrame(new GraphFrame(n, sourceCode))
143 | }
144 |
145 |
146 | function onUpdateGraph(msg :UpdateGraphMsg) {
147 | let error :undefined|string
148 | try {
149 | let timeStarted = Date.now()
150 | if (!msg.forceInsertNew && selGraphFrame) {
151 | selGraphFrame.update(msg)
152 | } else {
153 | createNewGraph(msg)
154 | }
155 | print(`graphviz integration finished in ${(Date.now()-timeStarted).toFixed(0)}ms`)
156 | } catch (err) {
157 | console.error("[graphviz plugin] " + (err.stack||err))
158 | error = ""+err
159 | }
160 | sendmsg<ResponseMsg>({
161 | type: "response",
162 | reqId: msg.reqId,
163 | error,
164 | })
165 | }
166 |
167 |
168 | function onUIError(msg :ErrorMsg) {
169 | figma.notify(msg.error)
170 | }
171 |
172 |
173 | function sendmsg<T extends Msg>(msg :T) {
174 | // send message to ui
175 | figma.ui.postMessage(msg)
176 | }
177 |
178 |
179 | function main() {
180 | figma.showUI(__html__, {
181 | width: 440,
182 | height: 600,
183 | })
184 |
185 | figma.ui.onmessage = msg => {
186 | switch (msg.type) {
187 |
188 | case "update-graph":
189 | onUpdateGraph(msg as UpdateGraphMsg)
190 | break
191 |
192 | case "error":
193 | onUIError(msg as ErrorMsg)
194 | break
195 |
196 | case "close-plugin":
197 | figma.closePlugin()
198 | break
199 |
200 | default:
201 | console.warn(`plugin received unexpected message`, msg)
202 | break
203 | }
204 | }
205 |
206 | figma.on("selectionchange", updateSelectedGraphFrame)
207 |
208 | // initial check
209 | updateSelectedGraphFrame()
210 | }
211 |
212 |
213 | main()
214 |
--------------------------------------------------------------------------------
/graphviz/src/structs.ts:
--------------------------------------------------------------------------------
1 | export interface Msg {
2 | type :string
3 | }
4 |
5 | export interface UpdateGraphMsg extends Msg {
6 | type :"update-graph"
7 | reqId :number
8 | svgCode :string
9 | sourceCode :string
10 | forceInsertNew :bool // don't attempt to replace exisiting graph
11 | }
12 |
13 | export interface ResponseMsg extends Msg {
14 | type :"response"
15 | reqId :number
16 | error? :string
17 | }
18 |
19 | export interface ErrorMsg extends Msg {
20 | type: "error"
21 | error: string
22 | }
23 |
24 | export interface ClosePluginMsg extends Msg {
25 | type: "close-plugin"
26 | }
27 |
28 | export interface UpdateUIMsg extends Msg {
29 | type: "update-ui"
30 | nodeId :string // non-empty when a graph node is selected
31 | sourceCode :string // valid when nodeId is set
32 | }
33 |
--------------------------------------------------------------------------------
/graphviz/src/ui.css:
--------------------------------------------------------------------------------
1 | @import url("https://rsms.me/inter/inter.css");
2 | @import url("https://rsms.me/res/fonts/iaw.css");
3 |
4 | /* reset */
5 | * { font-family: inherit; line-height: inherit; font-synthesis: none; }
6 | a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
7 | body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt,
8 | em, embed, fieldset, figcaption, figure, footer, form, grid, h1, h2, h3, h4, h5,
9 | h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main,
10 | mark, menu, nav, noscript, object, ol, output, p, pre, q, s, samp, section,
11 | small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th,
12 | thead, time, tr, tt, u, ul, var, video {
13 | margin: 0;
14 | padding: 0;
15 | border: 0;
16 | vertical-align: baseline;
17 | }
18 | blockquote, q { quotes: none; }
19 | blockquote:before, blockquote:after, q:before, q:after {
20 | content: "";
21 | content: none;
22 | }
23 | table {
24 | border-collapse: collapse;
25 | border-spacing: 0;
26 | }
27 | a, a:active, a:visited { color: inherit; }
28 | /* end of reset */
29 |
30 | :root {
31 | --blue: #0085ff;
32 | --fontSize: 12px;
33 | --editorFontSize: var(--fontSize);
34 | --fontFamily: Inter;
35 | --editorFontFamily: 'iaw-quattro';
36 | --toolbarHeight: 40px;
37 | }
38 | @supports (font-variation-settings: normal) {
39 | :root {
40 | --fontFamily: "Inter var";
41 | --editorFontFamily: 'iaw-quattro-var';
42 | }
43 | }
44 |
45 | body {
46 | background: transparent;
47 | color: #222;
48 | font: var(--fontSize)/1.4 var(--fontFamily), system-ui, -system-ui, sans-serif;
49 | display: flex;
50 | flex-direction: column;
51 | }
52 |
53 | textarea {
54 | flex:1 1 auto;
55 | min-height:100px;
56 | font-family: var(--editorFontFamily);
57 | font-size: var(--editorFontSize);
58 | line-height: 1.4;
59 | border: none;
60 | outline: none;
61 | padding: 8px 16px;
62 | resize: none;
63 |
64 | color: #666;
65 |
66 | &:focus {
67 | /*box-shadow: inset 0 0 0 2px rgba(0, 100, 255, 0.2);*/
68 | color: #000;
69 | }
70 | }
71 |
72 | #toolbar {
73 | height: var(--toolbarHeight);
74 | display: flex;
75 | justify-content: space-evenly;
76 | box-shadow: 0 -1px 0 0 rgba(0,0,0,0.1);
77 | z-index: 1;
78 |
79 | & button {
80 | flex: 1 1 50%;
81 | background: none;
82 | border: none;
83 | border-left: 1px solid #e5e5e5;
84 | padding: 0 16px;
85 | line-height: var(--toolbarHeight);
86 | font-weight: 500;
87 | font-size: inherit;
88 | white-space: nowrap;
89 |
90 | &:active {
91 | background: rgba(0,0,0,0.07);
92 | }
93 | &:focus {
94 | color:green;
95 | }
96 |
97 | &:first-child { border: none }
98 | &.primary {
99 | /*font-weight: 600;*/
100 | color: var(--blue);
101 | }
102 | }
103 | }
104 |
105 | @keyframes spin {
106 | 0% { transform: rotate(0deg); }
107 | 100% { transform: rotate(360deg); }
108 | }
109 |
110 | #spinner {
111 | position: fixed;
112 | left:0; top:0; right:0; bottom:48px;
113 | z-index: 9;
114 | pointer-events: none;
115 | display: flex;
116 | align-items: center;
117 | justify-content: center;
118 | opacity: 0;
119 | transition: opacity 100ms ease-in-out;
120 | & > div {
121 | position:relative;
122 | width:24px;
123 | height:24px;
124 | & svg {
125 | position:absolute;
126 | left:0; top:0;
127 | &.shadow {
128 | /* note: we can't use transform here */
129 | margin-top: 5px;
130 | filter: blur(1.5px);
131 | }
132 | &.shadow path {
133 | stroke: rgba(0, 0, 100, 0.1);
134 | }
135 | }
136 | }
137 | }
138 | #spinner.active {
139 | opacity: 1;
140 | transition-delay: 400ms;
141 | transition-duration: 200ms;
142 |
143 | & svg {
144 | animation-name: spin;
145 | animation-duration: 800ms;
146 | animation-iteration-count: infinite;
147 | animation-timing-function: linear;
148 | }
149 | }
150 |
--------------------------------------------------------------------------------
/graphviz/src/ui.html:
--------------------------------------------------------------------------------
1 | <head>
2 | <meta charset="utf-8">
3 | <script src="https://rsms.me/graphviz/graphviz.js"></script>
4 | </head>
5 | <body>
6 | <textarea id="dotcode" autocomplete="on" autocapitalize="none" autofocus wrap="off">
7 | # Attributes at top level apply to the graph itself.
8 | outputorder=edgesfirst
9 | pad="0.25"
10 | #bgcolor=hotpink
11 |
12 | # layout= specifies a layout engine:
13 | # circo — for circular layout of graphs
14 | # dot — for drawing directed graphs (the default)
15 | # fdp — for drawing undirected graphs
16 | # neato — for drawing undirected graphs
17 | # osage — for drawing large undirected graphs
18 | # twopi — for radial layouts of graphs
19 | layout=neato
20 | #layout=dot
21 | #layout=twopi
22 |
23 | # Default node attributes
24 | node [
25 | shape = circle
26 | style = "filled,bold"
27 | color = black
28 | fillcolor = "#F2F2F2"
29 | ]
30 |
31 | # Uncomment this to hide labels
32 | #node [ label="" ]
33 |
34 | # Uncomment this to arrange nodes in a grid
35 | #layout=osage edge [style=invis]
36 |
37 | # Edges
38 | A -> C
39 | B -> { C, D, F }
40 | C -> H
41 | D -> { F, G }
42 | E -> { F, G, J }
43 | F -> I
44 | G -> L
45 | H -> K
46 | I -> K
47 | J -> M
48 | K -> N
49 | L -> N
50 | M -> N
51 | N -> O
52 |
53 | # Node attributes
54 | A [ fillcolor = "#ECD1C9" ]
55 | B [ fillcolor = "#FBB5AE" ]
56 | C [ fillcolor = "#FFEFBC" ]
57 | D [ fillcolor = "#B7D1DF" ]
58 | E [ fillcolor = "#D1E2CE" ]
59 | F [ fillcolor = "#FADAE5" ]
60 | G [ fillcolor = "#ECE3D5" ]
61 | H [ fillcolor = "#F2F2F2" ]
62 | I [ fillcolor = "#ECE3C1" ]
63 | J [ fillcolor = "#BEDFC8" ]
64 | K [ fillcolor = "#F9F2B6" ]
65 | L [ fillcolor = "#EFD0BD" ]
66 | M [ fillcolor = "#DDD0E5" ]
67 | N [ fillcolor = "#F2E4C8" ]
68 | O [ fillcolor = "#CBCBCB" ]
69 | </textarea>
70 | <div id="toolbar">
71 | <button class="playground">Open in playground</button>
72 | <button class="demo">Open examples</button>
73 | <!-- <button class="gen-and-close">Create & close</button> -->
74 | <button class="gen primary">Create</button>
75 | </div>
76 | <div id="spinner">
77 | <div>
78 | <svg class="shadow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
79 | <path d="M22.5 12C22.5 14.0767 21.8842 16.1068 20.7304 17.8335C19.5767 19.5602 17.9368 20.906 16.0182 21.7007C14.0996 22.4955 11.9884 22.7034 9.95155 22.2982C7.91475 21.8931 6.04383 20.8931 4.57538 19.4246C3.10693 17.9562 2.1069 16.0852 1.70175 14.0484C1.29661 12.0116 1.50454 9.90045 2.29926 7.98182C3.09399 6.0632 4.4398 4.42332 6.16651 3.26957C7.89323 2.11581 9.9233 1.5 12 1.5" stroke="#0085FF" stroke-width="2"/>
80 | </svg>
81 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
82 | <path d="M22.5 12C22.5 14.0767 21.8842 16.1068 20.7304 17.8335C19.5767 19.5602 17.9368 20.906 16.0182 21.7007C14.0996 22.4955 11.9884 22.7034 9.95155 22.2982C7.91475 21.8931 6.04383 20.8931 4.57538 19.4246C3.10693 17.9562 2.1069 16.0852 1.70175 14.0484C1.29661 12.0116 1.50454 9.90045 2.29926 7.98182C3.09399 6.0632 4.4398 4.42332 6.16651 3.26957C7.89323 2.11581 9.9233 1.5 12 1.5" stroke="#0085FF" stroke-width="2"/>
83 | </svg>
84 | </div>
85 | </div>
86 | </body>
87 |
--------------------------------------------------------------------------------
/graphviz/src/ui.ts:
--------------------------------------------------------------------------------
1 | import { Msg, ClosePluginMsg, UpdateUIMsg, UpdateGraphMsg, ResponseMsg, ErrorMsg } from "./structs"
2 | import { Editor } from "./editor"
3 | import { addKeyEventHandler } from "./util"
4 |
5 | // declare function Viz(dotSource :string, outputFormat :string)
6 |
7 | // graphviz module
8 | type GVFormat = "svg" | "dot" | "json" | "dot_json" | "xdot_json";
9 | type GVEngine = "circo" | "dot" | "fdp" | "neato" | "osage" | "patchwork" | "twopi";
10 | const graphviz = window["graphviz"] as {
11 | layout(source :string, format? :GVFormat, engine? :GVEngine, timeout? :number) :Promise<string>
12 | }
13 |
14 |
15 | const isMac = navigator.platform.indexOf("Mac") != -1
16 | const genButton = document.querySelector('button.gen')! as HTMLButtonElement
17 | const playgroundButton = document.querySelector('button.playground')! as HTMLButtonElement
18 | const demoButton = document.querySelector('button.demo')! as HTMLButtonElement
19 | const spinner = document.querySelector('#spinner')! as HTMLDivElement
20 | const editor = new Editor(document.getElementById('dotcode')! as HTMLTextAreaElement)
21 |
22 | // memory-only, since we can't use localStorage in plugins
23 | let untitledSourceCode = editor.defaultText
24 |
25 | // genButton labels
26 | const genButtonLabelCreate = genButton.innerText
27 | const genButtonLabelUpdate = "Update"
28 | const genButtonLabelBusy = "Working"
29 | let genButtonLabel = genButtonLabelCreate
30 |
31 |
32 | const graphDefaults = (
33 | ' graph [fontname="Arial,Inter" bgcolor=transparent];\n' +
34 | ' node [fontname="Arial,Inter"];\n' +
35 | ' edge [fontname="Arial,Inter"];\n'
36 | )
37 |
38 |
39 | function wrapInGraphDirective(s :string) :string {
40 | return (
41 | 'digraph G {\n' +
42 | graphDefaults +
43 | s +
44 | '\n}\n'
45 | )
46 | }
47 |
48 |
49 | async function makeViz(dotSource :string) :Promise<string> {
50 | let svg = ""
51 | let originalDotSource = dotSource
52 |
53 | let addedGraphDirective = false
54 | let m = dotSource.match(/\b(?:di)?graph(?:\s+[^\{]+|)[\r\n\s]*\{/)
55 | if (m) {
56 | // found graph directive -- add defaults
57 | let i = (m.index||0) + m[0].length
58 | dotSource = dotSource.substr(0, i) + "\n" + graphDefaults + dotSource.substr(i)
59 | } else {
60 | // no graph directive -- wrap & add defaults
61 | dotSource = wrapInGraphDirective(dotSource)
62 | addedGraphDirective = true
63 | }
64 |
65 | while (1) {
66 | try {
67 | // svg = Viz(dotSource, "svg")
68 | svg = await graphviz.layout(dotSource, "svg", "dot", 30000)
69 | break
70 | } catch (err) {
71 | if (err.message && (err.message+"").toLowerCase().indexOf("syntax error") != -1) {
72 | if (!addedGraphDirective) {
73 | // try and see if adding graph directive fixes it
74 | dotSource = wrapInGraphDirective(originalDotSource)
75 | addedGraphDirective = true
76 | dlog("makeViz retry with wrapped graph directive. New dotSource:\n" + dotSource)
77 | } else {
78 | throw new Error("malformed dot code")
79 | }
80 | } else {
81 | throw err
82 | }
83 | }
84 | }
85 |
86 | // clean up svg
87 | // <?xml version="1.0" encoding="UTF-8" standalone="no"?>
88 | // <!DOCTYPE svg PUBLIC ...>
89 | // <!-- comments -->
90 | // <title>...
91 | // xmlns:xlink="http://www.w3.org/1999/xlink"
92 | // (useless rectangle)
93 | svg = svg.replace(
94 | /<\?xml[^>]+\?>|<\!DOCTYPE[^>]+>|<\!--.*-->|xmlns:xlink="http:\/\/www.w3.org\/1999\/xlink\"/gm,
95 | ""
96 | )
97 |
98 | // remove comments and collapse linebreaks.
99 | // Note that none of the data generated actually has linebreaks, so this is safe.
100 | svg = svg.replace(/[\r\n]+/g, " ").replace(/<\!--.*-->/g, "").trim()
101 |
102 | // remove background rectangle
103 | svg = svg.replace(
104 | /^(]+>\s*]+>)\s*/,
105 | "$1"
106 | )
107 |
108 | // replace fontname
109 | svg = svg.replace(/"Arial,Inter"/g, '"Inter"')
110 |
111 | // scale?
112 | let scale = [1,1]
113 | m = dotSource.match(/(?:^|\n)\s*scale\s*=\s*([\d"',]+);?/im)
114 | if (m) {
115 | scale = m[1].replace(/[^\d\.]/g, " ").trim().split(" ").map(parseFloat)
116 | if (scale.length == 1) {
117 | scale[1] = scale[0]
118 | }
119 | // class="graph" transform="scale(1 1) rotate(0) translate(72 374)"
120 | let i = svg.indexOf('class="graph" transform="')
121 | if (i != -1) {
122 | i += 'class="graph" transform="'.length
123 | svg = svg.substr(0, i) + `scale(${scale[0]} ${scale[1]}) ` + svg.substr(i)
124 | }
125 | }
126 |
127 | // update size if scale != 1
128 | if (scale[0] != 1 || scale[1] != 1) {
129 | // extract width & height
130 | //