From d3ba354e32dd942954e00012e809180f6176f51b Mon Sep 17 00:00:00 2001 From: LH_R Date: Mon, 25 Nov 2024 22:53:31 +0800 Subject: [PATCH 1/4] feat: add eraser config --- .../selectConfig/eraserConfig/index.tsx | 63 +++++++++++++++++++ .../toolPanel/selectConfig/index.tsx | 3 + src/i18n/en.json | 4 ++ src/i18n/zh.json | 4 ++ src/types/index.d.ts | 1 + 5 files changed, 75 insertions(+) create mode 100644 src/components/toolPanel/selectConfig/eraserConfig/index.tsx diff --git a/src/components/toolPanel/selectConfig/eraserConfig/index.tsx b/src/components/toolPanel/selectConfig/eraserConfig/index.tsx new file mode 100644 index 0000000..76bbc03 --- /dev/null +++ b/src/components/toolPanel/selectConfig/eraserConfig/index.tsx @@ -0,0 +1,63 @@ +import { useMemo, FC } from 'react' +import { paintBoard } from '@/utils/paintBoard' +import { useTranslation } from 'react-i18next' + +interface IProps { + refreshCount: number +} + +const EraserConfig: FC = ({ refreshCount }) => { + const { t } = useTranslation() + + const erasableControl = useMemo(() => { + let show = false + let erasable = true + const objects = paintBoard.canvas?.getActiveObjects() + + if (objects?.length) { + show = true + erasable = !objects?.every((obj) => obj?.erasable === false) + } + + return { + show, + erasable + } + }, [refreshCount]) + + const updateObjectErasable = () => { + const objects = paintBoard.canvas?.getActiveObjects() + if (objects?.length) { + objects?.forEach((obj) => { + obj.erasable = !erasableControl.erasable + }) + paintBoard.canvas?.fire('selection:updated') + paintBoard.render() + } + } + + return ( + <> + {erasableControl.show && ( + <> +
+ {t('eraserConfig.eraser')} +
+
+
+ {t('eraserConfig.erasable')} +
+ +
+ + )} + + ) +} + +export default EraserConfig diff --git a/src/components/toolPanel/selectConfig/index.tsx b/src/components/toolPanel/selectConfig/index.tsx index e9b65b7..23534e0 100644 --- a/src/components/toolPanel/selectConfig/index.tsx +++ b/src/components/toolPanel/selectConfig/index.tsx @@ -4,6 +4,7 @@ import { ELEMENT_CUSTOM_TYPE, SHAPE_ELEMENT_CUSTOM_TYPE } from '@/constants' import LayerConfig from './layerConfig' import OpacityConfig from './opacityConfig' +import EraserConfig from './eraserConfig' import ImageFilterConfig from './imageFilterConfig' import FontStyleConfig from './fontStyleConfig' import SelectShapeConfig from './selectShapeConfig' @@ -24,6 +25,8 @@ const SelectConfig = () => {
+ + {paintBoard.canvas?.getActiveObject() && } {paintBoard.canvas?.getActiveObject()?._customType === diff --git a/src/i18n/en.json b/src/i18n/en.json index bff9349..ae67a2d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -174,5 +174,9 @@ "rotate": "Rotate", "scale": "Scale", "size": "Size" + }, + "eraserConfig": { + "eraser": "Eraser", + "erasable": "Erasable" } } \ No newline at end of file diff --git a/src/i18n/zh.json b/src/i18n/zh.json index b9ca1ff..6bd1476 100644 --- a/src/i18n/zh.json +++ b/src/i18n/zh.json @@ -174,5 +174,9 @@ "rotate": "旋转", "scale": "缩放", "size": "尺寸" + }, + "eraserConfig": { + "eraser": "橡皮擦", + "erasable": "可擦除" } } \ No newline at end of file diff --git a/src/types/index.d.ts b/src/types/index.d.ts index a1239e5..0dd736e 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -12,6 +12,7 @@ declare module 'fabric/fabric-impl' { _customType: string __corner: number toObject_original: FabricObject.toObject + erasable: boolean } export interface Canvas { From 8ed8a4ea5c6013953e1b1c6608a032309445e739 Mon Sep 17 00:00:00 2001 From: LH_R Date: Mon, 25 Nov 2024 22:54:34 +0800 Subject: [PATCH 2/4] feat: update version --- package.json | 2 +- src/store/files.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4bbb309..e2a9034 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "paint-board", "private": true, - "version": "1.5.3", + "version": "1.5.4", "type": "module", "scripts": { "dev": "vite", diff --git a/src/store/files.ts b/src/store/files.ts index c854889..59703a0 100644 --- a/src/store/files.ts +++ b/src/store/files.ts @@ -55,7 +55,7 @@ interface FileAction { } const initId = uuidv4() -export const BOARD_VERSION = '1.5.3' +export const BOARD_VERSION = '1.5.4' const useFileStore = create()( persist( From ce2a38f5c748d507284395668e0f362959ae5427 Mon Sep 17 00:00:00 2001 From: LH_R Date: Mon, 25 Nov 2024 22:54:46 +0800 Subject: [PATCH 3/4] docs: update CHANGELOG --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b782f3..eebfcdf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ +# 1.5.4 + +### Feat + +- add eraser config + # 1.5.3 +### Feat + - upload image - add image segmentation From f45790af7fa1e0edc0d716fc1ae88f011d7e5695 Mon Sep 17 00:00:00 2001 From: LH_R Date: Mon, 25 Nov 2024 22:55:01 +0800 Subject: [PATCH 4/4] docs: update README --- README.md | 1 + README.zh.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index 65fc04a..543b86e 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,7 @@ Link: [https://songlh.top/paint-board/](https://songlh.top/paint-board/) - Supports font and style settings when selecting text. - Layer settings are supported for all drawings, including Move Layer Up, Move Layer Down, Move to Top, and Move to Bottom. - All drawings support transparency configurations. + - All drawings support eraser or not erasable configuration. + Drawing Board Configuration - The drawing board supports background configuration, including colour, background image, and transparency. - The drawing board supports customized width and height configurations. diff --git a/README.zh.md b/README.zh.md index b758385..47bd545 100644 --- a/README.zh.md +++ b/README.zh.md @@ -47,6 +47,7 @@ Link: [https://songlh.top/paint-board/](https://songlh.top/paint-board/) - 选择文字时，支持字体和样式设置。 - 所有绘制内容均支持图层设置，包括向上移动层级、向下移动层级、移动至顶层和移动至底层。 - 所有绘制内容支持透明度配置。 + - 所有绘制内容支持橡皮擦是否可擦除配置。 + 画板配置 - 画板支持配置背景配置, 包括颜色, 背景图, 透明度。 - 画板支持自定义宽高配置。