= ({
= ({
style={styles?.input?.properties}
onChange={onLocationChange}
/>
-
- {showGridSwitch &&
}
+
+ {showGridSwitch && }
- }
+ variant="secondary"
onClick={onCogClick}
/>
diff --git a/src/components/toolbar/data.tsx b/src/components/toolbar/data.tsx
index eb3adce..a2fb265 100644
--- a/src/components/toolbar/data.tsx
+++ b/src/components/toolbar/data.tsx
@@ -1,11 +1,10 @@
-import { Circle, Eraser, Hand, Image, MousePointer2, PenTool, Shapes, SquareEqual, Type } from "lucide-react";
+import { CaseSensitive, Circle, Image, MousePointer2, Move, PenTool, Pentagon, Sparkles, Square } from "lucide-react";
import { twMerge } from "tailwind-merge";
export enum Tool {
Select = "Select",
Eraser = "Eraser",
Seat = "Seat",
- Booth = "Booth",
Pen = "Pen",
Text = "Text",
Shape = "Shapes",
@@ -28,7 +27,7 @@ export const tools = {
description: "Select and move objects"
},
[Tool.Eraser]: {
- icon: Eraser,
+ icon: Sparkles,
shortcut: "E",
description: "Click on an element to delete it"
},
@@ -37,13 +36,14 @@ export const tools = {
iconCursor: (props: any) =>
,
shortcut: "S",
crosshairs: true,
- description: "Click anywhere to place a seat"
- },
- [Tool.Booth]: {
- icon: SquareEqual,
- iconCursor: (props: any) =>
,
- shortcut: "B",
- description: "Click anywhere to place a booth"
+ description: "Click anywhere to place a seat",
+ subTools: [
+ {
+ name: "Square",
+ icon: Square,
+ iconCursor: (props: any) =>
+ }
+ ]
},
[Tool.Pen]: {
icon: PenTool,
@@ -54,12 +54,12 @@ export const tools = {
description: "Click anywhere to start drawing a shape"
},
[Tool.Text]: {
- icon: Type,
+ icon: CaseSensitive,
shortcut: "T",
description: "Click anywhere to place text"
},
[Tool.Shape]: {
- icon: Shapes,
+ icon: Pentagon,
shortcut: "C",
description: "Click anywhere to place a chosen shape from the library"
},
@@ -69,7 +69,7 @@ export const tools = {
description: "Upload an image to the workspace"
},
[Tool.Pan]: {
- icon: Hand,
+ icon: Move,
shortcut: "P",
description: "Click and drag to pan the workspace"
}
diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx
index 25bff79..0fdf12f 100644
--- a/src/components/toolbar/index.tsx
+++ b/src/components/toolbar/index.tsx
@@ -1,11 +1,21 @@
import { useCallback, useEffect } from "react";
+import { DraftingCompass } from "lucide-react";
import { useSelector } from "react-redux";
import { twMerge } from "tailwind-merge";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components";
-import { ids } from "@/constants";
+import {
+ Popover,
+ PopoverClose,
+ PopoverContent,
+ PopoverTrigger,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger
+} from "@/components";
+import { default as DockHandler } from "@/components/workspace/dock/handler";
+import { dataAttributes, ids } from "@/constants";
import { store } from "@/store";
import { clearCursor, setCursor, setSelectedPolylineId, showControls } from "@/store/reducers/editor";
-import { clearTool, selectTool } from "@/store/reducers/toolbar";
+import { clearTool, selectSubTool, selectTool } from "@/store/reducers/toolbar";
import { ISTKProps } from "@/types";
import { fallible } from "@/utils";
import { selectFirstShape } from "../controls/shapes";
@@ -13,6 +23,7 @@ import { Tool, tools } from "./data";
const ToolBar: React.FC
= (props) => {
const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
+ const selectedSubTool = useSelector((state: any) => state.toolbar.selectedSubTool);
const selectedPolylineId = store.getState().editor.selectedPolylineId;
const styles = props.styles?.toolbar;
@@ -41,77 +52,139 @@ const ToolBar: React.FC = (props) => {
useEffect(() => {
fallible(() => {
- if (selectedTool && selectedTool !== Tool.Shape) {
+ if (selectedSubTool) {
+ const subTool = tools[selectedTool].subTools?.find((tool) => tool.name === selectedSubTool);
+ store.dispatch(setCursor(subTool.iconCursor ?? subTool.icon));
+ } else if (selectedTool && selectedTool !== Tool.Shape) {
store.dispatch(setCursor(tools[selectedTool].iconCursor ?? tools[selectedTool].icon));
}
});
- }, [selectedTool]);
+ }, [selectedTool, selectedSubTool]);
- const onToolClick = (tool) => {
+ const onToolClick = (tool, isSubtoolClick: boolean) => {
+ if (isSubtoolClick) return;
store.dispatch(selectTool(tool));
if ([Tool.Image, Tool.Shape].includes(tool)) {
store.dispatch(showControls());
- if (tool === Tool.Shape) selectFirstShape();
+ if (tool === Tool.Shape) selectFirstShape({ options: props.options });
}
if (tool !== Tool.Pen && selectedPolylineId) {
store.dispatch(setSelectedPolylineId(null));
}
};
+ const onSubToolClick = (tool) => {
+ store.dispatch(selectSubTool(tool.name));
+ };
+
return (
);
};
diff --git a/src/components/workspace/cursor.tsx b/src/components/workspace/cursor.tsx
index ba68f76..304c7a9 100644
--- a/src/components/workspace/cursor.tsx
+++ b/src/components/workspace/cursor.tsx
@@ -19,13 +19,13 @@ export const Cursor = () => {
const y = ptr[1];
const workspace = document.getElementById(ids.workspace)?.getBoundingClientRect();
const zoomControls = document.getElementById(ids.zoomControls)?.getBoundingClientRect();
- const panControls = document.getElementById(ids.panControls)?.getBoundingClientRect();
+ const mainControls = document.getElementById(ids.controls)?.getBoundingClientRect();
if (workspace) {
const customCursor = document.getElementById(ids.cursor);
if (
isWithinBounds(x, y, workspace) &&
!isWithinBounds(x, y, zoomControls) &&
- !isWithinBounds(x, y, panControls) &&
+ !isWithinBounds(x, y, mainControls) &&
!resizeCursors.includes(e.target?.style?.cursor) &&
!e.target.id.includes("radix:") &&
e.target.getAttribute("role") !== "dialog"
diff --git a/src/components/workspace/dock/handler.tsx b/src/components/workspace/dock/handler.tsx
new file mode 100644
index 0000000..53caa24
--- /dev/null
+++ b/src/components/workspace/dock/handler.tsx
@@ -0,0 +1,23 @@
+import { memo } from "react";
+import { PanelBottomClose, PanelBottomOpen } from "lucide-react";
+import { useSelector } from "react-redux";
+import { twMerge } from "tailwind-merge";
+import { store } from "@/store";
+import { toggleDock } from "@/store/reducers/toolbar";
+
+function DockHandler(): JSX.Element {
+ const dock = useSelector((state: any) => state.toolbar.dock);
+ return (
+
store.dispatch(toggleDock(undefined))}
+ >
+ {dock ?
:
}
+
+ );
+}
+
+export default memo(DockHandler);
diff --git a/src/components/workspace/dock/index.tsx b/src/components/workspace/dock/index.tsx
new file mode 100644
index 0000000..10ab2cc
--- /dev/null
+++ b/src/components/workspace/dock/index.tsx
@@ -0,0 +1,195 @@
+import { useLayoutEffect } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Minus, Plus } from "lucide-react";
+import { useSelector } from "react-redux";
+import { default as debounce } from "lodash/debounce";
+import { twMerge } from "tailwind-merge";
+import { dataAttributes, ids, selectors } from "@/constants";
+import type { ISTKProps } from "@/types";
+import { d3Extended, getScaleFactorAccountingForViewBoxWidth } from "@/utils";
+import { Button } from "../../core";
+import { Tool } from "../../toolbar/data";
+import { showPostOffsetElements, showPreOffsetElements } from "../elements";
+import { default as Reload } from "../reload";
+import { default as DockHandler } from "./handler";
+import { VisibilityFreezeScale, VisibilityOffset } from "./visibility";
+
+const handleElementVisibility = debounce((workspace, k) => {
+ const visibilityOffset = +workspace.attr(dataAttributes.visibilityOffset) || 0;
+ const initialViewBoxScaleForWidth = +workspace.attr(dataAttributes.initialViewBoxScaleForWidth);
+ if (k * 1.1 < getScaleFactorAccountingForViewBoxWidth(visibilityOffset, initialViewBoxScaleForWidth)) {
+ showPreOffsetElements();
+ } else {
+ showPostOffsetElements();
+ }
+}, 25);
+
+function handleZoom(e) {
+ const workspace = d3Extended.select(selectors.workspaceGroup);
+ handleElementVisibility(workspace, e.transform.k);
+ workspace.attr("transform", e.transform);
+}
+
+const zoom = d3Extended.zoom().on("zoom", handleZoom);
+
+const zoomIn = () => {
+ d3Extended.selectById(ids.workspace).transition().call(zoom.scaleBy, 1.1);
+};
+
+const zoomOut = () => {
+ d3Extended.selectById(ids.workspace).transition().call(zoom.scaleBy, 0.9);
+};
+
+export const panLeft = (by = 50, duration = 250) => {
+ d3Extended.selectById(ids.workspace).transition().duration(duration).call(zoom.translateBy, by, 0);
+};
+
+export const panRight = (by = 50, duration = 250) => {
+ d3Extended
+ .selectById(ids.workspace)
+ .transition()
+ .duration(duration)
+ .call(zoom.translateBy, -1 * by, 0);
+};
+
+export const panUp = (by = 50, duration = 250) => {
+ d3Extended.selectById(ids.workspace).transition().duration(duration).call(zoom.translateBy, 0, by);
+};
+
+export const panDown = (by = 50, duration = 250) => {
+ d3Extended
+ .selectById(ids.workspace)
+ .transition()
+ .duration(duration)
+ .call(zoom.translateBy, 0, -1 * by);
+};
+
+export const panAndZoom = ({ k, x, y }) => {
+ d3Extended.selectById(ids.workspace).call(zoom.transform, d3Extended.zoomIdentity.translate(x, y).scale(k));
+};
+
+export const panAndZoomToArea = ({ k, x, y }) => {
+ d3Extended.selectById(ids.workspace).transition().duration(1000).call(zoom.scaleTo, k, [x, y]);
+};
+
+const Dock = (props: Pick
) => {
+ const dock = useSelector((state: any) => state.toolbar.dock);
+ const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
+
+ useLayoutEffect(() => {
+ const selection = d3Extended.selectById(ids.workspace);
+ selection.on("zoom", null);
+ if (selectedTool == Tool.Pan) {
+ selection.call(zoom);
+ } else {
+ const zoomSelection = selection.call(zoom).on("wheel.zoom", (e) => {
+ e.preventDefault();
+ const currentZoom = selection.property("__zoom").k || 1;
+ if (e.ctrlKey) {
+ const nextZoom = currentZoom * Math.pow(2, -e.deltaY * 0.01);
+ zoom.scaleTo(selection, nextZoom, d3Extended.pointer(e));
+ } else {
+ zoom.translateBy(selection, -(e.deltaX / currentZoom), -(e.deltaY / currentZoom));
+ }
+ });
+ if (props.mode !== "user") zoomSelection.on("mousedown.zoom", null);
+ }
+ }, [selectedTool]);
+
+ const zoomStyles = props.styles?.zoomControls;
+ const panStyles = props.styles?.panControls;
+ const dockStyles = props.styles?.dock;
+
+ const isDesigner = props.mode === "designer";
+ const showZoomControls = props.options?.showZoomControls ?? true;
+ const showVisibilityControls = isDesigner && (props.options?.showVisibilityControls ?? true);
+ const showReloadButton = props.options?.showReloadButton ?? false;
+ const isUser = props.mode === "user";
+
+ return (
+ <>
+ {isUser && (
+
+ {showReloadButton && (
+
+ )}
+ {(showZoomControls || showVisibilityControls) && }
+
+ )}
+ {(showZoomControls || showVisibilityControls) && (
+
+
div]:shrink-0 gap-2 transition-all duration-500 ease-in-out opacity-100 pointer-events-auto",
+ dockStyles?.container?.className,
+ !dock && "translate-y-20 opacity-0"
+ )}
+ style={dockStyles?.container?.properties}
+ >
+ {showVisibilityControls &&
}
+ {showZoomControls && (
+ <>
+
+
+
+
+
+
+
+ )}
+ {showVisibilityControls &&
}
+
+
);
};
diff --git a/src/components/workspace/reload.tsx b/src/components/workspace/reload.tsx
index 82bcdb2..c3aab09 100644
--- a/src/components/workspace/reload.tsx
+++ b/src/components/workspace/reload.tsx
@@ -13,13 +13,14 @@ const Reloader = (props: IProps) => {
svg]:hover:-rotate-45 [&>svg]:transition-all [&>svg]:transition-medium rounded-md p-2 transition-all duration-medium",
+ "w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash",
props.styles?.reloadButton?.className
)}
- style={props.styles?.reloadButton?.properties}
onClick={props?.onReload}
+ role="button"
+ style={props.styles?.reloadButton?.properties}
>
-
+
);
};
diff --git a/src/components/workspace/visibility.tsx b/src/components/workspace/visibility.tsx
deleted file mode 100644
index 51ff9db..0000000
--- a/src/components/workspace/visibility.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useSelector } from "react-redux";
-import { twMerge } from "tailwind-merge";
-import { dataAttributes, ids, selectors } from "@/constants";
-import { store } from "@/store";
-import { setInitialViewBoxScale, setVisibilityOffset } from "@/store/reducers/editor";
-import type { ISTKProps } from "@/types";
-import { d3Extended } from "@/utils";
-import { Button } from "../core";
-import { showAllElements } from "./elements";
-
-const freeze = () =>
- store.dispatch(setInitialViewBoxScale(d3Extended.zoomTransform(document.querySelector(selectors.workspaceGroup)).k));
-
-const unfreeze = () => store.dispatch(setInitialViewBoxScale(null));
-
-const setVisibility = () => {
- const offset = d3Extended.zoomTransform(document.querySelector(selectors.workspaceGroup)).k;
- store.dispatch(setVisibilityOffset(offset));
- d3Extended.select(selectors.workspaceGroup).attr(dataAttributes.visibilityOffset, offset);
-};
-
-const unsetVisibility = () => {
- d3Extended.select(selectors.workspaceGroup).attr(dataAttributes.visibilityOffset, 0);
- store.dispatch(setVisibilityOffset(0));
- showAllElements();
-};
-
-const VisibilityControls = (props: Pick) => {
- const initialViewBoxScale = useSelector((state: any) => state.editor.initialViewBoxScale);
- const visibilityOffset = useSelector((state: any) => state.editor.visibilityOffset);
-
- const styles = props.styles?.visibilityControls;
-
- return (
-
-
-
-
- );
-};
-
-export default VisibilityControls;
diff --git a/src/components/workspace/zoom.tsx b/src/components/workspace/zoom.tsx
deleted file mode 100644
index ecf9242..0000000
--- a/src/components/workspace/zoom.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import { useLayoutEffect } from "react";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Minus, Plus } from "lucide-react";
-import { useSelector } from "react-redux";
-import { default as debounce } from "lodash/debounce";
-import { twMerge } from "tailwind-merge";
-import { dataAttributes, ids, selectors } from "@/constants";
-import { useSkipFirstRender } from "@/hooks";
-import type { ISTKProps } from "@/types";
-import { d3Extended, getScaleFactorAccountingForViewBoxWidth } from "@/utils";
-import { Tool } from "../toolbar/data";
-import { showPostOffsetElements, showPreOffsetElements } from "./elements";
-
-const handleElementVisibility = debounce((workspace, k) => {
- const visibilityOffset = +workspace.attr(dataAttributes.visibilityOffset) || 0;
- const initialViewBoxScaleForWidth = +workspace.attr(dataAttributes.initialViewBoxScaleForWidth);
- if (k * 1.1 < getScaleFactorAccountingForViewBoxWidth(visibilityOffset, initialViewBoxScaleForWidth)) {
- showPreOffsetElements();
- } else {
- showPostOffsetElements();
- }
-}, 25);
-
-function handleZoom(e) {
- const workspace = d3Extended.select(selectors.workspaceGroup);
- handleElementVisibility(workspace, e.transform.k);
- workspace.attr("transform", e.transform);
-}
-
-const zoom = d3Extended.zoom().on("zoom", handleZoom);
-
-const zoomIn = () => {
- d3Extended.selectById(ids.workspace).transition().call(zoom.scaleBy, 1.1);
-};
-
-const zoomOut = () => {
- d3Extended.selectById(ids.workspace).transition().call(zoom.scaleBy, 0.9);
-};
-
-export const panLeft = (by = 50, duration = 250) => {
- d3Extended.selectById(ids.workspace).transition().duration(duration).call(zoom.translateBy, by, 0);
-};
-
-export const panRight = (by = 50, duration = 250) => {
- d3Extended
- .selectById(ids.workspace)
- .transition()
- .duration(duration)
- .call(zoom.translateBy, -1 * by, 0);
-};
-
-export const panUp = (by = 50, duration = 250) => {
- d3Extended.selectById(ids.workspace).transition().duration(duration).call(zoom.translateBy, 0, by);
-};
-
-export const panDown = (by = 50, duration = 250) => {
- d3Extended
- .selectById(ids.workspace)
- .transition()
- .duration(duration)
- .call(zoom.translateBy, 0, -1 * by);
-};
-
-export const panAndZoom = ({ k, x, y }) => {
- d3Extended.selectById(ids.workspace).call(zoom.transform, d3Extended.zoomIdentity.translate(x, y).scale(k));
-};
-
-export const panAndZoomToArea = ({ k, x, y }) => {
- d3Extended.selectById(ids.workspace).transition().duration(1000).call(zoom.scaleTo, k, [x, y]);
-};
-
-const panHandleClasses =
- "absolute z-10 text-black/40 cursor-pointer hover:text-black/80 transition-all duration-medium";
-
-const Zoom = (props: Pick) => {
- const selectedTool = useSelector((state: any) => state.toolbar.selectedTool);
- const showControls = useSelector((state: any) => state.editor.showControls);
-
- useLayoutEffect(() => {
- const selection = d3Extended.selectById(ids.workspace);
- selection.on("zoom", null);
- if (selectedTool == Tool.Pan) {
- selection.call(zoom);
- } else {
- const zoomSelection = selection.call(zoom).on("wheel.zoom", (e) => {
- e.preventDefault();
- const currentZoom = selection.property("__zoom").k || 1;
- if (e.ctrlKey) {
- const nextZoom = currentZoom * Math.pow(2, -e.deltaY * 0.01);
- zoom.scaleTo(selection, nextZoom, d3Extended.pointer(e));
- } else {
- zoom.translateBy(selection, -(e.deltaX / currentZoom), -(e.deltaY / currentZoom));
- }
- });
- if (props.mode !== "user") zoomSelection.on("mousedown.zoom", null);
- }
- }, [selectedTool]);
-
- useSkipFirstRender(() => {
- const workspace = d3Extended.selectById(ids.workspace);
- const controlTransformActive = workspace.attr("control-transform-active");
- if (showControls) {
- if (!controlTransformActive) {
- workspace.attr("control-transform-active", "true");
- workspace.transition().call(zoom.translateBy, -144, 0);
- }
- } else {
- if (controlTransformActive) {
- workspace.attr("control-transform-active", null);
- workspace.transition().call(zoom.translateBy, 144, 0);
- }
- }
- }, [showControls]);
-
- const zoomStyles = props.styles?.zoomControls;
- const panStyles = props.styles?.panControls;
-
- return (
- <>
-
-
-
panLeft()}
- style={panStyles?.handles?.left?.properties}
- />
- panRight()}
- style={panStyles?.handles?.right?.properties}
- />
- panUp()}
- style={panStyles?.handles?.up?.properties}
- />
- panDown()}
- style={panStyles?.handles?.down?.properties}
- />
- External Shapes
+
+You can control the shapes available to you within the toolkit by passing in an array of shapes in options as follows:
+
+```tsx
+import { SeatToolkit } from "@mezh-hq/react-seat-toolkit";
+import { FireExtinguisher } from "lucide-react";
+
+return
+```
+
+Here, we are passing in an array of shapes with a single shape, FireExtinguisher, which will be added to the default shapes available in the toolkit.
+
+If you need to completely override the default shapes available in the toolkit, you can set the overrideDefaultIconset property to true. This will remove all default shapes and keep only the shapes you pass
+
+
+
+---
+
+
+
+ NOTE: The shapes you pass in should be React components that render an SVG and must contain a `displayName` property. If the `displayName` property is not present, the toolkit will not be able to render the shape.
diff --git a/src/stories/user/basic.stories.tsx b/src/stories/user/basic.stories.tsx
index fb0e9e8..a764dc3 100644
--- a/src/stories/user/basic.stories.tsx
+++ b/src/stories/user/basic.stories.tsx
@@ -396,10 +396,6 @@ export const Story = {
category: null
}
],
- booths: [
- { id: "85fb6458-d65e-410b-9c73-cb37e4f83276", x: 582, y: 562.48 },
- { id: "c4cc8522-ba04-49b2-b9ab-c2ecb46494b8", x: 708, y: 562.48 }
- ],
text: [
{
id: "a2a867e1-db33-4254-8a9a-b59bc65c9660",
@@ -826,10 +822,6 @@ export const WithInitialViewBoxTransform = {
category: null
}
],
- booths: [
- { id: "92d30d1f-aa2a-4de0-a2ff-4b0a6433bdbf", x: 582, y: 562.48 },
- { id: "3a825886-1737-49cb-b1f0-3bebd54acaa0", x: 708, y: 562.48 }
- ],
text: [
{
id: "9758de86-ca95-44d7-845e-7891408a77d5",
diff --git a/src/stories/user/categorized.stories.tsx b/src/stories/user/categorized.stories.tsx
index 63c6236..c18516d 100644
--- a/src/stories/user/categorized.stories.tsx
+++ b/src/stories/user/categorized.stories.tsx
@@ -748,12 +748,6 @@ export const Story = {
category: "b26fffc7-1e54-43b8-8e29-5077541ee637"
}
],
- booths: [
- { id: "53d042ce-58e7-44ec-9dbd-97f3ced6159d", x: 567.4818725585938, y: 562.48 },
- { id: "14e6a2f4-5a6e-45fe-aa07-e419b5329276", x: 713.259033203125, y: 562.48 },
- { id: "20180e17-1245-4131-a040-46c9b7e0f9b6", x: 562.3191528320312, y: -247.08434631347654 },
- { id: "60dccf2e-818a-4f84-ae6e-b2c8a99adb6f", x: 713.4517822265625, y: -246.08437683105467 }
- ],
text: [
{
id: "116a57ac-9bc2-4f0c-a9fc-e1a57448bda7",
diff --git a/src/stories/user/sections.stories.tsx b/src/stories/user/sections.stories.tsx
index 28acb63..402d6d4 100644
--- a/src/stories/user/sections.stories.tsx
+++ b/src/stories/user/sections.stories.tsx
@@ -755,7 +755,6 @@ export const Story = {
category: "b26fffc7-1e54-43b8-8e29-5077541ee637"
}
],
- booths: [],
text: [
{
id: "116a57ac-9bc2-4f0c-a9fc-e1a57448bda7",
diff --git a/src/styles/animations/index.css b/src/styles/animations/index.css
deleted file mode 100644
index feb2fc9..0000000
--- a/src/styles/animations/index.css
+++ /dev/null
@@ -1,38 +0,0 @@
-@import "keyframes.css";
-
-@layer utilities {
- .splash {
- @apply relative overflow-hidden;
-
- &:after {
- @apply content-[''] absolute block bg-white w-0 h-0 hover:w-[100%] hover:h-[100%] top-1/2 left-1/2 opacity-[0.15] -translate-x-1/2 -translate-y-1/2 transition-all duration-medium;
- border-radius: inherit;
- }
- }
-
- .animated-chevron {
- @apply relative;
-
- &:before {
- @apply content-[''] absolute w-0 h-[0.18rem] top-[41%] right-[-0.05rem] mr-[0.5rem] bg-current rounded group-hover:w-[0.55rem] group-hover:md:w-[0.7rem] transition-all duration-medium;
- }
- }
-
- .animated-border {
- @apply relative;
-
- &:before,
- &:after {
- -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
- -webkit-mask-composite: xor;
- mask-composite: exclude;
- border-radius: inherit;
- @apply content-[''] absolute inset-0 border border-transparent filter contrast-[2] bg-current pointer-events-none transition-all duration-1000;
- }
-
- &:after {
- background: linear-gradient(var(--angle, 225deg), var(--tw-gradient-stops)) border-box;
- @apply animate-[rotate_2s_linear_infinite] opacity-0 hover:opacity-100;
- }
- }
-}
diff --git a/src/styles/animations/keyframes.css b/src/styles/animations/keyframes.css
deleted file mode 100644
index 334eda2..0000000
--- a/src/styles/animations/keyframes.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@property --angle {
- syntax: "";
- initial-value: 0deg;
- inherits: false;
-}
-
-@keyframes rotate {
- to {
- --angle: 360deg;
- }
-}
diff --git a/src/styles/index.css b/src/styles/index.css
index 04279e7..a8dc3e5 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,5 +1,4 @@
@import "components.css";
-@import "animations/index.css";
@import "utilities.css";
@tailwind base;
@@ -7,15 +6,19 @@
@tailwind utilities;
rect.workspace-selection {
- -webkit-touch-callout: none !important;
- -webkit-user-select: none !important;
- -khtml-user-select: none !important;
- -moz-user-select: none !important;
- -ms-user-select: none !important;
- user-select: none !important;
- stroke: #545454;
- stroke-width: 2px;
- stroke-opacity: 1;
- fill: white;
- fill-opacity: 0.5;
-}
\ No newline at end of file
+ -webkit-touch-callout: none !important;
+ -webkit-user-select: none !important;
+ -khtml-user-select: none !important;
+ -moz-user-select: none !important;
+ -ms-user-select: none !important;
+ user-select: none !important;
+ stroke: #545454;
+ stroke-width: 2px;
+ stroke-opacity: 1;
+ fill: white;
+ fill-opacity: 0.5;
+}
+
+.stk-core svg * {
+ transform-box: fill-box;
+}
diff --git a/src/types/elements/booth.ts b/src/types/elements/booth.ts
deleted file mode 100644
index 6525e9e..0000000
--- a/src/types/elements/booth.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface IBooth {
- id: string;
- x: number;
- y: number;
-}
diff --git a/src/types/elements/image.ts b/src/types/elements/image.ts
index 99fe52e..15435be 100644
--- a/src/types/elements/image.ts
+++ b/src/types/elements/image.ts
@@ -5,4 +5,5 @@ export interface IImage {
href: string;
width?: number;
height?: number;
+ rotation?: number;
}
diff --git a/src/types/elements/index.ts b/src/types/elements/index.ts
index 8a61a15..dd18681 100644
--- a/src/types/elements/index.ts
+++ b/src/types/elements/index.ts
@@ -2,5 +2,4 @@ export * from "./image";
export * from "./seat";
export * from "./text";
export * from "./shape";
-export * from "./booth";
export * from "./polyline";
diff --git a/src/types/elements/polyline.ts b/src/types/elements/polyline.ts
index 6fc8392..342b6d8 100644
--- a/src/types/elements/polyline.ts
+++ b/src/types/elements/polyline.ts
@@ -17,4 +17,5 @@ export interface IPolyline {
color?: string;
stroke?: string;
section?: string;
+ rotation?: number;
}
diff --git a/src/types/elements/seat.ts b/src/types/elements/seat.ts
index b6366c2..3fbd507 100644
--- a/src/types/elements/seat.ts
+++ b/src/types/elements/seat.ts
@@ -22,6 +22,8 @@ export interface ISeat {
label?: string;
category?: string | null;
status?: SeatStatus | string;
+ square?: boolean;
+ rotation?: number;
}
export interface IFreeSeat {
diff --git a/src/types/elements/shape.ts b/src/types/elements/shape.ts
index 9bdf575..ea4d68c 100644
--- a/src/types/elements/shape.ts
+++ b/src/types/elements/shape.ts
@@ -8,4 +8,5 @@ export interface IShape {
rx?: number;
stroke?: string;
color?: string;
+ rotation?: number;
}
diff --git a/src/types/elements/text.ts b/src/types/elements/text.ts
index 363c744..ac09772 100644
--- a/src/types/elements/text.ts
+++ b/src/types/elements/text.ts
@@ -8,4 +8,5 @@ export interface IText {
letterSpacing?: number;
color?: string;
embraceOffset?: boolean;
+ rotation?: number;
}
diff --git a/src/types/index.ts b/src/types/index.ts
index 737d1f4..7c5efd4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,4 @@
import type {
- IBooth,
IFreeSeat,
IImage,
IPolyline,
@@ -50,7 +49,6 @@ export interface ISTKData {
categories?: ISeatCategory[];
sections?: ISection[];
seats?: ISeat[];
- booths?: IBooth[];
text?: IText[];
shapes?: IShape[];
polylines?: IPolyline[];
@@ -90,6 +88,10 @@ export interface ISTKProps {
/** Disables category deletion if there are reserved seats falling under the category */
disableCategoryDeleteIfReserved?: boolean;
disableSectionDelete?: boolean;
+ shapes?: {
+ icons: React.FC[];
+ overrideDefaultIconset?: boolean;
+ };
};
plugins?: IPlugins;
}
diff --git a/src/types/styles.ts b/src/types/styles.ts
index f23bac7..caf3c60 100644
--- a/src/types/styles.ts
+++ b/src/types/styles.ts
@@ -49,11 +49,6 @@ export interface IStyles {
};
reloadButton?: IStyle;
elements?: {
- booth?: {
- selected?: IStyle;
- unselected?: IStyle;
- base?: IStyle;
- };
seat?: {
selected?: IStyle;
unselected?: IStyle;
@@ -89,5 +84,13 @@ export interface IStyles {
core?: {
container?: IStyle;
button?: IStyle;
+ tooltip?: {
+ trigger?: IStyle;
+ content?: IStyle;
+ };
+ };
+ dock?: {
+ container?: IStyle;
+ root?: IStyle;
};
}
diff --git a/src/utils/d3.ts b/src/utils/d3.ts
index 2caa161..d1c75b3 100644
--- a/src/utils/d3.ts
+++ b/src/utils/d3.ts
@@ -6,6 +6,7 @@ declare module "d3" {
moveToFront(): Selection;
map(callback: (d: Selection, i: number) => T): T[];
forEach(callback: (d: Selection, i: number) => T): T[];
+ rotation(): number;
}
}
@@ -38,6 +39,24 @@ selection.prototype.forEach = function (callback) {
});
};
+selection.prototype.rotation = function () {
+ if (!this.node()) return 0;
+ let transform: string;
+ if (this.node()?.tagName === "svg") {
+ transform = this.node().parentElement.style.transform;
+ } else {
+ transform = this.style("transform");
+ }
+ if (!transform) {
+ return 0;
+ }
+ const match = transform.match(/rotate\(([^)]+)\)/);
+ if (!match) {
+ return 0;
+ }
+ return Number(match[1].replace("deg", ""));
+};
+
export const d3Extended = {
drag,
pointer,
diff --git a/src/utils/transformer.ts b/src/utils/transformer.ts
index 676896d..56a2d1c 100644
--- a/src/utils/transformer.ts
+++ b/src/utils/transformer.ts
@@ -1,28 +1,22 @@
import { ElementType } from "@/components/workspace/elements";
import { dataAttributes, selectors } from "@/constants";
import { store } from "@/store";
+import { ISTKData } from "@/types";
import { rgbToHex } from ".";
import { default as d3Extended } from "./d3";
export const domSeatsToJSON = () => {
return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Seat}"]`).map((seat) => {
+ const square = (seat.node() as any)?.nodeName === "rect";
return {
id: seat.attr("id"),
- x: +seat.attr("cx"),
- y: +seat.attr("cy"),
+ x: +seat.attr(square ? "x" : "cx"),
+ y: +seat.attr(square ? "y" : "cy"),
label: document.getElementById(`${seat.attr("id")}-label`)?.textContent,
status: seat.attr(dataAttributes.status),
- category: seat.attr(dataAttributes.category)
- };
- });
-};
-
-export const domBoothsToJSON = () => {
- return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Booth}"]`).map((booth) => {
- return {
- id: booth.attr("id"),
- x: +booth.attr("x"),
- y: +booth.attr("y")
+ category: seat.attr(dataAttributes.category),
+ square,
+ rotation: seat.rotation()
};
});
};
@@ -38,7 +32,8 @@ export const domTextToJSON = () => {
fontWeight: +text.attr("font-weight"),
letterSpacing: +text.attr("letter-spacing"),
color: rgbToHex(text.style("stroke")) || text.attr("stroke"),
- embraceOffset: text.attr(dataAttributes.embraceOffset) === "true"
+ embraceOffset: text.attr(dataAttributes.embraceOffset) === "true",
+ rotation: text.rotation()
};
});
};
@@ -54,7 +49,8 @@ export const domShapesToJSON = () => {
height: +shape.attr("height"),
rx: shape.attr("rx") ? +shape.attr("rx") : undefined,
color: rgbToHex(shape.style("color")) || shape.attr("color"),
- stroke: rgbToHex(shape.style("stroke")) || shape.attr("stroke")
+ stroke: rgbToHex(shape.style("stroke")) || shape.attr("stroke"),
+ rotation: shape.rotation()
};
});
};
@@ -74,7 +70,8 @@ export const domPolylineToJSON = () => {
}),
section: polyline.attr(dataAttributes.section),
color: rgbToHex(polyline.style("color")) || polyline.attr("color"),
- stroke: rgbToHex(polyline.style("stroke")) || polyline.attr("stroke")
+ stroke: rgbToHex(polyline.style("stroke")) || polyline.attr("stroke"),
+ rotation: polyline.rotation()
};
})
.filter((polyline) => polyline.points.length > 1);
@@ -88,7 +85,8 @@ export const domImagesToJSON = () => {
y: +image.attr("y"),
width: +image.attr("width"),
height: +image.attr("height"),
- href: image.attr("href")
+ href: image.attr("href"),
+ rotation: image.rotation()
};
});
};
@@ -97,14 +95,13 @@ export const domTransform = () => {
return d3Extended.zoomTransform(document.querySelector(selectors.workspaceGroup));
};
-export const stateToJSON = () => {
+export const stateToJSON = (): ISTKData => {
const state = store.getState().editor;
return {
name: state.location,
categories: state.categories.slice(1),
sections: state.sections.slice(1),
seats: domSeatsToJSON(),
- booths: domBoothsToJSON(),
text: domTextToJSON(),
shapes: domShapesToJSON(),
polylines: domPolylineToJSON(),