Commit 320552b4 authored by techird's avatar techird

ui optimize

parent 212a4e8c
window.KITYMINDER_CONFIG = {
//定义工具栏
toolbars:[
'undo redo | bold italic | forecolor | layoutstyle | fontfamily fontsize | saveto'
toolbars: [
'hand | undo redo | bold italic | forecolor | layoutstyle | fontfamily fontsize | saveto'
]
//设置主题
......
......@@ -22,6 +22,7 @@ $dependency = Array(
,'src/module/layout.default.js'
,'src/module/layout.bottom.js'
,'src/core/minder.select.js'
,'src/module/draggable.js'
,'src/module/keyboard.js'
,'src/module/mouse.js'
,'src/module/history.js'
......@@ -53,6 +54,7 @@ $dependency = Array(
,'src/adapter/button.js'
,'src/adapter/combobox.js'
,'src/adapter/saveto.js'
,'src/adapter/hand.js'
,'src/protocal/plain.js'
,'src/protocal/json.js'
);
......
Subproject commit 97750df27bf46fbb96d182a25e39768f63f7545c
Subproject commit 2fc98bc18520a511cbf9010cf7fe78e5e5dde255
KityMinder.LANG['zh-cn'] = {
'tooltips':{
'undo':'撤销', 'redo':'重做',
'bold':'加粗', 'italic':'斜体',
'forecolor':'字体颜色', 'fontfamily':'字体', 'fontsize':'字号',
'layoutstyle':'选择主题',
'saveto':'另存为...'
KityMinder.LANG[ 'zh-cn' ] = {
'tooltips': {
'undo': '撤销',
'redo': '重做',
'bold': '加粗',
'italic': '斜体',
'forecolor': '字体颜色',
'fontfamily': '字体',
'fontsize': '字号',
'layoutstyle': '选择主题',
'saveto': '另存为...'
},
'popupcolor': {
'clearColor': '清空颜色',
'standardColor': '标准颜色',
'themeColor': '主题颜色'
},
'popupcolor':{
'clearColor':'清空颜色',
'standardColor':'标准颜色',
'themeColor':'主题颜色'
}
'hand': '允许拖拽'
};
\ No newline at end of file
......@@ -14,6 +14,9 @@ kity.extendClass( Minder, {
// TODO: mousemove lazy bind
_bindPaperEvents: function () {
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 () {
if ( ( navigator.userAgent.indexOf( 'iPhone' ) == -1 ) && ( navigator.userAgent.indexOf( 'iPod' ) == -1 ) && ( navigator.userAgent.indexOf( 'iPad' ) == -1 ) ) {
......@@ -23,6 +26,7 @@ kity.extendClass( Minder, {
},
_firePharse: function ( e ) {
var beforeEvent, preEvent, executeEvent;
beforeEvent = new MinderEvent( 'before' + e.type, e, true );
if ( this._fire( beforeEvent ) ) {
return;
......
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
KityMinder.registerModule( "LayoutDefault", function () {
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 ShIcon = kity.createClass( "DefaultshIcon", ( function () {
......@@ -84,10 +89,10 @@ KityMinder.registerModule( "LayoutDefault", function () {
stroke: new kity.Pen( "white", 2 ).setLineCap( "round" ).setLineJoin( "round" ),
fill: "white",
color: "#333",
padding: [ 5.5, 20, 5.5, 20 ],
fontSize: 14,
padding: [ 10.5, 20, 10.5, 20 ],
fontSize: 16,
margin: [ 0, 10, 30, 50 ],
radius: 5,
radius: 10,
highlight: "yellow"
},
"sub": {
......@@ -125,7 +130,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var txtShape = node.getTextShape();
txtShape.fill( nodeStyle.color ).setSize( nodeStyle.fontSize );
txtShape.fill( nodeStyle.color ).setSize( nodeStyle.fontSize ).setY( -3 );
if ( nodeType === "root" ) {
Layout.leftList = [];
Layout.rightList = [];
......@@ -201,7 +206,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
}
};
if ( nodeType === "root" ) {
Layout.y = minderHeight / 2;
Layout.y = getMinderSize().height / 2;
effectSet.push( node );
} else {
if ( action === "append" || action === "contract" ) {
......@@ -252,7 +257,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
var prt = _buffer[ 0 ].getParent();
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
if ( !prt ) {
Layout.x = minderWidth / 2;
Layout.x = getMinderSize().width / 2;
_buffer.shift();
continue;
}
......
......@@ -160,10 +160,16 @@ KityMinder.registerModule( "LayoutModule", function () {
switchLayout( this, this.getOptions( 'defaultlayoutstyle' ) );
},
"click": function ( e ) {
var ico = e.kityEvent.targetShape.container;
if ( ico.class === "shicon" ) {
var ico = e.kityEvent.targetShape && e.kityEvent.targetShape.container;
if ( ico && ico.class === "shicon" ) {
this.expandNode( ico );
}
},
"resize": function ( e ) {
clearTimeout( this._lastStyleResetTimeout );
this._lastStyleResetTimeout = setTimeout( function () {
this.updateLayout( this.getRoot() );
}.bind( this ), 100 );
}
},
"defaultOptions": {
......
......@@ -7,7 +7,7 @@ KityMinder.registerModule( "MouseModule", function () {
var SelectArea = ( function () {
var startPos = null;
var selectRect = null;
var selectRect = new kity.Path().fill( 'rgba(255,255,255,.5)' ).stroke( 'white' );
var min = function ( a, b ) {
return a < b ? a : b;
};
......@@ -28,23 +28,24 @@ KityMinder.registerModule( "MouseModule", function () {
return {
selectStart: function ( e ) {
selectRect = new kity.Polygon();
if ( e.originEvent.button ) return;
if ( startPos ) return this.selectEnd();
minder.getRenderContainer().addShape( selectRect );
var p = e.getPosition();
startPos = {
x: p.x,
y: p.y
};
selectRect.setOpacity( 0.8 ).getDrawer().clear();
},
selectMove: function ( e ) {
var p = e.getPosition();
if ( startPos ) {
var points = [ new kity.Point( startPos.x, startPos.y ),
new kity.Point( p.x, startPos.y ),
new kity.Point( p.x, p.y ),
new kity.Point( startPos.x, p.y )
];
selectRect.setPoints( points ).fill( "white" ).setOpacity( 0.5 );
var d = selectRect.getDrawer();
d.clear().moveTo( startPos.x, startPos.y )
.lineTo( p.x, startPos.y )
.lineTo( p.x, p.y )
.lineTo( startPos.x, p.y ).close();
var _buffer = [ minder.getRoot() ];
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
......@@ -65,7 +66,9 @@ KityMinder.registerModule( "MouseModule", function () {
}
},
selectEnd: function ( e ) {
if ( startPos ) selectRect.remove();
if ( startPos ) {
selectRect.fadeOut( 200, 'ease' );
}
startPos = null;
}
};
......
......@@ -14,3 +14,6 @@
.kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor {
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
......@@ -12,9 +12,13 @@
left: 10px;
top: 10px;
border-radius: 4px;
box-shadow: 3px 3px 8px rgba(0,0,0, .5);
}
.kmui-container .kmui-editor-body{
background-color: #333;
line-height: 0;
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