flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/jazz-endless-canvas. infinite multiplayer drawing canvas in the browser, jazz, svelte, paper.js
flo-bit.dev/jazz-endless-canvas/
add loading indicator, switch api key
author
Florian
date
(Oct 16, 2025, 10:48 AM +0200)
commit
88277c5e
88277c5efbdd8fafb7ae66f71593401322461bdb
parent
2419f173
2419f173f6508490321307b3ec5daae7b26a1952
+34
-42
+3
-1
src/routes/+layout.svelte
+3
-1
src/routes/+layout.svelte
···
5
5
import '../app.css';
6
6
7
7
let { children } = $props();
8
+
9
+
const API_KEY = 'Y29felVlcTNoSGh6N21USlJROEd6dzRkZVZLTGRYfGNvX3o2Q1lMd015aUtrdjhjNm5lNFpoSEU5azdrenxjb196bndCU3pUdE1yWlFuMTFtM1RNenNoRnp0NDQ';
8
10
</script>
9
11
10
12
<JazzProvider
11
13
sync={{
12
-
peer: `wss://cloud.jazz.tools/?key=flo.bit.dev@gmail.com`
14
+
peer: `wss://cloud.jazz.tools/?key=` + API_KEY
13
15
}}
14
16
AccountSchema={MyAppAccount}
15
17
>
+31
-41
src/routes/Draw.svelte
+31
-41
src/routes/Draw.svelte
···
49
49
unsubscribe?: () => void;
50
50
drawnPaths?: Record<string, paper.Path>;
51
51
group?: paper.Group;
52
+
loadingShape?: paper.Shape.Rectangle;
52
53
}
53
54
> = $state({});
54
55
···
57
58
return;
58
59
}
59
60
61
+
// first show loading state in the cell
62
+
gridData[id] ??= {};
63
+
gridData[id].group ??= new paper.Group();
64
+
65
+
let loadingGroup = gridData[id].group;
66
+
67
+
const idx = indexFromGridId(id);
68
+
if (!idx) return;
69
+
70
+
if (!gridData[id].loadingShape) {
71
+
let point = new paper.Point(cellSize * (idx.x + 0.5), cellSize * (idx.y + 0.5));
72
+
let shape = new paper.Shape.Circle(point, cellSize / 10);
73
+
shape.strokeColor = '#ffffff' as unknown as paper.Color;
74
+
shape.strokeWidth = 10;
75
+
shape.opacity = 0.5;
76
+
shape.dashArray = [1000, 1000];
77
+
shape.dashOffset = 0;
78
+
shape.onFrame = (event: any) => {
79
+
shape.dashOffset += event.delta * 1000;
80
+
};
81
+
82
+
gridData[id].loadingShape = shape;
83
+
84
+
loadingGroup.addChild(shape);
85
+
}
86
+
60
87
const sub = PaintingPaths.subscribe(
61
88
painting.cells[id]?.paths.id,
62
89
{
···
70
97
);
71
98
// console.log('added subscription', id);
72
99
73
-
gridData[id] ??= {};
74
-
75
100
if (gridData[id].group) {
76
101
gridData[id].group.visible = true;
77
102
}
···
98
123
gridData[id].drawnPaths ??= {};
99
124
gridData[id].group ??= new paper.Group();
100
125
126
+
if (gridData[id].loadingShape) {
127
+
gridData[id].loadingShape.visible = false;
128
+
}
129
+
101
130
let drawnPaths = gridData[id].drawnPaths;
102
131
let group = gridData[id].group;
103
132
···
107
136
drawnPaths[path.id] = new paper.Path();
108
137
drawnPaths[path.id].strokeColor = path.strokeColor as unknown as paper.Color;
109
138
drawnPaths[path.id].strokeWidth = path.strokeWidth;
110
-
// drawnPaths[path.id].dashArray = [40, 40];
111
-
112
-
// // animate the dash offset
113
-
// drawnPaths[path.id].dashOffset = 0;
114
-
// drawnPaths[path.id].onFrame = (event) => {
115
-
// drawnPaths[path.id].dashOffset += event.delta * 200;
116
-
// }
117
-
118
-
// let scale = 20;
119
-
// let updateTime = 0;
120
-
// drawnPaths[path.id].onFrame = (event) => {
121
-
// drawnPaths[path.id].dashOffset += event.delta * 200;
122
-
// updateTime += event.delta;
123
-
// if(updateTime < 0.1) return;
124
-
// updateTime = 0;
125
-
126
-
// // move all segments slightly
127
-
// for (let segment of drawnPaths[path.id].segments) {
128
-
// if(!segment.original) {
129
-
// segment.original = {
130
-
// x: segment.point.x,
131
-
// y: segment.point.y,
132
-
133
-
// handleInX: segment.handleIn.x,
134
-
// handleInY: segment.handleIn.y,
135
-
// handleOutX: segment.handleOut.x,
136
-
// handleOutY: segment.handleOut.y
137
-
// }
138
-
// }
139
-
// segment.point.x = segment.original.x + Math.random() * scale - scale / 2;
140
-
// segment.point.y = segment.original.y + Math.random() * scale - scale / 2;
141
-
142
-
// segment.handleIn.x = segment.original.handleInX + Math.random() * scale - scale / 2;
143
-
// segment.handleIn.y = segment.original.handleInY + Math.random() * scale - scale / 2;
144
-
145
-
// segment.handleOut.x = segment.original.handleOutX + Math.random() * scale - scale / 2;
146
-
// segment.handleOut.y = segment.original.handleOutY + Math.random() * scale - scale / 2;
147
-
// }
148
-
// }
149
139
150
140
group.addChild(drawnPaths[path.id]);
151
141