Add reorder handle inside layer panel

Added icon to trigger re-order layer inside panel. Increased panel width to accomodate new icon. Signed-off-by: Vijayan Balasubramanian <[email protected]>
opensearch-project · Dec 9, 2022 · 9dc0b08 · 9dc0b08
1 parent 85d7a9b
commit 9dc0b08
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 63 deletions.
diff --git a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss
@@ -1,6 +1,6 @@
 .layerControlPanel--show {
   pointer-events: auto;
-  width: $euiSizeL * 10;
+  width: $euiSizeL * 11;
 
   .layerControlPanel__title {
     padding: $euiSizeM $euiSizeM

diff --git a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
@@ -13,6 +13,10 @@ import {
   EuiButtonEmpty,
   EuiHorizontalRule,
   EuiButtonIcon,
+  EuiDragDropContext,
+  EuiDraggable,
+  EuiDroppable,
+  euiDragDropReorder,
 } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import { Map as Maplibre } from 'maplibre-gl';
@@ -151,6 +155,14 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
     layerVisibility.set(layer.id, layer.visibility === LAYER_VISIBILITY.VISIBLE);
   });
 
+  const onDragEnd = ({ source, destination }) => {
+    if (source && destination) {
+      const items = euiDragDropReorder(layers, source.index, destination.index);
+      setLayers(items);
+      // TODO: Refresh Maplibre layers
+    }
+  };
+
   if (isLayerControlVisible) {
     return (
       <I18nProvider>
@@ -179,68 +191,106 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiHorizontalRule margin="none" />
-            {layers.map((layer, index) => {
-              const isLayerSelected =
-                isLayerConfigVisible && selectedLayerConfig && selectedLayerConfig.id === layer.id;
-              return (
-                <div key={layer.id}>
-                  <EuiFlexGroup
-                    className={isLayerSelected ? 'layerControlPanel__selected' : ''}
-                    alignItems="center"
-                    gutterSize="none"
-                    direction="row"
-                  >
-                    <EuiFlexItem>
-                      <EuiListGroupItem
-                        key={layer.id}
-                        label={layer.name}
-                        data-item={JSON.stringify(layer)}
-                        iconType={LAYER_ICON_TYPE_MAP[layer.type]}
-                        aria-label="layer in the map layers list"
-                        onClick={() => onClickLayerName(layer)}
-                      />
-                    </EuiFlexItem>
-                    <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
-                      <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
-                        <EuiButtonEmpty
-                          iconType={
-                            layerVisibility.get(layer.id)
-                              ? LAYER_PANEL_HIDE_LAYER_ICON
-                              : LAYER_PANEL_SHOW_LAYER_ICON
-                          }
-                          size="s"
-                          onClick={() => {
-                            if (layer.visibility === LAYER_VISIBILITY.VISIBLE) {
-                              layer.visibility = LAYER_VISIBILITY.NONE;
-                              setLayerVisibility(new Map(layerVisibility.set(layer.id, false)));
-                            } else {
-                              layer.visibility = LAYER_VISIBILITY.VISIBLE;
-                              setLayerVisibility(new Map(layerVisibility.set(layer.id, true)));
-                            }
-                            layersFunctionMap[layer.type]?.hide(maplibreRef, layer);
-                          }}
-                          aria-label="Hide or show layer"
-                          color="text"
-                        />
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
-                        <EuiButtonEmpty
-                          size="s"
-                          iconType="trash"
-                          onClick={() => {
-                            layersFunctionMap[layer.type]?.remove(maplibreRef, layer);
-                            removeLayer(index);
-                          }}
-                          aria-label="Delete layer"
-                          color="text"
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </EuiFlexGroup>
-                  <EuiHorizontalRule margin="none" />
-                </div>
-              );
-            })}
+            <EuiDragDropContext onDragEnd={onDragEnd}>
+              <EuiDroppable droppableId="CUSTOM_HANDLE_DROPPABLE_AREA" spacing="none">
+                {layers.map((layer, index) => {
+                  const isLayerSelected =
+                    isLayerConfigVisible &&
+                    selectedLayerConfig &&
+                    selectedLayerConfig.id === layer.id;
+                  return (
+                    <EuiDraggable
+                      spacing="none"
+                      key={layer.id}
+                      index={index}
+                      draggableId={layer.id}
+                      customDragHandle={true}
+                    >
+                      {(provided) => (
+                        <div key={layer.id}>
+                          <EuiFlexGroup
+                            className={isLayerSelected ? 'layerControlPanel__selected' : ''}
+                            alignItems="center"
+                            gutterSize="none"
+                            direction="row"
+                          >
+                            <EuiFlexItem>
+                              <EuiListGroupItem
+                                key={layer.id}
+                                label={layer.name}
+                                data-item={JSON.stringify(layer)}
+                                iconType={LAYER_ICON_TYPE_MAP[layer.type]}
+                                aria-label="layer in the map layers list"
+                                onClick={() => onClickLayerName(layer)}
+                              />
+                            </EuiFlexItem>
+                            <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+                              <EuiFlexItem
+                                grow={false}
+                                className="layerControlPanel__layerFunctionButton"
+                              >
+                                <EuiButtonEmpty
+                                  iconType={
+                                    layerVisibility.get(layer.id)
+                                      ? LAYER_PANEL_HIDE_LAYER_ICON
+                                      : LAYER_PANEL_SHOW_LAYER_ICON
+                                  }
+                                  size="s"
+                                  onClick={() => {
+                                    if (layer.visibility === LAYER_VISIBILITY.VISIBLE) {
+                                      layer.visibility = LAYER_VISIBILITY.NONE;
+                                      setLayerVisibility(
+                                        new Map(layerVisibility.set(layer.id, false))
+                                      );
+                                    } else {
+                                      layer.visibility = LAYER_VISIBILITY.VISIBLE;
+                                      setLayerVisibility(
+                                        new Map(layerVisibility.set(layer.id, true))
+                                      );
+                                    }
+                                    layersFunctionMap[layer.type]?.hide(maplibreRef, layer);
+                                  }}
+                                  aria-label="Hide or show layer"
+                                  color="text"
+                                />
+                              </EuiFlexItem>
+                              <EuiFlexItem
+                                grow={false}
+                                className="layerControlPanel__layerFunctionButton"
+                              >
+                                <EuiButtonEmpty
+                                  size="s"
+                                  iconType="trash"
+                                  onClick={() => {
+                                    layersFunctionMap[layer.type]?.remove(maplibreRef, layer);
+                                    removeLayer(index);
+                                  }}
+                                  aria-label="Delete layer"
+                                  color="text"
+                                />
+                              </EuiFlexItem>
+                              <EuiFlexItem
+                                grow={false}
+                                className="layerControlPanel__layerFunctionButton"
+                              >
+                                <EuiButtonEmpty
+                                  size="s"
+                                  iconType="grab"
+                                  {...provided.dragHandleProps}
+                                  aria-label="Drag Handle"
+                                  color="text"
+                                />
+                              </EuiFlexItem>
+                            </EuiFlexGroup>
+                          </EuiFlexGroup>
+                          <EuiHorizontalRule margin="none" />
+                        </div>
+                      )}
+                    </EuiDraggable>
+                  );
+                })}
+              </EuiDroppable>
+            </EuiDragDropContext>
             {isLayerConfigVisible && selectedLayerConfig && (
               <LayerConfigPanel
                 setIsLayerConfigVisible={setIsLayerConfigVisible}