You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
1.7 KiB
JavaScript
92 lines
1.7 KiB
JavaScript
2 months ago
|
export class SplitscreenManager {
|
||
|
|
|
||
|
|
constructor( editor ) {
|
||
|
|
|
||
|
|
this.editor = editor;
|
||
|
|
this.renderer = editor.renderer;
|
||
|
|
this.composer = editor.composer;
|
||
|
|
|
||
|
|
this.gutter = null;
|
||
|
|
this.gutterMoving = false;
|
||
|
|
this.gutterOffset = 0.6;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
setSplitview( value ) {
|
||
|
|
|
||
|
|
const nodeDOM = this.editor.domElement;
|
||
|
|
const rendererContainer = this.renderer.domElement.parentNode;
|
||
|
|
|
||
|
|
if ( value ) {
|
||
|
|
|
||
|
|
this.addGutter( rendererContainer, nodeDOM );
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
this.removeGutter( rendererContainer, nodeDOM );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
addGutter( rendererContainer, nodeDOM ) {
|
||
|
|
|
||
|
|
rendererContainer.style[ 'z-index' ] = 20;
|
||
|
|
|
||
|
|
this.gutter = document.createElement( 'f-gutter' );
|
||
|
|
|
||
|
|
nodeDOM.parentNode.appendChild( this.gutter );
|
||
|
|
|
||
|
|
const onGutterMovement = () => {
|
||
|
|
|
||
|
|
const offset = this.gutterOffset;
|
||
|
|
|
||
|
|
this.gutter.style[ 'left' ] = 100 * offset + '%';
|
||
|
|
rendererContainer.style[ 'left' ] = 100 * offset + '%';
|
||
|
|
rendererContainer.style[ 'width' ] = 100 * ( 1 - offset ) + '%';
|
||
|
|
nodeDOM.style[ 'width' ] = 100 * offset + '%';
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
this.gutter.addEventListener( 'mousedown', () => {
|
||
|
|
|
||
|
|
this.gutterMoving = true;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
document.addEventListener( 'mousemove', ( event ) => {
|
||
|
|
|
||
|
|
if ( this.gutter && this.gutterMoving ) {
|
||
|
|
|
||
|
|
this.gutterOffset = Math.max( 0, Math.min( 1, event.clientX / window.innerWidth ) );
|
||
|
|
onGutterMovement();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
document.addEventListener( 'mouseup', () => {
|
||
|
|
|
||
|
|
this.gutterMoving = false;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
onGutterMovement();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
removeGutter( rendererContainer, nodeDOM ) {
|
||
|
|
|
||
|
|
rendererContainer.style[ 'z-index' ] = 0;
|
||
|
|
|
||
|
|
this.gutter.remove();
|
||
|
|
this.gutter = null;
|
||
|
|
|
||
|
|
rendererContainer.style[ 'left' ] = '0%';
|
||
|
|
rendererContainer.style[ 'width' ] = '100%';
|
||
|
|
nodeDOM.style[ 'width' ] = '100%';
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|