Add ability to select custom data

2026-05-27 02:12:24 +02:00 · 2018-08-25 11:14:04 -04:00
parent 0a82ab125e
commit cc938698e8
12 changed files with 158 additions and 69 deletions
@@ -0,0 +1,97 @@
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
+import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
+
+import {
+    behaviorBreathe,
+    behaviorHover,
+    behaviorLasso,
+    behaviorSelect
+} from '../behavior';
+
+import {
+    modeDragNode,
+    modeDragNote
+} from '../modes';
+
+import { modeBrowse } from './browse';
+import { uiDataEditor } from '../ui';
+
+
+export function modeSelectData(context, selectedDatum) {
+    var mode = {
+        id: 'select-data',
+        button: 'browse'
+    };
+
+    var keybinding = d3_keybinding('select-data');
+    var dataEditor = uiDataEditor(context);
+
+    var behaviors = [
+        behaviorBreathe(context),
+        behaviorHover(context),
+        behaviorSelect(context),
+        behaviorLasso(context),
+        modeDragNode(context).behavior,
+        modeDragNote(context).behavior
+    ];
+
+
+    // class the data as selected, or return to browse mode if the data is gone
+    function selectData(drawn) {
+        var selection = context.surface().selectAll('.layer-mapdata .data' + selectedDatum.__featurehash__);
+
+        if (selection.empty()) {
+            // Return to browse mode if selected DOM elements have
+            // disappeared because the user moved them out of view..
+            var source = d3_event && d3_event.type === 'zoom' && d3_event.sourceEvent;
+            if (drawn && source && (source.type === 'mousemove' || source.type === 'touchmove')) {
+                context.enter(modeBrowse(context));
+            }
+        } else {
+            selection.classed('selected', true);
+        }
+    }
+
+
+    function esc() {
+        context.enter(modeBrowse(context));
+    }
+
+
+    mode.enter = function() {
+        behaviors.forEach(context.install);
+        keybinding.on('⎋', esc, true);
+        d3_select(document).call(keybinding);
+
+        selectData();
+
+        context.ui().sidebar
+            .show(dataEditor.datum(selectedDatum));
+
+        context.map()
+            .on('drawn.select-data', selectData);
+    };
+
+
+    mode.exit = function() {
+        behaviors.forEach(context.uninstall);
+        keybinding.off();
+
+        context.surface()
+            .selectAll('.layer-mapdata .selected')
+            .classed('selected hover', false);
+
+        context.map()
+            .on('drawn.select-data', null);
+
+        context.ui().sidebar
+            .hide();
+    };
+
+
+    return mode;
+}