Merge pull request #18 from christo-pr/develop

React legra v0.1.1

README.md

@@ -22,23 +22,19 @@ yarn add react-legra
 
 ## Usage
 
-All components but `<Board />`, recieve an optional `options` prop as a configuration object:
+To start drawing, you first need to create a canvas to draw on, the `<Board />` component will do that for you.
 
-```js
-{
-  color?: string;
-  filled?: boolean;
-}
-```
+The `<Board />` component recieve the same props as a `canvas` element, and additionally you can set the `canvas` prop, to reference all the drawing to an external canvas
 
-##### Draw in a **`<Board />`:**
+All the components but `<Board />`, recieve (optionally) some configuration props:
 
-First, you'll need a **board** where you can draw. The `<Board />` component can help you with this.
-Additionaly this component recieve a `canvas` prop to use an external canvas
-
-|         prop        |  type   | default |
-|:-------------------:|:-------:|:-------:|
-| canvas | object |    -    |
+```js
+options: { // To control the look and feel of the component
+  filled?: false,
+  color?: blue
+},
+bs: 24 // Brick size, default to 24
+```
 
 ```js
 import React from 'react'
@@ -277,6 +273,60 @@ function MyComponent() {
 ```
 -----------------------------------------------------------
 
+#### `<BezierCurve />`
+
+
+Draws a bézier curve from `(x1, y1)` to `(x2, y2)` with `(cp1x, cp1y)` and `(cp2x, cp2y)` as the curve's control points.
+
+|         prop        |        type     | default |
+|:-------------------:|:---------------:|:-------:|
+| from (**required**) | Array[x1, y1]   |    -    |
+| to (**required**) | Array[x2, y2]   |    -    |
+| controlPointX (**required**) | Array[x1, y1]   |    -    |
+| controlPointY (**required**) | Array[x2, y2]   |    -    |
+
+![blizercurve](./docs/bezier_curve.png)
+
+```js
+import Board, { BeziearCurve } from 'react-legra'
+
+function MyComponent() {
+
+  return (
+    <Board>
+      <BezierCurve from={[3, 3]} to={[22, 14]} controlPointX={[8, 30]} controlPointX={[18, 1]} />
+    </Board>
+}
+```
+-----------------------------------------------------------
+
+#### `<QuadraticCurve />`
+
+
+Draws a quadratic curve from `(x1, y1)` to `(x2, y2)` with `(cpx, cpy)` as the curve's control point.
+
+|         prop        |        type     | default |
+|:-------------------:|:---------------:|:-------:|
+| from (**required**) | Array[x1, y1]   |    -    |
+| to (**required**) | Array[x2, y2]   |    -    |
+| controlPoint (**required**) | Array[x1, y1, x2, y2]   |    -    |
+
+![quadraticcurve](./docs/quadratic_curve.png)
+
+```js
+import Board, { QuadraticCurve } from 'react-legra'
+
+function MyComponent() {
+
+  return (
+    <Board>
+      <QuadraticCurve from={[3, 3]} to={[22, 14]} controlPoint={[8, 30, 18, 1]} />
+    </Board>
+}
+```
+----------------------------------------------------------
+
+
 ## Development
 
 You'll need run two process (2 tabs) for development:

example/src/App.js

@@ -8,6 +8,8 @@ import RectangleExample from './examples/RectangleExample'
 import PolygonExample from './examples/PolygonExample'
 import EllipseExample from './examples/EllipseExample'
 import ArcExample from './examples/ArcExample'
+import BezierCurveExample from './examples/BezierCurveExample'
+import QuadraticCurveExample from './examples/QuadraticCurveExample'
 
 export default function App() {
 
@@ -21,6 +23,8 @@ export default function App() {
       <PolygonExample />
       <EllipseExample />
       <ArcExample />
+      <BezierCurveExample />
+      <QuadraticCurveExample />
     </div>
   )
 }

example/src/examples/BezierCurveExample.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import Board, { BezierCurve } from 'react-legra'
+
+export default function BezierCurveExample() {
+  return (
+    <Board>
+      <BezierCurve
+       from={[3,3]}
+       to={[22, 14]}
+       controlPointX={[8, 30]}
+       controlPointY={[18, 1]}
+       bs={8} />
+    </Board>
+  )
+}

example/src/examples/QuadraticCurveExample.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import Board, { QuadraticCurve } from 'react-legra'
+
+export default function QuadraticCurveExample() {
+  return (
+    <Board>
+      <QuadraticCurve
+       from={[3,3]}
+       to={[22, 14]}
+       controlPoint={[8, 30, 18, 1]}
+       bs={8} />
+    </Board>
+  )
+}
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-legra",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Draw LEGO like briks using legrajs and Reactjs",
   "author": "christo-pr",
   "license": "MIT",

src/components/BezierCurve.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import Legra from 'legra'
+
+export function BezierCurve (props) {
+  const { from, to, controlPointX, controlPointY, options = {}, bs = 24, c = null } = props
+
+  useEffect(() => {
+    if (!c) return
+
+    const ctx = c.getContext('2d')
+    const legra = new Legra(ctx, bs)
+
+    // Draw the blizer curve
+    legra.bezierCurve(...from, ...controlPointX, ...controlPointY, ...to, options)
+  }, [from, controlPointX, controlPointY, to, options, bs, c])
+
+  return null
+}

src/components/Board.js

@@ -1,24 +1,30 @@
 import React, { useRef, useEffect, useState, Fragment } from 'react'
 
+import utils from '../utils'
+
 function Board (props) {
-  const { height = 200, width = 200, canvas = null } = props
+  const { canvas = null, width = 200, height = 200, ...canvasProps } = props
   const canvasRef = useRef(null)
   const [canvasBoard, setCanvasBoard] = useState(canvas)
 
+  if (canvasBoard) {
+    utils.cleanBoard(canvasBoard)
+  }
+
   useEffect(() => {
     if (canvasBoard) return
     setCanvasBoard({ ...canvasRef }.current)
-  }, [canvasRef])
+  }, [props])
 
   return (
     <Fragment>
       {
         !canvas ? (
           <canvas
             ref={canvasRef}
-            style={{ border: '2px dotted red', margin: '10px 10px' }}
-            height={height}
             width={width}
+            height={height}
+            {...canvasProps}
           ></canvas>
         ) : null
       }

src/components/QuadraticCurve.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import Legra from 'legra'
+
+export function QuadraticCurve (props) {
+  const { from, to, controlPoint, options = {}, bs = 24, c = null } = props
+
+  useEffect(() => {
+    if (!c) return
+
+    const ctx = c.getContext('2d')
+    const legra = new Legra(ctx, bs)
+
+    // Draw the quadratic curve
+    legra.quadraticCurve(...from, ...controlPoint, ...to, options)
+  }, [from, controlPoint, to, options, bs, c])
+
+  return null
+}
+

src/index.js

@@ -6,6 +6,8 @@ import { Polygon } from './components/Polygon'
 import { Ellipse } from './components/Ellipse'
 import { Image } from './components/Image'
 import { Arc } from './components/Arc'
+import { BezierCurve } from './components/BezierCurve'
+import { QuadraticCurve } from './components/QuadraticCurve'
 import Board from './components/Board'
 
 export { Line }
@@ -16,6 +18,8 @@ export { Polygon }
 export { Ellipse }
 export { Image }
 export { Arc }
+export { BezierCurve }
+export { QuadraticCurve }
 
 Board.Line = Line
 Board.Rectangle = Rectangle
@@ -25,5 +29,7 @@ Board.Polygon = Polygon
 Board.Ellipse = Ellipse
 Board.Image = Image
 Board.Arc = Arc
+Board.BezierCurve = BezierCurve
+Board.QuadraticCurve = QuadraticCurve
 
 export default Board

src/utils/index.js

@@ -0,0 +1,13 @@
+'use strict'
+
+/**
+ * Clean the board
+ */
+function cleanBoard(canvas) {
+  const ctx = canvas.getContext('2d')
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+}
+
+export default {
+  cleanBoard
+}