Skip to content

Commit 2fd5697

Browse files
TheSpyderTheSpyder
authored
Merge pull request #133 from utenma/main
2 parents 9504425 + 95f4326 commit 2fd5697

File tree

8 files changed

+173
-55
lines changed

8 files changed

+173
-55
lines changed

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ ctx.arcTo(1, 1, 2, 2, 4);
9292

9393
ctx.arc(1, 1, 4, 1, 3, true);
9494

95+
ctx.ellipse(1, 1, 4, 8, 4, 1, 3, true);
96+
9597
ctx.rect(0, 0, 10, 10);
9698

9799
var pointInPath = ctx.isPointInPath(0, 0);
@@ -158,14 +160,6 @@ ctx.strokeRect(1, 0, 10, 10);
158160

159161
ctx.clearRect(1, 0, 10, 10);
160162

161-
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");
162-
163-
ctx.beginPath();
164-
165-
ctx.stroke(path);
166-
167-
ctx.fill(path);
168-
169163
exports.canvasEl = canvasEl;
170164
exports.ctx = ctx;
171165
exports.pointInPath = pointInPath;
@@ -183,5 +177,4 @@ exports.imageFromData = imageFromData;
183177
exports.w = w;
184178
exports.h = h;
185179
exports.frameFromImage = frameFromImage;
186-
exports.path = path;
187180
/* canvasEl Not a pure module */

‎lib/js/tests/Webapi/Canvas/Webapi__Canvas__Path2d__test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict';
2+
3+
4+
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");
5+
6+
path.moveTo(1, 1);
7+
8+
path.lineTo(1, 2);
9+
10+
path.rect(1, 2, 10, 10);
11+
12+
path.bezierCurveTo(1, 2, 2, 2, 4, 4);
13+
14+
var canvasEl = document.createElement("canvas");
15+
16+
var ctx = canvasEl.getContext("2d");
17+
18+
ctx.fill(path);
19+
20+
exports.path = path;
21+
exports.canvasEl = canvasEl;
22+
exports.ctx = ctx;
23+
/* path Not a pure module */

‎src/Webapi/Canvas/Webapi__Canvas__Canvas2d.res‎

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -209,45 +209,17 @@ external createPattern: (
209209

210210
/* Paths */
211211
@send external beginPath: t => unit = "beginPath"
212-
@send external closePath: t => unit = "closePath"
213-
@send external fill: t => unit = "fill"
214212
@send external stroke: t => unit = "stroke"
215213
@send external clip: t => unit = "clip"
216-
@send external moveTo: (t, ~x: float, ~y: float) => unit = "moveTo"
217-
@send external lineTo: (t, ~x: float, ~y: float) => unit = "lineTo"
218-
@send
219-
external quadraticCurveTo: (t, ~cp1x: float, ~cp1y: float, ~x: float, ~y: float) => unit =
220-
"quadraticCurveTo"
221-
@send
222-
external bezierCurveTo: (
223-
t,
224-
~cp1x: float,
225-
~cp1y: float,
226-
~cp2x: float,
227-
~cp2y: float,
228-
~x: float,
229-
~y: float,
230-
) => unit = "bezierCurveTo"
231-
@send
232-
external arcTo: (t, ~x1: float, ~y1: float, ~x2: float, ~y2: float, ~r: float) => unit = "arcTo"
233-
@send
234-
external arc: (
235-
t,
236-
~x: float,
237-
~y: float,
238-
~r: float,
239-
~startAngle: float,
240-
~endAngle: float,
241-
~anticw: bool,
242-
) => unit = "arc"
243-
@send external rect: (t, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "rect"
214+
@send external fill: t => unit = "fill"
244215
@send external isPointInPath: (t, ~x: float, ~y: float) => bool = "isPointInPath"
245216

246217
/* Path2D */
247-
type path2d
248-
@new external newPath2D: string => path2d = "Path2D"
249-
@send external fillPath2D: (t, path2d) => unit = "fill"
250-
@send external strokePath2D: (t, path2d) => unit = "stroke"
218+
@send
219+
external fillPath2d: (t, Webapi__Canvas__Path2d.t) => unit = "fill"
220+
@send
221+
external strokePath2d: (t, Webapi__Canvas__Path2d.t) => unit = "stroke"
222+
251223

252224
/* Text */
253225
@set external font: (t, string) => unit = "font"
@@ -267,6 +239,11 @@ external strokeText: (t, string, ~x: float, ~y: float, ~maxWidth: float=?, @igno
267239
@send external strokeRect: (t, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "strokeRect"
268240
@send external clearRect: (t, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "clearRect"
269241

242+
// CanvasPathCommons
243+
include Webapi__Canvas__Path_Common.Impl({
244+
type t = t
245+
})
246+
270247
/* Pixel maniplation */
271248
@send
272249
external createImageDataCoords: (t, ~width: float, ~height: float) => Webapi__Dom__Image.t =

‎src/Webapi/Canvas/Webapi__Canvas__Path2d.res‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Path2D
3+
* All methods but addPath are common with CanvasRenderingContext2D
4+
*/
5+
6+
type t
7+
8+
@new
9+
external make: (~d: string=?, unit) => t = "Path2D"
10+
11+
/** https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath */
12+
@send
13+
external addPath: (t, t) => unit = "addPath"
14+
15+
// CanvasPathCommons
16+
include Webapi__Canvas__Path_Common.Impl( {
17+
type t = t
18+
})

‎src/Webapi/Canvas/Webapi__Canvas__Path_Common.res‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* Named parameters have 1~3 of lenght, should resemble MDN/typescript docs/types.
3+
* This module exposes the typescript CanvasPath interface
4+
* https://github.com/microsoft/TypeScript/blob/46410044add2e9f53cea58e445de18dcda53443f/src/lib/dom.generated.d.ts#L5455
5+
*/
6+
module Impl = (
7+
T: {
8+
type t
9+
},
10+
) => {
11+
// type t = M.t
12+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc */
13+
@send
14+
external arc: (
15+
T.t,
16+
~x: float,
17+
~y: float,
18+
~r: float,
19+
~startAngle: float,
20+
~endAngle: float,
21+
~counterClockWise: bool=?,
22+
unit,
23+
) => unit = "arc"
24+
25+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo */
26+
@send
27+
external arcTo: (T.t, ~x1: float, ~y1: float, ~x2: float, ~y2: float, ~r: float) => unit = "arcTo"
28+
29+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo */
30+
@send
31+
external bezierCurveTo: (
32+
T.t,
33+
~cp1x: float,
34+
~cp1y: float,
35+
~cp2x: float,
36+
~cp2y: float,
37+
~x: float,
38+
~y: float,
39+
) => unit = "bezierCurveTo"
40+
41+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath*/
42+
@send
43+
external closePath: T.t => unit = "closePath"
44+
45+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse */
46+
@send
47+
external ellipse: (
48+
T.t,
49+
~x: float,
50+
~y: float,
51+
~rx: float,
52+
~ry: float,
53+
~rtn: float,
54+
~startAngle: float,
55+
~endAngle: float,
56+
~counterClockWise: bool=?,
57+
unit,
58+
) => unit = "ellipse"
59+
60+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo */
61+
@send
62+
external lineTo: (T.t, ~x: float, ~y: float) => unit = "lineTo"
63+
64+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo */
65+
@send
66+
external moveTo: (T.t, ~x: float, ~y: float) => unit = "moveTo"
67+
68+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo */
69+
@send
70+
external quadraticCurveTo: (T.t, ~cpx: float, ~cpy: float, ~x: float, ~y: float) => unit =
71+
"quadraticCurveTo"
72+
73+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect */
74+
@send
75+
external rect: (T.t, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "rect"
76+
77+
/** https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect */
78+
@send
79+
external roundRect: (T.t, ~x: float, ~y: float, ~w: float, ~h: float, ~r: float) => unit =
80+
"roundRect"
81+
}

‎src/Webapi/Webapi__Canvas.res‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module Canvas2d = Webapi__Canvas__Canvas2d
2+
module Path2d = Webapi__Canvas__Path2d
23
module WebGl = Webapi__Canvas__WebGl
34
module Blob = Webapi__Blob
45

‎tests/Webapi/Canvas/Webapi__Canvas__Canvas2d__test.res‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,28 @@ ctx->stroke
4848
ctx->clip
4949
ctx->moveTo(~x=1., ~y=1.)
5050
ctx->lineTo(~x=1., ~y=2.)
51-
ctx->quadraticCurveTo(~cp1x=1., ~cp1y=1., ~x=1., ~y=1.)
51+
ctx->quadraticCurveTo(~cpx=1., ~cpy=1., ~x=1., ~y=1.)
5252
ctx->bezierCurveTo(~cp1x=1., ~cp1y=1., ~cp2x=2., ~cp2y=2., ~x=4., ~y=4.)
5353
ctx->arcTo(~x1=1., ~y1=1., ~x2=2., ~y2=2., ~r=4.)
54-
ctx->arc(~x=1., ~y=1., ~r=4., ~startAngle=1., ~endAngle=3., ~anticw=true)
54+
ctx->arc(~x=1., ~y=1., ~r=4., ~startAngle=1., ~endAngle=3., ~counterClockWise=true, ())
55+
ctx->ellipse(
56+
~x=1.,
57+
~y=1.,
58+
~rx=4.,
59+
~ry=8.,
60+
~rtn=4.,
61+
~startAngle=1.,
62+
~endAngle=3.,
63+
~counterClockWise=true,
64+
(),
65+
)
5566
ctx->rect(~x=0., ~y=0., ~w=10., ~h=10.)
5667
let pointInPath: bool = ctx->isPointInPath(~x=0., ~y=0.)
5768

5869
let linearGradient: gradient = ctx->createLinearGradient(~x0=0.0, ~y0=0.0, ~x1=0.0, ~y1=0.0)
5970
setStrokeStyle(ctx, Gradient, linearGradient)
60-
let radialGradient: gradient = ctx->createRadialGradient(~x0=0.0, ~y0=0.0, ~x1=0.0, ~y1=0.0, ~r0=0.0, ~r1=0.0)
71+
let radialGradient: gradient =
72+
ctx->createRadialGradient(~x0=0.0, ~y0=0.0, ~x1=0.0, ~y1=0.0, ~r0=0.0, ~r1=0.0)
6173
linearGradient->addColorStop(0.0, "red")
6274
let noRepeatPatern: pattern = ctx->createPattern(document->Document.createElement("img"), #noRepeat)
6375
let repeatPatern: pattern = ctx->createPattern(document->Document.createElement("img"), #repeat)
@@ -111,12 +123,3 @@ ctx->strokeText("hi", ~x=1., ~y=0., ())
111123
ctx->fillRect(~x=1., ~y=0., ~w=10., ~h=10.)
112124
ctx->strokeRect(~x=1., ~y=0., ~w=10., ~h=10.)
113125
ctx->clearRect(~x=1., ~y=0., ~w=10., ~h=10.)
114-
115-
let path: path2d = newPath2D("M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223"
116-
++ ",0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482"
117-
++ "-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021"
118-
++ "-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2"
119-
++ ",13.159,2C18.522,2,22.832,5.343,24.85,10.126z")
120-
ctx->beginPath
121-
ctx->strokePath2D(path)
122-
ctx->fillPath2D(path)

‎tests/Webapi/Canvas/Webapi__Canvas__Path2d__test.res‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
open Webapi.Canvas
2+
open Webapi.Canvas.Canvas2d
3+
open Webapi.Dom
4+
5+
let path = Path2d.make(
6+
~d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223" ++
7+
",0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482" ++
8+
"-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021" ++
9+
"-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",
10+
(),
11+
)
12+
13+
path->Path2d.moveTo(~x=1., ~y=1.)
14+
path->Path2d.lineTo(~x=1., ~y=2.)
15+
path->Path2d.rect(~x=1., ~y=2., ~w=10., ~h=10.)
16+
path->Path2d.bezierCurveTo(~cp1x=1., ~cp1y=2., ~cp2x=2., ~cp2y=2., ~x=4., ~y=4.)
17+
18+
19+
let canvasEl: Dom.element = document->Document.createElement("canvas")
20+
let ctx = canvasEl->CanvasElement.getContext2d
21+
22+
ctx->fillPath2d(path)

0 commit comments

Comments
 (0)