wip(gradient)

crazysnowboy · Dec 28, 2023 · 2577e7a · 2577e7a
1 parent 689f1a9
commit 2577e7a
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "hotkeys-js": "^3.12.0",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
+    "react-colors-beauty": "^1.0.0",
     "react-dom": "^18.2.0",
     "roughjs": "^4.6.6",
     "uuid": "^9.0.1"

diff --git a/src/fabritor/UI/toolbar/TextSetter/index.tsx b/src/fabritor/UI/toolbar/TextSetter/index.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react';
-import { Form, InputNumber, Select } from 'antd';
+import { Form, Select } from 'antd';
 import { FONT_PRESET_FAMILY_LIST } from '@/utils/constants';
 import { GloablStateContext } from '@/context';
 import FontStyleSetter from './FontStyleSetter';

diff --git a/src/fabritor/components/ColorSetter/index.tsx b/src/fabritor/components/ColorSetter/index.tsx
@@ -1,11 +1,23 @@
-import { ColorPicker } from 'antd';
+import { fabric } from 'fabric';
+import { ColorPicker, 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 { value, onChange, trigger, type, ...rest } = props;
+  const { effectKey = 'fill', trigger, type } = props;
+  const [value, setValue] = useState<any>();
+  const { object } = useContext(GloablStateContext);
 
   const handleChange = (v) => {
-    onChange && onChange(v.toHexString())
+    if (!v || !object) return;
+    setValue(v);
+    const fill = transformColors2Fill(v);
+    console.log(fill)
+    object.set(effectKey, fill);
+    object?.canvas?.requestRenderAll();
   }
 
   const renderTrigger = () => {
@@ -21,25 +33,25 @@ export default function ColorSetter (props) {
     )
   }
 
+  useEffect(() => {
+    if (object) {
+      const colors = object[effectKey];
+      if (typeof colors === 'string') {
+        setValue(transformFill2Colors(colors));
+      }
+    }
+  }, [object]);
+
   return (
-    <ColorPicker
-      value={value}
-      onChange={handleChange}
-      presets={[
-        {
-          label: 'Recommended',
-          colors: [
-            '#000000', '#545454', '#737373', '#a6a6a6', '#d9d9d9', '#ffffff', '#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#DCE775', '#FF8A65', '#BA68C8', '#5ce1e6',
-            '#FF3131', '#ff5757', '#ff66c4', '#cb6ce6', '#8c52ff', '#5e17eb', '#0097b2', '#0cc0df',
-            '#00bf63', '#7ed597', '#c1ff72', '#ffde59', '#ffbd59', '#ff914d'
-          ]
-        }
-      ]}
-      {...rest}
+    <Popover
+      content={
+        <ColorsPicker value={value} onChange={handleChange} format="hex" />
+      }
+      trigger="click"
     >
       <div className="fabritor-toolbar-setter-trigger">
         {renderTrigger()}
       </div>
-    </ColorPicker>
+    </Popover>
   )
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,3 +1,4 @@
+import { fabric } from 'fabric';
 import * as FontFaceObserver from 'fontfaceobserver';
 import { v4 as uuidv4 } from 'uuid';
 import { FONT_PRESET_FAMILY_LIST, LOG_PREFIX } from './constants';
@@ -21,4 +22,64 @@ export const downloadFile = (content: string, type: string, name: string) => {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
+}
+
+const AngleCoordsMap = {
+  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 }),
+  0: JSON.stringify({ x1: 0, y1: 1, x2: 0, y2: 0 })
+}
+
+const transformAngle2Coords = (angle) => {
+  angle = angle % 360;
+  return JSON.parse(AngleCoordsMap[angle] || AngleCoordsMap[90]);
+}
+
+const transformCoords2Angel = (coords) => {
+  const keys = Object.keys(AngleCoordsMap);
+  for (let key of keys) {
+    if (JSON.stringify(coords) === AngleCoordsMap[key]) {
+      return key;
+    }
+  }
+  return 90;
+}
+
+export const transformFill2Colors = (v) => {
+  if (!v || typeof v === 'string') {
+    return { type: 'solid', color: v || '#ffffff' };
+  }
+  return {
+    type: v.type,
+    colorStops: v.colorStops,
+    angle: transformCoords2Angel(v.coords)
+  }
+}
+
+export const transformColors2Fill = (v) => {
+  let fill: any;
+  switch(v?.type) {
+    case 'solid':
+      fill = v.color;
+      break;
+    case 'linear':
+      fill = new fabric.Gradient({
+        type: 'linear',
+        gradientUnits: 'percentage',
+        coords: transformAngle2Coords(v.gradient.angle),
+        colorStops: v.gradient.colorStops
+      });
+      break;
+    case 'radial':
+      fill = new fabric.Gradient({
+        type: 'radial',
+        gradientUnits: 'percentage',
+        coords: { x1: 0.5, y1: 0.5, x2: 0.5, y2: 0.5, r1: 0, r2: 1 },
+        colorStops: v.gradient.colorStops
+      });
+    default:
+      break;
+  }
+  return fill;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -694,7 +694,7 @@
     "@ice/css-modules-hash-win32-arm64-msvc" "0.0.6"
     "@ice/css-modules-hash-win32-x64-msvc" "0.0.6"
 
-"@ice/jsx-runtime@^0.2.2":
+"@ice/jsx-runtime@^0.2.0", "@ice/jsx-runtime@^0.2.2":
   version "0.2.2"
   resolved "https://registry.npmmirror.com/@ice/jsx-runtime/-/jsx-runtime-0.2.2.tgz#057fc5764632471f0ec5974394218565f3b57cc8"
   integrity sha512-RKwn3QgqualrWz+HxGZh7gS5lmCHIwvF6oVRsZbUI6Ekll98RrgGGvUvkn1SdSF7fYqWOG4ZA4neplBCJqf4NA==
@@ -1138,6 +1138,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@swc/helpers@^0.5.1":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.3.tgz#98c6da1e196f5f08f977658b80d6bd941b5f294f"
+  integrity sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==
+  dependencies:
+    tslib "^2.4.0"
+
 "@swc/types@^0.1.3":
   version "0.1.5"
   resolved "https://registry.npmmirror.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
@@ -5400,6 +5407,17 @@ rc-input-number@~8.4.0:
     rc-input "~1.3.5"
     rc-util "^5.28.0"
 
+rc-input-number@~8.6.1:
+  version "8.6.1"
+  resolved "https://registry.yarnpkg.com/rc-input-number/-/rc-input-number-8.6.1.tgz#f0ebc66c34c8775a3245953521abcbd240d7fe03"
+  integrity sha512-gaAMUKtUKLktJ3Yx93tjgYY1M0HunnoqzPEqkb9//Ydup4DcG0TFL9yHBA3pgVdNIt5f0UWyHCgFBj//JxeD6A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/mini-decimal" "^1.0.1"
+    classnames "^2.2.5"
+    rc-input "~1.4.0"
+    rc-util "^5.28.0"
+
 rc-input@~1.3.5:
   version "1.3.5"
   resolved "https://registry.npmmirror.com/rc-input/-/rc-input-1.3.5.tgz#c69d3feb5172cc02ee5aaad86ae1ea8a73f864cb"
@@ -5409,6 +5427,15 @@ rc-input@~1.3.5:
     classnames "^2.2.1"
     rc-util "^5.18.1"
 
+rc-input@~1.4.0, rc-input@~1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/rc-input/-/rc-input-1.4.2.tgz#d2ca7dd2061f9113c07cc9789f17885cf75ec316"
+  integrity sha512-cKmXU5HiEq20gBwkyzu6FPUcDtVA5004G3FzNgfFpV2jHXXtE8VhYHTAgR6UAzKd2C5Fy2uYgAckQJWQKxA2Pw==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.18.1"
+
 rc-mentions@~2.9.1:
   version "2.9.1"
   resolved "https://registry.npmmirror.com/rc-mentions/-/rc-mentions-2.9.1.tgz#cfe55913fd5bc156ef9814f38c1a2ceefee032ce"
@@ -5654,6 +5681,17 @@ 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==
+  dependencies:
+    "@ice/jsx-runtime" "^0.2.0"
+    "@rc-component/color-picker" "~1.4.1"
+    "@swc/helpers" "^0.5.1"
+    rc-input "~1.4.2"
+    rc-input-number "~8.6.1"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"