Skip to content

Commit a9afdd6

Browse files
Akalanka47000Akalanka47000
committed
Fix: a few bugs
1 parent 3ce7b07 commit a9afdd6

File tree

9 files changed

+78
-53
lines changed

9 files changed

+78
-53
lines changed

‎src/components/controls/select/polyline/index.tsx‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import { useCallback } from "react";
21
import { useSelector } from "react-redux";
3-
import { Checkbox } from "@/components/core";
4-
import { store } from "@/store";
5-
import { selectPolylineById, updatePolylines } from "@/store/reducers/editor";
2+
import { selectPolylineById } from "@/store/reducers/editor";
63
import { d3Extended, rgbToHex } from "@/utils";
74
import { default as ControlInput } from "../../control-input";
85
import { default as SectionSelector } from "./section-selector";
@@ -12,13 +9,6 @@ const PolylineSelectControls = () => {
129
const firstPolyline = useSelector(selectPolylineById(selectedElementIds[0]));
1310
const firstElement = document.getElementById(selectedElementIds[0]);
1411

15-
const onCheckedChange = useCallback(
16-
(value: boolean) => {
17-
store.dispatch(updatePolylines({ ids: selectedElementIds, data: { freeSeating: value } }));
18-
},
19-
[selectedElementIds]
20-
);
21-
2212
return (
2313
<div className="flex flex-col gap-4 py-1">
2414
<SectionSelector firstElement={firstElement} selectedElementIds={selectedElementIds} />
@@ -47,19 +37,6 @@ const PolylineSelectControls = () => {
4737
});
4838
}}
4939
/>
50-
<div className="col-span-3 w-full flex justify-end items-center gap-[2.3rem]">
51-
<Checkbox
52-
id="stk-free-section-marker"
53-
checked={firstPolyline.freeSeating}
54-
onCheckedChange={onCheckedChange}
55-
/>
56-
<label
57-
htmlFor="stk-free-section-marker"
58-
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
59-
>
60-
Free seating section
61-
</label>
62-
</div>
6340
</div>
6441
</div>
6542
);

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Trash2 } from "lucide-react";
1+
import { Percent, Trash2 } from "lucide-react";
22
import { useSelector } from "react-redux";
33
import { default as debounce } from "lodash/debounce";
44
import { twMerge } from "tailwind-merge";
@@ -61,6 +61,18 @@ const SectionSelector = ({ firstElement, selectedElementIds }) => {
6161
className="h-8"
6262
onChange={(e) => onUpdateSection({ ...section, name: e.target.value })}
6363
/>
64+
<Percent
65+
size={22}
66+
className={twMerge(
67+
"flex-shrink-0 cursor-pointer transition-all duration-medium ",
68+
section?.freeSeating ? "text-blue-600 hover:text-blue-500" : "hover:text-gray-500"
69+
)}
70+
onClick={() =>
71+
section?.freeSeating
72+
? onUpdateSection({ ...section, freeSeating: false })
73+
: onUpdateSection({ ...section, freeSeating: true })
74+
}
75+
/>
6476
<Trash2
6577
size={22}
6678
className={twMerge(

‎src/components/operations/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const Operations: React.FC<ISTKProps> = ({
4242
events?.onExport(json);
4343
} else {
4444
console.log(json);
45+
sessionStorage.setItem("stk-data", JSON.stringify(json));
4546
navigator.clipboard.writeText(JSON.stringify(json));
4647
}
4748
};

‎src/components/workspace/elements/polyline.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
33
import { dataAttributes, selectors } from "@/constants";
44
import { IPolyline, ISTKProps, ISeatCategory, ISection } from "@/types";
55
import { d3Extended, getRelativeWorkspaceClickCoords } from "@/utils";
6-
import { panAndZoomWithTransition } from "../zoom";
6+
import { panAndZoomToArea } from "../zoom";
77

88
export interface IPolylineProps extends IPolyline {
99
className?: string;
@@ -12,12 +12,27 @@ export interface IPolylineProps extends IPolyline {
1212
categories?: ISeatCategory[];
1313
onClick: (e: any) => void;
1414
isSelected?: boolean;
15+
element?: any;
1516
}
1617

1718
const Polyline: React.FC<IPolylineProps> = forwardRef(
1819
(
19-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
20-
{ id, points, color, stroke, sections, categories, section, onClick, consumer, isSelected: _, ...props },
20+
{
21+
id,
22+
points,
23+
color,
24+
stroke,
25+
sections,
26+
categories,
27+
section,
28+
onClick,
29+
consumer,
30+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
31+
isSelected: _,
32+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
33+
element: __,
34+
...props
35+
},
2136
ref: any
2237
) => {
2338
const sectionObject = useMemo(() => sections?.find?.((s) => s.id === section), [sections, section]);
@@ -41,10 +56,10 @@ const Polyline: React.FC<IPolylineProps> = forwardRef(
4156
const visibilityOffset = +d3Extended.select(selectors.workspaceGroup).attr(dataAttributes.visibilityOffset);
4257
if (visibilityOffset > 0) {
4358
const coords = getRelativeWorkspaceClickCoords(e);
44-
panAndZoomWithTransition({
59+
panAndZoomToArea({
4560
k: visibilityOffset,
46-
x: coords.x - coords.x * visibilityOffset,
47-
y: coords.y - coords.y * visibilityOffset
61+
x: coords.x,
62+
y: coords.y
4863
});
4964
}
5065
}

‎src/components/workspace/elements/text.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
33
import { dataAttributes, selectors } from "@/constants";
44
import { ISTKProps, IText } from "@/types";
55
import { d3Extended, getRelativeClickCoordsWithTransform } from "@/utils";
6-
import { panAndZoomWithTransition } from "../zoom";
6+
import { panAndZoomToArea } from "../zoom";
77

88
export const textFontSize = 35;
99

@@ -40,10 +40,10 @@ const Text: React.FC<ITextProps> = forwardRef(
4040
const visibilityOffset = +d3Extended.select(selectors.workspaceGroup).attr(dataAttributes.visibilityOffset);
4141
if (visibilityOffset > 0) {
4242
const coords = getRelativeClickCoordsWithTransform(e);
43-
panAndZoomWithTransition({
43+
panAndZoomToArea({
4444
k: visibilityOffset,
45-
x: coords.x - coords.x * visibilityOffset,
46-
y: coords.y - coords.y * visibilityOffset
45+
x: coords.x,
46+
y: coords.y
4747
});
4848
}
4949
}

‎src/components/workspace/index.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -81,17 +81,6 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
8181
{booths.map((e) => (
8282
<Element key={e.id} type={ElementType.Booth} {...elementProps(e)} />
8383
))}
84-
{text.map((e) => (
85-
<Element
86-
key={e.id}
87-
type={ElementType.Text}
88-
fontSize={e.fontSize}
89-
fontWeight={e.fontWeight}
90-
letterSpacing={e.letterSpacing}
91-
embraceOffset={e.embraceOffset}
92-
{...elementProps(e)}
93-
/>
94-
))}
9584
{shapes.map((e) => (
9685
<Element
9786
key={e.id}
@@ -104,6 +93,17 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
10493
{...elementProps(e)}
10594
/>
10695
))}
96+
{text.map((e) => (
97+
<Element
98+
key={e.id}
99+
type={ElementType.Text}
100+
fontSize={e.fontSize}
101+
fontWeight={e.fontWeight}
102+
letterSpacing={e.letterSpacing}
103+
embraceOffset={e.embraceOffset}
104+
{...elementProps(e)}
105+
/>
106+
))}
107107
{polylines.map((e) => (
108108
<Element
109109
key={e.id}

‎src/components/workspace/zoom.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useLayoutEffect } from "react";
22
import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Minus, Plus } from "lucide-react";
33
import { useSelector } from "react-redux";
4+
import { default as debounce } from "lodash/debounce";
45
import { twMerge } from "tailwind-merge";
56
import { dataAttributes, ids, selectors } from "@/constants";
67
import { useSkipFirstRender } from "@/hooks";
@@ -9,14 +10,18 @@ import { d3Extended } from "@/utils";
910
import { Tool } from "../toolbar/data";
1011
import { showPostOffsetElements, showPreOffsetElements } from "./elements";
1112

12-
function handleZoom(e) {
13-
const workspace = d3Extended.select(selectors.workspaceGroup);
13+
const handleElementVisibility = debounce((workspace, k) => {
1414
const visibilityOffset = +workspace.attr(dataAttributes.visibilityOffset) || 0;
15-
if (e.transform.k * 1.1 < visibilityOffset) {
15+
if (k * 1.1 < visibilityOffset) {
1616
showPreOffsetElements();
1717
} else {
1818
showPostOffsetElements();
1919
}
20+
}, 25);
21+
22+
function handleZoom(e) {
23+
const workspace = d3Extended.select(selectors.workspaceGroup);
24+
handleElementVisibility(workspace, e.transform.k);
2025
workspace.attr("transform", e.transform);
2126
}
2227

@@ -58,12 +63,18 @@ export const panAndZoom = ({ k, x, y }) => {
5863
d3Extended.selectById(ids.workspace).call(zoom.transform, d3Extended.zoomIdentity.translate(x, y).scale(k));
5964
};
6065

61-
export const panAndZoomWithTransition = ({ k, x, y }) => {
66+
export const panAndZoomToArea = ({ k, x, y }) => {
67+
const transform = d3Extended.zoomTransform(document.querySelector(selectors.workspaceGroup));
68+
const { height: workspaceheight, width: workspaceWidth } = d3Extended.selectionBounds(
69+
d3Extended.selectById(ids.workspace)
70+
);
71+
const newX = x * (x > workspaceWidth / 2 ? -1 : 1) * transform.k * 0.75;
72+
const newY = (workspaceheight - y) * (y > workspaceheight / 2 ? -1 : 1);
6273
d3Extended
6374
.selectById(ids.workspace)
6475
.transition()
6576
.duration(1000)
66-
.call(zoom.transform, d3Extended.zoomIdentity.translate(x, y).scale(k));
77+
.call(zoom.transform, d3Extended.zoomIdentity.translate(newX, newY).scale(k));
6778
};
6879

6980
const panHandleClasses =
@@ -122,7 +133,7 @@ const Zoom = (props: Pick<ISTKProps, "mode" | "styles" | "options">) => {
122133
<div
123134
id={ids.panControls}
124135
className={twMerge(
125-
"absolute bottom-[7.5rem] left-10 flex h-20 w-20 bg-white rounded-full border border-black/20 splash after:bg-black/5",
136+
"absolute bottom-[7.5rem] left-10 h-20 w-20 bg-white rounded-full border border-black/20 after:bg-black/5",
126137
props.mode === "user" && "bottom-[5.25rem] left-9 md:bottom-[6rem] md:left-12",
127138
panStyles?.root?.className
128139
)}

‎src/stories/designer.stories.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,11 @@ export default {
1212
export const Default = {
1313
render: () => <SeatToolkit mode={"designer"} />
1414
};
15+
16+
export const Hydrated = {
17+
render: () => {
18+
const saved = sessionStorage.getItem("stk-data");
19+
const data = saved ? JSON.parse(saved) : undefined;
20+
return <SeatToolkit mode={"designer"} data={data} />;
21+
}
22+
};

‎src/utils/transformer.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ export const domPolylineToJSON = () => {
6868
.map((point) => {
6969
const [x, y] = point.split(",");
7070
return { x: +x, y: +y };
71-
})
71+
}),
72+
section: polyline.attr(dataAttributes.section)
7273
};
7374
});
7475
};

0 commit comments

Comments
 (0)