Skip to content

K
kityminder-core
Commit d91df167 authored by techird's avatar techird
Browse files
Options

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

Conflicts:
	src/core/node.js
parents e4083e3a d3b81471
Show whitespace changes
Inline Side-by-side
Showing with 1620 additions and 637 deletions
configure.js
View file @ d91df167
window.KITYMINDER_CONFIG = { 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
demo/dev.html
View file @ d91df167
...@@ -4,8 +4,10 @@ ...@@ -4,8 +4,10 @@
<head> <head>
<script src="jquery-2.1.0.min.js"></script> <script src="jquery-2.1.0.min.js"></script>
<script src="kity.all.js"></script> <script src="kity.all.js"></script>
<script src="../configure.js"></script>
<script src="../dist/dev.php"></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> <style>
.km_receiver{ .km_receiver{
width:300px;height:300px; width:300px;height:300px;
...@@ -15,25 +17,11 @@ ...@@ -15,25 +17,11 @@
} }
</style> </style>
</head> </head>
<body style="background:#262626; margin:0; padding:0"> <body >
<div id="kityminder" style="height:1000px;width:100%" onselectstart="return false"> <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> </div>
</body> </body>
<script> <script>
var minder = KM.createMinder(kityminder); KM.getKityMinder('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"));
</script> </script>
</html> </html>
\ No newline at end of file
dist/dev.php
View file @ d91df167
...@@ -14,6 +14,8 @@ $dependency = Array( ...@@ -14,6 +14,8 @@ $dependency = Array(
,'src/core/minder.command.js' ,'src/core/minder.command.js'
,'src/core/minder.node.js' ,'src/core/minder.node.js'
,'src/core/keymap.js' ,'src/core/keymap.js'
,'src/core/minder.lang.js'
,'src/core/minder.defaultoptions.js'
,'src/module/history.js' ,'src/module/history.js'
,'src/module/icon.js' ,'src/module/icon.js'
,'src/module/layout.js' ,'src/module/layout.js'
...@@ -29,6 +31,26 @@ $dependency = Array( ...@@ -29,6 +31,26 @@ $dependency = Array(
,'src/module/editor.cursor.js' ,'src/module/editor.cursor.js'
,'src/module/basestyle.js' ,'src/module/basestyle.js'
,'src/module/font.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'
); );
......
lang/zh-cn/zh-cn.js 0 → 100755
View file @ d91df167
KityMinder.LANG['zh-cn'] = {
'tooltips':{
'undo':'撤销', 'redo':'重做',
'bold':'加粗', 'italic':'斜体',
'forecolor':'字体颜色', 'fontfamily':'字体', 'fontsize':'字号',
'layoutstyle':'选择主题'
},
'popupcolor':{
'clearColor':'清空颜色',
'standardColor':'标准颜色',
'themeColor':'主题颜色'
}
};
\ No newline at end of file
src/adapter/adapter.js 0 → 100644
View file @ d91df167
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;
}
}
}());
src/adapter/button.js 0 → 100644
View file @ d91df167
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;
}
);
src/adapter/combobox.js 0 → 100644
View file @ d91df167
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
src/core/kityminder.js
View file @ d91df167
...@@ -28,7 +28,9 @@ var KityMinder = ...@@ -28,7 +28,9 @@ var KityMinder =
id = target.id || ( "KM_INSTANCE_" + instanceId++ ); id = target.id || ( "KM_INSTANCE_" + instanceId++ );
} }
return instanceMap[ id ] || this.createMinder(target,options); return instanceMap[ id ] || this.createMinder(target,options);
} },
//挂接多语言
LANG:{}
} }
}(); }();
src/core/minder.defaultoptions.js 0 → 100644
View file @ d91df167
//这里只放不是由模块产生的默认参数
KM.defaultOptions = {
zIndex : 1000,
lang:'zh-cn'
};
\ No newline at end of file
src/core/minder.js
View file @ d91df167
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
var Minder = KityMinder.Minder = kity.createClass( "KityMinder", { var Minder = KityMinder.Minder = kity.createClass( "KityMinder", {
constructor: function ( options ) { constructor: function ( options ) {
this._options = Utils.extend( window.KITYMINDER_CONFIG || {}, options ); this._options = Utils.extend( window.KITYMINDER_CONFIG || {}, options );
this.setDefaultOptions(KM.defaultOptions);
this._initEvents(); this._initEvents();
this._initMinder(); this._initMinder();
this._initSelection(); this._initSelection();
...@@ -29,7 +30,7 @@ var Minder = KityMinder.Minder = kity.createClass( "KityMinder", { ...@@ -29,7 +30,7 @@ var Minder = KityMinder.Minder = kity.createClass( "KityMinder", {
} else { } else {
obj = key; obj = key;
} }
Utils.extend( this._options, obj, true ); utils.extend( this._options, obj, true );
}, },
_initMinder: function () { _initMinder: function () {
......
src/core/minder.lang.js 0 → 100644
View file @ d91df167
//添加多语言模块
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
src/core/minder.select.js
View file @ d91df167
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
kity.extendClass( Minder, function () { kity.extendClass( Minder, function () {
function highlightNode( km, node ) { function highlightNode( km, node ) {
node.setData( "highlight", true ); node.setData( "highlight", true );
km.renderNode( node ); km.highlightNode( node );
} }
function unhighlightNode( km, node ) { function unhighlightNode( km, node ) {
node.setData( "highlight", false ); node.setData( "highlight", false );
km.renderNode( node ); km.highlightNode( node );
} }
return { return {
_initSelection: function () { _initSelection: function () {
......
src/core/node.js
View file @ d91df167
...@@ -9,7 +9,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", { ...@@ -9,7 +9,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
this.setData( options ); this.setData( options );
} }
this._createShapeDom(); this._createShapeDom();
this.setData( "layout", {} );
}, },
_createShapeDom: function () { _createShapeDom: function () {
this.rc = new kity.Group(); this.rc = new kity.Group();
...@@ -37,7 +37,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", { ...@@ -37,7 +37,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
getContRc: function () { getContRc: function () {
var groups = this.rc.getShapesByType( 'group' ), var groups = this.rc.getShapesByType( 'group' ),
result; result;
utils.each( groups, function ( i, p ) { Utils.each( groups, function ( i, p ) {
if ( p.getData( 'rctype' ) == 'contrc' ) { if ( p.getData( 'rctype' ) == 'contrc' ) {
result = p; result = p;
return false; return false;
...@@ -48,7 +48,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", { ...@@ -48,7 +48,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
getBgRc: function () { getBgRc: function () {
var groups = this.rc.getShapesByType( 'group' ), var groups = this.rc.getShapesByType( 'group' ),
result; result;
utils.each( groups, function ( i, p ) { Utils.each( groups, function ( i, p ) {
if ( p.getData( 'rctype' ) == 'bgrc' ) { if ( p.getData( 'rctype' ) == 'bgrc' ) {
result = p; result = p;
return false; return false;
......
src/module/_example.js deleted 100644 → 0
View file @ e4083e3a
/**
* 模块初始化函数：模块名称大写，以 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
src/module/basestyle.js
View file @ d91df167
...@@ -13,11 +13,13 @@ KityMinder.registerModule( "basestylemodule", function () { ...@@ -13,11 +13,13 @@ KityMinder.registerModule( "basestylemodule", function () {
utils.each(nodes,function(i,n){ utils.each(nodes,function(i,n){
n.setData('bold'); n.setData('bold');
n.getTextShape().setAttr('font-weight'); n.getTextShape().setAttr('font-weight');
km.updateLayout(n)
}) })
}else{ }else{
utils.each(nodes,function(i,n){ utils.each(nodes,function(i,n){
n.setData('bold',true); n.setData('bold',true);
n.getTextShape().setAttr('font-weight','bold'); n.getTextShape().setAttr('font-weight','bold');
km.updateLayout(n)
}) })
} }
}, },
...@@ -43,11 +45,13 @@ KityMinder.registerModule( "basestylemodule", function () { ...@@ -43,11 +45,13 @@ KityMinder.registerModule( "basestylemodule", function () {
utils.each(nodes,function(i,n){ utils.each(nodes,function(i,n){
n.setData('italic'); n.setData('italic');
n.getTextShape().setAttr('font-style'); n.getTextShape().setAttr('font-style');
km.updateLayout(n)
}) })
}else{ }else{
utils.each(nodes,function(i,n){ utils.each(nodes,function(i,n){
n.setData('italic',true); n.setData('italic',true);
n.getTextShape().setAttr('font-style','italic'); n.getTextShape().setAttr('font-style','italic');
km.updateLayout(n)
}) })
} }
}, },
......
src/module/editor.receiver.js
View file @ d91df167
...@@ -88,7 +88,6 @@ Minder.Receiver = kity.createClass('Receiver',{ ...@@ -88,7 +88,6 @@ Minder.Receiver = kity.createClass('Receiver',{
this.textShape.setContent(text); this.textShape.setContent(text);
this.setContainerStyle(); this.setContainerStyle();
this.minderNode.setText(text); this.minderNode.setText(text);
this.km.renderNode(this.minderNode);
this.km.updateLayout(this.minderNode); this.km.updateLayout(this.minderNode);
this.setBaseOffset(); this.setBaseOffset();
this.updateTextData(); this.updateTextData();
......
src/module/font.js
View file @ d91df167
KityMinder.registerModule( "fontmodule", function () { KityMinder.registerModule( "fontmodule", function () {
return { 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": { "commands": {
"fontcolor": kity.createClass( "fontcolorCommand", { "forecolor": kity.createClass( "fontcolorCommand", {
base: Command, base: Command,
execute: function ( km, color ) { execute: function ( km, color ) {
...@@ -23,6 +39,19 @@ KityMinder.registerModule( "fontmodule", function () { ...@@ -23,6 +39,19 @@ KityMinder.registerModule( "fontmodule", function () {
utils.each( nodes, function ( i, n ) { utils.each( nodes, function ( i, n ) {
n.setData( 'fontfamily', family ); n.setData( 'fontfamily', family );
n.getTextShape().setAttr( 'font-family', 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 () { ...@@ -35,6 +64,7 @@ KityMinder.registerModule( "fontmodule", function () {
e.node.getTextShape().setAttr( 'font-family', val ); e.node.getTextShape().setAttr( 'font-family', val );
} }
if ( val = e.node.getData( 'fontcolor' ) ) { if ( val = e.node.getData( 'fontcolor' ) ) {
console.log( val );
e.node.getTextShape().fill( val ); e.node.getTextShape().fill( val );
} }
} }
......
src/module/keyboard.js
View file @ d91df167
...@@ -60,9 +60,7 @@ KityMinder.registerModule( "KeyboardModule", function () { ...@@ -60,9 +60,7 @@ KityMinder.registerModule( "KeyboardModule", function () {
buildPositionNetwork( this.getRoot() ); buildPositionNetwork( this.getRoot() );
}, },
keydown: function ( e ) { keydown: function ( e ) {
switch ( e.originEvent.keyCode ) { switch ( e.originEvent.keyCode ) {
case keymap.Enter: case keymap.Enter:
this.execCommand( 'appendSiblingNode', new MinderNode( 'Topic' ) ); this.execCommand( 'appendSiblingNode', new MinderNode( 'Topic' ) );
e.preventDefault(); e.preventDefault();
......
src/module/layout.default.js
View file @ d91df167
...@@ -3,6 +3,7 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -3,6 +3,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
var minderWidth = _target.clientWidth; var minderWidth = _target.clientWidth;
var minderHeight = _target.clientHeight; var minderHeight = _target.clientHeight;
var minder = this; var minder = this;
//收缩-展开子树的节点
var ShIcon = kity.createClass( "DefaultshIcon", ( function () { var ShIcon = kity.createClass( "DefaultshIcon", ( function () {
return { return {
constructor: function ( node ) { constructor: function ( node ) {
...@@ -59,336 +60,222 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -59,336 +60,222 @@ KityMinder.registerModule( "LayoutDefault", function () {
} }
}; };
} )() ); } )() );
//主分支 //求并集
var MainBranch = kity.createClass( "DefaultMainBranch", ( function () { var uSet = function ( a, b ) {
return { for ( var i = 0; i < a.length; i++ ) {
constructor: function ( node ) { var idx = b.indexOf( a[ i ] );
this._node = node; if ( idx !== -1 ) {
var bgRC = node.getBgRc(); b.splice( idx, 1 );
var contRC = node.getContRc(); }
var rect = this._rect = new kity.Rect(); }
var shicon = this._shicon = new ShIcon( node ); return a.concat( b );
bgRC.addShape( rect ); };
var connect = this._connect = new kity.Group(); //样式的配置（包括颜色、字号等）
var bezier = connect.bezier = new kity.Bezier(); var nodeStyles = {
var circle = connect.circle = new kity.Circle(); "root": {
connect.addShapes( [ bezier, circle ] ); color: "white",
minder.getRenderContainer().addShape( connect ).bringTop( minder.getRoot().getRenderContainer() ); fill: "cadetblue",
var Layout = { fontSize: 20,
radius: 5, padding: [ 10.5, 10, 10.5, 10 ],
margin: [ 0, 0, 0, 0 ],
radius: 15,
highlight: "chocolate"
},
"main": {
fill: "white", fill: "white",
color: "black", color: "#333",
padding: [ 5.5, 20, 5.5, 20 ], padding: [ 5.5, 20, 5.5, 20 ],
fontSize: 20, fontSize: 14,
margin: [ 0, 10, 30, 50 ], margin: [ 0, 10, 30, 50 ],
shape: this, radius: 5,
align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ), highlight: "chocolate"
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 () { "sub": {
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" ), stroke: new kity.Pen( "white", 1 ).setLineCap( "round" ).setLineJoin( "round" ),
color: "white", color: "white",
padding: [ 5, 10, 5.5, 10 ],
fontSize: 12, fontSize: 12,
margin: [ 0, 10, 20, 5 ], margin: [ 0, 10, 20, 5 ],
shape: this, padding: [ 5, 10, 5.5, 10 ],
align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ), highlight: "chocolate"
appendside: node.getData( "layout" ).appendside }
}; };
node.setData( "layout", Layout ); //更新背景
contRC.setTransform( new kity.Matrix().translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 10 ) ); var updateBg = function ( node ) {
highlightshape.fill( "chocolate" ).translate( -1, 0 ); var nodeType = node.getType();
this.update(); var nodeStyle = nodeStyles[ nodeType ];
},
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 Layout = node.getData( "layout" );
var Shape = node.getRenderContainer(); switch ( node.getType() ) {
var sX, sY = parentLayout.y; case "root":
var nodeX, nodeY = Shape.getRenderBox().closurePoints[ 1 ].y; case "main":
if ( Layout.appendside === "left" ) { if ( !Layout.bgRect ) {
sX = parentBox.closurePoints[ 1 ].x - parentLayout.margin[ 1 ]; node.getBgRc().addShape( Layout.bgRect = new kity.Rect() );
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 );
} }
}, Layout.bgRect.fill( nodeStyle.fill ).setRadius( nodeStyle.radius );
updateShIcon: function () { break;
this._shicon.update(); case "sub":
}, var underline = Layout.underline = new kity.Path();
clear: function () { var highlightshape = Layout.highlightshape = new kity.Rect();
this._node.getBgRc().clear(); node.getBgRc().addShapes( [ highlightshape, underline ] );
this._connect.remove(); break;
this._shicon.remove(); default:
break;
} }
}; };
} )() ); //初始化样式
//根节点 var initLayout = function ( node ) {
var RootShape = kity.createClass( "DefaultRootShape", ( function () { var Layout = node.getData( "layout" ) || {};
return { var nodeType = node.getType();
constructor: function ( node ) { var nodeStyle = nodeStyles[ nodeType ];
var bgRC = node.getBgRc(); var txtShape = node.getTextShape();
var contRC = node.getContRc(); txtShape.fill( nodeStyle.color ).setSize( nodeStyle.fontSize );
var rect = this._rect = new kity.Rect(); if ( nodeType === "root" ) {
bgRC.addShape( rect ); Layout.leftList = [];
this._node = node; Layout.rightList = [];
var Layout = { Layout.leftHeight = 0;
shape: this, Layout.rightHeight = 0;
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" ); var updateShapeByCont = function ( node ) {
contRC.setTransform( new kity.Matrix().translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 ) ); var contRc = node.getContRc();
this.update(); var nodeType = node.getType();
}, var nodeStyle = nodeStyles[ nodeType ];
update: function () { var _contRCWidth = contRc.getWidth();
var node = this._node; var _contRCHeight = contRc.getHeight();
var contRC = node.getContRc();
var rect = this._rect;
var connect = this._connect;
var Layout = node.getData( "layout" ); var Layout = node.getData( "layout" );
var _contRCWidth = contRC.getWidth(); switch ( nodeType ) {
var _contRCHeight = contRC.getHeight(); case "root":
var _rectWidth = _contRCWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ]; case "main":
var _rectHeight = _contRCHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ]; Layout.bgRect.setWidth( _contRCWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ] );
rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( node.getData( "highlight" ) ? "chocolate" : Layout.fill ).setRadius( Layout.radius ); Layout.bgRect.setHeight( _contRCHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ] );
}, break;
clear: function () { case "sub":
this._node.getBgRc().clear(); 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() ) );
}; };
} )() ); //计算节点在垂直方向的位置
//流程：绘制->计算Y坐标->计算X坐标->translate
//绘制node
var drawNode = function ( node ) {
var shape = node.getData( "layout" ).shape;
shape.update();
};
//以某个节点为seed对整体高度进行更改计算
var updateLayoutVertical = function ( node, parent, action ) { var updateLayoutVertical = function ( node, parent, action ) {
var effectSet = [ node ]; //用于返回受影响的节点集 var root = minder.getRoot();
if ( !parent ) { var effectSet = [ node ];
return effectSet; if ( action === "remove" ) {
effectSet = [];
} }
var Layout = node.getData( "layout" ); var Layout = node.getData( "layout" );
var marginTop = Layout.margin[ 0 ], var nodeShape = node.getRenderContainer();
marginBottom = Layout.margin[ 2 ]; var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var appendside = Layout.appendside; var appendside = Layout.appendside;
var branchheight = Layout.branchheight || node.getRenderContainer().getHeight() + marginTop + marginBottom; var countBranchHeight = function ( node, side ) {
var countY = function ( node, appendside ) { var nodeStyle = nodeStyles[ node.getType() ];
var nodeLayout = node.getData( "layout" ); var selfHeight = node.getRenderContainer().getHeight() + nodeStyle.margin[ 0 ] + nodeStyle.margin[ 2 ];
var centerY = nodeLayout.y; var childHeight = ( function () {
var nodeBranchHeight = nodeLayout[ appendside + "Height" ] || nodeLayout.branchheight; var sum = 0;
var nodeChildren = nodeLayout[ appendside + "List" ] || node.getChildren(); var children;
var sY = centerY - nodeBranchHeight / 2; if ( !side ) {
if ( nodeChildren.length === 1 ) { children = node.getChildren();
var childrenLayout = nodeChildren[ 0 ].getData( "layout" );
childrenLayout.y = centerY;
} else { } else {
for ( var i = 0; i < nodeChildren.length; i++ ) { children = node.getData( "layout" )[ side + "List" ];
var childrenLayout1 = nodeChildren[ i ].getData( "layout" );
if ( !childrenLayout1.shape ) break;
var childBranchHeight = childrenLayout1.branchheight;
childrenLayout1.y = sY + marginTop + childBranchHeight / 2;
sY += childBranchHeight;
}
} }
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++ ) { for ( var i = 0; i < children.length; i++ ) {
var childLayout = children[ i ].getData( "layout" ); var childLayout = children[ i ].getData( "layout" );
if ( childLayout.shape ) sum += childLayout.branchheight; if ( children[ i ].getRenderContainer().getHeight() !== 0 )
sum += childLayout.branchheight;
} }
return sum; return sum;
} )();
if ( side ) {
return childHeight;
} else {
return ( selfHeight > childHeight ? selfHeight : childHeight );
}
}; };
var prt = parent; if ( nodeType === "root" ) {
do { Layout.y = minderHeight / 2;
var minH = prt.getRenderContainer().getHeight() + marginTop + marginBottom; effectSet.push( node );
var childH = getChildHeight( prt, appendside ); } else {
var branchH = ( minH > childH ? minH : childH ); 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 );
}
var parentLayout = parent.getData( "layout" );
var parentShape = parent.getRenderContainer();
var prt = node.getParent() || parent;
//自底向上更新祖先元素的branchheight值
while ( prt ) {
var prtLayout = prt.getData( "layout" ); var prtLayout = prt.getData( "layout" );
if ( prt.getType() === "root" ) {
if ( prt.getParent() ) { prtLayout[ appendside + "Height" ] = countBranchHeight( prt, appendside );
prtLayout.branchheight = branchH + prtLayout.margin[ 0 ] + prtLayout.margin[ 2 ];
} else { } else {
prtLayout[ appendside + "Height" ] = branchH + prtLayout.margin[ 0 ] + prtLayout.margin[ 2 ]; prtLayout.branchheight = countBranchHeight( prt );
} }
prt = prt.getParent(); prt = prt.getParent();
} while ( prt ); }
//遍历 //自顶向下更新受影响一侧的y值
var _buffer = [ minder.getRoot() ]; var sideList = root.getData( "layout" )[ appendside + "List" ];
while ( _buffer.length !== 0 ) { var _buffer = [ root ];
_buffer = _buffer.concat( countY( _buffer[ 0 ], appendside ) ); 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 ] ); effectSet.push( _buffer[ 0 ] );
_buffer.shift(); _buffer.shift();
} }
}
return effectSet; return effectSet;
}; };
//计算节点在水平方向的位置
//以某个节点为seed对水平方向进行调整(包括调整子树)
var updateLayoutHorizon = function ( node ) { 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 ]; var _buffer = [ node ];
while ( _buffer.length !== 0 ) { while ( _buffer.length !== 0 ) {
var parent = _buffer[ 0 ].getParent(); var prt = _buffer[ 0 ].getParent();
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() ); _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
if ( !parent ) { if ( !prt ) {
effectSet.push( _buffer[ 0 ] ); Layout.x = minderWidth / 2;
_buffer.shift(); _buffer.shift();
continue; continue;
} }
var nodeLayout = _buffer[ 0 ].getData( "layout" ); var parentLayout = prt.getData( "layout" );
var appendside = nodeLayout.appendside; var parentWidth = prt.getRenderContainer().getWidth();
var selfWidth = _buffer[ 0 ].getRenderContainer().getWidth(); var parentStyle = nodeStyles[ prt.getType() ];
var childLayout = _buffer[ 0 ].getData( "layout" );
var parentLayout = parent.getData( "layout" ); var childStyle = nodeStyles[ _buffer[ 0 ].getType() ];
var parentWidth = parent.getRenderContainer().getWidth(); if ( parentLayout.align === "center" ) {
if ( parentLayout.align === "center" ) parentWidth = parentWidth / 2; parentWidth = parentWidth / 2;
}
var parentX = parentLayout.x; if ( childLayout.appendside === "left" ) {
switch ( appendside ) { childLayout.x = parentLayout.x - parentWidth - parentStyle.margin[ 1 ] - childStyle.margin[ 3 ];
case "left": } else {
nodeLayout.x = parentX - parentWidth - parentLayout.margin[ 1 ] - nodeLayout.margin[ 3 ]; childLayout.x = parentLayout.x + parentWidth + parentStyle.margin[ 1 ] + childStyle.margin[ 3 ];
break;
case "right":
nodeLayout.x = parentX + parentWidth + parentLayout.margin[ 1 ] + nodeLayout.margin[ 3 ];
break;
default:
break;
} }
effectSet.push( _buffer[ 0 ] ); effectSet.push( _buffer[ 0 ] );
_buffer.shift(); _buffer.shift();
} }
return effectSet; return effectSet;
}; };
//调整node的位置
var translateNode = function ( node ) { var translateNode = function ( node ) {
var Layout = node.getData( "layout" ); var Layout = node.getData( "layout" );
var nodeShape = node.getRenderContainer(); var nodeShape = node.getRenderContainer();
...@@ -406,203 +293,315 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -406,203 +293,315 @@ KityMinder.registerModule( "LayoutDefault", function () {
nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y - _rectHeight / 2 ) ); nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y - _rectHeight / 2 ) );
break; break;
} }
if ( Layout.shape ) {
if ( Layout.shape.updateConnect ) Layout.shape.updateConnect();
if ( Layout.shape.updateShIcon ) Layout.shape.updateShIcon();
}
}; };
var updateConnectAndshIcon = function ( node ) {
//求并集 var nodeType = node.getType();
var uSet = function ( a, b ) { var Layout = node.getData( "layout" );
for ( var i = 0; i < a.length; i++ ) { var connect;
var idx = b.indexOf( a[ i ] ); //更新连线
if ( idx !== -1 ) { if ( nodeType === "main" ) {
b.splice( idx, 1 ); 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 );
}
}
//更新收放icon
if ( nodeType !== "root" ) {
if ( !Layout.shicon ) {
Layout.shicon = new ShIcon( node );
}
Layout.shicon.update();
} }
return a.concat( b );
}; };
var _style = { var _style = {
renderNode: function ( node ) { highlightNode: function ( node ) {
drawNode( node ); var highlight = node.getData( "highlight" );
}, var nodeType = node.getType();
initStyle: function () { var nodeStyle = nodeStyles[ nodeType ];
//绘制root并且调整到正确位置 var Layout = node.getData( "layout" );
var _root = this.getRoot(); switch ( nodeType ) {
minder.handelNodeInsert( _root ); case "root":
var rc = new RootShape( _root ); case "main":
translateNode( _root ); if ( highlight ) {
var box = _root.getRenderContainer().getRenderBox(); Layout.bgRect.fill( nodeStyle.highlight );
_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 { } else {
Layout.leftList.push( _buffer[ i ] ); Layout.bgRect.fill( nodeStyle.fill );
} }
} else {
break; break;
case "sub":
if ( highlight ) {
Layout.highlightshape.fill( nodeStyle.highlight ).setOpacity( 1 );
} else {
Layout.highlightshape.setOpacity( 0 );
} }
} break;
} default:
//如果是从其他style切过来的，需要重新布局 break;
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();
} }
}, },
updateLayout: function ( node ) { updateLayout: function ( node ) {
drawNode( node ); this._fire( new MinderEvent( "beforeRenderNode", {
var set = updateLayoutHorizon( node ); 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++ ) { for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] ); translateNode( set[ i ] );
updateConnectAndshIcon( set[ i ] );
} }
}, },
appendChildNode: function ( parent, node, index ) { initStyle: function () {
minder.handelNodeInsert( node ); var _root = minder.getRoot();
var _root = this.getRoot(); minder.handelNodeInsert( _root );
var childbranch; //设置root的align
if ( !node.getData( "layout" ) ) node.setData( "layout", {} ); _root.getData( "layout" ).align = "center";
if ( parent.getChildren().indexOf( node ) === -1 ) { updateBg( _root );
if ( !index ) parent.appendChild( node ); initLayout( _root );
else parent.insertChild( node, index );
}
var parentLayout = parent.getData( "layout" );
var Layout = node.getData( "layout" );
this._fire( new MinderEvent( "beforeRenderNode", { this._fire( new MinderEvent( "beforeRenderNode", {
node: node node: _root
}, false ) ); }, false ) );
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" ) { if ( parent.getType() === "root" ) {
node.setType( "main" ); var sideList = parentLayout[ Layout.appendside + "List" ];
var leftList = parentLayout.leftList; var idx = sideList.indexOf( sibling );
var rightList = parentLayout.rightList; sideList.splice( idx + 1, 0, node );
var sibling = parent.getChildren();
var aside = Layout.appendside;
if ( !aside ) {
if ( rightList.length > 1 && rightList.length > leftList.length ) {
aside = "left";
} else {
aside = "right";
} }
Layout.appendside = aside; } else {
} if ( parent.getType() !== "root" ) {
if ( leftList.indexOf( node ) !== -1 ) { 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.appendside = "left";
} else if ( rightList.indexOf( node ) !== -1 ) { Layout.align = "right";
} else {
Layout.appendside = "right"; Layout.appendside = "right";
Layout.align = "left";
}
}
if ( insert ) {
if ( parent.getType() === "root" ) {
var sideList1 = parentLayout[ Layout.appendside + "List" ];
var idx1 = sideList1.length;
parent.insertChild( node, idx1 );
sideList1.push( node );
} else { } else {
parentLayout.appendside = aside; parent.insertChild( node );
parentLayout[ aside + "List" ].push( node ); }
}
} }
childbranch = new MainBranch( node ); //设置分支类型
if ( parent.getType() === "root" ) {
node.setType( "main" );
} else { } else {
node.setType( "sub" ); 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", { this._fire( new MinderEvent( "RenderNode", {
node: node node: node
}, false ) ); }, false ) );
updateShapeByCont( node );
var set1 = updateLayoutVertical( node, parent, "append" ); var set1 = updateLayoutVertical( node, parent, "append" );
var set2 = updateLayoutHorizon( node ); var set2 = updateLayoutHorizon( node );
var set = uSet( set1, set2 ); var set = uSet( set1, set2 );
for ( var i = 0; i < set.length; i++ ) { for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] ); translateNode( set[ i ] );
var box = set[ i ].getRenderContainer().getRenderBox(); updateConnectAndshIcon( set[ i ] );
set[ i ].setPoint( box.x, box.y );
} }
//var shicon = new ShIcon( node );
}, },
appendSiblingNode: function ( sibling, 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 parent = sibling.getParent();
var index = sibling.getIndex() + 1; this.appendChildNode( parent, node, sibling );
var appendside = siblingLayout.appendside;
Layout.appendside = appendside;
this.appendChildNode( parent, node, index );
}, },
removeNode: function ( nodes ) { removeNode: function ( nodes ) {
var root = this.getRoot(); while ( nodes.length !== 0 ) {
for ( var i = 0; i < nodes.length; i++ ) { var parent = nodes[ 0 ].getParent();
var parent = nodes[ i ].getParent(); var nodeLayout = nodes[ 0 ].getData( "layout" );
if ( parent ) { if ( parent.getType() === "root" ) {
var _buffer = [ nodes[ i ] ]; var sideList = parent.getData( "layout" )[ nodeLayout.appendside + "List" ];
var parentLayout = parent.getData( "layout" ); var index = sideList.indexOf( nodes[ 0 ] );
while ( _buffer.length !== 0 ) { sideList.splice( index, 1 );
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer[ 0 ].getData( "layout" ).shape.clear();
_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 );
} }
parent.removeChild( nodes[ i ] ); parent.removeChild( nodes[ 0 ] );
var set = updateLayoutVertical( nodes[ i ], parent, "remove" ); var set = updateLayoutVertical( nodes[ 0 ], parent, "remove" );
for ( var j = 0; j < set.length; j++ ) { for ( var j = 0; j < set.length; j++ ) {
translateNode( set[ 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 Layout = _buffer[ 0 ].getData( "layout" );
Layout.connect.remove();
Layout.shicon.remove();
} catch ( error ) {
console.log( "isRemoved" );
}
//检测当前节点是否在选中的数组中，如果在的话，从选中数组中去除
var idx = nodes.indexOf( _buffer[ 0 ] );
if ( idx !== -1 ) {
nodes.splice( idx, 1 );
} }
_buffer.shift();
} }
} }
}; },
this.addLayoutStyle( "default", _style ); expandNode: function ( ico ) {
return { var isExpand = ico.icon.switchState();
"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 node = ico.icon._node;
var _buffer; var _buffer = node.getChildren();
if ( isShow ) {
_buffer = node.getChildren();
while ( _buffer.length !== 0 ) { while ( _buffer.length !== 0 ) {
minder.appendChildNode( _buffer[ 0 ].getParent(), _buffer[ 0 ] ); var Layout = _buffer[ 0 ].getData( "layout" );
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() ); if ( isExpand ) {
_buffer.shift(); var parent = _buffer[ 0 ].getParent();
} minder.appendChildNode( parent, _buffer[ 0 ] );
Layout.connect = null;
Layout.shicon = null;
} else { } 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(); _buffer[ 0 ].getRenderContainer().remove();
} catch ( error ) {} Layout.connect.remove();
Layout.shicon.remove();
}
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() ); _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer.shift(); _buffer.shift();
} }
var set = updateLayoutVertical( node, node.getParent(), "append" ); 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++ ) { for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ 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 ] );
// }
// }
// }
// }
// }
}; };
} ); } );
\ No newline at end of file
src/module/layout.js
View file @ d91df167
...@@ -7,6 +7,9 @@ KityMinder.registerModule( "LayoutModule", function () { ...@@ -7,6 +7,9 @@ KityMinder.registerModule( "LayoutModule", function () {
getLayoutStyle: function ( name ) { getLayoutStyle: function ( name ) {
return this._layoutStyles[ name ]; return this._layoutStyles[ name ];
}, },
getLayoutStyleItems: function () {
return this._layoutStyles;
},
getCurrentStyle: function () { getCurrentStyle: function () {
var _root = this.getRoot(); var _root = this.getRoot();
return _root.getData( "currentstyle" ); return _root.getData( "currentstyle" );
...@@ -16,12 +19,13 @@ KityMinder.registerModule( "LayoutModule", function () { ...@@ -16,12 +19,13 @@ KityMinder.registerModule( "LayoutModule", function () {
_root.setData( "currentstyle", name ); _root.setData( "currentstyle", name );
return name; return name;
}, },
renderNode: function ( node ) { highlightNode: function ( node ) {
var curStyle = this.getCurrentStyle(); var curStyle = this.getCurrentStyle();
this.getLayoutStyle( curStyle ).renderNode.call( this, node ); this.getLayoutStyle( curStyle ).highlightNode.call( this, node );
}, },
initStyle: function () { initStyle: function () {
var curStyle = this.getCurrentStyle(); var curStyle = this.getCurrentStyle();
this.getRenderContainer().clear();
this.getLayoutStyle( curStyle ).initStyle.call( this ); this.getLayoutStyle( curStyle ).initStyle.call( this );
}, },
appendChildNode: function ( parent, node, index ) { appendChildNode: function ( parent, node, index ) {
...@@ -39,6 +43,10 @@ KityMinder.registerModule( "LayoutModule", function () { ...@@ -39,6 +43,10 @@ KityMinder.registerModule( "LayoutModule", function () {
updateLayout: function ( node ) { updateLayout: function ( node ) {
var curStyle = this.getCurrentStyle(); var curStyle = this.getCurrentStyle();
this.getLayoutStyle( curStyle ).updateLayout.call( this, node ); this.getLayoutStyle( curStyle ).updateLayout.call( this, node );
},
expandNode: function ( ico ) {
var curStyle = this.getCurrentStyle();
this.getLayoutStyle( curStyle ).expandNode.call( this, ico );
} }
} ); } );
kity.extendClass( MinderNode, { kity.extendClass( MinderNode, {
...@@ -128,11 +136,11 @@ KityMinder.registerModule( "LayoutModule", function () { ...@@ -128,11 +136,11 @@ KityMinder.registerModule( "LayoutModule", function () {
for ( var i = 0; i < selectedNodes.length; i++ ) { for ( var i = 0; i < selectedNodes.length; i++ ) {
_buffer.push( selectedNodes[ i ] ); _buffer.push( selectedNodes[ i ] );
} }
while ( _buffer.length !== 1 ) { do {
var parent = _buffer[ 0 ].getParent(); var parent = _buffer[ 0 ].getParent();
if ( parent && _buffer.indexOf( parent ) === -1 ) _buffer.push( parent ); if ( parent && _buffer.indexOf( parent ) === -1 ) _buffer.push( parent );
_buffer.shift(); _buffer.shift();
} } while ( _buffer.length !== 1 );
km.removeNode( selectedNodes ); km.removeNode( selectedNodes );
km.select( _buffer[ 0 ] ); km.select( _buffer[ 0 ] );
} }
...@@ -148,11 +156,18 @@ KityMinder.registerModule( "LayoutModule", function () { ...@@ -148,11 +156,18 @@ KityMinder.registerModule( "LayoutModule", function () {
}, },
"events": { "events": {
"ready": function () { "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": { "defaultOptions": {
"layoutstyle": "default" "defaultlayoutstyle": "default"
} }
}; };
} ); } );
\ No newline at end of file
themes/default/_css/button.css 0 → 100755
View file @ d91df167
/*普通按钮*/
.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
themes/default/_css/buttonicon.css 0 → 100755
View file @ d91df167
.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;
}
themes/default/_css/colorpicker.css 0 → 100755
View file @ d91df167
.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
themes/default/_css/combobox.css 0 → 100644
View file @ d91df167
.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);
}
themes/default/_css/comboboxmenu.css 0 → 100644
View file @ d91df167
.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
themes/default/_css/dialog.css 0 → 100644
View file @ d91df167
.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
themes/default/_css/dialogsize.css 0 → 100644
View file @ d91df167
/*图片上传*/
.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
themes/default/_css/import.css 0 → 100755
View file @ d91df167
@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";
themes/default/_css/kityminder.css 0 → 100755
View file @ d91df167
.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
themes/default/_css/popup.css 0 → 100644
View file @ d91df167
.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;
}
themes/default/_css/separator.css 0 → 100755
View file @ d91df167
.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
themes/default/_css/splitbutton.css 0 → 100755
View file @ d91df167
.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);
}
themes/default/_css/tab.css 0 → 100644
View file @ d91df167
.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;
}
themes/default/_css/tooltip.css 0 → 100644
View file @ d91df167
.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