All files / src undoRedo.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
5x
5x
5x
5x
 
 
 
5x
5x
5x
 
5x
 
 
 
 
 
5x
 
 
 
 
 
5x
 
 
104x
104x
 
 
 
5x
 
 
 
 
 
 
5x
 
 
5x
 
 
 
 
 
 
 
5x
 
 
1x
 
2x
 
 
 
5x
1x
1x
 
 
 
 
 
 
 
15x
15x
15x
15x
 
 
 
 
15x
15x
15x
15x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5x
5x
 
 
 
 
 
 
 
 
 
 
5x
195x
195x
 
 
195x
 
195x
195x
 
195x
 
 
 
 
 
 
23x
23x
 
 
 
23x
 
 
 
 
 
5x
34x
34x
 
34x
 
15x
14x
15x
 
15x
15x
15x
 
4x
 
 
 
 
/* eslint-disable no-param-reassign, no-shadow */
import { EMPTY_STATE, UPDATE_CAN_UNDO_REDO, REDO, UNDO } from "./constants";
import { getConfig, setConfig, updateCanUndoRedo } from "./utils-undo-redo";
import execRedo from "./redo";
import execUndo from "./undo";
 
// Logic based on: https://github.com/anthonygore/vuex-undo-redo
 
const noop = () => {};
export const undo = noop;
export const redo = noop;
 
export const scaffoldState = (state: any) => ({
  ...state,
  canUndo: false,
  canRedo: false
});
 
export const scaffoldActions = (actions: any) => ({
  ...actions,
  undo,
  redo
});
 
export const scaffoldMutations = (mutations: any) => ({
  ...mutations,
  updateCanUndoRedo: (state: any, payload: any) => {
    if (payload.canUndo !== undefined) state.canUndo = payload.canUndo;
    if (payload.canRedo !== undefined) state.canRedo = payload.canRedo;
  }
});
 
export const scaffoldStore = (store: any) => ({
  ...store,
  state: scaffoldState(store.state || {}),
  actions: scaffoldActions(store.actions || {}),
  mutations: scaffoldMutations(store.mutations || {})
});
 
const createPathConfig = ({
  namespace = "",
  ignoreMutations = []
}: UndoRedoOptions): UndoRedoOptions => ({
  namespace,
  ignoreMutations,
  done: [],
  undone: [],
  newMutation: true
});
 
const mapIgnoreMutations = ({
  namespace,
  ignoreMutations
}: UndoRedoOptions) => ({
  ignoreMutations: (ignoreMutations || [])
    .map(mutation => `${namespace}/${mutation}`)
    .concat(`${namespace}/${UPDATE_CAN_UNDO_REDO}`)
});
 
const mapPaths = (paths: UndoRedoOptions[]) =>
  paths.map(({ namespace, ignoreMutations }) =>
    createPathConfig({
      namespace: `${namespace}/`,
      ...(ignoreMutations
        ? mapIgnoreMutations({ namespace, ignoreMutations })
        : {})
    })
  );
 
const canRedo = (paths: UndoRedoOptions[]) => (namespace: string) => {
  const config = getConfig(paths)(namespace);
  Eif (Object.keys(config).length) {
    return config.undone.length > 0;
  }
  return false;
};
 
const canUndo = (paths: UndoRedoOptions[]) => (namespace: string) => {
  const config = getConfig(paths)(namespace);
  Eif (config) {
    return config.done.length > 0;
  }
  return false;
};
 
/**
 * The Undo-Redo plugin module
 *
 * @module store/plugins/undoRedo
 * @function
 * @param {Object} options
 * @param {String} options.namespace - The named vuex store module
 * @param {Array<String>} options.ignoreMutations - The list of store mutations
 * (belonging to the module) to be ignored
 * @returns {Function} plugin - the plugin function which accepts the store parameter
 */
export default (options: UndoRedoOptions) => (store: any) => {
  const paths = options.paths
    ? mapPaths(options.paths)
    : [
        createPathConfig({
          ignoreMutations: [
            ...(options.ignoreMutations || []),
            UPDATE_CAN_UNDO_REDO
          ]
        })
      ];
 
  store.subscribe((mutation: Mutation) => {
    const isStoreNamespaced = mutation.type.split("/").length > 1;
    const namespace = isStoreNamespaced
      ? `${mutation.type.split("/")[0]}/`
      : "";
    const config = getConfig(paths)(namespace);
 
    Eif (Object.keys(config).length) {
      const { ignoreMutations, newMutation, done } = config;
 
      if (
        mutation.type !== `${namespace}${EMPTY_STATE}` &&
        mutation.type !== `${namespace}${UPDATE_CAN_UNDO_REDO}` &&
        ignoreMutations.indexOf(mutation.type) === -1 &&
        mutation.type.includes(namespace) &&
        newMutation
      ) {
        done.push(mutation);
        setConfig(paths)(namespace, {
          ...config,
          done
        });
        updateCanUndoRedo({ paths, store })(namespace);
      }
    }
  });
 
  // NB: Watch all actions to intercept the undo/redo NOOP actions
  store.subscribeAction(async (action: Action) => {
    const isStoreNamespaced = action.type.split("/").length > 1;
    const namespace = isStoreNamespaced ? `${action.type.split("/")[0]}/` : "";
 
    switch (action.type) {
      case `${namespace}${REDO}`:
        if (canRedo(paths)(namespace))
          await execRedo({ paths, store })(namespace);
        break;
      case `${namespace}${UNDO}`:
        Eif (canUndo(paths)(namespace))
          await execUndo({ paths, store })(namespace);
        break;
      default:
        break;
    }
  });
};