Merge branch 'develop' into feature/add_export_and_import_data

package.json

@@ -17,7 +17,7 @@
     }
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "app-prod-build": "cross-env VITE_APP_GITHUB_RUN_NUMBER=$GITHUB_RUN_NUMBER vite build",
     "app-dev-build": "cross-env VITE_APP_GITHUB_RUN_NUMBER=$GITHUB_RUN_NUMBER vite build --mode development",
     "lib-build": "vite build -c 'vite.library.config.js'",

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/application/services/interpolator/interpolator.ts

@@ -157,6 +157,11 @@ export class Interpolator implements InterpolatorInterface {
   }
 
   public updatePreview(): void {
+    if (!this.isActive) {
+      throw new Error(
+        'interpolator.updatePreview was called but interpolator is not activated',
+      )
+    }
     const activeDataset = datasetRepository.activeDataset
     const anchorPoints = activeDataset.points.filter((point: Point) =>
       activeDataset.manuallyAddedPointIds.includes(point.id),

src/application/utils/localStorageUtils.ts

@@ -1,4 +1,4 @@
-import { LOCAL_STORAGE_GLOBAL_KEY } from '@/constants/constants'
+import { LOCAL_STORAGE_GLOBAL_KEY } from '@/constants'
 
 //TODO: どうテストする？
 

src/constants.ts

@@ -0,0 +1,28 @@
+export const LOCAL_STORAGE_GLOBAL_KEY = 'starryDigitizer'
+
+export const STYLE = {
+  POINT_SIZE_PX: 10,
+  TEMP_POINT_SIZE_PX: 8,
+  AXIS_SIZE_PX: 20,
+  POINT_OPACITY: 0.7,
+  TEMP_POINT_OPACITY: 0.4,
+} as const
+
+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/domain/models/axisSet/axisSet.test.ts

@@ -2,6 +2,7 @@ import { expect } from '@jest/globals'
 import { AxisSet } from './axisSet'
 import { Axis } from '../axis/axis'
 import { AxisInterface } from '../axis/axisInterface'
+import { POINT_MODE } from '../../../constants'
 
 let x1: AxisInterface
 let x2: AxisInterface
@@ -20,7 +21,7 @@ beforeEach(() => {
 
 describe('4 points setting mode', () => {
   beforeEach(() => {
-    axisSet.pointMode = 1
+    axisSet.pointMode = POINT_MODE.FOUR_POINTS
   })
   test('it has at least one axis', () => {
     expect(axisSet.hasAtLeastOneAxis).toBe(false)
@@ -112,7 +113,7 @@ describe('4 points setting mode', () => {
 
 describe('2 points setting mode', () => {
   beforeEach(() => {
-    axisSet.pointMode = 0
+    axisSet.pointMode = POINT_MODE.TWO_POINTS
   })
   test('set axisSet', () => {
     axisSet.addAxisCoord({ xPx: 100, yPx: 100 }) // x1, y1

src/domain/models/axisSet/axisSet.ts

@@ -2,6 +2,7 @@
 import { Coord } from '@/domain/models/dataset/datasetInterface'
 import { AxisSetInterface, Vector } from './axisSetInterface'
 import { AxisInterface } from '@/domain/models/axis/axisInterface'
+import { POINT_MODE } from '@/constants'
 
 export class AxisSet implements AxisSetInterface {
   id: number
@@ -14,7 +15,7 @@ export class AxisSet implements AxisSetInterface {
   xIsLogScale = false
   yIsLogScale = false
   activeAxisName = ''
-  pointMode = 0 // INFO: {0: '2Points', 1: '4Points'}
+  pointMode = POINT_MODE.TWO_POINTS
   considerGraphTilt = false
   isAdjusting = false
   isVisible = true
@@ -95,7 +96,7 @@ export class AxisSet implements AxisSetInterface {
 
   get nextAxis(): AxisInterface | null {
     //INFO: 以下の条件の時はx2,y2を同時に定義するモードに入る
-    if (this.pointMode === 0 && this.hasOnlyX1Y1AxisSet) {
+    if (this.pointMode === POINT_MODE.TWO_POINTS && this.hasOnlyX1Y1AxisSet) {
       return this.x2y2
     }
 
@@ -185,7 +186,10 @@ export class AxisSet implements AxisSetInterface {
     this.activeAxisName = this.nextAxis.name
 
     //INFO: a. 2点定義モードで、、x1を定義する時は同時にy1を定義して終了する
-    if (this.activeAxisName === 'x1' && this.pointMode === 0) {
+    if (
+      this.activeAxisName === 'x1' &&
+      this.pointMode === POINT_MODE.TWO_POINTS
+    ) {
       this.x1.coord = Object.assign(coord)
       this.y1.coord = Object.assign(coord)
       return

src/domain/models/axisSet/axisSetInterface.ts

@@ -18,7 +18,7 @@ export interface AxisSetInterface {
   xIsLogScale: boolean
   yIsLogScale: boolean
   activeAxisName: string
-  pointMode: number // INFO: {0: '2Points', 1: '4Points'}
+  pointMode: number
   considerGraphTilt: boolean
   isAdjusting: boolean
   isVisible: boolean

src/domain/repositories/datasetRepository/datasetRepository.test.ts

@@ -20,7 +20,7 @@ test('remove a dataset', () => {
   datasets.addDataset(new Dataset('dataset 3', [], datasets.nextDatasetId))
 
   datasets.removeDataset(3)
-  expect(datasets.activeDatasetId).toBe(1)
+  expect(datasets.activeDatasetId).toBe(2)
 })
 
 test('set points', () => {

src/domain/repositories/datasetRepository/datasetRepository.ts

@@ -84,8 +84,13 @@ export class DatasetRepository {
   }
 
   removeDataset(id: number): void {
+    const datasetIndex = this.datasets.findIndex((dataset) => dataset.id === id)
     this.datasets = this.datasets.filter((dataset) => dataset.id !== id)
-    this.setActiveDataset(this.datasets[0].id)
+    this.setActiveDataset(
+      this.datasets[datasetIndex - 1]
+        ? this.datasets[datasetIndex - 1].id
+        : this.datasets[0].id,
+    )
   }
 
   activatePointsInRectangleArea(topLeftCoord: Coord, bottomRightCoord: Coord) {

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) {
@@ -108,9 +109,9 @@ export default defineComponent({
       const targetAxisSet = this.axisSetRepository.activeAxisSet
 
       const datasetsConnectedToTargetAxisSet =
-        this.datasetRepository.datasets.filter((dataset) => {
-          return dataset.axisSetId === targetAxisSet.id
-        })
+        this.datasetRepository.datasets.filter(
+          (dataset) => dataset.axisSetId === targetAxisSet.id,
+        )
 
       const targetAxisSetIndex =
         this.axisSetRepository.axisSets.indexOf(targetAxisSet)
@@ -122,30 +123,33 @@ export default defineComponent({
           ? this.axisSetRepository.axisSets[1]
           : previousAxisSet || this.axisSetRepository.axisSets[0]
 
-      if (!targetAxisSet.atLeastOneCoordOrValueIsChanged) {
-        this.removeActiveAxisSet()
-      } else {
-        window.confirm(
-          `Are you sure to remove '${
-            this.axisSetRepository.activeAxisSet.name
-          }'? After the removal, '${
-            alternativeAxisSet.name
-          }' will be applied to the following datasets: ${datasetsConnectedToTargetAxisSet
-            .map((dataset) => dataset.name)
-            .toString()}`,
-        ) && this.removeActiveAxisSet()
+      // Early return if the user cancels the confirmation dialog
+      if (targetAxisSet.atLeastOneCoordOrValueIsChanged) {
+        const confirmMessage = `Are you sure to remove '${
+          this.axisSetRepository.activeAxisSet.name
+        }'? After the removal, '${
+          alternativeAxisSet.name
+        }' will be applied to the following datasets: ${datasetsConnectedToTargetAxisSet
+          .map((dataset) => dataset.name)
+          .toString()}`
+
+        if (!window.confirm(confirmMessage)) {
+          return
+        }
       }
 
+      this.removeActiveAxisSet()
+
       datasetsConnectedToTargetAxisSet.forEach((dataset) => {
         dataset.setAxisSetId(alternativeAxisSet.id)
       })
 
       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/CanvasAxis.vue

@@ -43,7 +43,7 @@ import { defineComponent } from 'vue'
 import { canvasHandler } from '@/instanceStore/applicationServiceInstances'
 import { AxisInterface } from '@/domain/models/axis/axisInterface'
 import { axisSetRepository } from '@/instanceStore/repositoryInatances'
-import { STYLE } from '@/constants/constants'
+import { POINT_MODE, STYLE } from '@/constants'
 
 export default defineComponent({
   props: {
@@ -61,7 +61,7 @@ export default defineComponent({
       fontSize: 14,
       canvasHandler,
       axisSetRepository,
-      axisSizePx: STYLE.axisSizePx,
+      axisSizePx: STYLE.AXIS_SIZE_PX,
     }
   },
   computed: {
@@ -112,7 +112,8 @@ export default defineComponent({
     },
     isActive(): boolean {
       if (
-        this.axisSetRepository.activeAxisSet.pointMode === 0 &&
+        this.axisSetRepository.activeAxisSet.pointMode ===
+          POINT_MODE.TWO_POINTS &&
         this.axisSetRepository.activeAxisSet.activeAxisName === 'x1' &&
         this.axis.name === 'y1'
       ) {

src/presentation/components/Canvas/CanvasAxisSetGuide.vue

@@ -13,6 +13,7 @@ import { CSSProperties } from 'vue'
 
 import { canvasHandler } from '@/instanceStore/applicationServiceInstances'
 import { axisSetRepository } from '@/instanceStore/repositoryInatances'
+import { POINT_MODE } from '@/constants'
 
 const axisSetGuideCommonStyle: CSSProperties = {
   position: 'absolute',
@@ -40,7 +41,9 @@ export default defineComponent({
   },
   computed: {
     isActive(): boolean {
-      return this.axisSetRepository.activeAxisSet.pointMode === 0
+      return (
+        this.axisSetRepository.activeAxisSet.pointMode === POINT_MODE.TWO_POINTS
+      )
     },
     isX1Y1LineVisible(): boolean {
       return (