refactor step drag ghost image
This commit is contained in:
parent
6f12e15b3a
commit
f6878b6ab4
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
});
|
||||
});
|
|
@ -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;
|
||||
}
|
|
@ -50,7 +50,6 @@ export interface StepDraggerProps {
|
|||
dispatch: Function;
|
||||
step: Step;
|
||||
intent: DataXferIntent;
|
||||
ghostCss: string;
|
||||
children?: JSXChildren;
|
||||
draggerId: number;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue