nonbinary.computer
OR-1 dataflow CPU sketch
1import cytoscape from "cytoscape";
2
3export const baseStylesheet: cytoscape.StylesheetStyle[] = [
4 {
5 selector: "node",
6 style: {
7 shape: "ellipse",
8 width: 40,
9 height: 40,
10 "text-valign": "center",
11 "text-halign": "center",
12 label: "data(label)",
13 "text-wrap": "wrap",
14 "text-max-width": "36px",
15 "font-size": 8,
16 "font-family": "monospace",
17 color: "#111",
18 "text-outline-width": 0,
19 "background-color": "#fff",
20 "background-opacity": 1,
21 "border-width": 1.5,
22 "border-color": "data(colour)",
23 },
24 },
25 {
26 selector: "$node > node",
27 style: {
28 shape: "roundrectangle",
29 width: "label",
30 height: "label",
31 "border-style": "dashed",
32 "border-width": 1,
33 "border-color": "#888",
34 "background-color": "#c8c8c8",
35 "background-opacity": 0.06,
36 padding: "20px",
37 "text-valign": "top",
38 "text-halign": "center",
39 label: "data(label)",
40 "font-size": 9,
41 color: "#666",
42 },
43 },
44 {
45 selector: "edge",
46 style: {
47 "curve-style": "unbundled-bezier",
48 "target-arrow-shape": "triangle",
49 "arrow-scale": 0.6,
50 "target-arrow-color": "#333",
51 "line-color": "#333",
52 width: 1,
53 "target-label": "data(targetLabel)",
54 "target-text-offset": 14,
55 "target-text-margin-y": -6,
56 "source-label": "data(sourceLabel)",
57 "source-text-offset": 14,
58 "source-text-margin-y": -6,
59 "font-size": 7,
60 "font-family": "monospace",
61 color: "#333",
62 "text-background-color": "#fff",
63 "text-background-opacity": 0.9,
64 "text-background-padding": "1px",
65 },
66 },
67 {
68 selector: "node.error",
69 style: {
70 "border-style": "dashed",
71 "border-width": 1.5,
72 "border-color": "#e53935",
73 },
74 },
75 {
76 selector: "edge.error",
77 style: {
78 "line-style": "dashed",
79 "line-color": "#e53935",
80 "target-arrow-color": "#e53935",
81 },
82 },
83 {
84 selector: 'node[category = "structure_memory"]',
85 style: {
86 shape: "roundrectangle",
87 width: "label",
88 height: "label",
89 padding: "14px",
90 "text-valign": "center",
91 "text-halign": "center",
92 "text-wrap": "wrap",
93 "text-max-width": "200px",
94 "font-size": 8,
95 "font-family": "monospace",
96 "background-color": "#efebe9",
97 "background-opacity": 0.5,
98 "border-style": "dashed",
99 "border-width": 1.5,
100 "border-color": "#795548",
101 color: "#4e342e",
102 },
103 },
104 {
105 selector: "edge.synthetic",
106 style: {
107 "line-style": "dashed",
108 "line-color": "#795548",
109 "target-arrow-color": "#795548",
110 width: 1,
111 },
112 },
113];