diff --git a/frontend-react/package-lock.json b/frontend-react/package-lock.json index 64b25a327..28542bc60 100644 --- a/frontend-react/package-lock.json +++ b/frontend-react/package-lock.json @@ -11195,6 +11195,15 @@ "scheduler": "^0.18.0" } }, + "react-draggable": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.2.0.tgz", + "integrity": "sha512-5wFq//gEoeTYprnd4ze8GrFc+Rbnx+9RkOMR3vk4EbWxj02U6L6T3yrlKeiw4X5CtjD2ma2+b3WujghcXNRzkw==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.0" + } + }, "react-error-overlay": { "version": "6.0.4", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.4.tgz", diff --git a/frontend-react/package.json b/frontend-react/package.json index 277fe33ce..4d9de9395 100644 --- a/frontend-react/package.json +++ b/frontend-react/package.json @@ -12,6 +12,7 @@ "react-color": "^2.17.3", "react-datepicker": "^2.10.1", "react-dom": "^16.12.0", + "react-draggable": "^4.2.0", "react-infinite-scroller": "^1.2.4", "react-router-dom": "^5.1.2", "react-scripts": "^3.3.0", diff --git a/frontend-react/src/components/plans/MapPlanner.js b/frontend-react/src/components/plans/MapPlanner.js index faa128266..1ea3c53b5 100644 --- a/frontend-react/src/components/plans/MapPlanner.js +++ b/frontend-react/src/components/plans/MapPlanner.js @@ -39,6 +39,7 @@ import towers from "../../assets/plannerMaps/towers-sz.png" import warehouse from "../../assets/plannerMaps/warehouse-sz.png" import world from "../../assets/plannerMaps/world-sz.png" import { wpnMedium } from "../../assets/imageImports" +import ToolsSelector from "./ToolsSelector" const MapPlanner = () => { let sketch = null @@ -285,7 +286,8 @@ const MapPlanner = () => { } return ( -
+ <> + {containerWidth < 1127 && ( Unfortunately this tool isn't designed for narrow screens but you can @@ -346,22 +348,13 @@ const MapPlanner = () => { {uploadError && {uploadError}}
- + setColor(newColor.hex)} /> - -

Tools

- setTool(value)} - options={tools} - selection - value={tool} - /> -

Add text

setText(e.target.value)} /> @@ -402,7 +395,7 @@ const MapPlanner = () => {
-
+ ) } export default MapPlanner diff --git a/frontend-react/src/components/plans/ToolsSelector.js b/frontend-react/src/components/plans/ToolsSelector.js new file mode 100644 index 000000000..bbc6843aa --- /dev/null +++ b/frontend-react/src/components/plans/ToolsSelector.js @@ -0,0 +1,94 @@ +import React, { useState } from "react" +import Draggable from "react-draggable" +import { Icon } from "semantic-ui-react" +import { Tools } from "@sendou/react-sketch" + +const ToolsSelector = ({ tool, setTool }) => { + const [activeDrags, setActiveDrags] = useState(0) + + const onStart = () => { + setActiveDrags(activeDrags + 1) + } + + const onStop = () => { + setActiveDrags(activeDrags - 1) + } + + return ( + +
+ +
+ Tools +
+
+
+ setTool(Tools.Pencil)} + style={{ cursor: "pointer", marginTop: "0.1em" }} + /> + setTool(Tools.Line)} + style={{ cursor: "pointer", marginTop: "0.1em" }} + /> + setTool(Tools.Rectangle)} + style={{ cursor: "pointer", marginTop: "0.1em" }} + /> + setTool(Tools.Circle)} + style={{ cursor: "pointer", marginTop: "0.1em" }} + /> + setTool(Tools.Select)} + style={{ cursor: "pointer", marginTop: "0.1em" }} + /> +
+
+
+ ) +} + +export default ToolsSelector