Merge pull request #197 from t29mato/feature/add_constants_for_manual…

…_mode_and_mask_mode

Feature/add constants for manual mode and mask mode

src/application/services/canvasHandler/canvasHandler.ts

@@ -3,6 +3,7 @@ import ColorThief from 'colorthief'
 import { CanvasHandlerInterface } from './canvasHandlerInterface'
 import { Coord } from '../../../domain/models/dataset/datasetInterface'
 import { HTMLCanvas } from '../../../presentation/dom/HTMLCanvas'
+import { MANUAL_MODE, MASK_MODE } from '@/constants'
 const colorThief = new ColorThief()
 
 export class CanvasHandler implements CanvasHandlerInterface {
@@ -16,8 +17,8 @@ export class CanvasHandler implements CanvasHandlerInterface {
     endX: 0,
     endY: 0,
   }
-  maskMode = -1
-  manualMode = -1 // INFO: {0: add, 1: Edit, 2: Delete}
+  maskMode: number = MASK_MODE.UNSET
+  manualMode: number = MANUAL_MODE.UNSET
   penToolSizePx = 50
   eraserSizePx = 30
   uploadImageUrl = ''
@@ -57,9 +58,9 @@ export class CanvasHandler implements CanvasHandlerInterface {
 
   get isDrawingMask(): boolean {
     switch (this.maskMode) {
-      case 0:
-      case 1:
-      case 2:
+      case MASK_MODE.PEN:
+      case MASK_MODE.BOX:
+      case MASK_MODE.ERASER:
         return true
       default:
         return false
@@ -72,21 +73,21 @@ export class CanvasHandler implements CanvasHandlerInterface {
   }
 
   mouseDragInManualMode() {
-    if (this.manualMode === 1) {
+    if (this.manualMode === MANUAL_MODE.EDIT) {
       //INFO: only in EDIT mode
       this.drawDraggedArea()
     }
   }
 
   mouseDragInMaskMode(xPx: number, yPx: number) {
     switch (this.maskMode) {
-      case 0:
+      case MASK_MODE.PEN:
         this.drawPenMask(xPx, yPx, this.penToolSizePx)
         break
-      case 1: // INFO: マウスドラッグ中は選択範囲を仮描画
+      case MASK_MODE.BOX: // INFO: マウスドラッグ中は選択範囲を仮描画
         this.drawDraggedArea()
         break
-      case 2:
+      case MASK_MODE.ERASER:
         this.drawEraserMask(xPx, yPx, this.eraserSizePx)
         break
       default:
@@ -99,12 +100,12 @@ export class CanvasHandler implements CanvasHandlerInterface {
     this.rectangle.endY = yPx
 
     //INFO: 現在のモードがmanual modeかmask modeかで処理を分岐
-    if (this.manualMode !== -1) {
+    if (this.manualMode !== MANUAL_MODE.UNSET) {
       this.mouseDragInManualMode()
       return
     }
 
-    if (this.maskMode !== -1) {
+    if (this.maskMode !== MASK_MODE.UNSET) {
       this.mouseDragInMaskMode(xPx, yPx)
       return
     }
@@ -113,7 +114,7 @@ export class CanvasHandler implements CanvasHandlerInterface {
   mouseUp() {
     this.clearTempMask()
 
-    if (this.maskMode === 1) {
+    if (this.maskMode === MASK_MODE.BOX) {
       this.drawBoxMask()
     }
   }
@@ -379,7 +380,7 @@ export class CanvasHandler implements CanvasHandlerInterface {
 
   setMaskMode(mode: number) {
     this.maskMode = mode
-    this.manualMode = -1
+    this.manualMode = MANUAL_MODE.UNSET
   }
 
   setPenToolSizePx(size: number) {

src/constants.ts

@@ -12,3 +12,17 @@ export const POINT_MODE = {
   TWO_POINTS: 0,
   FOUR_POINTS: 1,
 } as const
+
+export const MANUAL_MODE = {
+  UNSET: -1,
+  ADD: 0,
+  EDIT: 1,
+  DELETE: 2,
+} as const
+
+export const MASK_MODE = {
+  UNSET: -1,
+  PEN: 0,
+  BOX: 1,
+  ERASER: 2,
+}

src/presentation/components/AxisSetManager/AxisSetManager.vue

@@ -54,6 +54,7 @@ import { canvasHandler } from '@/instanceStore/applicationServiceInstances'
 import { interpolator } from '@/instanceStore/applicationServiceInstances'
 import { axisSetRepository } from '@/instanceStore/repositoryInatances'
 import { datasetRepository } from '@/instanceStore/repositoryInatances'
+import { MANUAL_MODE } from '@/constants'
 
 export default defineComponent({
   components: {},
@@ -84,9 +85,9 @@ export default defineComponent({
 
       //NOTE: If axis coords are not calibrated, change manualMode for calibration. Otherwise automatically set to ADD mode
       if (this.axisSetRepository.activeAxisSet.nextAxis) {
-        this.canvasHandler.manualMode = -1
+        this.canvasHandler.manualMode = MANUAL_MODE.UNSET
       } else {
-        this.canvasHandler.manualMode = 0
+        this.canvasHandler.manualMode = MANUAL_MODE.ADD
       }
     },
     handleOnClickAxisSet(id: number) {
@@ -143,9 +144,9 @@ export default defineComponent({
       this.axisSetRepository.setActiveAxisSet(alternativeAxisSet.id)
 
       if (alternativeAxisSet.nextAxis) {
-        this.canvasHandler.manualMode = -1
+        this.canvasHandler.manualMode = MANUAL_MODE.UNSET
       } else {
-        this.canvasHandler.manualMode = 0
+        this.canvasHandler.manualMode = MANUAL_MODE.ADD
       }
     },
   },

src/presentation/components/Canvas/CanvasCursor.vue

@@ -57,7 +57,7 @@ import { CSSProperties } from 'vue'
 import { canvasHandler } from '@/instanceStore/applicationServiceInstances'
 import { axisSetRepository } from '@/instanceStore/repositoryInatances'
 import { datasetRepository } from '@/instanceStore/repositoryInatances'
-import { POINT_MODE, STYLE } from '@/constants'
+import { MANUAL_MODE, MASK_MODE, POINT_MODE, STYLE } from '@/constants'
 
 const guideLineBaseStyles: CSSProperties = {
   position: 'absolute',
@@ -83,19 +83,19 @@ export default defineComponent({
     },
     rightLabel(): string {
       switch (this.canvasHandler.maskMode) {
-        case 0:
+        case MASK_MODE.PEN:
           return 'Pen'
-        case 1:
+        case MASK_MODE.BOX:
           return 'Box'
-        case 2:
+        case MASK_MODE.ERASER:
           return 'Eraser'
       }
       switch (this.canvasHandler.manualMode) {
-        case 0:
+        case MANUAL_MODE.ADD:
           return 'Add'
-        case 1:
+        case MANUAL_MODE.EDIT:
           return 'Edit'
-        case 2:
+        case MANUAL_MODE.DELETE:
           return 'Delete'
       }
       return ''
@@ -128,33 +128,33 @@ export default defineComponent({
     isCursorGuideLinesActive(): boolean {
       //INFO: 軸定義後でプロットのいずれのモードでもないときは表示しない
       if (
-        this.canvasHandler.manualMode === -1 &&
+        this.canvasHandler.manualMode === MANUAL_MODE.UNSET &&
         this.axisSetRepository.activeAxisSet.y2.coordIsFilled
       ) {
         return false
       }
 
       // //INFO: マスク操作中の場合は表示しない
-      if (this.canvasHandler.maskMode !== -1) {
+      if (this.canvasHandler.maskMode !== MASK_MODE.UNSET) {
         return false
       }
 
       //INFO: EDIT, DELETEモードの場合は表示しない
       if (
-        this.canvasHandler.manualMode !== -1 &&
-        this.canvasHandler.manualMode !== 0
+        this.canvasHandler.manualMode !== MANUAL_MODE.UNSET &&
+        this.canvasHandler.manualMode !== MANUAL_MODE.ADD
       ) {
         return false
       }
 
       return true
     },
     guideLineColor(): string {
-      if (this.canvasHandler.manualMode === -1) {
+      if (this.canvasHandler.manualMode === MANUAL_MODE.UNSET) {
         return '#00ff00'
       }
 
-      if (this.canvasHandler.manualMode === 0) {
+      if (this.canvasHandler.manualMode === MANUAL_MODE.ADD) {
         return '#ffcc00'
       }
 

src/presentation/components/Canvas/CanvasMain.vue

@@ -63,6 +63,7 @@ import { extractor } from '@/instanceStore/applicationServiceInstances'
 import { canvasHandler } from '@/instanceStore/applicationServiceInstances'
 import { axisSetRepository } from '@/instanceStore/repositoryInatances'
 import { datasetRepository } from '@/instanceStore/repositoryInatances'
+import { MANUAL_MODE } from '@/constants'
 
 // INFO: to adjust the exact position the user clicked.
 const offsetPx = 1
@@ -157,7 +158,7 @@ export default defineComponent({
         this.datasetRepository.activeDataset.inactivatePoints()
         // INFO: 軸を全て設定し終えた後は自動でプロット追加モードにする
         if (!this.axisSetRepository.activeAxisSet.nextAxis) {
-          this.canvasHandler.manualMode = 0
+          this.canvasHandler.manualMode = MANUAL_MODE.ADD
         }
         return
       }

src/presentation/components/Canvas/CanvasPoint.vue

@@ -27,7 +27,7 @@ import { Point } from '@/domain/models/dataset/datasetInterface'
 import { interpolator } from '@/instanceStore/applicationServiceInstances'
 import { canvasHandler } from '@/instanceStore/applicationServiceInstances'
 import { datasetRepository } from '@/instanceStore/repositoryInatances'
-import { STYLE } from '@/constants'
+import { MANUAL_MODE, STYLE } from '@/constants'
 
 export default defineComponent({
   data() {
@@ -50,7 +50,7 @@ export default defineComponent({
     },
     cursor(): string | undefined {
       const mode = this.canvasHandler.manualMode
-      if (mode === 1 || mode === 2) {
+      if (mode === MANUAL_MODE.EDIT || mode === MANUAL_MODE.DELETE) {
         return 'pointer'
       }
       return undefined
@@ -131,9 +131,9 @@ export default defineComponent({
     click(event: MouseEvent) {
       switch (this.canvasHandler.manualMode) {
         // INFO: CanvasMain Component -> point method
-        case 0:
+        case MANUAL_MODE.ADD:
           return
-        case 1:
+        case MANUAL_MODE.EDIT:
           if (event.ctrlKey || event.metaKey) {
             this.datasetRepository.activeDataset.toggleActivatedPoint(
               this.point.id,
@@ -144,7 +144,7 @@ export default defineComponent({
             this.point.id,
           )
           return
-        case 2:
+        case MANUAL_MODE.DELETE:
           this.datasetRepository.activeDataset.clearPoint(this.point.id)
 
           return

src/presentation/components/DatasetManager/DatasetManager.vue

@@ -63,6 +63,7 @@ import { canvasHandler } from '@/instanceStore/applicationServiceInstances'
 import { interpolator } from '@/instanceStore/applicationServiceInstances'
 import { datasetRepository } from '@/instanceStore/repositoryInatances'
 import { axisSetRepository } from '@/instanceStore/repositoryInatances'
+import { MASK_MODE } from '@/constants'
 
 export default defineComponent({
   components: {},
@@ -105,7 +106,7 @@ export default defineComponent({
       )
       // INFO: データセットが変えた時はマスクをクリアすることが多いので。
       this.canvasHandler.clearMask()
-      this.canvasHandler.maskMode = -1
+      this.canvasHandler.maskMode = MASK_MODE.UNSET
     },
     handleOnClickDataset(id: number) {
       if (

src/presentation/components/Settings/MaskSettings.vue

@@ -22,7 +22,7 @@
       Clear
     </v-btn>
     <v-text-field
-      v-if="canvasHandler.maskMode === 0"
+      v-if="maskModeIsPen"
       :model-value="canvasHandler.penToolSizePx"
       @change="onChangePenToolSizePx"
       type="number"
@@ -31,7 +31,7 @@
       density="compact"
     ></v-text-field>
     <v-text-field
-      v-if="canvasHandler.maskMode === 2"
+      v-if="maskModeIsEraser"
       :model-value="canvasHandler.eraserSizePx"
       @change="onChangeEraserSizePx"
       type="number"
@@ -43,6 +43,7 @@
 </template>
 
 <script lang="ts">
+import { MASK_MODE } from '@/constants'
 import { canvasHandler } from '@/instanceStore/applicationServiceInstances'
 import { defineComponent } from 'vue'
 
@@ -52,6 +53,14 @@ export default defineComponent({
       canvasHandler,
     }
   },
+  computed: {
+    maskModeIsPen() {
+      return this.canvasHandler.maskMode === MASK_MODE.PEN
+    },
+    maskModeIsEraser() {
+      return this.canvasHandler.maskMode === MASK_MODE.ERASER
+    },
+  },
   methods: {
     onChangePenToolSizePx(event: Event) {
       this.canvasHandler.setPenToolSizePx(
@@ -73,8 +82,8 @@ export default defineComponent({
     clearMask() {
       this.canvasHandler.clearMask()
       // INFO: マスク削除後はマスク描画されておらず消しゴムツールを使う必要ないため。
-      if (this.canvasHandler.maskMode === 2) {
-        this.canvasHandler.maskMode = -1
+      if (this.canvasHandler.maskMode === MASK_MODE.ERASER) {
+        this.canvasHandler.maskMode = MASK_MODE.UNSET
       }
     },
   },