Merge pull request #15 from kmkzt/release/v2

.github/workflows/test.yml

@@ -0,0 +1,48 @@
+name: CI
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.13.0]
+
+    steps:
+      - name: Begin CI...
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Use cached node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            nodeModules-
+      - name: Install dependencies
+        # TODO: add check yarn.lock
+        # run: yarn install --frozen-lockfile
+        run: yarn install
+        env:
+          CI: true
+
+      - name: Lint
+        run: yarn lint
+        env:
+          CI: true
+
+      - name: Test
+        run: yarn test
+        env:
+          CI: true

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "lib/index.min.js": {
-    "bundled": 143133,
-    "minified": 141985,
-    "gzipped": 36279
+    "bundled": 12217,
+    "minified": 12208,
+    "gzipped": 3754
   },
   "lib/index.cjs.js": {
-    "bundled": 360238,
-    "minified": 142287,
-    "gzipped": 36334
+    "bundled": 21163,
+    "minified": 12991,
+    "gzipped": 3821
   },
   "lib/index.esm.js": {
-    "bundled": 359695,
-    "minified": 141968,
-    "gzipped": 36255,
+    "bundled": 20559,
+    "minified": 12586,
+    "gzipped": 3720,
     "treeshaked": {
       "rollup": {
-        "code": 136505,
+        "code": 79,
         "import_statements": 14
       },
       "webpack": {
-        "code": 137780
+        "code": 1063
       }
     }
   }

README.md

@@ -2,9 +2,7 @@
 
 [![npm version](https://badge.fury.io/js/react-hooks-svgdrawing.svg)](https://www.npmjs.com/package/react-hooks-svgdrawing) [![npm download](https://img.shields.io/npm/dt/react-hooks-svgdrawing.svg)](https://www.npmjs.com/package/react-hooks-svgdrawing)
 
-### introduction
-
-`react-hooks-svgdrawing` is react drawing library.
+`react-hooks-svgdrawing` is React drawing library. This library is a React extension of [svg-drawing](https://github.com/kmkzt/svg-drawing)
 
 **[demo](https://kmkzt.github.io/react-hooks-svgdrawing/)**
 
@@ -16,55 +14,70 @@ yarn add react react-hooks-svgdrawing
 
 ## How to use
 
-started
+This is example.
 
 ```javascript
 import React from 'react'
 import { useSvgDrawing } from 'react-hooks-svgdrawing'
 
 const Drawing = () => {
-  const [
-    renderRef,
-    action
-  ] = useSvgDrawing()
-  return <div ref={renderRef}>
+  const [renderRef, draw] = useSvgDrawing()
+  // Drawing area will be resized to fit the rendering area
+  return <div style={{ width: 500, height: 500 }} ref={renderRef} />
 }
 ```
 
-Drawing init options.
+useSvgDrawing options.
 
 ```javascript
-const [renderRef, action] = useSvgDrawing({
+const [renderRef, draw] = useSvgDrawing({
   penWidth: 10, // pen width
-  penColor: '#e00', // pen color
-  width: 300, // drawing area width
-  height: 300 // drawing area height
+  penColor: '#e00' // pen color
+  close: true // Use close command for path. Default is false.
+  curve: false, // Use curve command for path. Default is true.
+  delay: 60, // Set how many ms to draw points every.
+  fill: ''// Set fill attribute for path. default is `none`
 })
 ```
 
 Drawing methods.
 
 ```javascript
-// action
-const [renderRef, action] = useSvgDrawing()
-
-// drawing all clear
-action.clear()
-
-// svg download
-action.download()
-
-// undo drawing
-action.undo()
-
-// change pen config
-action.changePenColor('#00b')
-// change pen widht
-action.changePenWidth(10)
+const [renderRef, draw] = useSvgDrawing()
+
+// Call the SvgDrawing. Access the current settings of penWidth, penColor etc
+// Details are https://github.com/kmkzt/svg-drawing.
+console.log(draw.instance.penColor) // #333
+console.log(draw.instance.penWidth // 1
+
+// Erase all drawing.
+draw.clear()
+
+// Download image.
+draw.download() // default svg download
+draw.download('svg')
+draw.download('png')
+draw.download('jpg')
+
+// Undo drawing.
+draw.undo()
+
+// Change pen config
+draw.changePenColor('#00b')
+// Change pen width
+draw.changePenWidth(10)
+// Change fill attribure of svg path element.
+draw.changFill('#00b')
+// Change throttle delay of  drawing
+draw.changeDelay(10)
+// Set whether to use curved comma for svg path element.
+draw.changCurve(false)
+// Set whether to use curved comma for svg path element.
+draw.changeClose(true)
 
 // get svgXML
 // return SVGElement
-console.log(action.getSvgXML()) // <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500"><defs></defs><g id="two-0" transform="matrix(1 0 0 1 0 0)" opacity="1"><path transform="matrix(1 0 0 1 0 0)" d="..." fill="transparent" stroke="#000" stroke-width="3" stroke-opacity="1" fill-opacity="1" class="" visibility="visible" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" id="two-1"></path></g></svg>
+console.log(draw.getSvgXML()) // <svg width="502" height="502"><path stroke-width="3" stroke="#000" fill="none" stroke-linejoin="round" stroke-linecap="round" d="M 156.671875 284.7265625 C 156.671875 286.1465625 156.671875 287.89984375 156.671875 291.83984375  ...
 ```
 
 [example code](src/example/)

jest.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
-    '^.+\\.(js|jsx)$': 'babel-jest'
+    '^.+\\.(t|j)sx?$': 'babel-jest'
   },
   testRegex: '(\\.|/)(test|spec)\\.(t|j)sx?$',
   moduleNameMapper: {

package.json

@@ -2,13 +2,13 @@
   "name": "react-hooks-svgdrawing",
   "version": "1.3.0",
   "license": "MIT",
-  "description": "react svg drawing library.",
+  "description": "React svg drawing library. This library is a React extension of svg-drawing.",
   "author": "kmkzt<[email protected]>",
   "keywords": [
     "react",
     "svg",
     "drawing",
-    "two.js"
+    "svg-drawing"
   ],
   "type": "module",
   "types": "lib/index.d.ts",
@@ -30,49 +30,45 @@
     "email": "[email protected]"
   },
   "scripts": {
+    "dev": "NODE_ENV=development webpack-dev-server",
     "prod": "npm-run-all lib:*",
     "lib:clear": "rimraf lib/*",
     "lib:rollup": "NODE_ENV=production rollup -c",
     "lib:tsc": "NODE_ENV=production tsc --emitDeclarationOnly",
-    "demo:dev": "NODE_ENV=development webpack-dev-server",
     "demo:prod": "NODE_ENV=production webpack -p",
-    "test": "NODE_ENV=test jest --passWithNoTests",
+    "test": "npm-run-all test:*",
+    "test:unit": "NODE_ENV=test jest --passWithNoTests",
+    "test:type": "NODE_ENV=production tsc --noEmit",
+    "lint": "eslint ./src --ext .js,.ts,.tsx",
     "prepare": "yarn prod",
     "release": "release-it"
   },
   "dependencies": {
-    "svg-drawing": "1.8.6",
-    "two.js": "0.7.0-beta.3"
+    "svg-drawing": "2.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.6",
     "@babel/plugin-transform-runtime": "7.9.6",
-    "@babel/polyfill": "7.8.7",
     "@babel/preset-env": "7.9.6",
     "@babel/preset-react": "7.9.4",
     "@babel/preset-typescript": "7.9.0",
     "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-json": "4.0.2",
     "@rollup/plugin-node-resolve": "7.1.1",
     "@rollup/plugin-replace": "2.3.1",
-    "@types/autoprefixer": "9.6.1",
-    "@types/babel-core": "6.25.6",
-    "@types/babel__core": "7.1.2",
     "@types/dotenv-webpack": "1.7.0",
     "@types/eslint": "6.8.0",
     "@types/eslint-plugin-prettier": "3.1.0",
     "@types/html-webpack-plugin": "3.2.1",
     "@types/jest": "24.0.18",
     "@types/node": "12.7.3",
-    "@types/node-sass": "4.11.0",
     "@types/prettier": "1.18.2",
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
     "@types/rimraf": "2.0.2",
-    "@types/two.js": "0.7.2",
     "@types/uglifyjs-webpack-plugin": "1.1.0",
     "@types/webpack": "4.39.1",
     "@types/webpack-dev-server": "3.1.7",
@@ -81,14 +77,10 @@
     "@typescript-eslint/eslint-plugin": "2.31.0",
     "@typescript-eslint/parser": "2.31.0",
     "@typescript-eslint/typescript-estree": "2.31.0",
-    "autoprefixer": "9.6.1",
-    "babel-core": "6.26.3",
     "babel-jest": "24.9.0",
     "babel-loader": "8.0.6",
     "babel-plugin-add-module-exports": "1.0.2",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "babel-preset-es2015": "6.24.1",
-    "css-loader": "3.2.0",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-loader": "4.0.2",
@@ -98,9 +90,7 @@
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
     "jest": "24.9.0",
-    "node-sass": "4.12.0",
     "npm-run-all": "4.1.5",
-    "postcss-loader": "3.0.0",
     "pressure": "2.1.2",
     "prettier": "1.18.2",
     "react": "16.9.0",
@@ -113,9 +103,6 @@
     "rollup-plugin-size-snapshot": "0.11.0",
     "rollup-plugin-sourcemaps": "0.5.0",
     "rollup-plugin-terser": "5.2.0",
-    "sass-loader": "8.0.0",
-    "style-loader": "1.0.0",
-    "ts-jest": "24.0.2",
     "ts-loader": "6.0.4",
     "tsconfig-paths-webpack-plugin": "3.2.0",
     "typescript": "3.6.2",