Merge branch 'master' of https://github.com/dhruvpatidar359/nextdraw

.github/workflows/greetings.yaml

@@ -0,0 +1,16 @@
+name: Greetings
+
+on: [pull_request_target, issues]
+
+jobs:
+  greeting:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+    - uses: actions/first-interaction@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-message: "Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible."
+        pr-message: "Welcome to Our repository.🎊 Thank you so much for taking the time to point this out."

components/Canvas.jsx

@@ -62,6 +62,9 @@ const Canvas = () => {
   const [scale, setscale] = useState(1);
   const textAreaRef = useRef();
   const [mouseEvent,setMouseEvent] = useState(null);
+  const [keys, setKeys] = useState(new Set());
+  const [IsPanning, setIsPanning] = useState("");;
+  const [startPanning, setStartPanning] = useState({ x:0, y:0 });
 
 
   const isFontLoaded = useFontFaceObserver([
@@ -109,7 +112,28 @@ const Canvas = () => {
   }, [roughCanvasRef]);
 
 
+  useEffect(()=>{
+    const canvas = document.getElementById("canvas")
+    const handleKeyDown = (event) => {
+      setKeys(keys => new Set(keys).add(event.key));
+    }
 
+    const handleKeyUp = event => {
+      setKeys(keys => {
+        const updatedKeys = new Set(keys);
+        updatedKeys.delete(event.key);
+        return updatedKeys;
+      });
+    };
+
+    // console.log(keys)
+    canvas.addEventListener("keydown", handleKeyDown);
+    canvas.addEventListener("keyup", handleKeyUp);
+    return () => {
+      canvas.removeEventListener("keydown", handleKeyDown);
+      canvas.removeEventListener("keyup", handleKeyUp);
+    };
+  },[keys])
 
 
 
@@ -315,17 +339,23 @@ const Canvas = () => {
   const modifyClient = (event) => {
     event.clientX = (event.clientX - panOffset.x * scale + scaleOffset.x) / scale;
     event.clientY = (event.clientY - panOffset.y * scale + scaleOffset.y) / scale;
-
-  }
+    
+  } 
 
   const handleMouseDown = (event) => {
-
+    const canvas = document.getElementById("canvas");
     if (event.button == 1) {
       dispatch(changeToolWheel(true));
       return;
     }
 
     modifyClient(event);
+    if(keys.has(" ")){
+      canvas.style.cursor = "grabbing"
+      setIsPanning("panning");
+      setStartPanning({ x: event.clientX, y: event.clientY })
+      return;
+    }
     if (action === 'writing') {
       return;
     }
@@ -472,7 +502,9 @@ const Canvas = () => {
 
   const handleMouseUp = (event) => {
     // according to scale and traslation , we have to modify indexes
-
+    setIsPanning("");
+    const canvas = document.getElementById("canvas");
+    canvas.style.cursor = ""
     modifyClient(event);
 
     if (action === 'writing') {
@@ -618,6 +650,14 @@ const Canvas = () => {
 
   const handleMouseMove = (event) => {
     modifyClient(event);
+    if(IsPanning === 'panning'){
+      const deltaX = event.clientX - startPanning.x;
+      const deltaY = event.clientY - startPanning.y;
+      setpanOffset(prevState => ({
+        x: prevState.x + deltaX / 2,
+        y: prevState.y + deltaY / 2 
+      }))
+    }
     setMouseEvent(event);
     if (tool === 'selection') {
 
@@ -814,7 +854,7 @@ const Canvas = () => {
         onMouseMove={handleMouseMove}
       ></canvas>
 
-
+ 
     </div>
 
 

components/PropertiesBar/PropertiesBar.jsx

@@ -23,6 +23,7 @@ const PropertiesBar = () => {
 
     const [stroke, setStroke] = useState("#000000");
     const [background, setBackground] = useState(null);
+    const [fillStyle, setFillStyle] = useState('solid');
     const [strokeStyle, setStrokeStyle] = useState([]);
     const [strokeWidth, setStrokeWidth] = useState(2);
     const [sharp, setSharp] = useState(false);
@@ -51,10 +52,20 @@ const PropertiesBar = () => {
         '#09203f',
     ]
 
+    const fillStyles = [
+        'solid',
+        'zigzag',
+        'cross-hatch',
+        // 'dots',
+        'sunburst',
+        'dashed',
+        'zigzag-line'
+    ]
+
     // useEffect used to preload the already applied properties on the elements
     useEffect(() => {
 
-        if (selectedElement != null) {
+        if (selectedElement !== null) {
             element = elements[parseInt(selectedElement.id.split("#")[1])];
             if (element === null || element === undefined) {
 
@@ -67,8 +78,10 @@ const PropertiesBar = () => {
                 const currentSharp = GlobalProps.sharp;
                 const bowing = GlobalProps.bowing;
                 const currentFontSize = GlobalProps.fontSize;
+                const currentFillStyle = GlobalProps.fillStyle;
 
                 setBackground(currentBackground);
+                setFillStyle(currentFillStyle);
                 setStrokeStyle(currentStrokeStyle);
                 setStrokeWidth(currentStrokeWidth);
                 setSharp(currentSharp);
@@ -80,14 +93,16 @@ const PropertiesBar = () => {
 
                 const currentStroke = element.stroke
 
-                if (element.type != "text") {
+                if (element.type !== "text") {
                     const currentBackground = element.fill;
+                    const currentFillStyle = element.fillStyle;
                     const currentStrokeStyle = element.strokeStyle;
                     const currentStrokeWidth = element.strokeWidth;
                     const currentSharp = element.sharp;
                     const bowing = element.bowing;
 
                     setBackground(currentBackground);
+                    setFillStyle(currentFillStyle);
                     setStrokeStyle(currentStrokeStyle);
                     setStrokeWidth(currentStrokeWidth);
                     setSharp(currentSharp);
@@ -103,13 +118,15 @@ const PropertiesBar = () => {
 
             const currentStroke = GlobalProps.stroke
             const currentBackground = GlobalProps.fill;
+            const currentFillStyle = GlobalProps.fillStyle;
             const currentStrokeStyle = GlobalProps.strokeStyle;
             const currentStrokeWidth = GlobalProps.strokeWidth;
             const currentSharp = GlobalProps.sharp;
             const bowing = GlobalProps.bowing;
             const currentFontSize = GlobalProps.fontSize;
 
             setBackground(currentBackground);
+            setFillStyle(currentFillStyle);
             setStrokeStyle(currentStrokeStyle);
             setStrokeWidth(currentStrokeWidth);
             setSharp(currentSharp);
@@ -132,6 +149,7 @@ const PropertiesBar = () => {
         if (selectedElement === null || tool !== 'selection') {
             GlobalProps.stroke = stroke;
             GlobalProps.fill = background;
+            GlobalProps.fillStyle = fillStyle;
             GlobalProps.strokeStyle = strokeStyle;
             GlobalProps.strokeWidth = strokeWidth;
             GlobalProps.sharp = sharp;
@@ -163,7 +181,7 @@ const PropertiesBar = () => {
             case "rectangle":
             case "diamond":
             case "ellipse":
-                options = { stroke: stroke, fill: background, strokeStyle: strokeStyle, strokeWidth: strokeWidth, sharp: sharp, bowing: bowing };
+                options = { stroke: stroke, fill: background, fillStyle: fillStyle, strokeStyle: strokeStyle, strokeWidth: strokeWidth, sharp: sharp, bowing: bowing };
                 break;
             case "text":
                 options = { stroke: stroke, fontSize: fontSize };
@@ -228,7 +246,7 @@ const PropertiesBar = () => {
 
 
         setChangedByUser(false);
-    }, [firstEffectCompleted, stroke, background, strokeStyle, strokeWidth, sharp, bowing, fontSize])
+    }, [firstEffectCompleted, stroke, background,fillStyle, strokeStyle, strokeWidth, sharp, bowing, fontSize])
 
 
   if (tool === "eraser") {
@@ -299,6 +317,26 @@ const PropertiesBar = () => {
 
                             <SimpleColorPicker stroke={background} setStroke={setBackground} setChangedByUser={setChangedByUser}></SimpleColorPicker></div>
 
+                    </CardContent>
+
+                        : null}
+
+                        {(tool != 'pencil' && tool != 'text' && tool != 'line' && selectedElement === null) || (selectedElement != null && selectedElement.type != "pencil" && selectedElement.type != 'text' && selectedElement.type != "line" === true) ? <CardContent >
+                        <span className='text-xs'>Fill style</span>
+                        <div className="flex flex-wrap max-w-[230px] gap-2 mt-1">
+                            {fillStyles.map((style) => (
+                                <div key={style} className={`border border-1 cursor-pointer active:scale-105 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10  ${fillStyle === style ? 'border-2 border-black ' : null}`}
+                                onClick={() => {
+                                    setChangedByUser(true);
+                                    setFillStyle(style);
+                                }}>
+                                <p className="text-xs rounded-md ">
+                                    {style}
+                                </p>  
+                            </div>
+                        ))}
+                        </div>
+
                     </CardContent>
 
                         : null}