wip(gradient): sketch/text fill gradient

crazysnowboy · Dec 28, 2023 · 57b4b94 · 57b4b94
1 parent 2577e7a
commit 57b4b94
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fabritor-web",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "fabritor-web",
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
@@ -15,7 +15,7 @@
     "hotkeys-js": "^3.12.0",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
-    "react-colors-beauty": "^1.0.0",
+    "react-colors-beauty": "1.0.2",
     "react-dom": "^18.2.0",
     "roughjs": "^4.6.6",
     "uuid": "^9.0.1"

diff --git a/src/editor/index.tsx b/src/editor/index.tsx
@@ -31,7 +31,6 @@ export default class Editor {
       lastPosX: 0,
       lastPosY: 0
     }
-    this.init();
   }
 
   public async init() {
@@ -432,9 +431,9 @@ export default class Editor {
     });
   }
 
-  public clearCanvas () {
+  public async clearCanvas () {
     const originalJson = '{"fabritor_schema_version":2,"version":"5.3.0","objects":[{"type":"rect","version":"5.3.0","originX":"left","originY":"top","left":0,"top":0,"width":1242,"height":1660,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":true,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"stroke","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"id":"fabritor-sketch","fabritor_desc":"我的画板","selectable":false,"hasControls":false}],"clipPath":{"type":"rect","version":"5.3.0","originX":"left","originY":"top","left":0,"top":0,"width":1242,"height":1660,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":true,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"stroke","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"selectable":true,"hasControls":true},"background":"#ddd"}';
     this.canvas.clear();
-    this.loadFromJSON(originalJson);
+    await this.loadFromJSON(originalJson);
   }
 }
diff --git a/src/fabritor/UI/panel/DesignPanel/index.tsx b/src/fabritor/UI/panel/DesignPanel/index.tsx
@@ -15,7 +15,13 @@ export default function DesignPanel (props) {
     {
       key: 'template',
       label: '模板库',
-      children: <TemplatePanel onLoadTpl={() => { setActiveKey('layers'); }} />
+      children: (
+        <TemplatePanel
+          onLoadTpl={() => { 
+            setActiveKey('layers');
+          }} 
+        />
+      )
     }
   ];
 

diff --git a/src/fabritor/UI/panel/TemplatePanel/index.tsx b/src/fabritor/UI/panel/TemplatePanel/index.tsx
@@ -10,7 +10,7 @@ import FallList from '@/fabritor/components/FallList';
 export default function TemplatePanel (props) {
   const { onLoadTpl } = props;
   const localFileSelectorRef = useRef<any>(null);
-  const { isReady, setReady } = useContext(GloablStateContext);
+  const { isReady, setReady, setActiveObject } = useContext(GloablStateContext);
   const [tList, setTList] = useState([]);
 
   const startLoad = () => {
@@ -41,6 +41,7 @@ export default function TemplatePanel (props) {
     const json = await getTemplate(item.url);
     await editor.loadFromJSON(json, true);
     onLoadTpl();
+    setActiveObject(editor.sketch);
     setReady(true);
   }
 

diff --git a/src/fabritor/UI/panel/TextFx/index.tsx b/src/fabritor/UI/panel/TextFx/index.tsx
@@ -77,8 +77,8 @@ export default function TextFx () {
         style={{ padding: '0 16px' }}
       >
         <Title>描边</Title>
-        <FormItem label="颜色" name="stroke">
-          <ColorSetter />
+        <FormItem label="颜色">
+          <ColorSetter effectKey="stroke" />
         </FormItem>
         <FormItem label="粗细" name="strokeWidth">
           <Slider

diff --git a/src/fabritor/UI/toolbar/SketchSetter/index.tsx b/src/fabritor/UI/toolbar/SketchSetter/index.tsx
@@ -1,15 +1,17 @@
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { Form, Modal } from 'antd';
 import ColorSetter from '@/fabritor/components/ColorSetter';
 import SizeSetter from '@/fabritor/components/SizeSetter';
 import { getGlobalEditor } from '@/utils/global';
 import ToolbarDivider from '@/fabritor/components/ToolbarDivider';
 import { ClearOutlined, ExclamationCircleFilled } from '@ant-design/icons';
+import { GloablStateContext } from '@/context';
 
 const { Item: FormItem } = Form;
 
 export default function SketchSetter() {
   const [form] = Form.useForm();
+  const { setActiveObject } = useContext(GloablStateContext);
 
   const handleValuesChange = (values) => {
     const editor = getGlobalEditor();
@@ -29,9 +31,10 @@ export default function SketchSetter() {
     Modal.confirm({
       title: '确认清空画布？',
       icon: <ExclamationCircleFilled />,
-      onOk() {
+      async onOk () {
         const editor = getGlobalEditor();
-        editor.clearCanvas();
+        await editor.clearCanvas();
+        setActiveObject(editor.sketch);
       },
       okText: '确认',
       cancelText: '取消'

diff --git a/src/fabritor/components/ColorSetter/index.tsx b/src/fabritor/components/ColorSetter/index.tsx
@@ -1,51 +1,54 @@
-import { fabric } from 'fabric';
-import { ColorPicker, Popover } from 'antd';
+import { Popover } from 'antd';
 import { ColorsPicker } from 'react-colors-beauty';
 import { FontColorsOutlined, BgColorsOutlined } from '@ant-design/icons';
 import { useEffect, useState, useContext } from 'react';
 import { GloablStateContext } from '@/context';
 import { transformColors2Fill, transformFill2Colors } from '@/utils';
 
 export default function ColorSetter (props) {
-  const { effectKey = 'fill', trigger, type } = props;
+  const { effectKey = 'fill', defaultColor = '#ffffff', trigger, type } = props;
   const [value, setValue] = useState<any>();
   const { object } = useContext(GloablStateContext);
 
   const handleChange = (v) => {
-    if (!v || !object) return;
+    if (!v) return;
+    if (!v.color) v.color = defaultColor;
     setValue(v);
     const fill = transformColors2Fill(v);
-    console.log(fill)
     object.set(effectKey, fill);
     object?.canvas?.requestRenderAll();
   }
 
   const renderTrigger = () => {
+    // TODO color value / other color Setter
     if (trigger) return trigger;
     if (type === 'fontColor') {
-      return <FontColorsOutlined style={{ fontSize: 22, color: value, border: value === '#ffffff' ? '1px solid #ccc' : ''  }} />;
+      return <FontColorsOutlined style={{ fontSize: 22, color: value }} />;
     }
     if (type === 'sketch') {
-      return <BgColorsOutlined style={{ fontSize: 22, color: value, border: value === '#ffffff' ? '1px solid #ccc' : '' }} />
+      return <BgColorsOutlined style={{ fontSize: 22, color: value }} />
     }
     return (
-      <div style={{ width: 24, height: 24, backgroundColor: value, border: '1px solid #ccc', borderRadius: 4 }} />
+      <div style={{ width: 24, height: 24, backgroundColor: value, borderRadius: 4 }} />
     )
   }
 
   useEffect(() => {
     if (object) {
       const colors = object[effectKey];
-      if (typeof colors === 'string') {
-        setValue(transformFill2Colors(colors));
-      }
+      setValue(transformFill2Colors(colors));
     }
   }, [object]);
 
   return (
     <Popover
       content={
-        <ColorsPicker value={value} onChange={handleChange} format="hex" />
+        <ColorsPicker
+          value={value}
+          onChange={handleChange}
+          format="hex"
+          angleType="rotate"
+        />
       }
       trigger="click"
     >

diff --git a/src/fabritor/index.tsx b/src/fabritor/index.tsx
@@ -83,7 +83,7 @@ export default function Fabritor () {
   }
 
   useEffect(() => {
-    setTimeout(() => {
+    setTimeout(async () => {
       const editor = new Editor({
         canvasEl: canvasEl.current,
         workspaceEl: workspaceEl.current,
@@ -96,9 +96,11 @@ export default function Fabritor () {
         }
       });
 
+      await editor.init();
       editorRef.current = editor;
       setGlobalEditor(editor);
       setReady(true);
+      setActiveObject(editor.sketch);
     }, 300);
 
     return () => {
@@ -113,6 +115,7 @@ export default function Fabritor () {
     <GloablStateContext.Provider
       value={{
         object: activeObject,
+        setActiveObject,
         isReady,
         setReady,
         fxType,

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -25,6 +25,7 @@ export const downloadFile = (content: string, type: string, name: string) => {
 }
 
 const AngleCoordsMap = {
+  // TODO 45 135...
   90: JSON.stringify({ x1: 0, y1: 0, x2: 1, y2: 0 }),
   180: JSON.stringify({ x1: 0, y1: 0, x2: 0, y2: 1 }),
   270: JSON.stringify({ x1: 1, y1: 0, x2: 0, y2: 0 }),
@@ -40,7 +41,7 @@ const transformCoords2Angel = (coords) => {
   const keys = Object.keys(AngleCoordsMap);
   for (let key of keys) {
     if (JSON.stringify(coords) === AngleCoordsMap[key]) {
-      return key;
+      return Number(key);
     }
   }
   return 90;
@@ -52,8 +53,10 @@ export const transformFill2Colors = (v) => {
   }
   return {
     type: v.type,
-    colorStops: v.colorStops,
-    angle: transformCoords2Angel(v.coords)
+    gradient: {
+      colorStops: v.colorStops,
+      angle: transformCoords2Angel(v.coords)
+    }
   }
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -5681,10 +5681,10 @@ rc-virtual-list@^3.11.1, rc-virtual-list@^3.5.1, rc-virtual-list@^3.5.2:
     rc-resize-observer "^1.0.0"
     rc-util "^5.36.0"
 
-react-colors-beauty@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/react-colors-beauty/-/react-colors-beauty-1.0.0.tgz#22dfff90f8e17f4be590ac80ebd2df9aa24c1341"
-  integrity sha512-UJ/xLXfhRJUACSLdDO1JBgZSTOYJV9k6FmhD4zaJFKKMNqhD6WFqD/807zzny26RX70VFl07mmhETdSuUPEVNQ==
+[email protected].2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-colors-beauty/-/react-colors-beauty-1.0.2.tgz#9e36f863449c87cf3a8850fec0b3531eccf0531f"
+  integrity sha512-3DNfJ48wGRb8plmCr1pcNrNiMJ+YA8T6CSwQTYWnx9Dqx5uWtnd/a06AKPaX6fz0UJzkC4XwmVU+7xg9+RP7vg==
   dependencies:
     "@ice/jsx-runtime" "^0.2.0"
     "@rc-component/color-picker" "~1.4.1"