feat(history): optimize slider component history

crazysnowboy · Apr 3, 2024 · 4ffaa4a · 4ffaa4a
1 parent 93b0f9c
commit 4ffaa4a
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 36 deletions.
diff --git a/src/fabritor/UI/setter/BorderSetter/index.tsx b/src/fabritor/UI/setter/BorderSetter/index.tsx
@@ -1,7 +1,8 @@
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { Radio, Form } from 'antd';
 import ColorSetter from '../ColorSetter/Solid';
 import SliderInputNumber from '@/fabritor/components/SliderInputNumber';
+import { GloablStateContext } from '@/context';
 
 const { Item: FormItem } = Form;
 
@@ -54,6 +55,7 @@ export const BORDER_TYPES = [
 
 export default function BorderSetter (props) {
   const { value, onChange } = props;
+  const { editor } = useContext(GloablStateContext);
   const [form] = Form.useForm();
 
   const handleChange = (v) => {
@@ -63,6 +65,10 @@ export default function BorderSetter (props) {
     });
   }
 
+  const fireEvent = () => {
+    editor.fireCustomModifiedEvent();
+  }
+
   useEffect(() => {
     form.setFieldsValue(value);
   }, [value]);
@@ -74,7 +80,7 @@ export default function BorderSetter (props) {
       colon={false}
     >
       <FormItem name="type" label="样式" labelCol={{ span: 24 }}>
-        <Radio.Group>
+        <Radio.Group onChange={fireEvent}>
         {
           BORDER_TYPES.map(item => (
             <Radio.Button key={item.key} value={item.key}>
@@ -92,18 +98,20 @@ export default function BorderSetter (props) {
         </Radio.Group>
       </FormItem>
       <FormItem name="stroke" label="颜色">
-        <ColorSetter />
+        <ColorSetter onChange={fireEvent} />
       </FormItem>
       <FormItem name="strokeWidth" label="粗细">
         <SliderInputNumber
           min={1}
           max={100}
+          onChangeComplete={fireEvent}
         />
       </FormItem>
       <FormItem name="borderRadius" label="圆角">
         <SliderInputNumber
           min={0}
           max={200}
+          onChangeComplete={fireEvent}
         />
       </FormItem>
     </Form>

diff --git a/src/fabritor/UI/setter/ImageSetter/index.tsx b/src/fabritor/UI/setter/ImageSetter/index.tsx
@@ -49,7 +49,6 @@ export default function ImageSetter () {
       });
     }
 
-    // TODO editor.fireCustomModifiedEvent();
     editor.canvas.requestRenderAll();
   }
 

diff --git a/src/fabritor/UI/setter/PathSetter/PathSetterForm.tsx b/src/fabritor/UI/setter/PathSetter/PathSetterForm.tsx
@@ -2,13 +2,21 @@ import { Form } from 'antd';
 import SolidColorSetter from '../ColorSetter/Solid';
 import ColorSetter from '../ColorSetter';
 import SliderInputNumber from '@/fabritor/components/SliderInputNumber';
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
+import { GloablStateContext } from '@/context';
 
 const { Item: FormItem } = Form;
 
 export default function PathSetterForm (props) {
-  const { value, onChange, showPenTip, showFillConfig } = props;
+  const { value, onChange, shouldFireEvent, showPenTip, showFillConfig } = props;
   const [form] = Form.useForm();
+  const { editor } = useContext(GloablStateContext);
+
+  const fireEvent = () => {
+    if (shouldFireEvent) {
+      editor.fireCustomModifiedEvent();
+    }
+  }
 
   useEffect(() => {
     form.setFieldsValue(value);
@@ -26,41 +34,41 @@ export default function PathSetterForm (props) {
         label={showFillConfig ? '描边' : '颜色'}
         name="color"
       >
-        <SolidColorSetter />
+        <SolidColorSetter onChange={fireEvent} />
       </FormItem>
       <FormItem
         label="线宽"
         name="width"
       >
-        <SliderInputNumber min={1} max={100} />
+        <SliderInputNumber min={1} max={100} onChangeComplete={fireEvent} />
       </FormItem>
       {
         showFillConfig ?
         <FormItem
           label="填充"
           name="fill"
         >
-          <ColorSetter />
+          <ColorSetter onChange={fireEvent} />
         </FormItem> : null
       }
       <FormItem label={<span style={{ fontSize: 15, fontWeight: 'bold' }}>阴影</span>} />
       <FormItem
         label="颜色"
         name={['shadow', 'color']}
       >
-        <ColorSetter />
+        <ColorSetter onChange={fireEvent} />
       </FormItem>
       <FormItem
         label="宽度"
         name={['shadow', 'width']}
       >
-        <SliderInputNumber min={0} max={50} />
+        <SliderInputNumber min={0} max={50} onChangeComplete={fireEvent} />
       </FormItem>
       <FormItem
         label="偏移"
         name={['shadow', 'offset']}
       >
-        <SliderInputNumber min={0} max={20} />
+        <SliderInputNumber min={0} max={20} onChangeComplete={fireEvent} />
       </FormItem>
     </Form>
   )

diff --git a/src/fabritor/UI/setter/PathSetter/index.tsx b/src/fabritor/UI/setter/PathSetter/index.tsx
@@ -36,8 +36,6 @@ export default function PathSetter () {
     }
 
     editor.canvas.requestRenderAll();
-    editor.fireCustomModifiedEvent();
-    // TODO editor.fireCustomModifiedEvent();
   }
 
   useEffect(() => {
@@ -59,6 +57,11 @@ export default function PathSetter () {
   if (!object || object.type !== 'path') return null;
 
   return (
-    <PathSetterForm showFillConfig={object?.sub_type} value={value} onChange={handleChange} />
+    <PathSetterForm
+      showFillConfig={object?.sub_type}
+      shouldFireEvent
+      value={value}
+      onChange={handleChange}
+    />
   )
 }
diff --git a/src/fabritor/UI/setter/ShapeSetter/LineSetter.tsx b/src/fabritor/UI/setter/ShapeSetter/LineSetter.tsx
@@ -20,15 +20,18 @@ export default function LineSetter () {
       switch (key) {
         case 'stroke':
           object.set('stroke', values[key]);
+          editor.fireCustomModifiedEvent();
           break;
         case 'strokeWidth':
           object.setStrokeWidth(values[key]);
           break;
         case 'round':
           object.set('strokeLineCap', values[key] ? 'round' : 'butt');
+          editor.fireCustomModifiedEvent();
           break;
         case 'type':
           object.set('strokeDashArray', getStrokeDashArray({ type: values[key], strokeWidth: object.strokeWidth }));
+          editor.fireCustomModifiedEvent();
           break;
         default:
           break;
@@ -38,8 +41,6 @@ export default function LineSetter () {
     object.setCoords();
 
     editor.canvas.requestRenderAll();
-    editor.fireCustomModifiedEvent();
-    // TODO editor.fireCustomModifiedEvent();
   }
 
   useEffect(() => {
@@ -88,6 +89,7 @@ export default function LineSetter () {
         <SliderInputNumber
           min={1}
           max={50}
+          onChangeComplete={() => { editor.fireCustomModifiedEvent(); }}
         />
       </FormItem>
       <FormItem

diff --git a/src/fabritor/UI/setter/ShapeSetter/ShapeSetter.tsx b/src/fabritor/UI/setter/ShapeSetter/ShapeSetter.tsx
@@ -35,8 +35,6 @@ export default function ShapeSetter () {
 
     object.setCoords();
     editor.canvas.requestRenderAll();
-    editor.fireCustomModifiedEvent();
-    // TODO editor.fireCustomModifiedEvent();
   }
 
   const handleValuesChange = (values) => {

diff --git a/src/fabritor/UI/setter/TextSetter/TextFx/index.tsx b/src/fabritor/UI/setter/TextSetter/TextFx/index.tsx
@@ -77,7 +77,6 @@ export default function TextFx () {
     }
     editor.canvas.requestRenderAll();
     editor.fireCustomModifiedEvent();
-    // TODO editor.fireCustomModifiedEvent();
   }
 
   const initObjectFx = () => {

diff --git a/src/fabritor/UI/setter/TextSetter/index.tsx b/src/fabritor/UI/setter/TextSetter/index.tsx
@@ -39,13 +39,6 @@ export default function TextSetter () {
     });
   }
 
-  const handleTextStroke = (border) => {
-    object.set({
-      stroke: border.stroke,
-      strokeWidth: border.strokeWidth
-    });
-  }
-
   const handleFill = (_fill) => {
     let fill = transformColors2Fill(_fill);
     // text gradient nor support percentage https://github.com/fabricjs/fabric.js/issues/8168  
@@ -80,8 +73,6 @@ export default function TextSetter () {
         } finally {
           object.set(key, values[key]);
         }
-      } else if (key === 'border') {
-        handleTextStroke(values[key]);
       } else if (key === 'fill') {
         handleFill(values[key]);
       } else {
@@ -93,11 +84,13 @@ export default function TextSetter () {
           object.set(key, values[key]);
         }
       }
+
+      if (key !== 'fontSize' && key !== 'lineHeight' && key !== 'charSpacing') {
+        editor.fireCustomModifiedEvent();
+      }
     }
 
     editor.canvas.requestRenderAll();
-    editor.fireCustomModifiedEvent();
-    // TODO editor.fireCustomModifiedEvent();
   }
 
   useEffect(() => {
@@ -113,10 +106,6 @@ export default function TextSetter () {
         italic: object.fontStyle === 'italic',
         underline: object.underline,
         linethrough: object.linethrough
-      },
-      border: {
-        stroke: object.stroke,
-        strokeWidth: object.strokeWidth
       }
     });
   }, [object]);
@@ -140,7 +129,7 @@ export default function TextSetter () {
           name="fontSize"
           label="字号"
         >
-          <SliderInputNumber max={400} />
+          <SliderInputNumber max={400} onChangeComplete={() =>{ editor.fireCustomModifiedEvent() }} />
         </FormItem>
         <FormItem
           name="fill"
@@ -167,6 +156,7 @@ export default function TextSetter () {
           <SliderInputNumber
             min={-200}
             max={800}
+            onChangeComplete={() =>{ editor.fireCustomModifiedEvent() }}
           />
         </FormItem>
         <FormItem
@@ -177,6 +167,7 @@ export default function TextSetter () {
             min={0.5}
             max={2.5}
             step={0.01}
+            onChangeComplete={() =>{ editor.fireCustomModifiedEvent() }}
           />
         </FormItem>
       </Form>
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,6 @@ export default function ImageSetter () { @@
           });
         }
-        // TODO editor.fireCustomModifiedEvent();
         editor.canvas.requestRenderAll();
       }
@@ Expand Down @@