CocoRoboLabs
/
CocoRoboDesktop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
							<!DOCTYPE html>
<html>
<head>

    <!-- 必须强制指定页面编码为 UTF-8 -->
    <meta charset="utf-8">

    <!-- Demo 的简要说明，必须要填写 -->
    <meta name="description" content="百度脑图的原型 Demo">
    
    <!-- Demo 的作者，建议填写 -->
    <meta name="author" content="kity@baidu.com">
    
    <!-- Demo 的标题，必须填写 -->
    <title>Graffle</title>
    
    <!-- Demo 开发过程中使用 CMD 引入 Kity 源码，方便调试 -->
    <!-- dev start -->
    <!-- 目录型的 Demo 注意修正源码引用路径 -->
    <script src="../../dev-lib/sea.js"></script>
    <script>
        // 设置好 kity 源代码目录
        seajs.config( { base: '../../src'} );
    </script>
    <!-- dev end -->

    <!-- 生产使用中可以直接引用发布压缩的版本 -->
    <!-- production start -->
    <!-- 目录型的 Demo 注意修正源码引用路径 -->
    <!-- <script src="../dist/kity.min.js"></script> -->
    <!-- production end -->
    <script>

        define('demo', function (require) {
            var Draggable = require('../demo/public/draggable');
            var Paper = require('core/class').extendClass( require('graphic/paper'), Draggable.prototype );
            var Rect = require('graphic/rect');
            var BezierConnection = require('../demo/graffle/bezierconnection');
            var PatternBrush = require('graphic/pattern');
            var Group = require('graphic/group');
            var Ellipse = require('graphic/ellipse');
            var Color = require('graphic/color');
            var Palette = require('graphic/palette');
            var utils = require('core/utils');

            var createClass = require('core/class').createClass;

            var MindRect = createClass( { 
                base: Rect, 
                mixins: [Draggable],
                getCenter: function() {
                    return {
                        x: this.getX(),
                        y: this.getY()
                    };
                },
                setCenterX: function(x) {
                    return this.setPositionX( x - this.getWidth() / 2 );
                },
                setCenterY: function(y) {
                    return this.setPositionY( y - this.getHeight() / 2 );
                },
                getCenterX: function() {
                    return this.getPositionX() + this.getWidth() / 2;
                },
                getCenterY: function() {
                    return this.getPositionY() + this.getHeight() / 2;
                },
                dragStart: function() {
                    this.dragStartPos = this.getPosition();
                },
                dragMove: function( e ) {
                    var pos = this.dragStartPos, delta = e.movement;
                    this.setPosition(pos.x + delta.x, pos.y + delta.y);
                }
            } );

            var MindContainer = createClass({
                base: Group,
                constructor: function( x, y, width, height ) {
                    this.callBase();
                    this.x = x || 0;
                    this.y = y || 0;
                    this.width = width || 1000;
                    this.height = height || 1000;
                    this.palette = new Palette().pipe(function() {
                        var fill = Color.createHSL(0, 75, 60);
                        this.add('level0-fill', fill);
                        this.add('level0-stroke', fill.dec(Color.L, 30));
                        this.add('level1-fill', fill.set(Color.H, 200));
                        this.add('level1-stroke', fill.dec(Color.L, 30));
                        this.add('fill', Color.createHSL(200, 50, 90));
                        this.add('stroke', Color.createHSL(200, 0, 30));
                        this.add('connection', Color.createHSL(60, 75, 75));
                    });
                    this.gaps = 50;
                    this.mindTree = this.generateMindObject();
                },
                generateMindObject: function( prevLevelObject ) {
                    var levelObject, connection;
                    var level = prevLevelObject ? prevLevelObject.level + 1 : 0;

                    levelObject = this.generateLevelObject( level );
                    levelObject.drag();
                    levelObject.level = level;
                    levelObject.children = [];

                    this.addShape( levelObject );

                    if( prevLevelObject ) {
                        this.addChildTo( levelObject, prevLevelObject );
                        levelObject.parent = prevLevelObject;
                        connection = new BezierConnection(levelObject, prevLevelObject);
                        connection.stroke(this.palette.get('connection'));
                        this.addShape( connection );
                    }
                    var me = this;
                    levelObject.on('mousedown', function() {
                        me.select(levelObject);
                    });
                    return levelObject;
                },
                addChildTo: function( levelObject, prevLevelObject ) {
                    var yValues = [];
                    var delta = levelObject.getHeight() + this.gaps;
                    var me = this;

                    levelObject.setCenterX( prevLevelObject.getCenterX() + levelObject.getWidth() + 200 );

                    if(prevLevelObject.children.length == 0) {
                        levelObject.setCenterY( prevLevelObject.getCenterY() );
                        prevLevelObject.children.push(levelObject);
                        return;
                    }

                    utils.each(prevLevelObject.children, function(child) {
                        yValues.push(child.getCenterY());
                    });

                    var levelValue = Math.max.apply(Math, yValues) + delta;
                    levelObject.setCenterY( levelValue );
                    yValues.push(levelValue);

                    prevLevelObject.children.push(levelObject);

                    utils.each(prevLevelObject.children, function(child, index) {
                        me.updateTreePosition( child, delta / 2 );
                    });
                },
                updateTreePosition: function ( levelObject, dy ) {
                    levelObject.setCenterY(levelObject.getCenterY() - dy);
                    var me = this;
                    utils.each( levelObject.children, function (child) {
                        me.updateTreePosition( child, dy );
                    } );
                },
                generateLevelObject: function(level) {
                    switch(level) {
                        case 0:
                            return new MindRect(200, 200, 0, -100, 10)
                                .fill(this.palette.get('level0-fill'));
                        case 1:
                            return new MindRect(200, 100, 0, 0, 5)
                                .fill(this.palette.get('level1-fill'));
                        default:
                            return new MindRect(200, 80, 0, 0, 3)
                                .fill(this.palette.get('fill'));
                    }
                },
                select: function (levelObject) {
                    if(this.selected) {
                        this.selected.stroke('none');
                    }
                    this.selected = levelObject.stroke('yellow', 5);
                },
                nextObject: function () {
                    if(this.selected && this.selected.parent) {
                        var nextObject = this.generateMindObject(this.selected.parent);
                        this.select(nextObject);
                        return nextObject;
                    }
                },
                nextLevel: function () {
                    if(this.selected) {
                        var nextLevel = this.generateMindObject(this.selected);
                        this.select(nextLevel);
                        return nextLevel;
                    }
                }
            });

            var paper = new Paper(document.body);
            paper.setViewBox(-1000, -600, 2000, 1200);
            paper.drag();

            var mc = new MindContainer(-1000, -600, 2000, 1200);
            paper.addShape(mc);

            document.body.addEventListener('keydown', function(e) {
                switch(e.keyCode) {
                    case 13:
                        e.preventDefault();
                        return mc.nextObject();
                    case 9:
                        e.preventDefault();
                        return mc.nextLevel();
                }
            });
            document.body.addEventListener('mousewheel', function(e) {
                var viewport = paper.getViewPort();
                if(e.wheelDelta > 0) {
                    viewport.zoom = viewport.zoom * 0.95;
                } else {
                    viewport.zoom = viewport.zoom / 0.95;
                }
                paper.setViewPort(viewport);
            });
        });
    </script>
    <style>
        body, div, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #333;
            height: 100%;
        }
    </style>
</head>
<body></body>
<script>
    seajs.use('demo');
</script>
</html>