CocoRoboDesktop/kityminder-editor/bower_components/kity/demo/ps-pen/demo.controller.js

/*
 * PS 钢笔工具 控制逻辑
 */
define( function ( require, exports, module ) {

    // 资源引入
    var Bezier = require( "graphic/bezier" ),
        Color = require( "graphic/color" ),
        Pen = require( "graphic/pen" ),
        Utils = require( "core/utils" ),
        Vector = require( "graphic/vector" ),
        // 引入可绘制的点集合
        PointGroup = require( "../ps-pen/demo.pointgroup" ),
        BezierPoint = require( "graphic/bezierpoint" );


    function Controller ( paper ) {

        this.paper = paper || null;
        this.bezier = null;
        this.bezierPoints = null;
        this.pointGroup = null;

        this.drawState = false;

        // 记录当前是否处于更新状态
        this.modifyState = false;

        // 记录更新状态的持久信息
        this._modifyStatus = null;

        // 允许重新拖动编辑的
        this.editable = false;

    }

    Utils.extend( Controller.prototype, {

        takeover: function ( paper ) {

            paper && ( this.paper = paper );

            initListener( this );

        },

        enableDraw: function () {
            this.drawState = true;
        },

        disableDraw: function () {
            this.drawState = false;
        },

        enableModify: function () {
            this.modifyState = true;
        },

        disableModify: function () {
            this.modifyState = false;
        },

        // 设置更新状态
        setModifyStatus: function ( status ) {
            this._modifyStatus = status;
        },

        clearModifySatus: function () {
            this._modifyStatus = null;
        },

        getModifyStatus: function () {
            return this._modifyStatus;
        },

        enableEdit: function () {
            this.editable = true;
        },

        disableEdit: function () {
            this.editable = false;
        },

        setBezier: function ( bezier ) {

            this.bezier = bezier;
            this.bezierPoints = [];

            return this;

        },

        getBezier: function () {

            return this.bezier;

        },

        setPointGroup: function ( pointGroup ) {

            this.pointGroup = pointGroup;

            return this;

        },

        getPointGroup: function () {

            return this.pointGroup;

        },

        addPoint: function ( point ) {

            this.bezierPoints && this.bezierPoints.push( point );

            return this;

        },

        getPoints: function () {

            return this.bezierPoints;

        }

    } );


    return Controller;

    // 私有方法实现

    // 初始化交互事件监听器
    function initListener ( controller ) {

            // 记录是否允许所有事件的监听
        var isBegin = false,
            // 记录是否需要更新曲线
            isUpdateable = false,
            paper = controller.paper,
            currentBezier = null,
            currentPointGroup = null;

        paper.on( "mousedown", function ( e ) {

            var point = null;

            e.preventDefault();

            if ( !controller.drawState ) {
                return;
            }

            // 切换监听状态
            if ( !isBegin ) {
                isBegin = true;
                currentBezier = createBezier( paper );
                currentPointGroup = createPointGroup( paper );

                listenPointGroup( currentPointGroup, controller );

                //设置当前controller处理的贝塞尔曲线
                controller.setBezier( currentBezier );
                controller.setPointGroup( currentPointGroup );
            }

            isUpdateable = false;

            // 获取当前鼠标点击在用户坐标系上的映射点
            point = e.getPosition();

            updateBezier( controller, point );

        } );

        // 绘制时 更新控制点
        paper.on( "mousemove", function ( e ) {

            var point = null,
                bezierPoint = null;

            e.preventDefault();

            if ( !controller.drawState ) {
                return;
            }

            if ( !isBegin || isUpdateable ) {
                return;
            }

            point = e.getPosition();

            currentBezier.getLastPoint().setForward( point.x, point.y );
            currentPointGroup.getLastPoint().setForward( point.x, point.y );

        } );

        // 编辑时拖动更新
        paper.on( "mousemove", function ( e ) {

            var mousePoint = null,
                currentPoint = null,
                pointIndex = -1;

            e.preventDefault();

            // 不可编辑
            if ( !controller.editable ) {
                return;
            }

            mousePoint = e.getPosition();
            pointIndex = controller._modifyStatus.pointIndex;
            currentPoint = currentPointGroup.getPointByIndex( pointIndex );

            switch ( controller._modifyStatus.pointType ) {

                case PointGroup.TYPE_FORWARD:
                    currentPoint.setForward( mousePoint.x, mousePoint.y );
                    currentBezier.getPoint( pointIndex ).setForward( mousePoint.x, mousePoint.y );
                    break;

                case PointGroup.TYPE_BACKWARD:
                    currentPoint.setBackward( mousePoint.x, mousePoint.y );
                    currentBezier.getPoint( pointIndex ).setBackward( mousePoint.x, mousePoint.y );
                    break;

                case PointGroup.TYPE_VERTEX:
                    currentPoint.moveTo( mousePoint.x, mousePoint.y );
                    currentBezier.getPoint( pointIndex ).moveTo( mousePoint.x, mousePoint.y );
                    break;

            }


        } );

        paper.on( "mouseup", function () {

            if ( controller.drawState ) {

                isUpdateable = isBegin;

            } else if ( controller.modifyState ) {

                controller.disableEdit();
                // 清空状态
                controller.clearModifySatus();

            }

        } );

    }

    // 画贝塞尔曲线
    function updateBezier ( controller, point ) {

        var bezierPoint = new BezierPoint( point.x, point.y, true );

        //添加可绘制控制点
        controller.getPointGroup().addPoint( bezierPoint.clone() );

        //记录贝塞尔的控制点
        controller.addPoint( bezierPoint );

        //更新贝塞尔曲线的点
        controller.getBezier().setPoints( controller.getPoints() );


    }

    // 创建一个新的贝塞尔
    function createBezier ( paper ) {

        var bezier = new Bezier();

        bezier.stroke( new Pen( new Color( "black" ) ).setWidth( 100 ) );
        paper.addShape( bezier );

        return bezier;

    }

    function createPointGroup ( paper ) {

        var pointGroup = new PointGroup();

        paper.addShape( pointGroup );

        return pointGroup;

    }

    // 监听点上的事件
    function listenPointGroup ( pointGroup, controller ) {

        pointGroup.on( "pointmousedown", function ( e ) {

            var currentPoint = null,
                currentType = null,
                index = -1,
                vertexWidth = 0;

            // 非modify状态， 不处理
            if ( !controller.modifyState ) {
                return;
            }

            index = e.targetPointIndex;
            currentType = e.targetPointType;
            currentPoint = pointGroup.getPointByIndex( index );

            // 获取到当前顶点的宽度
            vertexWidth = pointGroup.getVertexWidth();

            // 检查当前点击的点的控制点是否和顶点重叠
            // 如果重叠了， 则认为点击是发生在forward的控制点上的
            if ( currentType === PointGroup.TYPE_VERTEX ) {

                //更新点类型
                switch ( checkOverlapping( currentPoint, vertexWidth ) ) {

                    case 1:
                        currentType = PointGroup.TYPE_FORWARD;
                        break;

                    case 2:
                        currentType = PointGroup.TYPE_BACKWARD
                        break;

                }

            }


            // 运行更新
            controller.enableEdit();

            controller.setModifyStatus( {
                pointType: currentType,
                pointIndex: index
            } );

            //更新当前的点
            this.selectPoint( index );

        } );

    }

    // 工具方法， 检测贝塞尔曲线上的点的控制点和顶点是否重叠在一起
    // 参数distance控制了点之间的最小距离， 如果不大于该距离， 则认为是重叠的
    // 返回值有： 0： 无重叠， 1： forward重叠， 2： backward重叠
    function checkOverlapping ( bezierPoint, distance ) {

        var forward = bezierPoint.getForward(),
            backward = bezierPoint.getBackward(),
            vertex = bezierPoint.getVertex();

        if ( Vector.fromPoints( forward, vertex ).length() <= distance ) {

            // forward重叠
            return 1;

        } else if ( Vector.fromPoints( backward, vertex ).length() <= distance ) {

            // backward重叠
            return 2;

        }

        // 无重叠
        return 0;

    }


} );