Skip to content

Commit

Permalink
feat: update svg-drawing packages
Browse files Browse the repository at this point in the history
  • Loading branch information
kmkzt committed May 17, 2020
1 parent 2625d97 commit 88517e7
Show file tree
Hide file tree
Showing 8 changed files with 366 additions and 1,548 deletions.
48 changes: 48 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -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
22 changes: 11 additions & 11 deletions .size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
{
"lib/index.min.js": {
"bundled": 11721,
"minified": 11712,
"gzipped": 3739
"bundled": 12217,
"minified": 12208,
"gzipped": 3754
},
"lib/index.cjs.js": {
"bundled": 20486,
"minified": 12455,
"gzipped": 3808
"bundled": 21163,
"minified": 12991,
"gzipped": 3821
},
"lib/index.esm.js": {
"bundled": 19981,
"minified": 12114,
"gzipped": 3712,
"bundled": 20559,
"minified": 12586,
"gzipped": 3720,
"treeshaked": {
"rollup": {
"code": 104,
"code": 79,
"import_statements": 14
},
"webpack": {
"code": 1088
"code": 1063
}
}
}
Expand Down
75 changes: 44 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)**

Expand All @@ -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/)
3 changes: 1 addition & 2 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
26 changes: 7 additions & 19 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -30,43 +30,40 @@
"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",
"prepare": "yarn prod",
"release": "release-it"
},
"dependencies": {
"svg-drawing": "2.0.0-alpha.4"
"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",
Expand All @@ -79,14 +76,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",
Expand All @@ -96,9 +89,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",
Expand All @@ -111,9 +102,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",
Expand Down
Loading

0 comments on commit 88517e7

Please sign in to comment.