implement selector

src/app/app.js

@@ -4,9 +4,12 @@ import { objects as Objects } from "./core/application/objects";
 import { state as State } from "./core/application/state";
 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";
 export const app = (function() {
   let _selectedTool = [];
   function _bootstrap() {
+    Konva.showWarnings = false;
     Selector.bootstrap();
     requireAll(require.context("./component-registry/", true, /\.js$/));
     _refreshMenu();
@@ -17,19 +20,22 @@ export const app = (function() {
   }
 
   function _setSelectedTool(tool) {
-    _clearSelectedTool();
+    _clearSelectedTool(tool != undefined);
     _setState(APP_STATE.TOOL_SELECTED);
-    if (tool.id != undefined) {
-      document.getElementById("btn-" + tool.id).disabled = true;
+    if (tool.options.id != undefined) {
+      document.getElementById("btn-" + tool.options.id).disabled = true;
     }
     _selectedTool.push(tool);
   }
 
-  function _clearSelectedTool() {
+  function _clearSelectedTool(force) {
     let tool = _getSelectedTool();
     if (tool != undefined) {
-      if (tool.id != undefined) {
-        document.getElementById("btn-" + tool.id).disabled = false;
+      if (!force && tool.options.type == COMPONENT_TYPE.SELECTOR) {
+        return;
+      }
+      if (tool.options.id != undefined) {
+        document.getElementById("btn-" + tool.options.id).disabled = false;
       }
     }
     _selectedTool = [];

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

@@ -0,0 +1,16 @@
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+import { SelectorDrawer } from "../components/selector-component/drawers/selector-drawer";
+import { COMPONENT_TYPE } from "../core/enums/component-type-enum";
+export class SelectorComponent extends Component {
+  constructor() {
+    const options = new ComponentOptions(
+      "15d1b49619c946809fdb6922f4d7b657",
+      "Selector",
+      "selector",
+      COMPONENT_TYPE.SELECTOR
+    );
+    super(new SelectorDrawer(), options);
+  }
+}
+export const selectorComponent = new SelectorComponent();

src/app/components/selector-component/drawers/selector-drawer.js

@@ -0,0 +1,10 @@
+import { Drawer } from "../../../core/drawers/drawer";
+
+export class SelectorDrawer extends Drawer {
+  constructor() {
+    super();
+  }
+  draw(e) {
+    return;
+  }
+}

src/app/core/application/selector.js

@@ -4,6 +4,7 @@ import { state as State } from "../application/state";
 import { objects as Objects } from "../application/objects";
 import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
 import { app as App } from "../../app";
+import { COMPONENT_TYPE } from "../enums/component-type-enum";
 export class Selector {
   constructor() {
     this._selectorPosStart;
@@ -209,6 +210,10 @@ export class Selector {
   }
 
   start(event) {
+    const tool = App.getSelectedTool();
+    if (tool == undefined || tool.options.type != COMPONENT_TYPE.SELECTOR) {
+      return;
+    }
     const pos = {
       x: undefined,
       y: undefined
@@ -225,6 +230,10 @@ export class Selector {
     this.startDragSelector(pos);
   }
   move(event) {
+    const tool = App.getSelectedTool();
+    if (tool == undefined || tool.options.type != COMPONENT_TYPE.SELECTOR) {
+      return;
+    }
     const pos = {
       x: undefined,
       y: undefined

src/app/core/enums/component-type-enum.js

@@ -0,0 +1,4 @@
+export const COMPONENT_TYPE = {
+  ELEMENT_DRAWER: 0,
+  SELECTOR: 1
+};

src/app/core/models/components/component-options.js

@@ -1,8 +1,14 @@
+import { COMPONENT_TYPE } from "../../enums/component-type-enum";
+
 export class ComponentOptions {
-  constructor(id, title, icon) {
+  constructor(id, title, icon, componentType) {
     this.id = id;
     this.title = title;
     this.icon = icon;
     this.description;
+    this.type =
+      componentType == undefined
+        ? COMPONENT_TYPE.ELEMENT_DRAWER
+        : componentType;
   }
 }

src/app/core/models/components/component.js

@@ -3,7 +3,6 @@ import { app as App } from "../../../app";
 export class Component {
   constructor(drawer, options) {
     this.options = options;
-    // this.genericObject;
     this.states;
     this.drawer;
     this.state;

src/assets/images/icons/Selector.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #464646;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <g id="Selector">
+    <path id="Rounded_Rectangle_1" data-name="Rounded Rectangle 1" class="cls-1" d="M577.572,12.236l0.609-.251a0.331,0.331,0,0,1,.431.182L584.39,26.3a0.332,0.332,0,0,1-.179.432l-0.609.251a0.331,0.331,0,0,1-.431-0.182l-5.778-14.129A0.332,0.332,0,0,1,577.572,12.236Zm-2.565,12.246L576.7,9,587.987,19.7l-7.69-.879Z" transform="translate(-560)"/>
+  </g>
+</svg>

src/css/app.css

@@ -33,7 +33,7 @@
   transition: border-color 1s linear;
   transition: border-size 1s linear;
   opacity: 1;
-  border: 1.3px solid #9bc364;
+  border: 2px solid #9bc364;
   color: #333333;
 }
 

src/css/icons.css

@@ -17,3 +17,7 @@
 .icon-intersection {
   background-image: url("../assets/images/icons/Intersection.png");
 }
+
+.icon-selector {
+  background-image: url("../assets/images/icons/Selector.png");
+}