Improve controlpanel

visualalgorithm/src/components/UI/Input/MultidataInputWithSubmit.module.css

@@ -20,6 +20,8 @@
 
     border-style: solid;
     border-width: 1px;
+
+    transition: all 500ms ease-out 100ms;
 }
 
 .formInvalid:hover,
@@ -29,6 +31,8 @@
 
     border-style: solid;
     border-width: 1px;
+
+    transition: all 500ms ease-out 100ms;
 }
 
 .form {

visualalgorithm/src/components/UI/Modal.jsx

@@ -1,40 +1,15 @@
 import React, {Fragment} from "react";
 import ReactDOM from "react-dom";
-
-const MODAL_STYLES = {
-    position: "fixed",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    backgroundColor: "#FFF",
-    padding: "50px",
-    zIndex: 1000
-}
-
-const OVERLAY_STYLES = {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    backgroundColor: "rgba(0,0,0, .6)",
-    zIndex: 1000
-}
-
-const BUTTON_STYLE = {
-    position: "fixed",
-    left: "50%",
-    border: "none"
-}
+import classes from "./Modal.module.css";
 
 const Modal = ({children, open, onClose}) => {
     if (!open) return null;
     return ReactDOM.createPortal(
         <Fragment>
-            <div style={OVERLAY_STYLES} onClick={onClose}/>
-            <div style={MODAL_STYLES}>
+            <div className={classes.overlay} onClick={onClose}/>
+            <div className={classes.modal}>
                 {children}
-                <button style={BUTTON_STYLE} onClick={onClose}>{"Close"}</button>
+                <button className={classes.button} onClick={onClose}>{"Close"}</button>
             </div>
         </Fragment>,
         document.getElementById("portal")

visualalgorithm/src/components/UI/Modal.module.css

@@ -0,0 +1,51 @@
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #FFF;
+    padding: 50px;
+    z-index: 1000;
+
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+
+    align-content: center;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0,0,0, .6);
+    z-index: 1000;
+}
+
+.button {
+    width: 80px;
+    left: calc(50% - 40px);
+    position: fixed;
+
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+
+    background: #ffffff;
+    border: 1px solid #000000;
+    color: #000000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 20px;
+    transition: all 500ms ease-out 100ms;
+
+    cursor: pointer;
+}
+
+.button:hover {
+    background: #000000;
+    border: 1px solid rgba(0, 0, 0, 0);
+    color: #ffffff;
+}

visualalgorithm/src/components/UI/Navbar.module.css

@@ -41,6 +41,11 @@
     color: inherit;
     font-size: 20px;
     font-weight: 600;
+
+    width: 100%;
+    height: 100%;
+
+    align-content: center;
 }
 
 .algo:hover {

visualalgorithm/src/components/UI/SVG-Components/Circle.jsx

@@ -1,10 +1,9 @@
-import React, {useState} from "react";
+import React, {useRef, useState} from "react";
 import Draggable from "react-draggable";
 
-const Circle = ({cx, cy, opacity, fill, value, textFill, id, handleDrag, draggable, onRightClick, onLeftClick}) => {
-    const [isDragging, setIsDragging] = useState(false);
-    const baseX = cx;
-    const baseY = cy;
+const Circle = ({cx, cy, opacity, fill, value, textFill, id, handleDragStart, handleDrag, handleDragStop, draggable, onRightClick, onLeftClick}) => {
+    const isDragging = useRef(false);
+    const nodeRef = React.useRef(null);
 
     const handleMouseDown = (event) => {
         if (onLeftClick) {
@@ -21,41 +20,42 @@ const Circle = ({cx, cy, opacity, fill, value, textFill, id, handleDrag, draggab
     }
 
     const handleOnStop = (event, data) => {
-        if (! isDragging) {
+        if (! isDragging.current) {
             handleMouseDown(event)
-            return;
+            return
         }
 
-        const newX = baseX + data.x;
-        const newY = baseY + data.y;
+        const newX = data.x;
+        const newY = data.y;
 
-        setIsDragging(false)
-        handleDrag(id, newX, newY);
+        isDragging.current = false;
+        handleDragStop(id, newX, newY);
     }
 
     const handleOnStart = (event, data) => {
+        handleDragStart()
     }
 
     const handleOnDrag = (event, data) => {
-        const newX = baseX + data.x;
-        const newY = baseY + data.y;
-        setIsDragging(true)
+        const newX = data.x;
+        const newY = data.y;
+        isDragging.current = true;
         handleDrag(id, newX, newY);
     }
 
-    const group = (<g>
+    const group = (<g ref={nodeRef}>
         <circle
             r={20}
-            cx={cx}
-            cy={cy}
+            cx={0}
+            cy={0}
             key={cx}
             fill={fill}
             onContextMenu={handleRightClick}
             opacity={opacity}
         />
         <text
-            x={cx}
-            y={cy}
+            x={0}
+            y={0}
             fill={textFill}
             textAnchor="middle"
             alignmentBaseline="central"
@@ -68,9 +68,11 @@ const Circle = ({cx, cy, opacity, fill, value, textFill, id, handleDrag, draggab
         return group;
     } else {
         return <Draggable
+            position={{ x: cx, y: cy}}
             onStart={handleOnStart}
             onDrag={handleOnDrag}
             onStop={handleOnStop}
+            nodeRef={nodeRef}
         >
             {group}
         </Draggable>

visualalgorithm/src/components/UI/UndoRedoFields.module.css

@@ -40,6 +40,8 @@
 
     border-style: solid;
     border-width: 1px;
+
+    transition: all 500ms ease-out 100ms;
 }
 
 .buttonUndoRedo:hover:enabled {
@@ -50,4 +52,6 @@
     border-width: 1px;
 
     cursor: pointer;
+
+    transition: all 500ms ease-out 100ms;
 }