Skip to content

Commit 976e8d7

Browse files
Akalanka47000Akalanka47000
committed
Feat: extracted section manager as separate control
1 parent b28b777 commit 976e8d7

File tree

3 files changed

+81
-61
lines changed

3 files changed

+81
-61
lines changed

‎src/components/controls/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { default as ImageControls } from "./image";
1010
import { default as NoControls } from "./no-controls";
1111
import { default as NoSelectedElement } from "./no-selection";
1212
import { default as NoSelectionControls } from "./no-selection-controls";
13+
import { default as PolylineControls } from "./polyline";
1314
import { default as SeatControls } from "./seat";
1415
import { default as SelectControls } from "./select";
1516
import { default as ShapeControls } from "./shapes";
@@ -43,6 +44,7 @@ const Controls = ({ options, styles }: IControlProps) => {
4344
return NoSelectedElement;
4445
}
4546
if (selectedTool === Tool.Seat) return SeatControls;
47+
if (selectedTool === Tool.Pen) return PolylineControls;
4648
if (selectedTool === Tool.Shape) return ShapeControls;
4749
if (selectedTool === Tool.Image) return ImageControls;
4850
return NoControls;

‎src/components/controls/polyline.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ISTKProps } from "@/types";
2+
import { SectionManager } from "./select/polyline/section-selector";
3+
4+
type IControlProps = Pick<ISTKProps, "options" | "styles">;
5+
6+
const PolylineControls = (props: IControlProps) => {
7+
return (
8+
<div className="flex flex-col gap-4">
9+
<SectionManager {...props} />
10+
</div>
11+
);
12+
};
13+
14+
export default PolylineControls;

‎src/components/controls/select/polyline/section-selector.tsx‎

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,70 @@ const onUpdateSection = debounce((section) => store.dispatch(updateSection(secti
1717

1818
type IControlProps = Pick<ISTKProps, "options" | "styles">;
1919

20+
export const SectionManager = ({ options }: IControlProps) => {
21+
const sections = useSelector((state: any) => state.editor.sections);
22+
return (
23+
<div className="grid gap-4">
24+
<div className="flex flex-col gap-2">
25+
<h4 className="font-bold leading-none pb-1">Manage Sections</h4>
26+
<hr />
27+
<span className="hover:text-gray-500 cursor-pointer transition-all duration-medium" onClick={onAddSection}>
28+
+ Add Section
29+
</span>
30+
<hr />
31+
</div>
32+
<div className="flex flex-col gap-4">
33+
{sections.map(
34+
(section, index) =>
35+
section.id !== "0" && (
36+
<div key={`category-${section.id}`} className="flex justify-start items-center gap-4">
37+
<input
38+
defaultValue={section.color}
39+
type="color"
40+
className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
41+
onChange={(e) => onUpdateSection({ ...section, color: e.target.value })}
42+
/>
43+
<input
44+
defaultValue={section.stroke}
45+
type="color"
46+
className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
47+
onChange={(e) => onUpdateSection({ ...section, stroke: e.target.value })}
48+
/>
49+
<Input
50+
defaultValue={section.name}
51+
className="h-8"
52+
onChange={(e) => onUpdateSection({ ...section, name: e.target.value })}
53+
/>
54+
<Percent
55+
size={22}
56+
className={twMerge(
57+
"flex-shrink-0 cursor-pointer transition-all duration-medium ",
58+
section?.freeSeating ? "text-blue-600 hover:text-blue-500" : "hover:text-gray-500"
59+
)}
60+
onClick={() =>
61+
section?.freeSeating
62+
? onUpdateSection({ ...section, freeSeating: false })
63+
: onUpdateSection({ ...section, freeSeating: true })
64+
}
65+
/>
66+
{!options?.disableSectionDelete && (
67+
<Trash2
68+
size={22}
69+
className={twMerge(
70+
"hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium",
71+
index === 0 && "opacity-0 pointer-events-none"
72+
)}
73+
onClick={() => onDeleteSection(section.id)}
74+
/>
75+
)}
76+
</div>
77+
)
78+
)}
79+
</div>
80+
</div>
81+
);
82+
};
83+
2084
const SectionSelector = ({ firstElement, selectedElementIds, options }: IControlProps & Record<string, any>) => {
2185
const sections = useSelector((state: any) => state.editor.sections);
2286
return (
@@ -30,67 +94,7 @@ const SectionSelector = ({ firstElement, selectedElementIds, options }: IControl
3094
</Caption>
3195
</PopoverTrigger>
3296
<PopoverContent className="bg-white w-80 py-4 mr-4">
33-
<div className="grid gap-4">
34-
<div className="flex flex-col gap-2">
35-
<h4 className="font-bold leading-none pb-1">Manage Sections</h4>
36-
<hr />
37-
<span
38-
className="hover:text-gray-500 cursor-pointer transition-all duration-medium"
39-
onClick={onAddSection}
40-
>
41-
+ Add Section
42-
</span>
43-
<hr />
44-
</div>
45-
<div className="flex flex-col gap-4">
46-
{sections.map(
47-
(section, index) =>
48-
section.id !== "0" && (
49-
<div key={`category-${section.id}`} className="flex justify-start items-center gap-4">
50-
<input
51-
defaultValue={section.color}
52-
type="color"
53-
className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
54-
onChange={(e) => onUpdateSection({ ...section, color: e.target.value })}
55-
/>
56-
<input
57-
defaultValue={section.stroke}
58-
type="color"
59-
className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
60-
onChange={(e) => onUpdateSection({ ...section, stroke: e.target.value })}
61-
/>
62-
<Input
63-
defaultValue={section.name}
64-
className="h-8"
65-
onChange={(e) => onUpdateSection({ ...section, name: e.target.value })}
66-
/>
67-
<Percent
68-
size={22}
69-
className={twMerge(
70-
"flex-shrink-0 cursor-pointer transition-all duration-medium ",
71-
section?.freeSeating ? "text-blue-600 hover:text-blue-500" : "hover:text-gray-500"
72-
)}
73-
onClick={() =>
74-
section?.freeSeating
75-
? onUpdateSection({ ...section, freeSeating: false })
76-
: onUpdateSection({ ...section, freeSeating: true })
77-
}
78-
/>
79-
{!options?.disableSectionDelete && (
80-
<Trash2
81-
size={22}
82-
className={twMerge(
83-
"hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium",
84-
index === 0 && "opacity-0 pointer-events-none"
85-
)}
86-
onClick={() => onDeleteSection(section.id)}
87-
/>
88-
)}
89-
</div>
90-
)
91-
)}
92-
</div>
93-
</div>
97+
<SectionManager options={options} />
9498
</PopoverContent>
9599
</Popover>
96100
</div>

0 commit comments

Comments
 (0)