fix: handle dragging while editing better

src/component/container/element-list.tsx

@@ -69,6 +69,7 @@ export class ElementList extends React.Component<{}, ElementListState> {
 				title: '(invalid)',
 				id: uuid.v4(),
 				children: [],
+				draggable: false,
 				dragging: this.state.dragging
 			};
 		}
@@ -88,8 +89,9 @@ export class ElementList extends React.Component<{}, ElementListState> {
 
 		return {
 			title: element.getName(),
+			draggable: !element.isNameEditable(),
 			dragging: this.state.dragging,
-			editable: element.getNameEditable(),
+			editable: element.isNameEditable(),
 			id: element.getId(),
 			children: [...slots, ...defaultSlotItems],
 			active: element === selectedElement && !store.getSelectedSlotId()
@@ -166,14 +168,23 @@ export class ElementList extends React.Component<{}, ElementListState> {
 		const element = elementFromTarget(e.target);
 		const store = Store.getInstance();
 		const label = above(e.target, `[${ElementAnchors.label}]`);
+
+		console.log(element, label);
+
+		if (!element) {
+			return;
+		}
+
 		e.stopPropagation();
 
-		if (element && store.getSelectedElement() === element && label) {
+		if (store.getSelectedElement() === element && label) {
 			store.setNameEditableElement(element);
 		}
 
-		store.setSelectedElement(element);
-		store.setElementFocussed(true);
+		if (store.getSelectedElement() !== element) {
+			store.setSelectedElement(element);
+			store.setElementFocussed(true);
+		}
 	}
 
 	private handleContextMenu(e: React.MouseEvent<HTMLElement>): void {
@@ -195,15 +206,21 @@ export class ElementList extends React.Component<{}, ElementListState> {
 		this.setState({ dragging: true });
 		const element = elementFromTarget(e.target);
 
-		if (element) {
-			Store.getInstance().setDraggedElement(element);
-			const dragImg = document.createElement('div');
-			dragImg.textContent = element.getName();
-			dragImg.setAttribute('style', DRAG_IMG_STYLE);
-			document.body.appendChild(dragImg);
-			e.dataTransfer.setDragImage(dragImg, 75, 15);
-			this.dragImg = dragImg;
+		if (!element) {
+			return;
+		}
+
+		if (element.isNameEditable()) {
+			return;
 		}
+
+		Store.getInstance().setDraggedElement(element);
+		const dragImg = document.createElement('div');
+		dragImg.textContent = element.getName();
+		dragImg.setAttribute('style', DRAG_IMG_STYLE);
+		document.body.appendChild(dragImg);
+		e.dataTransfer.setDragImage(dragImg, 75, 15);
+		this.dragImg = dragImg;
 	}
 
 	private handleDrop(e: React.DragEvent<HTMLElement>): void {
@@ -342,6 +359,7 @@ export class ElementList extends React.Component<{}, ElementListState> {
 
 export interface ElementNodeProps extends ElementProps {
 	children?: ElementNodeProps[];
+	draggable: boolean;
 	dragging: boolean;
 	id: string;
 }

src/component/container/element-wrapper.tsx

@@ -10,6 +10,7 @@ export interface ElementWrapperState {
 
 export interface ElementWrapperProps {
 	active?: boolean;
+	draggable: boolean;
 	dragging: boolean;
 	editable?: boolean;
 	id: string;
@@ -109,7 +110,7 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 			<Element
 				active={active}
 				dragging={this.props.dragging}
-				draggable
+				draggable={this.props.draggable}
 				editable={this.props.editable}
 				onChange={e => this.handleChange(e)}
 				onClick={e => this.handleClick(e)}

src/lsg/patterns/element/index.tsx

@@ -123,12 +123,6 @@ const StyledElementLabel = styled(div)`
 			: ''};
 `;
 
-const LabelContent = styled.div`
-	box-sizing: border-box;
-	padding: ${getSpace(Size.XS)}px ${getSpace(Size.L)}px ${getSpace(Size.XS)}px
-		${getSpace(Size.XXL)}px;
-`;
-
 const placeholderDiv = tag('div').omit(['highlightPlaceholder']);
 const StyledPlaceholder = styled(placeholderDiv)`
 	position: relative;
@@ -201,6 +195,13 @@ const StyledIcon = styled(Icon)`
 	${(props: StyledIconProps) => (props.active ? `fill: ${colors.blue20.toString()}` : '')};
 `;
 
+const LabelContent = styled.div`
+	box-sizing: border-box;
+	width: 100%;
+	margin-left: ${getSpace(Size.XXL) - 3}px;
+	padding: ${getSpace(Size.XS)}px ${getSpace(Size.L)}px ${getSpace(Size.XS)}px 3px;
+`;
+
 const StyledSeamlessInput = styled.input`
 	box-sizing: border-box;
 	width: 100%;
@@ -264,7 +265,6 @@ const Element: React.StatelessComponent<ElementProps> = props => (
 			/>
 		)}
 		<StyledElementLabel
-			{...{ [ElementAnchors.label]: true }}
 			active={props.active}
 			highlight={props.highlight}
 			onContextMenu={props.onContextMenu}
@@ -287,9 +287,15 @@ const Element: React.StatelessComponent<ElementProps> = props => (
 					/>
 				)}
 			{props.editable ? (
-				<SeamlessInput value={props.title} onChange={props.onChange} autoFocus autoSelect />
+				<SeamlessInput
+					{...{ [ElementAnchors.label]: true }}
+					value={props.title}
+					onChange={props.onChange}
+					autoFocus
+					autoSelect
+				/>
 			) : (
-				<LabelContent>{props.title}</LabelContent>
+				<LabelContent {...{ [ElementAnchors.label]: true }}>{props.title}</LabelContent>
 			)}
 		</StyledElementLabel>
 		{props.children && (

src/store/page/page-element.ts

@@ -272,14 +272,6 @@ export class PageElement {
 		return this.name;
 	}
 
-	/**
-	 * Returns the editable state of the element's name
-	 * @return The editable state
-	 */
-	public getNameEditable(): boolean {
-		return this.nameEditable;
-	}
-
 	/**
 	 * Returns the page this element belongs to.
 	 * @return The page this element belongs to.
@@ -378,6 +370,14 @@ export class PageElement {
 		return parent ? parent.isAncestorOf(this) : false;
 	}
 
+	/**
+	 * Returns the editable state of the element's name
+	 * @return The editable state
+	 */
+	public isNameEditable(): boolean {
+		return this.nameEditable;
+	}
+
 	/**
 	 * Returns whether this page element is the page's root element (i.e. it has no parent).
 	 * @return Whether this page element is the root element.