refactor: add ViewNode

src/components/SystemMapCanvas/hooks/useInput.ts

@@ -2,9 +2,9 @@ import { useState, useEffect, Dispatch, SetStateAction } from "react";
 import { Application, ICanvas } from "pixi.js";
 
 import { isVariable } from "../lib/types";
-import { getVariableBounds, getVariableText } from "../lib/view/variable";
 
 import { Point } from "../lib/geometry";
+import { ViewNode } from "../lib/view/ViewNode";
 
 export function useInput(
   app: Application<ICanvas> | undefined,
@@ -27,15 +27,17 @@ export function useInput(
       return;
     }
 
-    const item = app.stage.children.find((child) => child.name === editingText);
+    const item = app.stage.children.find(
+      (child) => child.name === editingText,
+    ) as ViewNode;
     if (item === undefined) {
       return;
     }
-    const bounds = getVariableBounds(item);
+    const bounds = item.getBounds();
 
     setInputWidth(Math.max(300, bounds.width));
     setInputHeight(bounds.height);
-    setInputValue(getVariableText(item));
+    setInputValue(item.text);
     setInputPosition({ x: bounds.x, y: bounds.y });
     setInputVisible(true);
 

src/components/SystemMapCanvas/lib/view/ViewNode.ts

@@ -0,0 +1,83 @@
+import { Container, Graphics, Text, Rectangle } from "pixi.js";
+
+import { Point } from "../geometry";
+
+export class ViewNode extends Container {
+  protected _background: Graphics;
+  protected _text: Text;
+
+  protected _isHover: boolean = false;
+  protected _isSelected: boolean = false;
+
+  get text() {
+    return this._text.text;
+  }
+  set text(text: string) {
+    this._text.text = text;
+    this._text.x = -this._text.width / 2;
+    this._text.y = -this._text.height / 2;
+  }
+
+  get isHover() {
+    return this._isHover;
+  }
+  set isHover(isHover: boolean) {
+    if (this._isHover === isHover) {
+      return;
+    }
+
+    this._isHover = isHover;
+  }
+
+  get isSelected() {
+    return this._isSelected;
+  }
+  set isSelected(isSelected: boolean) {
+    if (this._isSelected === isSelected) {
+      return;
+    }
+
+    this._isSelected = isSelected;
+  }
+
+  public contains(x: number, y: number): boolean {
+    const bounds = this._text.getBounds();
+
+    if (
+      x >= bounds.left &&
+      x <= bounds.right &&
+      y >= bounds.top &&
+      y <= bounds.bottom
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  public getBounds(): Rectangle {
+    return this._text.getBounds();
+  }
+
+  constructor(xy: Point, text?: string) {
+    super();
+
+    this.x = xy.x;
+    this.y = xy.y;
+
+    this._background = new Graphics();
+    this._background.name = "background";
+
+    this._text = new Text(text);
+    this._text.x = -this._text.width / 2;
+    this._text.y = -this._text.height / 2;
+
+    this._text.name = "text";
+    this._text.style.align = "center";
+    this._text.style.fill = "black";
+    this._text.style.fontWeight = "normal";
+
+    this.addChild(this._background);
+    this.addChild(this._text);
+  }
+}

src/components/SystemMapCanvas/lib/view/variable.ts

@@ -1,63 +1,35 @@
-import { Container, DisplayObject, Rectangle, Text } from "pixi.js";
+import { Container, DisplayObject } from "pixi.js";
 import { Variable } from "../types";
 import { Point } from "../geometry";
+import { ViewNode } from "./ViewNode";
 
 export function addViewVariable(
   stage: Container<DisplayObject>,
   variable: Variable,
 ) {
-  let text = new Text(variable.text);
-  text.name = variable.name;
-  text.style.align = "center";
-  text.style.fill = "black";
-  text.x = variable.xy.x - text.width / 2;
-  text.y = variable.xy.y - text.height / 2;
-  text.style.fill = "black";
-  text.style.fontWeight = "normal";
-
-  stage.addChild(text);
+  let item = new ViewNode(variable.xy, variable.text);
+  item.name = variable.name;
+  stage.addChild(item);
 }
 
 export function updateViewVariable(
   stage: Container<DisplayObject>,
   variable: Variable,
 ): boolean {
-  const item = stage.children.find((child) => child.name === variable.name);
+  const item = stage.children.find(
+    (child) => child.name === variable.name,
+  ) as ViewNode;
   if (item === undefined) {
     return false;
   }
 
-  const text = item as Text;
-  text.text = variable.text;
-  text.x = variable.xy.x - text.width / 2;
-  text.y = variable.xy.y - text.height / 2;
-  text.style.fill = "black";
-  text.style.fontWeight = "normal";
+  item.text = variable.text;
+  item.x = variable.xy.x;
+  item.y = variable.xy.y;
 
   return true;
 }
 
 export function isOnVariable(item: DisplayObject, xy: Point): boolean {
-  const bounds = getVariableBounds(item);
-
-  if (
-    xy.x >= bounds.left &&
-    xy.x <= bounds.right &&
-    xy.y >= bounds.top &&
-    xy.y <= bounds.bottom
-  ) {
-    return true;
-  }
-
-  return false;
-}
-
-export function getVariableBounds(item: DisplayObject): Rectangle {
-  const text = item as Text;
-  return text.getBounds();
-}
-
-export function getVariableText(item: DisplayObject): string {
-  const text = item as Text;
-  return text.text;
+  return (item as ViewNode).contains(xy.x, xy.y);
 }