nonbinary.computer
OR-1 dataflow CPU sketch
1import cytoscape from "cytoscape";
2import { baseStylesheet } from "@common/style";
3
4const physicalStyles: cytoscape.StylesheetStyle[] = [
5 {
6 selector: "node.pe-cluster",
7 style: {
8 shape: "roundrectangle",
9 width: "label",
10 height: "label",
11 "border-width": 1.5,
12 "border-color": "#7986cb",
13 "background-color": "#e8eaf6",
14 "background-opacity": 0.5,
15 padding: "16px",
16 "text-valign": "top",
17 "text-halign": "center",
18 label: "data(label)",
19 "font-size": 9,
20 "font-weight": "bold",
21 color: "#3949ab",
22 },
23 },
24 {
25 selector: "node.port-node",
26 style: {
27 shape: "ellipse",
28 width: 10,
29 height: 10,
30 "background-color": "#e57373",
31 "background-opacity": 1,
32 "border-width": 0,
33 label: "",
34 },
35 },
36 {
37 selector: "edge.intra-pe",
38 style: {
39 width: 0.75,
40 "line-color": "#616161",
41 "target-arrow-color": "#616161",
42 "source-label": "",
43 "target-label": "data(targetLabel)",
44 "target-text-offset": 5,
45 "target-text-margin-y": -6,
46 "font-size": 7,
47 "font-family": "monospace",
48 color: "#333",
49 "text-background-color": "#fff",
50 "text-background-opacity": 0.9,
51 "text-background-padding": "1px",
52 },
53 },
54 {
55 selector: "edge.exit-segment",
56 style: {
57 width: 0.75,
58 "line-color": "#616161",
59 "target-arrow-shape": "none",
60 "target-label": "",
61 "source-label": "",
62 },
63 },
64 {
65 selector: "edge.entry-segment",
66 style: {
67 width: 0.75,
68 "line-color": "#616161",
69 "target-arrow-color": "#616161",
70 "target-arrow-shape": "triangle",
71 "source-label": "",
72 "target-label": "data(targetLabel)",
73 "target-text-offset": 5,
74 "target-text-margin-y": -6,
75 "font-size": 7,
76 "font-family": "monospace",
77 color: "#333",
78 "text-background-color": "#fff",
79 "text-background-opacity": 0.9,
80 "text-background-padding": "1px",
81 },
82 },
83 {
84 selector: "edge.bus-segment",
85 style: {
86 width: 2,
87 "line-color": "#e57373",
88 "target-arrow-color": "#e57373",
89 "target-arrow-shape": "triangle",
90 "arrow-scale": 0.8,
91 label: "data(label)",
92 "target-label": "",
93 "source-label": "",
94 "text-margin-y": -8,
95 "font-size": 7,
96 "font-family": "monospace",
97 color: "#e57373",
98 "text-background-color": "#fff",
99 "text-background-opacity": 0.9,
100 "text-background-padding": "1px",
101 },
102 },
103 {
104 selector: "edge.seed-edge",
105 style: {
106 width: 1,
107 "line-style": "dashed",
108 "line-color": "#9e9e9e",
109 "target-arrow-color": "#9e9e9e",
110 "target-text-offset": 5,
111 "target-text-margin-y": -6,
112 },
113 },
114 {
115 selector: "edge.physical",
116 style: {
117 "curve-style": "bezier",
118 },
119 },
120];
121
122export const stylesheet: cytoscape.StylesheetStyle[] = [
123 ...baseStylesheet,
124 ...physicalStyles,
125];