12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- 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%';
- }
- }
|