Path 2D module

lib/js/tests/Webapi/Canvas/Webapi__Canvas__Canvas2d__test.js

@@ -158,13 +158,19 @@ ctx.strokeRect(1, 0, 10, 10);
 
 ctx.clearRect(1, 0, 10, 10);
 
-var path = new Path2D("M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z");
+var path1 = new Path2D(undefined);
+
+var path2 = new Path2D("M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z");
+
+path1.rect(1, 2, 10, 10);
+
+path2.bezierCurveTo(1, 2, 2, 2, 4, 4);
 
 ctx.beginPath();
 
-ctx.stroke(path);
+ctx.stroke(path1);
 
-ctx.fill(path);
+ctx.fill(path2);
 
 exports.canvasEl = canvasEl;
 exports.ctx = ctx;
@@ -183,5 +189,6 @@ exports.imageFromData = imageFromData;
 exports.w = w;
 exports.h = h;
 exports.frameFromImage = frameFromImage;
-exports.path = path;
+exports.path1 = path1;
+exports.path2 = path2;
 /* canvasEl Not a pure module */

src/Webapi/Canvas/Webapi__Canvas__Canvas2d.res

@@ -209,45 +209,17 @@ external createPattern: (
 
 /* Paths */
 @send external beginPath: t => unit = "beginPath"
-@send external closePath: t => unit = "closePath"
-@send external fill: t => unit = "fill"
 @send external stroke: t => unit = "stroke"
 @send external clip: t => unit = "clip"
-@send external moveTo: (t, ~x: float, ~y: float) => unit = "moveTo"
-@send external lineTo: (t, ~x: float, ~y: float) => unit = "lineTo"
-@send
-external quadraticCurveTo: (t, ~cp1x: float, ~cp1y: float, ~x: float, ~y: float) => unit =
-  "quadraticCurveTo"
-@send
-external bezierCurveTo: (
-  t,
-  ~cp1x: float,
-  ~cp1y: float,
-  ~cp2x: float,
-  ~cp2y: float,
-  ~x: float,
-  ~y: float,
-) => unit = "bezierCurveTo"
-@send
-external arcTo: (t, ~x1: float, ~y1: float, ~x2: float, ~y2: float, ~r: float) => unit = "arcTo"
-@send
-external arc: (
-  t,
-  ~x: float,
-  ~y: float,
-  ~r: float,
-  ~startAngle: float,
-  ~endAngle: float,
-  ~anticw: bool,
-) => unit = "arc"
-@send external rect: (t, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "rect"
+@send external fill: t => unit = "fill"
 @send external isPointInPath: (t, ~x: float, ~y: float) => bool = "isPointInPath"
 
 /* Path2D */
-type path2d
-@new external newPath2D: string => path2d = "Path2D"
-@send external fillPath2D: (t, path2d) => unit = "fill"
-@send external strokePath2D: (t, path2d) => unit = "stroke"
+@send
+external fillPath2d: (t, Webapi__Canvas__Path2d.t) => unit = "fill"
+@send
+external strokePath2d: (t, Webapi__Canvas__Path2d.t) => unit = "stroke"
+
 
 /* Text */
 @set external font: (t, string) => unit = "font"
@@ -267,6 +239,13 @@ external strokeText: (t, string, ~x: float, ~y: float, ~maxWidth: float=?, @igno
 @send external strokeRect: (t, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "strokeRect"
 @send external clearRect: (t, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "clearRect"
 
+module T = {
+  type t = t
+}
+
+// CanvasPathCommons
+include Webapi__Canvas__Path_Common.Make(T)
+
 /* Pixel maniplation */
 @send
 external createImageDataCoords: (t, ~width: float, ~height: float) => Webapi__Dom__Image.t =

src/Webapi/Canvas/Webapi__Canvas__Path2d.res

@@ -0,0 +1,20 @@
+/**
+ * Path2D
+ * All methods but addPath are common with CanvasRenderingContext2D
+ */
+
+type t
+
+@new
+external make: (~d: string=?, unit) => t = "Path2D"
+
+/** https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath */
+@send
+external addPath: (t, t) => unit = "addPath"
+
+module T = {
+  type t = t
+}
+
+// CanvasPathCommons
+include Webapi__Canvas__Path_Common.Make(T)

src/Webapi/Canvas/Webapi__Canvas__Path_Common.res

@@ -0,0 +1,81 @@
+module type ModuleWithT = {
+  type t
+}
+
+/**
+ * Named parameters have 1~3 of lenght, should resemble MDN/typescript docs/types.
+ * This module exposes the typescript CanvasPath interface
+ * https://github.com/microsoft/TypeScript/blob/46410044add2e9f53cea58e445de18dcda53443f/src/lib/dom.generated.d.ts#L5455
+ */
+module Make = (M: ModuleWithT) => {
+  // type t = M.t
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc */
+  @send
+  external arc: (
+    M.t,
+    ~x: float,
+    ~y: float,
+    ~r: float,
+    ~a1: float,
+    ~a2: float,
+    ~ccw: bool=?,
+    unit,
+  ) => unit = "arc"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo */
+  @send
+  external arcTo: (M.t, ~x1: float, ~y1: float, ~x2: float, ~y2: float, ~r: float) => unit = "arcTo"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo */
+  @send
+  external bezierCurveTo: (
+    M.t,
+    ~cp1x: float,
+    ~cp1y: float,
+    ~cp2x: float,
+    ~cp2y: float,
+    ~x: float,
+    ~y: float,
+  ) => unit = "bezierCurveTo"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath*/
+  @send
+  external closePath: M.t => unit = "closePath"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse */
+  @send
+  external ellipse: (
+    M.t,
+    ~x: float,
+    ~y: float,
+    ~rx: float,
+    ~ry: float,
+    ~rtn: float,
+    ~a1: float,
+    ~a2: float,
+    ~ccw: bool=?,
+    unit,
+  ) => unit = "ellipse"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo */
+  @send
+  external lineTo: (M.t, ~x: float, ~y: float) => unit = "lineTo"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo */
+  @send
+  external moveTo: (M.t, ~x: float, ~y: float) => unit = "moveTo"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo */
+  @send
+  external quadraticCurveTo: (M.t, ~cpx: float, ~cpy: float, ~x: float, ~y: float) => unit =
+    "quadraticCurveTo"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect */
+  @send
+  external rect: (M.t, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "rect"
+
+  /** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect */
+  @send
+  external roundRect: (M.t, ~x: float, ~y: float, ~w: float, ~h: float, ~r: float) => unit =
+    "roundRect"
+}

src/Webapi/Webapi__Canvas.res

@@ -1,4 +1,5 @@
 module Canvas2d = Webapi__Canvas__Canvas2d
+module Path2d = Webapi__Canvas__Path2d
 module WebGl = Webapi__Canvas__WebGl
 module Blob = Webapi__Blob
 

tests/Webapi/Canvas/Webapi__Canvas__Canvas2d__test.res

@@ -48,10 +48,10 @@ ctx->stroke
 ctx->clip
 ctx->moveTo(~x=1., ~y=1.)
 ctx->lineTo(~x=1., ~y=2.)
-ctx->quadraticCurveTo(~cp1x=1., ~cp1y=1., ~x=1., ~y=1.)
+ctx->quadraticCurveTo(~cpx=1., ~cpy=1., ~x=1., ~y=1.)
 ctx->bezierCurveTo(~cp1x=1., ~cp1y=1., ~cp2x=2., ~cp2y=2., ~x=4., ~y=4.)
 ctx->arcTo(~x1=1., ~y1=1., ~x2=2., ~y2=2., ~r=4.)
-ctx->arc(~x=1., ~y=1., ~r=4., ~startAngle=1., ~endAngle=3., ~anticw=true)
+ctx->arc(~x=1., ~y=1., ~r=4., ~a1=1., ~a2=3., ~ccw=true, ())
 ctx->rect(~x=0., ~y=0., ~w=10., ~h=10.)
 let pointInPath: bool = ctx->isPointInPath(~x=0., ~y=0.)
 
@@ -112,11 +112,17 @@ ctx->fillRect(~x=1., ~y=0., ~w=10., ~h=10.)
 ctx->strokeRect(~x=1., ~y=0., ~w=10., ~h=10.)
 ctx->clearRect(~x=1., ~y=0., ~w=10., ~h=10.)
 
-let path: path2d = newPath2D("M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223"
+
+let path1 = Path2d.make()
+let path2 = Path2d.make(~d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223"
   ++ ",0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482"
   ++ "-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021"
   ++ "-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2"
-  ++ ",13.159,2C18.522,2,22.832,5.343,24.85,10.126z")
+  ++ ",13.159,2C18.522,2,22.832,5.343,24.85,10.126z",())
+
+path1->Path2d.rect(~x=1., ~y=2., ~w=10., ~h=10.)
+path2->Path2d.bezierCurveTo(~cp1x=1., ~cp1y=2., ~cp2x=2., ~cp2y=2., ~x=4., ~y=4.)
+
 ctx->beginPath
-ctx->strokePath2D(path)
-ctx->fillPath2D(path)
+ctx->strokePath2d(path1)
+ctx->fillPath2d(path2)