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

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

@@ -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

@@ -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);
 

src/Components/interfaces.ts

@@ -3,9 +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);
@@ -218,7 +217,8 @@ class Graphica {
     if (component.draggable !== undefined) {
       this.draggables.push(component);
     }
-    component.setZIndex(1 + this.components.length);
+    component.setZIndex(2 + this.components.length);
+
     this.scene.add(component);
     // Add draggable functionality to draggable components
 

src/index.ts

@@ -1,58 +1,20 @@
-// export { default as Graphica } from "./Graphica";
-// export { default as Arc } from "./Components/Arc";
-// export { default as Bracket } from "./Components/Bracket";
-// export { default as Button } from "./Components/Button";
-// export { default as Circle } from "./Components/Circle";
-// export { default as Grid } from "./Components/Grid";
-// export { default as InfiniteLine } from "./Components/InfiniteLine";
-// export { default as InputField } from "./Components/InputField";
-// export { default as Label } from "./Components/Label";
-// export { default as Latex } from "./Components/Latex";
-// export { default as Line } from "./Components/Line";
-// export { default as Plot } from "./Components/Plot";
-// export { default as Point } from "./Components/Point";
-// export { default as Polygon } from "./Components/Shape";
-// export { default as Slider } from "./Components/Slider";
-// export { default as Text } from "./Components/Text";
-// export { default as Vector } from "./Components/Vector";
-// export { default as Fraction } from "./Components/Derived/Fraction";
-// export { default as SVGLoader } from "./Components/SVGLoader";
-// export * as three from "three";
-
-import { Vector2, Vector3 } from "three";
-import Arc from "./Components/Arc";
-import Grid from "./Components/Grid";
-import Label from "./Components/Label";
-import Line from "./Components/Line";
-import Point from "./Components/Point";
-import Polygon from "./Components/Shape";
-import Vector from "./Components/Vector";
-import Graphica from "./Graphica";
-import Fraction from "./Components/Derived/Fraction";
-import Circle from "./Components/Circle";
-
-const g = new Graphica();
-const gg = new Grid();
-const line = new Line([0, 0], [5, 5], { draggable: "unrestricted" });
-
-const pp = new Point(0, 0, { draggable: "unrestricted", label: true });
-const pp2 = new Point(0, 1, { draggable: "unrestricted" });
-const s = new Circle(5, 5, 50);
-const c = new Polygon(
-  [
-    [0, 0],
-    [1, 0],
-    [1, 1],
-    [0, 1],
-  ],
-  { draggable: "unrestricted" }
-);
-
-g.add(gg);
-g.add(s);
-g.add(c);
-g.add(line);
-g.add(pp);
-g.add(pp2);
-
-g.run(() => {});
+export { default as Graphica } from "./Graphica";
+export { default as Arc } from "./Components/Arc";
+export { default as Bracket } from "./Components/Bracket";
+export { default as Button } from "./Components/Button";
+export { default as Circle } from "./Components/Circle";
+export { default as Grid } from "./Components/Grid";
+export { default as InfiniteLine } from "./Components/InfiniteLine";
+export { default as InputField } from "./Components/InputField";
+export { default as Label } from "./Components/Label";
+export { default as Latex } from "./Components/Latex";
+export { default as Line } from "./Components/Line";
+export { default as Plot } from "./Components/Plot";
+export { default as Point } from "./Components/Point";
+export { default as Polygon } from "./Components/Shape";
+export { default as Slider } from "./Components/Slider";
+export { default as Text } from "./Components/Text";
+export { default as Vector } from "./Components/Vector";
+export { default as Fraction } from "./Components/Derived/Fraction";
+export { default as SVGLoader } from "./Components/SVGLoader";
+export * as three from "three";