Merge pull request #18 from Laaouatni/moveTo-positioning-isn't-correc…

…t,-solving-it

fix: #17 Move to positioning isn't correct, solving it

gcode/index.html

@@ -17,21 +17,29 @@
 
       #gcss {
         outline: 2px solid blue;
+        position: relative;
       }
 
       .Gline {
-        position: relative;
+        position: absolute;
         background-color: var(--line-backgroundColor);
       }
 
       .Gline {
         width: var(--line-width);
         height: var(--line-height);
       }
+
+      /* .Gline:nth-child(1) {
+        --line-0-translateY: calc(var(--line-translateY) + var(--line-height));
+        transform: translate(var(--line-translateX), var(--line-0-translateY)) rotate(var(--line-rotate));
+      } */
 
       .Gline {
         transform-origin: top left;
-        transform: translate(var(--line-translateX), var(--line-translateY)) rotate(var(--line-rotate));
+        top: var(--line-top);
+        left: var(--line-left);
+        transform: rotate(var(--line-rotate));
       }
 
       .Gline::before {
@@ -57,8 +65,9 @@
       .Gline::before {
         position: absolute;
         top: 50%;
-        left: 0;
-        transform: translate(-50%, -50%);
+        right: 0;
+        transform: translate(0, -50%);
+        z-index: 5 !important;
       }
 
       .Gline::before {
@@ -83,8 +92,8 @@
         --rotate-correction: calc(var(--line-rotate) * -1);
         position: absolute;
         top: 0;
-        left: 0;
-        transform: translate(0, 0) rotate(var(--rotate-correction));
+        right: 0;
+        transform: rotate(var(--rotate-correction));
         transform-origin: top left;
       }
 

gcode/main.js

@@ -5,11 +5,15 @@ import Gcss from "./src/API/GcodeApi/Gsimulator/Gcss/Gcss.js";
 
 let a = new G0({ x: 10, y: 10 });
 
-a.moveTo({ left: 50, bottom: 20 });
-a.moveTo({ left: 100, bottom: 90 });
-a.moveTo({ bottom: 130 });
+a.moveTo({ left: 50});
+a.moveTo({ left: 100 })
+a.moveTo({left: 200})
 
+// 10, 10. 0
 
+// 60, 10
+
+// 160, -80
 
 let g = new Gcss({
   width: 500,

gcode/src/API/GcodeApi/Gcommands/G/G0.js

@@ -9,6 +9,8 @@ export default class G0 extends Gcommands {
 
   moveTo(_transformObj) {
     this.newCoordTo = new MoveTo(this, _transformObj).getResult();
+
+    console.log(_transformObj,this.newCoordTo)
 
     return new G0(this.newCoordTo).getCode();
   }

gcode/src/API/GcodeApi/Gcommands/other/Methods/MoveTo/MoveTo.js

@@ -7,26 +7,29 @@ export default class MoveTo {
     this.PositionChoosed = new PositionSpecificy(
       _transformObj,
     ).getChoosedDirection();
+
+    this.previusX = GcodeAPI.previusX ?? _this.x;
+    this.previusY = GcodeAPI.previusY ?? _this.y;
 
     this.toX = () => {
-      switch(this.PositionChoosed.x) {
+      switch (this.PositionChoosed.x) {
         case "left":
-          return _this.x + new DirectionValues(_transformObj).left;
+          return this.previusX + new DirectionValues(_transformObj).left;
         case "right":
-          return _this.x - new DirectionValues(_transformObj).right;
+          return this.previusX - new DirectionValues(_transformObj).right;
         default:
-          return GcodeAPI.previusX ?? _this.x;
+          return this.previusX;
       }
     }
 
     this.toY = () => {
       switch(this.PositionChoosed.y) {
         case "bottom":
-          return _this.y + new DirectionValues(_transformObj).bottom;
+          return this.previusY - new DirectionValues(_transformObj).bottom;
         case "top":
-          return _this.y - new DirectionValues(_transformObj).top;
+          return this.previusY + new DirectionValues(_transformObj).top;
         default:
-          return GcodeAPI.previusY ?? _this.y;
+          return this.previusY;
       }
     }
 

gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js

@@ -2,7 +2,7 @@ import GcodeAPI from "../../../GcodeAPI_main/GcodeAPI.js";
 import CssLineLength from "../other/Methods/CssLineLength/CssLineLength.js";
 import CssLineAngle from "../other/Methods/CssLineAngle/CssLineAngle.js";
 
-export default class Cssline {
+export default class CssLine {
   constructor(_CurrentObj, _index) {
     this.index = _index;
     this.lineElement = document.createElement("div");
@@ -48,8 +48,8 @@ export default class Cssline {
     this.lineStylesObj = {
       width: `${this.lineLength}px`,
       height: `${this.lineHeight}px`,
-      translateX: `${this.smallestPos.x}px`,
-      translateY: `${this.smallestPos.y}px`,
+      left: `${this.smallestPos.x}px`,
+      top: `${this.smallestPos.y}px`,
       rotate: `${this.lineAngle}deg`,
       backgroundColor: "red",
     };

gcode/src/API/GcodeApi/Gsimulator/Gcss/Gcss.js

@@ -33,9 +33,7 @@ export default class Gcss extends Gsimulator {
   drawLine(_CurrentObj, _index) {
     this.CssLineClass = new CssLine(_CurrentObj, _index);
 
-    if (_index > 0) {
-      this.cssContainer.appendChild(this.CssLineClass.lineElement);
-    }
+    this.cssContainer.appendChild(this.CssLineClass.lineElement);
   }
 
   generate() {