Editor: Flatten BlockListLayout into base BlockList

packages/editor/src/components/block-list/index.js

@@ -1,18 +1,278 @@
+/**
+ * External dependencies
+ */
+import {
+	findLast,
+	map,
+	invert,
+	mapValues,
+	sortBy,
+	throttle,
+	last,
+} from 'lodash';
+import classnames from 'classnames';
+import 'element-closest';
+
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { Component } from '@wordpress/element';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { getDefaultBlockName } from '@wordpress/blocks';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import BlockListLayout from './layout';
+import BlockListBlock from './block';
+import IgnoreNestedEvents from './ignore-nested-events';
+import DefaultBlockAppender from '../default-block-appender';
+
+class BlockList extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.onSelectionStart = this.onSelectionStart.bind( this );
+		this.onSelectionEnd = this.onSelectionEnd.bind( this );
+		this.onShiftSelection = this.onShiftSelection.bind( this );
+		this.setBlockRef = this.setBlockRef.bind( this );
+		this.setLastClientY = this.setLastClientY.bind( this );
+		this.onPointerMove = throttle( this.onPointerMove.bind( this ), 100 );
+		// Browser does not fire `*move` event when the pointer position changes
+		// relative to the document, so fire it with the last known position.
+		this.onScroll = () => this.onPointerMove( { clientY: this.lastClientY } );
+
+		this.lastClientY = 0;
+		this.nodes = {};
+	}
+
+	componentDidMount() {
+		window.addEventListener( 'mousemove', this.setLastClientY );
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener( 'mousemove', this.setLastClientY );
+	}
+
+	setLastClientY( { clientY } ) {
+		this.lastClientY = clientY;
+	}
+
+	setBlockRef( node, clientId ) {
+		if ( node === null ) {
+			delete this.nodes[ clientId ];
+		} else {
+			this.nodes = {
+				...this.nodes,
+				[ clientId ]: node,
+			};
+		}
+	}
+
+	/**
+	 * Handles a pointer move event to update the extent of the current cursor
+	 * multi-selection.
+	 *
+	 * @param {MouseEvent} event A mousemove event object.
+	 *
+	 * @return {void}
+	 */
+	onPointerMove( { clientY } ) {
+		// We don't start multi-selection until the mouse starts moving, so as
+		// to avoid dispatching multi-selection actions on an in-place click.
+		if ( ! this.props.isMultiSelecting ) {
+			this.props.onStartMultiSelect();
+		}
+
+		const boundaries = this.nodes[ this.selectionAtStart ].getBoundingClientRect();
+		const y = clientY - boundaries.top;
+		const key = findLast( this.coordMapKeys, ( coordY ) => coordY < y );
+
+		this.onSelectionChange( this.coordMap[ key ] );
+	}
+
+	/**
+	 * Binds event handlers to the document for tracking a pending multi-select
+	 * in response to a mousedown event occurring in a rendered block.
+	 *
+	 * @param {string} clientId Client ID of block where mousedown occurred.
+	 *
+	 * @return {void}
+	 */
+	onSelectionStart( clientId ) {
+		if ( ! this.props.isSelectionEnabled ) {
+			return;
+		}
+
+		const boundaries = this.nodes[ clientId ].getBoundingClientRect();
+
+		// Create a clientId to Y coördinate map.
+		const clientIdToCoordMap = mapValues( this.nodes, ( node ) =>
+			node.getBoundingClientRect().top - boundaries.top );
+
+		// Cache a Y coördinate to clientId map for use in `onPointerMove`.
+		this.coordMap = invert( clientIdToCoordMap );
+		// Cache an array of the Y coördinates for use in `onPointerMove`.
+		// Sort the coördinates, as `this.nodes` will not necessarily reflect
+		// the current block sequence.
+		this.coordMapKeys = sortBy( Object.values( clientIdToCoordMap ) );
+		this.selectionAtStart = clientId;
+
+		window.addEventListener( 'mousemove', this.onPointerMove );
+		// Capture scroll on all elements.
+		window.addEventListener( 'scroll', this.onScroll, true );
+		window.addEventListener( 'mouseup', this.onSelectionEnd );
+	}
+
+	/**
+	 * Handles multi-selection changes in response to pointer move.
+	 *
+	 * @param {string} clientId Client ID of block under cursor in multi-select
+	 *                          drag.
+	 */
+	onSelectionChange( clientId ) {
+		const { onMultiSelect, selectionStart, selectionEnd } = this.props;
+		const { selectionAtStart } = this;
+		const isAtStart = selectionAtStart === clientId;
+
+		if ( ! selectionAtStart || ! this.props.isSelectionEnabled ) {
+			return;
+		}
+
+		// If multi-selecting and cursor extent returns to the start of
+		// selection, cancel multi-select.
+		if ( isAtStart && selectionStart ) {
+			onMultiSelect( null, null );
+		}
+
+		// Expand multi-selection to block under cursor.
+		if ( ! isAtStart && selectionEnd !== clientId ) {
+			onMultiSelect( selectionAtStart, clientId );
+		}
+	}
+
+	/**
+	 * Handles a mouseup event to end the current cursor multi-selection.
+	 *
+	 * @return {void}
+	 */
+	onSelectionEnd() {
+		// Cancel throttled calls.
+		this.onPointerMove.cancel();
+
+		delete this.coordMap;
+		delete this.coordMapKeys;
+		delete this.selectionAtStart;
+
+		window.removeEventListener( 'mousemove', this.onPointerMove );
+		window.removeEventListener( 'scroll', this.onScroll, true );
+		window.removeEventListener( 'mouseup', this.onSelectionEnd );
+
+		// We may or may not be in a multi-selection when mouseup occurs (e.g.
+		// an in-place mouse click), so only trigger stop if multi-selecting.
+		if ( this.props.isMultiSelecting ) {
+			this.props.onStopMultiSelect();
+		}
+	}
+
+	onShiftSelection( clientId ) {
+		if ( ! this.props.isSelectionEnabled ) {
+			return;
+		}
+
+		const { selectionStartClientId, onMultiSelect, onSelect } = this.props;
+
+		if ( selectionStartClientId ) {
+			onMultiSelect( selectionStartClientId, clientId );
+		} else {
+			onSelect( clientId );
+		}
+	}
+
+	render() {
+		const {
+			blockClientIds,
+			layout,
+			isGroupedByLayout,
+			rootClientId,
+			canInsertDefaultBlock,
+		} = this.props;
+
+		let defaultLayout;
+		if ( isGroupedByLayout ) {
+			defaultLayout = layout;
+		}
+
+		const classes = classnames( 'editor-block-list__layout', {
+			[ `layout-${ layout }` ]: layout,
+		} );
+
+		return (
+			<div className={ classes }>
+				{ map( blockClientIds, ( clientId, blockIndex ) => (
+					<BlockListBlock
+						key={ 'block-' + clientId }
+						index={ blockIndex }
+						clientId={ clientId }
+						blockRef={ this.setBlockRef }
+						onSelectionStart={ this.onSelectionStart }
+						onShiftSelection={ this.onShiftSelection }
+						rootClientId={ rootClientId }
+						layout={ defaultLayout }
+						isFirst={ blockIndex === 0 }
+						isLast={ blockIndex === blockClientIds.length - 1 }
+					/>
+				) ) }
+				{ canInsertDefaultBlock && (
+					<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
+						<DefaultBlockAppender
+							rootClientId={ rootClientId }
+							lastBlockClientId={ last( blockClientIds ) }
+							layout={ defaultLayout }
+						/>
+					</IgnoreNestedEvents>
+				) }
+			</div>
+		);
+	}
+}
+
+export default compose( [
+	withSelect( ( select, ownProps ) => {
+		const {
+			getBlockOrder,
+			isSelectionEnabled,
+			isMultiSelecting,
+			getMultiSelectedBlocksStartClientId,
+			getMultiSelectedBlocksEndClientId,
+			getBlockSelectionStart,
+			canInsertBlockType,
+		} = select( 'core/editor' );
+		const { rootClientId } = ownProps;
 
-// TODO: This should be refactored to flatten BlockListLayout into this file.
-export default withSelect( ( select, ownProps ) => {
-	const { getBlockOrder } = select( 'core/editor' );
+		return {
+			blockClientIds: getBlockOrder( rootClientId ),
+			selectionStart: getMultiSelectedBlocksStartClientId(),
+			selectionEnd: getMultiSelectedBlocksEndClientId(),
+			selectionStartClientId: getBlockSelectionStart(),
+			isSelectionEnabled: isSelectionEnabled(),
+			isMultiSelecting: isMultiSelecting(),
+			canInsertDefaultBlock: canInsertBlockType( getDefaultBlockName(), rootClientId ),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const {
+			startMultiSelect,
+			stopMultiSelect,
+			multiSelect,
+			selectBlock,
+		} = dispatch( 'core/editor' );
 
-	return {
-		blockClientIds: getBlockOrder( ownProps.rootClientId ),
-	};
-} )( BlockListLayout );
+		return {
+			onStartMultiSelect: startMultiSelect,
+			onStopMultiSelect: stopMultiSelect,
+			onMultiSelect: multiSelect,
+			onSelect: selectBlock,
+		};
+	} ),
+] )( BlockList );