ControlCenter: Implement edit mode for customizing widgets

Modules/ControlCenter/utils/layout.js

@@ -0,0 +1,45 @@
+function calculateRowsAndWidgets(controlCenterColumn, expandedSection, expandedWidgetIndex) {
+    var rows = []
+    var currentRow = []
+    var currentWidth = 0
+    var expandedRow = -1
+
+    const widgets = SettingsData.controlCenterWidgets || []
+    const baseWidth = controlCenterColumn.width
+    const spacing = Theme.spacingS
+
+    for (var i = 0; i < widgets.length; i++) {
+        const widget = widgets[i]
+        const widgetWidth = widget.width || 50
+
+        var itemWidth
+        if (widgetWidth <= 25) {
+            itemWidth = (baseWidth - spacing * 3) / 4
+        } else if (widgetWidth <= 50) {
+            itemWidth = (baseWidth - spacing) / 2
+        } else if (widgetWidth <= 75) {
+            itemWidth = (baseWidth - spacing * 2) * 0.75
+        } else {
+            itemWidth = baseWidth
+        }
+
+        if (currentRow.length > 0 && (currentWidth + spacing + itemWidth > baseWidth)) {
+            rows.push([...currentRow])
+            currentRow = [widget]
+            currentWidth = itemWidth
+        } else {
+            currentRow.push(widget)
+            currentWidth += (currentRow.length > 1 ? spacing : 0) + itemWidth
+        }
+
+        if (widget.id === expandedSection && expandedWidgetIndex === i) {
+            expandedRow = rows.length
+        }
+    }
+
+    if (currentRow.length > 0) {
+        rows.push(currentRow)
+    }
+
+    return { rows: rows, expandedRowIndex: expandedRow }
+}

Modules/ControlCenter/utils/state.js

@@ -0,0 +1,25 @@
+function setTriggerPosition(root, x, y, width, section, screen) {
+    root.triggerX = x
+    root.triggerY = y
+    root.triggerWidth = width
+    root.triggerSection = section
+    root.triggerScreen = screen
+}
+
+function openWithSection(root, section) {
+    if (root.shouldBeVisible) {
+        root.close()
+    } else {
+        root.expandedSection = section
+        root.open()
+    }
+}
+
+function toggleSection(root, section) {
+    if (root.expandedSection === section) {
+        root.expandedSection = ""
+        root.expandedWidgetIndex = -1
+    } else {
+        root.expandedSection = section
+    }
+}

Modules/ControlCenter/utils/widgets.js

@@ -0,0 +1,75 @@
+function getWidgetForId(baseWidgetDefinitions, widgetId) {
+    return baseWidgetDefinitions.find(w => w.id === widgetId)
+}
+
+function addWidget(widgetId) {
+    var widgets = SettingsData.controlCenterWidgets.slice()
+    var widget = {
+        "id": widgetId,
+        "enabled": true,
+        "width": 50
+    }
+    widgets.push(widget)
+    SettingsData.setControlCenterWidgets(widgets)
+}
+
+function removeWidget(index) {
+    var widgets = SettingsData.controlCenterWidgets.slice()
+    if (index >= 0 && index < widgets.length) {
+        widgets.splice(index, 1)
+        SettingsData.setControlCenterWidgets(widgets)
+    }
+}
+
+function toggleWidgetSize(index) {
+    var widgets = SettingsData.controlCenterWidgets.slice()
+    if (index >= 0 && index < widgets.length) {
+        const currentWidth = widgets[index].width || 50
+        const id = widgets[index].id || ""
+
+        if (id === "wifi" || id === "bluetooth" || id === "audioOutput" || id === "audioInput") {
+            widgets[index].width = currentWidth <= 50 ? 100 : 50
+        } else {
+            if (currentWidth <= 25) {
+                widgets[index].width = 50
+            } else if (currentWidth <= 50) {
+                widgets[index].width = 100
+            } else {
+                widgets[index].width = 25
+            }
+        }
+
+        SettingsData.setControlCenterWidgets(widgets)
+    }
+}
+
+function reorderWidgets(newOrder) {
+    SettingsData.setControlCenterWidgets(newOrder)
+}
+
+function moveWidget(fromIndex, toIndex) {
+    let widgets = [...(SettingsData.controlCenterWidgets || [])]
+    if (fromIndex >= 0 && fromIndex < widgets.length && toIndex >= 0 && toIndex < widgets.length) {
+        const movedWidget = widgets.splice(fromIndex, 1)[0]
+        widgets.splice(toIndex, 0, movedWidget)
+        SettingsData.setControlCenterWidgets(widgets)
+    }
+}
+
+function resetToDefault() {
+    const defaultWidgets = [
+        {"id": "volumeSlider", "enabled": true, "width": 50},
+        {"id": "brightnessSlider", "enabled": true, "width": 50},
+        {"id": "wifi", "enabled": true, "width": 50},
+        {"id": "bluetooth", "enabled": true, "width": 50},
+        {"id": "audioOutput", "enabled": true, "width": 50},
+        {"id": "audioInput", "enabled": true, "width": 50},
+        {"id": "nightMode", "enabled": true, "width": 50},
+        {"id": "darkMode", "enabled": true, "width": 50}
+    ]
+    SettingsData.setControlCenterWidgets(defaultWidgets)
+}
+
+function clearAll() {
+    SettingsData.setControlCenterWidgets([])
+}