Skip to content

Commit c36567a

Browse files
jaywcjlovejaywcjlove
committed
init project.
1 parent a864d4e commit c36567a

File tree

11 files changed

+153
-105
lines changed

11 files changed

+153
-105
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,7 @@ on:
44
branches:
55
- main
66

7-
# env:
8-
# SKIP_PREFLIGHT_CHECK: true
97
jobs:
10-
windows:
11-
runs-on: windows-latest
12-
steps:
13-
- uses: actions/checkout@v3
14-
- uses: actions/setup-node@v3
15-
with:
16-
node-version: 18
17-
18-
- name: Look Changelog
19-
uses: jaywcjlove/changelog-generator@main
20-
with:
21-
filter-author: (小弟调调™|Renovate Bot|renovate-bot)
22-
filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
23-
24-
- run: npm install --unsafe-perm
25-
# - run: npm run hoist
26-
- run: npm run build
27-
- run: npm run coverage
28-
- run: npm run doc
29-
308
build:
319
runs-on: ubuntu-latest
3210
permissions:
@@ -98,13 +76,13 @@ jobs:
9876
name: ${{ steps.changelog.outputs.tag }}
9977
tag: ${{ steps.changelog.outputs.tag }}
10078
body: |
101-
Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-monorepo-template/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html
79+
Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-signature/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html
10280
Comparing Changes: ${{ steps.changelog.outputs.compareurl }}
10381
10482
${{ steps.changelog.outputs.changelog }}
10583
10684
# - run: npm publish --access public --provenance
107-
# name: 📦 @uiw/react-monorepo-template to NPM
85+
# name: 📦 @uiw/react-signature to NPM
10886
# working-directory: core
10987
# continue-on-error: true
11088
# env:

‎core/.kktrc.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import lessModules from '@kkt/less-modules';
44
export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
55
conf = lessModules(conf, env, options);
66
if (options.bundle) {
7-
conf.output!.library = '@uiw/react-layout';
7+
conf.output!.library = '@uiw/react-signature';
88
conf.externals = {
99
react: {
1010
root: 'React',

‎core/README.md‎

Lines changed: 16 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,20 @@
1-
react-monorepo-template
1+
react-signature
22
===
33

4-
[![Build & Deploy](https://github.com/uiwjs/react-monorepo-template/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-monorepo-template/actions/workflows/ci.yml)
5-
[![Coverage Status](https://uiwjs.github.io/react-monorepo-template/badges.svg)](https://uiwjs.github.io/react-monorepo-template/coverage/lcov-report/)
4+
[![Build & Deploy](https://github.com/uiwjs/react-signature/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-signature/actions/workflows/ci.yml)
5+
[![Coverage Status](https://uiwjs.github.io/react-signature/badges.svg)](https://uiwjs.github.io/react-signature/coverage/lcov-report/)
66

7-
Simple [React](https://github.com/facebook/react) package development project example template.
7+
A signature board component for react.
88

9-
## Directory Structure
9+
## Using
1010

11-
```bash
12-
├── LICENSE
13-
├── README.md -> core/README.md
14-
├── core # 📦 package @uiw/react-monorepo-template
15-
│ ├── README.md
16-
│ ├── cjs # 🔄 Compiled cjs directory
17-
│ ├── esm # 🔄 Compiled esm directory
18-
│ ├── src # Package source directory
19-
│ ├── dist.css # 🔄 compile less to css
20-
│ ├── package.json # name => @uiw/react-monorepo-template
21-
│ └── tsconfig.json
22-
├── lerna.json
23-
├── package.json
24-
├── tsconfig.json
25-
├── test # ⛑ test case
26-
└── website # 🐝 Package example test, website
27-
├── README.md
28-
├── package.json
29-
├── public
30-
├── src
31-
└── tsconfig.json
11+
```jsx mdx:preview
12+
import React from "react";
13+
import Signature from '@uiw/react-signature';
14+
15+
export default function App() {
16+
return <Signature />;
17+
}
3218
```
3319

3420
## Development
@@ -42,8 +28,8 @@ npm run install
4228
2. To develop, run the self-reloading build:
4329

4430
```bash
45-
npm run build # Compile packages 📦 @uiw/react-monorepo-template
46-
npm run watch # Real-time compilation 📦 @uiw/react-monorepo-template
31+
npm run build # Compile packages 📦 @uiw/react-signature
32+
npm run watch # Real-time compilation 📦 @uiw/react-signature
4733
```
4834

4935
3. Run Document Website Environment:
@@ -58,30 +44,12 @@ npm run start
5844
npm run test
5945
```
6046

61-
62-
### Using
63-
64-
```jsx mdx:preview
65-
import React from "react";
66-
import MonorepoTemplate from '@uiw/react-monorepo-template';
67-
68-
export default function App() {
69-
return (
70-
<div className="container">
71-
<MonorepoTemplate>
72-
Example test
73-
</MonorepoTemplate>
74-
</div>
75-
);
76-
}
77-
```
78-
7947
## Contributors
8048

8149
As always, thanks to our amazing contributors!
8250

83-
<a href="https://github.com/uiwjs/react-monorepo-template/graphs/contributors">
84-
<img src="https://uiwjs.github.io/react-monorepo-template/CONTRIBUTORS.svg" />
51+
<a href="https://github.com/uiwjs/react-signature/graphs/contributors">
52+
<img src="https://uiwjs.github.io/react-signature/CONTRIBUTORS.svg" />
8553
</a>
8654

8755
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).

‎core/package.json‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
2-
"name": "@uiw/react-monorepo-template",
3-
"version": "1.1.0",
4-
"description": "Simple React package development project example template..",
2+
"name": "@uiw/react-signature",
3+
"version": "0.0.1",
4+
"description": "A signature board component for react.",
55
"author": "Kenny Wong <[email protected]>",
6-
"homepage": "https://uiwjs.github.io/react-monorepo-template",
6+
"homepage": "https://uiwjs.github.io/react-signature",
77
"repository": {
88
"type": "git",
9-
"url": "https://github.com/uiwjs/react-monorepo-template.git"
9+
"url": "https://github.com/uiwjs/react-signature.git"
1010
},
1111
"license": "MIT",
1212
"main": "./cjs/index.js",
@@ -22,12 +22,11 @@
2222
"access": "public"
2323
},
2424
"keywords": [
25-
"react-monorepo-template",
25+
"react-signature",
2626
"react.js",
2727
"react",
28-
"template",
28+
"signature",
2929
"monorepo",
30-
"monorepo-template",
3130
"uiw",
3231
"uiw-react",
3332
"react-component",
@@ -43,6 +42,10 @@
4342
"react": ">=16.9.0",
4443
"react-dom": ">=16.9.0"
4544
},
45+
"dependencies": {
46+
"perfect-freehand": "^1.2.0",
47+
"svg-pathdata": "^6.0.3"
48+
},
4649
"devDependencies": {
4750
"@babel/runtime": "^7.18.9",
4851
"@types/react": "^18.0.17",

‎core/src/index.tsx‎

Lines changed: 58 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,66 @@
1-
import React from 'react';
2-
import './styles/index.less';
1+
import React, { useEffect, useRef } from 'react';
2+
import { getStroke, type StrokeOptions } from 'perfect-freehand';
3+
import { getSvgPathFromStroke, getBoundingClientRect, getClinetXY, defaultOptions, defaultStyle } from './utils';
34

4-
export interface MonorepoTemplateProps extends React.AllHTMLAttributes<HTMLDivElement> {
5+
export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
56
prefixCls?: string;
7+
options?: StrokeOptions;
68
}
79

8-
export default function MonorepoTemplate(props: MonorepoTemplateProps = {}) {
9-
const { className, prefixCls = 'w-template', children, ...others } = props;
10+
let points: number[][] = [];
11+
export default function Signature(props: SignatureProps = {}) {
12+
const { className, prefixCls = 'w-signature', style, options, ...others } = props;
1013
const cls = [className, prefixCls].filter(Boolean).join(' ');
14+
const $svg = useRef<SVGSVGElement>(null);
15+
const $path = useRef<SVGPathElement>();
16+
17+
const handleMouseDown = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
18+
const { offsetY, offsetX } = getBoundingClientRect($svg.current);
19+
const clientX = e.clientX || e.nativeEvent.clientX;
20+
const clientY = e.clientY || e.nativeEvent.clientY;
21+
points = [[clientX - offsetX, clientY - offsetY]];
22+
const pathElm = document.createElementNS('http://www.w3.org/2000/svg', 'path');
23+
$path.current = pathElm;
24+
$svg.current!.appendChild(pathElm);
25+
};
26+
27+
const handleMouseMove = (e: MouseEvent | TouchEvent) => {
28+
if ($path.current) {
29+
const { offsetY, offsetX } = getBoundingClientRect($svg.current);
30+
const { clientX, clientY } = getClinetXY(e);
31+
points = [...points, [clientX - offsetX, clientY - offsetY]];
32+
const stroke = getStroke(points, { ...defaultOptions, ...options });
33+
const pathData = getSvgPathFromStroke(stroke);
34+
$path.current?.setAttribute('d', pathData);
35+
}
36+
};
37+
38+
const handleMouseUp = () => {
39+
points = [];
40+
$path.current = undefined;
41+
};
42+
43+
useEffect(() => {
44+
document.addEventListener('mousemove', handleMouseMove);
45+
document.addEventListener('mouseup', handleMouseUp);
46+
document.addEventListener('touchmove', handleMouseMove);
47+
document.addEventListener('touchend', handleMouseUp);
48+
return () => {
49+
document.removeEventListener('mousemove', handleMouseMove);
50+
document.removeEventListener('mouseup', handleMouseUp);
51+
document.removeEventListener('touchmove', handleMouseMove);
52+
document.removeEventListener('touchend', handleMouseUp);
53+
};
54+
}, []);
55+
1156
return (
12-
<div {...others} className={cls}>
13-
{children &&
14-
React.Children.map(children, (child) => {
15-
if (React.isValidElement(child)) return child;
16-
return <span> {child} </span>;
17-
})}
18-
</div>
57+
<svg
58+
{...others}
59+
ref={$svg}
60+
className={cls}
61+
onPointerDown={handleMouseDown}
62+
// onPointerMove={handlePointerMove}
63+
style={{ ...defaultStyle, ...style }}
64+
/>
1965
);
2066
}

‎core/src/styles/index.less‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎core/src/utils.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { type StrokeOptions } from 'perfect-freehand';
2+
3+
/**
4+
* Turn the points returned from perfect-freehand into SVG path data.
5+
*/
6+
export function getSvgPathFromStroke(stroke: number[][]) {
7+
if (!stroke.length) return '';
8+
const d = stroke.reduce(
9+
(acc, [x0, y0], i, arr) => {
10+
const [x1, y1] = arr[(i + 1) % arr.length];
11+
acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
12+
return acc;
13+
},
14+
['M', ...stroke[0], 'Q'],
15+
);
16+
17+
d.push('Z');
18+
return d.join(' ');
19+
}
20+
21+
export const defaultOptions: StrokeOptions = {
22+
size: 6,
23+
smoothing: 0.46,
24+
thinning: 0.73,
25+
streamline: 0.5,
26+
easing: (t) => t,
27+
start: {
28+
taper: 0,
29+
easing: (t) => t,
30+
cap: true,
31+
},
32+
end: {
33+
taper: 0,
34+
easing: (t) => t,
35+
cap: true,
36+
},
37+
};
38+
39+
export const getBoundingClientRect = (el: SVGSVGElement | null) => {
40+
const rect = el?.getBoundingClientRect();
41+
const offsetX = rect?.left || 0;
42+
const offsetY = rect?.top || 0;
43+
return { offsetX, offsetY };
44+
};
45+
46+
export const getClinetXY = (e: MouseEvent | TouchEvent) => {
47+
const { clientX, clientY } = e.type === 'touchmove' ? (e as TouchEvent).touches[0] : (e as MouseEvent);
48+
return { clientX, clientY };
49+
};
50+
51+
export const defaultStyle: React.CSSProperties = {
52+
'--w-signature-background': '#fff',
53+
touchAction: 'none',
54+
position: 'relative',
55+
width: '100%',
56+
height: '100%',
57+
backgroundColor: 'var(--w-signature-background)',
58+
} as React.CSSProperties;

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"version": "1.1.0",
2+
"version": "0.0.1",
33
"packages": ["website", "core"]
44
}

‎website/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
Document Website
22
===
33

4-
https://uiwjs.github.io/react-monorepo-template
4+
https://uiwjs.github.io/react-signature

‎website/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "website",
3-
"version": "1.1.0",
3+
"version": "0.0.1",
44
"private": true,
55
"scripts": {
66
"start": "kkt start",
77
"build": "kkt build"
88
},
99
"license": "MIT",
1010
"dependencies": {
11-
"@uiw/react-monorepo-template": "1.1.0",
11+
"@uiw/react-signature": "0.0.1",
1212
"@uiw/react-markdown-preview-example": "^2.0.0",
1313
"react": "^18.2.0",
1414
"react-dom": "^18.2.0"

0 commit comments

Comments
 (0)