Add Vue store

Co-authored-by: mugi-uno <mugi.uno@gmail.com>
Co-authored-by: Katsuya HIDAKA <hidakatsuya@gmail.com>

Author: 3 people

section_report/src/store/base/actions-base.ts

@@ -0,0 +1,19 @@
+import { DeepReadonly } from 'utility-types';
+import { GettersBase } from './getters-base';
+import { MutationsBase } from './mutations-base';
+
+export class ActionsBase<T, G extends GettersBase<T>, M extends MutationsBase<T>> {
+  protected readonly stateAccessor: () => DeepReadonly<T>;
+  protected readonly getters: G;
+  protected readonly mutations: M;
+
+  constructor (stateAccessor: () => DeepReadonly<T>, getters: G, mutations: M) {
+    this.stateAccessor = stateAccessor;
+    this.getters = getters;
+    this.mutations = mutations;
+  }
+
+  protected get state (): DeepReadonly<T> {
+    return this.stateAccessor() as DeepReadonly<T>;
+  }
+};

section_report/src/store/base/getters-base.ts

@@ -0,0 +1,11 @@
+export class GettersBase<T> {
+  protected readonly stateAccessor: () => T;
+
+  constructor (stateAccessor: () => T) {
+    this.stateAccessor = stateAccessor;
+  }
+
+  protected get state (): T {
+    return this.stateAccessor();
+  }
+}

section_report/src/store/base/mutations-base.ts

@@ -0,0 +1,11 @@
+export class MutationsBase<T> {
+  protected readonly stateAccessor: () => T;
+
+  constructor (stateAccessor: () => T) {
+    this.stateAccessor = stateAccessor;
+  }
+
+  protected get state (): T {
+    return this.stateAccessor();
+  }
+};

section_report/src/store/base/store-base.ts

@@ -0,0 +1,13 @@
+import { DeepReadonly } from 'utility-types';
+
+export abstract class StoreBase<T> {
+  protected readonly stateAccessor: () => T;
+
+  constructor (stateAccessor: () => T) {
+    this.stateAccessor = stateAccessor;
+  }
+
+  get state () {
+    return this.stateAccessor() as DeepReadonly<T>;
+  }
+};

section_report/src/store/editor/actions.ts

@@ -0,0 +1,33 @@
+import { ActionsBase } from '../base/actions-base';
+import { Getters } from './getters';
+import { Mutations } from './mutations';
+import { calcPlus, calcMinus } from '@/lib/strict-calculator';
+import { Editor, ToolType, CopiedAnyItem } from '@/types';
+
+export class Actions extends ActionsBase<Editor, Getters, Mutations> {
+  activateTool ({ tool }: { tool: ToolType }) {
+    this.mutations.setActiveTool({ tool });
+  }
+
+  setClipboard (item: CopiedAnyItem) {
+    if (!item) return;
+
+    this.mutations.setClipboard(item);
+  }
+
+  setZoomRate (rate: number) {
+    this.mutations.setZoomRate(rate);
+  }
+
+  resetZoom () {
+    this.mutations.setZoomRate(1.2);
+  }
+
+  zoomIn () {
+    this.mutations.setZoomRate(calcPlus(this.state.zoomRate, 0.5));
+  }
+
+  zoomOut () {
+    this.mutations.setZoomRate(calcMinus(this.state.zoomRate, 0.5));
+  }
+};

section_report/src/store/editor/getters.ts

@@ -0,0 +1,16 @@
+import { GettersBase } from '../base/getters-base';
+import { Editor } from '@/types';
+
+export class Getters extends GettersBase<Editor> {
+  isSelectMode () {
+    return this.state.activeTool === 'select';
+  }
+
+  isDrawMode () {
+    return this.state.activeTool !== 'select';
+  }
+
+  zoomRate () {
+    return this.state.zoomRate;
+  }
+}

section_report/src/store/editor/index.ts

@@ -0,0 +1,26 @@
+import { StoreBase } from '../base/store-base';
+import { Actions } from './actions';
+import { Getters } from './getters';
+import { Mutations } from './mutations';
+import { Editor } from '@/types';
+
+export class Store extends StoreBase<Editor> {
+  readonly getters: Getters;
+  readonly mutations: Mutations;
+  readonly actions: Actions;
+
+  constructor (stateAccessor: () => Editor) {
+    super(stateAccessor);
+    this.getters = new Getters(stateAccessor);
+    this.mutations = new Mutations(stateAccessor);
+    this.actions = new Actions(stateAccessor, this.getters, this.mutations);
+  }
+
+  static createState (): Editor {
+    return {
+      activeTool: 'select',
+      clipboard: null,
+      zoomRate: 1.2
+    };
+  }
+};

section_report/src/store/editor/mutations.ts

@@ -0,0 +1,16 @@
+import { MutationsBase } from '../base/mutations-base';
+import { CopiedAnyItem, Editor, ToolType } from '@/types';
+
+export class Mutations extends MutationsBase<Editor> {
+  setActiveTool ({ tool }: { tool: ToolType}) {
+    this.state.activeTool = tool;
+  }
+
+  setClipboard (item: CopiedAnyItem) {
+    this.state.clipboard = item;
+  }
+
+  setZoomRate (rate: number) {
+    this.state.zoomRate = Math.max(rate, 0.5);
+  }
+};

section_report/src/store/history/actions.ts

@@ -0,0 +1,45 @@
+import { DeepReadonly } from 'utility-types';
+import { ActionsBase } from '../base/actions-base';
+import { Getters } from './getters';
+import { Mutations } from './mutations';
+import { root } from '..';
+import { History, Report } from '@/types';
+
+export class Actions extends ActionsBase<History, Getters, Mutations> {
+  push (report: DeepReadonly<Report>) {
+    this.mutations.push(JSON.stringify(report));
+  }
+
+  replaceCurrentPointer (report: DeepReadonly<Report>) {
+    if (this.state.pointer === null) return;
+
+    this.mutations.replaceCurrentPointer(JSON.stringify(report));
+  }
+
+  undo () {
+    if (this.state.pointer === null || this.state.pointer === 0) return;
+
+    const history = this.state.histories[this.state.pointer - 1];
+    root.mutations.setReport(JSON.parse(history));
+
+    this.mutations.backPointer();
+  }
+
+  redo () {
+    if (this.state.pointer === null || this.state.histories.length <= this.state.pointer + 1) return;
+
+    const history = this.state.histories[this.state.pointer + 1];
+    root.mutations.setReport(JSON.parse(history));
+
+    this.mutations.forwardPointer();
+  }
+
+  reset () {
+    this.mutations.clear();
+  }
+
+  set (report: DeepReadonly<Report>) {
+    this.reset();
+    this.push(report);
+  }
+};

section_report/src/store/history/getters.ts

@@ -0,0 +1,12 @@
+import { GettersBase } from '../base/getters-base';
+import { History } from '@/types';
+
+export class Getters extends GettersBase<History> {
+  undoable (): boolean {
+    return this.state.pointer !== null && this.state.pointer > 0;
+  }
+
+  redoable (): boolean {
+    return this.state.pointer !== null && this.state.histories.length > this.state.pointer + 1;
+  }
+}