From 81af2d3a31ff1130aa1a5cfbae8c78f279dac64a Mon Sep 17 00:00:00 2001
From: WATAHIKI YUTO <chvmvd@gmail.com>
Date: Mon, 12 Jan 2026 16:37:49 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=90=E3=82=B0=E3=81=AA=E3=81=A9=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/components/ExportDialog.tsx     |   6 +-
 .../SentenceStructureDiagramAnnotator.tsx     |   2 +-
 .../components/SentenceStructureEditor.tsx    |  12 +-
 packages/sentence-structure-data/format.ts    |   4 +-
 .../sentence-structure-data/operations.ts     | 179 ++++++++----------
 packages/sentence-structure-data/schema.ts    |   4 +-
 .../generate.ts                               |   2 +-
 .../resolve-configurations.ts                 |   2 +-
 .../SentenceStructureDiagram.tsx              |   2 +-
 .../constants.ts                              |   1 +
 ...uctured-sentence-structure-diagram-tree.ts |  19 +-
 11 files changed, 115 insertions(+), 118 deletions(-)

diff --git a/packages/frontend/src/pages/components/ExportDialog.tsx b/packages/frontend/src/pages/components/ExportDialog.tsx
index 713c452..fcb14e7 100644
--- a/packages/frontend/src/pages/components/ExportDialog.tsx
+++ b/packages/frontend/src/pages/components/ExportDialog.tsx
@@ -466,11 +466,11 @@ export default function ExportDialog({ isOpen, onClose }: ExportDialogProps) {
           <Divider sx={{ my: 2 }} />
           <Stack gap={2}>
             <Typography variant="subtitle1" component="div">
-              レイアウト方式
+              配置方式
             </Typography>
             <Stack direction="row" gap={1}>
               <FormControl>
-                <InputLabel>レイアウト方式</InputLabel>
+                <InputLabel>配置方式</InputLabel>
                 <Select
                   value={configurations.layoutMode}
                   onChange={(e) =>
@@ -479,7 +479,7 @@ export default function ExportDialog({ isOpen, onClose }: ExportDialogProps) {
                       layoutMode: e.target.value,
                     })
                   }
-                  label="レイアウト方式"
+                  label="配置方式"
                 >
                   <MenuItem value="linear">横並び表示</MenuItem>
                   <MenuItem value="structured">構造化表示</MenuItem>
diff --git a/packages/frontend/src/pages/components/SentenceStructureDiagramAnnotator.tsx b/packages/frontend/src/pages/components/SentenceStructureDiagramAnnotator.tsx
index 4deef84..386305f 100644
--- a/packages/frontend/src/pages/components/SentenceStructureDiagramAnnotator.tsx
+++ b/packages/frontend/src/pages/components/SentenceStructureDiagramAnnotator.tsx
@@ -255,7 +255,7 @@ export default function SentenceStructureDiagramAnnotator(
             </text>
           ),
       )}
-      {/* 矢印 */}
+      {/* 修飾 */}
       {props.sentenceStructureDiagramData.relations.map((relation) => (
         <path
           key={relation.relationId}
diff --git a/packages/frontend/src/pages/components/SentenceStructureEditor.tsx b/packages/frontend/src/pages/components/SentenceStructureEditor.tsx
index 56ebb02..7ebc1d6 100644
--- a/packages/frontend/src/pages/components/SentenceStructureEditor.tsx
+++ b/packages/frontend/src/pages/components/SentenceStructureEditor.tsx
@@ -302,7 +302,7 @@ export default function SentenceStructureEditor() {
                           }
                         }}
                       >
-                        矢印
+                        修飾
                       </Button>
                       <Divider orientation="vertical" flexItem />
                       <Button
@@ -345,7 +345,7 @@ export default function SentenceStructureEditor() {
                       }}
                       onMouseUp={(e) => e.stopPropagation()}
                     >
-                      {(activeRange.kind === "sentence-element"
+                      {(activeRange.kind === "core-sentence-element"
                         ? sentenceElementRangeTypeToAllowedSentenceElementNameOptionsMap[
                             activeRange.type
                           ]
@@ -378,7 +378,7 @@ export default function SentenceStructureEditor() {
                           }
                         }}
                       >
-                        矢印
+                        修飾
                       </Button>
                       <Divider orientation="vertical" flexItem />
                       <Button
@@ -407,7 +407,7 @@ export default function SentenceStructureEditor() {
                   );
                 })()}
 
-              {/* 矢印の作成のキャンセル */}
+              {/* 修飾の作成のキャンセル */}
               {(interactionState.type === "relation-idle" ||
                 interactionState.type === "relation-selecting") &&
                 (() => {
@@ -443,7 +443,7 @@ export default function SentenceStructureEditor() {
                   );
                 })()}
 
-              {/* 矢印の削除 */}
+              {/* 修飾の削除 */}
               {interactionState.type === "relation-selected" &&
                 (() => {
                   const activeRelation = findRelationById(
@@ -484,7 +484,7 @@ export default function SentenceStructureEditor() {
                         }}
                         color="error"
                       >
-                        矢印を削除
+                        修飾を削除
                       </Button>
                     </Paper>
                   );
diff --git a/packages/sentence-structure-data/format.ts b/packages/sentence-structure-data/format.ts
index 9881db6..cbfe436 100644
--- a/packages/sentence-structure-data/format.ts
+++ b/packages/sentence-structure-data/format.ts
@@ -91,7 +91,7 @@ export const simplifiedSentenceStructureDataToSentenceStructureData = z.codec(
                   )!,
                 )
               ? {
-                  kind: "sentence-element",
+                  kind: "core-sentence-element",
                   type: simplifiedSentenceElementRangeTypeToSentenceElementRangeTypeMap.get(
                     range.type as any,
                   )!,
@@ -178,7 +178,7 @@ export const simplifiedSentenceStructureDataToSentenceStructureData = z.codec(
               }
             : {
                 type:
-                  range.kind === "sentence-element"
+                  range.kind === "core-sentence-element"
                     ? sentenceElementRangeTypeToSimplifiedSentenceElementRangeTypeMap.get(
                         range.type,
                       )!
diff --git a/packages/sentence-structure-data/operations.ts b/packages/sentence-structure-data/operations.ts
index 58065bd..6a07291 100644
--- a/packages/sentence-structure-data/operations.ts
+++ b/packages/sentence-structure-data/operations.ts
@@ -167,7 +167,7 @@ export function createSentenceElementRange(
     ranges: [
       ...sentenceStructureData.ranges,
       {
-        kind: "sentence-element",
+        kind: "core-sentence-element",
         type: input.type,
         id: rangeId,
         startWordIndex: input.startWordIndex,
@@ -248,53 +248,6 @@ export function createSentenceStructureRange(
   throw newSentenceStructureData.error;
 }
 
-export function _createRelationRange(
-  sentenceStructureData: SentenceStructureData,
-  input: {
-    startWordIndex: number;
-    endWordIndex: number;
-  },
-): Result<{
-  newSentenceStructureData: SentenceStructureData;
-  rangeId: string;
-}> {
-  const rangeId = crypto.randomUUID();
-  const newSentenceStructureData = SentenceStructureDataSchema.safeParse({
-    ...sentenceStructureData,
-    ranges: [
-      ...sentenceStructureData.ranges,
-      {
-        kind: "relation",
-        type: "relation",
-        id: rangeId,
-        startWordIndex: input.startWordIndex,
-        endWordIndex: input.endWordIndex,
-      },
-    ],
-  } satisfies SentenceStructureData);
-
-  if (newSentenceStructureData.success) {
-    return {
-      success: true,
-      data: {
-        newSentenceStructureData: newSentenceStructureData.data,
-        rangeId,
-      },
-    };
-  }
-  const errorMessage =
-    newSentenceStructureData.error.issues.find(
-      (issue) => issue.code === "custom",
-    )?.message ?? null;
-  if (errorMessage) {
-    return {
-      success: false,
-      message: errorMessage,
-    };
-  }
-  throw newSentenceStructureData.error;
-}
-
 export function findRangeById(
   sentenceStructureData: SentenceStructureData,
   input: { rangeId: string },
@@ -366,10 +319,10 @@ export function createRelation(
     toRange: { startWordIndex: number; endWordIndex: number };
   },
 ): Result<{ newSentenceStructureData: SentenceStructureData }> {
-  const fromRangeResult: Result<{
+  const fromRangeResult: {
     newSentenceStructureData: SentenceStructureData;
     rangeId: string;
-  }> = (() => {
+  } = (() => {
     const existingFromRange = findRangeByStartAndEndWordIndex(
       sentenceStructureData,
       {
@@ -379,31 +332,37 @@ export function createRelation(
     );
     if (existingFromRange) {
       return {
-        success: true,
-        data: {
-          newSentenceStructureData: sentenceStructureData,
-          rangeId: existingFromRange.id,
-        },
+        newSentenceStructureData: sentenceStructureData,
+        rangeId: existingFromRange.id,
       };
     }
-    return _createRelationRange(sentenceStructureData, {
-      startWordIndex: input.fromRange.startWordIndex,
-      endWordIndex: input.fromRange.endWordIndex,
-    });
-  })();
-  if (!fromRangeResult.success) {
+
+    const rangeId = crypto.randomUUID();
+    const newSentenceStructureData: SentenceStructureData = {
+      ...sentenceStructureData,
+      ranges: [
+        ...sentenceStructureData.ranges,
+        {
+          kind: "relation",
+          type: "relation",
+          id: rangeId,
+          startWordIndex: input.fromRange.startWordIndex,
+          endWordIndex: input.fromRange.endWordIndex,
+        },
+      ],
+    };
     return {
-      success: false,
-      message: fromRangeResult.message,
+      newSentenceStructureData,
+      rangeId,
     };
-  }
+  })();
 
-  const toRangeResult: Result<{
+  const toRangeResult: {
     newSentenceStructureData: SentenceStructureData;
     rangeId: string;
-  }> = (() => {
+  } = (() => {
     const existingToRange = findRangeByStartAndEndWordIndex(
-      fromRangeResult.data.newSentenceStructureData,
+      fromRangeResult.newSentenceStructureData,
       {
         startWordIndex: input.toRange.startWordIndex,
         endWordIndex: input.toRange.endWordIndex,
@@ -411,42 +370,61 @@ export function createRelation(
     );
     if (existingToRange) {
       return {
-        success: true,
-        data: {
-          newSentenceStructureData:
-            fromRangeResult.data.newSentenceStructureData,
-          rangeId: existingToRange.id,
-        },
+        newSentenceStructureData: fromRangeResult.newSentenceStructureData,
+        rangeId: existingToRange.id,
       };
     }
-    return _createRelationRange(fromRangeResult.data.newSentenceStructureData, {
-      startWordIndex: input.toRange.startWordIndex,
-      endWordIndex: input.toRange.endWordIndex,
-    });
+
+    const rangeId = crypto.randomUUID();
+    const newSentenceStructureData: SentenceStructureData = {
+      ...fromRangeResult.newSentenceStructureData,
+      ranges: [
+        ...fromRangeResult.newSentenceStructureData.ranges,
+        {
+          kind: "relation",
+          type: "relation",
+          id: rangeId,
+          startWordIndex: input.toRange.startWordIndex,
+          endWordIndex: input.toRange.endWordIndex,
+        },
+      ],
+    };
+    return {
+      newSentenceStructureData,
+      rangeId,
+    };
   })();
-  if (!toRangeResult.success) {
+
+  const newSentenceStructureData = SentenceStructureDataSchema.safeParse({
+    ...toRangeResult.newSentenceStructureData,
+    relations: [
+      ...toRangeResult.newSentenceStructureData.relations,
+      {
+        id: crypto.randomUUID(),
+        fromRangeId: fromRangeResult.rangeId,
+        toRangeId: toRangeResult.rangeId,
+      },
+    ],
+  } satisfies SentenceStructureData);
+  if (newSentenceStructureData.success) {
+    return {
+      success: true,
+      data: {
+        newSentenceStructureData: newSentenceStructureData.data,
+      },
+    };
+  }
+  const errorMessage =
+    newSentenceStructureData.error.issues.find(
+      (issue) => issue.code === "custom",
+    )?.message ?? null;
+  if (errorMessage) {
     return {
       success: false,
-      message: toRangeResult.message,
+      message: errorMessage,
     };
   }
-
-  return {
-    success: true,
-    data: {
-      newSentenceStructureData: SentenceStructureDataSchema.parse({
-        ...toRangeResult.data.newSentenceStructureData,
-        relations: [
-          ...toRangeResult.data.newSentenceStructureData.relations,
-          {
-            id: crypto.randomUUID(),
-            fromRangeId: fromRangeResult.data.rangeId,
-            toRangeId: toRangeResult.data.rangeId,
-          },
-        ],
-      } satisfies SentenceStructureData),
-    },
-  };
+  throw newSentenceStructureData.error;
 }
 
 export function findRelationById(
@@ -466,6 +444,15 @@ export function deleteRelation(
 ): SentenceStructureData {
   return SentenceStructureDataSchema.parse({
     ...sentenceStructureData,
+    ranges: sentenceStructureData.ranges.filter(
+      (range) =>
+        range.kind !== "relation" ||
+        sentenceStructureData.relations.some(
+          (relation) =>
+            relation.fromRangeId !== range.id &&
+            relation.toRangeId !== range.id,
+        ),
+    ),
     relations: sentenceStructureData.relations.filter(
       (relation) => relation.id !== input.relationId,
     ),
diff --git a/packages/sentence-structure-data/schema.ts b/packages/sentence-structure-data/schema.ts
index 3210325..bf869d8 100644
--- a/packages/sentence-structure-data/schema.ts
+++ b/packages/sentence-structure-data/schema.ts
@@ -45,7 +45,7 @@ const RangeSchema = z.union([
     (sentenceElementRangeTypeOption) =>
       ({
         "core-sentence-element": z.object({
-          kind: z.literal("sentence-element"),
+          kind: z.literal("core-sentence-element"),
           type: z.literal("core-sentence-element"),
           id: z.uuid(),
           startWordIndex: z.int().nonnegative(),
@@ -108,7 +108,7 @@ const RangeSchema = z.union([
       })[sentenceStructureRangeTypeOption],
   ),
   z.object({
-    kind: z.literal(relationRangeTypeOption),
+    kind: z.literal("relation"),
     type: z.literal("relation"),
     id: z.uuid(),
     startWordIndex: z.int().nonnegative(),
diff --git a/packages/sentence-structure-diagram-data/generate.ts b/packages/sentence-structure-diagram-data/generate.ts
index 257ffd1..b0a3667 100644
--- a/packages/sentence-structure-diagram-data/generate.ts
+++ b/packages/sentence-structure-diagram-data/generate.ts
@@ -104,7 +104,7 @@ export function convertSentenceStructureDataToSentenceStructureDiagramData(
               ]
             : null,
           position:
-            range.kind === "sentence-element"
+            range.kind === "core-sentence-element"
               ? resolvedConfigurations.sentenceElementPosition.determineSentenceElementRangeSentenceElementPosition(
                   rangePosition,
                 )
diff --git a/packages/sentence-structure-diagram-data/resolve-configurations.ts b/packages/sentence-structure-diagram-data/resolve-configurations.ts
index dfa3de3..1bc3230 100644
--- a/packages/sentence-structure-diagram-data/resolve-configurations.ts
+++ b/packages/sentence-structure-diagram-data/resolve-configurations.ts
@@ -81,7 +81,7 @@ function determineSentenceElementPosition(
       };
     case "bottom-left":
       return {
-        x: rangePosition[0]!.start - 4,
+        x: rangePosition[0]!.start + 6,
         y: rangePosition[0]!.bottom + 8,
       };
   }
diff --git a/packages/sentence-structure-diagram-svg/SentenceStructureDiagram.tsx b/packages/sentence-structure-diagram-svg/SentenceStructureDiagram.tsx
index 1508805..ad116bb 100644
--- a/packages/sentence-structure-diagram-svg/SentenceStructureDiagram.tsx
+++ b/packages/sentence-structure-diagram-svg/SentenceStructureDiagram.tsx
@@ -117,7 +117,7 @@ export default function SentenceStructureDiagram(
             </text>
           ),
       )}
-      {/* 矢印 */}
+      {/* 修飾 */}
       {sentenceStructureDiagramData.relations.map((relation) => (
         <path
           key={relation.relationId}
diff --git a/packages/sentence-structure-diagram-tree/constants.ts b/packages/sentence-structure-diagram-tree/constants.ts
index d2990c9..cf238aa 100644
--- a/packages/sentence-structure-diagram-tree/constants.ts
+++ b/packages/sentence-structure-diagram-tree/constants.ts
@@ -1,4 +1,5 @@
 export const lineHeight = 16;
 export const lineSpacing = 48;
 export const wordSpacing = 32;
+export const indentSpacing = 32;
 export const padding = 48;
diff --git a/packages/sentence-structure-diagram-tree/create-structured-sentence-structure-diagram-tree.ts b/packages/sentence-structure-diagram-tree/create-structured-sentence-structure-diagram-tree.ts
index 55b2f81..cf52fc5 100644
--- a/packages/sentence-structure-diagram-tree/create-structured-sentence-structure-diagram-tree.ts
+++ b/packages/sentence-structure-diagram-tree/create-structured-sentence-structure-diagram-tree.ts
@@ -14,7 +14,13 @@ import type {
   SentenceStructureDiagramRangeNode,
   SentenceStructureDiagramWordNode,
 } from "./types.js";
-import { lineHeight, lineSpacing, padding, wordSpacing } from "./constants.js";
+import {
+  indentSpacing,
+  lineHeight,
+  lineSpacing,
+  padding,
+  wordSpacing,
+} from "./constants.js";
 
 type Input<T extends SentenceStructureNode> = {
   sentenceStructureNode: T;
@@ -73,7 +79,7 @@ function createSentenceStructureDiagramRangeNode(
 ): Result<SentenceStructureDiagramRangeNode> {
   let nextNodeStartPosition = { ...input.nextNodeStartPosition };
   let nextLineStartPosition = {
-    start: nextNodeStartPosition.start,
+    start: nextNodeStartPosition.start + indentSpacing,
     top: input.nextLineStartPosition.top,
   };
   const children: SentenceStructureDiagramRangeNode["children"] = [];
@@ -110,6 +116,7 @@ function createSentenceStructureDiagramRangeNode(
       input.maxWidth < nextNodeStartPosition.start + childWidth + padding
     ) {
       nextNodeStartPosition = { ...nextLineStartPosition };
+      nextLineStartPosition.start += indentSpacing;
       nextLineStartPosition.top += lineHeight + lineSpacing;
     }
     const result =
@@ -164,7 +171,7 @@ function createSentenceStructureDiagramCoordinationChildNode(
 ): Result<SentenceStructureDiagramCoordinationChildNode> {
   let nextNodeStartPosition = { ...input.nextNodeStartPosition };
   let nextLineStartPosition = {
-    start: nextNodeStartPosition.start,
+    start: nextNodeStartPosition.start + indentSpacing,
     top: input.nextLineStartPosition.top,
   };
   const children: SentenceStructureDiagramCoordinationChildNode["children"] =
@@ -202,6 +209,7 @@ function createSentenceStructureDiagramCoordinationChildNode(
       input.maxWidth < nextNodeStartPosition.start + childWidth + padding
     ) {
       nextNodeStartPosition = { ...nextLineStartPosition };
+      nextLineStartPosition.start += indentSpacing;
       nextLineStartPosition.top += lineHeight + lineSpacing;
     }
     const result =
@@ -257,7 +265,7 @@ function createSentenceStructureDiagramCoordinationNode(
   let nextNodeStartPosition = { ...input.nextNodeStartPosition };
   let nextLineStartPosition = {
     start: nextNodeStartPosition.start,
-    top: nextNodeStartPosition.top + lineHeight + lineSpacing,
+    top: input.nextLineStartPosition.top,
   };
   const children: SentenceStructureDiagramCoordinationNode["children"] = [];
   for (const child of input.sentenceStructureNode.children) {
@@ -270,6 +278,7 @@ function createSentenceStructureDiagramCoordinationNode(
     });
     children.push(result.sentenceStructureDiagramNode);
     nextNodeStartPosition = { ...result.nextLineStartPosition };
+    nextLineStartPosition = { ...nextNodeStartPosition };
     nextLineStartPosition.top += lineHeight + lineSpacing;
   }
 
@@ -290,7 +299,7 @@ function createSentenceStructureDiagramCoordinationNode(
     },
     nextLineStartPosition: {
       start: input.nextLineStartPosition.start,
-      top: nextLineStartPosition.top,
+      top: nextNodeStartPosition.top,
     },
   };
 }