save files .geo

src/app/app.js

@@ -6,10 +6,12 @@ import { selector as Selector } from "./core/application/selector";
 import { menu as Menu } from "./core/application/menu";
 import Konva from "konva";
 import { COMPONENT_TYPE } from "./core/enums/component-type-enum";
+import { headerMenu } from "./core/application/header-menu";
 export const app = (function() {
   let _selectedTool = [];
   function _bootstrap() {
     Konva.showWarnings = false;
+    headerMenu.bootstrap();
     Selector.bootstrap();
     requireAll(require.context("./component-registry/", true, /\.js$/));
     _refreshMenu();

src/app/components/circumference-component/models/circumference-model.js

@@ -11,7 +11,10 @@ export class CircumferenceModel extends GeometricObject {
     this._coordinates[1] = this.center.posY;
     this._coordinates[2] = this.radius.posX;
     this._coordinates[3] = this.radius.posY;
+    this.color = -16776961;
     super.setClass(ELEMENTS_CLASS.CIRCUMFERENCE);
+    this.definitions.push(this.center);
+    this.definitions.push(this.radius);
   }
   getRadius() {
     this._coordinates[0] = this.center.posX;

src/app/components/intersection-component/models/intersection-model.js

@@ -9,6 +9,8 @@ export class IntersectionModel extends PointModel {
     super.setClass(ELEMENTS_CLASS.INTERSECTION_POINT);
     this.visible = visible;
     this.index = index;
+    this.definitions.push(this.r);
+    this.definitions.push(this.s);
   }
 
   update(aggregator, event) {

src/app/components/line-segment-component/models/line-segment-model.js

@@ -8,6 +8,8 @@ export class LineSegmentModel extends GeometricObject {
     this.pointB = pointB;
     this.setLabel(label);
     super.setClass(ELEMENTS_CLASS.LINE_SEGMENT);
+    this.definitions.push(this.pointA);
+    this.definitions.push(this.pointB);
   }
   getStraight() {
     const aX = this.pointA.posX;

src/app/components/point-component/models/point-model.js

@@ -5,11 +5,15 @@ export class PointModel extends GeometricObject {
     super(id);
     this.posX = posX;
     this.posY = posY;
+    console.info(posX, posY);
     this.setLabel(label);
     super.setClass(ELEMENTS_CLASS.POINT);
+    this.definitions = [{ id: this.posX + 5 }, { id: -this.posY - 5 }];
+    this.color = -16711936;
   }
   update(konvaObject, event) {
     this.posX = konvaObject.attrs.startPosX + event.target._lastPos.x;
     this.posY = konvaObject.attrs.startPosY + event.target._lastPos.y;
+    this.definitions = [{ id: this.posX + 5 }, { id: -this.posY - 5 }];
   }
 }

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

@@ -0,0 +1,23 @@
+import { stageManager } from "./stage-manager";
+
+class HeaderMenu {
+  constructor() {
+    $("body").on("click", "#save", this.save.bind(this));
+  }
+  bootstrap() {}
+  save() {
+    const layer = stageManager.getCurrentLayer();
+    const file = layer.actionManager.save();
+    var a = document.createElement("a"),
+      url = URL.createObjectURL(file);
+    a.href = url;
+    a.download = `${layer.name}.geo`;
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(function() {
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    }, 0);
+  }
+}
+export const headerMenu = new HeaderMenu();

src/app/core/application/menu.js

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

src/app/core/drawers/drawer-aggregator.js

@@ -29,6 +29,7 @@ export class DrawerAggregator {
   addAggregator(aggregator) {
     if (!this.aggregators.includes(aggregator)) {
       this.aggregators.push(aggregator);
+      this.genericObject.dependentsOnThis.push(aggregator.genericObject);
     }
   }
   update(e) {

src/app/core/drawers/drawer-manager.js

@@ -24,5 +24,8 @@ class DrawerManager {
       .getCurrentKonvaLayer()
       .batchDraw();
   }
+  addAction(action) {
+    Stages.getCurrentLayer().actionManager.push(action);
+  }
 }
 export const drawerManager = new DrawerManager();

src/app/core/drawers/drawer.js

@@ -1,6 +1,7 @@
 import { drawerManager as DrawerManager } from "./drawer-manager";
 import { app as App } from "../../app";
 import { selector as Selector } from "../application/selector";
+import { Action } from "../models/application/actions/action";
 
 export class Drawer {
   constructor() {
@@ -35,6 +36,7 @@ export class Drawer {
     Selector.clear();
   }
   addAggregator(aggregator) {
+    this.addAction(new Action(aggregator.genericObject));
     DrawerManager.addAggregator(aggregator);
   }
   draw(object) {
@@ -49,6 +51,9 @@ export class Drawer {
   setKonvaObject(konvaObject) {
     this.konvaObject = konvaObject;
   }
+  addAction(action) {
+    this.drawerManager.addAction(action);
+  }
   static setMaxIndex(object) {
     object.zIndex(Number.MAX_SAFE_INTEGER);
     Drawer.stageBatchDraw();

src/app/core/drawers/layer.js

@@ -1,4 +1,5 @@
 import Konva from "konva";
+import { ActionManager } from "../models/application/actions/action-manager";
 
 export class Layer {
   constructor(id, konvaLayer) {
@@ -12,6 +13,7 @@ export class Layer {
       resizeEnabled: false
     });
     this.konvaLayer.add(this.konvaGroup);
+    this.actionManager = new ActionManager();
   }
   getKonvaGroup() {
     return this.konvaGroup;

src/app/core/enums/geo-file-enum.js

@@ -0,0 +1,15 @@
+export const GEO_FILE = {
+  TYPE: 0, // identifica se Ponto, Texto, Reta...
+  ID: 1, // identificador unico do objeto
+  DEFINITION: 2, // parametros dos quais o objeto depende (exemplo Reta depende de Ponto e Ponto :> "2:IDPONTO1 IDPONTO2")
+  LIST: 3, // lista de identificadores de objetos dependentes do atual
+  LABEL: 4, // definicao do rotulo (valor/nome e se escondido ou nao)
+  DEFINED: 6, // 0 ou 1 (???)
+  COLOR: 5, // cor usando valor inteiro
+  HIDDEN: 7, // 0 (visivel) ou 1 (escondido)
+  PIXEL: 8, // LeScript usa (coordenada X e Y - inteiros)
+  FONT: 9, // 'Arial' T Tam: T : FONT.PLAIN, FONT.BOLD, FONT.ITALIC, Tam : 8, 9,...
+  // PROIBIDO: "Arial" T Tam, pois em caso contrario nao sera lido como parametro
+  //           usa  MARCAFNT : "\'" nao pode ser "\"" <[28/09/2006] agora vazio "">
+  LABEL_COLOR: 10 // cor de rotulo (tambem um inteiro) - inserido apos iGeom versao
+};

src/app/core/models/application/actions/action-manager.js

@@ -0,0 +1,33 @@
+export class ActionManager {
+  constructor() {
+    this.actions = [];
+  }
+  push(action) {
+    this.actions.push(action);
+  }
+  clear() {
+    this.actions = [];
+  }
+  load(actions) {
+    this.actions = actions;
+  }
+  save() {
+    const LINES = [
+      `# igeom: http://www.matematica.br!
+[ .: iGeom : Geometria Interativa na Internet :. ]!
+[ versao: 5.9.22 ]!
+[ PC = 3; DD = 0 ]!
+[[Nov 24, 2019 8:35:20 PM; Victor]]!
+[0:1.1, 1:3,  - iGeom versao 5.9.22]!\n`
+    ];
+    this.actions.forEach(action => {
+      action.rehydrate();
+      LINES.push(action.toString());
+    });
+    console.info(this.actions);
+    var file = new Blob([...LINES], {
+      type: "text/plain;charset=utf-8"
+    });
+    return file;
+  }
+}

src/app/core/models/application/actions/action.js

@@ -0,0 +1,78 @@
+import { GenericObject } from "../../objects/generic-object";
+import { GEO_FILE } from "../../../enums/geo-file-enum";
+
+export class Action {
+  constructor(genericObject) {
+    this.id = genericObject.id;
+    this.type = genericObject.elementClass;
+    this.definition = this.r(
+      genericObject.definitions.map(x => x.id).toString()
+    );
+    this.list = this.r(
+      genericObject.dependentsOnThis.map(x => x.id).toString()
+    );
+    this.label = genericObject.labelIgeom;
+    this.defined = genericObject.defined;
+    this.color = genericObject.color;
+    this.hidden = genericObject.visible ? 0 : 1;
+    this.pixel = "";
+    this.font = "";
+    this.labelColor = genericObject.labelColor;
+    this.genericObject = genericObject;
+  }
+  do() {
+    const genericObject = new GenericObject(this.id);
+    genericObject.color = this.color;
+    genericObject.elementClass = this.type;
+    genericObject.definition = this.definition;
+    genericObject.list = this.list;
+    genericObject.label = this.label;
+    genericObject.visible = this.hidden == 0;
+  }
+  toMap() {
+    const map = new Map();
+    map.set("key", "value");
+    return map;
+  }
+
+  toString() {
+    return (
+      "{" +
+      `${this.d(GEO_FILE.ID, this.id)}, ` +
+      `${this.d(GEO_FILE.TYPE, this.type)}, ` +
+      `${this.d(GEO_FILE.DEFINITION, this.definition)}, ` +
+      `${this.d(GEO_FILE.LIST, this.list)}, ` +
+      `${this.d(GEO_FILE.LABEL, this.label)}, ` +
+      `${this.d(GEO_FILE.DEFINED, this.defined)}, ` +
+      `${this.d(GEO_FILE.COLOR, this.color)}, ` +
+      `${this.d(GEO_FILE.HIDDEN, this.hidden)}, ` +
+      `${this.d(GEO_FILE.PIXEL, this.pixel)}, ` +
+      `${this.d(GEO_FILE.FONT, this.font)}, ` +
+      `${this.d(GEO_FILE.LABEL_COLOR, this.labelColor)}` +
+      `}!\n`
+    );
+  }
+  d(key, value) {
+    return `${key}:${value}`;
+  }
+  r(str) {
+    return str.replace(",", " ");
+  }
+  rehydrate() {
+    this.id = this.genericObject.id;
+    this.type = this.genericObject.elementClass;
+    this.definition = this.r(
+      this.genericObject.definitions.map(x => x.id).toString()
+    );
+    this.list = this.r(
+      this.genericObject.dependentsOnThis.map(x => x.id).toString()
+    );
+    this.label = this.genericObject.labelIgeom;
+    this.defined = this.genericObject.defined;
+    this.color = this.genericObject.color;
+    this.hidden = this.genericObject.visible ? 0 : 1;
+    this.pixel = "";
+    this.font = "";
+    this.labelColor = "";
+  }
+}

src/app/core/models/objects/dynamic-object.js

@@ -3,17 +3,18 @@ import { GenericObject } from "./generic-object";
 export class DynamicObject extends GenericObject {
   constructor(id) {
     super(id);
-    this.label;
-    this.dependencies = [];
-    this.elementClass;
   }
   setLabel(label) {
     if (label != undefined) {
       this.label = label;
+      this.setLabelIgeom(this.label);
     }
   }
+  setLabelIgeom(label) {
+    this.labelIgeom = `${label} 4.0 -10.0 0`;
+  }
   addDependency(dynamicObject) {
-    this.dependencies.push(dynamicObject);
+    this.definitions.push(dynamicObject);
   }
   setClass(elementClass) {
     this.elementClass = elementClass;

src/app/core/models/objects/generic-object.js

@@ -7,5 +7,14 @@ export class GenericObject {
     } else {
       this.id = id;
     }
+    this.elementClass;
+    this.label = "";
+    this.labelIgeom = "";
+    this.dependentsOnThis = [];
+    this.definitions = [];
+    this.labelColor = "";
+    this.defined = 1;
+    this.color = "";
+    this.visible = true;
   }
 }

src/app/core/models/objects/geometric-object.js

@@ -7,7 +7,6 @@ export class GeometricObject extends DynamicObject {
     this.backgroundColor;
     this.edgeThinckness;
     this.draggable = false;
-    this.visible = true;
   }
   setBorderColor(color) {
     this.borderColor = color;

src/css/app.css

@@ -81,7 +81,6 @@
 #header ul li button {
   background: transparent;
   border: none;
-
   margin: 0px;
   height: 100%;
 }
@@ -90,6 +89,35 @@
   transition: background-color 0.5s linear;
 }
 
+#header ul li .li-content {
+  display: none;
+  position: absolute;
+  background-color: #efefef;
+  min-width: 160px;
+  box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  height: auto;
+  top: 28px;
+}
+.li-content li {
+  width: 100%;
+}
+.li-content li button {
+  width: 100% !important;
+  padding: 5px 10px;
+  display: inline-block;
+  text-align: left;
+}
+
+#header ul li:hover .li-content {
+  display: block;
+  transition: display 0.5s linear;
+}
+
+#header ul li:hover .dropbtn {
+  background-color: #3e8e41;
+}
+
 .files {
   background: #eaeaea;
   height: 32.02px;

src/index.html

@@ -5,10 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Proof of Concept - iGeom - Web</title>
-    <link
-      rel="stylesheet"
-      href="css/bootstrap.min.css"
-    />
+    <link rel="stylesheet" href="css/bootstrap.min.css" />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="stylesheet" href="css/icons.css" />
   </head>
@@ -17,13 +14,12 @@
       <nav id="sidebar">
         <div id="tool-bar">
           <h3>Tools</h3>
+          <span id="status"></span>
           <div id="tools" class="tools">
             <button id="btn-point" class="tool icon icon-point" onclick="">
               <span> </span>
             </button>
           </div>
-
-          <span id="status"> </span>
         </div>
       </nav>
       <div id="content">
@@ -34,7 +30,13 @@
                 <li id="logo">
                   <img src="assets/images/Logo.png" alt="iGeom.logo" />
                 </li>
-                <li><button>File</button></li>
+                <li>
+                  <button>File</button>
+                  <ul class="li-content">
+                    <li><button>Open</button></li>
+                    <li><button id="save">Save</button></li>
+                  </ul></button>
+                </li>
                 <li><button>Edit</button></li>
               </ul>
             </div>