janusweb 1.5.32 → 1.5.36

package/media/assets/webui/apps/vfs/vfs.css

@@ -0,0 +1,52 @@
+janus-ui-vfs-browser ui-flexpanel>ui-treeview {
+  flex: 0;
+  border-right: 1px solid #333;
+  margin-right: 1em;
+  padding-right: 1em;
+}
+janus-ui-vfs-browser-directorylist {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 90px);
+  width: 40em;
+  height: 15em;
+  overflow: auto;
+  outline: 0;
+}
+janus-ui-vfs-browser-directorylist.dragactive {
+  border: 2px solid lime;
+  border-radius: 10px;
+  background: rgba(0,255,0,.2);
+  margin: -2px;
+}
+janus-ui-vfs-browser-file.dragactive {
+  border: 2px solid lime;
+  background: rgba(0,255,0,.2);
+}
+janus-ui-vfs-browser-file {
+  width: 80px;
+  height: 80px;
+  border: 1px solid black;
+  border-radius: 10px;
+  margin: 5px;
+  display: flex;
+  text-align: center;
+  align-items: flex-end;
+  justify-content: center;
+  cursor: pointer;
+  background: rgba(0,0,0,.2);
+}
+janus-ui-vfs-browser-file[selected] {
+  background: rgba(255,255,255,.2);
+}
+janus-ui-vfs-browser-file:hover {
+  background: rgba(0,255,0,.2);
+}
+janus-ui-vfs-browser-file[selected]:hover {
+  background: rgba(255,255,255,.4);
+}
+janus-ui-vfs-browser-file ui-label {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}

package/media/assets/webui/apps/vfs/vfs.js

@@ -0,0 +1,452 @@
+elation.extend('engine.assetloader.agent.janus-vfs', new function() {
+  this.initBrowserFS = function() {
+    return new Promise((accept, reject) => {
+      BrowserFS.configure({
+        fs: "MountableFileSystem",
+        options: {
+          //'/': { fs: "LocalStorage" },
+          //'/blurp': { fs: "IndexedDB", options: { storeName: 'janusVFS' } },
+          '/': { fs: "IndexedDB", options: { storeName: 'janusVFS' } },
+          //'/mnt/usb0': { fs: "LocalStorage" }
+        }
+      }, (e) => {
+        if (e) {
+        } else {
+          var fs = BrowserFS.BFSRequire('fs');
+          this.fs = fs;
+          accept(this.fs);
+        }
+      });
+    });
+  }
+
+  this.getFS = async function() {
+    if (!this.fs) {
+      await this.initBrowserFS();
+    }
+    return this.fs;
+  }
+
+  this.fetch = async function(url) {
+    let fs = await this.getFS();
+
+    let pathparts = url.split('://');
+    return new Promise((resolve, reject) => {
+      let filepath = pathparts[1];
+      fs.readFile(filepath, ( e, file) => {
+        if (file) {
+          resolve({
+            target: {
+              responseURL: url,
+              data: file.buffer,
+              response: file.buffer,
+              getResponseHeader(header) {
+                if (header.toLowerCase() == 'content-type') {
+                  // FIXME -  We should implement mime type detection at a lower level, and avoid the need to access the XHR object in calling code
+                  return 'application/octet-stream';
+                }
+              }
+            },
+          });
+        } else {
+          reject();
+        }
+      });
+    });
+  }
+});
+
+elation.elements.define('janus.ui.vfs.browser', class extends elation.elements.base {
+  init() {
+    super.init();
+    this.defineAttributes({
+      cwd: { type: 'string', default: '/' },
+      chroot: { type: 'string', default: '' },
+    });
+  }
+  create() {
+    super.create();
+
+/*
+    this.win = elation.elements.create('ui-window', {
+      append: document.body,
+      center: true,
+      windowtitle: '/',
+    });
+*/
+    this.content = elation.elements.create('ui-rowlayout', {
+      append: this,
+    });
+    this.controls = elation.elements.create('ui-content', {
+      append: this.content,
+    });
+    this.updirbutton = elation.elements.create('ui-button', {
+      append: this.controls,
+      label: '⬅',
+      onclick: ev => this.handleUpDirectoryClick(ev),
+    });
+    this.deletebutton = elation.elements.create('ui-button', {
+      append: this.controls,
+      label: '🗑️',
+      onclick: ev => this.handleDeleteClick(ev),
+    });
+    this.addbuttonlist = elation.elements.create('ui-list', {
+      selectable: true,
+      items: ['Upload', 'Directory', 'HTML', 'JS'],
+      onselectionchange: ev => this.handleAddButtonSelect(ev),
+    });
+    this.addbutton = elation.elements.create('ui-popupbutton', {
+      append: this.controls,
+      label: '➕',
+      popupcontent: this.addbuttonlist,
+    });
+    this.mainpanel = elation.elements.create('ui-flexpanel', {
+      append: this.content,
+    });
+
+    this.dirtree = elation.elements.create('ui-treeview', {
+      append: this.mainpanel,
+      attrs: {
+        name: 'path',
+        label: 'name',
+      },
+    });
+    elation.events.add(this.dirtree, 'ui_treeview_select', ev => this.handleDirectoryTreeSelect(ev));
+
+    this.dirlist = elation.elements.create('janus-ui-vfs-browser-directorylist', {
+      append: this.mainpanel,
+      itemcomponent: 'janus-ui-vfs-browser-file',
+      selectable: true,
+      multiselect: true,
+      draggable: true,
+    });
+    elation.events.add(this.dirlist, 'directorychange', ev => this.handleDirectoryChange(ev));
+    elation.events.add(this.dirlist, 'selectionchange', ev => this.handleFilesSelectionChange(ev));
+
+    elation.events.add(this.dirlist, 'dragstart', ev => this.handleDragStart(ev));
+    elation.events.add(this.dirlist, 'dragover', ev => this.handleDragOver(ev));
+    elation.events.add(this.dirlist, 'dragenter', ev => this.handleDragEnter(ev));
+    elation.events.add(this.dirlist, 'dragleave', ev => this.handleDragLeave(ev));
+    elation.events.add(this.dirlist, 'drop', ev => this.handleDrop(ev));
+
+    elation.events.add(this.dirlist, 'keypress', ev => this.handleFilesKeypress(ev));
+
+    //this.win.setcontent(this);
+    this.updateDirectories();
+    this.updateFiles();
+  }
+  async updateFiles() {
+    let fs = await elation.engine.assetloader.agent['janus-vfs'].getFS();
+
+    fs.readdir(this.chroot + this.cwd, (e, contents) => {
+      let entries = {};
+      let promises = [];
+      for (let i = 0; i < contents.length; i++) {
+        promises.push(new Promise(accept => {
+          fs.stat(this.chroot + this.cwd + contents[i], (e, stats) => {
+            entries[contents[i]] = {
+              name: contents[i],
+              path: this.cwd,
+              stats: stats,
+            };
+            accept(stats);
+          });
+        }));
+      }
+      Promise.all(promises).then(() => {
+        this.dirlist.clear();
+        this.dirlist.setItems(entries);
+      });
+    });
+    this.updirbutton.disabled = (this.cwd == '/');
+    this.deletebutton.disabled = (this.dirlist.selection.length == 0);
+    //this.win.settitle(this.cwd);
+  }
+  async updateDirectories() {
+    let dirtree = {
+      '/': {
+        name: '/',
+        path: '/',
+        items: await this.getDirectoryTree(),
+      }
+    };
+    this.dirtree.setItems(dirtree);
+    let selected = this.dirtree.find(this.cwd);
+    if (selected) {
+      selected.select();
+    }
+
+console.log('my full dirtree', dirtree, this.dirtree, selected);
+  }
+  async getDirectoryTree(dir='/', entries) {
+    if (!entries) entries = {};
+    let fs = await elation.engine.assetloader.agent['janus-vfs'].getFS();
+    return new Promise(async (resolve, reject) => {
+      fs.readdir(this.chroot + dir, async (e, contents) => {
+        let promises = [];
+        for (let i = 0; i < contents.length; i++) {
+          promises.push(new Promise(accept => {
+            let stats = fs.stat(this.chroot + dir + contents[i], async (e, stats) => {
+              if (stats.isDirectory()) {
+                entries[contents[i]] = {
+                  name: contents[i],
+                  path: dir + contents[i] + '/',
+                  stats: stats,
+                };
+                let children = await this.getDirectoryTree(dir + contents[i] + '/');
+                entries[contents[i]].items = (Object.keys(children).length > 0 ? children : false);
+              }
+              accept();
+            });
+          }));
+        }
+        await Promise.all(promises);
+        resolve(entries);
+      });
+    });
+  }
+  chdir(dir) {
+    this.cwd = dir + (dir.lastIndexOf('/') != dir.length - 1 ? '/' : '');
+    this.dirlist.selectall(false);
+
+    let selected = this.dirtree.find(this.cwd);
+    if (selected && selected !== this.dirtree.selected) {
+      selected.select();
+    } else {
+      this.updateFiles();
+    }
+  }
+  updir() {
+    let pathparts = this.cwd.split('/');
+    pathparts.pop();
+    pathparts.pop();
+    let newpath = (pathparts.length > 0 ? pathparts.join('/') + '/' : '/');
+    //newpath = newpath.replaceAll('//', '/');
+    this.chdir(newpath);
+  }
+  async mkdir(dir) {
+    let fs = await elation.engine.assetloader.agent['janus-vfs'].getFS();
+    let fulldir = this.chroot + (dir[0] == '/' ? dir : this.cwd + dir);
+    await fs.mkdir(fulldir);
+    this.updateDirectories();
+    this.updateFiles();
+  }
+  async rm(files) {
+    let fs = await elation.engine.assetloader.agent['janus-vfs'].getFS();
+    if (!elation.utils.isArray(files)) files = [files];
+console.log('delete files', files);
+    let promises = [];
+    files.forEach(file => {
+      promises.push(new Promise((resolve, reject) => {
+        fs.unlink(this.chroot + this.cwd + file, e => {
+          if (!e) {
+            resolve();
+          } else {
+            reject();
+          }
+        });
+      }));
+    });
+    await Promise.all(promises);
+    this.updateFiles();
+  }
+  async rmdir(dirs) {
+    let fs = await elation.engine.assetloader.agent['janus-vfs'].getFS();
+    if (!elation.utils.isArray(dirs)) dirs = [dirs];
+console.log('delete dirs', dirs);
+    let promises = [];
+    dirs.forEach(dir => {
+      promises.push(new Promise((resolve, reject) => {
+        fs.rmdir(this.chroot + this.cwd + dir, e => {
+          if (!e) {
+            resolve();
+          } else {
+            reject();
+          }
+        });
+      }));
+    });
+    await Promise.all(promises);
+    this.updateDirectories();
+    this.updateFiles();
+  }
+  showUploadPrompt() {
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.style.width = 0;
+    input.style.height = 0;
+    input.style.overflow = 'hidden';
+    input.addEventListener('change', ev => this.handleFileUpload(ev));
+    this.appendChild(input);
+    input.click();
+  }
+  handleDirectoryTreeSelect(ev) {
+    let newpath = ev.data.item.path;
+    this.chdir(newpath);
+  }
+  handleDirectoryChange(ev) {
+    let newdir = ev.target;
+    let newpath = newdir.path + newdir.name;
+    this.chdir(newpath);
+  }
+  handleUpDirectoryClick(ev) {
+    if (!ev.target.disabled) {
+      this.updir();
+    }
+  }
+  handleDeleteClick(ev) {
+    if (this.dirlist.selection.length > 0) {
+      console.log('delete', this.dirlist.selection);
+      let files = this.dirlist.selection.filter(n => !n.stats.isDirectory()).map(n => n.name),
+          dirs = this.dirlist.selection.filter(n => n.stats.isDirectory()).map(n => n.name);
+      if (files.length > 0) this.rm(files);
+      if (dirs.length > 0) this.rmdir(dirs);
+      this.dirlist.selectall(false);
+    }
+  }
+  handleAddButtonSelect(ev) {
+    let selected = this.addbuttonlist.selection[0];
+    if (selected) {
+      this.addbuttonlist.selectall(false);
+      this.addbutton.hidePopup();
+
+      switch(selected.value) {
+        case 'Upload':
+          this.showUploadPrompt();
+          break;
+        case 'Directory':
+          let dirname = prompt('Directory name?'); // FIXME - make this an HTML pop-up prompt
+          if (dirname !== null) {
+            this.mkdir(dirname);
+          }
+      }
+    }
+  }
+  handleFilesSelectionChange(ev) {
+    this.deletebutton.disabled = (this.dirlist.selection.length == 0);
+  }
+  handleFilesKeypress(ev) {
+    if (ev.keyCode == 127) {
+      this.handleDeleteClick(ev);
+    }
+  }
+  async handleFileUpload(ev) {
+    let files = ev.target.files;
+    console.log('upload some files', ev, files);
+    if (files && files.length > 0) {
+      let filenames = await this.saveFiles(files);
+      console.log('finished writing files', filenames);
+    }
+  }
+  handleDragStart(ev) {
+    let urilist = '';
+    this.dirlist.selection.forEach(f => {
+      urilist += 'janus-vfs://' + this.chroot + this.cwd + f.name + '\r\n';
+    });
+    ev.dataTransfer.setData('text/uri-list', urilist);
+    console.log('drag it!', urilist, ev, this.dirlist.selection);
+  }
+  handleDragOver(ev) {
+    ev.dataTransfer.dropEffect = "copy"
+    ev.preventDefault();
+  }
+  handleDragEnter(ev) {
+    let dragtarget = this.getDragTarget(ev);
+    if (dragtarget && !dragtarget.hasclass('dragactive')) {
+      dragtarget.addclass('dragactive');
+    }
+  }
+  handleDragLeave(ev) {
+    //let dragtarget = this.getDragTarget(ev);
+    let dragtarget = ev.target;
+    if (dragtarget && elation.html.hasclass(dragtarget, 'dragactive')) elation.html.removeclass(dragtarget, 'dragactive');
+    if (this.dirlist.hasclass('dragactive') && !this.dirlist.contains(dragtarget)) this.dirlist.removeclass('dragactive');
+  }
+  async handleDrop(ev) {
+    ev.preventDefault();
+    let dragtarget = this.getDragTarget(ev);
+    if (dragtarget) dragtarget.removeclass('dragactive');
+    let files = ev.dataTransfer.files;
+    let subdir = (dragtarget instanceof elation.elements.janus.ui.vfs.browser.file && dragtarget.stats.isDirectory() ? dragtarget.name : '');
+    console.log('upload some files', ev, files);
+    if (files && files.length > 0) {
+      let filenames = await this.saveFiles(files, subdir);
+      console.log('finished writing files', filenames);
+    }
+  }
+  getDragTarget(ev) {
+    let dragtarget = ev.target;
+
+    while (dragtarget !== this.dirlist && !(dragtarget instanceof elation.elements.janus.ui.vfs.browser.file && dragtarget.stats.isDirectory())) {
+      dragtarget = dragtarget.parentNode;
+    }
+console.log('my dragtarget!', dragtarget);
+    return dragtarget;
+  }
+  async saveFiles(files, subdir) {
+    let fs = await elation.engine.assetloader.agent['janus-vfs'].getFS();
+
+    let Buffer = BrowserFS.BFSRequire('buffer').Buffer;
+    let promises = [];
+    for (let i = 0; i < files.length; i++) {
+      let file = files[i];
+      let fname = this.chroot + this.cwd + (subdir ? subdir + '/' : '') + file.name;
+      console.log('Got file!', file.name, file.size, fname);
+      promises.push(new Promise((accept, reject) => {
+        let reader = new FileReader();
+        reader.onload = function() {
+          let buffer = Buffer.from(this.result);
+          fs.writeFile(fname, buffer, (e, f) => {
+            accept(fname);
+          });
+        }
+        reader.readAsArrayBuffer(file);
+      }));
+    }
+    Promise.all(promises).then((filenames) => {
+      this.updateFiles();
+      return filenames;
+    });
+  }
+});
+elation.elements.define('janus.ui.vfs.browser.directorytree', class extends elation.elements.ui.treeview {
+  create() {
+    super.create();
+  }
+});
+elation.elements.define('janus.ui.vfs.browser.directorylist', class extends elation.elements.ui.list {
+  create() {
+    super.create();
+  }
+});
+elation.elements.define('janus.ui.vfs.browser.directory', class extends elation.elements.ui.item {
+  create() {
+  }
+});
+elation.elements.define('janus.ui.vfs.browser.file', class extends elation.elements.ui.item {
+  create() {
+    super.create();
+
+    this.name = this.value.name;
+    this.path = this.value.path;
+    this.stats = this.value.stats;
+
+    this.title = this.name;
+
+    elation.elements.create('ui-label', {
+      append: this,
+      label: this.name + (this.stats.isDirectory() ? '/' : ''),
+    });
+
+    this.addEventListener('dblclick', ev => this.handleDblClick(ev));
+  }
+  handleDblClick(ev) {
+    if (this.stats.isDirectory()) {
+      this.dispatchEvent({type: 'directorychange', bubbles: true});
+    } else {
+      console.log('do something with this thing!', this);
+    }
+    ev.preventDefault();
+  }
+});

package/media/assets/webui/apps/vfs/vfs.json

@@ -0,0 +1,10 @@
+{
+  "templates": {
+  },
+  "scripts":  ["./vfs.js", "./browserfs/browserfs.js"],
+  "css":      ["./vfs.css"],
+  "components": [
+    "janus-ui-vfs-browser"
+  ]
+}
+

package/media/assets/webui/default.json

@@ -10,7 +10,8 @@
     "locomotion": "./apps/locomotion/locomotion.json",
     "virtualgamepad": "./apps/virtualgamepad/virtualgamepad.json",
     "buttons": "./apps/buttons/buttons.json",
-    "xrmenu": "./apps/xrmenu/xrmenu.json"
+    "xrmenu": "./apps/xrmenu/xrmenu.json",
+    "vfs": "./apps/vfs/vfs.json"
   },
   "includes": [
   ],

package/media/assets/webui/themes/default.css

@@ -71,6 +71,10 @@ ui-list>ui-item[hover],
 ui-checklist>ui-checklistitem[hover] {
   background-color: rgba(128,128,255,.05);
 }
+ui-list[selectable]>ui-item[hover] {
+  background-color: rgba(128,128,255,.2);
+  cursor: pointer;
+}
 ui-list>ui-item.state_selected,
 ui-checklist>ui-checklistitem.state_selected {
   background: rgba(128,128,255,.5);
@@ -184,6 +188,10 @@ ui-tabs>ui-tabbar>ui-tabcountbutton {
   margin-bottom: 0;
   white-space: nowrap;
   display: inline-block;
+  max-width:10em;
+  text-overflow: ellipsis;
+  direction: rtl;
+  overflow: hidden;
 }
 ui-tabs>ui-tabbar>ui-button[selected],
 ui-tabs>ui-tabbar>ui-button[selected][hover],
@@ -272,6 +280,8 @@ ui-window {
   border: 1px solid #666;
   box-shadow: 1px 1px 10px rgba(0,0,0,1);
   color: white;
+  display: flex;
+  flex-direction: column;
 }
 ui-window>ui-window-titlebar {
   display: flex;
@@ -286,6 +296,7 @@ ui-window>ui-window-titlebar {
   white-space: nowrap;
   vertical-align: middle;
   border-bottom: 1px solid #666;
+  order: 0;
 }
 ui-window.state_movable>ui-window-titlebar:hover {
   cursor: -webkit-grab;
@@ -331,6 +342,9 @@ ui-window>.ui_window_content {
   -moz-box-sizing: border-box;
   position: relative;
 }
+ui-window>ui-window-content {
+  order: 1;
+}
 ui-window[scrollable]>ui-window-content {
   overflow: auto;
   display: block;
@@ -673,6 +687,7 @@ ui-button,
 ui-togglebutton,
 ui-dropdownbutton,
 ui-tabcountbutton,
+ui-popupbutton,
 ui-notificationbutton {
   display: inline-block;
   border: none;
@@ -687,11 +702,13 @@ ui-notificationbutton {
 
   background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
   background-color: transparent;
+  position: relative;
 }
 ui-button[hover],
 ui-togglebutton[hover],
 ui-dropdownbutton[hover],
 ui-tabcountbutton[hover],
+ui-popupbutton[hover],
 ui-notificationbutton[hover] {
   background-image: linear-gradient(#323232, #404142 40%, #393b3d);
 }
@@ -699,6 +716,7 @@ ui-button:active,
 ui-togglebutton:active,
 ui-dropdownbutton:active,
 ui-tabcountbutton:active,
+ui-popupbutton:active,
 ui-notificationbutton:active {
   background-image: linear-gradient(#020202, #101112 40%, #191b1d);
 }
@@ -706,9 +724,10 @@ ui-button[disabled],
 ui-togglebutton:disabled,
 ui-dropdownbutton:disabled,
 ui-tabcountbutton:disabled,
+ui-popupbutton:disabled,
 ui-notificationbutton:disabled {
   color: #999;
-  background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
+  background-image: linear-gradient(#383e45, #2a2f34 60%, #212549);
   cursor: not-allowed;
 }
 
@@ -1034,6 +1053,7 @@ ui-treeview {
   background: black;
   color: white;
 */
+  display: block;
 }
 ui-treeview ui-list {
   /*background: rgba(0,0,0,.8);*/
@@ -1060,8 +1080,12 @@ ui-treeview ui-treeviewitem {
   order: 2;
   padding-left: 1em;
 }
+ui-treeview ui-treeviewitem[collapsed]>ui-treeviewitem {
+  display: none;
+}
 ui-treeview ui-treeviewitem>ui-text {
   order: 1;
+  user-select: none;
 }
 ui-treeview ui-treeviewitem:hover>ui-text {
   color: #9c9;
@@ -1083,11 +1107,14 @@ ui-treeview ui-treeviewitem ui-text:before {
   float: left;
   clear: left;
   width: .8em;
-  margin-left: -1.2em;
+  padding-right: .5em;
 }
 ui-treeview ui-treeviewitem.haschildren>ui-text:before {
   content: '▼';
 }
+ui-treeview ui-treeviewitem.haschildren[collapsed]>ui-text:before {
+  content: '▶';
+}
 ui-treeview ui-treeviewitem:last-child>ul {
   border-left: 0;
 }