wip(text): text setter

src/editor/index.tsx

@@ -95,7 +95,7 @@ export default class Editor {
     this.canvas.on('mouse:down', sketchEventHandler?.clickHandler);
   }
 
-  public addTextbox () {
+  public async addTextbox () {
     return createTextbox({}, this);
   }
 

src/editor/textbox.tsx

@@ -1,9 +1,9 @@
 import { fabric } from 'fabric';
 import { TEXTBOX_DEFAULT_CONFIG } from '../utils/constants';
-import { uuid } from '@/utils';
+import { uuid, loadFont } from '@/utils';
 
-export const createTextbox = (options, editor) => {
-  const { text = '', left, top, ...rest } = options || {};
+export const createTextbox = async (options, editor) => {
+  const { text = '', left, top, fontFamily, ...rest } = options || {};
   const { canvas, sketch } = editor;
 
   const textBox = new fabric.Textbox(text || '双击进行编辑', {
@@ -23,6 +23,11 @@ export const createTextbox = (options, editor) => {
   textBox.setControlVisible('mt', false);
   textBox.setControlVisible('mb', false);
 
+  if (fontFamily) {
+    await loadFont(fontFamily);
+    textBox.set('fontFamily', fontFamily);
+  }
+
   canvas.add(textBox);
   canvas.requestRenderAll();
   return textBox;

src/fabritor/UI/panel/TextPanel/FontStylePanel.tsx

@@ -0,0 +1,54 @@
+import { useContext, useEffect } from 'react';
+import { Space, Button } from 'antd';
+import { BoldOutlined, ItalicOutlined, UnderlineOutlined, StrikethroughOutlined } from '@ant-design/icons';
+
+const FONT_STYLES = [
+  {
+    icon: <BoldOutlined />,
+    value: 'bold'
+  },
+  {
+    icon: <ItalicOutlined />,
+    value: 'italic'
+  },
+  {
+    icon: <UnderlineOutlined />,
+    value: 'underline'
+  },
+  {
+    icon: <StrikethroughOutlined />,
+    value: 'linethrough'
+  }
+]
+
+export default function FontStylePanel (props) {
+  const { value, onChange } = props;
+
+  const handleClick = (v) => {
+    onChange && onChange({
+      ...value,
+      [v]: !value[v]
+    });
+  }
+
+  useEffect(() => {
+    console.log(value)
+  }, [value]);
+
+  return (
+    <Space.Compact block>
+      {
+        FONT_STYLES.map(FONT_STYLE => (
+          <Button
+            style={{ width: 50 }}
+            icon={FONT_STYLE.icon}
+            key={FONT_STYLE.value}
+            type={ value?.[FONT_STYLE.value] ? 'primary' : 'default' }
+            ghost={value?.[FONT_STYLE.value]}
+            onClick={() => { handleClick(FONT_STYLE.value) }}
+          />
+        ))
+      }
+    </Space.Compact>
+  )
+}

src/fabritor/UI/panel/TextPanel/index.tsx

@@ -6,9 +6,9 @@ import { GloablStateContext } from '@/context';
 export default function TextPanel () {
   const { setActiveObject } = useContext(GloablStateContext);
 
-  const handleAddText = () => {
+  const handleAddText = async () => {
     const editor = getGlobalEditor();
-    const textbox = editor.addTextbox();
+    const textbox = await editor.addTextbox();
     editor.canvas.setActiveObject(textbox);
     setActiveObject(textbox);
   }

src/fabritor/UI/setter/TextSetter/index.tsx

@@ -1,7 +1,9 @@
 import { useContext, useEffect } from 'react';
-import { Form, InputNumber, ColorPicker, Select } from 'antd';
+import { Form, Radio, InputNumber, ColorPicker, Select, Space, Button } from 'antd';
 import { TEXT_ALIGN_LIST, FONT_PRESET_FAMILY_LIST } from '@/utils/constants';
+import { BoldOutlined, ItalicOutlined, UnderlineOutlined, StrikethroughOutlined } from '@ant-design/icons';
 import { GloablStateContext } from '@/context';
+import FontStylePanel from '../../panel/TextPanel/FontStylePanel';
 
 const { Item: FormItem } = Form;
 
@@ -18,7 +20,14 @@ export default function TextSetter (props) {
       fontFamily: object.fontFamily,
       fontSize: object.fontSize,
       fill: object.fill,
-      textAlign: object.textAlign
+      textAlign: object.textAlign,
+      lineHeight: object.lineHeight,
+      fontStyles: {
+        bold: object.fontWeight === 'bold',
+        italic: object.fontStyle === 'italic',
+        underline: object.underline,
+        linethrough: object.linethrough
+      }
     });
   }, [object]);
 
@@ -41,6 +50,12 @@ export default function TextSetter (props) {
         >
           <InputNumber />
         </FormItem>
+        <FormItem
+          label="行高"
+          name="lineHeight"
+        >
+          <InputNumber precision={2} step={0.01}/>
+        </FormItem>
         <FormItem
           label="颜色"
           name="fill"
@@ -51,8 +66,20 @@ export default function TextSetter (props) {
           label="对齐"
           name="textAlign"
         >
-          <Select options={TEXT_ALIGN_LIST} />
+          <Radio.Group
+            options={TEXT_ALIGN_LIST}
+            optionType="button"
+            buttonStyle="solid"
+          />
+        </FormItem>
+        <FormItem
+          label="样式"
+          name="fontStyles"
+        >
+          <FontStylePanel />
         </FormItem>
+        {/*竖版*/}
+        {/*特效*/}
       </Form>
     </div>
   )

src/utils/constants.ts

@@ -17,7 +17,7 @@ export const OBJECT_DEFAULT_CONFIG = {
 export const TEXTBOX_DEFAULT_CONFIG = {
   // styles
   fill: '#000000',
-  fontWeight: 500,
+  fontWeight: 'normal',
   fontSize: 80,
   lineHeight: 1.3,
   textAlign: 'center',

src/utils/index.ts

@@ -6,7 +6,7 @@ export const loadFont = async (f: string) => {
   if (!f) return Promise.resolve();
   const item = FONT_PRESET_FAMILY_LIST.find(_item => _item.value === f);
   if (!item) return Promise.resolve();
-  const font = new FontFaceObserver();
+  const font = new FontFaceObserver(f);
   return font.load(null, 1000 * 100).catch((e) => { console.error(LOG_PREFIX, e); });
 }