瀏覽代碼

Merge branch 'release/1.0.0'

Victor Luiz Domingues 5 年之前
父節點
當前提交
fe5e98c57a

+ 3 - 0
.babelrc

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

+ 4 - 88
.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

+ 0 - 7
app/core/enums/app-state-enum.js

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

+ 0 - 89
index.html

@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <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="node_modules/bootstrap/dist/css/bootstrap.min.css"
-    />
-    <link rel="stylesheet" href="css/app.css" />
-    <link rel="stylesheet" href="css/icons.css" />
-  </head>
-  <body>
-    <div class="wrapper">
-      <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>
-            </button>
-          </div>
-
-          <span id="status"> </span>
-        </div>
-      </nav>
-      <div id="content">
-        <nav id="header">
-          <div class="d-flex">
-            <div class="p-1 flex-fill">
-              <ul>
-                <li id="logo">
-                  <img src="assets/images/Logo.png" alt="iGeom.logo" />
-                </li>
-                <li><button>File</button></li>
-                <li><button>Edit</button></li>
-              </ul>
-            </div>
-            <div class="p-1 flex-fill">
-              <div id="selected-document">New Document 1</div>
-            </div>
-            <div class="p-1 flex-fill"></div>
-          </div>
-        </nav>
-        <nav id="files">
-          <ul>
-            <li class="file active"><button>New Document 1</button></li>
-            <li class="file"><button>New Document 2</button></li>
-            <li class="new"><button class="new-file">+</button></li>
-          </ul>
-        </nav>
-        <div id="container"></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/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>
-  </body>
-</html>

文件差異過大導致無法顯示
+ 5189 - 0
package-lock.json


+ 14 - 3
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",

+ 5 - 0
src/.gitignore

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

+ 28 - 60
app/app.js

@@ -1,52 +1,25 @@
-var app = (function() {
-  let _width = $("#content").width();
-  let _height =
-    $("#sidebar").height() - $("#header").height() - $("#files").height() - 2;
-  let _screen = {
-    width: _width,
-    height: _height
-  };
-  let _layers = [];
-  let _currentLayers = [];
-  let _tools = [];
-  let _menu = [];
-  let _layer = undefined;
+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 _stage = new Konva.Stage({
-    container: "container",
-    width: _width,
-    height: _height
-  });
-  let _state = APP_STATE.NONE;
-
-  function _createLayer() {
-    let sequence = 0;
-    if (_layers == null || _layers.length == 0) {
-      sequence++;
-    } else {
-      sequence = _layers.length + 1;
-    }
-    let layer = { sequence: sequence, layer: new Konva.Layer() };
-    _layers.push(layer);
-    if (_currentLayer() == undefined && _currentLayers.length == 0) {
-      _currentLayers = [];
-      _currentLayers.push(layer);
-    }
-    _stage.add(layer.layer);
-    return layer;
-  }
-
+  let _stage = _createStage();
   function _bootstrap() {
-    _createLayer();
     configureStageEvents();
-    _layer = _currentLayer();
-    selector.bootstrap();
+    Selector.bootstrap();
+    requireAll(require.context("./components/", true, /\.js$/));
+    _refreshMenu();
+  }
+
+  function _createStage() {
+    return Stages.getCurrentStage();
   }
 
   function _currentLayer() {
-    if (_currentLayers[0] == undefined) return undefined;
-    return _currentLayers[0].layer;
+    return Stages.getCurrentLayer();
   }
 
   function configureStageEvents() {
@@ -108,40 +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,
-    createLayer: _createLayer,
-    screen: _screen,
     bootstrap: _bootstrap,
-    layers: _layers,
-    tools: _tools,
     setSelectedTool: _setSelectedTool,
     clearSelectedTool: _clearSelectedTool,
     getSelectedTool: _getSelectedTool,
     pos: _getRelativePointerPosition,
     setStatus: _setStatus,
     pushObject: _pushObject,
-    getObjects: _getObjects,
-    setState: _setState,
-    getState: _getState,
-    menuClick: _menuClick
+    getObjects: _getObjects
   };
 })();

+ 20 - 18
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();

+ 1 - 1
app/components/label.js

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

+ 15 - 14
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() {

+ 21 - 16
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",

+ 19 - 0
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();

+ 12 - 0
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();

+ 20 - 13
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

+ 100 - 0
src/app/core/components/stages.js

@@ -0,0 +1,100 @@
+export const stages = (function() {
+  let _width = _getWidth();
+  let _height = _getHeigth();
+  let _stage = new Object();
+  let _layer = new Object();
+  let _files = [];
+  let _layers = [];
+  function _createStage() {
+    var id = _files.length;
+    _makeTemplate(id);
+    _stage = new Konva.Stage({
+      container: `container-${id}`,
+      width: _width,
+      height: _height
+    });
+    _setStage(_stage);
+    _files.push(_stage);
+    _createLayer();
+    return _stage;
+  }
+
+  function _getStage() {
+    return _stage;
+  }
+
+  function _setStage(stage) {
+    _stage = stage;
+  }
+
+  function _createLayer() {
+    let sequence = 0;
+    if (_layers == null || _layers.length == 0) {
+      sequence++;
+    } else {
+      sequence = _layers.length + 1;
+    }
+    let layer = { sequence: sequence, layer: new Konva.Layer() };
+    _layers.push(layer);
+    if (_getCurrentLayer() == undefined && _layers.length == 0) {
+      _layers = [];
+      _layers.push(layer);
+    }
+    _layer = layer;
+    _stage.add(_layer.layer);
+    return layer;
+  }
+
+  function _getFiles() {
+    return _files;
+  }
+
+  function _getWidth() {
+    return $("#content").width();
+  }
+
+  function _getHeigth() {
+    return (
+      $("#sidebar").height() - $("#header").height() - $("#files").height() - 2
+    );
+  }
+
+  function _evenNewDocument() {
+    _createStage();
+  }
+
+  function _getCurrentLayer() {
+    return _layer.layer;
+  }
+
+  function _getCurrentLayerWithSequence() {
+    return _layer;
+  }
+
+  function _bootstrap() {
+    $("#files").empty();
+    $("body").on("click", "#new-document", _evenNewDocument);
+    _createStage();
+  }
+
+  function _makeTemplate(id) {
+    $(".stage").each(function() {
+      $(this).addClass("hidden");
+    });
+    $(".file").each(function() {
+      $(this).removeClass("active");
+    });
+    $("#stages").append(`<div id="container-${id}" class="stage"></div>`);
+    $("#files").append(
+      `<li class="file active"><button>New Document ${id + 1}</button></li>`
+    );
+  }
+
+  _bootstrap();
+  return {
+    create: _createStage,
+    getFiles: _getFiles,
+    getCurrentStage: _getStage,
+    getCurrentLayer: _getCurrentLayer
+  };
+})();

+ 14 - 0
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();

+ 5 - 0
src/app/core/enums/app-state-enum.js

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

+ 1 - 0
src/app/models/point-model.js

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

assets/images/Logo.png → src/assets/images/Logo.png


assets/images/icons/Circunference.png → src/assets/images/icons/Circunference.png


assets/images/icons/Circunference.svg → src/assets/images/icons/Circunference.svg


assets/images/icons/Line.png → src/assets/images/icons/Line.png


assets/images/icons/Line.svg → src/assets/images/icons/Line.svg


assets/images/icons/Point.png → src/assets/images/icons/Point.png


assets/images/icons/Point.svg → src/assets/images/icons/Point.svg


+ 14 - 10
css/app.css

@@ -86,13 +86,13 @@
   transition: background-color 0.5s linear;
 }
 
-#files {
+.files {
   background: #eaeaea;
   height: 32.02px;
   padding: 0px;
   margin: 0px;
 }
-#files ul,
+.files ul,
 #header ul {
   list-style: none;
   list-style-type: none;
@@ -101,7 +101,7 @@
   vertical-align: middle;
   height: 100%;
 }
-#files ul li {
+.files ul li {
   margin: 0px 10px 0px 0px;
   padding: 0px;
   font-size: 12px;
@@ -109,19 +109,19 @@
   list-style: none;
   height: 100%;
 }
-#files ul .file:hover {
+.files ul .file:hover {
   background: #e0e0e0 !important;
   color: #333333 !important;
   transition: background-color 0.3s linear;
   transition: color 0.3s linear;
 }
-#files ul .file,
-#files ul .file button {
+.files ul .file,
+.files ul .file button {
   padding: 0px;
   color: #aaaaaa;
 }
 
-#files ul .file button {
+.files ul .file button {
   border: none;
   margin: 0px;
   background: transparent;
@@ -129,19 +129,19 @@
   height: 100%;
 }
 
-#files ul .active button {
+.files ul .active button {
   background: #d4d4d4;
   color: #555555;
   margin: 0px;
 }
 
-#files ul .active {
+.files ul .active {
   background: #d4d4d4;
   color: #555555;
   margin: 0px;
 }
 
-#files ul .new button {
+.files ul .new button {
   border: none;
   padding: 0px;
   margin: -3px 0px 0px 0px;
@@ -157,3 +157,7 @@
   vertical-align: middle;
   color: #555555;
 }
+
+.hidden {
+  display: none !important;
+}

css/icons.css → src/css/icons.css


iGeom-wireframe.pdf → src/iGeom-wireframe.pdf


+ 67 - 0
src/index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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="../node_modules/bootstrap/dist/css/bootstrap.min.css"
+    />
+    <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/icons.css" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <nav id="sidebar">
+        <div id="tool-bar">
+          <h3>Tools</h3>
+          <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">
+        <nav id="header">
+          <div class="d-flex">
+            <div class="p-1 flex-fill">
+              <ul>
+                <li id="logo">
+                  <img src="assets/images/Logo.png" alt="iGeom.logo" />
+                </li>
+                <li><button>File</button></li>
+                <li><button>Edit</button></li>
+              </ul>
+            </div>
+            <div class="p-1 flex-fill">
+              <div id="selected-document">New Document 1</div>
+            </div>
+            <div class="p-1 flex-fill"></div>
+          </div>
+        </nav>
+        <nav class="files">
+          <ul>
+            <li>
+              <ul id="files">
+                <li class="file active"><button>New Document 1</button></li>
+              </ul>
+            </li>
+            <li id="new-document" class="new">
+              <button class="new-file">+</button>
+            </li>
+          </ul>
+        </nav>
+        <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="main.js"></script>
+  </body>
+</html>

文件差異過大導致無法顯示
+ 232 - 0
src/main.js


+ 28 - 0
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"
+        }
+      }
+    ]
+  }
+};