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

Line arrow #39

Merged
merged 4 commits into from
May 22, 2024
Merged

Line arrow #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9ef6c81
feat: added arrow-line to the toolbar
KirillSerg May 20, 2024
e898d6e
feat: implemented adding arrow-line (marker)
KirillSerg May 20, 2024
4e1c00b
fix: cleaning of toolbar element name state
KirillSerg May 20, 2024
665e645
fix: remove unnecessary code.
KirillSerg May 20, 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
13 changes: 13 additions & 0 deletions src/components/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,19 @@ const Canvas = () => {
xmlns="http://www.w3.org/2000/svg"
tabIndex={0}
>
<defs>
<marker
id="arrow"
markerWidth="5"
markerHeight="5"
refX="5"
refY="2.5"
orient="auto"
>
<path d="M 0 0 L 5 2.5 L 0 5" fill="none" stroke="black" />
</marker>
</defs>

{elements.map((element) => (
<SingleElement
key={element.id}
Expand Down
105 changes: 84 additions & 21 deletions src/components/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,101 @@
import { useEffect, useState } from 'react';
import { useAtom } from 'jotai';
import { creatingElementTypeAtom } from '../store/store';
import { creatingElementTypeAtom, initialElementAtom } from '../store/store';
import { Element } from '../types/CommonTypes';

const elementsType = {
free: 'free',
rect: 'rect',
ellipse: 'ellipse',
polygon: 'polygon',
line: 'line',
arrow_line: 'line',
};

const Toolbar = () => {
const [elementTypeName, setElementTypeName] =
useState<keyof typeof elementsType>('free');
const [creatingElementType, setCreatingElementType] = useAtom(
creatingElementTypeAtom,
);
const [, setInitialElement] = useAtom(initialElementAtom);

const handlerSetElementTypeName = (typeName: keyof typeof elementsType) => {
setElementTypeName(typeName);
setCreatingElementType(elementsType[typeName] as Element['type']);

if (typeName === 'arrow_line')
setInitialElement((prev) => {
return { ...prev, markerEnd: 'url(#arrow)' };
});
};

useEffect(() => {
if (creatingElementType === 'free') {
setElementTypeName('free');
}
}, [creatingElementType]);

return (
<header className="h-[6%] sticky top-0 flex justify-center gap-4 border-4 border-black">
<button
className={`${creatingElementType === 'free' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => setCreatingElementType('free')}
className={`${elementTypeName === 'free' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => handlerSetElementTypeName('free')}
>
🖱️
</button>
<button
className={`${creatingElementType === 'rect' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => setCreatingElementType('rect')}
className={`${elementTypeName === 'rect' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => handlerSetElementTypeName('rect')}
>
<svg
viewBox="0 0 24 24"
height="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0"
y="0"
width="100%"
height="100%"
x="2"
y="2"
width="20"
height="20"
stroke="black"
strokeWidth="2"
fill="none"
/>
</svg>
</button>
<button
className={`${creatingElementType === 'ellipse' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => setCreatingElementType('ellipse')}
className={`${elementTypeName === 'ellipse' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => handlerSetElementTypeName('ellipse')}
>
<svg
viewBox="0 0 24 24"
height="100%"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse
cx="50%"
cy="50%"
rx="45%"
ry="35%"
cx="12"
cy="12"
rx="10"
ry="7"
stroke="black"
strokeWidth="10%"
strokeWidth="2"
fill="none"
/>
</svg>
</button>

<button
className={`${creatingElementType === 'polygon' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => setCreatingElementType('polygon')}
className={`${elementTypeName === 'polygon' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => handlerSetElementTypeName('polygon')}
>
<svg
viewBox="0 0 24 24"
height="100%"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="12,0 24,24 0,24"
points="12,2 22,22 2,22"
fill="none"
stroke="black"
strokeWidth="2"
Expand All @@ -74,8 +104,8 @@ const Toolbar = () => {
</button>

<button
className={`${creatingElementType === 'line' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => setCreatingElementType('line')}
className={`${elementTypeName === 'line' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => handlerSetElementTypeName('line')}
>
<svg
viewBox="0 0 24 24"
Expand All @@ -92,6 +122,39 @@ const Toolbar = () => {
/>
</svg>
</button>

<button
className={`${elementTypeName === 'arrow_line' ? 'bg-orange-500' : 'bg-inherit'} p-[6px]`}
onClick={() => handlerSetElementTypeName('arrow_line')}
>
<svg
viewBox="0 0 24 24"
height="100%"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<marker
id="arrow"
markerWidth="5"
markerHeight="5"
refX="5"
refY="2.5"
orient="auto"
>
<path d="M 0 0 L 5 2.5 L 0 5" fill="none" stroke="black" />
</marker>
</defs>
<line
x1="0"
y1="12"
x2="24"
y2="12"
stroke="black"
strokeWidth="2"
markerEnd="url(#arrow)"
/>
</svg>
</button>
</header>
);
};
Expand Down
5 changes: 4 additions & 1 deletion src/store/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,13 @@ const initialElement: Element = {
x2: 0,
y2: 0,
points: "",
markerEnd: "",
stroke: 'black',
strokeWidth: 4,
fill: 'none',
}

export const initialElementAtom = atom<Element>(initialElement)
export const creatingElementTypeAtom = atom<Element["type"]>("free")
export const elementsAtom = atomWithStorage<Element[]>("elements", [])
export const selectedElementAtom = atom<Element | null>(null)
Expand Down Expand Up @@ -68,7 +70,7 @@ export const onMouseDownAtom = atom(
if (get(isDrawingAtom)) {
const creatingElementType = get(creatingElementTypeAtom)
const newEl = {
...initialElement,
...get(initialElementAtom),
type: creatingElementType,
id: crypto.randomUUID(),
x: update.x,
Expand Down Expand Up @@ -176,5 +178,6 @@ export const onMouseUpAtom = atom(
set(creatingElementTypeAtom, "free")
set(isDraggingAtom, false)
set(selectingAreaAtom, null)
set(initialElementAtom, initialElement)
}
)
1 change: 1 addition & 0 deletions src/types/CommonTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface Element {
y2: number;
// pointsarr: Array<number[]>; //[[x,y], [x,y], [x,y], ...]
points: string //"x,y x,y x,y ..."
markerEnd: string;
stroke: string;
strokeWidth: number;
fill: string;
Expand Down