diff --git a/README.md b/README.md index 2cfbf75..d3d2d39 100644 --- a/README.md +++ b/README.md @@ -22,23 +22,19 @@ yarn add react-legra ## Usage -All components but ``, recieve an optional `options` prop as a configuration object: +To start drawing, you first need to create a canvas to draw on, the `` component will do that for you. -```js -{ - color?: string; - filled?: boolean; -} -``` +The `` 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 **``:** +All the components but ``, recieve (optionally) some configuration props: -First, you'll need a **board** where you can draw. The `` 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() { ``` ----------------------------------------------------------- +#### `` + + +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 ( + + + +} +``` +----------------------------------------------------------- + +#### `` + + +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 ( + + + +} +``` +---------------------------------------------------------- + + ## Development You'll need run two process (2 tabs) for development: diff --git a/docs/bezier_curve.png b/docs/bezier_curve.png new file mode 100644 index 0000000..32c651c Binary files /dev/null and b/docs/bezier_curve.png differ diff --git a/docs/quadratic_curve.png b/docs/quadratic_curve.png new file mode 100644 index 0000000..58e564e Binary files /dev/null and b/docs/quadratic_curve.png differ diff --git a/example/src/App.js b/example/src/App.js index b48b8ce..941a5b9 100644 --- a/example/src/App.js +++ b/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() { + + ) } diff --git a/example/src/examples/BezierCurveExample.js b/example/src/examples/BezierCurveExample.js new file mode 100644 index 0000000..6bdcd6b --- /dev/null +++ b/example/src/examples/BezierCurveExample.js @@ -0,0 +1,15 @@ +import React from 'react' +import Board, { BezierCurve } from 'react-legra' + +export default function BezierCurveExample() { + return ( + + + + ) +} diff --git a/example/src/examples/QuadraticCurveExample.js b/example/src/examples/QuadraticCurveExample.js new file mode 100644 index 0000000..1ec6451 --- /dev/null +++ b/example/src/examples/QuadraticCurveExample.js @@ -0,0 +1,15 @@ +import React from 'react' +import Board, { QuadraticCurve } from 'react-legra' + +export default function QuadraticCurveExample() { + return ( + + + + ) +} + diff --git a/package.json b/package.json index 1ebab17..1d6b75e 100644 --- a/package.json +++ b/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", diff --git a/src/components/BezierCurve.js b/src/components/BezierCurve.js new file mode 100644 index 0000000..8d9bdcf --- /dev/null +++ b/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 +} diff --git a/src/components/Board.js b/src/components/Board.js index ee2663c..8b49f9b 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,14 +1,20 @@ 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 ( @@ -16,9 +22,9 @@ function Board (props) { !canvas ? ( ) : null } diff --git a/src/components/QuadraticCurve.js b/src/components/QuadraticCurve.js new file mode 100644 index 0000000..01a46ef --- /dev/null +++ b/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 +} + diff --git a/src/index.js b/src/index.js index e565e8a..da0a7ec 100644 --- a/src/index.js +++ b/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 diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..8ad90fe --- /dev/null +++ b/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 +}