Commit 8d7326fe authored by techird's avatar techird

zoom optimize

parents c20be595 3884420c
...@@ -2,11 +2,13 @@ ...@@ -2,11 +2,13 @@
# KityMinder 更新日志 # KityMinder 更新日志
##1.1.3 ##1.1.3
###功能更新 ###功能更新
1. 添加保存时可修改文件名 1. 保存时可自定义文件名
2. 添加超链接功能 2. 添加/删除超链接,导入第三方格式支持超链接
3. 选中节点时,按F2直接进入文字编辑状态 3. 选中节点时,按F2直接进入文字编辑状态
4. 加上"展开全部节点""收起全部节点"功能 4. "展开全部节点""收起全部节点"功能
5. 当前选中的高亮的节点可直接进行文字编辑 5. 当前选中的高亮的节点可直接进行文字编辑
6. 右键选中节点,显示编辑节点的菜单
##问题修复 ##问题修复
1. 修复当滚动鼠标滚轮时,光标不跟着移动的问题 1. 修复当滚动鼠标滚轮时,光标不跟着移动的问题
......
( function () { ( function () {
//todo 这里先写死成中文 //todo 这里先写死成中文
var content = '<div class="hyperlink-content" style="padding:20px;width:360px;">'; var content = '<div class="hyperlink-content" style="padding:20px;width:360px;">';
content += '<p><label>输入链接: <input id="hyperlink_href" style="width:90%;" /></label></p>'; content += '<style>';
content += '<p style="text-align:right"><button id="hyperlink_insert">插入</button></p>'; content += '.kmui-dialog-<%= container %> input{';
content += 'width: 75%;';
content += 'padding: 6px 12px;';
content += 'font-size: 14px;';
content += 'line-height: 1.42857143;';
content += 'color: #555;';
content += 'background-color: #fff;';
content += 'background-image: none;';
content += 'border: 1px solid #ccc;';
content += 'border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 );'
content += 'box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ); -webkit-transition: border-color ease-in-out .15s,';
content += 'box-shadow ease-in-out .15s;';
content += 'transition: border-color ease-in-out .15s,';
content += 'box-shadow ease-in-out .15s;';
content += '}';
content += '.kmui-dialog-<%= container %> input:focus{';
content += 'border-color: #66afe9;';
content += 'outline: 0;';
content += '-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);';
content += 'box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);';
content += '}';
content += '.kmui-dialog-<%= container %> button{';
content += 'height:34px;';
content += 'line-height:34px;';
content += 'vertical-align:1px';
content += '}';
content += '</style>';
content += '<input id="hyperlink_href"/>';
content += '<button id="hyperlink_insert">插入</button>';
content += '</div>'; content += '</div>';
KM.registerWidget( 'hyperlink', { KM.registerWidget( 'hyperlink', {
tpl: content, tpl: content,
initContent: function ( km ) { initContent: function ( km ) {
var lang = km.getLang( 'dialogs.hyperlink' ), var lang = km.getLang( 'dialogs.hyperlink' ),
html; html;
if ( lang ) { if ( lang ) {
html = $.parseTmpl( this.tpl, lang ); html = $.parseTmpl( this.tpl, utils.extend( {
'container': 'hyperlink'
}, lang ) );
} }
this.root().html( html ); this.root().html( html );
}, },
initEvent: function ( km, $w ) { initEvent: function ( km, $w ) {
$w.find('#hyperlink_insert').on('click',function(){ $w.find( '#hyperlink_insert' ).on( 'click', function () {
km.execCommand('hyperlink',$w.find('#hyperlink_href').val()); km.execCommand( 'hyperlink', $w.find( '#hyperlink_href' ).val() );
$w.kmui().hide(); $w.kmui().hide();
}); } );
var url = km.queryCommandValue('hyperlink'); var url = km.queryCommandValue( 'hyperlink' );
var $input = $w.find('#hyperlink_href'); var $input = $w.find( '#hyperlink_href' );
$input.val(url || 'http://'); $input.val( url || 'http://' );
setTimeout(function(){ setTimeout( function () {
$input.focus() $input.focus()
}) } )
}, },
width: 400 width: 400
} ); } );
......
...@@ -72,6 +72,7 @@ ...@@ -72,6 +72,7 @@
,'adapter/contextmenu.js' ,'adapter/contextmenu.js'
,'adapter/dialog.js' ,'adapter/dialog.js'
,'adapter/hyperlink.js' ,'adapter/hyperlink.js'
,'adapter/zoom.js'
,'protocal/xmind.js' ,'protocal/xmind.js'
,'protocal/freemind.js' ,'protocal/freemind.js'
,'protocal/mindmanager.js' ,'protocal/mindmanager.js'
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
'KITYMINDER_HOME_URL': getKMBasePath(), 'KITYMINDER_HOME_URL': getKMBasePath(),
//定义工具栏 //定义工具栏
toolbars: [ toolbars: [
'hand zoom-in zoom-out collapsenode expandnode | undo redo | bold italic | fontfamily fontsize forecolor | saveto | hyperlink unhyperlink | markers | node | help' 'hand zoom | collapsenode expandnode | undo redo | bold italic | fontfamily fontsize forecolor | saveto | hyperlink unhyperlink | markers | node | help'
] ]
//只读模式,默认是false //只读模式,默认是false
//readOnly: true //readOnly: true
...@@ -87,5 +87,7 @@ ...@@ -87,5 +87,7 @@
// defaultLayer: 2, // defaultLayer: 2,
// defaultSubShow: 5 // defaultSubShow: 5
// } // }
//配置放大缩小的比例
//,zoom:[50,80,100,120,150,200]
}; };
} )(); } )();
\ No newline at end of file
...@@ -13,8 +13,7 @@ KityMinder.LANG[ 'zh-cn' ] = { ...@@ -13,8 +13,7 @@ KityMinder.LANG[ 'zh-cn' ] = {
'node': '节点操作', 'node': '节点操作',
'saveto': '导出', 'saveto': '导出',
'hand': '允许拖拽', 'hand': '允许拖拽',
'zoom-in': '放大', 'zoom': '放大缩小',
'zoom-out': '缩小',
'markers': '添加标签', 'markers': '添加标签',
'switchlayout': '切换主题', 'switchlayout': '切换主题',
'help': '帮助', 'help': '帮助',
......
KM.registerToolbarUI( 'zoom', function ( name ) {
var me = this,
label = me.getLang( 'tooltips.' + name ),
options = {
label: label,
title: label,
comboboxName: name,
items: me.getOptions( name ) || [],
itemStyles: [],
value: me.getOptions( name ),
autowidthitem: [],
enabledRecord: false,
enabledSelected: false
},
$combox = null;
if ( options.items.length == 0 ) {
return null;
}
//实例化
$combox = $.kmuibuttoncombobox( transForInserttopic( options ) ).css( 'zIndex', me.getOptions( 'zIndex' ) + 1 );
var comboboxWidget = $combox.kmui();
comboboxWidget.on( 'comboboxselect', function ( evt, res ) {
me.execCommand('zoom', res.value );
} ).on( "beforeshow", function () {
if ( $combox.parent().length === 0 ) {
$combox.appendTo( me.$container.find( '.kmui-dialog-container' ) );
}
} );
//状态反射
me.on( 'interactchange', function () {
var state = 0;
//设置按钮状态
comboboxWidget.button().kmui().disabled( state == -1 ).active( state == 1 );
} );
//comboboxWidget.button().kmui().disabled(-1);
return comboboxWidget.button().addClass( 'kmui-combobox' );
function transForInserttopic( options ) {
var tempItems = [];
utils.each( options.items, function ( k, v ) {
options.value.push( v );
tempItems.push( v + '%' );
options.autowidthitem.push( $.wordCountAdaptive( tempItems[ tempItems.length - 1 ] ) );
} );
options.items = tempItems;
return options;
}
} );
\ No newline at end of file
...@@ -120,7 +120,7 @@ kity.extendClass( Minder, { ...@@ -120,7 +120,7 @@ kity.extendClass( Minder, {
return d; return d;
} }
var t1 = ts( new Date(), '开始解析' ); //var t1 = ts( new Date(), '开始解析' );
//******************* //*******************
json = params.json || ( params.json = protocal.decode( local ) ); json = params.json || ( params.json = protocal.decode( local ) );
...@@ -129,20 +129,20 @@ kity.extendClass( Minder, { ...@@ -129,20 +129,20 @@ kity.extendClass( Minder, {
var self = this; var self = this;
json.then( local, function ( data ) { json.then( local, function ( data ) {
//******************* //*******************
var t2 = ts( new Date(), '解压解析耗时', t1 ); //var t2 = ts( new Date(), '解压解析耗时', t1 );
//******************* //*******************
self._afterImportData( data, params ); self._afterImportData( data, params );
//******************* //*******************
ts( new Date(), '渲染耗时', t2 ); //ts( new Date(), '渲染耗时', t2 );
//******************* //*******************
} ); } );
} else { } else {
//******************* //*******************
var t2 = ts( new Date(), '解压解析耗时', t1 ); //var t2 = ts( new Date(), '解压解析耗时', t1 );
//******************* //*******************
this._afterImportData( json, params ); this._afterImportData( json, params );
//******************* //*******************
ts( new Date(), '渲染耗时', t2 ); //ts( new Date(), '渲染耗时', t2 );
//******************* //*******************
} }
return this; return this;
......
...@@ -210,7 +210,7 @@ KityMinder.registerModule( "LayoutModule", function () { ...@@ -210,7 +210,7 @@ KityMinder.registerModule( "LayoutModule", function () {
return null; return null;
} }
km.select( selectedNode, true ); km.select( selectedNode, true );
km.textEditNode(selectedNode); km.textEditNode( selectedNode );
}, },
queryState: function ( km ) { queryState: function ( km ) {
var selectedNode = km.getSelectedNode(); var selectedNode = km.getSelectedNode();
...@@ -244,6 +244,7 @@ KityMinder.registerModule( "LayoutModule", function () { ...@@ -244,6 +244,7 @@ KityMinder.registerModule( "LayoutModule", function () {
var ico = e.kityEvent.targetShape && e.kityEvent.targetShape.container; var ico = e.kityEvent.targetShape && e.kityEvent.targetShape.container;
if ( ico && ico.class === "shicon" ) { if ( ico && ico.class === "shicon" ) {
this.expandNode( ico ); this.expandNode( ico );
this.fire( 'contentchange' );
} }
}, },
"resize": function ( e ) { "resize": function ( e ) {
......
KityMinder.registerModule( 'Zoom', function () { KityMinder.registerModule( 'Zoom', function () {
var me = this;
me.setOptions( 'zoom', [ 50, 80, 100, 120, 150, 200 ] );
function zoomMinder( minder, zoom ) { function zoomMinder( minder, zoom ) {
var paper = minder.getPaper(); var paper = minder.getPaper();
var viewport = paper.getViewPort(); var viewport = paper.getViewPort();
if ( !zoom ) return;
var animator = new kity.Animator( { var animator = new kity.Animator( {
beginValue: viewport.zoom, beginValue: viewport.zoom,
finishValue: zoom, finishValue: zoom / 100,
setter: function ( target, value ) { setter: function ( target, value ) {
viewport.zoom = value; viewport.zoom = value;
target.setViewPort( viewport ); target.setViewPort( viewport );
...@@ -19,41 +24,44 @@ KityMinder.registerModule( 'Zoom', function () { ...@@ -19,41 +24,44 @@ KityMinder.registerModule( 'Zoom', function () {
var ZoomCommand = kity.createClass( 'Zoom', { var ZoomCommand = kity.createClass( 'Zoom', {
base: Command, base: Command,
execute: zoomMinder execute: zoomMinder,
queryValue: function ( minder ) {
return minder.zoom;
}
} ); } );
var ZoomInCommand = kity.createClass( 'ZoomInCommand', { var ZoomInCommand = kity.createClass( 'ZoomInCommand', {
base: Command, base: Command,
execute: function ( minder ) { execute: function ( minder ) {
zoomMinder( minder, this.nextValue() ); zoomMinder( minder, this.nextValue( minder ) );
}, },
queryState: function ( minder ) { queryState: function ( minder ) {
return !!this.nextValue(); return !!this.nextValue( minder );
}, },
nextValue: function () { nextValue: function ( minder ) {
var stack = this.getOption( 'zoom' ), var stack = minder.getOptions( 'zoom' ),
i; i;
for ( i = 0; i < stack.length - 1; i++ ) { for ( i = 0; i < stack.length; i++ ) {
if ( stack[ i ] > this.zoom ) return stack[ i ]; if ( stack[ i ] > minder.zoom ) return stack[ i ];
} }
return 0; return 0;
}, },
enableReadOnly: falsed enableReadOnly: false
} ); } );
var ZoomOutCommand = kity.createClass( 'ZoomOutCommand', { var ZoomOutCommand = kity.createClass( 'ZoomOutCommand', {
base: Command, base: Command,
execute: function ( minder ) { execute: function ( minder ) {
zoomMinder( minder, this.nextValue() ); zoomMinder( minder, this.nextValue( minder ) );
}, },
queryState: function ( minder ) { queryState: function ( minder ) {
return !!this.nextValue(); return !!this.nextValue( minder );
}, },
nextValue: function () { nextValue: function ( minder ) {
var stack = this.getOption( 'zoom' ), var stack = minder.getOptions( 'zoom' ),
i; i;
for ( i = stack.length - 1; i >= 0l i-- ) { for ( i = stack.length - 1; i >= 0; i-- ) {
if ( stack[ i ] < this.zoom ) return stack[ i ]; if ( stack[ i ] < minder.zoom ) return stack[ i ];
} }
return 0; return 0;
}, },
...@@ -61,6 +69,9 @@ KityMinder.registerModule( 'Zoom', function () { ...@@ -61,6 +69,9 @@ KityMinder.registerModule( 'Zoom', function () {
} ); } );
return { return {
init: function () {
this.zoom = 100;
},
commands: { commands: {
'zoom-in': ZoomInCommand, 'zoom-in': ZoomInCommand,
'zoom-out': ZoomOutCommand, 'zoom-out': ZoomOutCommand,
......
...@@ -141,7 +141,7 @@ KM.ui.define( 'modal', { ...@@ -141,7 +141,7 @@ KM.ui.define( 'modal', {
if ( !$obj.data( '$mergeObj' ) ) { if ( !$obj.data( '$mergeObj' ) ) {
$obj.data( '$mergeObj', me.root() ); $obj.data( '$mergeObj', me.root() );
$obj.on( 'click', function () { $obj.on( 'wrapclick', function () {
me.toggle( $obj ) me.toggle( $obj )
} ); } );
me.data( '$mergeObj', $obj ) me.data( '$mergeObj', $obj )
......
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