Skip to content

Commit 697fec3

Browse files
LHRUNLHRUN
authored
Merge pull request #60 from LHRUN/dev
Feature/2.0.0
2 parents 289e3d1 + 804fce3 commit 697fec3

229 files changed

Lines changed: 11063 additions & 5961 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
dist
2+
node_modules
3+
dev-dist
4+
dev-sw.js
5+
registerSW.js
6+
sw.js
7+
workbox-*.js
8+
*.config.js
9+
*.config.cjs
10+
*.config.ts

‎.eslintrc.cjs‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
2+
root: true,
23
env: {
34
browser: true,
45
es2021: true,
@@ -8,28 +9,34 @@ module.exports = {
89
'eslint:recommended',
910
'plugin:react/recommended',
1011
'plugin:@typescript-eslint/recommended',
11-
'plugin:prettier/recommended',
12-
'plugin:react/jsx-runtime'
12+
'plugin:prettier/recommended'
1313
],
14-
ignorePatterns: ['node_modules'],
15-
overrides: [],
1614
parser: '@typescript-eslint/parser',
1715
parserOptions: {
18-
ecmaVersion: 2022,
19-
sourceType: 'module'
20-
},
21-
plugins: ['react', '@typescript-eslint', 'prettier'],
22-
rules: {
23-
'prettier/prettier': ['error', { endOfLine: 'auto' }],
24-
'arrow-body-style': 'off',
25-
'prefer-arrow-callback': 'off',
26-
'react/no-unknown-property': ['error', { ignore: ['t', 'p-id'] }],
27-
'@typescript-eslint/no-explicit-any': 'off',
28-
'no-async-promise-executor': 'off'
16+
ecmaVersion: 'latest',
17+
sourceType: 'module',
18+
ecmaFeatures: {
19+
jsx: true
20+
}
2921
},
22+
plugins: ['react', '@typescript-eslint'],
3023
settings: {
3124
react: {
3225
version: 'detect'
3326
}
34-
}
27+
},
28+
rules: {
29+
'@typescript-eslint/no-explicit-any': 'off',
30+
'@typescript-eslint/no-unused-vars': [
31+
'error',
32+
{
33+
argsIgnorePattern: '^_',
34+
varsIgnorePattern: '^_',
35+
ignoreRestSiblings: true
36+
}
37+
],
38+
'react/react-in-jsx-scope': 'off',
39+
'react/prop-types': 'off'
40+
},
41+
ignorePatterns: ['dist', 'node_modules', 'dev-dist']
3542
}

‎CHANGELOG.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,32 @@
1+
# 2.0.0
2+
3+
### Feat
4+
5+
- Tool Panel
6+
- Refined overall layout for a more intuitive workflow.
7+
- Free Drawing
8+
- Added multi-color switching and customizable configurations.
9+
- Brush shadows now support adjustable X and Y offsets.
10+
- Shape Drawing
11+
- Added dynamic drawing support for Lucide icons.
12+
- Introduced a “hand-drawn” line style option.
13+
- Line and fill colors can now be switched freely.
14+
- Added five new shape fill patterns for richer visual effects.
15+
- Selection Mode
16+
- Added a “Lock” toggle to prevent selected objects from being moved, dragged, or rotated.
17+
- Canvas Background
18+
- Supports simultaneous drawing of background color, image, and camera feed, with adjustable layer order.
19+
- Background color now supports gradient effects.
20+
- Background images support background removal and segmentation processing.
21+
- File List
22+
- Improved add/delete interactions for smoother operation.
23+
- Added file sorting functionality.
24+
- Camera
25+
- Added a camera button at the bottom-left corner to toggle the camera.
26+
- Supports real-time capture or freezing a frame as the background, with adjustable filters, brightness, contrast, saturation, and opacity.
27+
- Shortcuts
28+
- Refactored event handling module and added multiple new shortcuts for canvas transformations, element adjustments, and tool panel switching.
29+
130
# 1.5.7
231

332
### Feat

‎README.md‎

Lines changed: 10 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</div>
44

55
<h4 align="center">
6-
A fun art drawing board that supports multi-end operation
6+
An open-source web-based creative canvas
77
</h4>
88

99
<div align="center">
@@ -32,47 +32,16 @@ Link: [https://songlh.top/paint-board/](https://songlh.top/paint-board/)
3232
<img style="width: 100%" src="https://raw.githubusercontent.com/LHRUN/file-store/main/paint-board/preview_device.png" alt="preview"/>
3333
</div>
3434

35-
## Completed Features:
35+
## Features
3636
+ Drawing Mode
37-
- FreeStyle
38-
- Provides 12 different styles of brushes, including Basic Brush, Rainbow Brush, Multi-Shape Brush, Multi-Material Brush, Pixel Brush, Multi-Color Brush, Text Brush, Multi-Line Connection Brush, Reticulate Brush, Multi-Point Connection Brush, Wiggle Brush, Thorn Brush. Satisfy the diversified drawing.
39-
- All brushes support color and brush width configuration, in addition to multi-shape, multi-material, multi-color and other brushes support custom configuration.
40-
- ShapeDraw
41-
- A variety of common shapes are provided for drawing, with support for multi-point segments and arrows. The shapes support border and fill styles.
42-
+ Eraser Mode
43-
- Eraser mode linearly erases all content and supports linear width configuration.
44-
+ Select Mode
45-
- In the selection mode, you can frame the drawing content by clicking on it. The click handle supports dragging, zooming and rotating operations, providing flexible editing.
46-
- Selecting images supports multiple filter configurations.
47-
- Supports font and style settings when selecting text.
48-
- Layer settings are supported for all drawings, including Move Layer Up, Move Layer Down, Move to Top, and Move to Bottom.
49-
- All drawings support transparency configurations.
50-
- All drawings support eraser or not erasable configuration.
51-
+ Drawing Board Configuration
52-
- The drawing board supports background configuration, including colour, background image, and transparency.
53-
- The drawing board supports customized width and height configurations.
54-
- Supports painting caching, enabling caching will improve painting performance in the presence of large amounts of painted content, while disabling caching will improve canvas sharpness.
55-
- Added Guide Line drawing feature.
56-
+ Multifunction Menu
57-
- The bottom left button shows the current zoom ratio in real time, click it to reset the zoom ratio.
58-
- The list of buttons in the center, in order from left to right, are: Undo, Redo, Copy Current Selection, Delete Current Selection, Draw Text, Upload Image, Clear Drawing, Save as Image, and Open File List.
59-
- Upload images with support for background remove, image segmentation. This function needs WebGPU support in your browser.
60-
- Save as image supports custom configurations. Rotate, Scale, Crop
61-
- PC:
62-
- Hold down the Space key and click the left mouse button to move the canvas, scroll the mouse wheel to zoom the canvas.
63-
- Press and hold the Backspace key to delete the selection.
64-
- Press and hold Ctrl + V at the same time to paste the clipboard image.
65-
- Mobile:
66-
- Supports dragging and zooming the canvas after a two-finger press.
67-
+ Multifile Configuration
68-
- Support multiple canvas switching, each canvas can be customized title, add, delete, and provide upload and download.
69-
+ i18n
70-
- Support 中文(简体), 中文(繁体), English, 日本語, 한국어.
71-
+ PWA support, offline access.
72-
73-
## Future Plans
74-
+ Multi-platform authentication login and data synchronization
75-
+ AI Enhanced Drawing
37+
- Free Drawing: Provides 12 different brush styles, including basic brush, rainbow brush, multi-shape brush, multi-material brush, pixel brush, multi-color brush, text brush, multi-line connection brush, mesh brush, multi-point connection brush, wave curve brush, and thorn brush to meet diverse drawing needs.
38+
- Shape Drawing: Supports drawing rich graphics, including built-in shapes and Lucide icon library graphics, which can be used with just a click. Configurable line width, line style, fill color, and fill style.
39+
+ Eraser Mode: Can linearly erase all content and supports linear width configuration.
40+
+ Selection Mode: Supports clicking or box selection for editing. After selection, you can perform drag, scale, rotate operations and various custom configurations through handles.
41+
+ Canvas Mode: Supports canvas background, custom size, and global drawing configuration.
42+
+ Action Bar: Functions from left to right are undo, redo, copy current selection, delete current selection, draw text, upload image, clear drawing content, save as image, and open file list.
43+
+ Multi-file Configuration: Supports switching between multiple canvases, each canvas can have custom titles, add, delete, and provides sorting and upload/download functions.
44+
+ i18n: 中文(简体), 中文(繁体), English, 日本語, 한국어.
7645

7746
## V1.3.0 Video Demo
7847

‎index.html‎

Lines changed: 125 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,132 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/canvas.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>paint-board</title>
8-
<meta name="twitter:description" content="multifunctional drawing board">
9-
<meta name="keywords" content="drawing board,paint board,html canvas,canvas">
6+
7+
<!-- Primary Meta Tags -->
8+
<title>
9+
Paint Board - Open Source Creative Canvas | Draw, Design & Create Online
10+
</title>
11+
<meta
12+
name="title"
13+
content="Paint Board - Open Source Creative Canvas | Draw, Design & Create Online"
14+
/>
15+
<meta
16+
name="description"
17+
content="A powerful web-based creative canvas for drawing, designing, and digital art creation."
18+
/>
19+
<meta
20+
name="keywords"
21+
content="drawing board, paint board, html canvas, canvas, digital art, online drawing, creative tools, web design, sketch, illustration, AI image segmentation, drawing app, design tool"
22+
/>
23+
<meta name="author" content="Leo" />
24+
<meta name="robots" content="index, follow" />
25+
<meta name="language" content="English" />
26+
<meta name="revisit-after" content="7 days" />
27+
28+
<!-- Open Graph / Facebook -->
29+
<meta property="og:type" content="website" />
30+
<meta property="og:url" content="https://lhrun.github.io/paint-board/" />
31+
<meta
32+
property="og:title"
33+
content="Paint Board - Open Source Creative Canvas"
34+
/>
35+
<meta
36+
property="og:description"
37+
content="A powerful web-based creative canvas for drawing, designing, and digital art creation."
38+
/>
39+
<meta
40+
property="og:image"
41+
content="https://raw.githubusercontent.com/LHRUN/file-store/main/paint-board/logo.png"
42+
/>
43+
<meta property="og:image:width" content="1200" />
44+
<meta property="og:image:height" content="630" />
45+
<meta property="og:site_name" content="Paint Board" />
46+
<meta property="og:locale" content="en_US" />
47+
48+
<!-- Twitter -->
49+
<meta property="twitter:card" content="summary_large_image" />
50+
<meta
51+
property="twitter:url"
52+
content="https://lhrun.github.io/paint-board/"
53+
/>
54+
<meta
55+
property="twitter:title"
56+
content="Paint Board - Open Source Creative Canvas"
57+
/>
58+
<meta
59+
property="twitter:description"
60+
content="A powerful web-based creative canvas for drawing, designing, and digital art creation."
61+
/>
62+
<meta
63+
property="twitter:image"
64+
content="https://raw.githubusercontent.com/LHRUN/file-store/main/paint-board/logo.png"
65+
/>
66+
<meta property="twitter:creator" content="@Song_LongHao" />
67+
68+
<!-- Favicon and Icons -->
69+
<link rel="icon" type="image/svg+xml" href="/paint-board/canvas.svg" />
70+
<link
71+
rel="apple-touch-icon"
72+
sizes="192x192"
73+
href="/paint-board/pwa-192.png"
74+
/>
75+
<link
76+
rel="icon"
77+
type="image/png"
78+
sizes="192x192"
79+
href="/paint-board/pwa-192.png"
80+
/>
81+
<link
82+
rel="icon"
83+
type="image/png"
84+
sizes="512x512"
85+
href="/paint-board/pwa-512.png"
86+
/>
87+
88+
<!-- Canonical URL -->
89+
<link rel="canonical" href="https://lhrun.github.io/paint-board/" />
90+
91+
<!-- Theme Color -->
92+
<meta name="theme-color" content="#eef1ff" />
93+
<meta name="msapplication-TileColor" content="#eef1ff" />
94+
95+
<!-- Preconnect to external domains for performance -->
96+
<link rel="preconnect" href="https://fonts.googleapis.com" />
97+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
98+
99+
<!-- Structured Data -->
100+
<script type="application/ld+json">
101+
{
102+
"@context": "https://schema.org",
103+
"@type": "WebApplication",
104+
"name": "Paint Board",
105+
"description": "A powerful web-based creative canvas for drawing, designing, and digital art creation",
106+
"url": "https://lhrun.github.io/paint-board/",
107+
"applicationCategory": "DesignApplication",
108+
"operatingSystem": "Web Browser",
109+
"offers": {
110+
"@type": "Offer",
111+
"price": "0",
112+
"priceCurrency": "USD"
113+
},
114+
"creator": {
115+
"@type": "Person",
116+
"name": "Leo"
117+
},
118+
"screenshot": "https://raw.githubusercontent.com/LHRUN/file-store/main/paint-board/logo.png",
119+
"featureList": [
120+
"Multiple drawing tools",
121+
"Shape creation and editing",
122+
"Layer management",
123+
"Export functionality",
124+
"PWA support",
125+
"Multi-language support"
126+
],
127+
"browserRequirements": "Requires JavaScript. Requires HTML5.",
128+
"softwareVersion": "2.0.0"
129+
}
130+
</script>
10131
</head>
11132
<body>
12133
<div id="root"></div>

‎package.json‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "paint-board",
33
"private": true,
4-
"version": "1.5.7",
4+
"version": "2.0.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
@@ -13,18 +13,22 @@
1313
},
1414
"dependencies": {
1515
"@huggingface/transformers": "^3.0.0",
16-
"daisyui": "^2.46.1",
16+
"daisyui": "^4.12.24",
1717
"fabric": "^5.3.0",
18+
"gradient-parser": "^1.1.1",
1819
"i18next": "^22.4.9",
1920
"idb-keyval": "^6.2.1",
2021
"immer": "^10.0.3",
2122
"jsondiffpatch": "^0.6.0",
22-
"lodash": "^4.17.21",
23+
"lodash-es": "^4.17.21",
24+
"lucide-react": "^0.544.0",
2325
"react": "^18.2.0",
26+
"react-best-gradient-color-picker": "^3.0.14",
2427
"react-dom": "^18.2.0",
2528
"react-i18next": "^12.1.5",
2629
"react-image-crop": "^11.0.7",
27-
"swiper": "^11.0.5",
30+
"roughjs": "^4.6.6",
31+
"sortablejs": "^1.15.6",
2832
"uuid": "^9.0.1",
2933
"zustand": "^4.4.7"
3034
},
@@ -34,15 +38,17 @@
3438
"@stylelint/postcss-css-in-js": "^0.38.0",
3539
"@types/fabric": "^5.3.6",
3640
"@types/lodash": "^4.14.191",
41+
"@types/lodash-es": "^4.17.12",
3742
"@types/node": "^18.11.18",
3843
"@types/react": "^18.0.26",
3944
"@types/react-dom": "^18.0.10",
45+
"@types/sortablejs": "^1.15.8",
4046
"@types/uuid": "^9.0.7",
41-
"@typescript-eslint/eslint-plugin": "^5.48.1",
42-
"@typescript-eslint/parser": "^5.48.1",
43-
"@vitejs/plugin-react": "^2.2.0",
47+
"@typescript-eslint/eslint-plugin": "^8.44.0",
48+
"@typescript-eslint/parser": "^8.44.0",
49+
"@vitejs/plugin-react": "^4.7.0",
4450
"autoprefixer": "^10.4.13",
45-
"eslint": "^8.31.0",
51+
"eslint": "^8.57.1",
4652
"eslint-config-prettier": "^8.6.0",
4753
"eslint-plugin-prettier": "^4.2.1",
4854
"eslint-plugin-react": "^7.31.11",
@@ -56,11 +62,11 @@
5662
"stylelint-config-recess-order": "^3.1.0",
5763
"stylelint-config-standard": "^29.0.0",
5864
"stylelint-prettier": "^2.0.0",
59-
"tailwindcss": "^3.2.4",
60-
"typescript": "^4.9.4",
61-
"vite": "^3.2.5",
65+
"tailwindcss": "^3.4.17",
66+
"typescript": "^5.9.2",
67+
"vite": "^5.4.20",
6268
"vite-plugin-eslint": "^1.8.1",
63-
"vite-plugin-pwa": "0.16.7",
69+
"vite-plugin-pwa": "0.20.5",
6470
"vite-plugin-svgr": "^4.2.0"
6571
},
6672
"lint-staged": {

0 commit comments

Comments
 (0)