feat!: create widget islands using another widget as the separator

Replaces manual configuration of islands with a user selectable widget
to be used as islands separator by positioning it around other widgets

Just like before it loops through the widgets in the panel and defines
the type for each segment (single, start/middle/end of island)

Also handles more cases of blacklisted and hidden widgets by shrinking
or breaking islands into multiple ones when possible

refs: #88

BREAKING CHANGE: Islands configuration has been reworked, islands are now created by specifying a widget that will act as the separator and adding/positioning them around other widgets. Previously configured islands need to be recreated using the new method.

Author: luisbocanegra

package/contents/config/main.xml

@@ -132,5 +132,25 @@
         type="Bool">
         <default>true</default>
     </entry>
+    <entry
+        name="islandSeparatorPairing"
+        type="Bool">
+        <default>false</default>
+    </entry>
+    <entry
+        name="islandSeparatorWidget"
+        type="String">
+        <default>org.kde.plasma.panelspacer</default>
+    </entry>
+    <entry
+        name="islandsEnabled"
+        type="Bool">
+        <default>true</default>
+    </entry>
+    <entry
+        name="blacklistIslandSeparator"
+        type="Bool">
+        <default>true</default>
+    </entry>
   </group>
 </kcfg>

package/contents/ui/code/enum.js

@@ -11,3 +11,10 @@ const WidgetStates = {
     Hovered: 3,
     Expanded: 4,
 };
+
+const IslandSectionType = {
+    Default: 0,
+    Start: 1,
+    Middle: 2,
+    End: 3
+};

package/contents/ui/code/globals.js

@@ -341,7 +341,6 @@ const defaultConfig = {
         overrides: {},
         associations: [],
     },
-    unifiedBackground: [],
 };
 
 const ignoredConfigs = [
@@ -369,6 +368,11 @@ const ignoredConfigs = [
     "systemTrayIconUserReplacements",
     "systemTrayIconBuiltinReplacementsEnabled",
     "logSystemTrayIconChanges",
+    "islandSeparatorPairing",
+    "islandSeparatorWidget",
+    "islandSeparatorWidget",
+    "islandsEnabled",
+    "blacklistIslandSeparator"
 ];
 
 const editModeGridSettings = {

package/contents/ui/code/utils.js

@@ -582,69 +582,6 @@ function getGlobalPosition(rect, panelElement) {
     return rect.mapToItem(panelElement, 0, 0, rect.width, rect.height);
 }
 
-function getUnifyBgTypes(itemTypes) {
-    // 0: default or middle | 1: start | 2: end
-    let areas = [[]];
-    for (let i = 0; i < itemTypes.length; i++) {
-        const item = itemTypes[i];
-        if (!item) continue;
-
-        areas[areas.length - 1].push(item);
-        if (
-            (itemTypes.length > i + 1 && itemTypes[i + 1]?.type === 1) ||
-            itemTypes[i]?.type === 3
-        ) {
-            areas[areas.length] = [];
-        }
-    }
-    // remove invalid areas
-    areas = removeInvalidAreas(areas);
-    areas.forEach((area) => shrinkAreaIfNeeded(area));
-    // shrinking may leave invalid areas
-    areas = removeInvalidAreas(areas);
-    areas = setMiddleAreaType(areas);
-    return Array.prototype.concat.apply([], areas);
-}
-
-function setMiddleAreaType(areas) {
-    areas.forEach((area) => {
-        return area.forEach((item, index) => {
-            if (index !== area.length - 1 && index !== 0) {
-                item.type = 2;
-            }
-        });
-    });
-    return areas;
-}
-
-function removeInvalidAreas(areas) {
-    return areas.filter((area) => {
-        return (
-            area.length > 1 && area[0].type === 1 && area[area.length - 1].type === 3
-        );
-    });
-}
-
-function shrinkAreaIfNeeded(area) {
-    let lo = 0;
-    let hi = area.length - 1;
-    while (lo < hi) {
-        if (!area[0].visible) {
-            // shift start to next item
-            area[1].type = area[0].type;
-            area.shift();
-        }
-        if (!area[area.length - 1].visible) {
-            // shift end to next item
-            area[area.length - 2].type = area[area.length - 1].type;
-            area.pop();
-        }
-        lo++;
-        hi--;
-    }
-    return area;
-}
-
 function setPanelModeScript(panelId, panelSettings) {
     var setPanelModeScript = `
 var panel = panelById(${panelId});
@@ -686,15 +623,6 @@ function clearOldWidgetConfig(config) {
     } else return [];
 }
 
-function fixV2UnifiedWidgetConfig(config) {
-    config.forEach((widget) => {
-        if (widget.unifyBgType === 2) {
-            widget.unifyBgType = 3;
-        }
-    });
-    return config;
-}
-
 function getWidgetConfigIdx(id, name, config) {
     // console.log("getWidgetConfigIdx()")
     return config.findIndex((item) => item.id == id && item.name == name);
@@ -1124,15 +1052,6 @@ function applyFgColor(
     };
 }
 
-function updateUnifiedBackgroundTracker(index, type, visible, tracker) {
-    tracker[index] = {
-        index: index,
-        type: type,
-        visible: visible,
-    };
-    return getUnifyBgTypes(tracker);
-}
-
 /**
  * Finds and returns an icon from the replacement rules if it matches the tray item properties
  * @param {Array} rules Replacement rules
@@ -1164,3 +1083,165 @@ function getTrayIconFromRules(rules, trayItemProperties) {
 function pointToPixel(pointSize) {
     return Math.round(pointSize / 72 * main.pixelsPerInch);
 }
+
+/**
+ * Calculates types of each widget to create islands
+ * @param {GridLayout} panelLayout - The panel's widgets layout
+ * @param {Set<int>} noBgTracker - IDs of widgets with background disabled or blacklisted
+ * @param {Set<int>} hiddenTracker - IDs of widgets that are currently hidden
+ * @param {string} islandSeparatorWidget - Widget used as island separator
+ * @param {boolean} islandsEnabled - Enable/disable island functionality
+ * @param {boolean} islandSeparatorPairing - Treat separators as pairs (start and end) instead of sharing the separator between two islands
+ * @returns {Array<{id: int, name: string, type: Enum.IslandSectionType}>} Widgets with their corresponding island section type
+ */
+function updateIslandWidgetTypes(panelLayout, noBgTracker, hiddenTracker, islandSeparatorWidget, islandsEnabled, islandSeparatorPairing) {
+    let output = [];
+    if (!panelLayout || !islandsEnabled) {
+        return output;
+    }
+
+    const SectionType = Enum.IslandSectionType;
+
+    const items = [];
+    let totalSeparators = 0;
+
+    for (let i = 0; i < panelLayout.children.length; i++) {
+        const current = panelLayout.children[i];
+        if (!current.applet?.plasmoid?.pluginName)
+            continue;
+
+        const currentName = current.applet.plasmoid.pluginName;
+        const currentId = current.applet.plasmoid.id;
+        const currentIsBlank = noBgTracker.has(currentId);
+        const currentIsHidden = hiddenTracker.has(currentId);
+        const currentIsSeparator = currentName === islandSeparatorWidget;
+
+        if (currentIsSeparator) {
+            totalSeparators++;
+            items.push({
+                type: "separator",
+                id: currentId,
+                name: currentName
+            });
+        } else if (currentIsBlank) {
+            items.push({
+                type: "blank",
+                id: currentId,
+                name: currentName
+            });
+        } else if (currentIsHidden) {
+            items.push({
+                type: "hidden",
+                id: currentId,
+                name: currentName
+            });
+        } else {
+            items.push({
+                type: "widget",
+                id: currentId,
+                name: currentName
+            });
+        }
+    }
+
+    function pushWidget(item, type) {
+        output.push({
+            id: item.id,
+            name: item.name,
+            type: type,
+        });
+    }
+
+    // Pass 1: split into separator-delimited groups and mark active groups.
+    const groups = [];
+    let separatorsSeen = 0;
+    let groupStart = 0;
+
+    function pushGroup(end) {
+        if (groupStart > end) {
+            return;
+        }
+        const active = !islandSeparatorPairing
+            ? true
+            : (separatorsSeen % 2 === 1 && separatorsSeen < totalSeparators);
+        groups.push({
+            start: groupStart,
+            end: end,
+            active: active,
+        });
+    }
+
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].type !== "separator") {
+            continue;
+        }
+
+        pushGroup(i - 1);
+        separatorsSeen++;
+        groupStart = i + 1;
+    }
+
+    // Flush trailing non-separator group.
+    pushGroup(items.length - 1);
+
+    function pushWidgetChunk(start, end) {
+        let firstWidgetIndex = -1;
+        let lastWidgetIndex = -1;
+        let widgetCount = 0;
+
+        for (let i = start; i <= end; i++) {
+            if (items[i].type === "widget") {
+                if (firstWidgetIndex === -1) {
+                    firstWidgetIndex = i;
+                }
+                lastWidgetIndex = i;
+                widgetCount++;
+            }
+        }
+
+        for (let i = start; i <= end; i++) {
+            const current = items[i];
+            if (current.type !== "widget" || widgetCount < 2) {
+                pushWidget(current, SectionType.Default);
+                continue;
+            }
+
+            if (i === firstWidgetIndex) {
+                pushWidget(current, SectionType.Start);
+            } else if (i === lastWidgetIndex) {
+                pushWidget(current, SectionType.End);
+            } else {
+                pushWidget(current, SectionType.Middle);
+            }
+        }
+    }
+
+    // Pass 2: assign section type within each active group, splitting on blanks.
+    for (const group of groups) {
+        if (!group.active) {
+            for (let i = group.start; i <= group.end; i++) {
+                pushWidget(items[i], SectionType.Default);
+            }
+            continue;
+        }
+
+        let chunkStart = group.start;
+        for (let i = group.start; i <= group.end + 1; i++) {
+            const atGroupEnd = i === group.end + 1;
+            const atBlank = !atGroupEnd && items[i].type === "blank";
+            if (!atGroupEnd && !atBlank) {
+                continue;
+            }
+
+            if (chunkStart <= i - 1) {
+                pushWidgetChunk(chunkStart, i - 1);
+            }
+            if (atBlank) {
+                pushWidget(items[i], SectionType.Default);
+            }
+            chunkStart = i + 1;
+        }
+    }
+
+    return output;
+}