feat: init rough

src/config.ts

@@ -14,4 +14,6 @@ export const IMAGE_CLIPPATH_QUALITY = false;
 export const MAX_HISTORY_LENGTH = 100;
 
 export const PANEL_WIDTH = 360;
-export const SETTER_WIDTH = 280;
+export const SETTER_WIDTH = 280;
+
+export const CAPTURE_SUBTARGET_WHEN_DBLCLICK = false;

src/context/index.ts

@@ -7,6 +7,7 @@ export interface IGloablStateContext {
   isReady?: boolean;
   setReady?: (o: boolean) => void;
   editor?: Editor;
+  roughSvg?: any;
 }
 
 export const GloablStateContext = createContext<IGloablStateContext>(null);

src/editor/index.tsx

@@ -12,7 +12,7 @@ import FabricHistory from './extensions/history';
 import AutoSave from './extensions/autosave';
 import { createGroup } from './objects/group';
 import createCustomClass from './custom-objects';
-import { HOVER_OBJECT_CORNER, HOVER_OBJECT_CONTROL } from '@/config';
+import { HOVER_OBJECT_CORNER, HOVER_OBJECT_CONTROL, CAPTURE_SUBTARGET_WHEN_DBLCLICK } from '@/config';
 
 export default class Editor {
   public canvas: fabric.Canvas;
@@ -222,10 +222,12 @@ export default class Editor {
         if (subTarget.type === 'f-text') {
           this._editTextInGroup(target, subTarget);
         } else {
-          subTarget.set('hasControls', false);
-          this.canvas.discardActiveObject();
-          this.canvas.setActiveObject(subTarget);
-          this.canvas.requestRenderAll();
+          if (CAPTURE_SUBTARGET_WHEN_DBLCLICK) {
+            subTarget.set('hasControls', false);
+            this.canvas.discardActiveObject();
+            this.canvas.setActiveObject(subTarget);
+            this.canvas.requestRenderAll();
+          }
         }
       }
     });

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

@@ -2,6 +2,7 @@ import { Flex } from 'antd';
 import Title from '@/fabritor/components/Title';
 import LineTypeList from './line-type-list';
 import ShapeTypeList from './shape-type-list';
+import RoughTypeList from './rough-type-list';
 import { drawArrowLine, drawLine, drawTriArrowLine } from '@/editor/objects/line';
 import createRect from '@/editor/objects/rect';
 import createShape from '@/editor/objects/shape';
@@ -10,7 +11,7 @@ import { GloablStateContext } from '@/context';
 import { createPathFromSvg } from '@/editor/objects/path';
 
 export default function ShapePanel () {
-  const { editor } = useContext(GloablStateContext);
+  const { editor, roughSvg } = useContext(GloablStateContext);
 
   const addLine = (item) => {
     const { type, options = {} } = item;
@@ -48,6 +49,22 @@ export default function ShapePanel () {
     }
   }
 
+  const addRough = (item) => {
+    const { key, elem, options } = item;
+    const canvas = editor.canvas;
+
+    const r = roughSvg.rectangle(0, 0, 400, 400, {
+      fill: '#F6C445',
+      stroke: '#EC6A52',
+      hachureGap: 16,
+      fillWeight: 6,
+      strokeWidth: 6
+    });
+    console.log(r)
+    const svgString = `<svg fill="none" xmlns="http://www.w3.org/2000/svg">${r.innerHTML}</svg>`
+    createPathFromSvg({ svgString, canvas, sub_type: key });
+  }
+
   return (
     <div className="fabritor-panel-wrapper">
       <Title>线条</Title>
@@ -78,6 +95,20 @@ export default function ShapePanel () {
           ))
         }
       </Flex>
+      <Title>手绘风格形状</Title>
+      <Flex gap={10} wrap="wrap" justify="space-around">
+        {
+          RoughTypeList.map(item => (
+            <div
+              key={item.key}
+              onClick={() => { addRough(item) }}
+              className="fabritor-panel-shape-item"
+            >
+              {item.elem}
+            </div>
+          ))
+        }
+      </Flex>
     </div>
   )
 }

src/fabritor/UI/panel/ShapePanel/rough-type-list.tsx

@@ -0,0 +1,9 @@
+export default [
+  {
+    key: 'rough-rect',
+    elem: 'rect',
+    options: {
+
+    }
+  }
+]

src/fabritor/index.tsx

@@ -9,6 +9,7 @@ import { GloablStateContext } from '@/context';
 import ContextMenu from './components/ContextMenu';
 import { SKETCH_ID } from '@/utils/constants';
 import ObjectRotateAngleTip from './components/ObjectRotateAngleTip';
+import rough from 'roughjs';
 
 import '../font.css';
 
@@ -31,7 +32,9 @@ const contentStyle: React.CSSProperties = {
 export default function Fabritor () {
   const canvasEl = useRef<HTMLCanvasElement>(null);
   const workspaceEl = useRef<HTMLDivElement>(null);
+  const roughSvgEl = useRef(null);
   const [editor, setEditor] = useState<Editor | null>(null);
+  const [roughSvg, setRoughSvg] = useState<any>();
   const [activeObject, setActiveObject] = useState<fabric.Object | null | undefined>(null);
   const [isReady, setReady] = useState(false);
   const contextMenuRef = useRef<any>(null);
@@ -110,9 +113,15 @@ export default function Fabritor () {
     setActiveObject(_editor.sketch);
   }
 
+  const initRoughSvg = () => {
+    // @ts-ignore rough svg
+    setRoughSvg(rough.svg(roughSvgEl.current));
+  }
+
   useEffect(() => {
     if (editor) {
       initEvent();
+      initRoughSvg();
     }
   }, [editor]);
 
@@ -133,7 +142,8 @@ export default function Fabritor () {
         setActiveObject,
         isReady,
         setReady,
-        editor
+        editor,
+        roughSvg
       }}
     >
       <Layout style={{ height: '100%' }} className="fabritor-layout">
@@ -151,6 +161,8 @@ export default function Fabritor () {
           </Content>
           <Setter />
         </Layout>
+
+        <svg id="fabritor-rough-svg" ref={roughSvgEl} />
       </Layout>
     </GloablStateContext.Provider>
   )

src/global.css

@@ -37,4 +37,10 @@ html, body {
   &:hover {
     background-color: rgba(64,87,109,.07);
   }
+}
+
+#fabritor-rough-svg {
+  position: fixed;
+  left: 99999999;
+  top: 99999999;
 }