├── README.md
├── deps
    ├── pdf.js
    ├── pdf.js.map
    ├── pdf.worker.js
    └── pdf.worker.js.map
├── display
├── index.html
├── requirements.txt
└── server.py


/README.md:
--------------------------------------------------------------------------------
 1 | ## CS_Store
 2 | 
 3 | An infinite canvas for your filesystem. 
 4 | 
 5 | ### Some design decisions
 6 | 1. All canvas state is stored in `.CS_Store` files. To send a canvas to
 7 |    someone, simply zip the directory and email it over.
 8 | 2. Human-readable format for `.CS_Store` which can be manually edited with any
 9 |    text editor.
10 | 3. Size-as-context: When an element is added to the canvas, it's a fixed size
11 |    in pixel width. To add a small comment, zoom-in to the context it concerns.
12 | 4. Audio as region: Sound files are played when visible in the canvas. Drop a
13 |    file in to function as a soundtrack for a region of space.
14 | 5. Export to an .html with image files in a zip.
15 | 
16 | ### Installation
17 | 1. Make sure you have the packages in `requirements.txt` installed
18 | 2. Add `display` to your path or move it to a bin in your path.
19 | 3. Run `display`!
20 | 
21 | ### To Do:
22 | 1. Watch for changes to the `.CS_Store` for live updates from text editor
23 | 2. Store text as `.txt` files, rather than in `.CS_Store` directly
24 | 3. Export button to generate `.zip`
25 | 4. Fix jittering on zoom-in on Safari
26 | 


--------------------------------------------------------------------------------
/display:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | python3 ~/dev/CS_Store/server.py "$PWD" &
 4 | PID=$!
 5 | trap "kill $PID" EXIT
 6 | echo 'CTRL + C to kill'
 7 | sleep 0.1
 8 | 
 9 | if [[ "$OSTYPE" == "linux-gnu"* ]]; then
10 |     chromium http://localhost:1234/static/index.html
11 | else
12 |     open http://localhost:1234/static/index.html
13 | fi
14 | 
15 | while :; do sleep 1; done
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     body {
  3 |         font-family: monospace;
  4 |         font-size: 12px;
  5 |         width: 100%;
  6 |         height: 100%;
  7 |         margin: 0px;
  8 |         overflow-y: hidden;
  9 |         overflow-x: hidden;
 10 |     }
 11 |     #path {
 12 |         background-color: #eee8d5;
 13 |         font-size: 12px;
 14 |         position: absolute;
 15 |         top: 0px;
 16 |         left: 0px;
 17 |         margin: 0px;
 18 |         padding: 6px 10px 6px 10px;
 19 |         border-radius: 3px;
 20 |     }
 21 |     #scene {
 22 |         position: absolute;
 23 |         top: 0px;
 24 |         left: 0px;
 25 |         width: 100%;
 26 |         height: 100%;
 27 |         background-size: 30px 30px;
 28 |         background: conic-gradient(from 90deg at 1px 1px, #fdf6e3 90deg, #eee8d5 0deg);
 29 |         background-position: 0px 0px;
 30 |         background-size: 100px 100px;
 31 |     }
 32 |     #stage {
 33 |         position: absolute;
 34 |         top: 20px;
 35 |         right: 20px;
 36 |         width: 150px;
 37 |         height: 95vh;
 38 |         overflow-x: hidden;
 39 |         border: 1px solid;
 40 |         border-radius: 3px;
 41 |         z-index: 2;
 42 |         background-color: #eee8d5;
 43 |     }
 44 |     .nodeInStage {
 45 |         position: relative;
 46 |         margin: 10px 15px;
 47 |         z-index: 3;
 48 |         cursor: grab;
 49 |     }
 50 |     .nodeInScene {
 51 |         position: absolute;
 52 |         cursor: move;
 53 |     }
 54 |     .textNode {
 55 |         margin: 0px;
 56 |         border-radius: 5px;
 57 |         background-color: #eee8d5;
 58 | 
 59 |         box-shadow: none;
 60 |         outline-style: none;
 61 |         border-color: transparent;
 62 |         overflow-wrap: break-word;
 63 |     }
 64 |     .dirNode {
 65 |         margin: 0px;
 66 |         border-radius: 5px;
 67 |         background-color: #eee8e7;
 68 | 
 69 |         text-align: center;
 70 |         word-break: break-all;
 71 |     }
 72 | </style>
 73 | 
 74 | <div id="scene"></div>
 75 | <div id="stage"></div>
 76 | 
 77 | <script src="/static/deps/pdf.js"></script>
 78 | 
 79 | <script>
 80 | pdfjsLib.GlobalWorkerOptions.workerSrc = '/static/deps/pdf.worker.js';
 81 | 
 82 | const clamp = (x, min, max) =>
 83 |   Math.min(Math.max(x, min), max)
 84 | 
 85 | const round = (x, n=0) => 10**(-n) * Math.round(x * 10**n);
 86 | 
 87 | class Vec {
 88 |   constructor({x, y, z=0}) {
 89 |     this.x = x;
 90 |     this.y = y;
 91 |     this.z = z;
 92 |   }
 93 |   add(other) {
 94 |     return new Vec({
 95 |       x: this.x + other.x,
 96 |       y: this.y + other.y,
 97 |       z: this.z + other.z
 98 |     });
 99 |   }
100 |   times(c) {
101 |     return new Vec({
102 |       x: c * this.x,
103 |       y: c * this.y,
104 |       z: c * this.z
105 |     });
106 |   }
107 |   sub(other) {
108 |     return this.add(other.times(-1));
109 |   }
110 |   dot(other) {
111 |     return this.x * other.x
112 |          + this.y * other.y
113 |          + this.z * other.z;
114 |   }
115 |   mod(n) {
116 |     return new Vec({
117 |       x: this.x % n,
118 |       y: this.y % n,
119 |       z: this.z % n,
120 |     })
121 |   }
122 |   abs() {
123 |     return new Vec({
124 |       x: Math.abs(this.x),
125 |       y: Math.abs(this.y),
126 |       z: Math.abs(this.z),
127 |     })
128 |   }
129 | }
130 | 
131 | class Node {
132 |   constructor({ render, data }) {
133 |     const { 
134 |       x, y, z, w = null, h = null, creationScale,
135 |     } = render;
136 | 
137 |     this.data = data;
138 |     this.type = data.type;
139 |     this.path = data.path;
140 |     this.inStage = false;
141 |     this.elem = document.createElement("div");
142 | 
143 |     // Depths:
144 |     // 0: scene
145 |     // 1: items in scene
146 |     // 2: stage
147 |     // 3: items in stage
148 |     // 4: item in focus
149 | 
150 |     // Positioning and rendering
151 |     this.position = new Vec({x, y});
152 |     this.depth = z;
153 |     this.width = w;
154 |     this.height = h;
155 |     this.ratio = w / h;
156 |     this.creationScale = creationScale;
157 |     this.padding = 8 / creationScale;
158 |     this.fontSize = 14 / creationScale;
159 |     this.borderRadius = 5 / creationScale;
160 | 
161 |     // Populate div and set ratio
162 |     this.content = this.populateContent(data);
163 |     this.elem.appendChild(this.content);
164 | 
165 |     // Interaction helpers
166 |     this.dragging = false;
167 |     this.click = null;
168 | 
169 |     this.boundMouseMove = (e) => this.mousemove(e);
170 |     this.boundMouseUp = (e) => this.mouseup(e);
171 | 
172 |     this.elem.addEventListener("mousedown", (e) => {
173 |       document.addEventListener('mousemove', this.boundMouseMove);
174 |       document.addEventListener('mouseup', this.boundMouseUp);
175 |       this.mousedown(e)
176 |     });
177 |   }
178 | 
179 |   serialize() {
180 |     let render = {
181 |       x: this.position.x,
182 |       y: this.position.y,
183 |       z: this.depth,
184 |       h: this.height,
185 |       w: this.width,
186 |       creationScale: this.creationScale,
187 |     }
188 |     for (const key of Object.keys(render)) {
189 |       render[key] = round(render[key], 2);
190 |     }
191 |     return {
192 |       data: this.data,
193 |       render: render,
194 |     }
195 |   }
196 | 
197 |   render() {
198 |     const pos = scene.toViewport(this.position);
199 |     this.elem.style.left = pos.x;
200 |     this.elem.style.top = pos.y;
201 |     this.elem.style.zIndex = this.depth;
202 |     this.elem.style.width = (this.width * scene.scale) + "px";
203 |     this.elem.style.height = (this.height * scene.scale) + "px";
204 | 
205 |     this.content.style.fontSize = Math.floor(this.fontSize * scene.scale) + "px";
206 |     this.content.style.padding = (this.padding * scene.scale) + "px";
207 |     this.content.style.borderRadius = (this.borderRadius * scene.scale) + "px";
208 |   }
209 | 
210 |   populateContent(data) {
211 |     let {type, path} = data;
212 | 
213 |     if (type === "image/jpeg" || type === "image/png") {
214 |       const img = document.createElement("img");
215 |       img.style.width = "100%";
216 |       img.onload = () => {
217 |         this.ratio = img.width / img.height;
218 |       }
219 |       img.src = path;
220 |       return img;
221 | 
222 |     } else if (type === "audio/mpeg") {
223 |       const audio = document.createElement("audio");
224 |       audio.style.width = "100%";
225 |       audio.preload = "auto";
226 |       audio.controls = true;
227 |       audio.autoplay = playAudio;
228 |       audio.src = path;
229 |       this.ratio = 5;
230 |       return audio
231 | 
232 |     } else if (type === "video/mp4") {
233 |       const video = document.createElement("video");
234 |       video.controls = true;
235 |       video.style.width = "100%";
236 |       video.onload = () => {
237 |         this.ratio = img.width / img.height;
238 |       }
239 |       video.src = path;
240 |       return video;
241 | 
242 |     } else if (type === "application/pdf") {
243 |       const canvas = document.createElement("canvas");
244 |       const ctx = canvas.getContext("2d");
245 | 
246 |       canvas.style.width = "100%";
247 | 
248 |       (async () => {
249 |         const pdf = await pdfjsLib.getDocument(path).promise;
250 | 
251 |         const renderPage = async (n) => {
252 |           const page = await pdf.getPage(n);
253 | 
254 |           const scale = 1000 / page.getViewport({scale: 1}).width;
255 |           const viewport = page.getViewport({scale});
256 |           canvas.height = viewport.height;
257 |           canvas.width = viewport.width;
258 | 
259 |           await page.render({
260 |             canvasContext: ctx,
261 |             viewport: viewport
262 |           });
263 |         }
264 | 
265 |         // Hack: when we first create a PDF, i.e. in stage, page is not defined
266 |         // yet so we render some buttons for page selection.  When we clone to
267 |         // add to the stage, the property is set, so the buttons dissappear.
268 | 
269 |         if (this.data.page === undefined) {
270 |           this.data.page = 1;
271 | 
272 |           const center = document.createElement("center");
273 |           center.style.marginTop = "5px";
274 | 
275 |           const pageLabel = document.createElement("span");
276 |           pageLabel.style.padding = "10px";
277 |           pageLabel.innerHTML = this.data.page;
278 | 
279 |           const previous = document.createElement("button");
280 |           previous.style.border = "solid 1px darkgrey";
281 |           previous.style.outline = "none";
282 |           previous.style.borderRadius = "5px";
283 |           previous.style.backgroundColor = "#eee8e7";
284 |           previous.style.height = "20px";
285 |           previous.style.width = "30px";
286 | 
287 |           previous.innerHTML = "<";
288 |           previous.addEventListener("mousedown", e => {
289 |             e.stopPropagation();
290 |             this.data.page = this.data.page - 1;
291 |             if (this.data.page < 1) {
292 |               this.data.page = pdf.numPages;
293 |             }
294 |             pageLabel.innerHTML = this.data.page;
295 |             renderPage(this.data.page);
296 |           });
297 | 
298 |           const next = document.createElement("button");
299 |           next.style.border = "solid 1px darkgrey";
300 |           next.style.outline = "none";
301 |           next.style.borderRadius = "5px";
302 |           next.style.backgroundColor = "#eee8e7";
303 |           next.style.height = "20px";
304 |           next.style.width = "30px";
305 | 
306 |           next.innerHTML = ">";
307 |           next.addEventListener("mousedown", e => {
308 |             e.stopPropagation();
309 |             this.data.page = this.data.page + 1;
310 |             if (this.data.page > pdf.numPages) {
311 |               this.data.page = 1;
312 |             }
313 |             pageLabel.innerHTML = this.data.page;
314 |             renderPage(this.data.page);
315 |           });
316 | 
317 |           center.appendChild(previous);
318 |           center.appendChild(pageLabel);
319 |           center.appendChild(next);
320 |           this.elem.appendChild(center);
321 |         }
322 | 
323 |         renderPage(this.data.page);
324 |       })()
325 | 
326 |       this.ratio = 1 / 1.29;
327 |       this.height = this.width / this.ratio;
328 |       return canvas;
329 | 
330 |     } else if (type === "text") {
331 |       const p = document.createElement("p");
332 |       p.innerHTML = path;
333 |       p.classList.add("textNode");
334 |       this.ratio = 5;
335 | 
336 |       p.contentEditable = "true";
337 |       p.addEventListener("dblclick", (e) => {
338 |         e.stopPropagation();
339 |         p.focus();
340 |         const range = document.createRange();
341 |         range.selectNodeContents(p);
342 |         const sel = window.getSelection();
343 |         sel.removeAllRanges();
344 |         sel.addRange(range);
345 |         document.addEventListener("mousedown", e => {
346 |           this.data.path = p.innerHTML;
347 |           p.blur();
348 |         })
349 |       });
350 |       p.onkeyup = (e) => {
351 |         this.data.path = p.innerHTML;
352 |       }
353 |       return p;
354 | 
355 |     } else if (type === "dir") {
356 |       const p = document.createElement("p");
357 |       p.innerHTML = path;
358 |       p.classList.add("dirNode");
359 |       this.ratio = 10.0;
360 | 
361 |       p.ondblclick = (e) => {
362 |         e.preventDefault();
363 |         e.stopPropagation();
364 |         ws.send(JSON.stringify({
365 |           "type": "cd",
366 |           "path": data.absolute,
367 |         }));
368 |       }
369 | 
370 |       return p
371 |     }
372 |   }
373 | 
374 |   getViewportPosition() {
375 |     return new Vec({
376 |       x: parseInt(this.elem.style.left.slice(0, -2)),
377 |       y: parseInt(this.elem.style.top.slice(0, -2)),
378 |     })
379 |   }
380 | 
381 |   setViewportPosition(v) {
382 |     this.elem.style.left = v.x;
383 |     this.elem.style.top = v.y;
384 |     this.position = scene.toAbsolute(v);
385 |   }
386 | 
387 |   moveInViewport(delta) {
388 |     const pos = this.getViewportPosition();
389 |     this.setViewportPosition(pos.add(delta));
390 |   }
391 | 
392 |   mousedown(e) {
393 |     e.preventDefault();
394 |     e.stopPropagation();
395 | 
396 |     if (e.altKey) {
397 |       scene.removeNode(this);
398 |       return;
399 |     }
400 | 
401 |     this.dragging = true;
402 |     this.click = new Vec({x: e.clientX, y: e.clientY});
403 | 
404 |     if (this.inStage) {
405 |       // Position on scene
406 |       const rect = this.elem.getBoundingClientRect();
407 |       const pos = new Vec({
408 |         x: e.clientX - rect.left,
409 |         y: e.clientY - rect.top,
410 |       })
411 | 
412 |       // Create a new copy
413 |       const sizes = this.ratio > 1 ? {
414 |         w: 200 / scene.scale,
415 |         h: 200 / scene.scale / this.ratio,
416 |       } : {
417 |         w: this.ratio * 200 / scene.scale,
418 |         h: (200 / scene.scale),
419 |       };
420 | 
421 |       const copy = new this.constructor({
422 |         render: {
423 |           x: null,
424 |           y: null,
425 |           z: 4,
426 |           ...sizes,
427 |           creationScale: scene.scale,
428 |         },
429 |         data: this.data,
430 |       });
431 |       copy.position = scene.toAbsolute(this.click.sub(pos));
432 |       scene.addNode(copy);
433 | 
434 |       // Continue moving the copy
435 |       copy.elem.dispatchEvent(new Event('mousedown'));
436 |       this.dragging = false;
437 | 
438 |     } else {
439 |       if (e.shiftKey) {
440 |         scene.removeNode(this);
441 |         this.elem.remove();
442 | 
443 |       } else {
444 |         this.depth = 4;
445 |         this.render();
446 |       }
447 |     }
448 |   }
449 | 
450 |   mousemove(e) {
451 |     if (this.dragging) {
452 |       const click = new Vec({x: e.clientX, y: e.clientY});
453 |       const delta = click.sub(this.click);
454 |       this.moveInViewport(delta);
455 |       this.click = click;
456 |     }
457 |   }
458 | 
459 |   mouseup(e) {
460 |     if (this.dragging) {
461 |       this.dragging = false;
462 |       this.render();
463 |       this.depth = 1;
464 |     }
465 |     document.removeEventListener('mousemove', this.boundMouseMove);
466 |     document.removeEventListener('mouseup', this.boundMouseUp);
467 |   }
468 | }
469 | 
470 | class Scene {
471 |   constructor(elem) {
472 |     this.elem = elem;
473 |     this.origin = new Vec({x: 0, y: 0});
474 |     this.scale = 1;
475 |     this.children = [];
476 | 
477 |     this.elem.addEventListener("wheel", (e) => this.wheel(e));
478 |     this.elem.addEventListener("gesturestart", (e) => e.preventDefault());
479 |     this.elem.addEventListener("gesturechange", (e) => this.gesturechange(e));
480 |     this.elem.addEventListener("gestureend", (e) => e.preventDefault());
481 |     this.elem.addEventListener("mousedown", (e) => e.preventDefault());
482 |     this.elem.addEventListener("mousemove", (e) => e.preventDefault());
483 |     this.elem.addEventListener("mouseup", (e) => e.preventDefault());
484 |     this.elem.addEventListener("dblclick", (e) => this.dblclick(e));
485 |   }
486 | 
487 |   serialize() {
488 |     return {
489 |       x: round(this.origin.x, 2),
490 |       y: round(this.origin.y, 2),
491 |       scale: round(this.scale, 2),
492 |       children: this.children.map(c => c.serialize()),
493 |     }
494 |   }
495 | 
496 |   toViewport(x) {
497 |     return x.sub(this.origin).times(this.scale);
498 |   }
499 | 
500 |   toAbsolute(x) {
501 |     return x.times(1/this.scale).add(this.origin);
502 |   }
503 | 
504 |   addNode(node) {
505 |     node.elem.classList.add("nodeInScene");
506 |     this.elem.appendChild(node.elem);
507 |     this.children.push(node);
508 |     node.render();
509 |   }
510 | 
511 |   removeNode(node) {
512 |     node.elem.classList.remove("nodeInScene");
513 |     this.elem.removeChild(node.elem);
514 |     const idx = this.children.indexOf(node);
515 |     this.children.splice(idx, 1);
516 |   }
517 | 
518 |   render() {
519 |     const size = 200 * this.scale;
520 |     const pos = this.origin.abs().times(this.scale);
521 |     this.elem.style.backgroundSize = `${size}px ${size}px`;
522 |     this.elem.style.backgroundPosition = `${-pos.x} ${-pos.y}`;
523 |     this.children.map(c => c.render());
524 |   }
525 | 
526 |   wheel(e) {
527 |     // dev.to/danburzo/pinch-me-i-m-zooming-gestures-in-the-dom-a0e
528 |     e.preventDefault();
529 | 
530 |     if (e.ctrlKey) {
531 |       const pointer = new Vec({x: e.clientX, y: e.clientY});
532 |       const a = this.toAbsolute(pointer);
533 | 
534 |       this.scale = clamp(this.scale - 0.01 * e.deltaY, 0.1, 3.0);
535 | 
536 |       // Re-position so mouse remains where it was
537 |       const b = this.toAbsolute(pointer);
538 |       const delta = b.sub(a);
539 |       this.origin = this.origin.sub(delta);
540 |       this.render();
541 | 
542 |     } else {
543 |       const delta = new Vec({x: e.deltaX, y: e.deltaY}).times(1 / this.scale);
544 |       this.origin = this.origin.add(delta);
545 |       this.render();
546 |     }
547 | 
548 |     const {width, height} = this.elem.getBoundingClientRect();
549 |     for (const child of this.children) {
550 |       child.depth = 1;
551 |       child.render();
552 | 
553 |       if (playAudio && child.type.split("/")[0] == "audio") {
554 |         const pos = scene.toViewport(child.position);
555 |         const childWidth = parseInt(child.elem.style.width.slice(0, -2));
556 |         const childHeight = parseInt(child.elem.style.height.slice(0, -2));
557 |         if (
558 |           pos.x + childWidth > 0 &&
559 |           pos.x < width &&
560 |           pos.y + childHeight > 0 &&
561 |           pos.y < height
562 |         ) {
563 |           child.content.play()
564 |         } else {
565 |           child.content.pause();
566 |         }
567 |       }
568 |     }
569 |   }
570 | 
571 |   gesturechange(e) {
572 |     e.preventDefault();
573 |     const pointer = new Vec({x: e.clientX, y: e.clientY});
574 |     const a = this.toAbsolute(pointer);
575 | 
576 |     // Resize the canvas
577 |     const factor = 1 + 0.2 * (e.scale - 1);
578 |     this.scale = clamp(this.scale * factor, 0.1, 3.0);
579 | 
580 |     // Re-position so mouse remains where it was
581 |     const b = this.toAbsolute(pointer);
582 |     const delta = b.sub(a);
583 |     this.origin = this.origin.sub(delta);
584 |     this.render();
585 |   }
586 | 
587 |   dblclick(e) {
588 |     const click = new Vec({x: e.clientX - 10, y: e.clientY - 10});
589 |     const pos = scene.toAbsolute(click);
590 | 
591 |     const node = new Node({
592 |       data: {
593 |         type: "text",
594 |         path: "Double-click to edit."
595 |       },
596 |       render: {
597 |         x: pos.x,
598 |         y: pos.y,
599 |         w: 220 / scene.scale,
600 |         h: 16 / scene.scale,
601 |         z: 4,
602 |         creationScale: scene.scale,
603 |       },
604 |     });
605 |     scene.addNode(node);
606 |   }
607 | }
608 | 
609 | class Stage {
610 |   constructor(elem) {
611 |     this.elem = elem;
612 |     this.children = [];
613 |   }
614 | 
615 |   addNode(node) {
616 |     node.inStage = true;
617 |     node.elem.classList.add("nodeInStage");
618 |     this.elem.appendChild(node.elem);
619 |     this.children.push(node);
620 |   }
621 | 
622 |   removeNode(node) {
623 |     node.inStage = false;
624 |     node.elem.classList.remove("nodeInStage");
625 |     this.elem.removeChild(node.elem);
626 |     const idx = this.children.indexOf(node);
627 |     this.children.splice(idx, 1);
628 |   }
629 | 
630 |   inStage(v) {
631 |     const bbox = this.elem.getBoundingClientRect();
632 |     return (
633 |       bbox.left < v.x &&
634 |       v.x < bbox.right &&
635 |       bbox.top < v.y &&
636 |       v.y < bbox.bottom
637 |     );
638 |   }
639 | }
640 | </script>
641 | 
642 | <script>
643 | let playAudio = false;
644 | const scene = new Scene(document.getElementById("scene"));
645 | const stage = new Stage(document.getElementById("stage"));
646 | 
647 | const resetCanvas = () => {
648 |     for (const child of scene.children) {
649 |       scene.elem.removeChild(child.elem);
650 |       scene.children = [];
651 |     }
652 |     for (const child of stage.children) {
653 |       stage.elem.removeChild(child.elem);
654 |       stage.children = [];
655 |     }
656 |     const title = document.getElementById("path");
657 |     if (title) title.remove();
658 | 
659 |     const audio = document.getElementById("audio");
660 |     if (audio) audio.remove();
661 | }
662 | 
663 | let ws = new WebSocket("ws://localhost:1234/ws");
664 | ws.onmessage = e => {
665 |     resetCanvas();
666 |     const {files, layout, path} = JSON.parse(e.data);
667 | 
668 |     // Create title
669 |     const p = document.createElement("p");
670 |     p.setAttribute("id", "path");
671 |     p.innerHTML = `CS_Store > ${path}`;
672 |     p.style.zIndex = 5;
673 |     p.classList.add("textNode");
674 |     p.contentEditable = "true";
675 |     p.onclick = () => {
676 |       p.focus();
677 |       p.innerHTML = path;
678 |       const range = document.createRange();
679 |       range.selectNodeContents(p);
680 |       const sel = window.getSelection();
681 |       sel.removeAllRanges();
682 |       sel.addRange(range);
683 |     }
684 |     p.onkeypress = (e) => {
685 |       if (e.key === "Enter") {
686 |         p.blur();
687 |         ws.send(JSON.stringify({
688 |           "type": "cd",
689 |           "path": p.innerHTML,
690 |         }));
691 |       }
692 |     }
693 |     document.body.appendChild(p);
694 |     
695 |     // Enable audio button
696 |     const btn = document.createElement("button");
697 |     btn.setAttribute("id", "audio");
698 |     btn.onclick = () => { 
699 |         if (playAudio) {
700 |             playAudio = false;
701 |             for (const child of scene.children) {
702 |                 if (child.data.type === "audio/mpeg" ) {
703 |                     child.content.pause();
704 |                 }
705 |             }
706 |         } else {
707 |             playAudio = true; 
708 |             for (const child of scene.children) {
709 |                 if (child.data.type === "audio/mpeg" ) {
710 |                     child.content.play();
711 |                 }
712 |             }
713 |         }
714 |     }
715 |     btn.innerHTML = "Toggle audio";
716 |     btn.style.zIndex = 5;
717 |     btn.style.position = "absolute";
718 |     btn.style.left = 10;
719 |     btn.style.bottom = 10;
720 |     document.body.appendChild(btn);
721 | 
722 |     // Populate stage with listing
723 |     files.map(d => {
724 |         stage.addNode(new Node({
725 |             data: d,
726 |             render: { x: 0, y: 0, z: 4, },
727 |         }));
728 |     })
729 | 
730 |     // Populate scene with layout
731 |     if (Object.keys(layout).length > 0) {
732 |         scene.origin = new Vec({
733 |             x: layout.x,
734 |             y: layout.y,
735 |         });
736 |         scene.scale = layout.scale;
737 |         for (const child of layout.children) {
738 |             scene.addNode(new Node(child))
739 |         }
740 |         scene.render();
741 |     }
742 | }
743 | ws.onopen = e => {
744 |     ws.send(JSON.stringify({"type": "initialize"}));
745 | 
746 |     const autosave = () => {
747 |         ws.send(JSON.stringify({
748 |             "type": "layout",
749 |             "layout": scene.serialize(),
750 |         }));
751 |         setTimeout(autosave, 1000);
752 |     }
753 |     autosave();
754 | }
755 | </script>
756 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | tornado
2 | 


--------------------------------------------------------------------------------
/server.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | import mimetypes
  3 | import json
  4 | 
  5 | import tornado.ioloop
  6 | import tornado.web
  7 | import tornado.websocket
  8 | 
  9 | FILE_PATH = os.getcwd()
 10 | SRC_PATH = os.path.dirname(__file__)
 11 | 
 12 | VALID_TYPES = [
 13 |     "image/png",
 14 |     "image/jpeg",
 15 |     "video/mp4",
 16 |     "application/pdf",
 17 |     "audio/mpeg"
 18 | ]
 19 | 
 20 | def pwd():
 21 |     files = [{
 22 |         "type": "dir", 
 23 |         "path": "parent",
 24 |         "absolute": os.path.split(FILE_PATH)[0],
 25 |     }]
 26 | 
 27 |     listing = os.listdir(FILE_PATH)
 28 |     for f in listing:
 29 |         t = mimetypes.guess_type(f)[0]
 30 |         if t in VALID_TYPES:
 31 |             files.append({ 
 32 |                 "type": t,
 33 |                 "path": f"/files/{f}", 
 34 |             })
 35 |         elif os.path.isdir(f) and f[0] != ".":
 36 |             files.append({
 37 |                 "type": "dir", 
 38 |                 "path": f,
 39 |                 "absolute": os.path.join(FILE_PATH, f)
 40 |             })
 41 | 
 42 |     layout = {}
 43 |     if ".CS_Store" in listing:
 44 |         with open(f"{FILE_PATH}/.CS_Store", "r") as f:
 45 |             layout = json.loads(f.read())
 46 | 
 47 |     return { 
 48 |         "path": FILE_PATH,
 49 |         "files": files,
 50 |         "layout": layout,
 51 |     }
 52 | 
 53 | 
 54 | class WSHandler(tornado.websocket.WebSocketHandler):
 55 |     def on_message(self, message):
 56 |         global FILE_PATH
 57 | 
 58 |         message = json.loads(message)
 59 |         if message["type"] == "initialize":
 60 |             self.write_message(json.dumps(pwd()))
 61 | 
 62 |         elif message["type"] ==  "layout":
 63 |             with open(f"{FILE_PATH}/.CS_Store", "w") as f:
 64 |                 f.write(json.dumps(message["layout"], indent=4))
 65 | 
 66 |         elif message["type"] == "cd":
 67 |             FILE_PATH = message["path"]
 68 |             os.chdir(FILE_PATH)
 69 |             server.redirect()
 70 |             self.write_message(json.dumps(pwd()))
 71 | 
 72 | 
 73 | class Server:
 74 |     def __init__(self):
 75 |         pass
 76 | 
 77 |     def start(self):
 78 |         self.app = tornado.web.Application([
 79 |             (r'/ws', WSHandler),
 80 |             (r'/static/(.*)', tornado.web.StaticFileHandler, { "path": SRC_PATH  }),
 81 |             (r'/files/(.*)',  tornado.web.StaticFileHandler, { "path": FILE_PATH }),
 82 |         ])
 83 |         self.server = self.app.listen(1234)
 84 |         tornado.ioloop.IOLoop.current().start()
 85 | 
 86 |     def redirect(self):
 87 |         global FILE_PATH, SRC_PATH
 88 |         
 89 |         self.app.default_router.rules = []
 90 |         self.app.add_handlers(r".*", [
 91 |             (r'/ws', WSHandler),
 92 |             (r'/static/(.*)', tornado.web.StaticFileHandler, { "path": SRC_PATH  }),
 93 |             (r'/files/(.*)',  tornado.web.StaticFileHandler, { "path": FILE_PATH }),
 94 |         ])
 95 | 
 96 | server = Server()
 97 | 
 98 | if __name__ == "__main__":
 99 |     print("Files:", FILE_PATH)
100 |     print("Code:", SRC_PATH)
101 |     server.start()
102 | 


--------------------------------------------------------------------------------