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/
small fixes
author
Florian
date
(Jun 9, 2025, 12:04 AM +0200)
commit
2419f173
2419f173f6508490321307b3ec5daae7b26a1952
parent
64430bd5
64430bd5fb1cb4ad47908d2666f829d29e2096a7
+53
-9
+6
-2
src/routes/+page.svelte
+6
-2
src/routes/+page.svelte
···
73
73
let furthestCell = '';
74
74
75
75
let pathCount = 0;
76
+
let segmentCount = 0;
76
77
let loadedCells = 0;
77
78
78
79
let painters = new Set();
···
103
104
console.log('error loading cell', cell);
104
105
continue;
105
106
}
106
-
107
+
107
108
loadedCells++;
108
109
pathCount += paths.length;
109
110
110
111
for (let path of paths) {
111
112
painters.add(path._edits.segments?.by?.profile?.id);
113
+
segmentCount += (path.segments?.length ?? 0) * 2;
112
114
}
113
115
114
116
console.log(num + '/' + Object.keys(loadedPainting.cells).length);
···
120
122
console.log('loaded cells', loadedCells, 'of', Object.keys(loadedPainting.cells).length);
121
123
122
124
console.log('path count', pathCount);
125
+
console.log('segment count', segmentCount);
123
126
console.log('painters', painters.size);
124
127
}
125
128
···
148
151
149
152
<ul>
150
153
<li>
151
-
Move around by selecting the "move" tool and dragging the canvas around (or use w, a, s, d)
154
+
Move around by selecting the "move" tool and dragging the canvas around (or use w, a, s, d) (or while painting, shift + drag or drag with two fingers)
152
155
</li>
153
156
<li>
154
157
Select the "paint" tool to draw on the canvas (you can also change the color and stroke
155
158
width)
156
159
</li>
160
+
157
161
<li>Zoom with + and - or pinch on mobile</li>
158
162
<li>Send this website to your friends to draw together</li>
159
163
</ul>
+47
-7
src/routes/Draw.svelte
+47
-7
src/routes/Draw.svelte
···
107
107
drawnPaths[path.id] = new paper.Path();
108
108
drawnPaths[path.id].strokeColor = path.strokeColor as unknown as paper.Color;
109
109
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
+
// }
110
149
111
150
group.addChild(drawnPaths[path.id]);
112
151
···
172
211
let bounds = scope?.view.bounds;
173
212
if (!bounds) return;
174
213
175
-
let topY = Math.floor(bounds.y / cellSize) - 2;
176
-
let bottomY = Math.floor((bounds.y + bounds.height) / cellSize) + 2;
177
-
let leftX = Math.floor(bounds.x / cellSize) - 2;
178
-
let rightX = Math.floor((bounds.x + bounds.width) / cellSize) + 2;
214
+
let topY = Math.floor(bounds.y / cellSize) - 4;
215
+
let bottomY = Math.floor((bounds.y + bounds.height) / cellSize) + 4;
216
+
let leftX = Math.floor(bounds.x / cellSize) - 4;
217
+
let rightX = Math.floor((bounds.x + bounds.width) / cellSize) + 4;
179
218
180
219
return {
181
220
top: topY,
···
225
264
226
265
newZoom = scope.view.zoom + delta;
227
266
228
-
newZoom = Math.max(0.15, newZoom);
267
+
newZoom = Math.max(0.08, newZoom);
229
268
newZoom = Math.min(5, newZoom);
230
269
231
270
let beta = oldZoom / newZoom;
···
339
378
340
379
drawTool.onMouseDrag = (event: paper.ToolEvent) => {
341
380
isOpen = false;
381
+
console.log(event);
342
382
343
-
// if shift is down
344
-
if (event.modifiers.shift) {
383
+
// if shift is down or two fingers
384
+
if (event.modifiers.shift || event.modifiers.alt || event.event?.touches?.length > 1) {
345
385
if (!scope) return;
346
386
var pan_offset = event.point.subtract(event.downPoint);
347
387
scope.view.center = scope.view.center.subtract(pan_offset);