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 = '#343742ff';
67 ctx.strokeStyle = node.selected ? '#004696ff' : '#fff0';
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.shadowColor = '#0005';
79 ctx.shadowBlur = 10;
80
81 ctx.stroke();
82 ctx.fill();
83
84 ctx.shadowBlur = 0;
85
86 // Draw Node Name
87 ctx.fillStyle = '#fff';
88 ctx.font = (25 * position.scale) + 'px Rubik';
89 ctx.textAlign = 'center';
90
91 ctx.fillText(node.name,
92 (nodeX + (node.w * 0.5) + startX + position.x) * position.scale,
93 (nodeY + 10 + startY + position.y) * position.scale
94 );
95
96 // Draw Inputs
97 ctx.font = (15 * position.scale) + 'px Rubik';
98 ctx.textAlign = 'left';
99
100 node.inputs.map(( input, i ) => {
101 ctx.fillStyle = NodeIOLinkColours(input);
102
103 ctx.beginPath();
104 ctx.arc(
105 (nodeX - 10 + startX + 10 + position.x) * position.scale,
106 (nodeY + 50 + (30 * i) + startY + 10 + position.y) * position.scale,
107 7 * position.scale,
108 0,
109 Math.PI * 2,
110 );
111 ctx.fill();
112
113 ctx.fillText(input.name,
114 (nodeX + 15 + startX + position.x) * position.scale,
115 (nodeY + 53 + (30 * i) + startY + position.y) * position.scale,
116 )
117 })
118
119 // Draw Outputs
120 ctx.textAlign = 'right';
121
122 node.outputs.map(( output, i ) => {
123 ctx.fillStyle = NodeIOLinkColours(output);
124
125 ctx.beginPath();
126 ctx.arc(
127 (nodeX + (node.w - 10) + startX + 10 + position.x) * position.scale,
128 (nodeY + 50 + (30 * i) + startY + 10 + position.y) * position.scale,
129 7 * position.scale,
130 0,
131 Math.PI * 2,
132 );
133 ctx.fill();
134
135 ctx.fillText(output.name,
136 (nodeX + (node.w - 15) + startX + position.x) * position.scale,
137 (nodeY + 53 + (30 * i) + startY + position.y) * position.scale,
138 )
139 })
140 })
141
142 nodes.map(node => {
143 let nodeX = Math.round(node.x / 10) * 10;
144 let nodeY = Math.round(node.y / 10) * 10;
145
146 node.outputs.map(( output, i ) => {
147 output.connections.map(partner => {
148 ctx.strokeStyle = NodeIOLinkColours(output);
149 ctx.lineWidth = 3 * position.scale;
150
151 drawCurve(ctx,
152 (nodeX + (node.w - 10) + 10 + startX + position.x) * position.scale,
153 (nodeY + 50 + (30 * i) + 10 + startY + position.y) * position.scale,
154 ((Math.round(partner.parent.x / 10) * 10) + startX + position.x) * position.scale,
155 ((Math.round(partner.parent.y / 10) * 10) + 60 + (30 * partner.index) + startY + position.y) * position.scale,
156 );
157 ctx.stroke();
158 })
159 })
160 })
161}
162
163export let renderContextMenu = (
164 ctx: CanvasRenderingContext2D,
165 contextMenu: ContextMenu
166) => {
167 if(contextMenu.visible){
168 ctx.font = '20px Rubik';
169 ctx.textBaseline = 'top';
170 ctx.textAlign = 'left';
171
172 let widestItem = 0;
173 contextMenu.items.map(x => {
174 let width = ctx.measureText(x.text).width;
175 if(widestItem < width)widestItem = width;
176 });
177
178 contextMenu.size = [ widestItem + 20, 25 * contextMenu.items.length + 20 ]
179
180 drawRoundedRect(ctx, contextMenu.position[0], contextMenu.position[1], contextMenu.size[0], contextMenu.size[1], 10);
181 ctx.fillStyle = '#444';
182 ctx.fill();
183
184 let submenuToRender: any = null;
185
186 contextMenu.items.map((x, i) => {
187 ctx.fillStyle = x.hovered ? '#aaa' : '#fff';
188 ctx.fillText(x.text, contextMenu.position[0] + 10, contextMenu.position[1] + 10 + 25 * i);
189
190 if(x.hovered && x.menu){
191 submenuToRender = x.menu;
192 submenuToRender.position = [ contextMenu.position[0] + contextMenu.size[0] + 5, contextMenu.position[1] + 25 * i ];
193 }
194 });
195
196 if(submenuToRender){
197 renderContextMenu(ctx, submenuToRender);
198 }
199 }
200}
201
202export let renderTempDrawing = (
203 canvas: HTMLCanvasElement,
204 ctx: CanvasRenderingContext2D,
205 drawingTo: [ number, number ],
206 drawingFrom: NodeIO,
207 position: PositionInfo
208) => {
209 let startX = canvas.width / -2;
210 let startY = canvas.height / -2;
211
212 // DEBUG STUFF
213 // ctx.fillStyle = '#f00';
214
215 // ctx.fillRect(
216 // (drawingTo[0] + 10 + startX + position.x) * position.scale,
217 // (drawingTo[1] + 10 + startY + position.y) * position.scale,
218 // 10, 10
219 // );
220
221 // ctx.fillRect(
222 // (drawingFrom.parent.x + (drawingFrom.parent.w - 10) + 10 + startX + position.x) * position.scale,
223 // (drawingFrom.parent.y + 50 + (30 * drawingFrom.index) + 10 + startY + position.y) * position.scale,
224 // 10, 10
225 // );
226
227 ctx.strokeStyle = NodeIOLinkColours(drawingFrom);
228 ctx.lineWidth = 3 * position.scale;
229
230 let nodeX = Math.round(drawingFrom.parent.x / 10) * 10;
231 let nodeY = Math.round(drawingFrom.parent.y / 10) * 10;
232
233 drawCurve(ctx,
234 (nodeX + (drawingFrom.parent.w - 10) + 10 + startX + position.x) * position.scale,
235 (nodeY + 50 + (30 * drawingFrom.index) + 10 + startY + position.y) * position.scale,
236 (drawingTo[0] + 10 + startX + position.x) * position.scale,
237 (drawingTo[1] + 10 + startY + position.y) * position.scale,
238 );
239 ctx.stroke();
240}
241
242let drawCurve = ( ctx: CanvasRenderingContext2D, fromX: number, fromY: number, toX: number, toY: number ) => {
243 ctx.beginPath();
244
245 let bias = Math.sqrt(( fromX - toX ) * ( fromX - toX ) + ( fromY - toY ) * ( fromY - toY )) / 3;
246
247 let start = [ fromX + bias, fromY ];
248 let end = [ toX - bias, toY ];
249
250 let midpoint = [
251 lerp(start[0], end[0], 0.5),
252 lerp(start[1], end[1], 0.5)
253 ];
254
255 ctx.bezierCurveTo(fromX, fromY, start[0], start[1], midpoint[0], midpoint[1]);
256 ctx.bezierCurveTo(midpoint[0], midpoint[1], end[0], end[1], toX, toY);
257}
258
259export let renderNullTab = (
260 canvas: HTMLCanvasElement,
261 ctx: CanvasRenderingContext2D,
262) => {
263 ctx.fillStyle = '#fff';
264
265 ctx.font = '20px Rubik';
266 ctx.textBaseline = 'middle';
267 ctx.textAlign = 'center';
268
269 let textX = lerp((canvas.width / -2) + 200, canvas.width / 2, 0.5);
270 let textY = lerp((canvas.height / -2) + 40, canvas.height / 2, 0.5);
271
272 ctx.font = '40px Rubik';
273 ctx.fillText('Welcome to VRCMacros', textX, textY);
274
275 ctx.font = '20px Rubik';
276 ctx.fillText('Create a new tab to get started!', textX, textY + 40);
277}
278
279let drawRoundedRect = ( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, radius: number ) => {
280 ctx.beginPath();
281 ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
282 ctx.lineTo(x + w - radius, y);
283 ctx.arc(x + w - radius, y + radius, radius, Math.PI * 1.5, 0);
284 ctx.lineTo(x + w, y + h - radius);
285 ctx.arc(x + w - radius, y + h - radius, radius, 0, Math.PI * 0.5);
286 ctx.lineTo(x + radius, y + h);
287 ctx.arc(x + radius, y + h - radius, radius, Math.PI * 0.5, Math.PI);
288 ctx.closePath();
289}