- {(() => {
- const totalRows = settings.QUICKTOOLS_ROWS * settings.QUICKTOOLS_GROUPS;
- const limit = settings.QUICKTOOLS_GROUP_CAPACITY;
- const rows = [];
- for (let i = 0; i < totalRows; i++) {
- const row = [];
- for (let j = 0; j < limit; j++) {
- const count = i * limit + j;
- const index = settings.value.quicktoolsItems[count];
- row.push(
);
- }
- rows.push(
{row}
);
+class QuickToolsManager {
+ constructor() {
+ this.container =
;
+ this.render();
+ this.bindEvents();
+
+ this.longPressTimer = null;
+ this.dragState = null;
+ }
+
+ getContainer() {
+ return this.container;
+ }
+
+ render() {
+ this.destroy(); // Cleanup potential drag states before re-rendering
+ this.container.textContent = "";
+
+ // --- Active Tools Section ---
+ const activeSection =
;
+ activeSection.appendChild(
+
{strings["active tools"]}
,
+ );
+
+ const activeGrid =
;
+
+ const totalSlots =
+ settings.QUICKTOOLS_ROWS *
+ settings.QUICKTOOLS_GROUPS *
+ settings.QUICKTOOLS_GROUP_CAPACITY;
+
+ for (let i = 0; i < totalSlots; i++) {
+ const itemIndex = settings.value.quicktoolsItems[i];
+ const itemDef = items[itemIndex];
+ const el = this.createItemElement(itemDef, i, "active");
+ activeGrid.appendChild(el);
+ }
+
+ activeSection.appendChild(activeGrid);
+ this.container.appendChild(activeSection);
+
+ // --- Available Tools Section ---
+ const availableSection =
;
+ availableSection.appendChild(
+
{strings["available tools"]}
,
+ );
+
+ // Group items
+ const categories = {
+ Modifiers: ["ctrl", "shift", "alt", "meta"],
+ Commands: ["command", "undo", "redo", "save", "search"],
+ Navigation: ["key"],
+ Symbols: ["insert"],
+ Other: [],
+ };
+
+ const groupedItems = {};
+ items.forEach((item, index) => {
+ let category = "Other";
+ for (const [cat, actions] of Object.entries(categories)) {
+ if (actions.includes(item.action)) {
+ category = cat;
+ break;
}
+ }
+ if (!groupedItems[category]) groupedItems[category] = [];
+ groupedItems[category].push({ item, index });
+ });
- return rows;
- })()}
-