Refatoração ES6 e otimização para webpack, carregamento de ferramentas e componentes dinamicamente junto a construção do menu ferramentas

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.gitignore

@@ -1,88 +1,4 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
+node_modules
+dist
+.webpack
+package-lock.json

app/core/enums/app-state-enum.js

@@ -1,7 +0,0 @@
-var APP_STATE = (function() {
-  return {
-    NONE: 0,
-    OBJECT_SELECTED: 1,
-    TOOL_SELECTED: 2
-  };
-})();

package.json

@@ -2,15 +2,26 @@
   "name": "igeom",
   "version": "1.0.0",
   "description": "",
+  "private": true,
   "main": "index.js",
   "dependencies": {
     "bootstrap": "^4.3.1",
     "jquery": "^3.4.1",
-    "konva": "^3.4.0"
+    "konva": "^3.4.0",
+    "lodash": "^4.17.15"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "babel-loader": "^8.0.6",
+    "webpack": "^4.39.2",
+    "webpack-cli": "^3.3.7"
   },
-  "devDependencies": {},
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --mode=development -w",
+    "babel": "babel  ./src/app/app.js -o ./src/main.js -w"
   },
   "repository": {
     "type": "git",

src/.gitignore

@@ -0,0 +1,5 @@
+
+node_modules/
+dist/
+.git/
+package-lock.json

app/app.js

@@ -1,23 +1,25 @@
-var app = (function() {
-  let _tools = [];
-  let _menu = [];
+import { APP_STATE } from "./core/enums/app-state-enum";
+import { stages as Stages } from "./core/components/stages";
+import { objects as Objects } from "./core/components/objects";
+import { state as State } from "./core/components/state";
+import { selector as Selector } from "./core/components/selector";
+import { menu as Menu } from "./core/components/menu";
+export const app = (function() {
   let _selectedTool = [];
-  let _objects = [];
-  let _state = APP_STATE.NONE;
   let _stage = _createStage();
-
   function _bootstrap() {
     configureStageEvents();
-    _layer = _currentLayer();
-    selector.bootstrap();
+    Selector.bootstrap();
+    requireAll(require.context("./components/", true, /\.js$/));
+    _refreshMenu();
   }
 
   function _createStage() {
-    return stages.create();
+    return Stages.getCurrentStage();
   }
 
   function _currentLayer() {
-    return stages.getCurrentLayer();
+    return Stages.getCurrentLayer();
   }
 
   function configureStageEvents() {
@@ -79,37 +81,35 @@ var app = (function() {
   }
 
   function _pushObject(object) {
-    _objects.push(object);
+    Objects.add(object);
   }
 
   function _getObjects() {
-    return _objects;
+    return Objects.get();
   }
 
-  function _setState(state) {
-    _state = state;
+  function _setState(e) {
+    State.setState(e);
   }
-  function _getState() {
-    return _state;
+
+  function _refreshMenu() {
+    Menu.refresh();
   }
-  function _menuClick(e) {
-    _setState(APP_STATE.TOOL_SELECTED);
-    if (e.click());
+  function requireAll(r) {
+    r.keys().forEach(r);
   }
+
+  _bootstrap();
   return {
     stage: _stage,
     currentLayer: _currentLayer,
     bootstrap: _bootstrap,
-    tools: _tools,
     setSelectedTool: _setSelectedTool,
     clearSelectedTool: _clearSelectedTool,
     getSelectedTool: _getSelectedTool,
     pos: _getRelativePointerPosition,
     setStatus: _setStatus,
     pushObject: _pushObject,
-    getObjects: _getObjects,
-    setState: _setState,
-    getState: _getState,
-    menuClick: _menuClick
+    getObjects: _getObjects
   };
 })();

app/components/circumference.js

@@ -1,4 +1,6 @@
-var circunference = (function() {
+import { app as App } from "../app";
+import { menu as Menu } from "../core/components/menu";
+export const circumference = (function() {
   let _tool = {};
   let _states = ["center", "radius"];
   let _state = undefined;
@@ -8,28 +10,28 @@ var circunference = (function() {
   function _draw() {
     if (_state == undefined) {
       _state = _states[0];
-      app.setStatus("Selecione o centro da Circunferência");
+      App.setStatus("Selecione o centro da Circunferência");
     } else if (_state == _states[0]) {
-      let pos = app.pos();
+      let pos = App.pos();
       _coordinates[0] = pos.x;
       _coordinates[1] = pos.y;
       _state = _states[1];
-      app.setStatus("Selecione o raio da Circunferência");
+      App.setStatus("Selecione o raio da Circunferência");
     } else if (_state == _states[1]) {
-      let pos = app.pos();
+      let pos = App.pos();
       _coordinates[2] = pos.x;
       _coordinates[3] = pos.y;
       let legA = _coordinates[2] - _coordinates[0];
-      legB = _coordinates[3] - _coordinates[1];
+      let legB = _coordinates[3] - _coordinates[1];
       let radius = Math.sqrt(Math.pow(legA, 2) + Math.pow(legB, 2));
       _points = [_coordinates[0], _coordinates[1], radius];
       let p = _points.slice();
-      _drawCircunference(p[0], p[1], p[2]);
+      _drawcircumference(p[0], p[1], p[2]);
     }
   }
 
-  function _drawCircunference(x, y, radius) {
-    let layer = app.currentLayer();
+  function _drawcircumference(x, y, radius) {
+    let layer = App.currentLayer();
     let group = new Konva.Group({
       draggable: true,
       resizeEnabled: false
@@ -64,26 +66,26 @@ var circunference = (function() {
     group.add(point);
 
     layer.add(group);
-    app.stage.draw();
+    App.stage.draw();
 
     _clearState();
-    app.clearSelectedTool();
-    app.setStatus("");
+    App.clearSelectedTool();
+    App.setStatus("");
   }
 
   function _bootstrap() {
-    app.tools.push(_tool);
+    Menu.add(_tool);
   }
 
   function _click(id) {
     if (_state == _states[0]) {
-      app.clearSelectedTool();
+      App.clearSelectedTool();
       _clearState();
       return;
     }
-    app.setSelectedTool(_tool);
+    App.setSelectedTool(_tool);
     _state = _states[0];
-    app.setStatus("Selecione o primeiro ponto no canvas");
+    App.setStatus("Selecione o primeiro ponto no canvas");
   }
 
   function _clearState() {
@@ -91,14 +93,14 @@ var circunference = (function() {
   }
 
   _tool = {
-    id: "circunference",
+    id: "circumference",
     title: "Circunferência",
     icon: "line",
     click: _click,
     draw: _draw,
     points: _points,
     coordinates: _coordinates,
-    drawCircunference: _drawCircunference
+    drawcircumference: _drawcircumference
   };
 
   _bootstrap();

app/components/label.js

@@ -1,4 +1,4 @@
-var label = (function() {
+export const label = (function() {
   const _labels = [
     "a",
     "b",

app/components/line.js

@@ -1,4 +1,6 @@
-var line = (function() {
+import { app as App } from "../app";
+import { menu as Menu } from "../core/components/menu";
+export const line = (function() {
   let _tool = {};
   let _states = ["primeiro_ponto", "segundo_ponto"];
   let _state = undefined;
@@ -7,15 +9,15 @@ var line = (function() {
   function _draw() {
     if (_state == undefined) {
       _state = _states[0];
-      app.setStatus("Selecione o primeiro ponto no canvas");
+      App.setStatus("Selecione o primeiro ponto no canvas");
     } else if (_state == _states[0]) {
-      let pos = app.pos();
+      let pos = App.pos();
       _points[0] = pos.x;
       _points[1] = pos.y;
       _state = _states[1];
-      app.setStatus("Selecione o segundo ponto no canvas");
+      App.setStatus("Selecione o segundo ponto no canvas");
     } else if (_state == _states[1]) {
-      let pos = app.pos();
+      let pos = App.pos();
       _points[2] = pos.x;
       _points[3] = pos.y;
       let p = _points.slice();
@@ -28,30 +30,29 @@ var line = (function() {
         strokeScaleEnabled: false
       });
 
-      let layer = app.currentLayer();
+      let layer = App.currentLayer();
       layer.add(ln);
-
-      app.stage.draw();
+      App.stage.draw();
 
       _clearState();
-      app.clearSelectedTool();
-      app.setStatus("");
+      App.clearSelectedTool();
+      App.setStatus("");
     }
   }
 
   function _bootstrap() {
-    app.tools.push(_tool);
+    Menu.add(_tool);
   }
 
   function _click() {
     if (_state == _states[0] || _state == _states[1]) {
-      app.clearSelectedTool();
+      App.clearSelectedTool();
       _clearState();
       return;
     }
-    app.setSelectedTool(_tool);
+    App.setSelectedTool(_tool);
     _state = _states[0];
-    app.setStatus("Selecione o primeiro ponto no canvas");
+    App.setStatus("Selecione o primeiro ponto no canvas");
   }
 
   function _clearState() {

app/components/point.js

@@ -1,10 +1,13 @@
-var point = (function() {
+import { app as App } from "../app";
+import { label as Label } from "../components/label";
+import { menu as Menu } from "../core/components/menu";
+export const point = (function() {
   let style = {
     fill: "#9bc364",
     strokeWidth: 1,
     stroke: "#9bc364"
   };
-  let tool = {};
+  let _tool = {};
   let states = ["center"];
   let state = undefined;
   let points = [0, 0];
@@ -12,9 +15,9 @@ var point = (function() {
   function _draw() {
     if (state == undefined) {
       state = states[0];
-      app.setStatus("Selecione o centro do Ponto");
+      App.setStatus("Selecione o centro do Ponto");
     } else if (state == states[0]) {
-      let pos = app.pos();
+      let pos = App.pos();
       points[0] = pos.x;
       points[1] = pos.y;
       let p = points.slice();
@@ -23,16 +26,14 @@ var point = (function() {
   }
 
   function _bootstrap() {
-    app.tools.push(tool);
+    Menu.add(_tool);
   }
 
   function _drawPoint(x, y, useLabel) {
-    let layer = app.currentLayer();
     let group = new Konva.Group({
       draggable: true,
       resizeEnabled: false
     });
-
     let circle = new Konva.Circle({
       x: x,
       y: y,
@@ -49,7 +50,7 @@ var point = (function() {
     let text = new Konva.Text({
       x: x + 10,
       y: y - 10,
-      text: label.draw(),
+      text: Label.draw(),
       fontSize: 12,
       fontFamily: "Calibri",
       fill: "#434a45",
@@ -62,30 +63,34 @@ var point = (function() {
     if (useLabel != undefined && useLabel) {
       group.add(text);
     }
+
+    let layer = App.currentLayer();
     layer.add(group);
-    app.pushObject(group);
-    app.stage.draw();
+    App.stage.draw();
+
+    App.pushObject(group);
+
     _clearState();
-    app.clearSelectedTool();
-    app.setStatus("");
+    App.clearSelectedTool();
+    App.setStatus("");
   }
 
   function _click(id) {
     if (state == states[0]) {
-      app.clearSelectedTool();
+      App.clearSelectedTool();
       _clearState();
       return;
     }
-    app.setSelectedTool(tool);
+    App.setSelectedTool(_tool);
     state = states[0];
-    app.setStatus("Selecione o centro da Ponto");
+    App.setStatus("Selecione o centro da Ponto");
   }
 
   function _clearState() {
     state = undefined;
   }
 
-  tool = {
+  _tool = {
     id: "point",
     title: "Ponto",
     icon: "point",

src/app/core/components/menu.js

@@ -0,0 +1,19 @@
+class Menu {
+  constructor() {
+    this.tools = [];
+  }
+  add(tool) {
+    this.tools.push(tool);
+  }
+  refresh() {
+    $("#tools").empty();
+    this.tools.forEach(tool => {
+      $("#tools").append(`<button
+      id="btn-${tool.id}"
+      class="tool icon icon-${tool.id}">
+      <span> ${tool.title} </span></button>`);
+      $("body").on("click", `#btn-${tool.id}`, tool.click);
+    });
+  }
+}
+export const menu = new Menu();

src/app/core/components/objects.js

@@ -0,0 +1,12 @@
+class Objects {
+  constructor() {
+    this._objects = [];
+  }
+  add(object) {
+    this._objects.push(object);
+  }
+  get() {
+    return this._objects;
+  }
+}
+export const objects = new Objects();

app/core/components/selector.js

@@ -1,4 +1,8 @@
-var selector = (function() {
+import { APP_STATE } from "../enums/app-state-enum";
+import { stages as Stages } from "../components/stages";
+import { state as State } from "../components/state";
+import { objects as Objects } from "../components/objects";
+export const selector = (function() {
   let _objects = [];
   let _selectorPosStart;
   let _selectorPosNow;
@@ -12,15 +16,17 @@ var selector = (function() {
     dash: [2, 2]
   });
 
+  let _stage = Stages.getCurrentStage();
+  let _layer = Stages.getCurrentLayer();
+
   function _bootstrap() {
     _configureSelectorEvents();
     _addToLayer();
   }
 
   function _addToLayer() {
-    let layer = app.currentLayer();
     _selectorRect.listening(false);
-    layer.add(_selectorRect);
+    _layer.add(_selectorRect);
   }
 
   function _getSelectedObjects() {
@@ -28,21 +34,21 @@ var selector = (function() {
   }
 
   function _configureSelectorEvents() {
-    app.stage.on("mousedown", function(e) {
+    _stage.on("mousedown", function(e) {
       _mode = "drawing";
       _startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
     });
 
-    app.stage.on("mousemove", function(e) {
+    _stage.on("mousemove", function(e) {
       if (_mode === "drawing") {
         _updateDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
       }
     });
 
-    app.stage.on("mouseup", function(e) {
+    _stage.on("mouseup", function(e) {
       _mode = "";
       _selectorRect.visible(false);
-      app.stage.draw();
+      _stage.draw();
     });
   }
 
@@ -52,8 +58,8 @@ var selector = (function() {
   }
 
   function _updateDragSelector(posIn) {
-    if (app.getState() != APP_STATE.NONE) return;
-    let objects = app.getObjects();
+    if (State.getCurrentState() != APP_STATE.NONE) return;
+    let currentObjects = Objects.get();
     let posRect = _reverse(_selectorPosStart, _selectorPosNow);
     _selectorPosNow = { x: posIn.x, y: posIn.y };
     _selectorRect.x(posRect.x1);
@@ -62,17 +68,17 @@ var selector = (function() {
     _selectorRect.height(posRect.y2 - posRect.y1);
     _selectorRect.visible(true);
 
-    for (i = 0; i < objects.length; i = i + 1) {
-      let object = objects[i];
+    for (let i = 0; i < currentObjects.length; i = i + 1) {
+      let object = currentObjects[i];
       if (object.children != undefined && object.children.length > 0) {
-        for (j = 0; j < object.children.length; j++) {
+        for (let j = 0; j < object.children.length; j++) {
           _style(object.children[j], _selectorRect);
         }
       } else {
         _style(object, _selectorRect);
       }
     }
-    app.stage.draw();
+    _stage.draw();
   }
 
   function _style(object, selectorRect) {
@@ -131,6 +137,7 @@ var selector = (function() {
     }
     return { x1: r1x, y1: r1y, x2: r2x, y2: r2y };
   }
+
   return {
     selctedObjects: _getSelectedObjects(),
     bootstrap: _bootstrap

app/core/components/stages.js

@@ -1,4 +1,4 @@
-var stages = (function() {
+export const stages = (function() {
   let _width = _getWidth();
   let _height = _getHeigth();
   let _stage = new Object();
@@ -74,6 +74,7 @@ var stages = (function() {
   function _bootstrap() {
     $("#files").empty();
     $("body").on("click", "#new-document", _evenNewDocument);
+    _createStage();
   }
 
   function _makeTemplate(id) {
@@ -93,7 +94,7 @@ var stages = (function() {
   return {
     create: _createStage,
     getFiles: _getFiles,
-    _getStage: _getStage,
+    getCurrentStage: _getStage,
     getCurrentLayer: _getCurrentLayer
   };
 })();

src/app/core/components/state.js

@@ -0,0 +1,14 @@
+import { APP_STATE } from "../enums/app-state-enum";
+class State {
+  constructor() {
+    this._currentState = APP_STATE.NONE;
+  }
+  getCurrentState() {
+    return this._currentState;
+  }
+  setState(state) {
+    this._currentState = state;
+  }
+}
+
+export const state = new State();

src/app/core/enums/app-state-enum.js

@@ -0,0 +1,5 @@
+export const APP_STATE = {
+  NONE: 0,
+  OBJECT_SELECTED: 1,
+  TOOL_SELECTED: 2
+};

src/app/models/point-model.js

@@ -0,0 +1 @@
+export class Point {}

index.html

@@ -7,7 +7,7 @@
     <title>Proof of Concept - iGeom - Web</title>
     <link
       rel="stylesheet"
-      href="node_modules/bootstrap/dist/css/bootstrap.min.css"
+      href="../node_modules/bootstrap/dist/css/bootstrap.min.css"
     />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="stylesheet" href="css/icons.css" />
@@ -17,27 +17,9 @@
       <nav id="sidebar">
         <div id="tool-bar">
           <h3>Tools</h3>
-          <div class="tools">
-            <button
-              id="btn-point"
-              class="tool icon icon-point"
-              onclick="app.menuClick(point)"
-            >
-              <span> Point</span>
-            </button>
-            <button
-              id="btn-line"
-              class="tool icon icon-line"
-              onclick="app.menuClick(line)"
-            >
-              <span>Line</span>
-            </button>
-            <button
-              id="btn-circunference"
-              class="tool icon icon-circumference"
-              onclick="app.menuClick(circunference)"
-            >
-              <span>Circunferece</span>
+          <div id="tools" class="tools">
+            <button id="btn-point" class="tool icon icon-point" onclick="">
+              <span> </span>
             </button>
           </div>
 
@@ -77,19 +59,9 @@
         <div id="stages"></div>
       </div>
     </div>
-    <script src="node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-    <script src="node_modules/konva/konva.min.js"></script>
-    <script src="app/core/enums/app-state-enum.js"></script>
-    <script src="app/core/components/stages.js"></script>
-    <script src="app/core/components/selector.js"></script>
-    <script src="app/app.js"></script>
-    <script src="app/components/label.js"></script>
-    <script src="app/components/point.js"></script>
-    <script src="app/components/line.js"></script>
-    <script src="app/components/circumference.js"></script>
-    <script>
-      app.bootstrap();
-    </script>
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="../node_modules/konva/konva.min.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

webpack.config.js

@@ -0,0 +1,28 @@
+const path = require("path");
+
+module.exports = {
+  entry: "./src/app/app.js",
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "src")
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      }
+    ]
+  }
+};