Skip to content

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

ui optimize

parent 212a4e8c
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 173 deletions
configure.js
View file @ 320552b4
window.KITYMINDER_CONFIG = { window.KITYMINDER_CONFIG = {
//定义工具栏 //定义工具栏
toolbars:[ toolbars: [
'undo redo | bold italic | forecolor | layoutstyle | fontfamily fontsize | saveto' 'hand | undo redo | bold italic | forecolor | layoutstyle | fontfamily fontsize | saveto'
] ]
//设置主题 //设置主题
......
dist/dev.php
View file @ 320552b4
...@@ -22,6 +22,7 @@ $dependency = Array( ...@@ -22,6 +22,7 @@ $dependency = Array(
,'src/module/layout.default.js' ,'src/module/layout.default.js'
,'src/module/layout.bottom.js' ,'src/module/layout.bottom.js'
,'src/core/minder.select.js' ,'src/core/minder.select.js'
,'src/module/draggable.js'
,'src/module/keyboard.js' ,'src/module/keyboard.js'
,'src/module/mouse.js' ,'src/module/mouse.js'
,'src/module/history.js' ,'src/module/history.js'
...@@ -53,6 +54,7 @@ $dependency = Array( ...@@ -53,6 +54,7 @@ $dependency = Array(
,'src/adapter/button.js' ,'src/adapter/button.js'
,'src/adapter/combobox.js' ,'src/adapter/combobox.js'
,'src/adapter/saveto.js' ,'src/adapter/saveto.js'
,'src/adapter/hand.js'
,'src/protocal/plain.js' ,'src/protocal/plain.js'
,'src/protocal/json.js' ,'src/protocal/json.js'
); );
......
kity @ 2fc98bc1
Subproject commit 97750df27bf46fbb96d182a25e39768f63f7545c Subproject commit 2fc98bc18520a511cbf9010cf7fe78e5e5dde255
lang/zh-cn/zh-cn.js
View file @ 320552b4
KityMinder.LANG['zh-cn'] = { KityMinder.LANG[ 'zh-cn' ] = {
'tooltips':{ 'tooltips': {
'undo':'撤销', 'redo':'重做', 'undo': '撤销',
'bold':'加粗', 'italic':'斜体', 'redo': '重做',
'forecolor':'字体颜色', 'fontfamily':'字体', 'fontsize':'字号', 'bold': '加粗',
'layoutstyle':'选择主题', 'italic': '斜体',
'saveto':'另存为...' 'forecolor': '字体颜色',
'fontfamily': '字体',
'fontsize': '字号',
'layoutstyle': '选择主题',
'saveto': '另存为...'
},
'popupcolor': {
'clearColor': '清空颜色',
'standardColor': '标准颜色',
'themeColor': '主题颜色'
}, },
'popupcolor':{ 'hand': '允许拖拽'
'clearColor':'清空颜色',
'standardColor':'标准颜色',
'themeColor':'主题颜色'
}
}; };
\ No newline at end of file
src/core/minder.event.js
View file @ 320552b4
...@@ -14,6 +14,9 @@ kity.extendClass( Minder, { ...@@ -14,6 +14,9 @@ kity.extendClass( Minder, {
// TODO: mousemove lazy bind // TODO: mousemove lazy bind
_bindPaperEvents: function () { _bindPaperEvents: function () {
this._paper.on( 'click mousedown mouseup mousemove touchstart touchmove touchend', this._firePharse.bind( this ) ); this._paper.on( 'click mousedown mouseup mousemove touchstart touchmove touchend', this._firePharse.bind( this ) );
if ( window ) {
window.addEventListener( 'resize', this._firePharse.bind( this ) );
}
}, },
_bindKeyboardEvents: function () { _bindKeyboardEvents: function () {
if ( ( navigator.userAgent.indexOf( 'iPhone' ) == -1 ) && ( navigator.userAgent.indexOf( 'iPod' ) == -1 ) && ( navigator.userAgent.indexOf( 'iPad' ) == -1 ) ) { if ( ( navigator.userAgent.indexOf( 'iPhone' ) == -1 ) && ( navigator.userAgent.indexOf( 'iPod' ) == -1 ) && ( navigator.userAgent.indexOf( 'iPad' ) == -1 ) ) {
...@@ -23,6 +26,7 @@ kity.extendClass( Minder, { ...@@ -23,6 +26,7 @@ kity.extendClass( Minder, {
}, },
_firePharse: function ( e ) { _firePharse: function ( e ) {
var beforeEvent, preEvent, executeEvent; var beforeEvent, preEvent, executeEvent;
beforeEvent = new MinderEvent( 'before' + e.type, e, true ); beforeEvent = new MinderEvent( 'before' + e.type, e, true );
if ( this._fire( beforeEvent ) ) { if ( this._fire( beforeEvent ) ) {
return; return;
......
src/module/dragble.js deleted 100644 → 0
View file @ 212a4e8c
var Draggable = ( function () {
var Paper = kity.Paper;
var touchable = window.ontouchstart !== undefined;
var DRAG_START_EVENT = touchable ? 'touchstart' : 'mousedown',
DRAG_MOVE_EVENT = touchable ? 'touchmove' : 'mousemove',
DRAG_END_EVENT = touchable ? 'touchend' : 'mouseup';
return kity.createClass( {
drag: function ( opt ) {
if ( this.dragEnabled ) {
return;
}
var dragStart = opt && opt.start || this.dragStart,
dragMove = opt && opt.move || this.dragMove,
dragEnd = opt && opt.end || this.dragEnd,
dragTarget = opt && opt.target || this.dragTarget || this,
me = this;
this.dragEnabled = true;
this.dragTarget = dragTarget;
function bindEvents( paper ) {
var startPosition, lastPosition, dragging = false;
var dragFn = function ( e ) {
if ( !dragging ) {
paper.off( DRAG_MOVE_EVENT, dragFn );
}
if ( e.originEvent.touches && e.originEvent.touches.length !== 1 ) return;
var currentPosition = e.getPosition();
var movement = {
x: currentPosition.x - startPosition.x,
y: currentPosition.y - startPosition.y
};
var delta = {
x: currentPosition.x - lastPosition.x,
y: currentPosition.y - lastPosition.y
};
var dragInfo = {
position: currentPosition,
movement: movement,
delta: delta
};
lastPosition = currentPosition;
if ( dragMove ) {
dragMove.call( me, dragInfo );
} else if ( me instanceof Paper ) {
// treate paper drag different
var view = me.getViewPort();
view.center.x -= delta.x;
view.center.y -= delta.y;
me.setViewPort( view );
} else {
me.translate( delta.x, delta.y );
}
dragTarget.trigger( 'dragmove', dragInfo );
e.stopPropagation();
e.preventDefault();
};
dragTarget.on( DRAG_START_EVENT, dragTarget._dragStartHandler = function ( e ) {
if ( e.originEvent.button ) {
return;
}
dragging = true;
var dragInfo = {
position: lastPosition = startPosition = e.getPosition()
};
if ( dragStart ) {
var cancel = dragStart.call( me, dragInfo ) === false;
if ( cancel ) {
return;
}
}
paper.on( DRAG_MOVE_EVENT, dragFn );
dragTarget.trigger( 'dragstart', dragInfo );
e.stopPropagation();
e.preventDefault();
} );
paper.on( DRAG_END_EVENT, dragTarget._dragEndHandler = function ( e ) {
if ( dragging ) {
dragging = false;
if ( dragEnd ) {
dragEnd.call( me );
}
paper.off( DRAG_MOVE_EVENT, dragFn );
dragTarget.trigger( 'dragend' );
e.stopPropagation();
e.preventDefault();
}
} );
}
if ( me instanceof Paper ) {
bindEvents( me );
} else if ( me.getPaper() ) {
bindEvents( me.getPaper() );
} else {
var listener = function ( e ) {
if ( e.targetShape.getPaper() ) {
bindEvents( e.targetShape.getPaper() );
me.off( 'add', listener );
me.off( 'treeadd', listener );
}
};
me.on( 'add treeadd', listener );
}
return this;
}, // end of drag
undrag: function () {
var target = this.dragTarget;
target.off( DRAG_START_EVENT, target._dragStartHandler );
target.getPaper().off( DRAG_END_EVENT, target._dragEndHandler );
delete target._dragStartHandler;
delete target._dragEndHandler;
this.dragEnabled = false;
return this;
}
} );
} )();
\ No newline at end of file
src/module/layout.default.js
View file @ 320552b4
KityMinder.registerModule( "LayoutDefault", function () { KityMinder.registerModule( "LayoutDefault", function () {
var _target = this.getRenderTarget(); var _target = this.getRenderTarget();
var minderWidth = _target.clientWidth;
var minderHeight = _target.clientHeight; function getMinderSize() {
return {
width: _target.clientWidth,
height: _target.clientHeight
};
}
var minder = this; var minder = this;
//收缩-展开子树的节点 //收缩-展开子树的节点
var ShIcon = kity.createClass( "DefaultshIcon", ( function () { var ShIcon = kity.createClass( "DefaultshIcon", ( function () {
...@@ -84,10 +89,10 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -84,10 +89,10 @@ KityMinder.registerModule( "LayoutDefault", function () {
stroke: new kity.Pen( "white", 2 ).setLineCap( "round" ).setLineJoin( "round" ), stroke: new kity.Pen( "white", 2 ).setLineCap( "round" ).setLineJoin( "round" ),
fill: "white", fill: "white",
color: "#333", color: "#333",
padding: [ 5.5, 20, 5.5, 20 ], padding: [ 10.5, 20, 10.5, 20 ],
fontSize: 14, fontSize: 16,
margin: [ 0, 10, 30, 50 ], margin: [ 0, 10, 30, 50 ],
radius: 5, radius: 10,
highlight: "yellow" highlight: "yellow"
}, },
"sub": { "sub": {
...@@ -125,7 +130,7 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -125,7 +130,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
var nodeType = node.getType(); var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ]; var nodeStyle = nodeStyles[ nodeType ];
var txtShape = node.getTextShape(); var txtShape = node.getTextShape();
txtShape.fill( nodeStyle.color ).setSize( nodeStyle.fontSize ); txtShape.fill( nodeStyle.color ).setSize( nodeStyle.fontSize ).setY( -3 );
if ( nodeType === "root" ) { if ( nodeType === "root" ) {
Layout.leftList = []; Layout.leftList = [];
Layout.rightList = []; Layout.rightList = [];
...@@ -201,7 +206,7 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -201,7 +206,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
} }
}; };
if ( nodeType === "root" ) { if ( nodeType === "root" ) {
Layout.y = minderHeight / 2; Layout.y = getMinderSize().height / 2;
effectSet.push( node ); effectSet.push( node );
} else { } else {
if ( action === "append" || action === "contract" ) { if ( action === "append" || action === "contract" ) {
...@@ -252,7 +257,7 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -252,7 +257,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
var prt = _buffer[ 0 ].getParent(); var prt = _buffer[ 0 ].getParent();
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() ); _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
if ( !prt ) { if ( !prt ) {
Layout.x = minderWidth / 2; Layout.x = getMinderSize().width / 2;
_buffer.shift(); _buffer.shift();
continue; continue;
} }
......
src/module/layout.js
View file @ 320552b4
...@@ -160,10 +160,16 @@ KityMinder.registerModule( "LayoutModule", function () { ...@@ -160,10 +160,16 @@ KityMinder.registerModule( "LayoutModule", function () {
switchLayout( this, this.getOptions( 'defaultlayoutstyle' ) ); switchLayout( this, this.getOptions( 'defaultlayoutstyle' ) );
}, },
"click": function ( e ) { "click": function ( e ) {
var ico = e.kityEvent.targetShape.container; var ico = e.kityEvent.targetShape && e.kityEvent.targetShape.container;
if ( ico.class === "shicon" ) { if ( ico && ico.class === "shicon" ) {
this.expandNode( ico ); this.expandNode( ico );
} }
},
"resize": function ( e ) {
clearTimeout( this._lastStyleResetTimeout );
this._lastStyleResetTimeout = setTimeout( function () {
this.updateLayout( this.getRoot() );
}.bind( this ), 100 );
} }
}, },
"defaultOptions": { "defaultOptions": {
......
src/module/mouse.js
View file @ 320552b4
...@@ -7,7 +7,7 @@ KityMinder.registerModule( "MouseModule", function () { ...@@ -7,7 +7,7 @@ KityMinder.registerModule( "MouseModule", function () {
var SelectArea = ( function () { var SelectArea = ( function () {
var startPos = null; var startPos = null;
var selectRect = null; var selectRect = new kity.Path().fill( 'rgba(255,255,255,.5)' ).stroke( 'white' );
var min = function ( a, b ) { var min = function ( a, b ) {
return a < b ? a : b; return a < b ? a : b;
}; };
...@@ -28,23 +28,24 @@ KityMinder.registerModule( "MouseModule", function () { ...@@ -28,23 +28,24 @@ KityMinder.registerModule( "MouseModule", function () {
return { return {
selectStart: function ( e ) { selectStart: function ( e ) {
selectRect = new kity.Polygon(); if ( e.originEvent.button ) return;
if ( startPos ) return this.selectEnd();
minder.getRenderContainer().addShape( selectRect ); minder.getRenderContainer().addShape( selectRect );
var p = e.getPosition(); var p = e.getPosition();
startPos = { startPos = {
x: p.x, x: p.x,
y: p.y y: p.y
}; };
selectRect.setOpacity( 0.8 ).getDrawer().clear();
}, },
selectMove: function ( e ) { selectMove: function ( e ) {
var p = e.getPosition(); var p = e.getPosition();
if ( startPos ) { if ( startPos ) {
var points = [ new kity.Point( startPos.x, startPos.y ), var d = selectRect.getDrawer();
new kity.Point( p.x, startPos.y ), d.clear().moveTo( startPos.x, startPos.y )
new kity.Point( p.x, p.y ), .lineTo( p.x, startPos.y )
new kity.Point( startPos.x, p.y ) .lineTo( p.x, p.y )
]; .lineTo( startPos.x, p.y ).close();
selectRect.setPoints( points ).fill( "white" ).setOpacity( 0.5 );
var _buffer = [ minder.getRoot() ]; var _buffer = [ minder.getRoot() ];
while ( _buffer.length !== 0 ) { while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() ); _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
...@@ -65,7 +66,9 @@ KityMinder.registerModule( "MouseModule", function () { ...@@ -65,7 +66,9 @@ KityMinder.registerModule( "MouseModule", function () {
} }
}, },
selectEnd: function ( e ) { selectEnd: function ( e ) {
if ( startPos ) selectRect.remove(); if ( startPos ) {
selectRect.fadeOut( 200, 'ease' );
}
startPos = null; startPos = null;
} }
}; };
......
themes/default/_css/buttonicon.css
View file @ 320552b4
...@@ -14,3 +14,6 @@ ...@@ -14,3 +14,6 @@
.kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor { .kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor {
background-position: -720px 0; background-position: -720px 0;
} }
.kmui-btn-toolbar .kmui-btn .kmui-icon-hand {
background: url(../images/hand.png) no-repeat 2px 2px;
}
\ No newline at end of file
themes/default/_css/kityminder.css
View file @ 320552b4
...@@ -12,9 +12,13 @@ ...@@ -12,9 +12,13 @@
left: 10px; left: 10px;
top: 10px; top: 10px;
border-radius: 4px; border-radius: 4px;
box-shadow: 3px 3px 8px rgba(0,0,0, .5);
} }
.kmui-container .kmui-editor-body{ .kmui-container .kmui-editor-body{
background-color: #333; background-color: #333;
line-height: 0; line-height: 0;
overflow: hidden; overflow: hidden;
} }
svg {
font-family: 'Arial';
}
\ 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