Merge pull request #50 from LHRUN/dev

Feature/1.5.4

CHANGELOG.md

@@ -1,5 +1,13 @@
+# 1.5.4
+
+### Feat
+
+- add eraser config
+
 # 1.5.3
 
+### Feat
+
 - upload image
   -  add image segmentation 
 

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.

README.zh.md

@@ -47,6 +47,7 @@ Link: [https://songlh.top/paint-board/](https://songlh.top/paint-board/)
   - 选择文字时，支持字体和样式设置。
   - 所有绘制内容均支持图层设置，包括向上移动层级、向下移动层级、移动至顶层和移动至底层。
   - 所有绘制内容支持透明度配置。
+  - 所有绘制内容支持橡皮擦是否可擦除配置。
 + 画板配置
   - 画板支持配置背景配置, 包括颜色, 背景图, 透明度。
   - 画板支持自定义宽高配置。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "paint-board",
   "private": true,
-  "version": "1.5.3",
+  "version": "1.5.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

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<IProps> = ({ 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 && (
+        <>
+          <div className="font-bold font-fredokaOne mt-3 text-sm">
+            {t('eraserConfig.eraser')}
+          </div>
+          <div className="mt-1 flex items-center w-full">
+            <div className="font-fredokaOne text-xs mr-3">
+              {t('eraserConfig.erasable')}
+            </div>
+            <input
+              type="checkbox"
+              className="toggle toggle-success"
+              checked={erasableControl.erasable}
+              onChange={updateObjectErasable}
+            />
+          </div>
+        </>
+      )}
+    </>
+  )
+}
+
+export default EraserConfig

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 = () => {
     <div className="form-control">
       <OpacityConfig refreshCount={refreshCount} />
 
+      <EraserConfig refreshCount={refreshCount} />
+
       {paintBoard.canvas?.getActiveObject() && <LayerConfig />}
 
       {paintBoard.canvas?.getActiveObject()?._customType ===

src/i18n/en.json

@@ -174,5 +174,9 @@
     "rotate": "Rotate",
     "scale": "Scale",
     "size": "Size"
+  },
+  "eraserConfig": {
+    "eraser": "Eraser",
+    "erasable": "Erasable"
   }
 }

src/i18n/zh.json

@@ -174,5 +174,9 @@
     "rotate": "旋转",
     "scale": "缩放",
     "size": "尺寸"
+  },
+  "eraserConfig": {
+    "eraser": "橡皮擦",
+    "erasable": "可擦除"
   }
 }

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<FileState & FileAction>()(
   persist(

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 {