drawing pseudoadiabatic lines not Moving with mouse

[HadjerSahariYassir]

Hi Chird, Hope you're doing well. I'm always trying to draw/move the thermodynamic lines, now i'm with the last one ( pseudo adiabatic ). i have followed your code to draw the pseudoadiabatic line , starting with calculating thetae( equipotential temperature) ,but i have issue the line is not drawn where mouse is put and in some places( specially in the right bottom ) the line is not drawn there . it seems because x and y are changing with equipotential temperature .

and here is the code :

 const plotPseudoaDiabats = (tdTermo, sounding) => {
      const tdDiagram = tdTermo.diagram;
      const tdGroup = tdTermo.diagram.svgNode.group();
      tdDiagram.on("mousemove", (p) => {  
        tdGroup.clear();
        const pres = p.diagramPres;
        const level = sounding.getNearestLevel(pres);
        const levelData = sounding.getData(level);
        const thetaeKelvin = equiPotentialTempByTempAndDewpointAndPres(levelData.tmpk, levelData.dwpk, levelData.pres);
        const maxPressure = 1050;
        const minPressure = 100;
        let y0 =
          Math.max(
            0,
            (maxPressure === undefined)
              ? 0
              : tdDiagram.coordinateSystem.getYByPEquiPotTemp(
                maxPressure, thetaeKelvin)
          );
      
        const x0 = tdDiagram.coordinateSystem.getXByYEquiPotTemp(y0, thetaeKelvin);
        let y1 = Math.min(
                  tdDiagram.coordinateSystem.height,
                  (minPressure === undefined) ?
                    tdDiagram.coordinateSystem.height :
                    tdDiagram.coordinateSystem.getYByPEquiPotTemp(minPressure, thetaeKelvin));
        const x1 = tdDiagram.coordinateSystem.getXByYEquiPotTemp(y1, thetaeKelvin);
        let points = [[ x0 , y0 ]];
        let yInterval = 10;
        for( let y=y0+yInterval; y<y1; y+=yInterval) {
            points.push([
                tdDiagram.coordinateSystem.getXByYEquiPotTemp(y, thetaeKelvin), y ]);
          }
        points.push([ x1 , y1]);  
        tdGroup.polyline(points.map(function (point) {
             point[1] = tdDiagram.height - point[1];
                  return point;
           }, tdDiagram)).fill('none').stroke({ width: 1, color: 'red', dasharray: [5,5] });
          });     
     }

so if you can help me to find the issue i would be grateful.

[chird]

Hi hadjersh97, Today I found time to check your issue. The following code works for me:

  const tdDiagram = tdTermo.diagram;
  const tdGroup = tdDiagram.svgNode.group();
  tdDiagram.on('mousemove', ({ diagramPres, diagramTmpk }) => {
    tdGroup.clear();
    const thetaeAtPointer = equiPotentialTempByTempAndDewpointAndPres(diagramTmpk, diagramTmpk, diagramPres);
    const y0 = 0;
    const y1 = tdDiagram.coordinateSystem.height;
    const x0 = tdDiagram.coordinateSystem.getXByYEquiPotTemp(y0, thetaeAtPointer);
    const x1 = tdDiagram.coordinateSystem.getXByYEquiPotTemp(y1, thetaeAtPointer);
    const thetaePolyline = [[x0, y0]];
    const yInterval = 10;
    for (let y=y0+yInterval; y<y1; y+=yInterval) {
      thetaePolyline.push([
      tdDiagram.coordinateSystem.getXByYEquiPotTemp(y, thetaeAtPointer),
        y
      ]);
    }
    thetaePolyline.push([x1, y1]);
    tdGroup
      .polyline(thetaePolyline.map(point => {
        point[1] = tdDiagram.coordinateSystem.height - point[1];
        return point;
      }))
      .fill('none')
      .stroke({ width: 1, color: 'red', dasharray: [5,5] });
  });

If you use getNearestLevel() you will get a pseudoadiabat crossing the sounding near a pressure level of the mouse.

Again, this has not a very good performance. Probably a higher yIntervalwill be sufficient to get a good enough performance.

I hope this helps.

[HadjerSahariYassir]

Hi Chird, yes thank you so much it's working. and i will take these notes in consideration. You have no idea how much you helped me !