Canvas Simulator

I will add details in the future...

save all created G0/G1 in a array on ParentClass

• we need to implement this:
  • when the user calls a class by using new (for example new G0({});)
  • then we need to push the chosen class inside an array (that need to be inside Parent Class)
  • the array needs to not be reset, but have always its values (for solving this we can use a static variable)

---

why do we need to create this array?

this array is needed because in the future we can use it to make a simulator (with native canvas APIs, or CSS libraries)

in the end, we can have in the array something like this:

// [{...}, {...}, {...}, {...}]

that we can iterate on it with for loop or something similar to create something more interesting:

array.forEach(obj => console.log(obj.x););

---

also Make sure other methods are inside separate files if you can (not important, but if you can is better)

add `vite.js` library in our `index.html`

add vite.js to the example HTML project

• https://vitejs.dev/

MoveTo() method

• a new method needs to be created called moveTo()

• moveTo() get as paramters:

  • an object of some data (similar to CSS):

    • left or right:

      • this need to be similar to how the position CSS property work in CSS language (but in javascript)
      • change Position on X axis:
        • left add the number as value to the current X position
        • right subtract the number as value to the current X position
      • if there are 2 contrasting keywords such as {left: 10, right: 20}:
        • ✅we must take the last key into consideration
        • ❌without using the first (as happens in the CSS language)

    • top or bottom:

      • this need to be similar to how the position CSS property work in CSS language (but in javascript)
      • change Position on Y axis:
        • bottom add the number as value to the current X position
        • top subtract the number as value to the current X position
      • if there are 2 contrasting keywords such as {top: 10, bottom: 20}:
        • ✅we must take the last key into consideration
        • ❌without using the first (as happens in the CSS language)

why we want to use the CSS naming convention in our project?

this is because it will make the program easier to understand for who know already CSS.


also the concept of last get used, is called Specificy in CSS (you can search about it in MDN)

try create a separate class for the specificy logic.

⚠️ for now make this only relative

but in the future, maybe we can use absolute if we create G54 class (but isn't in the plan for now)

• for implementing relatively Z position moving:
  • use a key in the object called zIndex that seems more readible to me.
  • same logic as the previous ones, but zIndex don't have constrasting keywords (so it will be easy to implement)

---

• all the files should be tested

  • at least for now with console.log()s manually
    
    then I think we can use vitest or jest external library to test (but is not planned at least at the moment)

• the tests need to have also a for loop testing for the moveTo() method

• also put a boolean var that if is true then it make the tests start, or if are false to not start

X, Y, Z with Previous Coordinate

• in this project we need to use class();, so it will not be repetitive and also customizable

• the code needs to be split into other files, so every file does one thing or has one class()

• the program needs to have some CNC Gcode commands like:

  • G0
  • G1

• syntax needs to be like this:

  • new G1();

• the Gcode class command (like G0 or G1) needs to get these parameters:

  • X coordinate
  • Y coordinate
  • Z coordinate

• not all parameters are necessary:

  • for example, I can give the X and Y values, but not the Z value (if I only need 2d moves).

• the order of parameters isn't important

  • this means that the user doesn't need to write always with X, Y, and Z order.
    • this is the following order of parameters to support:

      • X, "", ""

      • X, Y, ""

      • X, Y, Z

      • Y, "", ""

      • Y, X, ""

      • Y, X, Z

      • Y, Z, X

      • Y, Z, ""

      • Z, "", ""

      • Z, X, ""

      • Z, X, Y

      • Z, Y, X

      • Z, Y, ""

• if a coordinate isn't defined:

  • then we need to set that "X or Y or Z" to the "previous value" that was written by the user
  • if the previous value there isn't:
    • then we will set that value to ZERO (0)

• every time that we get the code from our API we need to set the last position X or Y or Z to the last value written by the user.

• getCode() need to return a string like this: G1 X10 Y20 Z0

  • here the order is important!
    • the user can use the order that he wants, but the script needs to return the correct order.