perf: handle highlighting ondragenter/leave instead of over

meetalva · Sep 10, 2018 · 70bf591 · 70bf591
1 parent 4f90c41
commit 70bf591
Showing 1 changed file with 42 additions and 27 deletions.
diff --git a/src/container/element-list/element-list.tsx b/src/container/element-list/element-list.tsx
@@ -116,19 +116,27 @@ export class ElementList extends React.Component {
 
 	private handleDragLeave(e: React.DragEvent<HTMLElement>): void {
 		const { store } = this.props as { store: Store.ViewStore };
+		const target = e.target as HTMLElement;
+		const isSibling = target.getAttribute(Components.ElementAnchors.placeholder) === 'true';
 		const targetElement = elementFromTarget(e.target, { sibling: false, store });
 
 		if (!targetElement) {
 			return;
 		}
 
-		Mobx.transaction(() => {
-			targetElement.setHighlighted(false);
+		targetElement.setHighlighted(false);
+		const content = targetElement.getContentBySlotType(Types.SlotType.Children);
+
+		if (content) {
+			content.setHighlighted(false);
+		}
+
+		if (isSibling) {
 			targetElement.setPlaceholderHighlighted(false);
-		});
+		}
 	}
 
-	private handleDragOver(e: React.DragEvent<HTMLElement>): void {
+	private handleDragEnter(e: React.DragEvent<HTMLElement>): void {
 		const { store } = this.props as { store: Store.ViewStore };
 
 		const target = e.target as HTMLElement;
@@ -145,35 +153,41 @@ export class ElementList extends React.Component {
 			return;
 		}
 
-		const higlightedElement = store.getHighlightedElement();
-		const placeholderHighlightedElement = store.getPlaceHolderHighhlightedElement();
-
-		const higlightedElementContent = store.getHighlightedElementContent();
 		const accepted = targetContent.accepts(draggedElement);
 
-		Mobx.transaction(() => {
-			if (!accepted) {
-				targetContent.setHighlighted(false);
-				visualTargetElement.setPlaceholderHighlighted(false);
-				return;
-			}
+		if (!accepted) {
+			return;
+		}
 
-			if (placeholderHighlightedElement) {
-				placeholderHighlightedElement.setPlaceholderHighlighted(false);
-			}
+		targetContent.setHighlighted(!isSibling);
+		visualTargetElement.setHighlighted(!isSibling);
+		visualTargetElement.setPlaceholderHighlighted(isSibling);
+	}
 
-			if (higlightedElement) {
-				higlightedElement.setPlaceholderHighlighted(false);
-			}
+	private handleDragOver(e: React.DragEvent<HTMLElement>): void {
+		const { store } = this.props as { store: Store.ViewStore };
 
-			if (higlightedElementContent) {
-				higlightedElementContent.setHighlighted(false);
-			}
+		const target = e.target as HTMLElement;
+		const isSibling = target.getAttribute(Components.ElementAnchors.placeholder) === 'true';
+		const visualTargetElement = elementFromTarget(e.target, { sibling: false, store });
 
-			e.dataTransfer.dropEffect = 'copy';
-			targetContent.setHighlighted(!isSibling);
-			visualTargetElement.setPlaceholderHighlighted(isSibling);
-		});
+		const targetContent = isSibling
+			? visualTargetElement && visualTargetElement.getContainer()
+			: elementContentFromTarget(e.target, { store });
+
+		const draggedElement = store.getDraggedElement();
+
+		if (!targetContent || !visualTargetElement || !draggedElement) {
+			return;
+		}
+
+		const accepted = targetContent.accepts(draggedElement);
+
+		if (!accepted) {
+			return;
+		}
+
+		e.dataTransfer.dropEffect = 'copy';
 	}
 
 	private handleDragStart(e: React.DragEvent<HTMLElement>): void {
@@ -377,6 +391,7 @@ export class ElementList extends React.Component {
 				onChange={e => this.handleChange(e)}
 				onClick={e => this.handleClick(e)}
 				onContextMenu={e => this.handleContextMenu(e)}
+				onDragEnter={e => this.handleDragEnter(e)}
 				onDragLeave={e => this.handleDragLeave(e)}
 				onDragOver={e => this.handleDragOver(e)}
 				onDragStart={e => this.handleDragStart(e)}