Merge pull request #23 from ueckoken/add-svg-editer

路線図エディタの実装

frontend/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+.next

frontend/components/MapParts.tsx

@@ -0,0 +1,41 @@
+import { FC } from "react";
+import { Stage, Group, Rect, Text } from "react-konva";
+import { Point } from "../types/svgPartsTypes";
+
+export interface PlatformProps {
+    name: string;
+    position: Point;
+    isHorizontal?: boolean;
+    size?: number;
+}
+const Platform: FC<PlatformProps> = ({
+    name,
+    position,
+    isHorizontal = true,
+    size = 40,
+}) => {
+    const width = isHorizontal ? size : 20;
+    const height = isHorizontal ? 20 : size;
+    return (
+        <Group draggable>
+            <Rect
+                x={position.x - width / 2}
+                y={position.y - height / 2}
+                width={width}
+                height={height}
+                fill="white"
+                stroke="black"
+            />
+            <Text
+                text={name}
+                x={position.x}
+                y={position.y}
+                align="center"
+                verticalAlign="middle"
+                fontSize={20}
+            />
+        </Group>
+    );
+};
+
+export { Platform };

frontend/components/forms/PlatformComponentForm.tsx

@@ -0,0 +1,55 @@
+import { FC, useEffect, useState } from "react";
+import { PlatformProps } from "../MapParts";
+
+interface Props {
+    onChange: (p: PlatformProps) => void;
+}
+
+const PlatFormComponentForm: FC<Props> = ({ onChange }) => {
+    const [name, setName] = useState<string>("");
+    const [x, setX] = useState<number>(0);
+    const [y, setY] = useState<number>(0);
+
+    useEffect(() => {
+        onChange({
+            name,
+            position: { x, y },
+        });
+    }, [name, x, y]);
+
+    return (
+        <>
+            <div>
+                <label>
+                    駅名:{" "}
+                    <input
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                    />
+                </label>
+            </div>
+            <div>
+                <label>
+                    x:{" "}
+                    <input
+                        type="number"
+                        value={x}
+                        onChange={(e) => setX(+e.target.value)}
+                    />
+                </label>
+            </div>
+            <div>
+                <label>
+                    y:{" "}
+                    <input
+                        type="number"
+                        value={y}
+                        onChange={(e) => setY(+e.target.value)}
+                    />
+                </label>
+            </div>
+        </>
+    );
+};
+
+export default PlatFormComponentForm;

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.