Skip to content

K
kityminder-core
Commit 37f7f353 authored by campaign's avatar campaign
Browse files
Options

添加编辑功能

parent a537a5ff
Show whitespace changes
Inline Side-by-side
Showing with 136 additions and 66 deletions
demo/dev.html
View file @ 37f7f353
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
.km_receiver{ .km_receiver{
width:300px;height:300px; width:300px;height:300px;
} }
/*.km-minderNode{*/
/*cursor:default;*/
/*}*/
</style> </style>
</head> </head>
<body style="background:#262626; margin:0; padding:0"> <body style="background:#262626; margin:0; padding:0">
......
dist/dev.php
View file @ 37f7f353
...@@ -13,6 +13,7 @@ $dependency = Array( ...@@ -13,6 +13,7 @@ $dependency = Array(
,'src/core/minder.module.js' ,'src/core/minder.module.js'
,'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/module/history.js' ,'src/module/history.js'
,'src/module/icon.js' ,'src/module/icon.js'
,'src/module/layout.js' ,'src/module/layout.js'
...@@ -22,10 +23,10 @@ $dependency = Array( ...@@ -22,10 +23,10 @@ $dependency = Array(
,'src/module/keyboard.js' ,'src/module/keyboard.js'
,'src/module/mouse.js' ,'src/module/mouse.js'
,'src/module/history.js' ,'src/module/history.js'
// ,'src/module/editor.js' ,'src/module/editor.js'
// ,'src/module/editor.range.js' ,'src/module/editor.range.js'
// ,'src/module/editor.receiver.js' ,'src/module/editor.receiver.js'
// ,'src/module/editor.cursor.js' ,'src/module/editor.cursor.js'
); );
......
src/core/keymap.js 0 → 100644
View file @ 37f7f353
var keymap = KityMinder.keymap = {
'Backspace' : 8,
'Tab' : 9,
'Enter' : 13,
'Shift':16,
'Control':17,
'Alt':18,
'CapsLock':20,
'Esc':27,
'Spacebar':32,
'PageUp':33,
'PageDown':34,
'End':35,
'Home':36,
'Left':37,
'Up':38,
'Right':39,
'Down':40,
'Insert':45,
'Del':46,
'NumLock':144
};
\ No newline at end of file
src/core/node.js
View file @ 37f7f353
...@@ -9,6 +9,8 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", { ...@@ -9,6 +9,8 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
this.setData( options ); this.setData( options );
} }
this.rc = new kity.Group(); this.rc = new kity.Group();
this.rc.addClass('km-minderNode');
this.rc.minderNode = this; this.rc.minderNode = this;
}, },
setPoint:function(x,y){ setPoint:function(x,y){
...@@ -218,8 +220,6 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", { ...@@ -218,8 +220,6 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
}, },
getTextShape:function(){ getTextShape:function(){
var rc = this.getRenderContainer(); return this.getRenderContainer().getShapesByType('text')[0]
var text = rc.getElementsByTagName('text');
} }
} ); } );
\ No newline at end of file
src/module/editor.js
View file @ 37f7f353
KityMinder.registerModule( "TextEditModule", function () { KityMinder.registerModule( "TextEditModule", function () {
var cursor = new Minder.Cursor(); var cursor = new Minder.Cursor();
var receiver = new Minder.Receiver(); var receiver = new Minder.Receiver(this);
var range = new Minder.Range(); var range = new Minder.Range();
...@@ -14,39 +14,20 @@ KityMinder.registerModule( "TextEditModule", function () { ...@@ -14,39 +14,20 @@ KityMinder.registerModule( "TextEditModule", function () {
if(this.isSingleSelect()){ if(this.isSingleSelect()){
var node = this.getSelectedNode(); var node = this.getSelectedNode();
var node_rc = node.getRenderContainer(); var textShape = node.getTextShape();
if(node_rc.getType() != 'Text'){ // node.getRenderContainer().setStyle('cursor','text');
var offset = e.getPosition(); receiver.setTextEditStatus(true)
cursor.setShow().setPosition(offset); .setCursor(cursor)
// receiver.clear() .setKityMinder(this)
// .setTextShape() .setMinderNode(node)
// .setTextShapeSize(cursor.height) .setTextShape(textShape)
// .appendTextShapeToPaper(this.getPaper()) .setBaseOffset()
// .setPosition(position) .setContainerStyle()
// .setRange(range,0) .setCursorHeight()
// .setCursor(cursor) .setCurrentIndex(e.getPosition())
// receiver.setCursor(cursor) .updateCursor()
// .setKityMinder(this) .setRange(range);
// .setMinderNode(node)
// .setTextShape(node_rc)
// .setCursorHeight()
// .setCurrentIndex(position)
// .updateCursor()
// .setRange(range,0);
}else{
// receiver.setCursor(cursor)
// .setKityMinder(this)
// .setMinderNode(e.getTargetNode())
// .setTextShape(node_rc)
// .setCursorHeight()
// .setCurrentIndex(position)
// .updateCursor()
// .setRange(range);
}
} }
} }
......
src/module/editor.range.js
View file @ 37f7f353
...@@ -23,6 +23,13 @@ Minder.Range = kity.createClass('Range',{ ...@@ -23,6 +23,13 @@ Minder.Range = kity.createClass('Range',{
this.nativeRange.setEnd(node,index); this.nativeRange.setEnd(node,index);
return this; return this;
}, },
getStart:function(){
var range = this.nativeSel.getRangeAt(0);
return {
startContainer:range.startContainer,
startOffset:range.startOffset
}
},
collapse:function(toStart){ collapse:function(toStart){
this.nativeRange.collapse(toStart === true); this.nativeRange.collapse(toStart === true);
return this; return this;
......
src/module/editor.receiver.js
View file @ 37f7f353
...@@ -2,16 +2,27 @@ ...@@ -2,16 +2,27 @@
Minder.Receiver = kity.createClass('Receiver',{ Minder.Receiver = kity.createClass('Receiver',{
clear : function(){ clear : function(){
this.container.innerHTML = ''; this.container.innerHTML = '';
this.cursor.setHide();
this.index = 0; this.index = 0;
return this; return this;
}, },
constructor : function(){ setTextEditStatus : function(status){
this.textEditStatus = status || false;
return this;
},
isTextEditStatus:function(){
return this.textEditStatus;
},
constructor : function(km){
this.setKityMinder(km);
this.textEditStatus = false;
var _div = document.createElement('div'); var _div = document.createElement('div');
_div.setAttribute('contenteditable',true); _div.setAttribute('contenteditable',true);
_div.className = 'km_receiver'; _div.className = 'km_receiver';
this.container = document.body.insertBefore(_div,document.body.firstChild); this.container = document.body.insertBefore(_div,document.body.firstChild);
utils.addCssRule('km_receiver_css',' .km_receiver{position:absolute;padding:0;margin:0;word-wrap:break-word;clip:rect(1em 1em 1em 1em);}'); utils.addCssRule('km_receiver_css',' .km_receiver{position:absolute;padding:0;margin:0;word-wrap:break-word;clip:rect(1em 1em 1em 1em);}');//
utils.listen(_div,'keydown keypress keyup', utils.proxy(this.keyboardEvents,this)); // utils.listen(_div,'keydown keypress keyup', utils.proxy(this.keyboardEvents,this));
this.km.on('beforekeyup', utils.proxy(this.keyboardEvents,this));
this.timer = null; this.timer = null;
this.index = 0; this.index = 0;
}, },
...@@ -26,7 +37,7 @@ Minder.Receiver = kity.createClass('Receiver',{ ...@@ -26,7 +37,7 @@ Minder.Receiver = kity.createClass('Receiver',{
this.index = index || this.index; this.index = index || this.index;
var text = this.container.firstChild; var text = this.container.firstChild;
this.range = range;
range.setStart(text || this.container, this.index).collapse(true); range.setStart(text || this.container, this.index).collapse(true);
setTimeout(function(){ setTimeout(function(){
range.select() range.select()
...@@ -61,28 +72,47 @@ Minder.Receiver = kity.createClass('Receiver',{ ...@@ -61,28 +72,47 @@ Minder.Receiver = kity.createClass('Receiver',{
return this; return this;
}, },
keyboardEvents : function(e){ keyboardEvents : function(e){
clearTimeout(this.timer); clearTimeout(this.timer);
var me = this; var me = this;
var keyCode = e.originEvent.keyCode;
switch(e.type){ switch(e.type){
case 'keyup':
case 'beforekeyup':
if(this.isTextEditStatus()){
if(keyCode == keymap.Enter){
this.setTextEditStatus(false);
this.clear();
e.stopPropagation();
return;
}
var text = (this.container.textContent || this.container.innerText).replace(/\u200b/g,''); var text = (this.container.textContent || this.container.innerText).replace(/\u200b/g,'');
this.textShape.setContent(text); this.textShape.setContent(text);
this.setContainerStyle();
this.minderNode.setText(text); this.minderNode.setText(text);
this.km.renderNode(this.minderNode); this.km.renderNode(this.minderNode);
this.km.updateLayout(this.minderNode);
this.updateTextData(); this.updateTextData();
this.updateIndex();
this.updateCursor(); this.updateCursor();
this.timer = setTimeout(function(){ this.timer = setTimeout(function(){
me.cursor.setShow() me.cursor.setShow()
},500); },500);
break; return true;
case 'keypress': }
case 'keyup':
} }
}, },
updateIndex:function(){
this.index = this.range.getStart().startOffset;
},
updateTextData : function(){ updateTextData : function(){
this.textShape.textData = this.getTextOffsetData(); this.textShape.textData = this.getTextOffsetData();
this.index = this.index + 1;
}, },
setCursor : function(cursor){ setCursor : function(cursor){
this.cursor = cursor; this.cursor = cursor;
...@@ -115,17 +145,35 @@ Minder.Receiver = kity.createClass('Receiver',{ ...@@ -115,17 +145,35 @@ Minder.Receiver = kity.createClass('Receiver',{
} }
return this; return this;
}, },
setBaseOffset :function(){
var nodeOffset = this.minderNode.getRenderContainer().getRenderBox();
var textOffset = this.textShape.getRenderBox();
this.offset = {
x : nodeOffset.x + textOffset.x,
y : nodeOffset.y + textOffset.y
};
return this;
},
setContainerStyle : function(){
var textShapeBox = this.textShape.getRenderBox();
var size = this.textShape.getSize();
this.container.style.cssText += ";left:" + this.offset.x
+ 'px;top:' + (this.offset.y + size)
+ 'px;width:' + textShapeBox.width
+ 'px;height:' + textShapeBox.height + 'px;font-size:' + size + 'px';
return this;
},
getTextOffsetData:function(){ getTextOffsetData:function(){
var text = this.textShape.getContent(); var text = this.textShape.getContent();
this.textData = []; this.textData = [];
// this.textShape.clearContent();
var containerOffset = this.textShape.container.getRenderBox();
for(var i= 0,l = text.length;i<l;i++){ for(var i= 0,l = text.length;i<l;i++){
var box = this.textShape.getExtentOfChar(i); var box = this.textShape.getExtentOfChar(i);
this.textData.push({ this.textData.push({
x:box.x + containerOffset.x, x:box.x + this.offset.x,
y:box.y + containerOffset.y, y:this.offset.y,
width:box.width, width:box.width,
height:box.height height:box.height
}) })
...@@ -155,7 +203,7 @@ Minder.Receiver = kity.createClass('Receiver',{ ...@@ -155,7 +203,7 @@ Minder.Receiver = kity.createClass('Receiver',{
}, },
setCursorHeight:function(){ setCursorHeight:function(){
this.cursor.setHeight(this.getTextShapeHeight()) this.cursor.setHeight(this.getTextShapeHeight());
return this; return this;
} }
}); });
\ No newline at end of file
src/module/keyboard.js
View file @ 37f7f353
...@@ -59,7 +59,7 @@ KityMinder.registerModule( "KeyboardModule", function () { ...@@ -59,7 +59,7 @@ KityMinder.registerModule( "KeyboardModule", function () {
contentchange: function () { contentchange: function () {
buildPositionNetwork( this.getRoot() ); buildPositionNetwork( this.getRoot() );
}, },
keydown: function ( e ) { keyup: function ( e ) {
switch ( e.originEvent.keyCode ) { switch ( e.originEvent.keyCode ) {
......
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