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

/**
 * PS钢笔工具所用的表示可绘制的控制点集合对象
 */

define( function ( require, exports, module ) {

    var Utils = require( "core/utils" ),
        Rect = require( "graphic/rect" ),
        Color = require( "graphic/color" ),
        Pen = require( "graphic/pen" ),
        Line = require( "graphic/line" ),
        Circle = require( "graphic/circle" );

    var GroupUtils = {

        listenVertex: function ( point, group, index ) {

            GroupUtils.listen( PointGroup.TYPE_VERTEX, point, group, index );

        },

        listenForward: function ( point, group, index ) {

            GroupUtils.listen( PointGroup.TYPE_FORWARD, point, group, index );

        },

        listenBackward: function ( point, group, index ) {

            GroupUtils.listen( PointGroup.TYPE_BACKWARD, point, group, index );

        },

        listen: function ( pointType, point, group, index ) {

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

                group.trigger( 'pointmousedown', {
                    targetPointType: pointType,
                    targetPointIndex: index
                } );

            } );

        }

    };

    var PointGroup = require( "core/class" ).createClass( "PointGroup", {

        base: require( "graphic/group" ),

        constructor: function () {

            this.callBase();

            this.points = [];
            this.pointShapes = [];

            this.exterior = {

                vertex: {
                    width: 4 * 100,
                    height: 4 * 100
                },

                control: {

                    radius: 1.5 * 100

                },

                pen: {
                    width: 1 * 100
                }

            };

            this.handler = {
                'mousedown': [],
                'mouseup': []
            };

        },

        indexOf: function ( bezierPoint ) {

            var index = -1;

            if ( this.points.indexOf ) {
                return this.points.indexOf( bezierPoint );
            } else {

                Utils.each( this.points, function ( point, i ) {

                    if ( point === bezierPoint ) {
                        index = i;
                        return false;
                    }

                } );

                return index;

            }

        },

        // 获取顶点宽度
        getVertexWidth: function () {
            return this.exterior.vertex.width;
        },

        getPoints: function () {

            return this.points.slice( 0 );

        },

        getPointByIndex: function ( index ) {

            return this.points[ index ] || null;

        },

        getLastPoint: function () {

            return this.points[ this.points.length - 1 ] || null;

        },

        addPoint: function ( point ) {

            point.container = this;

            this.points.push( point );

            this.onChanged();

            return this;

        },

        onChanged: function () {

            this._draw();

        },

        update: function ( sourcePoint ) {

            // 数据发生改变， 重绘当前点
            this._redraw( sourcePoint );

        },

        // 选中给定索引的点，该操作会引起其他点的连锁反应
        selectPoint: function ( index ) {

            var shapeGroup = this.pointShapes[ index ];

            // 重绘当前点
            this._redraw( this.getPointByIndex( index ) );

            // 清空其他点的
            Utils.each( this.pointShapes, function ( shape, i ) {

                if ( i !== index ) {

                    this._clearShapePoint( i );

                }

            }, this );

            // 更新辅助点
            if ( index > 0 ) {
                this._drawAssistPoint( index-1 );
            }

        },

        _draw: function () {

            var point = this.getLastPoint(),
                currentIndex = this.pointShapes.length;

            this._drawPoint( point, currentIndex );

            // 绘制辅助点
            if ( currentIndex > 0 ) {
                this._drawAssistPoint( currentIndex - 1 );
            }

        },

        _redraw: function ( point ) {

            //寻找源所对应的图形
            var index = this.indexOf( point ),
                shape = this.pointShapes[ index ];

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

            // 更新图形
            shape.forward.setCenter( forward.x, forward.y );
            shape.backward.setCenter( backward.x, backward.y );
            shape.line.setPoint1( forward.x, forward.y ).setPoint2( backward.x, backward.y );
            shape.vertex.setPosition( vertex.x - this.exterior.vertex.width / 2, vertex.y - this.exterior.vertex.height / 2 );

            this._stroke( shape.vertex );

        },

        _drawPoint: function ( point, index ) {

            var forward = point.getForward(),
                backward = point.getBackward(),
                shape = null;

            shape = {};
            this.pointShapes[ index ] = shape;

            //控制线
            shape.line = this._drawLine( forward, backward );
            //前置控制点
            shape.forward = this._drawForward( forward, index );
            //后置控制点
            shape.backward = this._drawBackward( backward, index );

            //vertex
            shape.vertex = this._drawVertex( point.getVertex(), index );

        },

        // 清理指定索引的图形点, 使得该点仅显示一个顶点
        _clearShapePoint: function ( index ) {

            var shape = this.pointShapes[ index ],
            // 当前的包含的数据点
                vertex = this.points[ index ].getVertex();

            shape.line.setPoint1( vertex.x, vertex.y ).setPoint2( vertex.x, vertex.y );
            shape.forward.setCenter( vertex.x, vertex.y );
            shape.backward.setCenter( vertex.x, vertex.y );

            this._stroke( shape.vertex, "white" );

        },

        // 根据指定的索引， 把该索引所对应的点更新成辅助点
        // 一个辅助点是当前曲线区间的起点， 它显示出该辅助点的forward控制点和连线
        _drawAssistPoint: function ( index ) {

            var shape = this.pointShapes[ index ],
            // 当前的包含的数据点
                bezierPoint = this.points[ index ],
                forward = bezierPoint.getForward(),
                vertex = bezierPoint.getVertex();

            shape.line.setPoint1( vertex.x, vertex.y ).setPoint2( forward.x, forward.y );
            shape.forward.setCenter( forward.x, forward.y );
            shape.backward.setCenter( vertex.x, vertex.y );

            this._stroke( shape.vertex, "white" );

            // 清理前一次的辅助点
            if ( index > 1 ) {

                this._clearShapePoint( index - 1 );

            }

        },

        _drawVertex: function ( vertex, index ) {

            var width = this.exterior.vertex.width,
                height = this.exterior.vertex.height,
                vertextRect = new Rect( width, height, vertex.x - width / 2 , vertex.y - height / 2 );

            //记录下图形
            this._stroke( vertextRect );

            this.addShape( vertextRect );

            GroupUtils.listenVertex( vertextRect, this, index );

            return vertextRect;

        },

        _drawForward: function ( point, index ) {

            var forwardPoint = this._drawControl( point );

            GroupUtils.listenForward( forwardPoint, this, index );

            return forwardPoint;

        },

        _drawBackward: function ( point, index ) {

            var backwardPoint = this._drawControl( point );

            GroupUtils.listenBackward( backwardPoint, this, index );

            return backwardPoint;

        },

        _drawControl: function ( point ) {

            var styles = this.exterior.control,
                radius = styles.radius,
                controlPoint = new Circle( radius, point.x, point.y );

            this._stroke( controlPoint );

            this.addShape( controlPoint );

            return controlPoint;

        },

        _drawLine: function ( forward, backward ) {

            var line = new Line ( forward.x, forward.y, backward.x, backward.y );

            line.stroke( new Pen( new Color( "#2d2d2d" ) ).setWidth( this.exterior.pen.width ) );

            this.addShape( line );

            return line;

        },

        _stroke: function ( shape, fillColor ) {

            shape.stroke(  new Pen( new Color( "#2d2d2d" ) ).setWidth( this.exterior.pen.width ) );
            shape.fill( new Color( fillColor || "black" ) );

        }

    } );

    Utils.extend( PointGroup, {

        // 顶点类型常量
        TYPE_VERTEX: "vertex",
        TYPE_FORWARD: "forward",
        TYPE_BACKWARD: "backward"

    } );

    return PointGroup;

} );