230 lines
2.8 KiB
JavaScript
230 lines
2.8 KiB
JavaScript
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
|
|
|
|
}
|
|
|