From c24ddf94d4e15a4ab804396827e891ffdc13bf53 Mon Sep 17 00:00:00 2001
From: Aokashi <Aokashi.Towa@Gmail.com>
Date: Sun, 20 Feb 2022 22:48:39 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=E3=83=91=E3=83=BC=E3=83=84?=
 =?UTF-8?q?=E7=B7=A8=E9=9B=86=E3=81=AE=E6=A7=8B=E6=88=90=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E5=88=A5?=
 =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AB=E7=8B=AC=E7=AB=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/maker/src/info/PartsEdit.tsx         |   2 +-
 .../src/info/editforms/CommonEditForm.tsx     |   4 +-
 .../src/info/editforms/EditFormUtils.tsx      | 437 ------------------
 .../maker/src/info/editforms/MapEditForm.tsx  |  11 +-
 .../src/info/editforms/ObjectEditForm.tsx     |  26 +-
 .../src/info/editforms/PartsAppearInput.tsx   |   2 +-
 .../info/editforms/PartsAppearInputItem.tsx   |   9 +-
 .../{PartsEditComponent.ts => definitions.ts} |   0
 .../src/info/editforms/utils/CoordInput.tsx   |  68 +++
 .../info/editforms/utils/ItemPartsInput.tsx   |  42 ++
 .../src/info/editforms/utils/MessageInput.tsx |  22 +
 .../src/info/editforms/utils/NumberInput.tsx  |  44 ++
 .../editforms/utils/ObjectCommonInput.tsx     |  32 ++
 .../info/editforms/utils/ObjectPartsInput.tsx |  42 ++
 .../src/info/editforms/utils/SelectInput.tsx  |  68 +++
 .../src/info/editforms/utils/StatusInput.tsx  |  84 ++++
 .../src/info/editforms/utils/StringInput.tsx  |  20 +
 .../src/info/editforms/utils/URLInput.tsx     |  24 +
 .../src/info/editforms/utils/definitions.ts   |  27 ++
 .../maker/src/info/editforms/utils/index.ts   |  36 +-
 packages/maker/src/wwadata/WWADataState.ts    |   2 +-
 21 files changed, 509 insertions(+), 493 deletions(-)
 delete mode 100644 packages/maker/src/info/editforms/EditFormUtils.tsx
 rename packages/maker/src/info/editforms/{PartsEditComponent.ts => definitions.ts} (100%)
 create mode 100644 packages/maker/src/info/editforms/utils/CoordInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/ItemPartsInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/MessageInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/NumberInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/ObjectCommonInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/ObjectPartsInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/SelectInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/StatusInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/StringInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/URLInput.tsx
 create mode 100644 packages/maker/src/info/editforms/utils/definitions.ts

diff --git a/packages/maker/src/info/PartsEdit.tsx b/packages/maker/src/info/PartsEdit.tsx
index 06c695a..df33880 100644
--- a/packages/maker/src/info/PartsEdit.tsx
+++ b/packages/maker/src/info/PartsEdit.tsx
@@ -6,7 +6,7 @@ import { PartsType, createEmptyPartsAttribute } from "../classes/WWAData";
 import WWAConsts from "../classes/WWAConsts";
 import { ObjectEditTable } from "./editforms/ObjectEditForm";
 import { MapEditTable } from "./editforms/MapEditForm";
-import { PartsEditAttributeChange, PartsEditMessageChange } from "./editforms/PartsEditComponent";
+import { PartsEditAttributeChange, PartsEditMessageChange } from "./editforms/definitions";
 import { Form, Portal, Button, Icon, Dropdown, DropdownItemProps } from "semantic-ui-react";
 import PartsChip from "../common/PartsChip";
 import { GraphicSelect } from "../common/GraphicSelect";
diff --git a/packages/maker/src/info/editforms/CommonEditForm.tsx b/packages/maker/src/info/editforms/CommonEditForm.tsx
index 59808e7..772ae16 100644
--- a/packages/maker/src/info/editforms/CommonEditForm.tsx
+++ b/packages/maker/src/info/editforms/CommonEditForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { URLInput, StringInput, CoordInput } from "./EditFormUtils";
-import { PartsEditComponent } from "./PartsEditComponent";
+import { CoordInput, StringInput, URLInput } from "./utils";
+import { PartsEditComponent } from "./definitions";
 import WWAConsts from "../../classes/WWAConsts";
 import { convertRelativeValueFromCoord } from "../../common/convertRelativeValue";
 
diff --git a/packages/maker/src/info/editforms/EditFormUtils.tsx b/packages/maker/src/info/editforms/EditFormUtils.tsx
deleted file mode 100644
index b345534..0000000
--- a/packages/maker/src/info/editforms/EditFormUtils.tsx
+++ /dev/null
@@ -1,437 +0,0 @@
-import React from "react";
-import WWAConsts from "../../classes/WWAConsts";
-import { MoveType } from "../../classes/WWAData";
-import { Input, Dropdown, DropdownItemProps, Form, TextArea, Icon, StrictIconProps, Label, Button } from "semantic-ui-react";
-import { RelativeValue, convertDataValueFromRelativeCoord, convertRelativeValueFromStatus, convertDataValueFromRelativeStatus } from "../../common/convertRelativeValue";
-import BrowseMap from "../../common/BrowseMap";
-import { useState } from "react";
-import { ItemPartsBrowse, ObjectPartsBrowse } from "../../common/BrowseParts";
-
-/**
- * NOTE:
- * このファイルは utils ディレクトリに移行します。
- * utils ディレクトリでは、1コンポーネント1ファイルの構成としています。
- * 型定義については utils/index.ts で定義していますが、定義場所はまだ仮の段階のため、後で移動する可能性があります。
- */
-
-/**
- * テキストボックスやセレクトボックスで変更が生じた際に実行するコールバック関数の型です。
- */
-type InputChangeFunction = (value: string) => void;
-type CoordInputChangeFunction = (x: string, y: string) => void;
-type InputChangeFunctionWithName = (value: string, name: string) => void;
-
-/**
- * パーツ編集で必要になるステータス入力値のうち、ステータス1つ分で必要なプロパティを示す型です。
- */
-type NumberEditFormItem = {
-    label?: string,
-    value: number
-};
-
-export const NumberInput: React.FunctionComponent<{
-    value: number,
-    label: string,
-    name?: string
-    min?: number,
-    max?: number
-    onChange: InputChangeFunction
-}> = props => (
-    <Form.Field>
-        <label>{props.label}</label>
-        <Input
-            type="number"
-            name={props.name}
-            value={props.value}
-            min={props.min}
-            max={props.max}
-            onChange={(event, data) => {
-                props.onChange(data.value);
-            }}
-        />
-    </Form.Field>
-);
-
-/**
- * 数字を入力するコンポーネントを作成します。
- */
-const createNumberInput = (label: string) => {
-    return (props: {
-        value: number,
-        onChange: InputChangeFunction
-    }) => (
-        <NumberInput
-            label={label}
-            value={props.value}
-            onChange={props.onChange}
-        />
-    );
-};
-
-export const SoundNumberInput = createNumberInput("サウンド番号");
-export const WaitTimeInput = createNumberInput("待ち時間");
-
-export const SelectInput: React.FunctionComponent<{
-    selectableItems: DropdownItemProps[],
-    value: number,
-    label: string,
-    onChange: InputChangeFunction
-}> = props => (
-    <Form.Field>
-        <label>{props.label}</label>
-        <Dropdown
-            options={props.selectableItems}
-            value={props.value}
-            selection
-            onChange={(event, data) => {
-                if (data.value === undefined) {
-                    return;
-                }
-                const value = data.value as string;
-                props.onChange(value);
-            }}
-        />
-    </Form.Field>
-);
-
-/**
- * セレクトボックスのコンポーネントを作成します。
- */
-const createSelectInput = (label: string, selectableItems: DropdownItemProps[]) => {
-    return (props: {
-        value: number,
-        onChange: InputChangeFunction
-    }) => (
-        <SelectInput
-            label={label}
-            selectableItems={selectableItems}
-            value={props.value}
-            onChange={props.onChange}
-        />
-    );
-};
-
-export const MoveTypeInput = createSelectInput("動作属性", [
-    {
-        text: "静止",
-        value: MoveType.STATIC,
-    }, {
-        text: "プレイヤー追尾",
-        value: MoveType.CHASE_PLAYER
-    }, {
-        text: "逃げる",
-        value: MoveType.RUN_OUT
-    }, {
-        text: "うろうろする",
-        value: MoveType.HANG_AROUND
-    }
-]);
-export const PassableInput = createSelectInput("通行区分", [
-    {
-        text: "通行不可",
-        value: 0
-    }, {
-        text: "通行可",
-        value: WWAConsts.PASSABLE_OBJECT
-    }
-]);
-
-export const MessageInput: React.FunctionComponent<{
-    value: string,
-    label: string,
-    onChange: InputChangeFunction
-}> = props => (
-    <Form.Field>
-        <label>{props.label}</label>
-        <TextArea
-            value={props.value}
-            onChange={(event, data) => {
-                if (data.value === undefined) {
-                    return;
-                }
-                const value = typeof data.value === "number" ? data.value.toString() : data.value;
-                props.onChange(value);
-            }}
-        />
-    </Form.Field>
-);
-
-/**
- * モンスターやアイテムで使用するステータス入力欄です。
- *     「ステータス変化」といった負の値を扱うステータス入力欄と、「モンスター」や「アイテム」といった正の値しか扱わないステータス入力欄を分けるため、作成するメソッドを予め用意しています。
- * @param min 最小値
- * @param max 最大値
- * @param getValue NumberInput コンポーネントに値を渡す際に実行するメソッド
- * @param setValue NumberInput コンポーネントで入力した値からプロパティの onChange メソッドに渡す際に実行するメソッド
- */
-function createStatusInput(
-    min: number,
-    max: number,
-    getValue: (value: number) => number,
-    setValue: (value: string) => string
-): React.FC<{
-    items: {
-        energy?: NumberEditFormItem,
-        strength: NumberEditFormItem,
-        defence: NumberEditFormItem,
-        gold?: NumberEditFormItem,
-    },
-    onChange: InputChangeFunctionWithName
-}> {
-    /**
-     * @param props 下記の情報を含めた連想配列
-     * 
-     *     items: energy, strength, defence, gold の情報
-     *     label の指定がない場合はそれぞれ 生命力、攻撃力、防御力、所持金 になります。
-     * 
-     *     onChange: 入力欄が変更した場合に発生するメソッド
-     *     どのテキストボックから入力されたかは、 event.target.name から確認できます。
-     */
-    return (props) => {
-
-        const statusNumberInput = (item: NumberEditFormItem, name: string, defaultLabel: string) => (
-            <NumberInput
-                label={item.label !== undefined ? item.label : defaultLabel}
-                min={min}
-                max={max}
-                onChange={value => props.onChange(setValue(value), name)}
-                name={name}
-                value={getValue(item.value)}
-            />
-        );
-
-        return (
-            <>
-                {props.items.energy !== undefined &&
-                    statusNumberInput(props.items.energy, "energy", "生命力")
-                }
-                {statusNumberInput(props.items.strength, "strength", "攻撃力")}
-                {statusNumberInput(props.items.defence, "defence", "防御力")}
-                {props.items.gold !== undefined &&
-                    statusNumberInput(props.items.gold, "gold", "所持金")
-                }
-            </>
-        );
-    };
-}
-
-/**
- * 正の値しか扱わないステータス入力欄
- */
-export const StatusInput = createStatusInput(0, 60000, value => value, value => value);
-/**
- * 正の値と負の値を扱うステータス入力欄
- */
-export const AdjustStatusInput = createStatusInput(
-    -30000,
-    30000,
-    value => convertRelativeValueFromStatus(value),
-    value => convertDataValueFromRelativeStatus(parseInt(value)).toString()
-);
-
-/**
- * URL を入力するテキストボックスです。
- *     後述の StringInput と内容は共通ですが、今後 URL 入力だけ仕様変更が出来るように別に独立しています。
- *     テキストボックスには type="url" と指定していませんが、これは相対パスの文字列でも検出出来るようにするためです。
- */
-export const URLInput: React.FunctionComponent<{
-    label: string,
-    value: string,
-    onChange: InputChangeFunction
-}> = props => (
-    <Form.Field>
-        <label>{props.label}</label>
-        <Input
-            type="text"
-            value={props.value}
-            onChange={(event, data) => {
-                props.onChange(data.value);
-            }}
-        />
-    </Form.Field>
-);
-
-export const StringInput: React.FunctionComponent<{
-    label: string,
-    value: string,
-    onChange: InputChangeFunction
-}> = props => (
-    <Form.Field>
-        <label>{props.label}</label>
-        <Input
-            type="text"
-            value={props.value}
-            onChange={(event, data) => {
-                props.onChange(data.value);
-            }}
-        />
-    </Form.Field>
-);
-
-/**
- * 一部の物体パーツの編集画面に付いている「サウンド番号」「動作属性」「メッセージ」の3つの入力欄をセットにしたコンポーネントです。
- */
-export const ObjectCommonInput: React.FunctionComponent<{
-    messageLabel: string,
-    soundValue: number,
-    moveValue: number,
-    messageValue: string,
-    onSoundChange: InputChangeFunction,
-    onMoveChange: InputChangeFunction,
-    onMessageChange: InputChangeFunction
-}> = props => (
-    <>
-        <SoundNumberInput
-            value={props.soundValue}
-            onChange={props.onSoundChange}
-        />
-        <MoveTypeInput
-            value={props.moveValue}
-            onChange={props.onMoveChange}
-        />
-        <MessageInput
-            label={props.messageLabel}
-            value={props.messageValue}
-            onChange={props.onMessageChange}
-        />
-    </>
-);
-
-/**
- * 物体パーツ番号の参照機能が付いた入力コンポーネントです。
- */
-export const ObjectPartsInput: React.FC<{
-    value: number,
-    label?: string,
-    onChange: InputChangeFunction
-}> = props => {
-    const [isBrowseOpen, setIsBrowseOpen] = useState(false);
-
-    return (
-        <Form.Field>
-            {props.label &&
-                <label>{props.label}</label>
-            }
-            <Label>
-                {props.value}
-            </Label>
-            <Button
-                onClick={() => {
-                    setIsBrowseOpen(true);
-                }}
-            >
-                参照
-            </Button>
-            <ObjectPartsBrowse
-                isOpen={isBrowseOpen}
-                onClose={() => {
-                    setIsBrowseOpen(false);
-                }}
-                onSubmit={(partsNumber) => {
-                    props.onChange(partsNumber.toString());
-                }}
-                selectingPartsNumber={props.value}
-            />
-        </Form.Field>
-    );
-};
-
-/**
- * アイテムパーツ番号の参照機能が付いた入力コンポーネントです。
- */
-export const ItemPartsInput: React.FC<{
-    value: number,
-    label: string,
-    onChange: InputChangeFunction
-}> = props => {
-    const [isBrowseOpen, setIsBrowseOpen] = useState(false);
-
-    return (
-        <Form.Field>
-            <label>{props.label}</label>
-            <Label>
-                {props.value}
-            </Label>
-            <Button
-                onClick={() => {
-                    setIsBrowseOpen(true);
-                }}
-            >
-                参照
-            </Button>
-            <ItemPartsBrowse
-                isOpen={isBrowseOpen}
-                onClose={() => {
-                    setIsBrowseOpen(false);
-                }}
-                onSubmit={(partsNumber) => {
-                    props.onChange(partsNumber.toString());
-                }}
-                selectingPartsNumber={props.value}
-            />
-        </Form.Field>
-    );
-};
-
-/**
- * 座標を入力あるいは参照するコンポーネントです。
- */
-export const CoordInput: React.FC<{
-    label?: string,
-    x: RelativeValue,
-    y: RelativeValue,
-    onSubmit: CoordInputChangeFunction,
-}> = props => {
-
-    /**
-     * coordOptions は座標の種別を選択するドロップダウンの項目定数です。
-     */
-    const coordOptions: { text: string, value: RelativeValue["type"], icon: StrictIconProps["name"] }[] = [{
-        text: "絶対",
-        value: "ABSOLUTE",
-        icon: "point"
-    }, {
-        text: "相対",
-        value: "RELATIVE",
-        icon: "arrows alternate"
-    }, {
-        text: "プレイヤー",
-        value: "PLAYER",
-        icon: "user"
-    }];
-
-    const [isBrowseOpen, setBrowseOpen] = useState(false);
-
-    const ValueLabel: React.FC<{ name: string, value: RelativeValue }> = ({ name, value }) => {
-        const coordOption = coordOptions.find(options => options.value === value.type);
-        return (
-            <Label>
-                {name}
-                <Label.Detail>
-                    <Icon name={coordOption?.icon} />
-                    {value.type !== "PLAYER" && value.value}
-                </Label.Detail>
-            </Label>
-        );
-    }
-
-    return (
-        <Form.Field>
-            <ValueLabel name="X" value={props.x} />
-            <ValueLabel name="Y" value={props.y} />
-            <Button onClick={() => setBrowseOpen(true)}>参照</Button>
-            <BrowseMap
-                isOpen={isBrowseOpen}
-                defaultValue={{ x: props.x, y: props.y }}
-                onSubmit={(x, y) => {
-                    // TODO: 空欄の値では NaN が入ってくる可能性がある
-                    props.onSubmit(
-                        convertDataValueFromRelativeCoord(x).toString(),
-                        convertDataValueFromRelativeCoord(y).toString()
-                    );
-                }}
-                onClose={() => setBrowseOpen(false)}
-            />
-        </Form.Field>
-    );
-};
diff --git a/packages/maker/src/info/editforms/MapEditForm.tsx b/packages/maker/src/info/editforms/MapEditForm.tsx
index 656e8bd..24f5c40 100644
--- a/packages/maker/src/info/editforms/MapEditForm.tsx
+++ b/packages/maker/src/info/editforms/MapEditForm.tsx
@@ -1,12 +1,7 @@
-import WWAConsts from "../../classes/WWAConsts"
 import React from "react";
-import {
-    WaitTimeInput,
-    SoundNumberInput,
-    MessageInput,
-    ItemPartsInput
-} from "./EditFormUtils";
-import { PartsEditComponent, PartsEditComponentTable } from "./PartsEditComponent";
+import WWAConsts from "../../classes/WWAConsts"
+import { WaitTimeInput, SoundNumberInput, ItemPartsInput, MessageInput } from "./utils";
+import { PartsEditComponent, PartsEditComponentTable } from "./definitions";
 import { LocalGateEdit, URLGateEdit } from "./CommonEditForm";
 import { PartsAppearInput } from "./PartsAppearInput";
 
diff --git a/packages/maker/src/info/editforms/ObjectEditForm.tsx b/packages/maker/src/info/editforms/ObjectEditForm.tsx
index d78c84e..100d387 100644
--- a/packages/maker/src/info/editforms/ObjectEditForm.tsx
+++ b/packages/maker/src/info/editforms/ObjectEditForm.tsx
@@ -1,23 +1,23 @@
-import WWAConsts from "../../classes/WWAConsts";
 import React from "react";
+import { Form } from "semantic-ui-react";
 import {
+    ItemPartsInput,
+    ObjectPartsInput,
+    ObjectCommonInput,
+    StatusInput,
+    AdjustStatusInput,
+    MessageInput,
     MoveTypeInput,
     PassableInput,
-    SoundNumberInput,
-    WaitTimeInput,
-    MessageInput,
-    StatusInput,
-    NumberInput,
     SelectInput,
-    ObjectCommonInput,
-    AdjustStatusInput,
-    ItemPartsInput,
-    ObjectPartsInput
-} from "./EditFormUtils";
-import { PartsEditComponent, PartsEditComponentTable, PartsEditAttributeChange } from "./PartsEditComponent";
+    NumberInput,
+    SoundNumberInput,
+    WaitTimeInput
+} from "./utils";
+import { PartsEditComponent, PartsEditComponentTable, PartsEditAttributeChange } from "./definitions";
+import WWAConsts from "../../classes/WWAConsts";
 import { ItemMode } from "../../classes/WWAData";
 import { URLGateEdit, LocalGateEdit } from "./CommonEditForm";
-import { Form } from "semantic-ui-react";
 import { PartsAppearInput, PartsAppearSelectInput } from "./PartsAppearInput";
 
 /**
diff --git a/packages/maker/src/info/editforms/PartsAppearInput.tsx b/packages/maker/src/info/editforms/PartsAppearInput.tsx
index 27342d9..233489e 100644
--- a/packages/maker/src/info/editforms/PartsAppearInput.tsx
+++ b/packages/maker/src/info/editforms/PartsAppearInput.tsx
@@ -3,7 +3,7 @@ import { PartsType, PartsAttributeItems } from "../../classes/WWAData";
 import { Accordion, Icon } from "semantic-ui-react";
 import WWAConsts from "../../classes/WWAConsts";
 import { convertRelativeValueFromCoord } from "../../common/convertRelativeValue";
-import { InputChangeFunctionWithIndex, AppearPartsItem } from "./utils";
+import { InputChangeFunctionWithIndex, AppearPartsItem } from "./utils/definitions";
 import PartsAppearInputItem from "./PartsAppearInputItem";
 
 // 指定位置にパーツを出現 関係のコンポーネントをまとめたファイルです。
diff --git a/packages/maker/src/info/editforms/PartsAppearInputItem.tsx b/packages/maker/src/info/editforms/PartsAppearInputItem.tsx
index eb3e35a..9602981 100644
--- a/packages/maker/src/info/editforms/PartsAppearInputItem.tsx
+++ b/packages/maker/src/info/editforms/PartsAppearInputItem.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from "react";
-import { PartsType } from "../../classes/WWAData";
-import { AppearPartsItem } from "./utils";
-import WWAConsts from "../../classes/WWAConsts";
-import { InputChangeFunctionWithIndex } from "./utils";
 import { Form, Dropdown, Divider } from "semantic-ui-react";
-import { CoordInput } from "./EditFormUtils";
+import WWAConsts from "../../classes/WWAConsts";
+import { PartsType } from "../../classes/WWAData";
 import { BrowseParts } from "../../common/BrowseParts";
+import { CoordInput } from "./utils";
+import { AppearPartsItem, InputChangeFunctionWithIndex } from "./utils/definitions";
 
 /**
  * パーツ種類のドロップダウンで使用するオプション値です。
diff --git a/packages/maker/src/info/editforms/PartsEditComponent.ts b/packages/maker/src/info/editforms/definitions.ts
similarity index 100%
rename from packages/maker/src/info/editforms/PartsEditComponent.ts
rename to packages/maker/src/info/editforms/definitions.ts
diff --git a/packages/maker/src/info/editforms/utils/CoordInput.tsx b/packages/maker/src/info/editforms/utils/CoordInput.tsx
new file mode 100644
index 0000000..52f8b43
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/CoordInput.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { Form, Icon, StrictIconProps, Label, Button } from "semantic-ui-react";
+import { RelativeValue, convertDataValueFromRelativeCoord } from "../../../common/convertRelativeValue";
+import BrowseMap from "../../../common/BrowseMap";
+import { CoordInputChangeFunction } from "./definitions";
+
+/**
+ * 座標を入力あるいは参照するコンポーネントです。
+ */
+export const CoordInput: React.FC<{
+    label?: string,
+    x: RelativeValue,
+    y: RelativeValue,
+    onSubmit: CoordInputChangeFunction,
+}> = props => {
+
+    /**
+     * coordOptions は座標の種別を選択するドロップダウンの項目定数です。
+     */
+    const coordOptions: { text: string, value: RelativeValue["type"], icon: StrictIconProps["name"] }[] = [{
+        text: "絶対",
+        value: "ABSOLUTE",
+        icon: "point"
+    }, {
+        text: "相対",
+        value: "RELATIVE",
+        icon: "arrows alternate"
+    }, {
+        text: "プレイヤー",
+        value: "PLAYER",
+        icon: "user"
+    }];
+
+    const [isBrowseOpen, setBrowseOpen] = useState(false);
+
+    const ValueLabel: React.FC<{ name: string, value: RelativeValue }> = ({ name, value }) => {
+        const coordOption = coordOptions.find(options => options.value === value.type);
+        return (
+            <Label>
+                {name}
+                <Label.Detail>
+                    <Icon name={coordOption?.icon} />
+                    {value.type !== "PLAYER" && value.value}
+                </Label.Detail>
+            </Label>
+        );
+    }
+
+    return (
+        <Form.Field>
+            <ValueLabel name="X" value={props.x} />
+            <ValueLabel name="Y" value={props.y} />
+            <Button onClick={() => setBrowseOpen(true)}>参照</Button>
+            <BrowseMap
+                isOpen={isBrowseOpen}
+                defaultValue={{ x: props.x, y: props.y }}
+                onSubmit={(x, y) => {
+                    // TODO: 空欄の値では NaN が入ってくる可能性がある
+                    props.onSubmit(
+                        convertDataValueFromRelativeCoord(x).toString(),
+                        convertDataValueFromRelativeCoord(y).toString()
+                    );
+                }}
+                onClose={() => setBrowseOpen(false)}
+            />
+        </Form.Field>
+    );
+};
diff --git a/packages/maker/src/info/editforms/utils/ItemPartsInput.tsx b/packages/maker/src/info/editforms/utils/ItemPartsInput.tsx
new file mode 100644
index 0000000..d9fe595
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/ItemPartsInput.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Form, Label, Button } from "semantic-ui-react";
+import { useState } from "react";
+import { ItemPartsBrowse } from "../../../common/BrowseParts";
+import { InputChangeFunction } from "./definitions";
+
+/**
+ * アイテムパーツ番号の参照機能が付いた入力コンポーネントです。
+ */
+export const ItemPartsInput: React.FC<{
+    value: number;
+    label: string;
+    onChange: InputChangeFunction;
+}> = props => {
+    const [isBrowseOpen, setIsBrowseOpen] = useState(false);
+
+    return (
+        <Form.Field>
+            <label>{props.label}</label>
+            <Label>
+                {props.value}
+            </Label>
+            <Button
+                onClick={() => {
+                    setIsBrowseOpen(true);
+                }}
+            >
+                参照
+            </Button>
+            <ItemPartsBrowse
+                isOpen={isBrowseOpen}
+                onClose={() => {
+                    setIsBrowseOpen(false);
+                }}
+                onSubmit={(partsNumber) => {
+                    props.onChange(partsNumber.toString());
+                }}
+                selectingPartsNumber={props.value}
+            />
+        </Form.Field>
+    );
+};
diff --git a/packages/maker/src/info/editforms/utils/MessageInput.tsx b/packages/maker/src/info/editforms/utils/MessageInput.tsx
new file mode 100644
index 0000000..cb8cc6c
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/MessageInput.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Form, TextArea } from "semantic-ui-react";
+import { InputChangeFunction } from "./definitions";
+
+export const MessageInput: React.FunctionComponent<{
+    value: string;
+    label: string;
+    onChange: InputChangeFunction;
+}> = props => (
+    <Form.Field>
+        <label>{props.label}</label>
+        <TextArea
+            value={props.value}
+            onChange={(event, data) => {
+                if (data.value === undefined) {
+                    return;
+                }
+                const value = typeof data.value === "number" ? data.value.toString() : data.value;
+                props.onChange(value);
+            }} />
+    </Form.Field>
+);
diff --git a/packages/maker/src/info/editforms/utils/NumberInput.tsx b/packages/maker/src/info/editforms/utils/NumberInput.tsx
new file mode 100644
index 0000000..6712cf5
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/NumberInput.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Input, Form } from "semantic-ui-react";
+import { InputChangeFunction } from "./definitions";
+
+export const NumberInput: React.FunctionComponent<{
+    value: number;
+    label: string;
+    name?: string;
+    min?: number;
+    max?: number;
+    onChange: InputChangeFunction;
+}> = props => (
+    <Form.Field>
+        <label>{props.label}</label>
+        <Input
+            type="number"
+            name={props.name}
+            value={props.value}
+            min={props.min}
+            max={props.max}
+            onChange={(event, data) => {
+                props.onChange(data.value);
+            }} />
+    </Form.Field>
+);
+
+/**
+ * 数字を入力するコンポーネントを作成します。
+ */
+ const createNumberInput = (label: string) => {
+    return (props: {
+        value: number,
+        onChange: InputChangeFunction
+    }) => (
+        <NumberInput
+            label={label}
+            value={props.value}
+            onChange={props.onChange}
+        />
+    );
+};
+
+export const SoundNumberInput = createNumberInput("サウンド番号");
+export const WaitTimeInput = createNumberInput("待ち時間");
diff --git a/packages/maker/src/info/editforms/utils/ObjectCommonInput.tsx b/packages/maker/src/info/editforms/utils/ObjectCommonInput.tsx
new file mode 100644
index 0000000..6155b5b
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/ObjectCommonInput.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { InputChangeFunction } from "./definitions";
+import { SoundNumberInput } from "./NumberInput";
+import { MoveTypeInput } from "./SelectInput";
+import { MessageInput } from "./MessageInput";
+
+/**
+ * 一部の物体パーツの編集画面に付いている「サウンド番号」「動作属性」「メッセージ」の3つの入力欄をセットにしたコンポーネントです。
+ */
+
+export const ObjectCommonInput: React.FunctionComponent<{
+    messageLabel: string;
+    soundValue: number;
+    moveValue: number;
+    messageValue: string;
+    onSoundChange: InputChangeFunction;
+    onMoveChange: InputChangeFunction;
+    onMessageChange: InputChangeFunction;
+}> = props => (
+    <>
+        <SoundNumberInput
+            value={props.soundValue}
+            onChange={props.onSoundChange} />
+        <MoveTypeInput
+            value={props.moveValue}
+            onChange={props.onMoveChange} />
+        <MessageInput
+            label={props.messageLabel}
+            value={props.messageValue}
+            onChange={props.onMessageChange} />
+    </>
+);
diff --git a/packages/maker/src/info/editforms/utils/ObjectPartsInput.tsx b/packages/maker/src/info/editforms/utils/ObjectPartsInput.tsx
new file mode 100644
index 0000000..aa54045
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/ObjectPartsInput.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Form, Label, Button } from "semantic-ui-react";
+import { useState } from "react";
+import { ObjectPartsBrowse } from "../../../common/BrowseParts";
+import { InputChangeFunction } from "./definitions";
+
+/**
+ * 物体パーツ番号の参照機能が付いた入力コンポーネントです。
+ */
+export const ObjectPartsInput: React.FC<{
+    value: number;
+    label?: string;
+    onChange: InputChangeFunction;
+}> = props => {
+    const [isBrowseOpen, setIsBrowseOpen] = useState(false);
+
+    return (
+        <Form.Field>
+            {props.label &&
+                <label>{props.label}</label>}
+            <Label>
+                {props.value}
+            </Label>
+            <Button
+                onClick={() => {
+                    setIsBrowseOpen(true);
+                }}
+            >
+                参照
+            </Button>
+            <ObjectPartsBrowse
+                isOpen={isBrowseOpen}
+                onClose={() => {
+                    setIsBrowseOpen(false);
+                }}
+                onSubmit={(partsNumber) => {
+                    props.onChange(partsNumber.toString());
+                }}
+                selectingPartsNumber={props.value} />
+        </Form.Field>
+    );
+};
diff --git a/packages/maker/src/info/editforms/utils/SelectInput.tsx b/packages/maker/src/info/editforms/utils/SelectInput.tsx
new file mode 100644
index 0000000..497f6b6
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/SelectInput.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { Dropdown, DropdownItemProps, Form } from "semantic-ui-react";
+import WWAConsts from "../../../classes/WWAConsts";
+import { MoveType } from "../../../classes/WWAData";
+import { InputChangeFunction } from "./definitions";
+
+export const SelectInput: React.FunctionComponent<{
+    selectableItems: DropdownItemProps[];
+    value: number;
+    label: string;
+    onChange: InputChangeFunction;
+}> = props => (
+    <Form.Field>
+        <label>{props.label}</label>
+        <Dropdown
+            options={props.selectableItems}
+            value={props.value}
+            selection
+            onChange={(event, data) => {
+                if (data.value === undefined) {
+                    return;
+                }
+                const value = data.value as string;
+                props.onChange(value);
+            }} />
+    </Form.Field>
+);
+
+/**
+ * セレクトボックスのコンポーネントを作成します。
+ */
+export const createSelectInput = (label: string, selectableItems: DropdownItemProps[]) => {
+    return (props: {
+        value: number;
+        onChange: InputChangeFunction;
+    }) => (
+        <SelectInput
+            label={label}
+            selectableItems={selectableItems}
+            value={props.value}
+            onChange={props.onChange} />
+    );
+};
+
+export const MoveTypeInput = createSelectInput("動作属性", [
+    {
+        text: "静止",
+        value: MoveType.STATIC,
+    }, {
+        text: "プレイヤー追尾",
+        value: MoveType.CHASE_PLAYER
+    }, {
+        text: "逃げる",
+        value: MoveType.RUN_OUT
+    }, {
+        text: "うろうろする",
+        value: MoveType.HANG_AROUND
+    }
+]);
+export const PassableInput = createSelectInput("通行区分", [
+    {
+        text: "通行不可",
+        value: 0
+    }, {
+        text: "通行可",
+        value: WWAConsts.PASSABLE_OBJECT
+    }
+]);
diff --git a/packages/maker/src/info/editforms/utils/StatusInput.tsx b/packages/maker/src/info/editforms/utils/StatusInput.tsx
new file mode 100644
index 0000000..539851d
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/StatusInput.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { convertRelativeValueFromStatus, convertDataValueFromRelativeStatus } from "../../../common/convertRelativeValue";
+import { InputChangeFunctionWithName } from "./definitions";
+import { NumberInput } from "./NumberInput";
+
+/**
+ * パーツ編集で必要になるステータス入力値のうち、ステータス1つ分で必要なプロパティを示す型です。
+ */
+type NumberEditFormItem = {
+    label?: string;
+    value: number;
+};
+
+/**
+ * モンスターやアイテムで使用するステータス入力欄です。
+ *     「ステータス変化」といった負の値を扱うステータス入力欄と、「モンスター」や「アイテム」といった正の値しか扱わないステータス入力欄を分けるため、作成するメソッドを予め用意しています。
+ * @param min 最小値
+ * @param max 最大値
+ * @param getValue NumberInput コンポーネントに値を渡す際に実行するメソッド
+ * @param setValue NumberInput コンポーネントで入力した値からプロパティの onChange メソッドに渡す際に実行するメソッド
+ */
+function createStatusInput(
+    min: number,
+    max: number,
+    getValue: (value: number) => number,
+    setValue: (value: string) => string
+): React.FC<{
+    items: {
+        energy?: NumberEditFormItem;
+        strength: NumberEditFormItem;
+        defence: NumberEditFormItem;
+        gold?: NumberEditFormItem;
+    };
+    onChange: InputChangeFunctionWithName;
+}> {
+    /**
+     * @param props 下記の情報を含めた連想配列
+     *
+     *     items: energy, strength, defence, gold の情報
+     *     label の指定がない場合はそれぞれ 生命力、攻撃力、防御力、所持金 になります。
+     *
+     *     onChange: 入力欄が変更した場合に発生するメソッド
+     *     どのテキストボックから入力されたかは、 event.target.name から確認できます。
+     */
+    return (props) => {
+
+        const statusNumberInput = (item: NumberEditFormItem, name: string, defaultLabel: string) => (
+            <NumberInput
+                label={item.label !== undefined ? item.label : defaultLabel}
+                min={min}
+                max={max}
+                onChange={value => props.onChange(setValue(value), name)}
+                name={name}
+                value={getValue(item.value)} />
+        );
+
+        return (
+            <>
+                {props.items.energy !== undefined &&
+                    statusNumberInput(props.items.energy, "energy", "生命力")}
+                {statusNumberInput(props.items.strength, "strength", "攻撃力")}
+                {statusNumberInput(props.items.defence, "defence", "防御力")}
+                {props.items.gold !== undefined &&
+                    statusNumberInput(props.items.gold, "gold", "所持金")}
+            </>
+        );
+    };
+}
+
+/**
+ * 正の値しか扱わないステータス入力欄
+ */
+
+export const StatusInput = createStatusInput(0, 60000, value => value, value => value);
+
+/**
+ * 正の値と負の値を扱うステータス入力欄
+ */
+export const AdjustStatusInput = createStatusInput(
+    -30000,
+    30000,
+    value => convertRelativeValueFromStatus(value),
+    value => convertDataValueFromRelativeStatus(parseInt(value)).toString()
+);
diff --git a/packages/maker/src/info/editforms/utils/StringInput.tsx b/packages/maker/src/info/editforms/utils/StringInput.tsx
new file mode 100644
index 0000000..2b2d423
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/StringInput.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Input, Form } from "semantic-ui-react";
+import { InputChangeFunction } from "./definitions";
+
+export const StringInput: React.FunctionComponent<{
+    label: string;
+    value: string;
+    onChange: InputChangeFunction;
+}> = props => (
+    <Form.Field>
+        <label>{props.label}</label>
+        <Input
+            type="text"
+            value={props.value}
+            onChange={(event, data) => {
+                props.onChange(data.value);
+            }}
+        />
+    </Form.Field>
+);
diff --git a/packages/maker/src/info/editforms/utils/URLInput.tsx b/packages/maker/src/info/editforms/utils/URLInput.tsx
new file mode 100644
index 0000000..7d5992d
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/URLInput.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Input, Form } from "semantic-ui-react";
+import { InputChangeFunction } from "./definitions";
+
+/**
+ * URL を入力するテキストボックスです。
+ *     後述の StringInput と内容は共通ですが、今後 URL 入力だけ仕様変更が出来るように別に独立しています。
+ *     テキストボックスには type="url" と指定していませんが、これは相対パスの文字列でも検出出来るようにするためです。
+ */
+export const URLInput: React.FunctionComponent<{
+    label: string;
+    value: string;
+    onChange: InputChangeFunction;
+}> = props => (
+    <Form.Field>
+        <label>{props.label}</label>
+        <Input
+            type="text"
+            value={props.value}
+            onChange={(event, data) => {
+                props.onChange(data.value);
+            }} />
+    </Form.Field>
+);
diff --git a/packages/maker/src/info/editforms/utils/definitions.ts b/packages/maker/src/info/editforms/utils/definitions.ts
new file mode 100644
index 0000000..c3dfe6b
--- /dev/null
+++ b/packages/maker/src/info/editforms/utils/definitions.ts
@@ -0,0 +1,27 @@
+// このファイルはパーツ編集画面で頻繁に使用されるテキストボックスやセレクトボックスなどをまとめたコンポーネント集です。
+
+import { PartsType } from "../../../classes/WWAData";
+import { RelativeValue } from "../../../common/convertRelativeValue";
+import { PartsEditAttributeChange } from "../definitions";
+
+/**
+ * テキストボックスやセレクトボックスで変更が生じた際に実行するコールバック関数の型です。
+ */
+export type InputChangeFunction = (value: string) => void;
+/**
+ * 仕様は InputChangeFunction と同じです。
+ * name には主にステータスの入力でどのステータスか値が含まれています。
+ */
+export type InputChangeFunctionWithName = (value: string, name: string) => void;
+/**
+ * 仕様は InputChangeFunction と同じです。
+ * index には主に指定位置にパーツを出現で何番目の項目かが含まれています。
+ */
+export type InputChangeFunctionWithIndex = PartsEditAttributeChange;
+
+/**
+ * 指定位置にパーツを出現の各項目を表した型です。
+ */
+export type AppearPartsItem = { number: number, chipX: RelativeValue, chipY: RelativeValue, type: PartsType };
+
+export type CoordInputChangeFunction = (x: string, y: string) => void;
diff --git a/packages/maker/src/info/editforms/utils/index.ts b/packages/maker/src/info/editforms/utils/index.ts
index 58f57a1..cb7f0c9 100644
--- a/packages/maker/src/info/editforms/utils/index.ts
+++ b/packages/maker/src/info/editforms/utils/index.ts
@@ -1,25 +1,11 @@
-// このファイルはパーツ編集画面で頻繁に使用されるテキストボックスやセレクトボックスなどをまとめたコンポーネント集です。
-
-import { PartsType } from "../../../classes/WWAData";
-import { RelativeValue } from "../../../common/convertRelativeValue";
-import { PartsEditAttributeItem } from "../PartsEditComponent";
-
-/**
- * テキストボックスやセレクトボックスで変更が生じた際に実行するコールバック関数の型です。
- */
-export type InputChangeFunction = (value: string) => void;
-/**
- * 仕様は InputChangeFunction と同じです。
- * name には主にステータスの入力でどのステータスか値が含まれています。
- */
-export type InputChangeFunctionWithName = (value: string, name: string) => void;
-/**
- * 仕様は InputChangeFunction と同じです。
- * index には主に指定位置にパーツを出現で何番目の項目かが含まれています。
- */
-export type InputChangeFunctionWithIndex = (...values: PartsEditAttributeItem[]) => void;
-
-/**
- * 指定位置にパーツを出現の各項目を表した型です。
- */
-export type AppearPartsItem = { number: number, chipX: RelativeValue, chipY: RelativeValue, type: PartsType };
+export * from "./NumberInput";
+export * from "./SelectInput";
+export * from "./StatusInput";
+export * from "./ObjectCommonInput";
+export * from "./MessageInput";
+export * from "./URLInput";
+export * from "./StringInput";
+export * from "./ObjectPartsInput";
+export * from "./ItemPartsInput";
+export * from "./CoordInput";
+export * from "./definitions";
diff --git a/packages/maker/src/wwadata/WWADataState.ts b/packages/maker/src/wwadata/WWADataState.ts
index 17c59ec..60417af 100644
--- a/packages/maker/src/wwadata/WWADataState.ts
+++ b/packages/maker/src/wwadata/WWADataState.ts
@@ -80,7 +80,7 @@ const wwaDataSlice = createSlice({
             const { payload } = action;
             const [newAttribute, messageEditResult] = editPartsAttribute(
                 payload.attributes,
-                payload.message.length > 0,
+                payload.message.length <= 0,
                 payload.number,
                 state.messageNum - 1
             );