Hotbar inner drag-n-drop (#2691)

* Configure ts to use react-jsx rule

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving HotbarSelector to separate component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Initial drag-n-drop implementation

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Revert tsconfig and linter changes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Reverting back active cell effect

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding drag-n-drop behavior

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix drag-n-drop logic

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* White border on dragging over

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding test coverage

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing cell hover effect

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Increase PageLayout z-index

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling hotbar selector tooltip

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/hotbar/hotbar-icon.scss

@@ -14,7 +14,7 @@
     }
 
     &.active {
-      box-shadow: 0 0 0px 3px #ffffff;
+      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
       transition: all 0s 0.8s;
     }
 
@@ -24,6 +24,14 @@
       }
     }
 
+    &:hover {
+      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
+    }
+
+    &.isDragging {
+      box-shadow: none;
+    }
+
     > .led {
       position: absolute;
       left: 3px;

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -94,7 +94,7 @@ export class HotbarIcon extends React.Component<Props> {
   remove(item: CatalogEntity) {
     const hotbar = HotbarStore.getInstance();
 
-    hotbar.removeFromHotbar(item);
+    hotbar.removeFromHotbar(item.getId());
   }
 
   onMenuItemClick(menuItem: CatalogEntityContextMenu) {

src/renderer/components/hotbar/hotbar-menu.scss

@@ -44,15 +44,14 @@
       background: var(--layoutBackground);
       border-radius: 6px;
       position: relative;
-      transform: translateZ(0); // Remove flickering artifacts
 
-      &:hover {
-        &:not(:empty) {
-          box-shadow: 0 0 0px 3px #ffffff1a;
-        }
+      &.isDraggingOver {
+        box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff;
       }
 
       &.animating {
+        transform: translateZ(0); // Remove flickering artifacts
+
         &:empty {
           animation: shake .6s cubic-bezier(.36,.07,.19,.97) both;
           transform: translate3d(0, 0, 0);
@@ -61,48 +60,11 @@
         }
 
         &:not(:empty) {
-          animation: outline 0.8s cubic-bezier(0.19, 1, 0.22, 1);
+          animation: outline 1s cubic-bezier(0.19, 1, 0.22, 1);
         }
       }
     }
   }
-
-  .HotbarSelector {
-    height: 26px;
-    background-color: var(--layoutBackground);
-    position: relative;
-
-    &:before {
-      content: " ";
-      position: absolute;
-      width: 100%;
-      height: 20px;
-      background: linear-gradient(0deg, var(--clusterMenuBackground), transparent);
-      top: -20px;
-    }
-
-    .Badge {
-      cursor: pointer;
-      background: var(--secondaryBackground);
-      width: 100%;
-      color: var(--settingsColor);
-      padding-top: 3px;
-    }
-
-    .Icon {
-      --size: 16px;
-      padding: 0 4px;
-
-      &:hover {
-        box-shadow: none;
-        background-color: transparent;
-      }
-
-      &.previous {
-        transform: rotateY(180deg);
-      }
-    }
-  }
 }
 
 @keyframes shake {
@@ -130,6 +92,6 @@
   }
 
   100% {
-    box-shadow: 0 0 0px 0px $clusterMenuBackground, 0 0 0px 3px #ffffff;
+    box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #ffffff;
   }
 }

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -1,18 +1,15 @@
 import "./hotbar-menu.scss";
 import "./hotbar.commands";
 
-import React, { ReactNode, useState } from "react";
+import React, { HTMLAttributes, ReactNode, useState } from "react";
 import { observer } from "mobx-react";
 import { HotbarIcon } from "./hotbar-icon";
 import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { HotbarItem, HotbarStore } from "../../../common/hotbar-store";
+import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
 import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
-import { Icon } from "../icon";
-import { Badge } from "../badge";
-import { CommandOverlay } from "../command-palette";
-import { HotbarSwitchCommand } from "./hotbar-switch-command";
-import { Tooltip, TooltipPosition } from "../tooltip";
+import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
+import { HotbarSelector } from "./hotbar-selector";
 
 interface Props {
   className?: IClassName;
@@ -38,36 +35,67 @@ export class HotbarMenu extends React.Component<Props> {
     return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null;
   }
 
-  previous() {
-    HotbarStore.getInstance().switchToPrevious();
-  }
+  onDragEnd(result: DropResult) {
+    const { source, destination } = result;
 
-  next() {
-    HotbarStore.getInstance().switchToNext();
-  }
+    if (!destination) {  // Dropped outside of the list
+      return;
+    }
 
-  openSelector() {
-    CommandOverlay.open(<HotbarSwitchCommand />);
+    const from = parseInt(source.droppableId);
+    const to = parseInt(destination.droppableId);
+
+    HotbarStore.getInstance().restackItems(from, to);
   }
 
   renderGrid() {
-    if (!this.hotbar.items.length) return;
-
     return this.hotbar.items.map((item, index) => {
       const entity = this.getEntity(item);
 
       return (
-        <HotbarCell key={index} index={index}>
-          {entity && (
-            <HotbarIcon
-              key={index}
+        <Droppable droppableId={`${index}`} key={index}>
+          {(provided, snapshot) => (
+            <HotbarCell
               index={index}
-              entity={entity}
-              isActive={this.isActive(entity)}
-              onClick={() => entity.onRun(catalogEntityRunContext)}
-            />
+              key={entity ? entity.getId() : `cell${index}`}
+              innerRef={provided.innerRef}
+              className={cssNames({ isDraggingOver: snapshot.isDraggingOver })}
+              {...provided.droppableProps}
+            >
+              {entity && (
+                <Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0}>
+                  {(provided, snapshot) => {
+                    const style = {
+                      zIndex: defaultHotbarCells - index,
+                      position: "absolute",
+                      ...provided.draggableProps.style,
+                    } as React.CSSProperties;
+
+                    return (
+                      <div
+                        key={item.entity.uid}
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        style={style}
+                      >
+                        <HotbarIcon
+                          key={index}
+                          index={index}
+                          entity={entity}
+                          isActive={this.isActive(entity)}
+                          onClick={() => entity.onRun(catalogEntityRunContext)}
+                          className={cssNames({ isDragging: snapshot.isDragging })}
+                        />
+                      </div>
+                    );
+                  }}
+                </Draggable>
+              )}
+              {provided.placeholder}
+            </HotbarCell>
           )}
-        </HotbarCell>
+        </Droppable>
       );
     });
   }
@@ -76,48 +104,46 @@ export class HotbarMenu extends React.Component<Props> {
     const { className } = this.props;
     const hotbarStore = HotbarStore.getInstance();
     const hotbar = hotbarStore.getActive();
-    const activeIndexDisplay = hotbarStore.activeHotbarIndex + 1;
 
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
         <div className="HotbarItems flex column gaps">
-          {this.renderGrid()}
-        </div>
-        <div className="HotbarSelector flex align-center">
-          <Icon material="play_arrow" className="previous box" onClick={() => this.previous()} />
-          <div className="box grow flex align-center">
-            <Badge id="hotbarIndex" small label={activeIndexDisplay} onClick={() => this.openSelector()} />
-            <Tooltip
-              targetId="hotbarIndex"
-              preferredPositions={TooltipPosition.TOP}
-            >
-              {hotbar.name}
-            </Tooltip>
-          </div>
-          <Icon material="play_arrow" className="next box" onClick={() => this.next()} />
+          <DragDropContext onDragEnd={this.onDragEnd}>
+            {this.renderGrid()}
+          </DragDropContext>
         </div>
+        <HotbarSelector hotbar={hotbar}/>
       </div>
     );
   }
 }
 
-interface HotbarCellProps {
+interface HotbarCellProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   index: number;
+  innerRef?: React.LegacyRef<HTMLDivElement>;
 }
 
-function HotbarCell(props: HotbarCellProps) {
+function HotbarCell({ innerRef, children, className, ...rest }: HotbarCellProps) {
   const [animating, setAnimating] = useState(false);
   const onAnimationEnd = () => { setAnimating(false); };
-  const onClick = () => { setAnimating(true); };
+  const onClick = () => {
+    if (className.includes("isDraggingOver")) {
+      return;
+    }
+
+    setAnimating(true);
+  };
 
   return (
     <div
-      className={cssNames("HotbarCell", { animating })}
+      className={cssNames("HotbarCell", { animating }, className)}
       onAnimationEnd={onAnimationEnd}
       onClick={onClick}
+      ref={innerRef}
+      {...rest}
     >
-      {props.children}
+      {children}
     </div>
   );
 }

src/renderer/components/hotbar/hotbar-selector.scss

@@ -0,0 +1,36 @@
+.HotbarSelector {
+  height: 26px;
+  background-color: var(--layoutBackground);
+  position: relative;
+
+  &:before {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    background: linear-gradient(0deg, var(--clusterMenuBackground), transparent);
+    top: -20px;
+  }
+
+  .Badge {
+    cursor: pointer;
+    background: var(--secondaryBackground);
+    width: 100%;
+    color: var(--settingsColor);
+    padding-top: 3px;
+  }
+
+  .Icon {
+    --size: 16px;
+    padding: 0 4px;
+
+    &:hover {
+      box-shadow: none;
+      background-color: transparent;
+    }
+
+    &.previous {
+      transform: rotateY(180deg);
+    }
+  }
+}

src/renderer/components/hotbar/hotbar-selector.tsx

@@ -0,0 +1,46 @@
+import "./hotbar-selector.scss";
+import React from "react";
+import { Icon } from "../icon";
+import { Badge } from "../badge";
+import { makeStyles, Tooltip } from "@material-ui/core";
+import { Hotbar, HotbarStore } from "../../../common/hotbar-store";
+import { CommandOverlay } from "../command-palette";
+import { HotbarSwitchCommand } from "./hotbar-switch-command";
+
+interface Props {
+  hotbar: Hotbar;
+}
+
+const useStyles = makeStyles(() => ({
+  arrow: {
+    color: "#222",
+  },
+  tooltip: {
+    fontSize: 12,
+    backgroundColor: "#222",
+  },
+}));
+
+
+export function HotbarSelector({ hotbar }: Props) {
+  const store = HotbarStore.getInstance();
+  const activeIndexDisplay = store.activeHotbarIndex + 1;
+  const classes = useStyles();
+
+  return (
+    <div className="HotbarSelector flex align-center">
+      <Icon material="play_arrow" className="previous box" onClick={() => store.switchToPrevious()} />
+      <div className="box grow flex align-center">
+        <Tooltip arrow title={hotbar.name} classes={classes}>
+          <Badge
+            id="hotbarIndex"
+            small
+            label={activeIndexDisplay}
+            onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
+          />
+        </Tooltip>
+      </div>
+      <Icon material="play_arrow" className="next box" onClick={() => store.switchToNext()} />
+    </div>
+  );
+}

src/renderer/components/layout/page-layout.scss

@@ -24,7 +24,7 @@
   // covers whole app view area
   &.showOnTop {
     position: fixed !important; // allow to cover ClustersMenu
-    z-index: 3;
+    z-index: 13;
     left: 0;
     top: 0;
     right: 0;