From 57b4b9404b363056891d7f4e6bcfe6030cf3d126 Mon Sep 17 00:00:00 2001 From: bobo Date: Thu, 28 Dec 2023 22:32:50 +0800 Subject: [PATCH] wip(gradient): sketch/text fill gradient --- package.json | 4 +-- src/editor/index.tsx | 5 ++-- src/fabritor/UI/panel/DesignPanel/index.tsx | 8 +++++- src/fabritor/UI/panel/TemplatePanel/index.tsx | 3 ++- src/fabritor/UI/panel/TextFx/index.tsx | 4 +-- .../UI/toolbar/SketchSetter/index.tsx | 9 ++++--- src/fabritor/components/ColorSetter/index.tsx | 27 ++++++++++--------- src/fabritor/index.tsx | 5 +++- src/utils/index.ts | 9 ++++--- yarn.lock | 8 +++--- 10 files changed, 50 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 5fbc6c4..99c9576 100644 --- 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 index cc060a0..5778d6b 100644 --- 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); } } \ No newline at end of file diff --git a/src/fabritor/UI/panel/DesignPanel/index.tsx b/src/fabritor/UI/panel/DesignPanel/index.tsx index 9c95722..be0f51f 100644 --- 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: { setActiveKey('layers'); }} /> + children: ( + { + setActiveKey('layers'); + }} + /> + ) } ]; diff --git a/src/fabritor/UI/panel/TemplatePanel/index.tsx b/src/fabritor/UI/panel/TemplatePanel/index.tsx index ca73c8a..6796a79 100644 --- 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(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 index 77975b1..b903362 100644 --- 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' }} > 描边 - - + + { const editor = getGlobalEditor(); @@ -29,9 +31,10 @@ export default function SketchSetter() { Modal.confirm({ title: '确认清空画布？', icon: , - 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 index e138d2b..f19a996 100644 --- a/src/fabritor/components/ColorSetter/index.tsx +++ b/src/fabritor/components/ColorSetter/index.tsx @@ -1,5 +1,4 @@ -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'; @@ -7,45 +6,49 @@ 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(); 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 ; + return ; } if (type === 'sketch') { - return + return } return ( -
+
) } useEffect(() => { if (object) { const colors = object[effectKey]; - if (typeof colors === 'string') { - setValue(transformFill2Colors(colors)); - } + setValue(transformFill2Colors(colors)); } }, [object]); return ( + } trigger="click" > diff --git a/src/fabritor/index.tsx b/src/fabritor/index.tsx index abc9383..eabb1de 100644 --- 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 () { { } 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 index d3efa45..c6c34f4 100644 --- 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== +react-colors-beauty@1.0.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"