You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
9.3 KiB
234 lines
9.3 KiB
<!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>
|