首頁 探索 說明
登入
victordomingues
/
poc-igeom
1
1
複刻 0
檔案 問題管理 1 合併請求 0 Wiki
瀏覽代碼

Merge branch 'release/1.0.0'

Victor Luiz Domingues 5 年之前
父節點
448034421d 250423e4b1
當前提交
fe5e98c57a
共有 32 個文件被更改，包括 5812 次插入 和 319 次删除
分割檢視 顯示文件統計
  1. 3 0
      .babelrc
  2. 4 88
      .gitignore
  3. 0 7
      app/core/enums/app-state-enum.js
  4. 0 89
      index.html
  5. 5189 0
      package-lock.json
  6. 14 3
      package.json
  7. 5 0
      src/.gitignore
  8. 28 60
      app/app.js
  9. 20 18
      app/components/circumference.js
  10. 1 1
      app/components/label.js
  11. 15 14
      app/components/line.js
  12. 21 16
      app/components/point.js
  13. 19 0
      src/app/core/components/menu.js
  14. 12 0
      src/app/core/components/objects.js
  15. 20 13
      app/core/components/selector.js
  16. 100 0
      src/app/core/components/stages.js
  17. 14 0
      src/app/core/components/state.js
  18. 5 0
      src/app/core/enums/app-state-enum.js
  19. 1 0
      src/app/models/point-model.js
  20. 0 0
      src/assets/images/Logo.png
  21. 0 0
      src/assets/images/icons/Circunference.png
  22. 0 0
      src/assets/images/icons/Circunference.svg
  23. 0 0
      src/assets/images/icons/Line.png
  24. 0 0
      src/assets/images/icons/Line.svg
  25. 0 0
      src/assets/images/icons/Point.png
  26. 0 0
      src/assets/images/icons/Point.svg
  27. 14 10
      css/app.css
  28. 0 0
      src/css/icons.css
  29. 0 0
      src/iGeom-wireframe.pdf
  30. 67 0
      src/index.html
  31. 232 0
      src/main.js
  32. 28 0
      webpack.config.js

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