wip(text):

src/context/index.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const GloablStateContext = createContext<any>(null);

src/editor/index.tsx

@@ -91,7 +91,8 @@ export default class Editor {
   }
 
   private _initEvents () {
-
+    const { sketchEventHandler } = this._options;
+    this.canvas.on('mouse:down', sketchEventHandler?.clickHandler);
   }
 
   public addTextbox () {

src/editor/textbox.tsx

@@ -5,7 +5,7 @@ export const createTextbox = (options, editor) => {
   const { text = '', left, top, ...rest } = options || {};
   const { canvas, sketch } = editor;
 
-  const textBox = new fabric.Textbox(text || '单击进行编辑', {
+  const textBox = new fabric.Textbox(text || '双击进行编辑', {
     ...TEXTBOX_DEFAULT_CONFIG,
     ...rest
   });
@@ -17,6 +17,9 @@ export const createTextbox = (options, editor) => {
     textBox.set('top', sketch.height / 2 - textBox.calcTextHeight() / 2);
   }
 
+  textBox.setControlVisible('mt', false);
+  textBox.setControlVisible('mb', false);
+
   canvas.add(textBox);
   canvas.requestRenderAll();
   return textBox;

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

@@ -1,12 +1,16 @@
+import { useContext } from 'react';
 import { Button } from 'antd';
 import { getGlobalEditor } from '@/utils/global';
-
-import './index.scss';
+import { GloablStateContext } from '@/context';
 
 export default function TextPanel () {
+  const { setActiveObject } = useContext(GloablStateContext);
+
   const handleAddText = () => {
     const editor = getGlobalEditor();
-    editor.addTextbox();
+    const textbox = editor.addTextbox();
+    editor.canvas.setActiveObject(textbox);
+    setActiveObject(textbox);
   }
 
   return (

src/fabritor/UI/panel/index.tsx

@@ -2,6 +2,8 @@ import { Layout, Tabs, Flex } from 'antd';
 import { AlertOutlined, FileTextOutlined, PictureOutlined } from '@ant-design/icons';
 import TextPanel from './TextPanel';
 
+import './index.scss';
+
 const { Sider } = Layout;
 
 const siderStyle: React.CSSProperties = {
@@ -29,7 +31,6 @@ const OBJECT_TYPES = [
 ]
 
 export default function Panel () {
-
   const renderPanel = (value) => {
     if (value === 'template') {
       return '模板'

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

@@ -0,0 +1,59 @@
+import { useContext, useEffect } from 'react';
+import { Form, InputNumber, ColorPicker, Select } from 'antd';
+import { TEXT_ALIGN_LIST, FONT_PRESET_FAMILY_LIST } from '@/utils/constants';
+import { GloablStateContext } from '@/context';
+
+const { Item: FormItem } = Form;
+
+export default function TextSetter (props) {
+  const { object } = useContext(GloablStateContext);
+  const [form] = Form.useForm();
+
+  const handleValuesChange = (values) => {
+    console.log(values)
+  }
+
+  useEffect(() => {
+    form.setFieldsValue({
+      fontFamily: object.fontFamily,
+      fontSize: object.fontSize,
+      fill: object.fill,
+      textAlign: object.textAlign
+    });
+  }, [object]);
+
+  return (
+    <div className="fabritor-setter-form">
+      <Form
+        name="fabritor-text-setter-form"
+        form={form}
+        onValuesChange={handleValuesChange}
+      >
+        <FormItem
+          label="字体"
+          name="fontFamily"
+        >
+          <Select options={FONT_PRESET_FAMILY_LIST} />
+        </FormItem>
+        <FormItem
+          label="字号"
+          name="fontSize"
+        >
+          <InputNumber />
+        </FormItem>
+        <FormItem
+          label="颜色"
+          name="fill"
+        >
+          <ColorPicker />
+        </FormItem>
+        <FormItem
+          label="对齐"
+          name="textAlign"
+        >
+          <Select options={TEXT_ALIGN_LIST} />
+        </FormItem>
+      </Form>
+    </div>
+  )
+}

src/fabritor/UI/setter/index.scss

@@ -0,0 +1,3 @@
+.fabritor-setter-form {
+  padding: 16px;
+}

src/fabritor/UI/setter/index.tsx

@@ -1,18 +1,29 @@
+import { useContext } from 'react';
 import { Layout } from 'antd';
+import TextSetter from './TextSetter';
+import { GloablStateContext } from '@/context';
+
+import './index.scss';
 
 const { Sider } = Layout;
 
 const siderStyle: React.CSSProperties = {
   backgroundColor: '#fff'
 };
 
-export default function Setter () {
+export default function Setter (props) {
+  const { object } = useContext(GloablStateContext);
+  const objectType = object?.get?.('type') || '';
+
   return (
     <Sider
       style={siderStyle}
       width={300}
     >
-      Setter
+      {
+        objectType === 'textbox' ?
+        <TextSetter object={object} /> : null
+      }
     </Sider>
   )
 }

src/fabritor/index.tsx

@@ -1,10 +1,13 @@
-import { useEffect, useRef } from 'react';
+import { createContext, useEffect, useRef, useState } from 'react';
 import { Layout } from 'antd';
 import Header from './UI/header';
 import Panel from './UI/panel';
 import Setter from './UI/setter';
 import Editor from '@/editor';
 import { setGlobalEditor } from '@/utils/global';
+import { GloablStateContext } from '@/context';
+
+import '../font.css';
 
 const { Content } = Layout;
 
@@ -18,12 +21,25 @@ export default function Fabritor () {
   const canvasEl = useRef<HTMLCanvasElement>();
   const workspaceEl = useRef<HTMLDivElement>();
   const editorRef = useRef<Editor | null>();
+  const [activeObject, setActiveObject] = useState<fabric.Object | null>();
+
+  const clickHandler = (opt) => {
+    const { target } = opt;
+    if (!target || target.id === 'fabritor-sketch') {
+      setActiveObject(null);
+      return;
+    }
+    setActiveObject(target);
+  }
 
   useEffect(() => {
     setTimeout(() => {
       const editor = new Editor({
         canvasEl: canvasEl.current,
-        workspaceEl: workspaceEl.current
+        workspaceEl: workspaceEl.current,
+        sketchEventHandler: {
+          clickHandler
+        }
       });
 
       editorRef.current = editor;
@@ -39,17 +55,24 @@ export default function Fabritor () {
   }, []);
 
   return (
-    <Layout style={{ height: '100%' }} className="fabritor-layout">
-      <Header />
-      <Layout>
-        <Panel />
-        <Content>
-          <div style={workspaceStyle} ref={workspaceEl}>
-            <canvas ref={canvasEl} />
-          </div>
-        </Content>
-        <Setter />
+    <GloablStateContext.Provider
+      value={{
+        object: activeObject,
+        setActiveObject
+      }}
+    >
+      <Layout style={{ height: '100%' }} className="fabritor-layout">
+        <Header />
+        <Layout>
+          <Panel />
+          <Content>
+            <div style={workspaceStyle} ref={workspaceEl}>
+              <canvas ref={canvasEl} />
+            </div>
+          </Content>
+          <Setter />
+        </Layout>
       </Layout>
-    </Layout>
+    </GloablStateContext.Provider>
   )
 }

src/font.css

@@ -0,0 +1,5 @@
+@font-face {
+  font-family: "AlibabaPuHuiTi";
+  src: url("./assets/fonts/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff") format("woff");
+  font-display: swap;
+}

src/utils/constants.ts

@@ -15,14 +15,24 @@ export const TEXTBOX_DEFAULT_CONFIG = {
   // styles
   fill: '#000000',
   fontWeight: 500,
-  fontSize: 40,
+  fontSize: 50,
   lineHeight: 1.3,
   textAlign: 'center',
   fontFamily: 'AlibabaPuHuiTi',
   // size
-  width: 240,
+  width: 300,
   // controls
   ...OBJECT_DEFAULT_CONFIG,
   // 中文处理
   splitByGrapheme: true
-}
+}
+
+export const TEXT_ALIGN_LIST = [
+  { label: '居左', value: 'left' },
+  { label: '居中', value: 'center' },
+  { label: '居右', value: 'right' }
+];
+
+export const FONT_PRESET_FAMILY_LIST = [
+  { label: '阿里巴巴普惠体', value: 'AlibabaPuHuiTi' }
+]