mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-12 08:54:00 +02:00
103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
/* eslint-disable enforce-react-hooks/enforce-react-hooks */
|
|
|
|
const React = require('react');
|
|
const { bridge } = require('electron').remote.require('./bridge');
|
|
|
|
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 = bridge().screen().getCursorScreenPoint();
|
|
|
|
this.setState({
|
|
drag: {
|
|
startX: cursor.x,
|
|
lastX: cursor.x,
|
|
},
|
|
});
|
|
|
|
if (this.props.onDragStart) this.props.onDragStart({});
|
|
}
|
|
|
|
onDrag() {
|
|
// 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 = bridge().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() {
|
|
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;
|