重构

demo/dev.html

@@ -25,15 +25,7 @@
 </body>
 <script>
     var minder = KM.createMinder(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"));
+    minder.getRoot().setData('fontcolor','red');
+    minder.updateLayout(minder.getRoot());
 </script>
 </html>
\ No newline at end of file

kity @ 1bfcdd71

-Subproject commit cfe7d5a248f0634d85dab3e51dc2d90d2d23ac5e
+Subproject commit 1bfcdd712725d25d54bfe88d0ee0fac6ee33830a

src/core/minder.select.js

@@ -2,12 +2,12 @@
 kity.extendClass( Minder, function () {
     function highlightNode( km, node ) {
         node.setData( "highlight", true );
-        km.renderNode( node );
+        km.highlightNode( node );
     }
 
     function unhighlightNode( km, node ) {
         node.setData( "highlight", false );
-        km.renderNode( node );
+        km.highlightNode( node );
     }
     return {
         _initSelection: function () {

src/core/node.js

@@ -8,8 +8,8 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
         } else {
             this.setData( options );
         }
-        this._createShapeDom()
-
+        this._createShapeDom();
+        this.setData( "layout", {} );
     },
     _createShapeDom: function () {
         this.rc = new kity.Group();
@@ -26,10 +26,10 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
         this.rc.appendShape( g );
     },
     _createBgGroup: function () {
-        this._createGroup( 'bgrc' )
+        this._createGroup( 'bgrc' );
     },
     _createContGroup: function () {
-        this._createGroup( 'contrc' )
+        this._createGroup( 'contrc' );
     },
     _createTextShape: function () {
         this.getContRc().appendShape( new kity.Text( this.getData( 'text' ) || '' ) );
@@ -37,24 +37,24 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
     getContRc: function () {
         var groups = this.rc.getShapesByType( 'group' ),
             result;
-        utils.each( groups, function ( i, p ) {
+        Utils.each( groups, function ( i, p ) {
             if ( p.getData( 'rctype' ) == 'contrc' ) {
                 result = p;
                 return false;
             }
         } );
-        return result
+        return result;
     },
     getBgRc: function () {
         var groups = this.rc.getShapesByType( 'group' ),
             result;
-        utils.each( groups, function ( i, p ) {
+        Utils.each( groups, function ( i, p ) {
             if ( p.getData( 'rctype' ) == 'bgrc' ) {
                 result = p;
                 return false;
             }
         } );
-        return result
+        return result;
     },
     setPoint: function ( x, y ) {
         this.setData( 'point', {

src/module/editor.receiver.js

 //接收者
-Minder.Receiver = kity.createClass('Receiver',{
-    clear : function(){
+Minder.Receiver = kity.createClass( 'Receiver', {
+    clear: function () {
         this.container.innerHTML = '';
         this.cursor.setHide();
         this.index = 0;
         return this;
     },
-    setTextEditStatus : function(status){
+    setTextEditStatus: function ( status ) {
         this.textEditStatus = status || false;
         return this;
     },
-    isTextEditStatus:function(){
+    isTextEditStatus: function () {
         return this.textEditStatus;
     },
-    constructor : function(km){
-        this.setKityMinder(km);
+    constructor: function ( km ) {
+        this.setKityMinder( km );
         this.textEditStatus = false;
-        var _div = document.createElement('div');
-        _div.setAttribute('contenteditable',true);
+        var _div = document.createElement( 'div' );
+        _div.setAttribute( 'contenteditable', true );
         _div.className = 'km_receiver';
-        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);}');//
-        this.km.on('beforekeyup', utils.proxy(this.keyboardEvents,this));
+        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);}' ); //
+        this.km.on( 'beforekeyup', utils.proxy( this.keyboardEvents, this ) );
         this.timer = null;
         this.index = 0;
     },
-    setRange : function(range,index){
+    setRange: function ( range, index ) {
 
         this.index = index || this.index;
 
         var text = this.container.firstChild;
         this.range = range;
-        range.setStart(text || this.container, this.index).collapse(true);
-        setTimeout(function(){
+        range.setStart( text || this.container, this.index ).collapse( true );
+        setTimeout( function () {
             range.select()
-        });
+        } );
         return this;
     },
-    setTextShape:function(textShape){
-        if(!textShape){
+    setTextShape: function ( textShape ) {
+        if ( !textShape ) {
             textShape = new kity.Text();
         }
         this.textShape = textShape;
         this.container.innerHTML = textShape.getContent();
         return this;
     },
-    setTextShapeSize:function(size){
-        this.textShape.setSize(size);
+    setTextShapeSize: function ( size ) {
+        this.textShape.setSize( size );
         return this;
     },
-    getTextShapeHeight:function(){
+    getTextShapeHeight: function () {
         return this.textShape.getRenderBox().height;
     },
-    appendTextShapeToPaper:function(paper){
-        paper.addShape(this.textShape);
+    appendTextShapeToPaper: function ( paper ) {
+        paper.addShape( this.textShape );
         return this;
     },
-    setKityMinder:function(km){
+    setKityMinder: function ( km ) {
         this.km = km;
         return this;
     },
-    setMinderNode:function(node){
+    setMinderNode: function ( node ) {
         this.minderNode = node;
         return this;
     },
-    keyboardEvents : function(e){
+    keyboardEvents: function ( e ) {
 
-        clearTimeout(this.timer);
+        clearTimeout( this.timer );
         var me = this;
         var keyCode = e.originEvent.keyCode;
 
 
-        switch(e.type){
+        switch ( e.type ) {
 
         case 'beforekeyup':
-                if(this.isTextEditStatus()){
-                    switch(keyCode){
+            if ( this.isTextEditStatus() ) {
+                switch ( keyCode ) {
                 case keymap.Enter:
                 case keymap.Tab:
-                            this.setTextEditStatus(false);
+                    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.km.renderNode(this.minderNode);
-                    this.km.updateLayout(this.minderNode);
+                this.minderNode.setText( text );
+                this.km.updateLayout( this.minderNode );
                 this.setBaseOffset();
                 this.updateTextData();
                 this.updateIndex();
                 this.updateCursor();
 
-                    this.timer = setTimeout(function(){
+                this.timer = setTimeout( function () {
                     me.cursor.setShow()
-                    },500);
+                }, 500 );
                 return true;
             }
 
         }
     },
-    updateIndex:function(){
+    updateIndex: function () {
         this.index = this.range.getStart().startOffset;
     },
-    updateTextData : function(){
+    updateTextData: function () {
         this.textShape.textData = this.getTextOffsetData();
     },
-    setCursor : function(cursor){
+    setCursor: function ( cursor ) {
         this.cursor = cursor;
         return this;
     },
-    updateCursor : function(){
+    updateCursor: function () {
         this.cursor.setShowHold();
-        if(this.index == this.textData.length){
-
-            this.cursor.setPosition({
-                x : this.textData[this.index-1].x + this.textData[this.index-1].width,
-                y : this.textData[this.index-1].y
-            })
-        }else{
-            this.cursor.setPosition(this.textData[this.index])
+        if ( this.index == this.textData.length ) {
+
+            this.cursor.setPosition( {
+                x: this.textData[ this.index - 1 ].x + this.textData[ this.index - 1 ].width,
+                y: this.textData[ this.index - 1 ].y
+            } )
+        } else {
+            this.cursor.setPosition( this.textData[ this.index ] )
         }
         return this;
     },
-    setBaseOffset :function(){
+    setBaseOffset: function () {
 
         var nodeOffset = this.minderNode.getRenderContainer().getRenderBox();
-//        var textOffset = this.textShape.getRenderBox();
+        //        var textOffset = this.textShape.getRenderBox();
         var contRcOffset = this.minderNode.getContRc().getRenderBox();
 
         this.offset = {
-            x : nodeOffset.x +  contRcOffset.x,
-            y : nodeOffset.y +  contRcOffset.y
+            x: nodeOffset.x + contRcOffset.x,
+            y: nodeOffset.y + contRcOffset.y
         };
         return this;
     },
-    setContainerStyle : function(){
+    setContainerStyle: function () {
         var textShapeBox = this.textShape.getRenderBox();
 
-        this.container.style.cssText =  ";left:" + this.offset.x
-            + 'px;top:' + (this.offset.y+textShapeBox.height)
-            + 'px;width:' + textShapeBox.width
-            + 'px;height:' + textShapeBox.height + 'px;';
+        this.container.style.cssText = ";left:" + this.offset.x + 'px;top:' + ( this.offset.y + textShapeBox.height ) + 'px;width:' + textShapeBox.width + 'px;height:' + textShapeBox.height + 'px;';
         return this;
     },
-    getTextOffsetData:function(){
+    getTextOffsetData: function () {
         var text = this.textShape.getContent();
         this.textData = [];
 
-        for(var i= 0,l = text.length;i<l;i++){
-            var box = this.textShape.getExtentOfChar(i);
-            this.textData.push({
-                x:box.x + this.offset.x,
-                y:this.offset.y,
-                width:box.width,
-                height:box.height
-            })
+        for ( var i = 0, l = text.length; i < l; i++ ) {
+            var box = this.textShape.getExtentOfChar( i );
+            this.textData.push( {
+                x: box.x + this.offset.x,
+                y: this.offset.y,
+                width: box.width,
+                height: box.height
+            } )
         }
         return this;
     },
-    setCurrentIndex:function(offset){
+    setCurrentIndex: function ( offset ) {
         var me = this;
         this.getTextOffsetData();
         var hadChanged = false;
-        utils.each(this.textData,function(i,v){
+        utils.each( this.textData, function ( i, v ) {
             //点击开始之前
-            if(i == 0 && offset.x <= v.x){
+            if ( i == 0 && offset.x <= v.x ) {
                 me.index = 0;
                 return false;
             }
 
-            if(i == me.textData.length -1 && offset.x >= v.x){
+            if ( i == me.textData.length - 1 && offset.x >= v.x ) {
                 me.index = me.textData.length;
                 return false;
             }
-            if(offset.x >= v.x && offset.x <= v.x + v.width){
-                if(offset.x  - v.x > v.width/2){
+            if ( offset.x >= v.x && offset.x <= v.x + v.width ) {
+                if ( offset.x - v.x > v.width / 2 ) {
                     me.index = i + 1;
 
-                }else {
+                } else {
                     me.index = i
 
                 }
                 hadChanged = true;
                 return false;
             }
-        });
+        } );
         return this;
 
     },
-    setCursorHeight:function(){
-        this.cursor.setHeight(this.getTextShapeHeight());
+    setCursorHeight: function () {
+        this.cursor.setHeight( this.getTextShapeHeight() );
         return this;
     }
-});
+} );
\ No newline at end of file

src/module/font.js

@@ -35,6 +35,7 @@ KityMinder.registerModule( "fontmodule", function () {
                     e.node.getTextShape().setAttr( 'font-family', val );
                 }
                 if ( val = e.node.getData( 'fontcolor' ) ) {
+                    console.log( val );
                     e.node.getTextShape().fill( val );
                 }
             }

src/module/layout.js

@@ -16,9 +16,9 @@ KityMinder.registerModule( "LayoutModule", function () {
 			_root.setData( "currentstyle", name );
 			return name;
 		},
-		renderNode: function ( node ) {
+		highlightNode: function ( node ) {
 			var curStyle = this.getCurrentStyle();
-			this.getLayoutStyle( curStyle ).renderNode.call( this, node );
+			this.getLayoutStyle( curStyle ).highlightNode.call( this, node );
 		},
 		initStyle: function () {
 			var curStyle = this.getCurrentStyle();