#147 add: テキストツールの実装を追加

src/css/screen.scss

@@ -236,6 +236,7 @@
 #draw-text
 {
     position       : absolute;
+    border         : 1px dashed #363636;
     pointer-events : none;
 }
 

src/js/config/ScreenConfig.ts

@@ -34,6 +34,16 @@ export const $SCREEN_STAGE_RECT_ID: string = "stage-rect";
  */
 export const $SCREEN_DRAW_RECT_ID: string = "draw-rect";
 
+/**
+ * @description スクリーンのテキスト範囲選択のElementのID
+ *              ID of the screen text range selection Element
+ *
+ * @type {string}
+ * @constant
+ */
+export const $SCREEN_DRAW_TEXT_ID: string = "draw-text";
+
+
 /**
  * @description スクリーンエリアのElementのID
  *              ID of the Element in the screen area

src/js/screen/application/TextRect/service/TextRectHideService.test.ts

@@ -0,0 +1,18 @@
+import { execute } from "./TextRectHideService";
+import { $SCREEN_DRAW_TEXT_ID } from "../../../../config/ScreenConfig";
+
+describe("TextRectHideServiceTest", () =>
+{
+    test("execute test", () =>
+    {
+        const parent = document.createElement("div");
+        parent.id = $SCREEN_DRAW_TEXT_ID;
+        document.body.appendChild(parent);
+
+        expect(parent.style.display).toBe("");
+        execute();
+        expect(parent.style.display).toBe("none");
+
+        parent.remove();
+    });
+});

src/js/screen/application/TextRect/service/TextRectHideService.ts

@@ -0,0 +1,22 @@
+import { $SCREEN_DRAW_TEXT_ID } from "@/config/ScreenConfig";
+
+/**
+ * @description 範囲選択を非表示に更新
+ *              Update the range selection to be hidden
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (): void =>
+{
+    // 範囲選択のElementを表示
+    const element: HTMLElement | null = document
+        .getElementById($SCREEN_DRAW_TEXT_ID);
+
+    if (!element) {
+        return ;
+    }
+
+    element.setAttribute("style", "display: none;");
+};

src/js/screen/application/TextRect/service/TextRectShowService.test.ts

@@ -0,0 +1,19 @@
+import { execute } from "./TextRectShowService";
+import { $SCREEN_DRAW_TEXT_ID } from "../../../../config/ScreenConfig";
+
+describe("TextRectShowServiceTest", () =>
+{
+    test("execute test", () =>
+    {
+        const parent = document.createElement("div");
+        parent.id = $SCREEN_DRAW_TEXT_ID;
+        document.body.appendChild(parent);
+
+        parent.style.display = "none";
+        expect(parent.style.display).toBe("none");
+        execute();
+        expect(parent.style.display).toBe("");
+
+        parent.remove();
+    });
+});

src/js/screen/application/TextRect/service/TextRectShowService.ts

@@ -0,0 +1,36 @@
+import { $SCREEN_DRAW_TEXT_ID } from "@/config/ScreenConfig";
+import { textRect } from "@/screen/domain/model/TextRect";
+
+/**
+ * @description 範囲選択をアクティブ表示
+ *              Active display of range selection
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {string} [radius=""]
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (x: number, y: number): void =>
+{
+    // 範囲選択のElementを表示
+    const element: HTMLElement | null = document
+        .getElementById($SCREEN_DRAW_TEXT_ID);
+
+    if (!element) {
+        return ;
+    }
+
+    textRect.x = x;
+    textRect.y = y;
+
+    // 表示を更新
+    let style = "";
+    style += `left: ${x}px;`;
+    style += `top: ${y}px;`;
+    style += "width: 0px;";
+    style += "height: 0px;";
+
+    element.setAttribute("style", style);
+};

src/js/screen/domain/model/TextRect.ts

@@ -0,0 +1,65 @@
+/**
+ * @description テキストの範囲選択の管理クラス
+ *              Text range selection management class
+ *
+ * @class
+ * @public
+ */
+class TextRect
+{
+    private _$x: number;
+    private _$y: number;
+
+    /**
+     * @constructor
+     * @public
+     */
+    constructor ()
+    {
+        /**
+         * @type {number}
+         * @private
+         */
+        this._$x = 0;
+
+        /**
+         * @type {number}
+         * @private
+         */
+        this._$y = 0;
+    }
+
+    /**
+     * @description x座標
+     *              x coordinate
+     *
+     * @type {number}
+     * @public
+     */
+    get x (): number
+    {
+        return this._$x;
+    }
+    set x (x: number)
+    {
+        this._$x = x;
+    }
+
+    /**
+     * @description y座標
+     *              y coordinate
+     *
+     * @type {number}
+     * @public
+     */
+    get y (): number
+    {
+        return this._$y;
+    }
+    set y (y: number)
+    {
+        this._$y = y;
+    }
+}
+
+export const textRect = new TextRect();

src/js/shortcut/application/usecase/ShortcutToolAreaInitializeRegisterUseCase.ts

@@ -8,6 +8,7 @@ import { execute as zoomMinusToolActiveService } from "@/tool/application/ZoomMi
 import { execute as circleToolActiveService } from "@/tool/application/CircleTool/service/CircleToolActiveService";
 import { execute as rectangleToolActiveService } from "@/tool/application/RectangleTool/service/RectangleToolActiveService";
 import { execute as roundRectToolActiveService } from "@/tool/application/RoundRectTool/service/RoundRectToolActiveService";
+import { execute as textToolActiveService } from "@/tool/application/TextTool/service/TextToolActiveService";
 import {
     $generateShortcutKey,
     $setShortcut
@@ -91,4 +92,10 @@ export const execute = (): void =>
         $generateShortcutKey("r", { "shift": true }),
         roundRectToolActiveService
     );
+
+    // テキストルーツをアクティブにする
+    $setShortcut(
+        $generateShortcutKey("t"),
+        textToolActiveService
+    );
 };

src/js/tool/application/CircleTool/usecase/CircleToolInitializeUseCase.ts

@@ -11,7 +11,7 @@ import { execute as circleToolChangeCursorEventService } from "../service/Circle
  * @description シェイプの円ツールの初期起動ユースケース
  *              Shape Circle Tool initial startup use case
  *
- * @param  {ArrowTool} tool
+ * @param  {CircleTool} tool
  * @return {void}
  * @method
  * @public

src/js/tool/application/RectangleTool/usecase/RectangleToolInitializeUseCase.ts

@@ -11,7 +11,7 @@ import { execute as rectangleToolChangeCursorEventService } from "../service/Rec
  * @description シェイプの矩形ツールの初期起動ユースケース
  *              Initial startup use case of shape rectangle tool
  *
- * @param  {ArrowTool} tool
+ * @param  {CircleTool} tool
  * @return {void}
  * @method
  * @public

src/js/tool/application/RoundRectTool/usecase/RoundRectToolInitializeUseCase.ts

@@ -11,7 +11,7 @@ import { execute as roundRectToolChangeCursorEventService } from "../service/Rou
  * @description シェイプの角丸矩形ツールの初期起動ユースケース
  *              Initial startup use case of shape rounded rectangle tool
  *
- * @param  {ArrowTool} tool
+ * @param  {CircleTool} tool
  * @return {void}
  * @method
  * @public

src/js/tool/application/TextTool/service/TextToolActiveService.test.ts

@@ -0,0 +1,30 @@
+import { $TOOL_TEXT_NAME } from "../../../../config/ToolConfig";
+import { execute } from "./TextToolActiveService";
+import { $setActiveTool, $getActiveTool, $registerDefaultTool } from "../../ToolUtil";
+
+describe("TextToolActiveServiceTest", () =>
+{
+    test("execute test", () =>
+    {
+        const mock1 = {
+            "dispatchEvent": () => {},
+            "name": "mock1"
+        };
+        $registerDefaultTool(mock1);
+
+        const mock2 = {
+            "dispatchEvent": () => {},
+            "name": $TOOL_TEXT_NAME
+        };
+        $registerDefaultTool(mock2);
+
+        // test case mock1
+        $setActiveTool(mock1);
+        expect($getActiveTool().name).toBe(mock1.name);
+
+        execute();
+
+        expect($getActiveTool().name).toBe(mock2.name);
+    });
+
+});

src/js/tool/application/TextTool/service/TextToolActiveService.ts

@@ -0,0 +1,22 @@
+import { $TOOL_TEXT_NAME } from "@/config/ToolConfig";
+import { $getDefaultTool, $setActiveTool } from "../../ToolUtil";
+import type { TextTool } from "@/tool/domain/model/TextTool";
+import type { ToolImpl } from "@/interface/ToolImpl";
+
+/**
+ * @description テキストツールをアクティブにする
+ *              Make the text tool active
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (): void =>
+{
+    const tool: ToolImpl<TextTool> = $getDefaultTool($TOOL_TEXT_NAME);
+    if (!tool) {
+        return ;
+    }
+
+    $setActiveTool(tool);
+};

src/js/tool/application/TextTool/service/TextToolChangeCursorEventService.test.ts

@@ -0,0 +1,29 @@
+import { execute } from "./TextToolChangeCursorEventService";
+import { $registerDefaultTool } from "../../ToolUtil";
+import { $TOOL_TEXT_NAME } from "../../../../config/ToolConfig";
+
+describe("TextToolChangeCursorEventServiceTest", () =>
+{
+    test("execute test", () =>
+    {
+        const mock = {
+            "name": $TOOL_TEXT_NAME,
+            "cursor": "crosshair"
+        };
+        $registerDefaultTool(mock);
+
+        const style = document
+            .documentElement
+            .style;
+
+        style.setProperty("--tool-cursor", "auto");
+
+        // test case mock1
+        expect(style.getPropertyValue("--tool-cursor")).toBe("auto");
+
+        execute();
+
+        expect(style.getPropertyValue("--tool-cursor")).toBe(mock.cursor);
+    });
+
+});

src/js/tool/application/TextTool/service/TextToolChangeCursorEventService.ts

@@ -0,0 +1,23 @@
+import type { ToolImpl } from "@/interface/ToolImpl";
+import type { TextTool } from "@/tool/domain/model/TextTool";
+import { $setCursor } from "@/global/GlobalUtil";
+import { $getDefaultTool } from "../../ToolUtil";
+import { $TOOL_TEXT_NAME } from "@/config/ToolConfig";
+
+/**
+ * @description カーソルを変更する
+ *              Change the cursor
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (): void =>
+{
+    const tool: ToolImpl<TextTool> = $getDefaultTool($TOOL_TEXT_NAME);
+    if (!tool) {
+        return ;
+    }
+
+    $setCursor(tool.cursor);
+};

src/js/tool/application/TextTool/service/TextToolMouseOutEventService.test.ts

@@ -0,0 +1,24 @@
+import { execute } from "./TextToolMouseOutEventService";
+import { $setCursor } from "../../../../global/GlobalUtil";
+
+describe("TextToolMouseOutEventServiceTest", () =>
+{
+    test("execute test", () =>
+    {
+        $setCursor("test");
+
+        const style = document
+            .documentElement
+            .style;
+
+        // test case mock1
+        expect(style.getPropertyValue("--tool-cursor")).toBe("test");
+
+        execute({
+            "stopPropagation": () => {},
+            "preventDefault": () => {}
+        });
+
+        expect(style.getPropertyValue("--tool-cursor")).toBe("auto");
+    });
+});