Implement z layer (#61)

* Initial z layering commit

* Z-layer working with exception of line, bug needs to be fixed

* Working movable line

* Working draggable line and z index sorting based on last add.

src/Components/Circle.ts

@@ -12,18 +12,19 @@ import {
 import { Collider, Component } from "./interfaces";
 
 export type CircleOptions = {
-  color?: number;
-  segments?: number;
+  color: number;
+  segments: number;
 };
 
 export const defaultShapeOptions: CircleOptions = {
   color: 0xfaa307,
-  segments: 64,
+  segments: 128,
 };
 
 class Circle extends Component implements Collider {
   radius: number;
   _strokeMesh: Mesh;
+  segments: number;
 
   constructor(x = 0, y = 0, radius = 30, options?: CircleOptions) {
     super();
@@ -37,7 +38,8 @@ class Circle extends Component implements Collider {
       transparent: true,
       opacity: 0.5,
     });
-    const strokeGeometry = new RingGeometry(radius - 1, radius, 50);
+    this.segments = segments;
+    const strokeGeometry = new RingGeometry(radius - 1, radius, this.segments);
     const strokeMaterial = new MeshBasicMaterial({ color: "#080007" });
     // set mesh of the point instance
     const circleMesh = new Mesh(geometry, material);
@@ -81,7 +83,7 @@ class Circle extends Component implements Collider {
     this._strokeMesh.geometry = new RingGeometry(
       this.radius - 4 / camera.zoom,
       this.radius,
-      50
+      this.segments
     );
   }
 }

src/Components/Grid.ts

@@ -290,6 +290,10 @@ class Grid extends Component {
       window.innerHeight
     );
   }
+
+  public setZIndex(): void {
+    this.position.setZ(1);
+  }
 }
 
 export default Grid;

src/Components/Line.ts

@@ -119,10 +119,10 @@ class Line extends Component implements Collider {
     (this.geometry as LineGeometry).setPositions([
       startPosition.x,
       startPosition.y,
-      1.1,
+      this.position.z,
       endPosition.x,
       endPosition.y,
-      1.1,
+      this.position.z,
     ]);
 
     if (arrowhead) {
@@ -160,10 +160,10 @@ class Line extends Component implements Collider {
     (this.geometry as LineGeometry).setPositions([
       startPosition.x,
       startPosition.y,
-      1.1,
+      this.position.z,
       endPosition.x,
       endPosition.y,
-      1.1,
+      this.position.z,
     ]);
   }
 
@@ -180,6 +180,10 @@ class Line extends Component implements Collider {
     this.end = end;
   }
 
+  public setZIndex(z: number): void {
+    this.position.setZ(z - 3);
+  }
+
   update(camera: OrthographicCamera) {
     this.updateGeometry(this.start, this.end, this.arrowhead, camera);
   }

src/Components/Point.ts

@@ -45,12 +45,12 @@ class Point extends Component implements Collider, DragListener<Point> {
     // set mesh of the point instance
     const circleMesh = new Mesh(geometry, material);
     const strokeMesh = new Mesh(strokeGeometry, strokeMaterial);
-    strokeMesh.position.set(0, 0, -0.1);
+    strokeMesh.position.set(0, 0, this.position.z - 0.01);
     this.geometry = circleMesh.geometry;
     this.material = circleMesh.material;
     this.add(strokeMesh);
     // set position of the mesh
-    this.position.set(x, y, 2);
+    this.position.set(x, y, this.position.z);
     this.dragListeners = dragListeners ?? [];
 
     if (label) {
@@ -115,5 +115,9 @@ class Point extends Component implements Collider, DragListener<Point> {
   update(camera: THREE.OrthographicCamera) {
     this.scale.set(1 / camera.zoom, 1 / camera.zoom, 1);
   }
+
+  public setPosition(x: number, y: number) {
+    this.position.set(x, y, this.position.z);
+  }
 }
 export default Point;

src/Components/SVGLoader.ts

@@ -35,10 +35,10 @@ class SVG extends Component {
               ? path.userData?.style.stroke
               : 0x000000;
 
-          const strokeWidth =
-            path.userData?.style.strokeWidth !== undefined
-              ? path.userData?.style.strokeWidth
-              : 1;
+          // const strokeWidth =
+          //   path.userData?.style.strokeWidth !== undefined
+          //     ? path.userData?.style.strokeWidth
+          //     : 1;
 
           const shapes = SVGLoader.createShapes(path);
 
@@ -66,8 +66,6 @@ class SVG extends Component {
                 resolution: new Vector2(window.innerWidth, window.innerHeight),
               });
               const line = new Line2(strokeGeometry, material);
-              console.log(shape.getPoints());
-              console.log(strokeWidth);
               group.add(line);
             }
           }

src/Components/Shape.ts

@@ -62,7 +62,6 @@ class Polygon extends Component implements Collider, DragListener<Polygon> {
     mesh.scale.set(1, 1, 1);
     this.geometry = mesh.geometry;
     this.material = mesh.material;
-    this.position.setZ(1.5);
 
     const group = new Group();
     const lines = [];
@@ -76,13 +75,13 @@ class Polygon extends Component implements Collider, DragListener<Polygon> {
     lines.push([lastVertex, firstVertex]);
 
     lines.forEach((l) => {
-      group.add(
-        new Line(l[0], l[1], {
-          color: 0x080007,
-          opacity: opacity,
-          draggable: undefined,
-        })
-      );
+      const a = new Line(l[0], l[1], {
+        color: 0x080007,
+        opacity: opacity,
+        draggable: undefined,
+      });
+      a.position.setZ(this.position.z + 0.01);
+      group.add(a);
     });
     this.add(group);
     this.object = group;

src/Components/interfaces.ts

@@ -3,6 +3,18 @@ import { OrthographicCamera, Mesh, Object3D } from "three";
 export class Component extends Mesh {
   draggable: Draggable;
   is_dragged: boolean;
+  getX(): number {
+    return this.position.x;
+  }
+  getY(): number {
+    return this.position.y;
+  }
+  setZIndex(z: number): void {
+    this.position.setZ(z);
+  }
+  getZIndex(): number {
+    return this.position.z;
+  }
   update?(camera: OrthographicCamera): void;
   onWindowResize?(): void;
   dragUpdate?(): void;

src/Graphica.ts

@@ -81,7 +81,6 @@ class Graphica {
     this.renderer.setSize(window.innerWidth, window.innerHeight); // TODO: The size should be adaptive
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.renderer.setClearAlpha(0);
-
     this.guiRoot = document.createElement("div");
     this.guiRoot.className = "gui";
     root.appendChild(this.guiRoot);
@@ -104,7 +103,7 @@ class Graphica {
     );
     // this.camera.position.setX(toVector2(defaultPosition).x);
     // this.camera.position.setY(toVector2(defaultPosition).y);
-    this.camera.position.setZ(5);
+    this.camera.position.setZ(1000);
 
     this.camera.zoom = defaultZoom;
     this.camera.updateProjectionMatrix();
@@ -214,12 +213,14 @@ class Graphica {
   }
 
   add(component: Component) {
-    this.scene.add(component);
-    // Add draggable functionality to draggable components
+    this.components.push(component);
     if (component.draggable !== undefined) {
       this.draggables.push(component);
     }
-    this.components.push(component);
+    component.setZIndex(2 + this.components.length);
+
+    this.scene.add(component);
+    // Add draggable functionality to draggable components
 
     this.scene.traverse((child: Object3D) => {
       if (!(child instanceof Component)) {