Releases · Laaouatni/gcode.js

key	value_before	value_after
Performance	⚠️ 89%	✅ 100%
First Contentful Paint	⚠️ 2.3s	✅ 0.9s
Time to Interactive	✅ 2.3s	✅ 0.9s
Speed Index	❌ 6.6s	✅ 1.8s
Total Blocking Time	✅ 0ms	✅ 0ms
Largest Contentful Paint	✅ 2.3s	✅ 0.9s
Cumulative Layout Shift	✅ 0	✅ 0.002

since <canvas> seems a little bit difficult to make it custom to me.
I suggest using the classic way, so use native CSS instead.
all the information for this implementation needs to be done
- inside a new class called Gcss.js
- this means all the functionalities need to be done from scratch (zero)
  - but one of the advantages in the end:
  - is completely animated using CSS transitions, or CSS animations keyframes
  - colors, background, etc... can be used to make it more custom.
the Gcss implementation needs to
- have a height/width chosen by the user (like canvas)
  - if the user in the OBJ parameter
    - inserted a height (number, without "px"), then set the height correctly
    - if isn't inserted correctly, then use the width for the height (for making a perfect square)
    - the same logic for also width (and get the height, and so on...)
    - ... if anything isn't inserted by the user, use a default 500px (we can decrease or change that value in the future, for now, 500 is ok)
- have the possibility to choose what is the parent element:
  - if the parent element isn't settled then we will use #app (at least in react, and vite its default parent)
  - if #app isn't existing then we will use <body> that always exists in normal HTML.
create a new <div> where all the logic will be inside that (like canvas)
that <div> needs to have an ID:
- at least for now is ID, in the future maybe a class
- for making the user change some properties in CSS easily. (like box-shadow, or border-radius, etc...)
inside the div, we need to have the possibility to draw lines
- and since lines that some data inside every one of them:
  - I suggest using a new class called Line
    - at every created line with the new keyword:
      - create a new line element with the document.createElement("div")
        
        now you can store that element, inside a this. called this.lineElement
        
        once we are stored this, we can use the lineElement to do all the logic we want inside the same class (accessing directly the line)
    - the Line, need to get also 2 OBJs to calculate:
      - this.currentObj
      - this.previusObj
        
        you can get it by using the array[] GcodeAPI and decreasing by one the index and get that.
    - for getting the length of the line:
      - we need to check 3 conditions:
        
        is moving on the X axis only?
        
        is moving on the Y axis only?
        
        is moving on both X/Y?
        
        this is more difficult to calculate since we need to use some triangle formulas.
        
        in this case pitagora formula can work fine for getting the hypotenuse.
        
        with code, we will use Math built-in APIs:
        
        Math.sqrt() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt
        
        Math.pow() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
        
        is not moving? (if not moving then return a simple 0)
    - for getting the angle:
      - in the calcolateLenght() logic,
        
        add 3 this. boolean variables (that can be true or false):
        
        this.sameX if is moving on Y
        
        this.sameY is moving on X
        
        all these 2 of before to true if we use the triangle formula (for oblique movements)
    - the user doesn't need to manually get the height and do things:
      - we need to create another method called generate:
        
        this will loop on all GcodeAPI.array and inside it call this.DrawLine()
        
        GcodeAPI.array.forEach((_posObj, _index) => { this.drawLine(_posObj, _index); });
        
        As you see INDEX is important here, so we can get the actualOBJ and previusOBJ easily inside the class.
  - every method that has a complex logic
    - needs to be in a separate file,
    - then exported with default
    - and then get imported when it's needed by passing some parameters (we need in the future dedicated docs for telling what parameters to use, and what not),
    - to not make it easy to change the correct code, only if he wants to
    - and easy to integrate one logic inside the parent class or any other thing in the future.
also we need to add a key="" attribute in HTML for every line.
- the key needs a number, and that number is the index. (the first element is 0)

<div key="0"></div>
<div key="1"></div>

- then we can use the key in a ::before CSS pseudoelement:

 .Gline::before {
     content: attr(key);
}

- the before element needs to be at the end of the line
- and centered to the point of the end using translate(-50%, -50%)
the CSS doesn't need to directly change the style:
- but all the CSS properties need to be a CSS var (so the user can change when he wants or modify them easily)

<div style="--line-color: red; --line-width: 100px; --line-helloworld: 10px;"></div>

on the div, we need to add a data-line attribute
- that needs to contain an OBJ
  - with the data
  - data to display on hover in the popup.
  - also the obj needs to be prettified so have some tabs/spaces before.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Releases: Laaouatni/gcode.js

improved speed by 20%

fix #35 angle issues / right and bottom issues now are solved

popup now transition when hover another Gline

added line animation on generate

fix zIndex bug in popup, and popup go outside parentDiv bug solved.

new DEMO example +CSS files now are in different files

Popup don't need to be writed in html. but automatically generated

Popup on hover with data

fix #17 MoveTo have inverted bottom, top (top is doing the bottom functionality, and viceversa)

Css Visualiser/Simulator