tool selector in map planner

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",

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",

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 (
-    <div>
+    <>
+      <ToolsSelector tool={tool} setTool={setTool} />
       {containerWidth < 1127 && (
         <Message negative>
           Unfortunately this tool isn't designed for narrow screens but you can
@@ -346,22 +348,13 @@ const MapPlanner = () => {
         <input type="file" accept=".json" ref={fileInput} />
         {uploadError && <span style={{ color: "red" }}>{uploadError}</span>}
         <div style={{ paddingTop: "10px" }}>
-          <Grid columns={3}>
+          <Grid columns={2}>
             <Grid.Column>
               <CirclePicker
                 color={color}
                 onChangeComplete={newColor => setColor(newColor.hex)}
               />
             </Grid.Column>
-            <Grid.Column>
-              <h3>Tools</h3>
-              <Dropdown
-                onChange={(e, { value }) => setTool(value)}
-                options={tools}
-                selection
-                value={tool}
-              />
-            </Grid.Column>
             <Grid.Column>
               <h3>Add text</h3>
               <Input value={text} onChange={e => setText(e.target.value)} />
@@ -402,7 +395,7 @@ const MapPlanner = () => {
           <Grid.Column></Grid.Column>
         </Grid>
       </div>
-    </div>
+    </>
   )
 }
 export default MapPlanner

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 (
+    <Draggable handle="strong" onStart={onStart} onStop={onStop}>
+      <div
+        style={{
+          position: "fixed",
+          zIndex: "999",
+          background: "white",
+          borderRadius: "7px",
+          boxShadow: "7px 14px 13px 2px rgba(0,0,0,0.24)",
+          textAlign: "center",
+          width: "119px",
+        }}
+      >
+        <strong style={{ cursor: "move" }}>
+          <div
+            style={{
+              fontSize: "17px",
+              background: "#daedf4",
+              borderRadius: "7px 7px 0 0",
+              padding: "0.3em",
+            }}
+          >
+            Tools
+          </div>
+        </strong>
+        <div>
+          <Icon
+            name="pencil"
+            color="blue"
+            size="big"
+            bordered
+            inverted={tool === Tools.Pencil}
+            onClick={() => setTool(Tools.Pencil)}
+            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          />
+          <Icon
+            name="window minimize outline"
+            color="blue"
+            size="big"
+            bordered
+            inverted={tool === Tools.Line}
+            onClick={() => setTool(Tools.Line)}
+            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          />
+          <Icon
+            name="square outline"
+            color="blue"
+            size="big"
+            bordered
+            inverted={tool === Tools.Rectangle}
+            onClick={() => setTool(Tools.Rectangle)}
+            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          />
+          <Icon
+            name="circle outline"
+            color="blue"
+            size="big"
+            bordered
+            inverted={tool === Tools.Circle}
+            onClick={() => setTool(Tools.Circle)}
+            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          />
+          <Icon
+            name="object group outline"
+            color="blue"
+            size="big"
+            bordered
+            inverted={tool === Tools.Select}
+            onClick={() => setTool(Tools.Select)}
+            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          />
+        </div>
+      </div>
+    </Draggable>
+  )
+}
+
+export default ToolsSelector