#171 MovieClipへの変換処理を実装

Author: ienaga

src/js/menu/application/ConvertMovieClipModal/ConvertMovieClipModalUtil.ts

@@ -17,6 +17,25 @@ let $selectedElementId: string = "";
  */
 let $validValue: boolean = false;
 
+/**
+ * @description アンカー位置の割合
+ *              Anchor position ratio
+ *
+ * @type {Record<string, [number, number]>}
+ * @private
+ */
+export const $anchorFrac: Record<string, [number, number]> = {
+    "top-left":      [0,   0],
+    "middle-left":   [0.5, 0],
+    "bottom-left":   [1,   0],
+    "top-center":    [0,   0.5],
+    "middle-center": [0.5, 0.5],
+    "bottom-center": [1,   0.5],
+    "top-right":     [0,   1],
+    "middle-right":  [0.5, 1],
+    "bottom-right":  [1,   1]
+};
+
 /**
  * @description ConvertMovieClipModalの選択した中心点のElement IDを取得
  *              Get the selected center point Element ID of ConvertMovieClipModal

src/js/menu/application/ConvertMovieClipModal/service/ConvertMovieClipModalCalcPositionService.ts

@@ -1,26 +1,10 @@
 import type { Character } from "@/core/domain/model/Character";
 import type { IPosition } from "@/interface/IPosition";
 import type { IBounds } from "@/interface/IBounds";
-import { $getSelectedElementId } from "../ConvertMovieClipModalUtil";
-
-/**
- * @description アンカー位置の割合
- *              Anchor position ratio
- *
- * @type {Record<string, [number, number]>}
- * @private
- */
-const $anchorFrac: Record<string, [number, number]> = {
-    "top-left":      [0,   0],
-    "middle-left":   [0.5, 0],
-    "bottom-left":   [1,   0],
-    "top-center":    [0,   0.5],
-    "middle-center": [0.5, 0.5],
-    "bottom-center": [1,   0.5],
-    "top-right":     [0,   1],
-    "middle-right":  [0.5, 1],
-    "bottom-right":  [1,   1]
-};
+import {
+    $anchorFrac,
+    $getSelectedElementId
+} from "../ConvertMovieClipModalUtil";
 
 /**
  * @description ConvertMovieClipModalの選択した中心点に合わせてDisplayObjectの位置を計算

src/js/menu/application/ConvertMovieClipModal/usecase/ConvertMovieClipModalButtonPointerDownEventUseCase.ts

@@ -8,6 +8,10 @@ import { execute as convertMovieClipModalHideUseCase } from "./ConvertMovieClipM
 import { execute as externalLibraryAddNewMovieClipUseCase } from "@/external/controller/application/ExternalLibrary/usecase/ExternalLibraryAddNewMovieClipUseCase";
 import { execute as convertMovieClipModalCalcPositionService } from "../service/ConvertMovieClipModalCalcPositionService";
 import { execute as screenAreaCalcSelectedBoundsService } from "@/screen/application/ScreenArea/service/ScreenAreaCalcSelectedBoundsService";
+import {
+    $anchorFrac,
+    $getSelectedElementId
+} from "../ConvertMovieClipModalUtil";
 
 /**
  * @description 指定の名前のMovieClipを作成して、選択中のDisplayObjectを配置
@@ -128,20 +132,28 @@ export const execute = async (event: PointerEvent): Promise<void> =>
     newCharacter.startFrame = startFrame;
     newCharacter.endFrame   = endFrame;
 
-    // todo: xy position
-
     const currentExternalLayer = new ExternalLayer(
         workspace,
         movieClip,
         layer
     );
 
-    await currentExternalLayer.addCharacter(new ExternalCharacter(
-        workspace,
-        movieClip,
-        layer,
-        newCharacter
-    ));
+    const newExternalCharacter = await currentExternalLayer
+        .addCharacter(new ExternalCharacter(
+            workspace,
+            movieClip,
+            layer,
+            newCharacter
+        ));
+
+    // 中心点に合わせて座標を移動
+    const [ax, ay] = $anchorFrac[$getSelectedElementId() as keyof typeof $anchorFrac];
+    await newExternalCharacter.setX(
+        bounds.xMin + Math.abs(bounds.xMax - bounds.xMin) * ax
+    );
+    await newExternalCharacter.setY(
+        bounds.yMin + Math.abs(bounds.yMax - bounds.yMin) * ay
+    );
 
     // モーダルを非表示にする
     convertMovieClipModalHideUseCase();