Commit d91df167 authored by techird's avatar techird

Merge branch 'dev' of https://github.com/kitygraph/kityminder into dev

Conflicts:
	src/core/node.js
parents e4083e3a d3b81471
window.KITYMINDER_CONFIG = {
//定义工具栏
toolbars:[
'undo redo | bold italic | forecolor | layoutstyle | fontfamily fontsize'
]
//设置主题
//layoutstyle : 'default'
//,defaultlayoutstyle : 'default' //设置默认的主题
//,layoutstyle : [] //添加有那些主图
//回退相关选项
//maxUndoCount:20 //最大可回退的次数,默认20
//,maxUndoCount:20 //最大可回退的次数,默认20
//语言默认是zh-cn
//,lang:'zh-cn'
//设置km整体的z-index大小
//,zIndex : 1000
};
\ No newline at end of file
......@@ -4,8 +4,10 @@
<head>
<script src="jquery-2.1.0.min.js"></script>
<script src="kity.all.js"></script>
<script src="../configure.js"></script>
<script src="../dist/dev.php"></script>
<link href="import.css" />
<script src="../lang/zh-cn/zh-cn.js" charset="utf-8"></script>
<link href="../themes/default/_css/import.css" type="text/css" rel="stylesheet">
<style>
.km_receiver{
width:300px;height:300px;
......@@ -15,25 +17,11 @@
}
</style>
</head>
<body style="background:#262626; margin:0; padding:0">
<body >
<div id="kityminder" style="height:1000px;width:100%" onselectstart="return false">
<select id="StyleChange">
<option value="default">Default</option>
<option value="green" selected>Green</option>
</select>
</div>
</body>
<script>
var minder = KM.createMinder(kityminder);
document.getElementById("StyleChange").addEventListener("change",function(e){
var val = e.target.value;
minder.execCommand("switchlayout",val);
},false);
minder.select(minder.getRoot());
var node = new KM.MinderNode('test');
node.setData('fontcolor','red');
minder.execCommand('appendChildNode',node);
// var b = new kity.Bezier([new kity.BezierPoint(0,0).setVertex(100,100),new kity.BezierPoint(100,0).setVertex(100,100)]);
// minder.getRenderContainer().addShape(b.stroke("white"));
KM.getKityMinder('kityminder');
</script>
</html>
\ No newline at end of file
......@@ -14,6 +14,8 @@ $dependency = Array(
,'src/core/minder.command.js'
,'src/core/minder.node.js'
,'src/core/keymap.js'
,'src/core/minder.lang.js'
,'src/core/minder.defaultoptions.js'
,'src/module/history.js'
,'src/module/icon.js'
,'src/module/layout.js'
......@@ -29,6 +31,26 @@ $dependency = Array(
,'src/module/editor.cursor.js'
,'src/module/basestyle.js'
,'src/module/font.js'
,'src/ui/widget.js'
,'src/ui/button.js'
,'src/ui/toolbar.js'
,'src/ui/menu.js'
,'src/ui/dropmenu.js'
,'src/ui/splitbutton.js'
,'src/ui/colorsplitbutton.js'
,'src/ui/popup.js'
,'src/ui/scale.js'
,'src/ui/colorpicker.js'
,'src/ui/combobox.js'
,'src/ui/buttoncombobox.js'
,'src/ui/modal.js'
,'src/ui/tooltip.js'
,'src/ui/tab.js'
,'src/ui/separator.js'
,'src/ui/scale.js'
,'src/adapter/adapter.js'
,'src/adapter/button.js'
,'src/adapter/combobox.js'
);
......
KityMinder.LANG['zh-cn'] = {
'tooltips':{
'undo':'撤销', 'redo':'重做',
'bold':'加粗', 'italic':'斜体',
'forecolor':'字体颜色', 'fontfamily':'字体', 'fontsize':'字号',
'layoutstyle':'选择主题'
},
'popupcolor':{
'clearColor':'清空颜色',
'standardColor':'标准颜色',
'themeColor':'主题颜色'
}
};
\ No newline at end of file
utils.extend(KityMinder,function(){
var _kityminderUI = {},
_activeWidget = null,
_widgetData = {},
_widgetCallBack = {};
return {
registerUI:function(uiname,fn){
utils.each(uiname.split(/\s+/), function (i,name) {
_kityminderUI[name] = fn;
})
},
_createUI:function(id){
var $cont = $('<div class="kmui-container"></div>'),
$toolbar = $.kmuitoolbar(),
$kmbody = $('<div class="kmui-editor-body"></div>'),
$statusbar = $('<div class="kmui-statusbar"></div>');
$cont.append($toolbar).append($kmbody).append($statusbar);
$(utils.isString(id) ? '#' + id : id).append($cont);
return {
'$container':$cont,
'$toolbar':$toolbar,
'$body':$kmbody,
'$statusbar':$statusbar
};
},
_createToolbar:function($toolbar,km){
var toolbars = km.getOptions('toolbars');
if (toolbars && toolbars.length) {
var btns = [];
$.each(toolbars,function(i,uiNames){
$.each(uiNames.split(/\s+/),function(index,name){
if(name == '|'){
$.kmuiseparator && btns.push($.kmuiseparator());
}else{
if(_kityminderUI[name]){
var ui = _kityminderUI[name].call(km,name);
ui && btns.push(ui);
}
}
});
btns.length && $toolbar.kmui().appendToBtnmenu(btns);
});
}
$toolbar.append($('<div class="kmui-dialog-container"></div>'));
},
_createStatusbar:function($statusbar,km){
},
getKityMinder:function(id,options){
var containers = this._createUI(id);
var km = this.getMinder(containers.$body.get(0),options);
this._createToolbar(containers.$toolbar,km);
this._createStatusbar(containers.$statusbar,km);
km.$container = containers.$container;
},
registerWidget : function(name,pro,cb){
_widgetData[name] = $.extend2(pro,{
$root : '',
_preventDefault:false,
root:function($el){
return this.$root || (this.$root = $el);
},
preventDefault:function(){
this._preventDefault = true;
},
clear:false
});
if(cb){
_widgetCallBack[name] = cb;
}
},
getWidgetData : function(name){
return _widgetData[name]
},
setWidgetBody : function(name,$widget,km){
if(!km._widgetData){
utils.extend(km,{
_widgetData : {},
getWidgetData : function(name){
return this._widgetData[name];
},
getWidgetCallback : function(widgetName){
var me = this;
return function(){
return _widgetCallBack[widgetName].apply(me,[me,$widget].concat(utils.argsToArray(arguments,0)))
}
}
})
}
var pro = _widgetData[name];
if(!pro){
return null;
}
pro = km._widgetData[name];
if(!pro){
pro = _widgetData[name];
pro = km._widgetData[name] = $.type(pro) == 'function' ? pro : utils.clone(pro);
}
pro.root($widget.kmui().getBodyContainer());
pro.initContent(km,$widget);
if(!pro._preventDefault){
pro.initEvent(km,$widget);
}
pro.width && $widget.width(pro.width);
},
setActiveWidget : function($widget){
_activeWidget = $widget;
}
}
}());
KM.registerUI('bold italic redo undo',
function(name) {
var me = this;
var $btn = $.kmuibutton({
icon : name,
click : function(){
me.execCommand(name);
},
title: this.getLang('tooltips')[name] || ''
});
this.on('interactchange',function(){
var state = this.queryCommandState(name);
$btn.kmui().disabled(state == -1).active(state == 1)
});
return $btn;
}
);
KM.registerUI('layoutstyle fontfamily fontsize', function( name ) {
var me = this,
label = me.getLang('tooltips.' + name),
options = {
label: label,
title: label,
comboboxName: name,
items: me.getOptions(name) || [],
itemStyles: [],
value: [],
autowidthitem: []
},
$combox = null,
comboboxWidget = null;
if(options.items.length == 0){
return null;
}
switch ( name ) {
case 'layoutstyle':
options = transForLayoutstyle( options );
break;
case 'fontfamily':
options = transForFontfamily( options );
break;
case 'fontsize':
options = transForFontsize( options );
break;
}
//实例化
$combox = $.kmuibuttoncombobox(options).css('zIndex',me.getOptions('zIndex') + 1);
comboboxWidget = $combox.kmui();
comboboxWidget.on('comboboxselect', function( evt, res ){
me.execCommand( name, res.value );
}).on("beforeshow", function(){
if( $combox.parent().length === 0 ) {
$combox.appendTo( me.$container.find('.kmui-dialog-container') );
}
});
//状态反射
this.on('interactchange',function( ){
var state = this.queryCommandState( name ),
value = this.queryCommandValue( name );
//设置按钮状态
comboboxWidget.button().kmui().disabled( state == -1 ).active( state == 1 );
if(value){
//设置label
value = value.replace(/['"]/g, '').toLowerCase().split(/['|"]?\s*,\s*[\1]?/);
comboboxWidget.selectItemByLabel( value );
}
});
return comboboxWidget.button().addClass('kmui-combobox');
/**
* 宽度自适应工具函数
* @param word 单词内容
* @param hasSuffix 是否含有后缀
*/
function wordCountAdaptive ( word, hasSuffix ) {
var $tmpNode = $('<span>' ).html( word ).css( {
display: 'inline',
position: 'absolute',
top: -10000000,
left: -100000
} ).appendTo( document.body),
width = $tmpNode.width();
$tmpNode.remove();
$tmpNode = null;
if( width < 50 ) {
return word;
} else {
word = word.slice( 0, hasSuffix ? -4 : -1 );
if( !word.length ) {
return '...';
}
return wordCountAdaptive( word + '...', true );
}
}
function transForLayoutstyle ( options ) {
var tempItems = [];
utils.each(options.items,function(k,v){
options.value.push(k);
tempItems.push(k);
options.autowidthitem.push( wordCountAdaptive( tempItems[ tempItems.length - 1 ] ) );
});
options.items = tempItems;
return options;
}
//字体参数转换
function transForFontfamily ( options ) {
var temp = null,
tempItems = [];
for( var i = 0, len = options.items.length; i < len; i++ ) {
temp = options.items[ i ].val;
tempItems.push( temp.split(/\s*,\s*/)[0] );
options.itemStyles.push('font-family: ' + temp);
options.value.push( temp );
options.autowidthitem.push( wordCountAdaptive( tempItems[ i ] ) );
}
options.items = tempItems;
return options;
}
//字体大小参数转换
function transForFontsize ( options ) {
var temp = null,
tempItems = [];
options.itemStyles = [];
options.value = [];
for( var i = 0, len = options.items.length; i < len; i++ ) {
temp = options.items[ i ];
tempItems.push( temp );
options.itemStyles.push('font-size: ' + temp +'px');
}
options.value = options.items;
options.items = tempItems;
options.autoRecord = false;
return options;
}
});
KM.registerUI('forecolor', function( name ) {
function getCurrentColor() {
return $colorLabel.css('background-color');
}
var me = this,
$colorPickerWidget = null,
$colorLabel = null,
$btn = null;
this.on('interactchange', function(){
var state = this.queryCommandState( name );
$btn.kmui().disabled( state == -1 ).active( state == 1 );
});
$btn = $.kmuicolorsplitbutton({
icon: name,
caret: true,
name: name,
title: this.getLang('tooltips')[name] || '',
click: function() {
me.execCommand( name, getCurrentColor() );
}
});
$colorLabel = $btn.kmui().colorLabel();
$colorPickerWidget = $.kmuicolorpicker({
name: name,
lang_clearColor: me.getLang('popupcolor')['clearColor']|| '',
lang_themeColor: me.getLang('popupcolor')['themeColor'] || '',
lang_standardColor: me.getLang('popupcolor')['standardColor'] || ''
}).on('pickcolor', function( evt, color ){
window.setTimeout( function(){
$colorLabel.css("backgroundColor", color);
me.execCommand( name, color );
}, 0 );
}).on('show',function(){
KM.setActiveWidget( $colorPickerWidget.kmui().root() );
}).css('zIndex',me.getOptions('zIndex') + 1);
$btn.kmui().on('arrowclick',function(){
if(!$colorPickerWidget.parent().length){
me.$container.find('.kmui-dialog-container').append($colorPickerWidget);
}
$colorPickerWidget.kmui().show($btn,{
caretDir:"down",
offsetTop:-5,
offsetLeft:8,
caretLeft:11,
caretTop:-8
});
}).register('click', $btn, function () {
$colorPickerWidget.kmui().hide()
});
return $btn;
});
\ No newline at end of file
......@@ -28,7 +28,9 @@ var KityMinder =
id = target.id || ( "KM_INSTANCE_" + instanceId++ );
}
return instanceMap[ id ] || this.createMinder(target,options);
}
},
//挂接多语言
LANG:{}
}
}();
//这里只放不是由模块产生的默认参数
KM.defaultOptions = {
zIndex : 1000,
lang:'zh-cn'
};
\ No newline at end of file
......@@ -11,6 +11,7 @@
var Minder = KityMinder.Minder = kity.createClass( "KityMinder", {
constructor: function ( options ) {
this._options = Utils.extend( window.KITYMINDER_CONFIG || {}, options );
this.setDefaultOptions(KM.defaultOptions);
this._initEvents();
this._initMinder();
this._initSelection();
......@@ -29,7 +30,7 @@ var Minder = KityMinder.Minder = kity.createClass( "KityMinder", {
} else {
obj = key;
}
Utils.extend( this._options, obj, true );
utils.extend( this._options, obj, true );
},
_initMinder: function () {
......
//添加多语言模块
kity.extendClass( Minder, {
getLang:function(path){
var lang = KM.LANG[this.getOptions('lang')];
if (!lang) {
throw Error("not import language file");
}
path = (path || "").split(".");
for (var i = 0, ci; ci = path[i++];) {
lang = lang[ci];
if (!lang)break;
}
return lang;
}
} );
\ No newline at end of file
......@@ -2,12 +2,12 @@
kity.extendClass( Minder, function () {
function highlightNode( km, node ) {
node.setData( "highlight", true );
km.renderNode( node );
km.highlightNode( node );
}
function unhighlightNode( km, node ) {
node.setData( "highlight", false );
km.renderNode( node );
km.highlightNode( node );
}
return {
_initSelection: function () {
......
......@@ -9,7 +9,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
this.setData( options );
}
this._createShapeDom();
this.setData( "layout", {} );
},
_createShapeDom: function () {
this.rc = new kity.Group();
......@@ -37,7 +37,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
getContRc: function () {
var groups = this.rc.getShapesByType( 'group' ),
result;
utils.each( groups, function ( i, p ) {
Utils.each( groups, function ( i, p ) {
if ( p.getData( 'rctype' ) == 'contrc' ) {
result = p;
return false;
......@@ -48,7 +48,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
getBgRc: function () {
var groups = this.rc.getShapesByType( 'group' ),
result;
utils.each( groups, function ( i, p ) {
Utils.each( groups, function ( i, p ) {
if ( p.getData( 'rctype' ) == 'bgrc' ) {
result = p;
return false;
......
/**
* 模块初始化函数:模块名称大写,以 Module 作为后缀
*/
KityMinder.registerModule( "ExampleModule", function () {
//console.log( "You can cheat: 上下左右ABAB" );
// TODO: 初始化模块静态变量
var cheatCode = "38 40 37 39 65 66 65 66".split( ' ' );
// TODO: 进行模块命令定义
// HINT: 复杂的命令也可以在其它的文件中定义
var ExampleCommand = kity.createClass( "ExampleCommand", {
base: Command,
/**
* 命令执行函数
* @required
* @param {KityMinder} km 命令执行时的 KityMinder 实例
*/
execute: function ( km ) {
// this.setContentChange(true) 可以告知 KM 命令的执行导致了内容的变化,KM会抛出 contentchange 事件
// this.setSelectionChange(true) 可以告知 KM 命令的执行导致了选区的变化,KM会抛出 selectionchange 事件
window.alert( 'you cheat!' );
},
/**
* 命令状态查询
* @optional
* @param {KityMinder} km 命令查询针对的 KityMinder 实例
* @return {int} 返回 0 表示命令在正常状态(Default)
* 返回 1 表示命令在生效的状态
* 返回 -1 表示命令当前不可用
*/
queryState: function ( km ) {
},
/**
* 命令当前值查询
* @param {KityMinder} km 命令查询针对的 KityMinder 实例
* @return {any} 返回命令自定义类型数据。
*/
queryValue: function ( km ) {
}
} );
return {
// TODO: 默认属性
"defaultOptions": {
"test": 123
},
// TODO: 初始化完成后执行的函数
"init": function ( config ) {
// console.log( "init", config );
},
// TODO: 需要注册的命令
"commands": {
// 约定:命令名称全用小写
"cheat": ExampleCommand
},
// TODO: 需要注册的事件
"events": {
"click": function ( e ) {
// 支持的鼠标事件:mousedown, mouseup, mousemove, click
},
"keydown": function ( e ) {
// 支持的键盘事件:keydown, keyup, keypress
if ( !this._cheated || this._cheated[ 0 ] != e.keyCode ) {
this._cheated = cheatCode.slice( 0 );
}
if ( this._cheated[ 0 ] == e.keyCode ) {
this._cheated.shift();
}
// console.log( this._cheated );
if ( this._cheated.length === 0 ) {
this.execCommand( 'cheat' );
}
},
"beforeExecCommand": function ( e ) {
// e.cancel() 方法可以阻止 before 事件进入下个阶段
// e.cancelImmediately() 方法可以阻止当前回调后的回调执行,并且阻止事件进入下个阶段
console.log( e.type + ' fired' );
e.stopPropagation();
},
"preExecCommand": function ( e ) {
// 命令执行后的事件
console.log( e.type + ' fired' );
},
"contentchange": function ( e ) {
// 内容改变后的事件
},
"selectionchange": function ( e ) {
// 选区改变后的事件
}
},
// TODO: 定义模块的destroy方法
"destroy": function () {
console.log( "destroy" );
},
// TODO: 定义模块的reset方法
"reset": function () {
console.log( "reset" );
}
};
} );
\ No newline at end of file
......@@ -13,11 +13,13 @@ KityMinder.registerModule( "basestylemodule", function () {
utils.each(nodes,function(i,n){
n.setData('bold');
n.getTextShape().setAttr('font-weight');
km.updateLayout(n)
})
}else{
utils.each(nodes,function(i,n){
n.setData('bold',true);
n.getTextShape().setAttr('font-weight','bold');
km.updateLayout(n)
})
}
},
......@@ -43,11 +45,13 @@ KityMinder.registerModule( "basestylemodule", function () {
utils.each(nodes,function(i,n){
n.setData('italic');
n.getTextShape().setAttr('font-style');
km.updateLayout(n)
})
}else{
utils.each(nodes,function(i,n){
n.setData('italic',true);
n.getTextShape().setAttr('font-style','italic');
km.updateLayout(n)
})
}
},
......
......@@ -88,7 +88,6 @@ Minder.Receiver = kity.createClass('Receiver',{
this.textShape.setContent(text);
this.setContainerStyle();
this.minderNode.setText(text);
this.km.renderNode(this.minderNode);
this.km.updateLayout(this.minderNode);
this.setBaseOffset();
this.updateTextData();
......
KityMinder.registerModule( "fontmodule", function () {
return {
defaultOptions:{
'fontfamily': [
{ name: 'songti', val: '宋体,SimSun'},
{ name: 'yahei', val: '微软雅黑,Microsoft YaHei'},
{ name: 'kaiti', val: '楷体,楷体_GB2312, SimKai'},
{ name: 'heiti', val: '黑体, SimHei'},
{ name: 'lishu', val: '隶书, SimLi'},
{ name: 'andaleMono', val: 'andale mono'},
{ name: 'arial', val: 'arial, helvetica,sans-serif'},
{ name: 'arialBlack', val: 'arial black,avant garde'},
{ name: 'comicSansMs', val: 'comic sans ms'},
{ name: 'impact', val: 'impact,chicago'},
{ name: 'timesNewRoman', val: 'times new roman'},
{ name: 'sans-serif',val:'sans-serif'}
],
'fontsize': [10, 12, 16, 18,24, 32,48]
},
"commands": {
"fontcolor": kity.createClass( "fontcolorCommand", {
"forecolor": kity.createClass( "fontcolorCommand", {
base: Command,
execute: function ( km, color ) {
......@@ -23,6 +39,19 @@ KityMinder.registerModule( "fontmodule", function () {
utils.each( nodes, function ( i, n ) {
n.setData( 'fontfamily', family );
n.getTextShape().setAttr( 'font-family', family );
km.updateLayout(n)
} )
}
} ),
"fontsize": kity.createClass( "fontsizeCommand", {
base: Command,
execute: function ( km, size ) {
var nodes = km.getSelectedNodes();
utils.each( nodes, function ( i, n ) {
n.setData( 'fontsize', size );
n.getTextShape().setSize(size);
km.updateLayout(n)
} )
}
} )
......@@ -35,6 +64,7 @@ KityMinder.registerModule( "fontmodule", function () {
e.node.getTextShape().setAttr( 'font-family', val );
}
if ( val = e.node.getData( 'fontcolor' ) ) {
console.log( val );
e.node.getTextShape().fill( val );
}
}
......
......@@ -60,37 +60,35 @@ KityMinder.registerModule( "KeyboardModule", function () {
buildPositionNetwork( this.getRoot() );
},
keydown: function ( e ) {
switch ( e.originEvent.keyCode ) {
case keymap.Enter:
this.execCommand( 'appendSiblingNode', new MinderNode( 'Topic' ) );
e.preventDefault();
break;
case keymap.Tab:
this.execCommand( 'appendChildNode', new MinderNode( 'Topic' ) );
e.preventDefault();
break;
case keymap.Backspace:
case keymap.Del:
this.execCommand( 'removenode' );
e.preventDefault();
break;
case keymap.Enter:
this.execCommand( 'appendSiblingNode', new MinderNode( 'Topic' ) );
e.preventDefault();
break;
case keymap.Tab:
this.execCommand( 'appendChildNode', new MinderNode( 'Topic' ) );
e.preventDefault();
break;
case keymap.Backspace:
case keymap.Del:
this.execCommand( 'removenode' );
e.preventDefault();
break;
case keymap.Left:
case keymap.up:
case keymap.Right:
case keymap.Down:
if ( this.isSingleSelect() ) {
KBNavigate( this, {
37: 'left',
38: 'top',
39: 'right',
40: 'down'
}[ e.originEvent.keyCode ] );
}
e.preventDefault();
break;
case keymap.Left:
case keymap.up:
case keymap.Right:
case keymap.Down:
if ( this.isSingleSelect() ) {
KBNavigate( this, {
37: 'left',
38: 'top',
39: 'right',
40: 'down'
}[ e.originEvent.keyCode ] );
}
e.preventDefault();
break;
}
}
......
......@@ -3,6 +3,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
var minderWidth = _target.clientWidth;
var minderHeight = _target.clientHeight;
var minder = this;
//收缩-展开子树的节点
var ShIcon = kity.createClass( "DefaultshIcon", ( function () {
return {
constructor: function ( node ) {
......@@ -59,336 +60,222 @@ KityMinder.registerModule( "LayoutDefault", function () {
}
};
} )() );
//主分支
var MainBranch = kity.createClass( "DefaultMainBranch", ( function () {
return {
constructor: function ( node ) {
this._node = node;
var bgRC = node.getBgRc();
var contRC = node.getContRc();
var rect = this._rect = new kity.Rect();
var shicon = this._shicon = new ShIcon( node );
bgRC.addShape( rect );
var connect = this._connect = new kity.Group();
var bezier = connect.bezier = new kity.Bezier();
var circle = connect.circle = new kity.Circle();
connect.addShapes( [ bezier, circle ] );
minder.getRenderContainer().addShape( connect ).bringTop( minder.getRoot().getRenderContainer() );
var Layout = {
radius: 5,
fill: "white",
color: "black",
padding: [ 5.5, 20, 5.5, 20 ],
fontSize: 20,
margin: [ 0, 10, 30, 50 ],
shape: this,
align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ),
appendside: node.getData( "layout" ).appendside
};
node.setData( "layout", Layout );
contRC.setTransform( new kity.Matrix().translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 ) );
this.update();
},
update: function () {
var rect = this._rect;
var node = this._node;
var contRC = node.getContRc();
var Layout = node.getData( "layout" );
var _contRCWidth = contRC.getWidth();
var _contRCHeight = contRC.getHeight();
var _rectWidth = _contRCWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ];
var _rectHeight = _contRCHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ];
rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( node.getData( "highlight" ) ? "chocolate" : Layout.fill ).setRadius( Layout.radius );
this.updateConnect();
this.updateShIcon();
},
updateConnect: function () {
var rootX = minder.getRoot().getData( "layout" ).x;
var rootY = minder.getRoot().getData( "layout" ).y;
var connect = this._connect;
var node = this._node;
var Layout = node.getData( "layout" );
var parent = node.getParent();
var nodeShape = node.getRenderContainer();
var nodeClosurePoints = nodeShape.getRenderBox().closurePoints;
var sPos;
var endPos;
if ( Layout.appendside === "left" ) {
sPos = new kity.BezierPoint( rootX - 30, nodeClosurePoints[ 2 ].y + nodeShape.getHeight() / 2 );
endPos = new kity.BezierPoint( nodeClosurePoints[ 2 ].x, nodeClosurePoints[ 2 ].y + nodeShape.getHeight() / 2 );
} else {
sPos = new kity.BezierPoint( rootX + 30, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
endPos = new kity.BezierPoint( nodeClosurePoints[ 3 ].x, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
}
var sPosV = sPos.getVertex();
var endPosV = endPos.getVertex();
sPos.setVertex( rootX, rootY );
connect.bezier.setPoints( [ sPos, endPos ] ).stroke( "white" );
connect.circle.setCenter( endPosV.x + ( Layout.appendside === "left" ? 3 : -3 ), endPosV.y ).fill( "white" ).stroke( "gray" ).setRadius( 2 );
},
updateShIcon: function () {
this._shicon.update();
},
clear: function () {
this._node.getBgRc().clear();
this._connect.remove();
this._shicon.remove();
}
};
} )() );
//子分支
var SubBranch = kity.createClass( "DefaultSubBranch", ( function () {
return {
constructor: function ( node ) {
this._node = node;
var bgRC = node.getBgRc();
var contRC = node.getContRc();
var underline = this._underline = new kity.Path();
var shicon = this._shicon = new ShIcon( node );
var highlightshape = this._highlightshape = new kity.Rect();
bgRC.addShapes( [ highlightshape, underline ] );
var connect = this._connect = new kity.Path();
minder.getRenderContainer().addShape( connect ).bringTop( minder.getRoot().getRenderContainer() );
var Layout = {
stroke: new kity.Pen( "white", 1 ).setLineCap( "round" ).setLineJoin( "round" ),
color: "white",
padding: [ 5, 10, 5.5, 10 ],
fontSize: 12,
margin: [ 0, 10, 20, 5 ],
shape: this,
align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ),
appendside: node.getData( "layout" ).appendside
};
node.setData( "layout", Layout );
contRC.setTransform( new kity.Matrix().translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 10 ) );
highlightshape.fill( "chocolate" ).translate( -1, 0 );
this.update();
},
update: function () {
var node = this._node;
var contRc = node.getContRc();
var Layout = node.getData( "layout" );
var underline = this._underline;
var highlightshape = this._highlightshape;
var _contWidth = contRc.getWidth();
var _contHeight = contRc.getHeight();
var sY = Layout.padding[ 0 ] + _contHeight / 2;
underline.getDrawer()
.clear()
.moveTo( 0, _contHeight + Layout.padding[ 2 ] + Layout.padding[ 0 ] )
.lineTo( _contWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ], _contHeight + Layout.padding[ 2 ] + Layout.padding[ 0 ] );
underline.stroke( Layout.stroke );
highlightshape
.setWidth( _contWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ] )
.setHeight( _contHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ] )
.setOpacity( node.getData( "highlight" ) ? 1 : 0 );
this.updateConnect();
this.updateShIcon();
},
updateConnect: function () {
var connect = this._connect;
var node = this._node;
var parentShape = node.getParent().getRenderContainer();
var parentBox = parentShape.getRenderBox();
var parentLayout = node.getParent().getData( "layout" );
var Layout = node.getData( "layout" );
var Shape = node.getRenderContainer();
var sX, sY = parentLayout.y;
var nodeX, nodeY = Shape.getRenderBox().closurePoints[ 1 ].y;
if ( Layout.appendside === "left" ) {
sX = parentBox.closurePoints[ 1 ].x - parentLayout.margin[ 1 ];
nodeX = Shape.getRenderBox().closurePoints[ 0 ].x;
connect.getDrawer()
.clear()
.moveTo( sX, sY )
.lineTo( sX, nodeY > sY ? ( nodeY - Layout.margin[ 3 ] ) : ( nodeY + Layout.margin[ 3 ] ) );
if ( nodeY > sY ) connect.getDrawer().carcTo( Layout.margin[ 3 ], nodeX, nodeY, 0, 1 );
else connect.getDrawer().carcTo( Layout.margin[ 3 ], nodeX, nodeY );
connect.stroke( Layout.stroke );
} else {
sX = parentBox.closurePoints[ 0 ].x + parentLayout.margin[ 1 ];
nodeX = Shape.getRenderBox().closurePoints[ 1 ].x + 1;
connect.getDrawer()
.clear()
.moveTo( sX, sY )
.lineTo( sX, nodeY > sY ? ( nodeY - Layout.margin[ 3 ] ) : ( nodeY + Layout.margin[ 3 ] ) );
if ( nodeY > sY ) connect.getDrawer().carcTo( Layout.margin[ 3 ], nodeX, nodeY );
else connect.getDrawer().carcTo( Layout.margin[ 3 ], nodeX, nodeY, 0, 1 );
connect.stroke( Layout.stroke );
}
},
updateShIcon: function () {
this._shicon.update();
},
clear: function () {
this._node.getBgRc().clear();
this._connect.remove();
this._shicon.remove();
//求并集
var uSet = function ( a, b ) {
for ( var i = 0; i < a.length; i++ ) {
var idx = b.indexOf( a[ i ] );
if ( idx !== -1 ) {
b.splice( idx, 1 );
}
};
} )() );
//根节点
var RootShape = kity.createClass( "DefaultRootShape", ( function () {
return {
constructor: function ( node ) {
var bgRC = node.getBgRc();
var contRC = node.getContRc();
var rect = this._rect = new kity.Rect();
bgRC.addShape( rect );
this._node = node;
var Layout = {
shape: this,
x: minderWidth / 2,
y: minderHeight / 2,
align: "center",
appendside: node.getData( "layout" ).appendside || "right",
leftList: [],
rightList: [],
color: "white",
fontSize: 20,
fill: "cadetblue",
stroke: null,
padding: [ 10.5, 10, 10.5, 10 ],
radius: 15,
margin: [ 0, 0, 0, 0 ]
};
node.setData( "layout", Layout );
node.setData( "text", "Minder Root" );
contRC.setTransform( new kity.Matrix().translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 ) );
this.update();
},
update: function () {
var node = this._node;
var contRC = node.getContRc();
var rect = this._rect;
var connect = this._connect;
var Layout = node.getData( "layout" );
var _contRCWidth = contRC.getWidth();
var _contRCHeight = contRC.getHeight();
var _rectWidth = _contRCWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ];
var _rectHeight = _contRCHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ];
rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( node.getData( "highlight" ) ? "chocolate" : Layout.fill ).setRadius( Layout.radius );
},
clear: function () {
this._node.getBgRc().clear();
}
return a.concat( b );
};
//样式的配置(包括颜色、字号等)
var nodeStyles = {
"root": {
color: "white",
fill: "cadetblue",
fontSize: 20,
padding: [ 10.5, 10, 10.5, 10 ],
margin: [ 0, 0, 0, 0 ],
radius: 15,
highlight: "chocolate"
},
"main": {
fill: "white",
color: "#333",
padding: [ 5.5, 20, 5.5, 20 ],
fontSize: 14,
margin: [ 0, 10, 30, 50 ],
radius: 5,
highlight: "chocolate"
},
"sub": {
stroke: new kity.Pen( "white", 1 ).setLineCap( "round" ).setLineJoin( "round" ),
color: "white",
fontSize: 12,
margin: [ 0, 10, 20, 5 ],
padding: [ 5, 10, 5.5, 10 ],
highlight: "chocolate"
}
};
//更新背景
var updateBg = function ( node ) {
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var Layout = node.getData( "layout" );
switch ( node.getType() ) {
case "root":
case "main":
if ( !Layout.bgRect ) {
node.getBgRc().addShape( Layout.bgRect = new kity.Rect() );
}
};
} )() );
//流程:绘制->计算Y坐标->计算X坐标->translate
//绘制node
var drawNode = function ( node ) {
var shape = node.getData( "layout" ).shape;
shape.update();
Layout.bgRect.fill( nodeStyle.fill ).setRadius( nodeStyle.radius );
break;
case "sub":
var underline = Layout.underline = new kity.Path();
var highlightshape = Layout.highlightshape = new kity.Rect();
node.getBgRc().addShapes( [ highlightshape, underline ] );
break;
default:
break;
}
};
//以某个节点为seed对整体高度进行更改计算
//初始化样式
var initLayout = function ( node ) {
var Layout = node.getData( "layout" ) || {};
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var txtShape = node.getTextShape();
txtShape.fill( nodeStyle.color ).setSize( nodeStyle.fontSize );
if ( nodeType === "root" ) {
Layout.leftList = [];
Layout.rightList = [];
Layout.leftHeight = 0;
Layout.rightHeight = 0;
}
};
//根据内容调整节点尺寸
var updateShapeByCont = function ( node ) {
var contRc = node.getContRc();
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var _contRCWidth = contRc.getWidth();
var _contRCHeight = contRc.getHeight();
var Layout = node.getData( "layout" );
switch ( nodeType ) {
case "root":
case "main":
Layout.bgRect.setWidth( _contRCWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ] );
Layout.bgRect.setHeight( _contRCHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ] );
break;
case "sub":
var _contWidth = contRc.getWidth();
var _contHeight = contRc.getHeight();
Layout.underline.getDrawer()
.clear()
.moveTo( 0, _contHeight + nodeStyle.padding[ 2 ] + nodeStyle.padding[ 0 ] )
.lineTo( _contWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ], _contHeight + nodeStyle.padding[ 2 ] + nodeStyle.padding[ 0 ] );
Layout.underline.stroke( nodeStyle.stroke );
Layout.highlightshape
.setWidth( _contWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ] )
.setHeight( _contHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ] );
break;
default:
break;
}
contRc.setTransform( new kity.Matrix().translate( nodeStyle.padding[ 3 ], nodeStyle.padding[ 0 ] + node.getTextShape().getHeight() ) );
};
//计算节点在垂直方向的位置
var updateLayoutVertical = function ( node, parent, action ) {
var effectSet = [ node ]; //用于返回受影响的节点集
if ( !parent ) {
return effectSet;
var root = minder.getRoot();
var effectSet = [ node ];
if ( action === "remove" ) {
effectSet = [];
}
var Layout = node.getData( "layout" );
var marginTop = Layout.margin[ 0 ],
marginBottom = Layout.margin[ 2 ];
var nodeShape = node.getRenderContainer();
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var appendside = Layout.appendside;
var branchheight = Layout.branchheight || node.getRenderContainer().getHeight() + marginTop + marginBottom;
var countY = function ( node, appendside ) {
var nodeLayout = node.getData( "layout" );
var centerY = nodeLayout.y;
var nodeBranchHeight = nodeLayout[ appendside + "Height" ] || nodeLayout.branchheight;
var nodeChildren = nodeLayout[ appendside + "List" ] || node.getChildren();
var sY = centerY - nodeBranchHeight / 2;
if ( nodeChildren.length === 1 ) {
var childrenLayout = nodeChildren[ 0 ].getData( "layout" );
childrenLayout.y = centerY;
} else {
for ( var i = 0; i < nodeChildren.length; i++ ) {
var childrenLayout1 = nodeChildren[ i ].getData( "layout" );
if ( !childrenLayout1.shape ) break;
var childBranchHeight = childrenLayout1.branchheight;
childrenLayout1.y = sY + marginTop + childBranchHeight / 2;
sY += childBranchHeight;
var countBranchHeight = function ( node, side ) {
var nodeStyle = nodeStyles[ node.getType() ];
var selfHeight = node.getRenderContainer().getHeight() + nodeStyle.margin[ 0 ] + nodeStyle.margin[ 2 ];
var childHeight = ( function () {
var sum = 0;
var children;
if ( !side ) {
children = node.getChildren();
} else {
children = node.getData( "layout" )[ side + "List" ];
}
for ( var i = 0; i < children.length; i++ ) {
var childLayout = children[ i ].getData( "layout" );
if ( children[ i ].getRenderContainer().getHeight() !== 0 )
sum += childLayout.branchheight;
}
return sum;
} )();
if ( side ) {
return childHeight;
} else {
return ( selfHeight > childHeight ? selfHeight : childHeight );
}
return nodeChildren;
};
Layout.branchheight = branchheight;
var parentLayout = parent.getData( "layout" );
var siblings = parentLayout[ appendside + "List" ] || parent.getChildren();
var getChildHeight = function ( node, appendside ) {
var sum = 0;
var nodeLayout = node.getData( "layout" );
var children = nodeLayout[ appendside + "List" ] || node.getChildren();
for ( var i = 0; i < children.length; i++ ) {
var childLayout = children[ i ].getData( "layout" );
if ( childLayout.shape ) sum += childLayout.branchheight;
if ( nodeType === "root" ) {
Layout.y = minderHeight / 2;
effectSet.push( node );
} else {
if ( action === "append" || action === "contract" ) {
Layout.branchheight = node.getRenderContainer().getHeight() + nodeStyle.margin[ 0 ] + nodeStyle.margin[ 2 ];
} else if ( action === "expand" || action === "change" ) { //展开
Layout.branchheight = countBranchHeight( node );
}
return sum;
};
var prt = parent;
do {
var minH = prt.getRenderContainer().getHeight() + marginTop + marginBottom;
var childH = getChildHeight( prt, appendside );
var branchH = ( minH > childH ? minH : childH );
var prtLayout = prt.getData( "layout" );
if ( prt.getParent() ) {
prtLayout.branchheight = branchH + prtLayout.margin[ 0 ] + prtLayout.margin[ 2 ];
} else {
prtLayout[ appendside + "Height" ] = branchH + prtLayout.margin[ 0 ] + prtLayout.margin[ 2 ];
var parentLayout = parent.getData( "layout" );
var parentShape = parent.getRenderContainer();
var prt = node.getParent() || parent;
//自底向上更新祖先元素的branchheight值
while ( prt ) {
var prtLayout = prt.getData( "layout" );
if ( prt.getType() === "root" ) {
prtLayout[ appendside + "Height" ] = countBranchHeight( prt, appendside );
} else {
prtLayout.branchheight = countBranchHeight( prt );
}
prt = prt.getParent();
}
//自顶向下更新受影响一侧的y值
var sideList = root.getData( "layout" )[ appendside + "List" ];
var _buffer = [ root ];
while ( _buffer.length > 0 ) {
var _buffer0Layout = _buffer[ 0 ].getData( "layout" );
var children = _buffer0Layout[ appendside + "List" ] || _buffer[ 0 ].getChildren();
_buffer = _buffer.concat( children );
var sY = _buffer0Layout.y - ( _buffer0Layout[ appendside + "Height" ] || _buffer0Layout.branchheight ) / 2;
for ( var i = 0; i < children.length; i++ ) {
var childLayout = children[ i ].getData( "layout" );
childLayout.y = sY + childLayout.branchheight / 2;
sY += childLayout.branchheight;
}
effectSet.push( _buffer[ 0 ] );
_buffer.shift();
}
prt = prt.getParent();
} while ( prt );
//遍历
var _buffer = [ minder.getRoot() ];
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( countY( _buffer[ 0 ], appendside ) );
effectSet.push( _buffer[ 0 ] );
_buffer.shift();
}
return effectSet;
};
//以某个节点为seed对水平方向进行调整(包括调整子树)
//计算节点在水平方向的位置
var updateLayoutHorizon = function ( node ) {
var effectSet = []; //返回受影响(即需要进行下一步translate的节点)
var nodeType = node.getType();
var parent = node.getParent();
var effectSet = [ node ];
var Layout = node.getData( "layout" );
var _buffer = [ node ];
while ( _buffer.length !== 0 ) {
var parent = _buffer[ 0 ].getParent();
var prt = _buffer[ 0 ].getParent();
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
if ( !parent ) {
effectSet.push( _buffer[ 0 ] );
if ( !prt ) {
Layout.x = minderWidth / 2;
_buffer.shift();
continue;
}
var nodeLayout = _buffer[ 0 ].getData( "layout" );
var appendside = nodeLayout.appendside;
var selfWidth = _buffer[ 0 ].getRenderContainer().getWidth();
var parentLayout = parent.getData( "layout" );
var parentWidth = parent.getRenderContainer().getWidth();
if ( parentLayout.align === "center" ) parentWidth = parentWidth / 2;
var parentX = parentLayout.x;
switch ( appendside ) {
case "left":
nodeLayout.x = parentX - parentWidth - parentLayout.margin[ 1 ] - nodeLayout.margin[ 3 ];
break;
case "right":
nodeLayout.x = parentX + parentWidth + parentLayout.margin[ 1 ] + nodeLayout.margin[ 3 ];
break;
default:
break;
var parentLayout = prt.getData( "layout" );
var parentWidth = prt.getRenderContainer().getWidth();
var parentStyle = nodeStyles[ prt.getType() ];
var childLayout = _buffer[ 0 ].getData( "layout" );
var childStyle = nodeStyles[ _buffer[ 0 ].getType() ];
if ( parentLayout.align === "center" ) {
parentWidth = parentWidth / 2;
}
if ( childLayout.appendside === "left" ) {
childLayout.x = parentLayout.x - parentWidth - parentStyle.margin[ 1 ] - childStyle.margin[ 3 ];
} else {
childLayout.x = parentLayout.x + parentWidth + parentStyle.margin[ 1 ] + childStyle.margin[ 3 ];
}
effectSet.push( _buffer[ 0 ] );
_buffer.shift();
}
return effectSet;
};
//调整node的位置
var translateNode = function ( node ) {
var Layout = node.getData( "layout" );
var nodeShape = node.getRenderContainer();
......@@ -406,203 +293,315 @@ KityMinder.registerModule( "LayoutDefault", function () {
nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y - _rectHeight / 2 ) );
break;
}
if ( Layout.shape ) {
if ( Layout.shape.updateConnect ) Layout.shape.updateConnect();
if ( Layout.shape.updateShIcon ) Layout.shape.updateShIcon();
}
};
//求并集
var uSet = function ( a, b ) {
for ( var i = 0; i < a.length; i++ ) {
var idx = b.indexOf( a[ i ] );
if ( idx !== -1 ) {
b.splice( idx, 1 );
var updateConnectAndshIcon = function ( node ) {
var nodeType = node.getType();
var Layout = node.getData( "layout" );
var connect;
//更新连线
if ( nodeType === "main" ) {
if ( !Layout.connect ) {
connect = Layout.connect = new kity.Group();
var bezier = Layout.connect.bezier = new kity.Bezier();
var circle = Layout.connect.circle = new kity.Circle();
connect.addShapes( [ bezier, circle ] );
minder.getRenderContainer().addShape( connect ).bringTop( minder.getRoot().getRenderContainer() );
}
var parent = minder.getRoot();
var rootX = parent.getData( "layout" ).x;
var rootY = parent.getData( "layout" ).y;
connect = Layout.connect;
var nodeShape = node.getRenderContainer();
var nodeClosurePoints = nodeShape.getRenderBox().closurePoints;
var sPos;
var endPos;
if ( Layout.appendside === "left" ) {
sPos = new kity.BezierPoint( rootX - 30, nodeClosurePoints[ 2 ].y + nodeShape.getHeight() / 2 );
endPos = new kity.BezierPoint( nodeClosurePoints[ 2 ].x, nodeClosurePoints[ 2 ].y + nodeShape.getHeight() / 2 );
} else {
sPos = new kity.BezierPoint( rootX + 30, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
endPos = new kity.BezierPoint( nodeClosurePoints[ 3 ].x, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
}
var sPosV = sPos.getVertex();
var endPosV = endPos.getVertex();
sPos.setVertex( rootX, rootY );
connect.bezier.setPoints( [ sPos, endPos ] ).stroke( "white" );
connect.circle.setCenter( endPosV.x + ( Layout.appendside === "left" ? 3 : -3 ), endPosV.y ).fill( "white" ).stroke( "gray" ).setRadius( 2 );
} else if ( nodeType === "sub" ) {
if ( !Layout.connect ) {
connect = Layout.connect = new kity.Path();
minder.getRenderContainer().addShape( connect );
}
connect = Layout.connect;
var parentShape = node.getParent().getRenderContainer();
var parentBox = parentShape.getRenderBox();
var parentLayout = node.getParent().getData( "layout" );
var nodeStyle = nodeStyles[ node.getType() ];
var parentStyle = nodeStyles[ node.getParent().getType() ];
var Shape = node.getRenderContainer();
var sX, sY = parentLayout.y;
var nodeX, nodeY = Shape.getRenderBox().closurePoints[ 1 ].y;
if ( Layout.appendside === "left" ) {
sX = parentBox.closurePoints[ 1 ].x - parentStyle.margin[ 1 ];
nodeX = Shape.getRenderBox().closurePoints[ 0 ].x;
connect.getDrawer()
.clear()
.moveTo( sX, sY )
.lineTo( sX, nodeY > sY ? ( nodeY - nodeStyle.margin[ 3 ] ) : ( nodeY + nodeStyle.margin[ 3 ] ) );
if ( nodeY > sY ) connect.getDrawer().carcTo( nodeStyle.margin[ 3 ], nodeX, nodeY, 0, 1 );
else connect.getDrawer().carcTo( nodeStyle.margin[ 3 ], nodeX, nodeY );
connect.stroke( nodeStyle.stroke );
} else {
sX = parentBox.closurePoints[ 0 ].x + parentStyle.margin[ 1 ];
nodeX = Shape.getRenderBox().closurePoints[ 1 ].x + 1;
connect.getDrawer()
.clear()
.moveTo( sX, sY )
.lineTo( sX, nodeY > sY ? ( nodeY - nodeStyle.margin[ 3 ] ) : ( nodeY + nodeStyle.margin[ 3 ] ) );
if ( nodeY > sY ) connect.getDrawer().carcTo( nodeStyle.margin[ 3 ], nodeX, nodeY );
else connect.getDrawer().carcTo( nodeStyle.margin[ 3 ], nodeX, nodeY, 0, 1 );
connect.stroke( nodeStyle.stroke );
}
}
return a.concat( b );
//更新收放icon
if ( nodeType !== "root" ) {
if ( !Layout.shicon ) {
Layout.shicon = new ShIcon( node );
}
Layout.shicon.update();
}
};
var _style = {
renderNode: function ( node ) {
drawNode( node );
},
initStyle: function () {
//绘制root并且调整到正确位置
var _root = this.getRoot();
minder.handelNodeInsert( _root );
var rc = new RootShape( _root );
translateNode( _root );
var box = _root.getRenderContainer().getRenderBox();
_root.setPoint( box.x, box.y );
var _buffer = _root.getChildren();
var Layout = _root.getData( "layout" );
//根据保存的xy值初始化左右子树
if ( _buffer.length !== 0 ) {
for ( var i = 0; i < _buffer.length; i++ ) {
var point = _buffer[ i ].getPoint();
if ( point && point.x && point.y ) {
if ( point.x > Layout.x ) {
Layout.rightList.push( _buffer[ i ] );
} else {
Layout.leftList.push( _buffer[ i ] );
}
} else {
break;
}
highlightNode: function ( node ) {
var highlight = node.getData( "highlight" );
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var Layout = node.getData( "layout" );
switch ( nodeType ) {
case "root":
case "main":
if ( highlight ) {
Layout.bgRect.fill( nodeStyle.highlight );
} else {
Layout.bgRect.fill( nodeStyle.fill );
}
}
//如果是从其他style切过来的,需要重新布局
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
var prt = _buffer[ 0 ].getParent();
_buffer[ 0 ].clearLayout();
_buffer[ 0 ].children = [];
this.appendChildNode( prt, _buffer[ 0 ] );
_buffer.shift();
break;
case "sub":
if ( highlight ) {
Layout.highlightshape.fill( nodeStyle.highlight ).setOpacity( 1 );
} else {
Layout.highlightshape.setOpacity( 0 );
}
break;
default:
break;
}
},
updateLayout: function ( node ) {
drawNode( node );
var set = updateLayoutHorizon( node );
this._fire( new MinderEvent( "beforeRenderNode", {
node: node
}, false ) );
this._fire( new MinderEvent( "RenderNode", {
node: node
}, false ) );
updateShapeByCont( node );
var set1 = updateLayoutHorizon( node );
var set2 = updateLayoutVertical( node, node.getParent(), "change" );
var set = uSet( set1, set2 );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
updateConnectAndshIcon( set[ i ] );
}
},
appendChildNode: function ( parent, node, index ) {
minder.handelNodeInsert( node );
var _root = this.getRoot();
var childbranch;
if ( !node.getData( "layout" ) ) node.setData( "layout", {} );
if ( parent.getChildren().indexOf( node ) === -1 ) {
if ( !index ) parent.appendChild( node );
else parent.insertChild( node, index );
}
var parentLayout = parent.getData( "layout" );
var Layout = node.getData( "layout" );
initStyle: function () {
var _root = minder.getRoot();
minder.handelNodeInsert( _root );
//设置root的align
_root.getData( "layout" ).align = "center";
updateBg( _root );
initLayout( _root );
this._fire( new MinderEvent( "beforeRenderNode", {
node: node
node: _root
}, false ) );
if ( parent.getType() === "root" ) {
node.setType( "main" );
var leftList = parentLayout.leftList;
var rightList = parentLayout.rightList;
var sibling = parent.getChildren();
var aside = Layout.appendside;
if ( !aside ) {
if ( rightList.length > 1 && rightList.length > leftList.length ) {
aside = "left";
this._fire( new MinderEvent( "RenderNode", {
node: _root
}, false ) );
updateShapeByCont( _root );
updateLayoutHorizon( _root );
updateLayoutVertical( _root );
translateNode( _root );
},
appendChildNode: function ( parent, node, sibling ) {
minder.handelNodeInsert( node );
//设置align和appendside属性并在合适的位置插入节点
var insert = ( parent.getChildren().indexOf( node ) === -1 );
var Layout = node.getData( "layout" );
var parentLayout = parent.getData( "layout" );
if ( sibling ) {
var siblingLayout = sibling.getData( "layout" );
Layout.appendside = siblingLayout.appendside;
Layout.align = siblingLayout.align;
parent.insertChild( node, sibling.getIndex() + 1 );
if ( parent.getType() === "root" ) {
var sideList = parentLayout[ Layout.appendside + "List" ];
var idx = sideList.indexOf( sibling );
sideList.splice( idx + 1, 0, node );
}
} else {
if ( parent.getType() !== "root" ) {
var prtLayout = parent.getData( "layout" );
Layout.appendside = prtLayout.appendside;
Layout.align = prtLayout.align;
} else {
if ( parentLayout.rightList.length > 1 && parentLayout.rightList.length > parentLayout.leftList.length ) {
Layout.appendside = "left";
Layout.align = "right";
} else {
aside = "right";
Layout.appendside = "right";
Layout.align = "left";
}
Layout.appendside = aside;
}
if ( leftList.indexOf( node ) !== -1 ) {
Layout.appendside = "left";
} else if ( rightList.indexOf( node ) !== -1 ) {
Layout.appendside = "right";
} else {
parentLayout.appendside = aside;
parentLayout[ aside + "List" ].push( node );
if ( insert ) {
if ( parent.getType() === "root" ) {
var sideList1 = parentLayout[ Layout.appendside + "List" ];
var idx1 = sideList1.length;
parent.insertChild( node, idx1 );
sideList1.push( node );
} else {
parent.insertChild( node );
}
}
childbranch = new MainBranch( node );
}
//设置分支类型
if ( parent.getType() === "root" ) {
node.setType( "main" );
} else {
node.setType( "sub" );
Layout.appendside = parentLayout.appendside;
childbranch = new SubBranch( node );
}
//计算位置等流程
updateBg( node );
initLayout( node );
this._fire( new MinderEvent( "beforeRenderNode", {
node: node
}, false ) );
this._fire( new MinderEvent( "RenderNode", {
node: node
}, false ) );
updateShapeByCont( node );
var set1 = updateLayoutVertical( node, parent, "append" );
var set2 = updateLayoutHorizon( node );
var set = uSet( set1, set2 );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
var box = set[ i ].getRenderContainer().getRenderBox();
set[ i ].setPoint( box.x, box.y );
updateConnectAndshIcon( set[ i ] );
}
//var shicon = new ShIcon( node );
},
appendSiblingNode: function ( sibling, node ) {
var siblingLayout = sibling.getData( "layout" );
if ( !node.getData( "layout" ) ) {
node.setData( "layout", {} );
}
var Layout = node.getData( "layout" );
var parent = sibling.getParent();
var index = sibling.getIndex() + 1;
var appendside = siblingLayout.appendside;
Layout.appendside = appendside;
this.appendChildNode( parent, node, index );
this.appendChildNode( parent, node, sibling );
},
removeNode: function ( nodes ) {
var root = this.getRoot();
for ( var i = 0; i < nodes.length; i++ ) {
var parent = nodes[ i ].getParent();
if ( parent ) {
var _buffer = [ nodes[ i ] ];
var parentLayout = parent.getData( "layout" );
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer[ 0 ].getData( "layout" ).shape.clear();
while ( nodes.length !== 0 ) {
var parent = nodes[ 0 ].getParent();
var nodeLayout = nodes[ 0 ].getData( "layout" );
if ( parent.getType() === "root" ) {
var sideList = parent.getData( "layout" )[ nodeLayout.appendside + "List" ];
var index = sideList.indexOf( nodes[ 0 ] );
sideList.splice( index, 1 );
}
parent.removeChild( nodes[ 0 ] );
var set = updateLayoutVertical( nodes[ 0 ], parent, "remove" );
for ( var j = 0; j < set.length; j++ ) {
translateNode( set[ j ] );
updateConnectAndshIcon( set[ j ] );
}
var _buffer = [ nodes[ 0 ] ];
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
try {
_buffer[ 0 ].getRenderContainer().remove();
var prt = _buffer[ 0 ].getParent();
prt.removeChild( _buffer[ 0 ] );
_buffer.shift();
}
if ( parent === root ) {
var Layout = nodes[ i ].getData( "layout" );
var appendside = Layout.appendside;
var sideList = parentLayout[ appendside + "List" ];
var idx = sideList.indexOf( nodes[ i ] );
sideList.splice( idx, 1 );
var Layout = _buffer[ 0 ].getData( "layout" );
Layout.connect.remove();
Layout.shicon.remove();
} catch ( error ) {
console.log( "isRemoved" );
}
parent.removeChild( nodes[ i ] );
var set = updateLayoutVertical( nodes[ i ], parent, "remove" );
for ( var j = 0; j < set.length; j++ ) {
translateNode( set[ j ] );
//检测当前节点是否在选中的数组中,如果在的话,从选中数组中去除
var idx = nodes.indexOf( _buffer[ 0 ] );
if ( idx !== -1 ) {
nodes.splice( idx, 1 );
}
_buffer.shift();
}
}
},
expandNode: function ( ico ) {
var isExpand = ico.icon.switchState();
var node = ico.icon._node;
var _buffer = node.getChildren();
while ( _buffer.length !== 0 ) {
var Layout = _buffer[ 0 ].getData( "layout" );
if ( isExpand ) {
var parent = _buffer[ 0 ].getParent();
minder.appendChildNode( parent, _buffer[ 0 ] );
Layout.connect = null;
Layout.shicon = null;
} else {
_buffer[ 0 ].getRenderContainer().remove();
Layout.connect.remove();
Layout.shicon.remove();
}
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer.shift();
}
var set;
if ( isExpand ) set = updateLayoutVertical( node, node.getParent(), "expand" );
else set = updateLayoutVertical( node, node.getParent(), "contract" );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
updateConnectAndshIcon( set[ i ] );
}
}
};
this.addLayoutStyle( "default", _style );
return {
"events": {
"click": function ( e ) {
var ico = e.kityEvent.targetShape.container;
if ( ico.class === "shicon" ) {
var isShow = ico.icon.switchState();
var node = ico.icon._node;
var _buffer;
if ( isShow ) {
_buffer = node.getChildren();
while ( _buffer.length !== 0 ) {
minder.appendChildNode( _buffer[ 0 ].getParent(), _buffer[ 0 ] );
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer.shift();
}
} else {
var Layout = node.getData( "layout" );
var marginTop = Layout.margin[ 0 ];
var marginBottom = Layout.margin[ 2 ];
Layout.branchheight = node.getRenderContainer().getHeight() + marginTop + marginBottom;
_buffer = node.getChildren();
while ( _buffer.length !== 0 ) {
try {
_buffer[ 0 ].getData( "layout" ).shape.clear();
_buffer[ 0 ].getRenderContainer().remove();
} catch ( error ) {}
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer.shift();
}
var set = updateLayoutVertical( node, node.getParent(), "append" );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
}
}
}
}
}
// "events": {
// "click": function ( e ) {
// var ico = e.kityEvent.targetShape.container;
// if ( ico.class === "shicon" ) {
// var isShow = ico.icon.switchState();
// var node = ico.icon._node;
// var _buffer;
// if ( isShow ) {
// _buffer = node.getChildren();
// while ( _buffer.length !== 0 ) {
// minder.appendChildNode( _buffer[ 0 ].getParent(), _buffer[ 0 ] );
// _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
// _buffer.shift();
// }
// } else {
// var Layout = node.getData( "layout" );
// var marginTop = Layout.margin[ 0 ];
// var marginBottom = Layout.margin[ 2 ];
// Layout.branchheight = node.getRenderContainer().getHeight() + marginTop + marginBottom;
// _buffer = node.getChildren();
// while ( _buffer.length !== 0 ) {
// try {
// _buffer[ 0 ].getData( "layout" ).shape.clear();
// _buffer[ 0 ].getRenderContainer().remove();
// } catch ( error ) {}
// _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
// _buffer.shift();
// }
// var set = updateLayoutVertical( node, node.getParent(), "append" );
// for ( var i = 0; i < set.length; i++ ) {
// translateNode( set[ i ] );
// }
// }
// }
// }
// }
};
} );
\ No newline at end of file
......@@ -7,6 +7,9 @@ KityMinder.registerModule( "LayoutModule", function () {
getLayoutStyle: function ( name ) {
return this._layoutStyles[ name ];
},
getLayoutStyleItems: function () {
return this._layoutStyles;
},
getCurrentStyle: function () {
var _root = this.getRoot();
return _root.getData( "currentstyle" );
......@@ -16,12 +19,13 @@ KityMinder.registerModule( "LayoutModule", function () {
_root.setData( "currentstyle", name );
return name;
},
renderNode: function ( node ) {
highlightNode: function ( node ) {
var curStyle = this.getCurrentStyle();
this.getLayoutStyle( curStyle ).renderNode.call( this, node );
this.getLayoutStyle( curStyle ).highlightNode.call( this, node );
},
initStyle: function () {
var curStyle = this.getCurrentStyle();
this.getRenderContainer().clear();
this.getLayoutStyle( curStyle ).initStyle.call( this );
},
appendChildNode: function ( parent, node, index ) {
......@@ -39,6 +43,10 @@ KityMinder.registerModule( "LayoutModule", function () {
updateLayout: function ( node ) {
var curStyle = this.getCurrentStyle();
this.getLayoutStyle( curStyle ).updateLayout.call( this, node );
},
expandNode: function ( ico ) {
var curStyle = this.getCurrentStyle();
this.getLayoutStyle( curStyle ).expandNode.call( this, ico );
}
} );
kity.extendClass( MinderNode, {
......@@ -128,11 +136,11 @@ KityMinder.registerModule( "LayoutModule", function () {
for ( var i = 0; i < selectedNodes.length; i++ ) {
_buffer.push( selectedNodes[ i ] );
}
while ( _buffer.length !== 1 ) {
do {
var parent = _buffer[ 0 ].getParent();
if ( parent && _buffer.indexOf( parent ) === -1 ) _buffer.push( parent );
_buffer.shift();
}
} while ( _buffer.length !== 1 );
km.removeNode( selectedNodes );
km.select( _buffer[ 0 ] );
}
......@@ -148,11 +156,18 @@ KityMinder.registerModule( "LayoutModule", function () {
},
"events": {
"ready": function () {
switchLayout( this, this.getOptions( 'layoutstyle' ) );
this.setDefaultOptions( 'layoutstyle', this.getLayoutStyleItems() );
switchLayout( this, this.getOptions( 'defaultlayoutstyle' ) );
},
"click": function ( e ) {
var ico = e.kityEvent.targetShape.container;
if ( ico.class === "shicon" ) {
this.expandNode( ico );
}
}
},
"defaultOptions": {
"layoutstyle": "default"
"defaultlayoutstyle": "default"
}
};
} );
\ No newline at end of file
/*普通按钮*/
.kmui-btn-toolbar .kmui-btn{
position: relative;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom:1;
width:auto;
margin: 0 1px;
padding:1px;
border:none;
background: none;
}
.kmui-btn-toolbar .kmui-btn .kmui-icon{
width: 20px;
height: 20px;
margin: 0;
padding:0;
background-repeat: no-repeat;
background-image: url(../images/icons.png);
background-image: url(../images/icons.gif) \9;
}
/*状态反射*/
.kmui-btn-toolbar .kmui-btn.kmui-hover,
.kmui-btn-toolbar .kmui-btn.kmui-active{
background-color: #d5e1f2;
padding: 0;
border: 1px solid #a3bde3;
_z-index: 1;
}
.kmui-btn-toolbar .kmui-btn.kmui-disabled{
opacity: 0.3;
filter: alpha(opacity = 30);
}
\ No newline at end of file
.kmui-btn-toolbar .kmui-btn .kmui-icon-undo {
background-position: -160px 0;
}
.kmui-btn-toolbar .kmui-btn .kmui-icon-redo {
background-position: -100px 0;
}
.kmui-btn-toolbar .kmui-btn .kmui-icon-bold{
background-position: 0 0;
}
.kmui-btn-toolbar .kmui-btn .kmui-icon-italic {
background-position: -60px 0;
}
.kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor {
background-position: -720px 0;
}
.kmui-splitbutton-color-label {
width: 16px;
height: 3px;
position: absolute;
bottom: 2px;
left: 50%;
margin-left: -8px;
overflow: hidden;
line-height: 3px;
}
.kmui-popup .kmui-colorpicker {
margin: 10px;
font-size: 12px;
}
.kmui-colorpicker .kmui-colorpicker-topbar{
height: 27px;
width: 200px;
overflow: hidden;
}
.kmui-colorpicker .kmui-colorpicker-topbar .kmui-colorpicker-preview{
height: 20px;
border: 1px inset black;
margin-left: 1px;
width: 128px;
float: left;
}
.kmui-colorpicker .kmui-colorpicker-topbar .kmui-colorpicker-nocolor{
float: right;
margin-right: 1px;
font-size: 12px;
line-height: 14px;
height: 14px;
border: 1px solid #333;
padding: 3px 5px;
cursor: pointer;
}
.kmui-colorpicker table{
border-collapse: collapse;
border-spacing: 2px;
}
.kmui-colorpicker tr.kmui-colorpicker-firstrow{
height: 30px;
}
.kmui-colorpicker table td{
padding: 0 2px;
}
.kmui-colorpicker table td .kmui-colorpicker-colorcell{
display: block;
text-decoration: none;
color: black;
width: 14px;
height: 14px;
margin: 0;
cursor: pointer;
}
\ No newline at end of file
.kmui-btn-toolbar .kmui-combobox{
border: 1px solid #CCC;
padding:0;
margin:0 2px;
line-height: 20px;
}
.kmui-combobox .kmui-button-label{
position: relative;
display: inline-block;
vertical-align: top;
*display: inline ;
*zoom:1;
width:60px;
height:20px;
line-height: 20px;
padding: 2px;
margin: 0;
font-size: 12px;
text-align: center;
cursor: default;
}
.kmui-combobox .kmui-button-spacing{
position: relative;
display: inline-block ;
vertical-align: top;
*display: inline ;
*zoom:1;
height:20px;
margin: 0;
padding:0 3px;
}
.kmui-combobox .kmui-caret{
position: relative;
display: inline-block ;
vertical-align: top;
*display: inline ;
*zoom:1;
height:20px;
width: 12px;
margin: 0;
padding: 0;
background: url(../images/icons.png) -741px 0;
_background: url(../images/icons.gif) -741px 0;
}
.kmui-btn-toolbar .kmui-combobox.kmui-disabled{
opacity: 0.2;
filter: alpha(opacity = 20);
}
.kmui-combobox-menu{
position: absolute;
top: 100%;
left: 0;
display: none;
list-style: none;
text-decoration: none;
margin: 0;
padding:5px;
background-color: #ffffff;
border: 1px solid #ccc;
font-size: 12px;
box-shadow: 2px 2px 5px #d3d6da;
min-width: 160px;
_width: 160px;
}
.kmui-combobox-menu .kmui-combobox-item {
display: block;
border: 1px solid white;
}
.kmui-combobox-menu .kmui-combobox-item-label {
height: 25px;
line-height: 25px;
display: inline-block;
_display: inline;
_zoom: 1;
margin-left: 10px;
}
.kmui-combobox-menu .kmui-combobox-item:hover, .kmui-combobox-menu .kmui-combobox-stack-item:hover, .kmui-combobox-menu .kmui-combobox-item-hover {
background-color: #d5e1f2;
padding: 0;
border: 1px solid #a3bde3;
}
.kmui-combobox-menu .kmui-combobox-item .kmui-combobox-icon {
display: inline-block;
*zoom: 1;
*display: inline;
width: 24px;
height: 25px;
background: red;
vertical-align: bottom;
background: url(../images/ok.gif) no-repeat 1000px 1000px;
}
.kmui-combobox-menu .kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 7px;
}
.kmui-combobox-menu .kmui-combobox-item-separator {
min-width: 160px;
height: 1px;
line-height: 1px;
overflow: hidden;
background: #d3d3d3;
margin: 5px 0;
*margin-top: -8px;
}
/* 字体样式校正 */
.kmui-combobox-fontsize .kmui-combobox-item-0.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 7px;
}
.kmui-combobox-fontsize .kmui-combobox-item-1.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 7px;
}
.kmui-combobox-fontsize .kmui-combobox-item-2.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 7px;
}
.kmui-combobox-fontsize .kmui-combobox-item-3.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 7px;
}
/* 24 */
.kmui-combobox-fontsize .kmui-combobox-item-4 .kmui-combobox-item-label {
height: 27px;
line-height: 27px;
}
.kmui-combobox-fontsize .kmui-combobox-item-4.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 5px;
}
/* 32 */
.kmui-combobox-fontsize .kmui-combobox-item-5 .kmui-combobox-item-label {
height: 31px;
line-height: 31px;
}
.kmui-combobox-fontsize .kmui-combobox-item-5.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 4px;
}
/* 48 */
.kmui-combobox-fontsize .kmui-combobox-item-6 .kmui-combobox-item-label {
height: 47px;
line-height: 47px;
}
/*.kmui-combobox-fontsize .kmui-combobox-item-6 .kmui-combobox-icon {*/
/*height: 25px;*/
/*margin-bottom: 11px;*/
/*}*/
/*.kmui-combobox-fontsize .kmui-combobox-item-6.kmui-combobox-checked .kmui-combobox-icon {*/
/*background-position: 10px 7px;*/
/*}*/
/* 段落样式校正 */
/* h1 */
.kmui-combobox-paragraph .kmui-combobox-item-1 .kmui-combobox-item-label {
font-size: 32px;
height: 36px;
line-height: 36px;
}
.kmui-combobox-paragraph .kmui-combobox-item-1 .kmui-combobox-icon {
height: 25px;
margin-bottom: 5px;
}
.kmui-combobox-paragraph .kmui-combobox-item-1.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 7px;
}
/* h2 */
.kmui-combobox-paragraph .kmui-combobox-item-2 .kmui-combobox-item-label {
font-size: 28px;
height: 27px;
line-height: 27px;
}
.kmui-combobox-paragraph .kmui-combobox-item-2 .kmui-combobox-icon {
margin-bottom: 5px;
}
.kmui-combobox-paragraph .kmui-combobox-item-2.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 10px;
}
/* h3 */
.kmui-combobox-paragraph .kmui-combobox-item-3 .kmui-combobox-item-label {
font-size: 24px;
height: 25px;
line-height: 25px;
}
.kmui-combobox-paragraph .kmui-combobox-item-3 .kmui-combobox-icon {
height: 25px;
margin-bottom: 5px;
}
.kmui-combobox-paragraph .kmui-combobox-item-3.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 11px;
}
/* h4 */
.kmui-combobox-paragraph .kmui-combobox-item-4 .kmui-combobox-item-label {
font-size: 18px;
height: 25px;
line-height: 25px;
}
.kmui-combobox-paragraph .kmui-combobox-item-4.kmui-combobox-checked .kmui-combobox-icon {
background-position: 10px 6px;
}
/* h5 */
.kmui-combobox-paragraph .kmui-combobox-item-5 .kmui-combobox-item-label {
font-size: 16px;
}
/* h6 */
.kmui-combobox-paragraph .kmui-combobox-item-6 .kmui-combobox-item-label {
font-size: 12px;
}
\ No newline at end of file
.kmui-modal {
position: fixed;
_position: absolute;
top: 10%;
left: 50%;
border: 1px solid #acacac;
box-shadow: 2px 2px 5px #d3d6da;
background-color: #ffffff;
outline: 0;
}
.kmui-modal-header {
padding: 5px 10px;
border-bottom: 1px solid #eee;
}
.kmui-modal-header .kmui-close {
float: right;
width:20px;
height:20px;
margin-top: 2px;
padding: 1px;
border: 0;
background: url("../images/close.png") no-repeat center center;
cursor: pointer;
}
.kmui-modal-header .kmui-close.kmui-hover {
background-color: #d5e1f2;
padding:0;
border: 1px solid #a3bde3;
}
.kmui-modal-header .kmui-title {
margin: 0;
line-height: 25px;
font-size: 20px;
}
.kmui-modal-body {
position: relative;
max-height: 400px;
font-size: 12px;
overflow-y: auto;
}
.kmui-modal-footer {
float: right;
padding: 5px 15px 15px;
overflow: hidden;
}
.kmui-modal-footer .kmui-btn {
float: left;
height: 24px;
width: 96px;
margin: 0 10px;
background-color: #ffffff;
padding: 0;
border: 1px solid #ababab;
font-size: 12px;
line-height: 24px;
text-align: center;
cursor: pointer;
}
.kmui-modal-footer .kmui-btn.kmui-hover{
background-color: #d5e1f2;
border: 1px solid #a3bde3;
}
.kmui-modal-backdrop{
opacity: 0.5;
filter: alpha(opacity=50);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #c6c6c6;
}
.kmui-modal .kmui-modal-tip {
color: red;
position: absolute;
bottom: 10px;
left: 10px;
height: 30px;
line-height: 30px;
display: none;
}
\ No newline at end of file
/*图片上传*/
.kmui-dialog-image-body {
width: 700px;
height: 400px;
}
/*插入视频*/
.kmui-dialog-video-body{
width: 600px;
height: 350px;
}
/*谷歌地图*/
.kmui-dialog-gmap-body{
width:550px;
height: 400px;
}
/*百度地图*/
.kmui-dialog-map-body{
width:580px;
height: 400px;
}
/*链接*/
.kmui-dialog-link-body{
width:400px;
height:200px;
}
\ No newline at end of file
@import "kityminder.css";
@import "button.css";
@import "buttonicon.css";
@import "splitbutton.css";
@import "combobox.css";
@import "comboboxmenu.css";
@import "dialog.css";
@import "dialogsize.css";
@import "popup.css";
@import "tab.css";
@import "tooltip.css";
@import "colorpicker.css";
@import "separator.css";
.kmui-container{
position: relative;
border: 1px solid #d4d4d4;
box-shadow: 2px 2px 5px #d3d6da;
background-color: #fff;
}
.kmui-container .kmui-toolbar{
position: relative;
width:auto;
border-bottom: 1px solid #e1e1e1;
box-shadow: 2px 2px 5px #d3d6da;
background-color: #fafafa;
z-index: 99999;
}
.kmui-toolbar .kmui-btn-toolbar{
position: relative;
padding: 5px;
}
.kmui-container .kmui-editor-body{
background-color: #000000;
}
\ No newline at end of file
.kmui-popup{
display: none;
background: url('../images/pop-bg.png') repeat #fff;
padding: 2px;
}
.kmui-popup .kmui-popup-body{
border: 1px solid #bfbfbf;
background-color: #fff;
}
.kmui-popup .kmui-popup-caret{
width: 21px;
height: 11px;
}
.kmui-popup .kmui-popup-caret.up{
background:url('../images/caret.png') no-repeat 0 0;
}
.kmui-popup .kmui-popup-caret.down{
background:url('../images/caret.png') no-repeat 0 0;
}
.kmui-toolbar .kmui-separator{
width: 2px;
height: 20px;
padding: 1px 2px;
background: url(../images/icons.png) -179px 1px;
background: url(../images/icons.gif) -179px 1px \9;
display: inline-block ;
vertical-align: top;
*display: inline ;
*zoom:1;
border:none;
}
\ No newline at end of file
.kmui-btn-toolbar .kmui-splitbutton{
position: relative;
display: inline-block ;
vertical-align: top;
*display: inline ;
*zoom:1;
margin:0 2px;
}
.kmui-splitbutton .kmui-btn{
margin: 0;
}
.kmui-splitbutton .kmui-caret{
position: relative;
display: inline-block ;
vertical-align: top;
*display: inline ;
*zoom:1;
width: 8px;
height: 20px;
background: url(../images/icons.png) -741px 0;
_background: url(../images/icons.gif) -741px 0;
}
.kmui-btn-toolbar .kmui-splitbutton,
.kmui-btn-toolbar .kmui-splitbutton{
_border: none;
}
/*状态反射*/
.kmui-btn-toolbar .kmui-splitbutton.kmui-hover .kmui-btn{
background-color: #d5e1f2;
}
.kmui-btn-toolbar .kmui-splitbutton.kmui-disabled{
opacity: 0.3;
filter: alpha(opacity = 30);
}
.kmui-tab-nav {
margin: 0;
padding:0;
border-bottom: 1px solid #ddd;
list-style: none;
height:30px;
}
.kmui-tab-nav .kmui-tab-item {
float:left;
margin-bottom: -1px;
margin-top: 1px;
margin-top: 0\9;
}
.kmui-tab-nav .kmui-tab-item .kmui-tab-text{
display: block;
padding:8px 12px;
border: 1px solid transparent;
color: #0088cc;
text-decoration: none;
outline: 0;
_border:1px solid #fff ;
cursor: pointer;
}
.kmui-tab-nav .kmui-tab-item .kmui-tab-text:FOCUS {
outline: none;
}
.kmui-tab-nav .kmui-tab-item.kmui-active .kmui-tab-text{
border: 1px solid #ddd;
border-bottom-color: transparent;
background-color: #fff;
padding:8px 12px;
color: #555555;
cursor: default;
}
.kmui-tab-content .kmui-tab-pane{
padding: 1px;
position: relative;
display: none;
background-color: #fff;
clear: both;
}
.kmui-tab-content .kmui-tab-pane.kmui-active{
display: block;
}
.kmui-btn-toolbar .kmui-tooltip{
position: absolute;
padding: 5px 0;
display: none;
/*opacity: 0.8;*/
/*filter: alpha(opacity=80);*/
z-index: 99999;
}
.kmui-tooltip .kmui-tooltip-arrow{
position: absolute;
top: 0;
_top: -19px;
left: 50%;
width: 0;
height: 0;
padding: 0;
margin-left: -5px;
border-color: transparent;
border-style: dashed dashed solid dashed;
border-bottom-color: #000000;
border-width: 0 5px 5px;
background: transparent;
}
.kmui-tooltip .kmui-tooltip-inner{
padding: 6px;
color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 10px;
background-color: #000000;
white-space: nowrap;
line-height: 12px;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment