joplin/ElectronClient/app/gui/VerticalResizer.jsx

const React = require("react");
const electron = require('electron');

class VerticalResizer extends React.PureComponent {

	constructor() {
		super();

		this.state = {
			parentRight: 0,
			parentHeight: 0,
			parentWidth: 0,
			drag: {
				startX: 0,
				lastX: 0,
			},
		};

		this.onDragStart = this.onDragStart.bind(this);
		this.onDrag = this.onDrag.bind(this);
		this.onDragEnd = this.onDragEnd.bind(this);
		this.document_onDragOver = this.document_onDragOver.bind(this);
	}

	document_onDragOver(event) {
		// This is just to prevent the cursor from changing to a "+" as it's dragged
		// over other elements. With this it stays a normal cursor.
		event.dataTransfer.dropEffect = 'none';
	}

	onDragStart(event) {
		document.addEventListener('dragover', this.document_onDragOver)

        event.dataTransfer.dropEffect= 'none';

        const cursor = electron.screen.getCursorScreenPoint();
        
		this.setState({
			drag: {
				startX: cursor.x,
				lastX: cursor.x,
			}
		});

		if (this.props.onDragStart) this.props.onDragStart({});
	}

	onDrag(event) {
		// If we got a drag event with no buttons pressed, it's the last drag event
		// that we should ignore, because it's sometimes use to put the dragged element
		// back to its original position (if there was no valid drop target), which we don't want.
		// Also if clientX, screenX, etc. are 0, it's also the last event and we want to ignore these buggy values.
		// const e = event.nativeEvent;
		// if (!e.buttons || (!e.clientX && !e.clientY && !e.screenX && !e.screenY)) return;

		const cursor = electron.screen.getCursorScreenPoint();
		const newX = cursor.x;
		const delta = newX - this.state.drag.lastX;
		if (!delta) return;

		this.setState({
			drag: Object.assign({}, this.state.drag, { lastX: newX }),
		}, () => {
			this.props.onDrag({ deltaX: delta });
		});
	}

	onDragEnd(event) {
		document.removeEventListener('dragover', this.document_onDragOver);
	}

	componentWillUnmount() {
		document.removeEventListener('dragover', this.document_onDragOver);
	}

	render() {
		const debug = false;

		const rootStyle = Object.assign({}, {
			height: '100%',
			width:5,
			borderColor:'red',
			borderWidth: debug ? 1 : 0,
			borderStyle:'solid',
			cursor: 'col-resize',
			boxSizing: 'border-box',
			opacity: 0,
		}, this.props.style);

		return (
			<div
				style={rootStyle}
				draggable={true}
				onDragStart={this.onDragStart}
				onDrag={this.onDrag}
				onDragEnd={this.onDragEnd}
			/>
		);
	}
}

module.exports = VerticalResizer;