LaserPen.js 6.6 KB
//*
// 激光笔模块
// */
import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
// import DrawTool from "./DrawTool";

let loger = Loger.getLoger('PC-LaserPen');
// let _drawTool;
class LaserPen extends Ape {
    constructor() {
        super();
        ClassDataProxy.isLaser = false;
        this.laserPenInfo;
        this.laserBoardContent;
        this.laserBoardWidth=0;
        this.laserBoardHeight=0;
        this.scroolTop = 0;
        this.scroolLeft = 0;
        this.laserBoardTop = 0;
        this.laserBoardLeft = 0;
        this.laserGrou=[];
        this.init();
        this.addEvent();
    }
    init(){
        this.laserBoardContent = $(".laserBoard");
        // _drawTool=new DrawTool();
    }
    addEvent(){
        $(".laserBoard").on('mousemove', this._laserMoveHandler.bind(this));
        xdysdk.on("cursor_update", this._laserUpdateHanlder.bind(this));
        $(".laserPen").on("click", this._laserPenHandler.bind(this));//激光笔
    }
    setCanvasSize(_data) {
        if (this.laserBoardContent) {
            //文档的尺寸已经更改,需要更新laserBoard大小
            this.laserBoardWidth = _data.width;
            this.laserBoardHeight = _data.height;
            this.laserBoardContent[0].width = this.laserBoardWidth;
            this.laserBoardContent[0].height = this.laserBoardHeight;
            this.laserBoardTop = this.laserBoardContent.offset().top - this.scroolTop;
            this.laserBoardLeft = this.laserBoardContent.offset().left - this.scroolLeft;
            this._startLaserDraw(this.laserreceiveData);
        }
    }
    _laserUpdateHanlder(_data){
        if(_data.duration!==0){
            if(ClassDataProxy.userRole==ClassDataProxy.USER_NOTMAL||ClassDataProxy.userRole==ClassDataProxy.USER_INVISIBLE){
                $(".laserBoard").css("z-index","1");
                $(".laserRed").show();
                //console.log("1111111111",$(".laserBoard").css("z-index")==1);
                //console.log("2222222222",ClassDataProxy.isDraw==true);
                //console.log("zzzzzzzzzz",$(".laserBoard").css("z-index")==1&&ClassDataProxy.isDraw==true);
                if( $(".laserBoard").css("z-index")==1&&ClassDataProxy.isDraw==true){
                    $(".pencil").click(function () {
                        $(".laserBoard").css("z-index","-1");
                        ClassDataProxy.isDraw=true
                        $(".canvasContent").css("cursor","url(images/tool/penciling.png),crosshair");
                        // _drawTool._pencilHandler();
                    })
                }
            }
            // console.log("接收激光笔数据===",_data);
            let duration=(_data.duration)*1000;
            // clearTimeout(durId);
            let that=this;
            let laserannotaionItems = _data.pointGroup;
            //清除重绘制数据
            that.laserreceiveData = [];
            //本地储存一份数据
            if (laserannotaionItems && laserannotaionItems.length > 0) {
                for (let i = 0; i < laserannotaionItems.length; i++) {
                    that.laserreceiveData.push(laserannotaionItems[i]);
                }
            }
            //绘制全部数据
            that._startLaserDraw(laserannotaionItems);
        }
        else if (_data.duration==0){
            $(".laserBoard").css("z-index","-1");
            $(".laserRed").hide();
        }

    }
    _startLaserDraw(_data){
        if (_data && _data.length > 0) {
            for (let i = 0; i < _data.length; i++) {
                let item = _data[i];
                this._drawLaser(item);
            }
        }
    }
    _drawLaser(_data){
        let pointGroup = _data;
        if (pointGroup) {
            let point = this.xyFromPer(pointGroup.w, pointGroup.h);
            // $(".laserRed").show();
            $(".laserRed").css({
                left:point.x,
                top:point.y
            })
        }
    }
    _laserPenHandler(){
        if(ClassDataProxy.isDraw==true){
            ClassDataProxy.isDraw=false;
        }
        $(".toolColor").css("display", "none");
        $(".laserBoard").css("z-index","1");
        ClassDataProxy.isLaser = !ClassDataProxy.isLaser;
        if (ClassDataProxy.isLaser) {
            // $(".laserRed").show();
            $(".laserBoard").css({"cursor":"url(images/tool/pen.png),crosshair"});
        } else {
            $(".laserBoard").css("cursor", "default");
            $(".canvasContent").css("cursor", "default");
            let paramInfo = {
                "pointGroup": [],//有多个坐标点组成
                "duration":0  //多长时间发一次数据
            };
            xdysdk.api("sendInsertCursor", paramInfo);

        }
        this.laserPenInfo={
            "action": "laserPen", "isLaser": ClassDataProxy.isLaser
        };
        this._laserPenChangeHandler(this.laserPenInfo);
    }
    _laserPenChangeHandler(_data){
        switch (_data.action) {
            case  "laserPen":
                //激光笔
                ClassDataProxy.isLaser = _data.isLaser;
                break;
            default :
                break
        }
    }
    _laserMoveHandler(evt){
        this.laserGrou=[];
        if (ClassDataProxy.isLaser){
            let toX = evt.clientX - this.laserBoardLeft;
            let toY = evt.clientY - this.laserBoardTop;
            this.laserGrou.push(this.xyToPer(Math.round(toX), Math.round(toY)));
            let that=this;
            that._sendLaser();
        }
    }
    _sendLaser(){
        if (this.laserGrou.length >= 1) {
            let paramInfo = {
                "pointGroup": this.laserGrou,//有多个坐标点组成
                "duration":3  //多长时间发一次数据
            };
            xdysdk.api("sendInsertCursor", paramInfo);
            this.laserGrou=[];
        }
    }
    //把X Y坐标转换为相对laserBoard宽度的百分比
    xyToPer(x, y) {
        let recordPencilObject = {};
        recordPencilObject.w = parseInt(x / this.laserBoardWidth * 10000) / 100;
        recordPencilObject.h = parseInt(y / this.laserBoardWidth * 10000) / 100;
        //loger.log("xyToPer",recordPencilObject);
        return recordPencilObject;
    }
    xyFromPer(w, h) {
        let xyObj = {};
        xyObj.x = Math.round((w * this.laserBoardWidth) / 100) ;//加0.5偏移 平滑
        xyObj.y = Math.round((h * this.laserBoardWidth ) / 100);
        //loger.log("xyFromPer",xyObj);
        return xyObj;
    }
}
LaserPen.prototype.LASER_PEN_CHANGE = LaserPen.LASER_PEN_CHANGE = "laser_pen_change";
export default LaserPen;