Refactor

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .cache
-dist
+dist
+public

src/App.tsx → example/App.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import { Artboard, ArtboardRef } from "./components/Artboard";
-import { useBrush } from "./tools/brush";
+import { useBrush, Artboard, ArtboardRef } from "../src/";
 
 export function App() {
   const [color, setColor] = useState("#993366");

package.json

@@ -1,13 +1,16 @@
 {
   "name": "react-artboard",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "author": "Matt Kane <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "clean": "rm dist/bundle.js",
-    "start": "parcel src/index.html --host 0.0.0.0",
-    "build-prod": "parcel build src/index.html"
+    "clean": "rm dist/*",
+    "start": "parcel example/index.html --host 0.0.0.0 --out-dir public",
+    "build-example": "parcel build example/index.html --out-dir public",
+    "build-library": "parcel build src/index.ts",
+    "typegen": "tsc --emitDeclarationOnly --declaration"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

src/components/Artboard.tsx

@@ -8,14 +8,14 @@ import React, {
 } from "react";
 
 import {
-  Brush,
   getMousePoint,
   getTouchPoint,
   mouseButtonIsDown,
   Point,
-} from "../helpers";
+} from "../utils/pointUtils";
 
-export interface Props extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+export interface ArtboardProps
+  extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
   tool: ToolHandlers;
 }
 
@@ -33,7 +33,7 @@ export interface ToolHandlers {
 }
 
 export const Artboard = forwardRef(function Artboard(
-  { tool, style, ...props }: Props,
+  { tool, style, ...props }: ArtboardProps,
   ref: ForwardedRef<ArtboardRef>
 ) {
   const [context, setContext] = useState<CanvasRenderingContext2D | null>();

src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./tools/brush/useBrush";
+export * from "./components/Artboard";
+export * from "./utils/pointUtils";

src/index.ts

@@ -0,0 +1,3 @@
+export * from "./tools/brush/useBrush";
+export * from "./components/Artboard";
+export * from "./utils/pointUtils";

src/tools/brush/brushHelpers.d.ts

@@ -0,0 +1,11 @@
+import { Point } from "../../utils/pointUtils";
+export declare function varyColour(sourceColour: string, varyBrightness: number): any;
+export interface Bristle {
+    distance: number;
+    thickness: number;
+    colour: string;
+}
+export declare const rotatePoint: (distance: number, angle: number, origin: Point) => Point;
+export declare const getBearing: (origin: Point, destination: Point) => number;
+export declare const getNewAngle: (origin: Point, destination: Point, oldAngle?: number) => number;
+export declare const angleDiff: (angleA: number, angleB: number) => number;

src/tools/brush/brushHelpers.ts

@@ -0,0 +1,50 @@
+import tinycolor from "tinycolor2";
+import { Point } from "../../utils/pointUtils";
+
+export function varyColour(sourceColour: string, varyBrightness: number) {
+  const amount = Math.round(Math.random() * varyBrightness);
+  const alpha = 1 - Math.random() / 4;
+  const colour = tinycolor(sourceColour);
+  const varied = colour.darken(amount - varyBrightness / 2).setAlpha(alpha);
+  return varied.toPercentageRgbString();
+}
+
+export interface Bristle {
+  distance: number;
+  thickness: number;
+  colour: string;
+}
+
+export const rotatePoint = (
+  distance: number,
+  angle: number,
+  origin: Point
+): Point => [
+  origin[0] + distance * Math.cos(angle),
+  origin[1] + distance * Math.sin(angle),
+];
+
+export const getBearing = (origin: Point, destination: Point) =>
+  (Math.atan2(destination[1] - origin[1], destination[0] - origin[0]) -
+    Math.PI / 2) %
+  (Math.PI * 2);
+
+export const getNewAngle = (
+  origin: Point,
+  destination: Point,
+  oldAngle?: number
+): number => {
+  const bearing = getBearing(origin, destination);
+  if (typeof oldAngle === "undefined") {
+    return bearing;
+  }
+  return oldAngle - angleDiff(oldAngle, bearing);
+};
+
+export const angleDiff = (angleA: number, angleB: number) => {
+  const twoPi = Math.PI * 2;
+  const diff =
+    ((angleA - (angleB > 0 ? angleB : angleB + twoPi) + Math.PI) % twoPi) -
+    Math.PI;
+  return diff < -Math.PI ? diff + twoPi : diff;
+};

src/tools/brush/useBrush.d.ts

@@ -0,0 +1,8 @@
+import { Bristle } from "./brushHelpers";
+import { ToolHandlers } from "../../components/Artboard";
+export declare type Brush = Array<Bristle>;
+export interface UseBrushProps {
+    color?: string;
+    strokeWidth?: number;
+}
+export declare function useBrush({ color, strokeWidth, }: UseBrushProps): ToolHandlers;