Unify/application/elements/window/draggable.js

class vector2{

	constructor( x, y ) {
	
		this.x = x;
		this.y = y;
	
	}

	x = 0;
	y = 0;

}

function delay(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}


export default class draggable{

	backfaceVisibility	 = false;

	position	= "absolute";

	zIndex;

#ifdef CLIENT

	propegateEvent		= false;

	transition			= "none";


	transform;

	width;

	height;

	x;

	y;


	transition	= "width 1s, height 1s";

	// Custom Properties
	draggable			= true;

	grab				= false;

	lastPosition;

	currentPosition		= new vector2( 0, 0 );

	grabPosition		= new vector2( 0, 0 );


	state				= "normal";


	click() {

		this.grab = false;

	}

	mouseout() {

		//this.grab = false;

	}


	async render( delta ) {

		#ifdef ANDROID

			this.transform 			= "translate(0px, 0px)";

			return true;

		#endif

		if( this.draggable ) {

			if(!this.lastPosition) {

				return false;

			}

			var x = 	this.lastPosition.x;

			var y =  	this.lastPosition.y;

		
			if( this.grab ) {


				var x = this.mouse.x - this.grabPosition.x + this.lastPosition.x;

				var y = this.mouse.y - this.grabPosition.y + this.lastPosition.y;


			}

			this.transform 			= "translate3d("+ x+"px, "+ y +"px, 0)";

			this.currentPosition	= new vector2( x , y );

			if( this.updateBackgroundCoordinates ) {

				this.updateBackgroundCoordinates();

			}

		}
	}

	maximize() {

		this.restorePosition	= this.transform;

		this.width				= "100vw";

		this.height				= "100vh"

		this.draggable 			= false;

		this.transition			= "transform 0.1s, width 0.1s, height 0.1s";

		this.transform 			= "translate3d(0px, 0px)";

		this.state				= "maximized"

		//this.lastPosition		= new vector2( 0,0 );

	}

	async restore() {

		this.width	= "";

		this.height	= "";

		this.draggable 			= true;

		await delay(1000);

		this.transition			= "";

	}



	center() {

		this.element.style.zIndex	= document.globalZIndex++;
		
		var domWindow		= document.defaultView;

		this.windowHeight	= domWindow.innerHeight;

		this.windowWidth	= domWindow.innerWidth;


		var boundBox		= this.element.getBoundingClientRect();


		var width				= boundBox.width;

		var height			= boundBox.height;


		var x						= this.windowWidth / 2 - ( width / 2 );

		var y						= this.windowHeight / 2 - ( height / 2 ); 


		this.lastPosition		= new vector2( Math.round(x), Math.round(y) );

	}

	mouseup() {
	
		this.grab 					= false;

		this.border			= "none"

		var boundBox				= this.defaultElement.getBoundingClientRect();

		var x 						= boundBox.x;

		var y 						= boundBox.y;

		this.lastPosition			= this.currentPosition;



	}
	
	async mousedown( event ) {

		if( event.button != 0 ) {

			return false;

		}

		if( !this.lastPosition ) {

			this.lastPosition			= this.currentPosition;

		}

		this.element.style.zIndex	= document.globalZIndex++;

		this.grab			= true;

		this.grabPosition	= this.mouse;

	}

#endif

}