add Dom.Canvas for extra runtime safety

farism · Aug 31, 2023 · 09a1850 · 09a1850
1 parent d3eadc5
commit 09a1850
Show file tree

Hide file tree

Showing 70 changed files with 300 additions and 226 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ A simple example looks like this
 ```mint
 component Main {
   fun componentDidMount {
-    case canvas {
+    case Dom.Canvas.fromDomElement(canvas) {
       Maybe::Just(el) =>
         {
           el
@@ -42,7 +42,7 @@ Or directly view the example source files.
 
 ## Chaining
 
-Most `Canvas` APIs return the passed in canvas `Dom.Element`. This allows you to chain calls with `|>`.
+Most `Canvas` APIs return the passed in canvas `Dom.Canvas`. This allows you to chain calls with `|>`.
 
 ```mint
 canvasEl
@@ -71,7 +71,7 @@ canvasEl
 
 ## Context2d
 
-All APIs take `Dom.Element` as the first paramter. `getContext('2d')` is called under the hood.
+All APIs take `Dom.Canvas` as the first paramter. `getContext('2d')` is called under the hood.
 
 ```mint
 /*
@@ -80,12 +80,12 @@ Adds a rectangle to the current path.
 Like other methods that modify the current path, this method does not directly render anything. To draw the rectangle onto a canvas, you can use the `fill()` or `stroke()` methods.
 */
 fun rect (
-  el : Dom.Element,
+  el : Dom.Canvas,
   x : Number,
   y : Number,
   width : number,
   height : number
-) : Dom.Element {
+) : Dom.Canvas {
   `#{el}.getContext('2d').rect(#{x}, #{y}, #{width}, #{height})`
   el
 }

diff --git a/example/source/examples/Arc.mint b/example/source/examples/Arc.mint
@@ -4,7 +4,7 @@ component Arc {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/ArcTo.mint b/example/source/examples/ArcTo.mint
@@ -4,7 +4,7 @@ component ArcTo {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Tangential lines

diff --git a/example/source/examples/BeginPath.mint b/example/source/examples/BeginPath.mint
@@ -4,7 +4,7 @@ component BeginPath {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Tangential lines

diff --git a/example/source/examples/BezierCurveTo.mint b/example/source/examples/BezierCurveTo.mint
@@ -4,7 +4,7 @@ component BezierCurveTo {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   let start =

diff --git a/example/source/examples/ClearRect.mint b/example/source/examples/ClearRect.mint
@@ -4,11 +4,13 @@ component ClearRect {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   let dims =
-                    Dom.getDimensions(el)
+                    el
+                    |> Dom.Canvas.toDomElement
+                    |> Dom.getDimensions
 
                   // Draw yellow background
                   el

diff --git a/example/source/examples/Clip.mint b/example/source/examples/Clip.mint
@@ -4,11 +4,13 @@ component Clip {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   let dims =
-                    Dom.getDimensions(el)
+                    el
+                    |> Dom.Canvas.toDomElement
+                    |> Dom.getDimensions
 
                   // Create circular clipping region
                   el

diff --git a/example/source/examples/ClipPath.mint b/example/source/examples/ClipPath.mint
@@ -4,11 +4,13 @@ component ClipPath {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   let dims =
-                    Dom.getDimensions(el)
+                    el
+                    |> Dom.Canvas.toDomElement
+                    |> Dom.getDimensions
 
                   // Create clipping path
                   let region =

diff --git a/example/source/examples/ClosePath.mint b/example/source/examples/ClosePath.mint
@@ -4,7 +4,7 @@ component ClosePath {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/CreateConicGradient.mint b/example/source/examples/CreateConicGradient.mint
@@ -4,7 +4,7 @@ component CreateConicGradient {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Add five color stops

diff --git a/example/source/examples/CreateImageData.mint b/example/source/examples/CreateImageData.mint
@@ -4,7 +4,7 @@ component CreateImageData {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   let imageData =

diff --git a/example/source/examples/CreateLinearGradient.mint b/example/source/examples/CreateLinearGradient.mint
@@ -4,7 +4,7 @@ component CreateLinearGradient {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Add five color stops

diff --git a/example/source/examples/CreatePattern.mint b/example/source/examples/CreatePattern.mint
@@ -4,7 +4,7 @@ component CreatePattern {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(canvasEl) =>
                 case image {
                   Maybe::Just(imageEl) =>

diff --git a/example/source/examples/CreateRadialGradient.mint b/example/source/examples/CreateRadialGradient.mint
@@ -4,7 +4,7 @@ component CreateRadialGradient {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Add five color stops

diff --git a/example/source/examples/DrawFocusIfNeeded.mint b/example/source/examples/DrawFocusIfNeeded.mint
@@ -4,7 +4,7 @@ component DrawFocusIfNeeded {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   ""

diff --git a/example/source/examples/DrawImage.mint b/example/source/examples/DrawImage.mint
@@ -4,7 +4,7 @@ component DrawImage {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 case image {
                   Maybe::Just(img) =>
@@ -13,10 +13,13 @@ component DrawImage {
                         Dom.getDimensions(img)
 
                       // resize canvas to display full image
-                      Dom.setAttribute(el, "width", "#{dims.width}")
-                      Dom.setAttribute(el, "height", "#{dims.width}")
                       Dom.setStyle(img, "display", "none")
 
+                      el
+                      |> Dom.Canvas.toDomElement
+                      |> Dom.setAttribute("width", "#{dims.width}")
+                      |> Dom.setAttribute("height", "#{dims.width}")
+
                       let imageData =
                         CanvasImageSource.fromImage(img)
 

diff --git a/example/source/examples/Ellipse.mint b/example/source/examples/Ellipse.mint
@@ -4,7 +4,7 @@ component Ellipse {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/Fill.mint b/example/source/examples/Fill.mint
@@ -4,7 +4,7 @@ component Fill {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/FillPath.mint b/example/source/examples/FillPath.mint
@@ -4,7 +4,7 @@ component FillPath {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Create path

diff --git a/example/source/examples/FillRect.mint b/example/source/examples/FillRect.mint
@@ -4,7 +4,7 @@ component FillRect {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/FillText.mint b/example/source/examples/FillText.mint
@@ -4,7 +4,7 @@ component FillText {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/IsPointInPath.mint b/example/source/examples/IsPointInPath.mint
@@ -8,7 +8,7 @@ component IsPointInPath {
 
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el
@@ -26,11 +26,13 @@ component IsPointInPath {
         // Listen for mouse moves
         let onMouseMove =
           (e : Html.Event) {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   let dims =
-                    Dom.getDimensions(el)
+                    el
+                    |> Dom.Canvas.toDomElement
+                    |> Dom.getDimensions
 
                   let x =
                     e.clientX - dims.left

diff --git a/example/source/examples/IsPointInStroke.mint b/example/source/examples/IsPointInStroke.mint
@@ -4,7 +4,7 @@ component IsPointInStroke {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   let isInStroke =

diff --git a/example/source/examples/LineTo.mint b/example/source/examples/LineTo.mint
@@ -4,7 +4,7 @@ component LineTo {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/MeasureText.mint b/example/source/examples/MeasureText.mint
@@ -4,7 +4,7 @@ component MeasureText {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   let width =

diff --git a/example/source/examples/MoveTo.mint b/example/source/examples/MoveTo.mint
@@ -4,7 +4,7 @@ component MoveTo {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/QuadraticCurveTo.mint b/example/source/examples/QuadraticCurveTo.mint
@@ -4,7 +4,7 @@ component QuadraticCurveTo {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Quadratic Bézier curve

diff --git a/example/source/examples/Rect.mint b/example/source/examples/Rect.mint
@@ -4,7 +4,7 @@ component Rect {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/Reset.mint b/example/source/examples/Reset.mint
@@ -4,7 +4,7 @@ component Reset {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el
@@ -21,7 +21,7 @@ component Reset {
 
         let reset =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   el

diff --git a/example/source/examples/ResetTransform.mint b/example/source/examples/ResetTransform.mint
@@ -4,7 +4,7 @@ component ResetTransform {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Skewed rectangles

diff --git a/example/source/examples/Restore.mint b/example/source/examples/Restore.mint
@@ -4,7 +4,7 @@ component Restore {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Save the current state

diff --git a/example/source/examples/Rotate.mint b/example/source/examples/Rotate.mint
@@ -4,7 +4,7 @@ component Rotate {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Point of transform origin

diff --git a/example/source/examples/RoundRect.mint b/example/source/examples/RoundRect.mint
@@ -4,7 +4,7 @@ component RoundRect {
       @format {
         let draw =
           () {
-            case canvas {
+            case Dom.Canvas.fromDomElement(canvas) {
               Maybe::Just(el) =>
                 {
                   // Rounded rectangle with zero radius (specified as a number)