#147 feat: Shapeのレコード更新を画面共有に対応

src/js/config/HistoryConfig.ts

@@ -536,7 +536,7 @@ export const $STAGE_COLOR_COMMAND: number = 53;
  * @type {number}
  * @constant
  */
-export const $CHARACTER_UPDATE_X: number = 54;
+export const $CHARACTER_UPDATE_X_COMMAND: number = 54;
 
 /**
  * @description DisplayObjectのy座標更新の識別コマンド名
@@ -545,7 +545,7 @@ export const $CHARACTER_UPDATE_X: number = 54;
  * @type {number}
  * @constant
  */
-export const $CHARACTER_UPDATE_Y: number = 55;
+export const $CHARACTER_UPDATE_Y_COMMAND: number = 55;
 
 /**
  * @description 新規Shape追加操作の識別コマンド名

src/js/controller/application/HistoryArea/service/HistoryGetTextService.ts

@@ -47,8 +47,8 @@ import {
     $STAGE_HEIGHT_COMMAND,
     $STAGE_FPS_COMMAND,
     $STAGE_COLOR_COMMAND,
-    $CHARACTER_UPDATE_X,
-    $CHARACTER_UPDATE_Y,
+    $CHARACTER_UPDATE_X_COMMAND,
+    $CHARACTER_UPDATE_Y_COMMAND,
     $LIBRARY_ADD_NEW_SHAPE_COMMAND,
     $LIBRARY_UPDATE_SHAPE_GRAPHICS_COMMAND
 } from "@/config/HistoryConfig";
@@ -205,10 +205,10 @@ export const execute = (command: number): string =>
         case $STAGE_COLOR_COMMAND:
             return "ステージの背景色を「%s1」から「%s2」に変更";
 
-        case $CHARACTER_UPDATE_X:
+        case $CHARACTER_UPDATE_X_COMMAND:
             return "「%s1」のレイヤー「%s2」の%s3フレーム・深度%s4のx座標を%s5から%s6に変更";
 
-        case $CHARACTER_UPDATE_Y:
+        case $CHARACTER_UPDATE_Y_COMMAND:
             return "「%s1」のレイヤー「%s2」の%s3フレーム・深度%s4のy座標を%s5から%s6に変更";
 
         case $LIBRARY_ADD_NEW_SHAPE_COMMAND:

src/js/controller/application/HistoryArea/usecase/HistoryRedoCommandUseCase.ts

@@ -110,8 +110,8 @@ import {
     $STAGE_HEIGHT_COMMAND,
     $STAGE_FPS_COMMAND,
     $STAGE_COLOR_COMMAND,
-    $CHARACTER_UPDATE_X,
-    $CHARACTER_UPDATE_Y,
+    $CHARACTER_UPDATE_X_COMMAND,
+    $CHARACTER_UPDATE_Y_COMMAND,
     $LIBRARY_ADD_NEW_SHAPE_COMMAND,
     $LIBRARY_UPDATE_SHAPE_GRAPHICS_COMMAND
 } from "@/config/HistoryConfig";
@@ -603,7 +603,7 @@ export const execute = async (
             break;
 
         // キャラクターのX座標を更新
-        case $CHARACTER_UPDATE_X:
+        case $CHARACTER_UPDATE_X_COMMAND:
             characterUpdateXHistoryRedoUseCase(
                 messages[0] as number, // WorkSpace ID
                 messages[1] as number, // MovieClip ID
@@ -615,7 +615,7 @@ export const execute = async (
             break;
 
         // キャラクターのY座標を更新
-        case $CHARACTER_UPDATE_Y:
+        case $CHARACTER_UPDATE_Y_COMMAND:
             characterUpdateYHistoryRedoUseCase(
                 messages[0] as number, // WorkSpace ID
                 messages[1] as number, // MovieClip ID

src/js/controller/application/HistoryArea/usecase/HistoryUndoCommandUseCase.ts

@@ -110,8 +110,8 @@ import {
     $STAGE_HEIGHT_COMMAND,
     $STAGE_FPS_COMMAND,
     $STAGE_COLOR_COMMAND,
-    $CHARACTER_UPDATE_X,
-    $CHARACTER_UPDATE_Y,
+    $CHARACTER_UPDATE_X_COMMAND,
+    $CHARACTER_UPDATE_Y_COMMAND,
     $LIBRARY_ADD_NEW_SHAPE_COMMAND,
     $LIBRARY_UPDATE_SHAPE_GRAPHICS_COMMAND
 } from "@/config/HistoryConfig";
@@ -600,7 +600,7 @@ export const execute = async (
             break;
 
         // DisplayObjectのX座標を更新
-        case $CHARACTER_UPDATE_X:
+        case $CHARACTER_UPDATE_X_COMMAND:
             characterUpdateXHistoryUndoUseCase(
                 messages[0] as number, // WorkSpace ID
                 messages[1] as number, // MovieClip ID
@@ -612,7 +612,7 @@ export const execute = async (
             break;
 
         // DisplayObjectのY座標を更新
-        case $CHARACTER_UPDATE_Y:
+        case $CHARACTER_UPDATE_Y_COMMAND:
             characterUpdateYHistoryUndoUseCase(
                 messages[0] as number, // WorkSpace ID
                 messages[1] as number, // MovieClip ID

src/js/external/core/application/ExternalShape/usecase/ExternalShapeApplyGraphicsUseCase.ts

@@ -11,7 +11,7 @@ import { execute as externalShapeUpdateService } from "../service/ExternalShapeU
  *
  * @param  {WorkSpace} work_space
  * @param  {MovieClip} movie_clip
- * @param  {Float32Array} recodes
+ * @param  {Float32Array | arrray} recodes
  * @param  {object} bounds
  * @param  {Shape} shape
  * @param  {boolean} [receiver=false]
@@ -22,9 +22,9 @@ import { execute as externalShapeUpdateService } from "../service/ExternalShapeU
 export const execute = async (
     work_space: WorkSpace,
     movie_clip: MovieClip,
-    recodes: Float32Array,
-    bounds: BoundsImpl,
     shape: Shape,
+    recodes: Float32Array | number[],
+    bounds: BoundsImpl,
     receiver: boolean = false
 ): Promise<void> => {
 

src/js/external/core/domain/model/ExternalShape.ts

@@ -65,9 +65,8 @@ export class ExternalShape extends ExternalItem
         };
 
         await externalShapeApplyGraphicsUseCase(
-            this._$workSpace, this._$workSpace.scene,
-            this.graphics._$getRecodes(), bounds,
-            this._$instance
+            this._$workSpace, this._$workSpace.scene, this._$instance,
+            this.graphics._$getRecodes(), bounds
         );
     }
 }

src/js/history/application/controller/application/LibraryArea/Shape/usecase/LibraryAreaUpdateShapeGraphicsHistoryUseCase.ts

@@ -30,7 +30,7 @@ const worker: Worker = new ZlibDeflateWorker();
  * @param  {WorkSpace} work_space
  * @param  {MovieClip} movie_clip
  * @param  {Shape} shape
- * @param  {Float32Array} recodes
+ * @param  {Float32Array | arrray} recodes
  * @param  {object} bounds
  * @param  {boolean} [receiver=false]
  * @return {void}
@@ -41,7 +41,7 @@ export const execute = async (
     work_space: WorkSpace,
     movie_clip: MovieClip,
     shape: Shape,
-    recodes: Float32Array,
+    recodes: Float32Array | number[],
     bounds: BoundsImpl,
     receiver: boolean = false
 ): Promise<void> => {

src/js/history/application/core/application/Character/UpdateX/service/CharacterUpdateXCreateHistoryObjectService.ts

@@ -2,7 +2,7 @@ import type { HistoryObjectImpl } from "@/interface/HistoryObjectImpl";
 import type { MovieClip } from "@/core/domain/model/MovieClip";
 import type { Layer } from "@/core/domain/model/Layer";
 import type { Character } from "@/core/domain/model/Character";
-import { $CHARACTER_UPDATE_X } from "@/config/HistoryConfig";
+import { $CHARACTER_UPDATE_X_COMMAND } from "@/config/HistoryConfig";
 
 /**
  * @description DisplayObjectのx座標変更の履歴用オブジェクトを作成
@@ -26,7 +26,7 @@ export const execute = (
 ): HistoryObjectImpl => {
 
     return {
-        "command": $CHARACTER_UPDATE_X,
+        "command": $CHARACTER_UPDATE_X_COMMAND,
         "messages": [
             work_space_id,
             movie_clip.id,

src/js/history/application/core/application/Character/UpdateX/usecase/CharacterUpdateXHistoryUseCase.ts

@@ -6,7 +6,7 @@ import { execute as historyRemoveElementService } from "@/controller/application
 import { execute as historyAddElementUseCase } from "@/controller/application/HistoryArea/usecase/HistoryAddElementUseCase";
 import { execute as historyGetTextService } from "@/controller/application/HistoryArea/service/HistoryGetTextService";
 import { execute as characterUpdateXCreateHistoryObjectService } from "../service/CharacterUpdateXCreateHistoryObjectService";
-import { $CHARACTER_UPDATE_X } from "@/config/HistoryConfig";
+import { $CHARACTER_UPDATE_X_COMMAND } from "@/config/HistoryConfig";
 import { $useSocket } from "@/share/ShareUtil";
 import { execute as shareSendService } from "@/share/service/ShareSendService";
 import { execute as userDatabaseAutoSaveReservationUseCase } from "@/user/application/Database/usecase/UserDatabaseAutoSaveReservationUseCase";
@@ -49,7 +49,7 @@ export const execute = (
         historyAddElementUseCase(
             movie_clip.id,
             work_space.historyIndex,
-            historyGetTextService($CHARACTER_UPDATE_X),
+            historyGetTextService($CHARACTER_UPDATE_X_COMMAND),
             "",
             ...historyObject.args
         );

src/js/history/application/core/application/Character/UpdateY/service/CharacterUpdateYCreateHistoryObjectService.ts

@@ -2,7 +2,7 @@ import type { HistoryObjectImpl } from "@/interface/HistoryObjectImpl";
 import type { MovieClip } from "@/core/domain/model/MovieClip";
 import type { Layer } from "@/core/domain/model/Layer";
 import type { Character } from "@/core/domain/model/Character";
-import { $CHARACTER_UPDATE_Y } from "@/config/HistoryConfig";
+import { $CHARACTER_UPDATE_Y_COMMAND } from "@/config/HistoryConfig";
 
 /**
  * @description DisplayObjectのx座標変更の履歴用オブジェクトを作成
@@ -26,7 +26,7 @@ export const execute = (
 ): HistoryObjectImpl => {
 
     return {
-        "command": $CHARACTER_UPDATE_Y,
+        "command": $CHARACTER_UPDATE_Y_COMMAND,
         "messages": [
             work_space_id,
             movie_clip.id,

src/js/history/application/core/application/Character/UpdateY/usecase/CharacterUpdateYHistoryUseCase.ts

@@ -6,7 +6,7 @@ import { execute as historyRemoveElementService } from "@/controller/application
 import { execute as historyAddElementUseCase } from "@/controller/application/HistoryArea/usecase/HistoryAddElementUseCase";
 import { execute as historyGetTextService } from "@/controller/application/HistoryArea/service/HistoryGetTextService";
 import { execute as characterUpdateYCreateHistoryObjectService } from "../service/CharacterUpdateYCreateHistoryObjectService";
-import { $CHARACTER_UPDATE_Y } from "@/config/HistoryConfig";
+import { $CHARACTER_UPDATE_Y_COMMAND } from "@/config/HistoryConfig";
 import { $useSocket } from "@/share/ShareUtil";
 import { execute as shareSendService } from "@/share/service/ShareSendService";
 import { execute as userDatabaseAutoSaveReservationUseCase } from "@/user/application/Database/usecase/UserDatabaseAutoSaveReservationUseCase";
@@ -49,7 +49,7 @@ export const execute = (
         historyAddElementUseCase(
             movie_clip.id,
             work_space.historyIndex,
-            historyGetTextService($CHARACTER_UPDATE_Y),
+            historyGetTextService($CHARACTER_UPDATE_Y_COMMAND),
             "",
             ...historyObject.args
         );

src/js/share/receive/application/controller/application/LibraryArea/Shape/ShapeAddNewReceiveUseCase.ts

@@ -1,7 +1,7 @@
 import type { ShareReceiveMessageImpl } from "@/interface/ShareReceiveMessageImpl";
 import type { InstanceImpl } from "@/interface/InstanceImpl";
 import type { ShapeSaveObjectImpl } from "@/interface/ShapeSaveObjectImpl";
-import { MovieClip } from "@/core/domain/model/MovieClip";
+import type { MovieClip } from "@/core/domain/model/MovieClip";
 import { $getWorkSpace } from "@/core/application/CoreUtil";
 import { execute as externalLibraryAddInstanceUseCase } from "@/external/controller/application/ExternalLibrary/usecase/ExternalLibraryAddInstanceUseCase";
 import { execute as libraryAreaAddNewShapeHistoryUseCase } from "@/history/application/controller/application/LibraryArea/Shape/usecase/LibraryAreaAddNewShapeHistoryUseCase";

src/js/share/receive/application/controller/application/LibraryArea/Shape/ShapeUpdateGraphicsReceiveUseCase.ts

@@ -0,0 +1,48 @@
+import type { ShareReceiveMessageImpl } from "@/interface/ShareReceiveMessageImpl";
+import type { InstanceImpl } from "@/interface/InstanceImpl";
+import type { ShapeSaveObjectImpl } from "@/interface/ShapeSaveObjectImpl";
+import type { MovieClip } from "@/core/domain/model/MovieClip";
+import type { BoundsImpl } from "@/interface/BoundsImpl";
+import { $getWorkSpace } from "@/core/application/CoreUtil";
+import { execute as externalShapeApplyGraphicsUseCase } from "@/external/core/application/ExternalShape/usecase/ExternalShapeApplyGraphicsUseCase";
+
+/**
+ * @description socketで受け取った情報の受け取り処理関数
+ *              Receiving and processing functions for information received in the socket
+ *
+ * @param  {object} message
+ * @return {Promise}
+ * @method
+ * @public
+ */
+export const execute = async (message: ShareReceiveMessageImpl): Promise<void> =>
+{
+    const id = message.data[0] as NonNullable<number>;
+
+    const workSpace = $getWorkSpace(id);
+    if (!workSpace) {
+        return ;
+    }
+
+    const libraryId = message.data[1] as NonNullable<number>;
+    const movieClip: InstanceImpl<MovieClip> = workSpace.getLibrary(libraryId);
+    if (!movieClip) {
+        return ;
+    }
+
+    const beforeShapeObject = message.data[2] as ShapeSaveObjectImpl;
+    const shape = workSpace.getLibrary(beforeShapeObject.id);
+    if (!shape) {
+        return ;
+    }
+
+    // Shapeのグラフィックスを更新
+    await externalShapeApplyGraphicsUseCase(
+        workSpace,
+        movieClip,
+        shape,
+        message.data[3] as number[],
+        message.data[4] as BoundsImpl,
+        true
+    );
+};

src/js/share/usecase/ShareReceiveUseCase.ts

@@ -54,6 +54,7 @@ import { execute as stageSettingUpdateColorReceiveUseCase } from "@/share/receiv
 import { execute as characterUpdateXReceiveUseCase } from "@/share/receive/application/core/application/Character/usecase/CharacterUpdateXReceiveUseCase";
 import { execute as characterUpdateYReceiveUseCase } from "@/share/receive/application/core/application/Character/usecase/CharacterUpdateYReceiveUseCase";
 import { execute as shapeAddNewReceiveUseCase } from "@/share/receive/application/controller/application/LibraryArea/Shape/ShapeAddNewReceiveUseCase";
+import { execute as shapeUpdateGraphicsReceiveUseCase } from "@/share/receive/application/controller/application/LibraryArea/Shape/ShapeUpdateGraphicsReceiveUseCase";
 import { execute as historyRedoUseCase } from "@/controller/application/HistoryArea/usecase/HistoryRedoUseCase";
 import { execute as historyUndoUseCase } from "@/controller/application/HistoryArea/usecase/HistoryUndoUseCase";
 import {
@@ -111,9 +112,10 @@ import {
     $STAGE_HEIGHT_COMMAND,
     $STAGE_FPS_COMMAND,
     $STAGE_COLOR_COMMAND,
-    $CHARACTER_UPDATE_X,
-    $CHARACTER_UPDATE_Y,
-    $LIBRARY_ADD_NEW_SHAPE_COMMAND
+    $CHARACTER_UPDATE_X_COMMAND,
+    $CHARACTER_UPDATE_Y_COMMAND,
+    $LIBRARY_ADD_NEW_SHAPE_COMMAND,
+    $LIBRARY_UPDATE_SHAPE_GRAPHICS_COMMAND
 } from "@/config/HistoryConfig";
 
 /**
@@ -408,12 +410,12 @@ export const execute = async (message: ShareReceiveMessageImpl): Promise<void> =
             break;
 
         // キャラクターのx座標を更新
-        case $CHARACTER_UPDATE_X:
+        case $CHARACTER_UPDATE_X_COMMAND:
             characterUpdateXReceiveUseCase(message);
             break;
 
         // キャラクターのy座標を更新
-        case $CHARACTER_UPDATE_Y:
+        case $CHARACTER_UPDATE_Y_COMMAND:
             characterUpdateYReceiveUseCase(message);
             break;
 
@@ -422,6 +424,11 @@ export const execute = async (message: ShareReceiveMessageImpl): Promise<void> =
             shapeAddNewReceiveUseCase(message);
             break;
 
+        // Shapeのグラフィックスを更新
+        case $LIBRARY_UPDATE_SHAPE_GRAPHICS_COMMAND:
+            await shapeUpdateGraphicsReceiveUseCase(message);
+            break;
+
         default:
             break;