this repo has no description
phaz.uk
1import { ContextMenu } from "./structs/ContextMenu";
2import { Node, NodeIO, NodeIOLinkColours } from "./structs/node";
3import { lerp } from "./utils/lerp";
4
5export interface PositionInfo{
6 x: number,
7 y: number,
8 scale: number
9}
10
11const GRID_SIZE = 50;
12
13export let renderBackgroundGrid = (
14 canvas: HTMLCanvasElement,
15 ctx: CanvasRenderingContext2D,
16 position: PositionInfo
17) => {
18 let offsetX = position.x % 50;
19 let offsetY = position.y % 50;
20
21 let gridAmountX = canvas.width / (GRID_SIZE * position.scale);
22 let gridAmountY = canvas.height / (GRID_SIZE * position.scale);
23
24 ctx.fillStyle = '#fff1';
25
26 for (let x = 0; x < gridAmountX / 2; x++) {
27 for (let y = 0; y < gridAmountY / 2; y++) {
28 ctx.fillRect(
29 ((x * GRID_SIZE) + offsetX) * position.scale,
30 ((y * GRID_SIZE) + offsetY) * position.scale,
31 5 * position.scale, 5 * position.scale);
32
33 ctx.fillRect(
34 (((x + 1) * GRID_SIZE) - offsetX) * -position.scale,
35 ((y * GRID_SIZE) + offsetY) * position.scale,
36 5 * position.scale, 5 * position.scale);
37
38 ctx.fillRect(
39 ((x * GRID_SIZE) + offsetX) * position.scale,
40 (((y + 1) * GRID_SIZE) - offsetY) * -position.scale,
41 5 * position.scale, 5 * position.scale);
42
43 ctx.fillRect(
44 (((x + 1) * GRID_SIZE) - offsetX) * -position.scale,
45 (((y + 1) * GRID_SIZE) - offsetY) * -position.scale,
46 5 * position.scale, 5 * position.scale);
47 }
48 }
49}
50
51export let renderNodes = (
52 canvas: HTMLCanvasElement,
53 ctx: CanvasRenderingContext2D,
54 nodes: Node[],
55 position: PositionInfo
56) => {
57 let startX = canvas.width / -2;
58 let startY = canvas.height / -2;
59
60 ctx.textBaseline = 'top';
61
62 nodes.map(node => {
63 let nodeX = Math.round(node.x / 10) * 10;
64 let nodeY = Math.round(node.y / 10) * 10;
65
66 ctx.fillStyle = '#1f2129';
67 ctx.strokeStyle = node.selected ? '#004696ff' : '#fff5';
68 ctx.lineWidth = 5 * position.scale;
69
70 // Draw Node Box
71 drawRoundedRect(ctx,
72 (nodeX + startX + position.x) * position.scale,
73 (nodeY + startY + position.y) * position.scale,
74 node.w * position.scale,
75 node.h * position.scale,
76 10 * position.scale);
77
78 ctx.stroke();
79 ctx.fill();
80
81 // Draw Node Name
82 ctx.fillStyle = '#fff';
83 ctx.font = (25 * position.scale) + 'px Comic Mono';
84 ctx.textAlign = 'center';
85
86 ctx.fillText(node.name,
87 (nodeX + (node.w * 0.5) + startX + position.x) * position.scale,
88 (nodeY + 10 + startY + position.y) * position.scale
89 );
90
91 // Draw Inputs
92 ctx.font = (15 * position.scale) + 'px Comic Mono';
93 ctx.textAlign = 'left';
94
95 node.inputs.map(( input, i ) => {
96 ctx.fillStyle = NodeIOLinkColours(input);
97 ctx.fillRect(
98 (nodeX + 10 + startX + position.x) * position.scale,
99 (nodeY + 50 + (30 * i) + startY + position.y) * position.scale,
100 20 * position.scale, 20 * position.scale
101 )
102
103 ctx.fillText(input.name,
104 (nodeX + 35 + startX + position.x) * position.scale,
105 (nodeY + 53 + (30 * i) + startY + position.y) * position.scale,
106 )
107 })
108
109 // Draw Outputs
110 ctx.textAlign = 'right';
111
112 node.outputs.map(( output, i ) => {
113 ctx.fillStyle = NodeIOLinkColours(output);
114 ctx.fillRect(
115 (nodeX + (node.w - 30) + startX + position.x) * position.scale,
116 (nodeY + 50 + (30 * i) + startY + position.y) * position.scale,
117 20 * position.scale, 20 * position.scale
118 )
119
120 ctx.fillText(output.name,
121 (nodeX + (node.w - 35) + startX + position.x) * position.scale,
122 (nodeY + 53 + (30 * i) + startY + position.y) * position.scale,
123 )
124 })
125 })
126
127 nodes.map(node => {
128 let nodeX = Math.round(node.x / 10) * 10;
129 let nodeY = Math.round(node.y / 10) * 10;
130
131 node.outputs.map(( output, i ) => {
132 output.connections.map(partner => {
133 ctx.strokeStyle = NodeIOLinkColours(output);
134 drawCurve(ctx,
135 (nodeX + (node.w - 30) + 10 + startX + position.x) * position.scale,
136 (nodeY + 50 + (30 * i) + 10 + startY + position.y) * position.scale,
137 ((Math.round(partner.parent.x / 10) * 10) + 20 + startX + position.x) * position.scale,
138 ((Math.round(partner.parent.y / 10) * 10) + 60 + (30 * partner.index) + startY + position.y) * position.scale,
139 );
140 ctx.stroke();
141 })
142 })
143 })
144}
145
146export let renderContextMenu = (
147 ctx: CanvasRenderingContext2D,
148 contextMenu: ContextMenu
149) => {
150 if(contextMenu.visible){
151 ctx.font = '20px Arial';
152 ctx.textBaseline = 'top';
153 ctx.textAlign = 'left';
154
155 let widestItem = 0;
156 contextMenu.items.map(x => {
157 let width = ctx.measureText(x.text).width;
158 if(widestItem < width)widestItem = width;
159 });
160
161 contextMenu.size = [ widestItem + 20, 25 * contextMenu.items.length + 20 ]
162
163 drawRoundedRect(ctx, contextMenu.position[0], contextMenu.position[1], contextMenu.size[0], contextMenu.size[1], 10);
164 ctx.fillStyle = '#444';
165 ctx.fill();
166
167 let submenuToRender: any = null;
168
169 contextMenu.items.map((x, i) => {
170 ctx.fillStyle = x.hovered ? '#aaa' : '#fff';
171 ctx.fillText(x.text, contextMenu.position[0] + 10, contextMenu.position[1] + 10 + 25 * i);
172
173 if(x.hovered && x.menu){
174 submenuToRender = x.menu;
175 submenuToRender.position = [ contextMenu.position[0] + contextMenu.size[0] + 5, contextMenu.position[1] + 25 * i ];
176 }
177 });
178
179 if(submenuToRender){
180 renderContextMenu(ctx, submenuToRender);
181 }
182 }
183}
184
185export let renderTempDrawing = (
186 canvas: HTMLCanvasElement,
187 ctx: CanvasRenderingContext2D,
188 drawingTo: [ number, number ],
189 drawingFrom: NodeIO,
190 position: PositionInfo
191) => {
192 let startX = canvas.width / -2;
193 let startY = canvas.height / -2;
194
195 ctx.fillStyle = '#f00';
196
197 ctx.fillRect(
198 (drawingTo[0] + 10 + startX + position.x) * position.scale,
199 (drawingTo[1] + 10 + startY + position.y) * position.scale,
200 10, 10
201 );
202
203 ctx.fillRect(
204 (drawingFrom.parent.x + (drawingFrom.parent.w - 30) + 10 + startX + position.x) * position.scale,
205 (drawingFrom.parent.y + 50 + (30 * drawingFrom.index) + 10 + startY + position.y) * position.scale,
206 10, 10
207 );
208
209 ctx.strokeStyle = NodeIOLinkColours(drawingFrom);
210 drawCurve(ctx,
211 (drawingFrom.parent.x + (drawingFrom.parent.w - 30) + 10 + startX + position.x) * position.scale,
212 (drawingFrom.parent.y + 50 + (30 * drawingFrom.index) + 10 + startY + position.y) * position.scale,
213 (drawingTo[0] + 10 + startX + position.x) * position.scale,
214 (drawingTo[1] + 10 + startY + position.y) * position.scale,
215 );
216 ctx.stroke();
217}
218
219let drawCurve = ( ctx: CanvasRenderingContext2D, fromX: number, fromY: number, toX: number, toY: number ) => {
220 ctx.beginPath();
221
222 let bias = Math.sqrt(( fromX - toX ) * ( fromX - toX ) + ( fromY - toY ) * ( fromY - toY )) / 3;
223
224 let start = [ fromX + bias, fromY ];
225 let end = [ toX - bias, toY ];
226
227 let midpoint = [
228 lerp(start[0], end[0], 0.5),
229 lerp(start[1], end[1], 0.5)
230 ];
231
232 ctx.bezierCurveTo(fromX, fromY, start[0], start[1], midpoint[0], midpoint[1]);
233 ctx.bezierCurveTo(midpoint[0], midpoint[1], end[0], end[1], toX, toY);
234}
235
236export let renderNullTab = (
237 canvas: HTMLCanvasElement,
238 ctx: CanvasRenderingContext2D,
239) => {
240 ctx.fillStyle = '#fff';
241
242 ctx.font = '20px Arial';
243 ctx.textBaseline = 'middle';
244 ctx.textAlign = 'center';
245
246 let textX = lerp((canvas.width / -2) + 200, canvas.width / 2, 0.5);
247 let textY = lerp((canvas.height / -2) + 40, canvas.height / 2, 0.5);
248
249 ctx.font = '40px Arial';
250 ctx.fillText('Welcome to VRCMacros', textX, textY);
251
252 ctx.font = '20px Arial';
253 ctx.fillText('Create a new tab to get started!', textX, textY + 40);
254}
255
256let drawRoundedRect = ( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, radius: number ) => {
257 ctx.beginPath();
258 ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
259 ctx.lineTo(x + w - radius, y);
260 ctx.arc(x + w - radius, y + radius, radius, Math.PI * 1.5, 0);
261 ctx.lineTo(x + w, y + h - radius);
262 ctx.arc(x + w - radius, y + h - radius, radius, 0, Math.PI * 0.5);
263 ctx.lineTo(x + radius, y + h);
264 ctx.arc(x + radius, y + h - radius, radius, Math.PI * 0.5, Math.PI);
265 ctx.closePath();
266}