feat(component): elements can now be dragged to a specific position

src/component/container/elementWrapper.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 export interface ElementWrapperState {
 	open?: boolean;
 	highlight?: boolean;
+	highlightPlaceholder?: boolean;
 }
 
 export interface ElementWrapperProps {
@@ -12,6 +13,7 @@ export interface ElementWrapperProps {
 	title: string;
 	handleClick?: React.MouseEventHandler<HTMLElement>;
 	handleDragDrop?: React.DragEventHandler<HTMLElement>;
+	handleDragDropForChild?: React.DragEventHandler<HTMLElement>;
 }
 
 export class ElementWrapper extends React.Component<ElementWrapperProps, ElementWrapperState> {
@@ -27,6 +29,9 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 		this.handleDragEnter = this.handleDragEnter.bind(this);
 		this.handleDragLeave = this.handleDragLeave.bind(this);
 		this.handleDragDrop = this.handleDragDrop.bind(this);
+		this.handleDragEnterForChild = this.handleDragEnterForChild.bind(this);
+		this.handleDragLeaveForChild = this.handleDragLeaveForChild.bind(this);
+		this.handleDragDropForChild = this.handleDragDropForChild.bind(this);
 	}
 
 	private handleIconClick(): void {
@@ -54,6 +59,28 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 		this.props.handleDragDrop && this.props.handleDragDrop(e);
 	}
 
+	private handleDragEnterForChild(e: React.DragEvent<HTMLElement>): void {
+		console.log('handleDragEnterForChild');
+		this.setState({
+			highlightPlaceholder: true
+		});
+	}
+
+	private handleDragLeaveForChild(e: React.DragEvent<HTMLElement>): void {
+		console.log('handleDragLeaveForChild');
+		this.setState({
+			highlightPlaceholder: false
+		});
+	}
+
+	private handleDragDropForChild(e: React.DragEvent<HTMLElement>): void {
+		console.log('handleDragDropForChild');
+		this.setState({
+			highlightPlaceholder: false
+		});
+		this.props.handleDragDropForChild && this.props.handleDragDropForChild(e);
+	}
+
 	public render(): JSX.Element {
 		const { active, children, handleClick, title } = this.props;
 		return (
@@ -62,11 +89,15 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 				open={!this.state.open}
 				active={active}
 				highlight={this.state.highlight}
+				highlightPlaceholder={this.state.highlightPlaceholder}
 				handleClick={handleClick}
 				handleIconClick={this.handleIconClick}
 				handleDragEnter={this.handleDragEnter}
 				handleDragLeave={this.handleDragLeave}
 				handleDragDrop={this.handleDragDrop}
+				handleDragEnterForChild={this.handleDragEnterForChild}
+				handleDragLeaveForChild={this.handleDragLeaveForChild}
+				handleDragDropForChild={this.handleDragDropForChild}
 			>
 				{children}
 			</Element>

src/component/container/element_list.tsx

@@ -36,6 +36,7 @@ export class ElementList extends React.Component<ElementListProps> {
 				key={key}
 				handleClick={item.onClick}
 				active={item.active}
+				handleDragDropForChild={item.handleDragDropForChild}
 				handleDragDrop={item.handleDragDrop}
 			>
 				{item.children &&
@@ -86,6 +87,23 @@ export class ElementList extends React.Component<ElementListProps> {
 			label: key,
 			value: patternPath.replace(/^.*\//, ''),
 			onClick: updatePageElement,
+			handleDragDropForChild: (e: React.DragEvent<HTMLElement>) => {
+				console.log('handleDragDropForChild', element);
+				const transfePatternPath = e.dataTransfer.getData('patternPath');
+				const parentElement = element.getParent();
+				if (!parentElement) {
+					return;
+				}
+				console.log('parent', parentElement);
+				parentElement.getChildren().map((child: PageElement) => {
+					console.log('children', child);
+				});
+				console.log('index:', parentElement.getChildren().indexOf(element));
+				parentElement.addChild(
+					new PageElement(this.props.store.getPattern(transfePatternPath)),
+					parentElement.getChildren().indexOf(element)
+				);
+			},
 			handleDragDrop: (e: React.DragEvent<HTMLElement>) => {
 				const transfePatternPath = e.dataTransfer.getData('patternPath');
 				element.addChild(new PageElement(this.props.store.getPattern(transfePatternPath)));