diff --git a/gcode/index.html b/gcode/index.html index 38db1af..200f16d 100644 --- a/gcode/index.html +++ b/gcode/index.html @@ -17,10 +17,11 @@ #gcss { outline: 2px solid blue; + position: relative; } .Gline { - position: relative; + position: absolute; background-color: var(--line-backgroundColor); } @@ -28,10 +29,17 @@ 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; } diff --git a/gcode/main.js b/gcode/main.js index 0807caa..2444335 100644 --- a/gcode/main.js +++ b/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, diff --git a/gcode/src/API/GcodeApi/Gcommands/G/G0.js b/gcode/src/API/GcodeApi/Gcommands/G/G0.js index 038b657..d73c500 100644 --- a/gcode/src/API/GcodeApi/Gcommands/G/G0.js +++ b/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(); } diff --git a/gcode/src/API/GcodeApi/Gcommands/other/Methods/MoveTo/MoveTo.js b/gcode/src/API/GcodeApi/Gcommands/other/Methods/MoveTo/MoveTo.js index 72af410..73d9a18 100644 --- a/gcode/src/API/GcodeApi/Gcommands/other/Methods/MoveTo/MoveTo.js +++ b/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; } } diff --git a/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js b/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js index c4e78f7..ec0e969 100644 --- a/gcode/src/API/GcodeApi/Gsimulator/Gcss/CssLine/CssLine.js +++ b/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", }; diff --git a/gcode/src/API/GcodeApi/Gsimulator/Gcss/Gcss.js b/gcode/src/API/GcodeApi/Gsimulator/Gcss/Gcss.js index d08f536..9822035 100644 --- a/gcode/src/API/GcodeApi/Gsimulator/Gcss/Gcss.js +++ b/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() {