wip(i18n): paint panel

sleepy-zone · May 24, 2024 · ccdf929 · ccdf929
1 parent d8ed260
commit ccdf929
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 11 deletions.
diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json
@@ -1,6 +1,12 @@
 {
   "common": {
-    "ok": "OK"
+    "ok": "OK",
+    "shadow": "Shadow",
+    "color": "Color",
+    "line_width": "LineWidth",
+    "width": "Width",
+    "offset": "Offset",
+    "operate": "Operate"
   },
   "header": {
     "fabritor_desc": "My drawing by fabritor",
@@ -44,6 +50,19 @@
       "local": "Local Image",
       "remote": "Remote Image",
       "remote_placeholder": "Remote Image Url"
+    },
+    "material": {
+      "title": "Material",
+      "line": "Line",
+      "shape": "Shape",
+      "hand_drawn": "Hand-Drawn"
+    },
+    "paint": {
+      "title": "Paint",
+      "stop": "Stop Drawing",
+      "start": "Start Drawing",
+      "pencil": "Pencil",
+      "marker_pen": "Marker Pen"
     }
   }
 }
diff --git a/public/locales/zh-CN/translation.json b/public/locales/zh-CN/translation.json
@@ -1,6 +1,12 @@
 {
   "common": {
-    "ok": "确认"
+    "ok": "确认",
+    "shadow": "阴影",
+    "color": "颜色",
+    "line_width": "线宽",
+    "width": "宽度",
+    "offset": "偏移",
+    "operate": "操作"
   },
   "header": {
     "fabritor_desc": "我的画板 by fabritor",
@@ -44,6 +50,19 @@
       "local": "添加本地图片",
       "remote": "添加远程图片",
       "remote_placeholder": "请输入地址："
+    },
+    "material": {
+      "title": "素材",
+      "line": "线条",
+      "shape": "形状",
+      "hand_drawn": "手绘风格"
+    },
+    "paint": {
+      "title": "画笔",
+      "stop": "停止绘图",
+      "start": "开始绘图",
+      "pencil": "铅笔",
+      "marker_pen": "马克笔"
     }
   }
 }
diff --git a/...abritor/UI/panel/PaintPanel/brush-list.ts → ...britor/UI/panel/PaintPanel/brush-list.tsx b/...abritor/UI/panel/PaintPanel/brush-list.ts → ...britor/UI/panel/PaintPanel/brush-list.tsx
@@ -1,8 +1,10 @@
+import { Trans }  from '@/i18n/utils';
+
 export default [
     {
       key: 'p-1',
       svg: '<svg t="1701335273782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="44143" width="32" height="32"><path d="M910.607 339.457c31.267-31.267 31.267-81.96 0-113.227l-113.21-113.193c-31.266-31.267-81.959-31.267-113.208 0l-28.315 28.298 226.436 226.42 28.297-28.298z m6.696 561.183H349.441L854.01 396.054l-226.434-226.42L89.81 707.4l0.231 0.231h-0.099v208.261c-0.051 0.537-0.082 1.082-0.082 1.634s0.031 1.096 0.082 1.635v14.491h11.778c1.587 0.494 3.275 0.76 5.026 0.76h810.557c9.317 0 16.887-7.552 16.887-16.886-0.001-9.335-7.57-16.886-16.887-16.886z" fill="#1296db" p-id="44144"></path></svg>',
-      title: '铅笔',
+      title: <Trans i18nKey="panel.paint.pencil" />,
       options: {
         color: '#1296db',
         width: 4,
@@ -12,7 +14,7 @@ export default [
     {
       key: 'p-2',
       svg: '<svg t="1701335152027" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39748" width="32" height="32"><path d="M1002.644 893.774H142.004c-11.782 0-21.312 9.562-21.312 21.344v42.656c0 11.782 9.532 21.344 21.312 21.344h860.64c11.782 0 21.342-9.562 21.342-21.344v-42.656c0-11.782-9.56-21.344-21.342-21.344z" fill="#FF0000" p-id="39749"></path><path d="M368.282 731.496l-90.5-90.496c-8.344-8.344-21.842-8.344-30.156 0L6.256 882.34a21.42 21.42 0 0 0-5.968 18.528 21.298 21.298 0 0 0 11.532 15.656l120.654 60.344a21.552 21.552 0 0 0 9.532 2.25c5.532 0 11-2.156 15.094-6.25l211.184-211.184c4-4 6.25-9.438 6.25-15.094s-2.252-11.094-6.252-15.094z" fill="#FF0000" p-id="39750"></path><path d="M459.874 702.434l-150.84-150.84c-8.312-8.344-21.844-8.344-30.156 0l-181.028 180.996c-4 4-6.25 9.438-6.25 15.094s2.25 11.094 6.25 15.094l150.84 150.84a21.356 21.356 0 0 0 30.186 0l180.998-181.028c4-4 6.25-9.438 6.25-15.094s-2.25-11.062-6.25-15.062z" fill="#FF0000" p-id="39751"></path><path d="M947.866 184.288l-120.688-120.684c-12.094-12.062-28.156-18.718-45.25-18.718s-33.154 6.656-45.248 18.718L173.286 627a21.332 21.332 0 0 0 0 30.188l180.996 180.996c4 4 9.438 6.25 15.094 6.25s11.094-2.25 15.094-6.25l563.396-563.398c12.092-12.062 18.748-28.156 18.748-45.248 0-17.094-6.656-33.158-18.748-45.25z" fill="#FF0000" p-id="39752"></path><path d="M947.866 274.786c12.092-12.062 18.748-28.156 18.748-45.248 0-17.094-6.656-33.156-18.748-45.25l-120.688-120.684 90.5 90.53c12.094 12.062 18.75 28.156 18.75 45.25s-6.656 33.156-18.75 45.25L354.282 808.028c-4 4-9.406 6.25-15.062 6.25a21.36 21.36 0 0 1-15.094-6.25l30.156 30.156c4 4 9.438 6.25 15.094 6.25s11.094-2.25 15.094-6.25l563.396-563.398z" fill="#FF0000" opacity=".2" p-id="39753"></path></svg>',
-      title: '马克笔',
+      title: <Trans i18nKey="panel.paint.marker_pen" />,
       options: {
         color: '#FF0000',
         width: 36,

diff --git a/src/fabritor/UI/panel/PaintPanel/index.tsx b/src/fabritor/UI/panel/PaintPanel/index.tsx
@@ -6,12 +6,14 @@ import { DRAW_MODE_CURSOR, DRAG_ICON } from '@/assets/icon';
 import BrushList from './brush-list';
 import { GloablStateContext } from '@/context';
 import PathSetterForm from '../../setter/PathSetter/PathSetterForm';
+import { useTranslation } from '@/i18n/utils';
 
 export default function PaintPanel () {
   const [activeIndex, setActiveIndex] = useState(0);
   const [isDrawingMode, setIsDrawingMode] = useState(true);
   const { editor } = useContext(GloablStateContext);
   const [penFormValues, setPenFormValues] = useState({});
+  const { t } = useTranslation();
 
   const handleBrushChange = (options) => {
     if (options.color) {
@@ -115,9 +117,14 @@ export default function PaintPanel () {
         value={penFormValues}
         showPenTip
       />
-      <Title>操作</Title>
+      <Title>{t('common.operate')}</Title>
       <Flex wrap="wrap" justify="space-around">
-        <Button style={{ width: 64 }} onClick={stopFreeDrawMode} type={isDrawingMode ? 'default' : 'primary'} title="停止绘图">
+        <Button
+          style={{ width: 64 }}
+          onClick={stopFreeDrawMode}
+          type={isDrawingMode ? 'default' : 'primary'} 
+          title={isDrawingMode ? t('panel.paint.stop') : t('panel.paint.start')}
+        >
           <img src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(DRAG_ICON)}`} style={{ width: 22, height: 22 }} />
         </Button>
       </Flex>

diff --git a/src/fabritor/UI/panel/ShapePanel/index.tsx b/src/fabritor/UI/panel/ShapePanel/index.tsx
@@ -10,9 +10,11 @@ import { useContext } from 'react';
 import { GloablStateContext } from '@/context';
 import { createPathFromSvg } from '@/editor/objects/path';
 import Center from '@/fabritor/components/Center';
+import { useTranslation } from '@/i18n/utils';
 
 export default function ShapePanel () {
   const { editor, roughSvg } = useContext(GloablStateContext);
+  const { t } = useTranslation();
 
   const addLine = (item) => {
     const { type, options = {} } = item;
@@ -83,7 +85,7 @@ export default function ShapePanel () {
 
   return (
     <div className="fabritor-panel-wrapper">
-      <Title>线条</Title>
+      <Title>{t('panel.material.line')}</Title>
       <Flex gap={10} wrap="wrap" justify="space-around">
         {
           LineTypeList.map(item => (
@@ -97,7 +99,7 @@ export default function ShapePanel () {
           ))
         }
       </Flex>
-      <Title>形状</Title>
+      <Title>{t('panel.material.shape')}</Title>
       <Flex gap={10} wrap="wrap" justify="space-around">
         {
           ShapeTypeList.map(item => (
@@ -113,7 +115,7 @@ export default function ShapePanel () {
       </Flex>
       <Title>
         <div style={{ position: 'relative' }}>
-          <span>手绘风格</span>
+          <span>{t('panel.material.hand_drawn')}</span>
           <Tag color='#f50' style={{ position: 'absolute', right: -48, top: -5, padding: '0 4px' }}>beta</Tag>
         </div>
       </Title>

diff --git a/src/fabritor/UI/panel/index.tsx b/src/fabritor/UI/panel/index.tsx
@@ -40,12 +40,12 @@ const OBJECT_TYPES = [
     icon: <PictureOutlined style={iconStyle} />
   },
   {
-    label: '素材',
+    label: <Trans i18nKey="panel.material.title" />,
     value: 'shape',
     icon: <BorderOutlined style={iconStyle} />
   },
   {
-    label: '画笔',
+    label: <Trans i18nKey="panel.paint.title" />,
     value: 'paint',
     icon: <BulbOutlined style={iconStyle} />
   },