#GUI Control & Settings

The GUIControl service manages the framework's settings panel, implemented through the ModLoaderGui AngularJS component system. Settings data is persisted to IndexedDB.

#Settings Panel

The framework registers an AngularJS component maplebirch-control-component via ModSubUiAngularJs, displayed on the ModLoader settings page.

#Panel Features

• Language Switch — Toggle framework language between EN/CN
• Debug Mode — Enable/disable DEBUG log level
• Module Management — Enable/disable extension modules (visible only in debug mode)
• Script Management — Enable/disable Mod scripts (visible only in debug mode)
• Clear Database — Reset IndexedDB (visible only in debug mode)

#Operation Instructions

#Cascade Dependencies

When disabling a module, other modules that depend on it will be cascade-disabled. When enabling a module, other disabled modules that this module depends on will be cascade-enabled.

#IndexedDB Persistence

The framework uses IndexedDB as the settings storage backend, with database name maplebirch.

#Core Service

IndexedDBService (accessible via maplebirch.idb) provides the following functionality:

#Register Store

maplebirch.idb.register("my-store", { keyPath: "id" }, [
  { name: "indexName", keyPath: "field", options: { unique: false } },
]);

Store registration should be completed in the :IndexedDB event:

maplebirch.once(":IndexedDB", () => {
  maplebirch.idb.register("my-store", { keyPath: "id" });
});

#Transaction Operations

// Read data
const value = await maplebirch.idb.withTransaction(["my-store"], "readonly", async (tx) => {
  return await tx.objectStore("my-store").get("key");
});

// Write data
await maplebirch.idb.withTransaction(["my-store"], "readwrite", async (tx) => {
  await tx.objectStore("my-store").put({ id: "key", value: "data" });
});

#Other Methods

#Built-in Stores

The framework registers the following IndexedDB stores:

#settings Store Keys