import React from 'react';
import './assets/styles';
import TextDrag from '../../../../components/TextDrag';

class LoginPage extends React.Component{
    constructor(props){
        super(props);
        this.state={
            top:(window.innerHeight - 220) /2,
            left:(window.innerWidth - 320) /2
        };
    }

    render(){
        const top= this.state.top;
        const left = this.state.left;
        return (
            <div className = 'logpad' style={{'top': top+'px', 'left':left+'px'}} >
                <TextDrag
                    display = {this.props.display}
                    top={50}
                    left={50}
                />
            </div>);
    }
}


export default LoginPage;

import React from 'react'
import './assets/styles'

class TextDrag extends React.Component {

    constructor(props){
        super(props);
        this.state={
            display: 'block',
            cursor:'pointer',
            clientx: null,
            clienty: null,
            isDragging: false//設(shè)置下是不是在drag狀態(tài)
        };
        this.handleClick = this.handleClick.bind(this);
        //進(jìn)入title的時候把鼠標(biāo)指針換一下
        this.handleMouseEnter = this.handleMouseEnter.bind(this);
        this.handleMouseLeave = this.handleMouseLeave.bind(this);
        //拖拽
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.handleMouseUp = this.handleMouseUp.bind(this);
    }
    handleMouseEnter(e){
        this.setState({cursor:'move'});
    }
    handleMouseLeave(e){
        this.setState({cursor:'pointer',isDragging:false});
    }
    handleClick(){
        var newS = false;
        this.setState({display: newS});
    }
    handleMouseDown(e){
        this.setState({
            relativex:e.pageX - this.props.left,
            relativey:e.pageY - this.props.top,
            isDragging:true});
    }
    handleMouseMove(e){
        if(this.state.isDragging === true){
            const maxX = window.innerWidth - 320;
            const maxY = window.innerHeight - 220;
            var moveX= e.pageX - this.state.relativex;
            var moveY = e.pageY - this.state.relativey;
            //用來限制，不讓登錄框超過邊界
            moveX = Math.min(Math.max(0,moveX),maxX);
            moveY = Math.min(Math.max(0,moveY),maxY);
        }else{
            return false;
        }
    }
    handleMouseUp(e){
        e.preventDefault();
        this.setState({
            isDragging:false,
            clientx:null,
            clienty:null
        });

    }
    render(){
        const cursor = this.state.cursor;
        return(
            <div className = 'title' style={{'cursor':cursor}} onMouseEnter ={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onMouseDown={this.handleMouseDown} onMouseMove = {this.handleMouseMove} onMouseUp={this.handleMouseUp}>
                <h4>登錄</h4>
                <div className='delete' onClick = {this.handleClick}>X</div>
            </div>);
    }
}

export default TextDrag;