fix: calculate drop indices correctly based on content

src/container/element-list/element-list.tsx

@@ -113,45 +113,6 @@ export class ElementList extends React.Component<{}, ElementListState> {
 			draggable: false,
 			dragging: this.state.dragging,
 			children: childItems,
-			// TODO: Unify this with the event-delegation based drag/drop handling
-			onDragDrop: (e: React.DragEvent<HTMLElement>) => {
-				/* const patternId = e.dataTransfer.getData('patternId');
-
-				let draggedElement: PageElement | undefined;
-
-				if (!patternId) {
-					draggedElement = store.getDraggedElement();
-				} else {
-					const styleguide = store.getStyleguide();
-
-					if (!styleguide) {
-						return;
-					}
-
-					draggedElement = new PageElement({
-						container: slotContent,
-						contents: [],
-						parent: element,
-						pattern: styleguide.getPattern(patternId) as Pattern,
-						setDefaults: true
-					});
-				}
-
-				if (!draggedElement) {
-					return;
-				}
-
-				store.execute(
-					ElementLocationCommand.addChild({
-						parent: element,
-						child: draggedElement,
-						slotId,
-						index: 0
-					})
-				);
-
-				store.setSelectedElement(draggedElement); */
-			},
 			active: element === selectedElement && selectedSlot === slotId
 		};
 
@@ -263,13 +224,10 @@ export class ElementList extends React.Component<{}, ElementListState> {
 
 		const dropParent = getDropParent(targetElement);
 
-		const container = dropParent.getContainerById('default');
-
 		// prettier-ignore
 		const draggedElement = pattern
 			? // drag from pattern list, create new element
 			new Store.PageElement({
-					container,
 					contents: [],
 					pattern,
 					setDefaults: true
@@ -281,11 +239,15 @@ export class ElementList extends React.Component<{}, ElementListState> {
 			return;
 		}
 
+		const dropContainer = dropParent.getContainerById('default') as Store.PageElementContent;
+
 		const command = Store.ElementLocationCommand.addChild({
 			parent: dropParent,
 			child: draggedElement,
 			slotId: 'default',
-			index: calculateDropIndex({ target: dropParent, dragged: draggedElement })
+			index: isSiblingDrop
+				? calculateDropIndex({ target: targetElement, dragged: draggedElement })
+				: Math.max(dropContainer.getElements().length - 1, 0)
 		});
 
 		store.execute(command);
@@ -450,12 +412,12 @@ function calculateDropIndex(init: {
 	// The dragged element is dropped into another
 	// leaf list than it was dragged from.
 	// True for (1) new elements, (2) elements dragged to other parents
-	if (dragged.getParent() !== target.getParent()) {
+	if (dragged.getContainer() !== target.getContainer()) {
 		return newIndex;
 	}
 
 	// If the dragged element has a parent, it has an index
-	const currentIndex = dragged.getParent() ? (dragged.getIndex() as number) : -1;
+	const currentIndex = dragged.getIndex();
 
 	// The dragged element is dropped in the same leaf
 	// list as it was dragged from.

src/store/command/element-location-command.ts

@@ -183,7 +183,8 @@ export class ElementLocationCommand extends ElementCommand {
 		}
 
 		// Do not try to add an element to itself
-		if (this.element === this.parent) {
+		// or one of its children
+		if (this.element.isAncestorOf(this.parent)) {
 			return false;
 		}
 

src/store/command/element-remove-command.ts

@@ -103,8 +103,6 @@ export class ElementRemoveCommand extends ElementCommand {
 	 * @inheritDoc
 	 */
 	public undo(): boolean {
-		console.log(this);
-
 		if (!super.undo()) {
 			return false;
 		}

src/store/page-element/page-element-content.ts

@@ -44,10 +44,27 @@ export class PageElementContent {
 		});
 	}
 
+	public clone(): PageElementContent {
+		const clone = new PageElementContent({
+			elementId: this.elementId,
+			elements: this.elements.map(element => element.clone()),
+			id: this.id,
+			name: this.name
+		});
+
+		clone.getElements().forEach(element => element.setContainer(clone));
+
+		return clone;
+	}
+
 	public getElementId(): string {
 		return this.elementId;
 	}
 
+	public getElementIndex(element: PageElement): number {
+		return this.elements.indexOf(element);
+	}
+
 	public getElements(): PageElement[] {
 		return this.elements;
 	}

src/store/page-element/page-element.ts

@@ -155,11 +155,11 @@ export class PageElement {
 	 * @param index The 0-based new position within the children. Leaving out the position adds it at the end of the list.
 	 */
 	public addChild(child: PageElement, slotId: string, index: number): void {
-		const container = this.getContainerById(slotId);
-
-		if (container) {
-			container.insert({ element: child, at: index });
-		}
+		child.setParent({
+			parent: this,
+			slotId,
+			index
+		});
 	}
 
 	/**
@@ -172,22 +172,16 @@ export class PageElement {
 		delete payload.id;
 
 		const clone = new PageElement({
-			pattern: this.pattern,
-			contents: this.contents
-		});
-
-		this.contents.forEach(content => {
-			content.getElements().forEach((child, index) => {
-				clone.addChild(child.clone(), content.getId(), index);
-			});
+			container: undefined,
+			contents: this.contents.map(content => content.clone()),
+			name: this.name,
+			pattern: this.pattern
 		});
 
 		this.properties.forEach((value: Types.PropertyValue, id: string) => {
 			clone.setPropertyValue(id, value);
 		});
 
-		clone.setName(this.name);
-
 		return clone;
 	}
 
@@ -246,21 +240,17 @@ export class PageElement {
 	 * Returns the 0-based position of this element within its parent slot.
 	 * @return The 0-based position of this element.
 	 */
-	public getIndex(): number | undefined {
-		if (!this.parent || !this.container) {
-			return;
-		}
-
-		const content = this.parent.getContainerById(this.container.getId());
+	public getIndex(): number {
+		const container = this.getContainer();
 
-		if (!content) {
-			return;
+		if (!container) {
+			return -1;
 		}
 
-		return content.getElements().indexOf(this);
+		return container.getElementIndex(this);
 	}
 
-	/**
+	/**x
 	 * Returns the assigned name of the page element, initially the pattern's human-friendly name.
 	 * @return The assigned name of the page element.
 	 */
@@ -298,7 +288,6 @@ export class PageElement {
 		}
 
 		const store = ViewStore.getInstance();
-		console.log(this.container);
 		return store.getElementById(this.container.getElementId());
 	}
 
@@ -338,14 +327,16 @@ export class PageElement {
 	 * @param child The child to test.
 	 * @return Whether this element is an ancestor of the given child.
 	 */
-	public isAncestorOf(child?: PageElement): boolean {
-		if (!child) {
-			return false;
-		} else if (child === this) {
+	public isAncestorOf(child: PageElement): boolean {
+		if (child === this) {
 			return true;
-		} else {
-			return this.isAncestorOf(child.getParent());
 		}
+
+		if (child.isRoot()) {
+			return false;
+		}
+
+		return this.isAncestorOf(child.getParent() as PageElement);
 	}
 
 	/**