Update posTan() return type (#1087)

Author: wcandillon

example/src/Examples/API/Path.tsx

@@ -5,6 +5,7 @@ import {
   ScrollView,
   View,
   useWindowDimensions,
+  Platform,
 } from "react-native";
 import {
   Skia,
@@ -121,7 +122,12 @@ export const PathExample = () => {
   if (!font) {
     return null;
   }
-  const textPath = Skia.Path.MakeFromText("hello", 16, 16 + 32, font)!;
+  const textPath =
+    Platform.OS === "web"
+      ? Skia.Path.MakeFromSVGString(
+          "M21.0859 33.1484L21.0859 24L18.1797 24L18.1797 48L21.0859 48L21.0859 35.9688C21.4688 35.1328 22.0156 34.4922 22.7188 33.9844C23.4219 33.5078 24.2578 33.25 25.2188 33.25C26.3672 33.25 27.2031 33.5391 27.7734 34.1094C28.3203 34.6875 28.6094 35.5859 28.6094 36.7969L28.6094 48L31.4844 48L31.4844 36.8281C31.4219 32.7969 29.6328 30.7812 26.0781 30.7812C24.0312 30.7812 22.3672 31.5859 21.0859 33.1484ZM43.2188 48.3203C46.0312 48.3203 48.1797 47.2344 49.5859 45.0547L47.8203 43.6797C47.2812 44.3828 46.6406 44.9297 45.9375 45.3438C45.2344 45.7578 44.3672 45.9531 43.3438 45.9531C41.9062 45.9531 40.7188 45.4375 39.7891 44.4141C38.8672 43.3906 38.3828 42.0469 38.3516 40.3828L49.8047 40.3828L49.8047 39.1719C49.8047 36.4766 49.1719 34.4297 47.9531 32.9609C46.7344 31.5234 45.0078 30.7812 42.8281 30.7812C41.4844 30.7812 40.2422 31.1719 39.0859 31.9062C37.9375 32.6719 37.0391 33.6953 36.3984 35.0078C35.7578 36.3203 35.4375 37.8203 35.4375 39.4844L35.4375 40C35.4375 42.5625 36.1406 44.5781 37.6172 46.0781C39.0547 47.5859 40.9141 48.3203 43.2188 48.3203ZM42.8281 33.1484C44.0469 33.1484 45.0078 33.5703 45.7109 34.3672C46.4141 35.2031 46.7969 36.3203 46.8984 37.7891L46.8984 38.0156L38.4453 38.0156C38.6094 36.4766 39.0859 35.2969 39.8906 34.4297C40.6562 33.6016 41.6484 33.1484 42.8281 33.1484ZM56.3438 48L56.3438 24L53.4297 24L53.4297 48L56.3438 48ZM64.3438 48L64.3438 24L61.4297 24L61.4297 48L64.3438 48ZM68.4062 39.3906L68.4062 39.5859C68.4062 42.2109 69.1094 44.3203 70.5547 45.9219C71.9609 47.5234 73.8125 48.3203 76.1172 48.3203C77.625 48.3203 78.9688 47.9688 80.1484 47.2344C81.3047 46.4922 82.2031 45.4688 82.8438 44.1562C83.4766 42.8828 83.7969 41.4062 83.7969 39.7422L83.7969 39.5234C83.7969 36.8984 83.0625 34.7812 81.6562 33.1875C80.25 31.5859 78.3906 30.7812 76.0859 30.7812C74.5859 30.7812 73.2422 31.1719 72.0859 31.875C70.9375 32.5781 70.0078 33.6016 69.3672 34.9141C68.7266 36.2578 68.4062 37.7266 68.4062 39.3906ZM71.3203 39.7422C71.3203 37.6328 71.7344 36.0312 72.6328 34.8828C73.4922 33.7266 74.6484 33.1484 76.0859 33.1484C77.5625 33.1484 78.7109 33.7266 79.6094 34.8828C80.4688 36.0312 80.9219 37.5391 80.9219 39.3906C80.9219 41.4688 80.4688 43.0703 79.6094 44.2266C78.7422 45.375 77.5938 45.9531 76.1172 45.9531C74.6484 45.9531 73.4922 45.4062 72.6328 44.2578C71.7344 43.1328 71.3203 41.6328 71.3203 39.7422Z"
+        )!
+      : Skia.Path.MakeFromText("hello", 16, 16 + 32, font)!;
   return (
     <ScrollView>
       <Title>Path Operations</Title>

package/cpp/api/JsiSkContourMeasure.h

@@ -40,11 +40,13 @@ class JsiSkContourMeasure
     if (!result) {
       throw jsi::JSError(runtime, "getSegment() failed");
     }
-    auto posTan = jsi::Object(runtime);
-    posTan.setProperty(runtime, "px", position.x());
-    posTan.setProperty(runtime, "py", position.y());
-    posTan.setProperty(runtime, "tx", tangent.x());
-    posTan.setProperty(runtime, "ty", tangent.y());
+    auto posTan = jsi::Array(runtime, 2);
+    auto pos = jsi::Object::createFromHostObject(
+        runtime, std::make_shared<JsiSkPoint>(getContext(), position));
+    auto tan = jsi::Object::createFromHostObject(
+        runtime, std::make_shared<JsiSkPoint>(getContext(), tangent));
+    posTan.setValueAtIndex(runtime, 0, pos);
+    posTan.setValueAtIndex(runtime, 1, tan);
     return posTan;
   }
 

package/src/dom/nodes/drawings/Text.ts

@@ -57,10 +57,10 @@ export class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob> {
       }
       // Gives us the (x, y) coordinates as well as the cos/sin of the tangent
       // line at that position.
-      const { px, py, tx, ty } = cont.getPosTan(dist);
-      const adjustedX = px - (width / 2) * tx;
-      const adjustedY = py - (width / 2) * ty;
-      rsx.push(this.Skia.RSXform(tx, ty, adjustedX, adjustedY));
+      const [p, t] = cont.getPosTan(dist);
+      const adjustedX = p.x - (width / 2) * t.x;
+      const adjustedY = p.y - (width / 2) * t.y;
+      rsx.push(this.Skia.RSXform(t.x, t.y, adjustedX, adjustedY));
       dist += width / 2;
     }
     return this.Skia.TextBlob.MakeFromRSXform(text, rsx, font);

package/src/skia/types/ContourMeasure.tsx

@@ -1,5 +1,6 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkPath } from "./Path/Path";
+import type { SkPoint } from "./Point";
 
 export interface PosTan {
   px: number;
@@ -11,10 +12,10 @@ export interface PosTan {
 export interface SkContourMeasure extends SkJSIInstance<"ContourMeasure"> {
   /**
    * Returns the given position and tangent line for the distance on the given contour.
-   * The return value is 4 floats in this order: posX, posY, vecX, vecY.
+   * The return value an array of 2 vectors: [position, tangent]
    * @param distance - will be pinned between 0 and length().
    */
-  getPosTan(distance: number): PosTan;
+  getPosTan(distance: number): [position: SkPoint, tangent: SkPoint];
 
   /**
    * Returns an Path representing the segment of this contour.

package/src/skia/web/JsiSkContourMeasure.ts

@@ -4,6 +4,7 @@ import type { SkContourMeasure } from "../types";
 
 import { HostObject } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkPoint } from "./JsiSkPoint";
 
 export class JsiSkContourMeasure
   extends HostObject<ContourMeasure, "ContourMeasure">
@@ -13,9 +14,12 @@ export class JsiSkContourMeasure
     super(CanvasKit, ref, "ContourMeasure");
   }
 
-  getPosTan(distance: number) {
-    const [px, py, tx, ty] = this.ref.getPosTan(distance);
-    return { px, py, tx, ty };
+  getPosTan(distance: number): [position: JsiSkPoint, tangent: JsiSkPoint] {
+    const posTan = this.ref.getPosTan(distance);
+    return [
+      new JsiSkPoint(this.CanvasKit, posTan.slice(0, 2)),
+      new JsiSkPoint(this.CanvasKit, posTan.slice(2)),
+    ];
   }
 
   getSegment(startD: number, stopD: number, startWithMoveTo: boolean) {