feat: add drag and drop to element-list elements

meetalva · Dec 14, 2017 · 3996f36 · 3996f36
1 parent b0ad316
commit 3996f36
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/src/component/container/elementWrapper.tsx b/src/component/container/elementWrapper.tsx
@@ -12,6 +12,7 @@ export interface ElementWrapperProps {
 	open?: boolean;
 	title: string;
 	handleClick?: React.MouseEventHandler<HTMLElement>;
+	handleDragStart?: React.DragEventHandler<HTMLElement>;
 	handleDragDrop?: React.DragEventHandler<HTMLElement>;
 	handleDragDropForChild?: React.DragEventHandler<HTMLElement>;
 }
@@ -26,6 +27,7 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 		};
 
 		this.handleIconClick = this.handleIconClick.bind(this);
+		this.handleDragStart = this.handleDragStart.bind(this);
 		this.handleDragEnter = this.handleDragEnter.bind(this);
 		this.handleDragLeave = this.handleDragLeave.bind(this);
 		this.handleDragDrop = this.handleDragDrop.bind(this);
@@ -40,35 +42,47 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 		});
 	}
 
+	private handleDragStart(e: React.DragEvent<HTMLElement>): void {
+		this.setState({
+			highlight: true
+		});
+		this.props.handleDragStart && this.props.handleDragStart(e);
+	}
+
 	private handleDragEnter(e: React.DragEvent<HTMLElement>): void {
 		this.setState({
 			highlight: true
 		});
+		console.log('handleDragEnter');
 	}
 
 	private handleDragLeave(e: React.DragEvent<HTMLElement>): void {
 		this.setState({
 			highlight: false
 		});
+		console.log('handleDragLeave');
 	}
 
 	private handleDragDrop(e: React.DragEvent<HTMLElement>): void {
 		this.setState({
 			highlight: false
 		});
+		console.log('handleDragDrop');
 		this.props.handleDragDrop && this.props.handleDragDrop(e);
 	}
 
 	private handleDragEnterForChild(e: React.DragEvent<HTMLElement>): void {
 		this.setState({
 			highlightPlaceholder: true
 		});
+		console.log('handleDragEnterForChild');
 	}
 
 	private handleDragLeaveForChild(e: React.DragEvent<HTMLElement>): void {
 		this.setState({
 			highlightPlaceholder: false
 		});
+		console.log('handleDragLeaveForChild');
 	}
 
 	private handleDragDropForChild(e: React.DragEvent<HTMLElement>): void {
@@ -88,7 +102,9 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 				highlight={this.state.highlight}
 				highlightPlaceholder={this.state.highlightPlaceholder}
 				handleClick={handleClick}
+				draggable
 				handleIconClick={this.handleIconClick}
+				handleDragStart={this.handleDragStart}
 				handleDragEnter={this.handleDragEnter}
 				handleDragLeave={this.handleDragLeave}
 				handleDragDrop={this.handleDragDrop}

diff --git a/src/component/container/element_list.tsx b/src/component/container/element_list.tsx
@@ -45,6 +45,7 @@ export class ElementList extends React.Component<ElementListProps> {
 				key={key}
 				handleClick={item.onClick}
 				active={item.active}
+				handleDragStart={item.handleDragStart}
 				handleDragDropForChild={item.handleDragDropForChild}
 				handleDragDrop={item.handleDragDrop}
 			>
@@ -92,20 +93,42 @@ export class ElementList extends React.Component<ElementListProps> {
 			label: key,
 			value: patternPath.replace(/^.*\//, ''),
 			onClick: updatePageElement,
+			handleDragStart: (e: React.DragEvent<HTMLElement>) => {
+				console.log('this', element);
+				this.props.store.setClipboardElement(element);
+			},
 			handleDragDropForChild: (e: React.DragEvent<HTMLElement>) => {
 				const transfePatternPath = e.dataTransfer.getData('patternPath');
 				const parentElement = element.getParent();
 				if (!parentElement) {
 					return;
 				}
 
+				if (!transfePatternPath) {
+					const elementListElement = this.props.store.getClipboardElement();
+					if (elementListElement) {
+						parentElement.addChild(
+							elementListElement,
+							element.getIndex()
+						);
+					}
+					return;
+				}
+
 				parentElement.addChild(
 					new PageElement(this.props.store.getPattern(transfePatternPath)),
 					element.getIndex()
 				);
 			},
 			handleDragDrop: (e: React.DragEvent<HTMLElement>) => {
 				const transfePatternPath = e.dataTransfer.getData('patternPath');
+				if (!transfePatternPath) {
+					const elementListElement = this.props.store.getClipboardElement();
+					if (elementListElement) {
+						element.addChild(elementListElement);
+					}
+					return;
+				}
 				element.addChild(new PageElement(this.props.store.getPattern(transfePatternPath)));
 			},
 			children: items,

diff --git a/src/component/container/pattern_list.tsx b/src/component/container/pattern_list.tsx
@@ -121,7 +121,6 @@ export class PatternList extends React.Component<PatternListProps> {
 	}
 	@action
 	protected handleDragStart(e: React.DragEvent<HTMLElement>, pattern: Pattern): void {
-		console.log('asdf');
 		const data = pattern.getRelativePath();
 		e.dataTransfer.setData('patternPath', data);
 	}

diff --git a/src/lsg/patterns/element/index.tsx b/src/lsg/patterns/element/index.tsx
@@ -11,8 +11,10 @@ export interface ElementProps {
 	highlightPlaceholder?: boolean;
 	title: string;
 
+	draggable?: boolean;
 	handleClick?: React.MouseEventHandler<HTMLElement>;
 	handleIconClick?: React.MouseEventHandler<SVGSVGElement>;
+	handleDragStart?: React.DragEventHandler<HTMLElement>;
 	handleDragEnter?: React.DragEventHandler<HTMLElement>;
 	handleDragLeave?: React.DragEventHandler<HTMLElement>;
 	handleDragDrop?: React.DragEventHandler<HTMLElement>;
@@ -138,8 +140,10 @@ const Element: React.StatelessComponent<ElementProps> = props => {
 		active,
 		open,
 		highlight,
+		draggable,
 		handleClick,
 		handleIconClick,
+		handleDragStart,
 		handleDragEnter,
 		handleDragLeave,
 		handleDragDrop,
@@ -164,6 +168,8 @@ const Element: React.StatelessComponent<ElementProps> = props => {
 				onDragOver={(e: React.DragEvent<HTMLElement>) => {
 					e.preventDefault();
 				}}
+				draggable={draggable}
+				onDragStart={handleDragStart}
 				onDragEnter={handleDragEnter}
 				onDragLeave={handleDragLeave}
 				onDrop={handleDragDrop}