[+] Editor controls

src/animation/Config.ts

@@ -20,7 +20,10 @@ export const config = {
     cursor: {radius: 2, width: 0.3, color: new Color('#333')},
 
     // Debug mode
-    debug: true
+    debug: false,
+
+    // Edit mode
+    editMode: true
 }
 
 export const colors = {

src/animation/Home.ts

@@ -34,11 +34,11 @@ function init(): void
     objects.box = lineSegments
     scene.add(lineSegments)
 
-    scene.add(circle(0xffff00, 0, 5))
+    // scene.add(circle(0xffff00, 0, 5))
-    scene.add(circle(0xff00ff, 1, 4))
+    // scene.add(circle(0xff00ff, 1, 4))
-    scene.add(circle(0x0000ff, 2, 3))
+    // scene.add(circle(0x0000ff, 2, 3))
-    scene.add(circle(0x00ffff, 3, 2))
+    // scene.add(circle(0x00ffff, 3, 2))
-    scene.add(circle(0xff0000, 4, 1))
+    // scene.add(circle(0xff0000, 4, 1))
 }
 
 // Buffer for smooth update

src/views/NewHome.vue

@@ -1,16 +1,24 @@
 <template>
     <div id="NewHome">
         <canvas id="three"></canvas>
+
+        <!-- Editor controls -->
+        <div id="editor-controls" class="fbox-vcenter">
+            <span>Editor</span>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import {start} from "@/animation/Home";
+import {config} from "@/animation/Config";
 
 @Options({components: {}})
 export default class NewHome extends Vue
 {
+    editMode = config.editMode
+
     mounted(): void
     {
         start('three')
@@ -27,4 +35,18 @@ export default class NewHome extends Vue
     left: 0
     z-index: 1
     cursor: none
+
+#editor-controls
+    position: absolute
+    top: 20px
+    left: 0
+    z-index: 2
+
+    height: 50px
+    width: calc(100vw - 100px)
+    margin-left: 50px
+    border-radius: 50px
+
+    color: #ffeedb
+    background-image: linear-gradient(180deg, #000000 0%, #434343 100%)
 </style>