Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added layers #76

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Added layers #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b9a71fd
Panning using space click and mouse click isn't working, fixed it
a-khushal May 19, 2024
a8556ee
added keys to dependency array in use effect line 138
a-khushal May 19, 2024
f70b863
added layers!
a-khushal Jun 6, 2024
8ef23f1
Merge branch 'master' of https://github.com/a-khushal/nextdraw into f…
a-khushal Jun 6, 2024
31ae380
Merge branch 'dhruvpatidar359:master' into feature/pan-Using-Space-key
a-khushal Jun 6, 2024
cf219cd
Merge branch 'feature/pan-Using-Space-key' of https://github.com/a-kh…
a-khushal Jun 6, 2024
b3f7399
made changes in layers
a-khushal Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions components/Canvas.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const Canvas = () => {
const [keys, setKeys] = useState(new Set());
const [IsPanning, setIsPanning] = useState("");;
const [startPanning, setStartPanning] = useState({ x:0, y:0 });


const isFontLoaded = useFontFaceObserver([
{ family: 'Virgil' }, // Same name you have in your CSS
Expand All @@ -88,7 +88,6 @@ const Canvas = () => {
const storedData = localStorage.getItem('elements');



if (storedData) {
const data = JSON.parse(storedData);
const copyData = [];
Expand All @@ -109,11 +108,14 @@ const Canvas = () => {


}
}, [roughCanvasRef]);
}, [roughCanvasRef, dispatch]);


useEffect(()=>{
const canvas = document.getElementById("canvas")
const canvas = document.getElementById("canvas");
canvas.tabIndex = 0;
canvas.focus();

const handleKeyDown = (event) => {
setKeys(keys => new Set(keys).add(event.key));
}
Expand All @@ -126,7 +128,6 @@ const Canvas = () => {
});
};

// console.log(keys)
canvas.addEventListener("keydown", handleKeyDown);
canvas.addEventListener("keyup", handleKeyUp);
return () => {
Expand All @@ -136,7 +137,6 @@ const Canvas = () => {
},[keys])



useEffect(() => {
const textArea = textAreaRef.current;

Expand Down
154 changes: 149 additions & 5 deletions components/PropertiesBar/PropertiesBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ import { Button } from '../ui/button'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { ScrollArea } from '../ui/scroll-area'

import { setElement } from '../Redux/features/elementSlice'
import elementSlice, { setChanged, setElement } from '../Redux/features/elementSlice'

import { MdRoundedCorner } from "react-icons/md"
import { GlobalProps } from '../Redux/GlobalProps'
import { ShapeCache } from "../Redux/ShapeCache"


const PropertiesBar = () => {
Expand Down Expand Up @@ -44,6 +45,7 @@ const PropertiesBar = () => {
const [firstEffectCompleted, setFirstEffectCompleted] = useState(false);



const dispatch = useDispatch();

const solids = [
Expand Down Expand Up @@ -265,9 +267,111 @@ const PropertiesBar = () => {
}, [firstEffectCompleted, stroke, background,fillStyle, strokeStyle, strokeWidth, sharp, bowing, fontSize, fontStyle, fontWeight])


if (tool === "eraser") {
return null;
}
if (tool === "eraser") {
return null;
}

const modifiedElements = (elementsCopy) => {
return elementsCopy.filter(element => (element.id !== selectedElement.id));
}

function sendToBack() {
if(elements.length == 1 || elements.length == 0) {
return;
}

const elementsCopy = elements.filter(element => element !== null && element !== undefined && Object.keys(element).length > 0).map(element => ({ ...element }));
const key = selectedElement.id.split("#")[0];
let temp = { ...selectedElement };
let filteredElements = modifiedElements(elementsCopy);
temp.id = key + "#0";
filteredElements.unshift(temp);

for(let i = 1; i < filteredElements.length; i ++) {
if(filteredElements[i] !== null && filteredElements[i] !== undefined) {
const elemId = filteredElements[i].id.split("#");
filteredElements[i].id = elemId[0] + `#${i}`;
}
}

dispatch(setElement([filteredElements, true, null]));
}

function bringToFront() {
if(elements.length == 1 || elements.length == 0) {
return;
}

const elementsCopy = elements.filter(element => element !== null && element !== undefined && Object.keys(element).length > 0).map(element => ({ ...element }));
const key = selectedElement.id.split("#")[0];
let temp = { ...selectedElement };
let filteredElements = modifiedElements(elementsCopy);
temp.id = key + `#${filteredElements.length}`;
filteredElements.push(temp);

for(let i = 0; i < filteredElements.length - 1; i ++) {
if(filteredElements[i] !== null && filteredElements[i] !== undefined) {
const elemId = filteredElements[i].id.split("#");
filteredElements[i].id = elemId[0] + `#${i}`;
}
}

dispatch(setElement([filteredElements, true, null]));
}

function sendBackward() {
if(elements.length == 1 || elements.length == 0) {
return;
}

const elementsCopy = elements.filter(element => element !== null && element !== undefined && Object.keys(element).length > 0).map(element => ({ ...element }));

let i = 0;
while(elementsCopy[i].id != selectedElement.id) {
i ++;
}

if(elementsCopy[i - 1] != undefined) {
const t = elementsCopy[i];
elementsCopy[i] = elementsCopy[i - 1];
elementsCopy[i - 1] = t;

let key = elementsCopy[i].id.split("#")[0];
elementsCopy[i].id = key + `#${i}`;

key = elementsCopy[i - 1].id.split("#")[0];
elementsCopy[i - 1].id = key + `#${i - 1}`;
}

dispatch(setElement([elementsCopy, true, null]));
}

function bringForward() {
if(elements.length == 1 || elements.length == 0) {
return;
}

const elementsCopy = elements.filter(element => element !== null && element !== undefined && Object.keys(element).length > 0).map(element => ({ ...element }));

let i = 0;
while(elementsCopy[i].id != selectedElement.id) {
i ++;
}

if(elementsCopy[i + 1] != undefined) {
const t = elementsCopy[i];
elementsCopy[i] = elementsCopy[i + 1];
elementsCopy[i + 1] = t;

let key = elementsCopy[i].id.split("#")[0];
elementsCopy[i].id = key + `#${i}`;

key = elementsCopy[i + 1].id.split("#")[0];
elementsCopy[i + 1].id = key + `#${i + 1}`;
}

dispatch(setElement([elementsCopy, true, null]));
}

return (
<div className='absolute left-2 top-20'>
Expand Down Expand Up @@ -611,7 +715,47 @@ const PropertiesBar = () => {

</CardContent>
: null}

<CardContent>
<span className='text-xs'>Layers</span>
<div className="flex flex-row">
<div onClick={sendToBack}>
<Button variant={"ghost"} className={`rounded-md h-8 w-6 m-1 cursor-pointer active:scale-105 bg-indigo-100 ${sharp === true ? "bg-[#d4d9d6]" : null} `}>
<div className="w-5 h-5 flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</div>
</Button>
</div>
<div onClick={sendBackward}>
<Button variant={"ghost"} className={`rounded-md h-8 w-6 m-1 cursor-pointer active:scale-105 bg-indigo-100 ${sharp === true ? "bg-[#d4d9d6]" : null} `}>
<div className="w-5 h-5 flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25 12 21m0 0-3.75-3.75M12 21V3" />
</svg>
</div>
</Button>
</div>
<div onClick={bringForward}>
<Button variant={"ghost"} className={`rounded-md h-8 w-6 m-1 cursor-pointer active:scale-105 bg-indigo-100 ${sharp === true ? "bg-[#d4d9d6]" : null} `}>
<div className="w-5 h-5 flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
</svg>
</div>
</Button>
</div>
<div onClick={bringToFront}>
<Button variant={"ghost"} className={`rounded-md h-8 w-6 m-1 cursor-pointer active:scale-105 bg-indigo-100 ${sharp === true ? "bg-[#d4d9d6]" : null} `}>
<div className="w-5 h-5 flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
</svg>
</div>
</Button>
</div>
</div>
</CardContent>

</Card>

Expand Down
8 changes: 3 additions & 5 deletions components/Redux/features/elementSlice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { createSlice, current } from "@reduxjs/toolkit";
import { GlobalProps } from "../GlobalProps";
import { ShapeCache } from "../ShapeCache";
import { useSelector } from "react-redux";


export const elementSlice = createSlice({
name: 'elements',
Expand Down Expand Up @@ -87,19 +89,15 @@ export const elementSlice = createSlice({
},
undo: (state, action) => {
if (state.index > 0) {

state.index = state.index - 1;
if(state.value[state.index][1] === null) {
return;
}
const key = state.value[state.index][1];
const undoElementIndex = GlobalProps.indexMap.get(GlobalProps.username + key);

const undoElement = state.value[state.index][0][undoElementIndex];
const roomId = GlobalProps.room;
if(roomId != null) {

GlobalProps.socket.emit("undo-element", { roomId,undoElement,key });
GlobalProps.socket.emit("undo-element", { roomId,key,key });
}

}
Expand Down