fixed letters placment and orientation

scripttypo.js

@@ -227,22 +227,22 @@ function drawHeaderText() {
 // }
 
 // Choisir le contour de sortie : celui qui termine le plus à droite
-function getExitPoint(contours) {
-  console.log('getExitPoint', contours);
-  let exitPt = null;
-  console.log('Infinity', Infinity);
-  let maxX = -Infinity;
-  contours.forEach(contour => {
-      console.log('contour', contour);
-      if (!contour.points || contour.points.length === 0) return;
-      const lastPt = contour.points[contour.points.length - 1];
-      if (lastPt.x > maxX) {
-          maxX = lastPt.x;
-          exitPt = new Point(lastPt.x, -lastPt.y);
-      }
-  });
-  return exitPt;
-}
+// function getExitPoint(contours) {
+//   console.log('getExitPoint', contours);
+//   let exitPt = null;
+//   console.log('Infinity', Infinity);
+//   let maxX = -Infinity;
+//   contours.forEach(contour => {
+//       console.log('contour', contour);
+//       if (!contour.points || contour.points.length === 0) return;
+//       const lastPt = contour.points[contour.points.length - 1];
+//       if (lastPt.x > maxX) {
+//           maxX = lastPt.x;
+//           exitPt = new Point(lastPt.x, -lastPt.y);
+//       }
+//   });
+//   return exitPt;
+// }
 
 // Dessine la lettre et retourne les points d'entrée et de sortie optimisés
 function drawGlyph(data) {
@@ -306,7 +306,7 @@ function drawGlyph(data) {
     repere_entree.strokeColor = 'red';
     group.addChild(repere_entree);
   
-    var repere_sortie = new Path.Circle(new Point(pt.x*scale, pt.y*scale), 5);
+    var repere_sortie = new Path.Circle(new Point(pt.x*scale, pt.y*scale), 7);
     repere_sortie.strokeColor = 'green';
     group.addChild(repere_sortie);
   }
@@ -325,10 +325,104 @@ function drawGlyph(data) {
 //   return { x: newX, y: newY };
 // }
 
+function getDist(p1, p2){
+  const dx = p2.x - p1.x;
+  const dy = p2.y - p1.y;
+  return Math.hypot(dx, dy);
+}
+
+function getAngle(p1, p2){
+  const dx = p2.x - p1.x;
+  const dy = p2.y - p1.y;
+  return Math.atan2(dy, dx);
+}
+
+
 function drawLetters(draw) {
   console.log("drawLetters: draw", draw);
   if (!imagesReady) return;
 
+  const path = draw.path;
+  const sequence = draw.sequence;
+  console.log("path:",path,"sequence:",sequence);
+  
+  let letterIndex = 0;
+  // let path_drew_len = 0;
+  let path_index = 0;
+  let previousLastPoint;
+
+  let n = 0;
+  let addLetters = true;
+
+  // while(path_drew_len < path.length){
+  // while(path_index < path.length){
+  while(addLetters){
+  // while(n < 4){
+    // n++;
+
+    let p1 = previousLastPoint ? previousLastPoint : path[0];
+    pos = new Point(p1);
+    
+    if (letterIndex >= sequence.length) {
+      letterIndex = 0;
+    }
+    const letter = sequence[letterIndex];
+    console.log('sequence.length', sequence.length, 'letterIndex: ', letterIndex, "letter: ", letter);
+    
+    if (letter === " ") {
+      // TODO "draw" a space
+    }else{
+      let { group, lastPt } = drawGlyph(lettersData[letter]);
+
+      group.position = pos;
+
+      // get the distance btwn first and last point of the letter
+      let letterDist = getDist(new Point(0,0), lastPt);
+
+      // get the path point with closest point distance with first path point
+      for (let i = path_index+1; i < path.length; i++) {
+        let pathDist = getDist(pos, path[i]);
+        if (pathDist > letterDist) {
+
+          p2 = path[i];
+
+          if(debug){
+            let repere_target_point = new Path.Circle(new Point(p2), 5);
+            repere_target_point.strokeColor = 'pink';
+          }
+
+
+          // angle
+          let pathAngle = getAngle(p1, p2);
+          let letterPointsAngle = getAngle(new Point(0,0), lastPt);
+          let angle = pathAngle-letterPointsAngle;
+          //   ctx.rotate(angle);
+          group.rotate(angle * (180/Math.PI));
+
+          previousLastPoint = pos.add(lastPt.rotate(angle * (180/Math.PI)));
+          
+          path_index = i < path.length -1 ? i-1 : path.length ;
+          addLetters = i < path.length -1;
+          break;
+        }else{
+          addLetters = false;
+        }
+      }
+
+    }
+    // path_index++;
+    letterIndex++;
+    // path_drew_len++;
+  }
+
+
+}
+
+
+function drawLetters_old(draw) {
+  console.log("drawLetters: draw", draw);
+  if (!imagesReady) return;
+
   const path = draw.path;
   const sequence = draw.sequence;
 
@@ -337,7 +431,7 @@ function drawLetters(draw) {
   let previousRightPt;
 
   for (let i = 0; i < path.length - 1; i++) {
-
+    // 
     const p1 = path[i];
     const p2 = path[i + 1];
 
@@ -414,6 +508,15 @@ function drawLetters(draw) {
   }
 }
 
+function drawPath(draw){
+  const path = draw.path;
+  for (let i = 0; i < path.length - 1; i++) {
+    let repere_path = new Path.Circle(new Point(path[i]), 2);
+    repere_path.strokeColor = 'blue';
+  }
+
+}
+
 // l'ensenble/rendu global apres maj
 
 function redrawAll() {
@@ -422,6 +525,11 @@ function redrawAll() {
   paper.project.clear();
 
   drawings.forEach(draw => {
+
+    if (debug) {
+      drawPath(draw);
+    }
+
     drawLetters(draw);
   });
 
@@ -440,6 +548,8 @@ function redrawAll() {
     ctx.stroke();
   }
 
+
+
   drawHeaderText();
 }