added scene manager

ui/src/features/scene_manager/presentation/components/scene_widget.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+export const SceneWidget = () => {
+  const [pressed, setPressed] = React.useState(false);
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+
+  React.useEffect(() => {
+    if (pressed) {
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", togglePressed);
+    }
+
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", togglePressed);
+    };
+  }, [position, pressed]);
+
+  const onMouseMove = (event: any) => {
+    const x = position.x + event.movementX;
+    const y = position.y + event.movementY;
+    setPosition({ x, y });
+  };
+
+  const togglePressed = () => {
+    setPressed((prev) => !prev);
+  };
+
+  const quickAndDirtyStyle = {
+    transform: "rotate(0deg)",
+    background: "rgb(73 73 73)",
+    color: "#FFFFFF",
+    fontSize: "20px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderColor: "aqua",
+    border: "solid",
+    borderRadius: "30px",
+  };
+  return (
+    <div style={{ position: "absolute", top: "0px", left: "0px" }}>
+      <div
+        className={pressed ? "box_0-active" : "box-0"}
+        style={{
+          ...quickAndDirtyStyle,
+          marginLeft: `${position.x}px`,
+          marginTop: `${position.y}px`,
+        }}
+        onClickCapture={(event) => {
+          event.stopPropagation();
+          setPressed(false);
+        }}
+        onMouseDown={togglePressed}
+      >
+        <p>{pressed ? "Dragging..." : "Press to drag"}</p>
+        <h1
+          onClick={(event) => {
+            event.stopPropagation();
+            console.log(201);
+          }}
+        >
+          HYO
+        </h1>
+      </div>
+    </div>
+  );
+};