start read file feature

src/app/component-registry/circumference-component.js

@@ -2,13 +2,13 @@ import { Component } from "../core/models/components/component";
 import { ComponentOptions } from "../core/models/components/component-options";
 import { CircumferenceDrawer } from "../components/circumference-component/drawers/circumference-drawer";
 class CircumferenceComponent extends Component {
-    constructor() {
-        const options = new ComponentOptions(
-            "c83f6d14758c48f7b8fdb5ca69e46272",
-            "Circumference",
-            "circumference"
-        );
-        super(new CircumferenceDrawer(), options);
-    }
+  constructor() {
+    const options = new ComponentOptions(
+      "c83f6d14758c48f7b8fdb5ca69e46272",
+      "Circumference",
+      "circumference"
+    );
+    super(new CircumferenceDrawer(), options);
+  }
 }
 export const circumferenceComponent = new CircumferenceComponent();

src/app/core/application/header-menu.js

@@ -1,14 +1,16 @@
 import { stageManager } from "./stage-manager";
-
+import { FileParser } from "../parser/file-parser";
 class HeaderMenu {
-  constructor() {
+  constructor() {}
+  bootstrap() {
     $("body").on("click", "#save", this.save.bind(this));
+    $("body").on("click", "#open", this.open.bind(this));
+    $("body").on("change", "#input-file", this.onFileChanged.bind(this));
   }
-  bootstrap() {}
   save() {
     const layer = stageManager.getCurrentLayer();
     const file = layer.actionManager.save();
-    var a = document.createElement("a"),
+    const a = document.createElement("a"),
       url = URL.createObjectURL(file);
     a.href = url;
     a.download = `${layer.name}.geo`;
@@ -19,5 +21,20 @@ class HeaderMenu {
       window.URL.revokeObjectURL(url);
     }, 0);
   }
+  open() {
+    $("#input-file").click();
+  }
+  onFileChanged() {
+    const files = $("#input-file")[0].files;
+    if (files == undefined || files.length === 0) return;
+    const reader = new FileReader();
+    reader.onload = function() {
+      const result = reader.result;
+      const parser = new FileParser(result);
+      const map = parser.parse();
+      console.info("map", map);
+    };
+    reader.readAsText(files[0]);
+  }
 }
 export const headerMenu = new HeaderMenu();

src/app/core/application/menu.js

@@ -2,7 +2,6 @@ class Menu {
   constructor() {
     this.tools = [];
     $("#tools").empty();
-    this.configureHeaderMenu();
   }
   add(component) {
     this.tools.push(component);
@@ -26,8 +25,5 @@ class Menu {
         );
       });
   }
-  configureHeaderMenu() {
-    $("#save").on("click");
-  }
 }
 export const menu = new Menu();

src/app/core/parser/file-parser.js

@@ -52,10 +52,11 @@ export class FileParser {
       object_line = object_line.substring(0, object_line.length - 1);
     }
     const properties = object_line.split(",");
+    console.info("properties", properties);
     for (const prop in properties) {
       const prop_info = prop.trim().split(":");
       const key = parseInt(prop_info[0]);
-
+      if (prop_info[1] == undefined) continue;
       if (key == TYPE) {
         const type = prop_info[1];
         map.set("type", ObjectClass.fromCodeToClass(parseInt(type)));

src/css/app.css

@@ -1,6 +1,9 @@
 .wrapper {
   display: block;
 }
+#input-file {
+  display: none !important;
+}
 
 #sidebar {
   min-width: 228px;

src/index.html

@@ -31,11 +31,14 @@
                   <img src="assets/images/Logo.png" alt="iGeom.logo" />
                 </li>
                 <li>
-                  <button>File</button>
+                  <button>
+                    File
+                    <input type="file" id="input-file" />
+                  </button>
                   <ul class="li-content">
-                    <li><button>Open</button></li>
+                    <li><button id="open">Open</button></li>
                     <li><button id="save">Save</button></li>
-                  </ul></button>
+                  </ul>
                 </li>
                 <li><button>Edit</button></li>
               </ul>