refactor step drag ghost image

webpack/css/global.scss

@@ -288,18 +288,6 @@ fieldset {
   top: 6.2rem;
 }
 
-// .webcam-url-input {
-//   padding-left: 4rem !important;
-// }
-
-.step-drag-ghost-image {
-  max-width: 150px;
-}
-
-.step-drag-ghost-image-big {
-  max-width: 400px;
-}
-
 h3 {
   display: inline-block;
 }

webpack/draggable/__tests__/add_ghost_image_test.ts

@@ -1,18 +0,0 @@
-import { addGhostImage } from "../add_ghost_image";
-
-describe("addGhostImage()", () => {
-  it("modifies DOM elements correctly", () => {
-    const dummyElement = document.createElement("div");
-    const fake: React.DragEvent<HTMLElement> = {
-      currentTarget: {
-        cloneNode() {
-          return dummyElement;
-        }
-      }
-    } as any;
-    const result = addGhostImage(fake);
-    expect(result.style.left).toEqual("-30000px");
-    expect(result.style.position).toEqual("absolute");
-    expect(result.style.left).toEqual("-30000px");
-  });
-});

webpack/draggable/add_ghost_image.ts

@@ -1,29 +0,0 @@
-import * as React from "react";
-
-/** Creates a "ghost image" for a React element while it is dragged.
- * Returns HTMLDOMElement of the ghost image
- */
-export function addGhostImage(
-  /** Drag event created by onDragStart() */
-  ev: React.DragEvent<HTMLElement>,
-  /** Optional CSS class to add to drag image. */
-  cssClass = "") {
-  const el = ev.currentTarget.cloneNode(true) as HTMLElement;
-  // RELEVANT READING:
-  // https://www.kryogenix.org/code/browser/custom-drag-image.html
-  cssClass && el.classList.add(cssClass);
-  el.style.left = "-30000px";
-  el.style.position = "absolute";
-  document.body.addEventListener("dragend", function () {
-    el.remove();
-  });
-  document.body.appendChild(el);
-  // Because of MS Edge.
-  // I really could'nt care less about IE, but edge seems
-  // to be OK aside from this one issue.
-  const dt = ev.dataTransfer;
-  if (dt && dt.setDragImage) {
-    dt.setDragImage(el, 0, 0);
-  }
-  return el;
-}

webpack/draggable/interfaces.ts

@@ -50,7 +50,6 @@ export interface StepDraggerProps {
   dispatch: Function;
   step: Step;
   intent: DataXferIntent;
-  ghostCss: string;
   children?: JSXChildren;
   draggerId: number;
 }

webpack/draggable/step_dragger.tsx

@@ -1,4 +1,3 @@
-import { addGhostImage } from "./add_ghost_image";
 import * as React from "react";
 import { stepPut } from "./actions";
 import { SequenceBodyItem as Step } from "farmbot";
@@ -9,8 +8,7 @@ import { DataXferIntent, StepDraggerProps } from "./interfaces";
 export const NULL_DRAGGER_ID = 0xCAFEF00D;
 
 /** This is an event handler that:
- * 1. Adds an optional CSS class to the dragged "ghost image".
- * 2. Puts the step into the Redux store (and the drag event's dataTransfer)
+ *    Puts the step into the Redux store (and the drag event's dataTransfer)
  *    so that it can be pulled up when the "drop" event happens.
  *
  * Example usage:
@@ -22,11 +20,9 @@ export const NULL_DRAGGER_ID = 0xCAFEF00D;
  * */
 export let stepDragEventHandler = (dispatch: Function,
   step: Step,
-  ghostCss = "",
   intent: DataXferIntent,
   draggerId: number) => {
   return (ev: React.DragEvent<HTMLElement>) => {
-    addGhostImage(ev, ghostCss);
     dispatch(stepPut(step, ev, intent, draggerId));
   };
 };
@@ -34,13 +30,11 @@ export let stepDragEventHandler = (dispatch: Function,
 export function StepDragger({ dispatch,
   step,
   children,
-  ghostCss,
   intent,
   draggerId }: StepDraggerProps) {
   return <div draggable={true}
     onDragStart={stepDragEventHandler(dispatch,
       step,
-      ghostCss,
       intent,
       draggerId)} >
     {children}

webpack/sequences/all_steps.tsx

@@ -31,7 +31,6 @@ export class AllSteps extends React.Component<AllStepsProps, {}> {
           <StepDragger
             dispatch={dispatch}
             step={currentStep}
-            ghostCss="step-drag-ghost-image-big"
             intent="step_move"
             draggerId={index}>
             <div>

webpack/sequences/sequences_list.tsx

@@ -34,14 +34,13 @@ const sequenceList = (dispatch: Function) =>
           kind: "execute",
           args: { sequence_id: ts.body.id || 0 }
         }}
-        ghostCss="step-drag-ghost-image"
         intent="step_splice"
         draggerId={NULL_DRAGGER_ID}>
         <Link
           to={`/app/sequences/${urlFriendly(ts.body.name) || ""}`}
           key={uuid}
           onClick={click} >
-          <button className={css.join(" ")}>
+          <button className={css.join(" ")} draggable={true}>
             {name}
           </button>
         </Link>

webpack/sequences/step_buttons/index.tsx

@@ -24,7 +24,6 @@ export function StepButton({ children, step, color, dispatch, current }:
       <StepDragger
         dispatch={dispatch}
         step={step}
-        ghostCss="step-drag-ghost-image"
         intent="step_splice"
         draggerId={NULL_DRAGGER_ID} >
         <button