Merge pull request #85 from haxzie/dev

Release

src/components/Editor.vue

@@ -274,6 +274,7 @@ export default {
       this.targetDropEditor = editor;
     },
     openDroppedFile(event) {
+      event.preventDefault();
       const editorTopBeDropped = this.targetDropEditor;
       const fileId = this.getDraggingFileId;
       this.setDraggingId({ id: null });

src/components/Editors/CodeEditor/index.vue

@@ -36,6 +36,9 @@ export default {
         theme: "vs-dark",
         fontSize: 16,
         fontLigatures: true,
+        wordWrap: "wordWrapColumn",
+        wordWrapMinified: true,
+        wrappingIndent: "indent",
         minimap: {
           enabled: false,
         },
@@ -69,7 +72,7 @@ export default {
       this.applyAppTheme();
 
       try {
-        this.resizeObserver = new ResizeObserver(_ => {
+        this.resizeObserver = new ResizeObserver((_) => {
           editor.layout();
         });
         this.resizeObserver.observe(this.$refs.editor.$el);
@@ -90,6 +93,7 @@ export default {
         ts: "typescript",
         py: "python",
         json: "json",
+        geojson: "json",
         html: "html",
         css: "css",
         md: "markdown",

src/components/TopBar.vue

@@ -125,6 +125,7 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
         pointer-events: none;
+        max-width: 120px;
       }
 
       &:last-child {

src/models/vFile.model.js

@@ -5,6 +5,8 @@ export const fileTypes = {
     DIRECTORY: "directory",
     MARKDOWN: "markdown"
 }
+
+export const ALLOWED_FILES = [];
 export default class VFile {
     constructor({ id, parent, type = fileTypes.FILE, name, contents, created_at, editable }) {
         this.id = id || `${type}_${uuid()}`;

src/pages/Home.vue

@@ -1,14 +1,19 @@
 <template>
   <main>
-    <div id="main-layout" :class="[{ hidePanel: !getActivePanelId }]">
+    <div
+      id="main-layout"
+      :class="[{ hidePanel: !getActivePanelId }]"
+      @drop.prevent="captureDrop"
+      @dragover.prevent
+    >
       <SideNavigationBar />
       <div v-show="getActivePanelId" class="explorer-panel">
         <FileExplorer v-if="getActivePanelId === 'explorer'" />
         <SearchPanel :key="'search'" v-if="getActivePanelId === 'search'" />
       </div>
       <Editor />
     </div>
-    <FileCreationModal/>
+    <FileCreationModal />
     <CommandCenter />
     <SlideYUpTransition>
       <router-view></router-view>
@@ -22,9 +27,9 @@ import Editor from "@/components/Editor";
 import CommandCenter from "@/components/CommandCenter";
 import SideNavigationBar from "@/components/SideNavigationBar";
 import SearchPanel from "@/components/SearchPanel";
-import { mapGetters } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { SlideYUpTransition } from "vue2-transitions";
-import FileCreationModal from "@/components/FileCreationModal"
+import FileCreationModal from "@/components/FileCreationModal";
 
 export default {
   components: {
@@ -35,7 +40,7 @@ export default {
     SideNavigationBar,
     SearchPanel,
     SlideYUpTransition,
-    FileCreationModal
+    FileCreationModal,
   },
   data() {
     return {};
@@ -44,9 +49,36 @@ export default {
     ...mapGetters("UI", ["getActivePanelId"]),
   },
   methods: {
+    ...mapActions("Files", ["createFile"]),
+    ...mapActions("Editor", ["openLocalFile"]),
     setActivePanel(optionId) {
       this.activePanel = optionId;
     },
+    async captureDrop(event) {
+      const { dataTransfer } = event;
+      const files = dataTransfer.files;
+      if (files && files.length > 0) {
+        const filename = files[0]?.name;
+        const regex = new RegExp(`.*[.geojson|.kml|.csv]`, "i");
+        if (filename && regex.test(filename)) {
+          const file = files[0];
+          if (file.type.startsWith("image") || file.type.startsWith("video")) {
+            // we donot support videos or images yet
+            return;
+          }
+          // check file size, open only if below 10MB
+          if (file.size / 1024 / 1024 < 10) {
+            try {
+              console.log(`Opening`, file);
+              await this.openLocalFile({ file })
+            } catch (error) {
+              console.error(error);
+              return;
+            }
+          }
+        }
+      }
+    },
   },
 };
 </script>

src/store/modules/Editor/actions.js

@@ -3,6 +3,9 @@ import OpenFileFootprint from "@/models/openFileFootprint.model";
 import { EDITORS } from "./initialState";
 import { saveAs } from "file-saver";
 import fileStorage from "@/utils/StorageDrivers/IndexedDB"; // Switch storage drivers if needed
+import { wrap } from "comlink";
+const worker = new Worker("./fileLoader.worker.js", { type: "module" });
+const fileLoader = wrap(worker);
 
 export default {
   /**
@@ -38,6 +41,24 @@ export default {
     });
   },
 
+  /**
+   * Opens a local file from a file object being passed
+   * @param {Object} file 
+   * @param {String} editor 
+   */
+  openLocalFile: async ({ commit, state, dispatch }, { file, editor }) => {
+    editor = editor || state.activeEditor;
+    const fileData = await fileLoader.loadLocalFile(file);
+    if (fileData) {
+      const createdFile = await dispatch("Files/createFile", {
+        name: file.name,
+        contents: fileData,
+        editable: false
+      }, { root: true });
+      dispatch("openFile", { id: createdFile.id, editor: editor });
+    }
+  },
+
   /**
    * Opens a list of files in primary editor
    * @param {Object} context

src/store/modules/Editor/fileLoader.worker.js

@@ -0,0 +1,20 @@
+import { expose } from "comlink";
+
+async function fileReader(file) {
+  const reader = new FileReader();
+  return new Promise((resolve, reject) => {
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject(error);
+    reader.readAsText(file);
+  });
+}
+
+async function loadLocalFile(file) {
+  const text = await fileReader(file);
+  return text;
+}
+
+expose({
+  loadLocalFile,
+  fileReader,
+});