Add member controls UI for relations (load and select actions)

css/raw_membership_editor.css

@@ -0,0 +1,32 @@
+.member-controls {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 6px;
+}
+
+.member-controls .member-btn {
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: 1px solid #ccc;
+    background: #fff;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1;
+}
+
+.member-controls .member-btn:hover {
+    background: #f3f3f3;
+}
+
+.member-controls .member-btn.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.member-btn svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+}

modules/modes/select.js

@@ -234,7 +234,6 @@ export function modeSelect(context, selectedIDs) {
         return _operations.filter(operation => operation.available());
     };
 
-
     mode.enter = function() {
         if (!checkSelectedIDs()) return;
 

modules/ui/sections/raw_membership_editor.js

@@ -356,10 +356,135 @@ export function uiSectionRawMembershipEditor(context) {
         return presetName + ' ' + entityName;
     }
 
+    function loadAllMembers() {
+        var selectedIDs = context.selectedIDs();
+        if (!selectedIDs.length) return;
+
+        var entityID = selectedIDs[0];
+        var entity = context.graph().hasEntity(entityID);
+        if (!entity || entity.type !== 'relation') return;
+
+        context.loadEntity(entityID);
+    }
+
+    function selectAllMembers() {
+        var graph = context.graph();
+        var selectedIDs = context.selectedIDs();
+        if (!selectedIDs.length) return;
+        var entity = graph.entity(selectedIDs[0]);
+        if (entity.type !== 'relation') return;
+
+        var allLoaded = entity.members.every(m => graph.hasEntity(m.id));
+
+        if (!allLoaded) {
+            context.ui().flash(t('raw_membership_editor.not_all_members_loaded'));
+            return;
+        }
+
+        var memberIDs = entity.members
+            .filter(m => m.type === 'way' || m.type === 'node')
+            .map(m => m.id);
+
+        context.enter(
+            modeSelect(context, memberIDs)
+        );
+    }
+
+    function selectLoadedMembers() {
+        var graph = context.graph();
+        var selectedIDs = context.selectedIDs();
+
+        if (!selectedIDs.length) return;
+
+        var entity = graph.entity(selectedIDs[0]);
+
+        if (entity.type !== 'relation') {
+            return;
+        }
+
+        var memberIDs = entity.members
+            .map(m => m.id)
+            .filter(id => graph.hasEntity(id));
+
+        if (!memberIDs.length) {
+            return;
+        }
+
+        context.enter(modeSelect(context, memberIDs));
+    }
+
     function renderDisclosureContent(selection) {
 
         var memberships = getMemberships();
 
+        //Member Controls (compact UI)
+        var controls = selection.selectAll('.member-controls')
+            .data([0]);
+
+        var controlsEnter = controls.enter()
+            .append('div')
+            .attr('class', 'member-controls');
+
+        controls = controls.merge(controlsEnter);
+
+        // Buttons data
+        var btnData = [
+            { type: 'load', icon: '#iD-icon-plus', title: 'Load all members' },
+            { type: 'selectLoaded', icon: '#iD-icon-note', title: 'Select loaded members' },
+            { type: 'selectAll', icon: '#iD-icon-apply', title: 'Select all members' }
+        ];
+
+        var buttons = controls.selectAll('button')
+            .data(btnData);
+
+        var buttonsEnter = buttons.enter()
+            .append('button')
+            .attr('type', 'button')
+            .attr('class', function(d) { return 'member-btn member-btn-' + d.type; })
+            .attr('title', function(d) { return d.title; })
+            .each(function(d) {
+                d3_select(this).call(svgIcon(d.icon));
+            });
+
+        buttons = buttons.merge(buttonsEnter);
+
+        buttons.on('click', function(event, d) {
+            if (this.disabled) return;
+            if (d.type === 'load') {
+                loadAllMembers();
+            } else if (d.type === 'selectLoaded') {
+                selectLoadedMembers();
+            } else if (d.type === 'selectAll') {
+                selectAllMembers();
+            }
+        });
+
+        buttons.each(function(d) {
+            var isDisabled = false;
+
+            if (d.type === 'selectAll') {
+                var selectedIDs = context.selectedIDs();
+                if (!selectedIDs.length) {
+                    isDisabled = true;
+                } else {
+                    var entity = context.graph().hasEntity(selectedIDs[0]);
+                    if (!entity || entity.type !== 'relation') {
+                        isDisabled = true;
+                    } else {
+                        isDisabled = !entity.members.every(m =>
+                            context.graph().hasEntity(m.id)
+                        );
+                    }
+                }
+            }
+
+            d3_select(this)
+                .classed('disabled', isDisabled)
+                .attr('disabled', isDisabled ? true : null)
+                .attr('aria-disabled', isDisabled ? 'true' : null)
+                .attr('tabindex', isDisabled ? -1 : null);
+        });
+
         var list = selection.selectAll('.member-list')
             .data([0]);