elementdrawing 1.0.0

package/src/js/store.js

@@ -0,0 +1,539 @@
+/**
+ * State Management Store
+ * ElementDrawing Framework - Store with state, getters, mutations, actions,
+ * subscriptions, middleware, persistence, snapshots, modules, and undo/redo.
+ */
+
+'use strict';
+
+// ─── Store Class ──────────────────────────────────────────────────────────────
+
+function Store(options) {
+  options = options || {};
+
+  // ─── Core State ────────────────────────────────────────────────────────
+  this._state = options.state ? deepClone(options.state) : {};
+  this._getters = {};
+  this._mutations = {};
+  this._actions = {};
+  this._modules = {};
+  this._subscribers = [];
+  this._middleware = [];
+  this._watchers = {};
+  this._strict = options.strict || false;
+  this._history = [];
+  this._historyIndex = -1;
+  this._maxHistory = options.maxHistory || 50;
+  this._isCommitting = false;
+
+  // ─── Persistence Config ────────────────────────────────────────────────
+  this._persistence = options.persistence || null;
+
+  // ─── Register Getters ──────────────────────────────────────────────────
+  if (options.getters) {
+    Object.keys(options.getters).forEach((key) => {
+      this._getters[key] = options.getters[key];
+    });
+  }
+
+  // ─── Register Mutations ────────────────────────────────────────────────
+  if (options.mutations) {
+    Object.keys(options.mutations).forEach((key) => {
+      this._mutations[key] = options.mutations[key];
+    });
+  }
+
+  // ─── Register Actions ──────────────────────────────────────────────────
+  if (options.actions) {
+    Object.keys(options.actions).forEach((key) => {
+      this._actions[key] = options.actions[key];
+    });
+  }
+
+  // ─── Register Modules ──────────────────────────────────────────────────
+  if (options.modules) {
+    Object.keys(options.modules).forEach((key) => {
+      this.registerModule(key, options.modules[key]);
+    });
+  }
+
+  // ─── Register Middleware ───────────────────────────────────────────────
+  if (options.middleware) {
+    options.middleware.forEach((m) => this.use(m));
+  }
+
+  // ─── Load Persisted State ──────────────────────────────────────────────
+  if (this._persistence) {
+    this._loadPersistedState();
+  }
+
+  // ─── Save Initial Snapshot ─────────────────────────────────────────────
+  this._saveSnapshot();
+}
+
+// ─── State Access ─────────────────────────────────────────────────────────────
+
+/**
+ * Get the current state (read-only in strict mode).
+ * @returns {Object}
+ */
+Store.prototype.getState = function () {
+  return this._state;
+};
+
+/**
+ * Get a nested state value by path.
+ * @param {string} path - Dot-notation path (e.g., 'user.profile.name')
+ * @returns {*}
+ */
+Store.prototype.get = function (path) {
+  return path.split('.').reduce((obj, key) => obj && obj[key], this._state);
+};
+
+// ─── Getters ──────────────────────────────────────────────────────────────────
+
+/**
+ * Get a computed value from a getter.
+ * @param {string} name
+ * @returns {*}
+ */
+Store.prototype.getGetter = function (name) {
+  const getter = this._getters[name];
+  if (!getter) {
+    console.warn('[Store] Getter not found: ' + name);
+    return undefined;
+  }
+  return getter(this._state, this._getters);
+};
+
+/**
+ * Register a getter.
+ * @param {string} name
+ * @param {Function} getter - (state, getters) => value
+ */
+Store.prototype.registerGetter = function (name, getter) {
+  this._getters[name] = getter;
+};
+
+// ─── Mutations ────────────────────────────────────────────────────────────────
+
+/**
+ * Commit a mutation to synchronously change state.
+ * @param {string} type - Mutation type
+ * @param {*} [payload] - Mutation payload
+ */
+Store.prototype.commit = function (type, payload) {
+  if (this._strict && !this._isCommitting) {
+    console.warn('[Store] Mutations must be committed inside commit() in strict mode');
+  }
+
+  const mutation = this._mutations[type];
+  if (!mutation) {
+    console.warn('[Store] Unknown mutation type: ' + type);
+    return;
+  }
+
+  // Apply middleware
+  for (const mw of this._middleware) {
+    if (mw.beforeMutation) {
+      const result = mw.beforeMutation(type, payload, this._state);
+      if (result === false) return; // Middleware cancelled the mutation
+    }
+  }
+
+  // Execute mutation
+  this._isCommitting = true;
+  const prevState = deepClone(this._state);
+  try {
+    mutation(this._state, payload);
+  } catch (error) {
+    console.error('[Store] Mutation error (' + type + '):', error);
+    this._state = prevState;
+    this._isCommitting = false;
+    return;
+  }
+  this._isCommitting = false;
+
+  // Notify subscribers
+  this._subscribers.forEach((sub) => {
+    try { sub({ type, payload }, this._state, prevState); }
+    catch (e) { console.error('[Store] Subscriber error:', e); }
+  });
+
+  // Apply middleware after
+  for (const mw of this._middleware) {
+    if (mw.afterMutation) mw.afterMutation(type, payload, this._state, prevState);
+  }
+
+  // Save snapshot for undo/redo
+  this._saveSnapshot();
+
+  // Persist state
+  if (this._persistence) this._persistState();
+
+  // Notify watchers
+  this._notifyWatchers(prevState, this._state);
+};
+
+/**
+ * Register a mutation.
+ * @param {string} type
+ * @param {Function} mutation - (state, payload) => void
+ */
+Store.prototype.registerMutation = function (type, mutation) {
+  this._mutations[type] = mutation;
+};
+
+// ─── Actions ──────────────────────────────────────────────────────────────────
+
+/**
+ * Dispatch an action (can be asynchronous).
+ * @param {string} type - Action type
+ * @param {*} [payload] - Action payload
+ * @returns {Promise}
+ */
+Store.prototype.dispatch = function (type, payload) {
+  const action = this._actions[type];
+  if (!action) {
+    console.warn('[Store] Unknown action type: ' + type);
+    return Promise.reject(new Error('Unknown action: ' + type));
+  }
+
+  const context = {
+    state: this._state,
+    getters: this._getters,
+    commit: this.commit.bind(this),
+    dispatch: this.dispatch.bind(this),
+    get: this.get.bind(this),
+    getGetter: this.getGetter.bind(this),
+  };
+
+  // Apply middleware
+  for (const mw of this._middleware) {
+    if (mw.beforeAction) {
+      const result = mw.beforeAction(type, payload, this._state);
+      if (result === false) return Promise.resolve(false);
+    }
+  }
+
+  try {
+    const result = action(context, payload);
+
+    if (result && typeof result.then === 'function') {
+      return result.then((res) => {
+        for (const mw of this._middleware) {
+          if (mw.afterAction) mw.afterAction(type, payload, this._state);
+        }
+        return res;
+      }).catch((error) => {
+        for (const mw of this._middleware) {
+          if (mw.actionError) mw.actionError(error, type, payload);
+        }
+        throw error;
+      });
+    }
+
+    for (const mw of this._middleware) {
+      if (mw.afterAction) mw.afterAction(type, payload, this._state);
+    }
+    return Promise.resolve(result);
+  } catch (error) {
+    for (const mw of this._middleware) {
+      if (mw.actionError) mw.actionError(error, type, payload);
+    }
+    return Promise.reject(error);
+  }
+};
+
+/**
+ * Register an action.
+ * @param {string} type
+ * @param {Function} action - (context, payload) => result | Promise
+ */
+Store.prototype.registerAction = function (type, action) {
+  this._actions[type] = action;
+};
+
+// ─── Subscriptions ────────────────────────────────────────────────────────────
+
+/**
+ * Subscribe to state changes.
+ * @param {Function} subscriber - (mutation, state, prevState) => void
+ * @returns {Function} Unsubscribe function
+ */
+Store.prototype.subscribe = function (subscriber) {
+  this._subscribers.push(subscriber);
+  return () => {
+    const idx = this._subscribers.indexOf(subscriber);
+    if (idx !== -1) this._subscribers.splice(idx, 1);
+  };
+};
+
+/**
+ * Watch a specific state path for changes.
+ * @param {string} path - Dot-notation path
+ * @param {Function} callback - (newValue, oldValue) => void
+ * @returns {Function} Unwatch function
+ */
+Store.prototype.watch = function (path, callback) {
+  if (!this._watchers[path]) this._watchers[path] = [];
+  this._watchers[path].push(callback);
+  return () => {
+    const watchers = this._watchers[path];
+    if (watchers) {
+      const idx = watchers.indexOf(callback);
+      if (idx !== -1) watchers.splice(idx, 1);
+    }
+  };
+};
+
+Store.prototype._notifyWatchers = function (prevState, newState) {
+  Object.keys(this._watchers).forEach((path) => {
+    const oldVal = path.split('.').reduce((obj, key) => obj && obj[key], prevState);
+    const newVal = path.split('.').reduce((obj, key) => obj && obj[key], newState);
+    if (!Object.is(oldVal, newVal)) {
+      this._watchers[path].forEach((cb) => {
+        try { cb(newVal, oldVal); } catch (e) { console.error('[Store] Watcher error:', e); }
+      });
+    }
+  });
+};
+
+// ─── Middleware ────────────────────────────────────────────────────────────────
+
+/**
+ * Add middleware to the store.
+ * @param {Object} middleware
+ * @param {Function} [middleware.beforeMutation]
+ * @param {Function} [middleware.afterMutation]
+ * @param {Function} [middleware.beforeAction]
+ * @param {Function} [middleware.afterAction]
+ * @param {Function} [middleware.actionError]
+ * @returns {Function} Remove middleware function
+ */
+Store.prototype.use = function (middleware) {
+  this._middleware.push(middleware);
+  return () => {
+    const idx = this._middleware.indexOf(middleware);
+    if (idx !== -1) this._middleware.splice(idx, 1);
+  };
+};
+
+// ─── State Persistence ────────────────────────────────────────────────────────
+
+Store.prototype._persistState = function () {
+  if (!this._persistence) return;
+  try {
+    const storage = window[this._persistence.storage || 'localStorage'];
+    const key = this._persistence.key || 'ed_store';
+    const serialized = (this._persistence.serialize || JSON.stringify)(this._state);
+    storage.setItem(key, serialized);
+  } catch (error) {
+    console.error('[Store] Persistence error:', error);
+  }
+};
+
+Store.prototype._loadPersistedState = function () {
+  if (!this._persistence) return;
+  try {
+    const storage = window[this._persistence.storage || 'localStorage'];
+    const key = this._persistence.key || 'ed_store';
+    const serialized = storage.getItem(key);
+    if (serialized !== null) {
+      const saved = (this._persistence.deserialize || JSON.parse)(serialized);
+      Object.assign(this._state, saved);
+    }
+  } catch (error) {
+    console.error('[Store] Load persistence error:', error);
+  }
+};
+
+// ─── State Snapshot / Restore ─────────────────────────────────────────────────
+
+Store.prototype._saveSnapshot = function () {
+  // Truncate future history if we're not at the end
+  if (this._historyIndex < this._history.length - 1) {
+    this._history = this._history.slice(0, this._historyIndex + 1);
+  }
+
+  this._history.push(deepClone(this._state));
+
+  // Limit history size
+  if (this._history.length > this._maxHistory) {
+    this._history.shift();
+  }
+
+  this._historyIndex = this._history.length - 1;
+};
+
+/**
+ * Create a snapshot of the current state.
+ * @returns {Object} Snapshot object
+ */
+Store.prototype.snapshot = function () {
+  return {
+    state: deepClone(this._state),
+    timestamp: Date.now(),
+  };
+};
+
+/**
+ * Restore state from a snapshot.
+ * @param {Object} snapshot
+ */
+Store.prototype.restore = function (snapshot) {
+  if (!snapshot || !snapshot.state) {
+    console.warn('[Store] Invalid snapshot');
+    return;
+  }
+  this._state = deepClone(snapshot.state);
+  if (this._persistence) this._persistState();
+  this._notifyWatchers({}, this._state);
+};
+
+// ─── Undo/Redo ────────────────────────────────────────────────────────────────
+
+/**
+ * Undo the last state change.
+ * @returns {boolean} True if undo was possible
+ */
+Store.prototype.undo = function () {
+  if (this._historyIndex <= 0) return false;
+  this._historyIndex--;
+  this._state = deepClone(this._history[this._historyIndex]);
+  this._notifyWatchers({}, this._state);
+  if (this._persistence) this._persistState();
+  return true;
+};
+
+/**
+ * Redo the last undone state change.
+ * @returns {boolean} True if redo was possible
+ */
+Store.prototype.redo = function () {
+  if (this._historyIndex >= this._history.length - 1) return false;
+  this._historyIndex++;
+  this._state = deepClone(this._history[this._historyIndex]);
+  this._notifyWatchers({}, this._state);
+  if (this._persistence) this._persistState();
+  return true;
+};
+
+/**
+ * Check if undo is available.
+ * @returns {boolean}
+ */
+Store.prototype.canUndo = function () { return this._historyIndex > 0; };
+
+/**
+ * Check if redo is available.
+ * @returns {boolean}
+ */
+Store.prototype.canRedo = function () { return this._historyIndex < this._history.length - 1; };
+
+// ─── Module System ────────────────────────────────────────────────────────────
+
+/**
+ * Register a namespaced module.
+ * @param {string} name - Module namespace
+ * @param {Object} module - Module with state, getters, mutations, actions
+ */
+Store.prototype.registerModule = function (name, module) {
+  const namespacedState = module.state ? deepClone(module.state) : {};
+  this._state[name] = namespacedState;
+  this._modules[name] = module;
+
+  // Register namespaced getters
+  if (module.getters) {
+    Object.keys(module.getters).forEach((key) => {
+      this._getters[name + '/' + key] = module.getters[key];
+    });
+  }
+
+  // Register namespaced mutations
+  if (module.mutations) {
+    Object.keys(module.mutations).forEach((key) => {
+      this._mutations[name + '/' + key] = (state, payload) => {
+        module.mutations[key](state[name], payload);
+      };
+    });
+  }
+
+  // Register namespaced actions
+  if (module.actions) {
+    Object.keys(module.actions).forEach((key) => {
+      this._actions[name + '/' + key] = (context, payload) => {
+        const moduleContext = Object.assign({}, context, {
+          state: context.state[name],
+          commit: (type, p) => context.commit(name + '/' + type, p),
+          dispatch: (type, p) => context.dispatch(name + '/' + type, p),
+        });
+        return module.actions[key](moduleContext, payload);
+      };
+    });
+  }
+};
+
+/**
+ * Unregister a namespaced module.
+ * @param {string} name
+ */
+Store.prototype.unregisterModule = function (name) {
+  delete this._state[name];
+  delete this._modules[name];
+
+  // Clean up namespaced getters, mutations, actions
+  const prefix = name + '/';
+  Object.keys(this._getters).forEach((k) => { if (k.startsWith(prefix)) delete this._getters[k]; });
+  Object.keys(this._mutations).forEach((k) => { if (k.startsWith(prefix)) delete this._mutations[k]; });
+  Object.keys(this._actions).forEach((k) => { if (k.startsWith(prefix)) delete this._actions[k]; });
+};
+
+// ─── DevTools Integration ─────────────────────────────────────────────────────
+
+/**
+ * Get store information for DevTools.
+ * @returns {Object}
+ */
+Store.prototype.getDevToolsInfo = function () {
+  return {
+    state: deepClone(this._state),
+    getters: Object.keys(this._getters),
+    mutations: Object.keys(this._mutations),
+    actions: Object.keys(this._actions),
+    modules: Object.keys(this._modules),
+    history: { index: this._historyIndex, length: this._history.length },
+  };
+};
+
+// ─── Utility ──────────────────────────────────────────────────────────────────
+
+function deepClone(obj, cache) {
+  if (obj === null || typeof obj !== 'object') return obj;
+  if (obj instanceof Date) return new Date(obj.getTime());
+  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags);
+  cache = cache || new WeakMap();
+  if (cache.has(obj)) return cache.get(obj);
+  const clone = Array.isArray(obj) ? [] : {};
+  cache.set(obj, clone);
+  Object.keys(obj).forEach((k) => { clone[k] = deepClone(obj[k], cache); });
+  return clone;
+}
+
+// ─── Factory ──────────────────────────────────────────────────────────────────
+
+/**
+ * Create a new store instance.
+ * @param {Object} [options]
+ * @returns {Store}
+ */
+function createStore(options) {
+  return new Store(options);
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+module.exports = {
+  Store,
+  createStore,
+};