dev

import.js

@@ -33,6 +33,7 @@
             'theme/default.js',
             'theme/bottom.js',
             'theme/filetree.js',
+            'theme/fresh.js',
             'template/bottom.js',
             'module/node.js',
             'module/text.js',

kity @ 7c5ee097

-Subproject commit 9e420efd89ba672f5389e21069eb0009e52ad7b1
+Subproject commit 7c5ee097334581f51ae994ff3c5d51f96d5ac260

src/core/connect.js

@@ -24,11 +24,7 @@ kity.extendClass(Minder, {
     createConnect: function(node) {
         if (node.isRoot()) return;
 
-        var strokeColor = node.getStyle('connect-color') || 'white',
-            strokeWidth = node.getStyle('connect-width') || 2;
-
-        var connection = new kity.Path()
-            .stroke(strokeColor, strokeWidth);
+        var connection = new kity.Path();
 
         node._connection = connection;
 
@@ -62,7 +58,12 @@ kity.extendClass(Minder, {
 
         var provider = KityMinder.getConnectProvider(parent.getLayout());
 
-        provider(node, parent, connection);
+        var strokeColor = node.getStyle('connect-color') || 'white',
+            strokeWidth = node.getStyle('connect-width') || 2;
+
+        connection.stroke(strokeColor, strokeWidth);
+
+        provider(node, parent, connection, strokeWidth, strokeColor);
     }
 });
 

src/core/theme.js

@@ -57,6 +57,10 @@ kity.extendClass(Minder, {
         });
 
         this.getRoot().layout();
+
+        this.getPaper().getContainer().style.background = this.getStyle('background');
+
+        return true;
     },
 
     /**
@@ -102,8 +106,8 @@ kity.extendClass(Minder, {
      * @param  {String} name 样式名称，可以不加节点类型的前缀
      */
     getNodeStyle: function(node, name) {
-        var value = this.getStyle(name, node);
-        return value !== null ? value : this.getStyle(node.getType() + '-' + name, node);
+        var value = this.getStyle(node.getType() + '-' + name, node);
+        return value !== null ? value : this.getStyle(name, node);
     }
 });
 
@@ -111,4 +115,20 @@ kity.extendClass(MinderNode, {
     getStyle: function(name) {
         return this.getMinder().getNodeStyle(this, name);
     }
+});
+
+KityMinder.registerModule('Theme', {
+    commands: {
+        'theme': kity.createClass('ThemeCommand', {
+            base: Command,
+
+            execute: function(km, name) {
+                return km.useTheme(name);
+            },
+
+            queryValue: function(km) {
+                return km.getTheme();
+            }
+        })
+    }
 });
\ No newline at end of file

src/layout/default.connect.js

 var connectMarker = new kity.Marker().pipe(function() {
     var r = 4;
-    var dot = new kity.Circle(r).fill('white');
+    var dot = new kity.Circle(r);
     this.addShape(dot);
     this.setRef(r, 0).setViewBox(-r, -r, r + r, r + r).setWidth(r).setHeight(r);
+    this.dot = dot;
 });
 
-KityMinder.registerConnectProvider('default', function(node, parent, connection) {
+KityMinder.registerConnectProvider('default', function(node, parent, connection, width, color) {
 
     var box = node.getLayoutBox(),
         pBox = parent.getLayoutBox();
@@ -31,6 +32,7 @@ KityMinder.registerConnectProvider('default', function(node, parent, connection)
             pathData.push('A', abs(vector.x), abs(vector.y), 0, 0, (vector.x * vector.y > 0 ? 0 : 1), end);
 
             connection.setMarker(connectMarker);
+            connectMarker.dot.fill(color);
 
             break;
 

src/module/outline.js

@@ -12,9 +12,7 @@ var OutlineRenderer = kity.createClass('OutlineRenderer', {
             .setId(KityMinder.uuid('node_outline'));
 
         var shadow = this.shadow = new kity.Rect()
-            .setId(KityMinder.uuid('node_shadow'))
-            .fill('black')
-            .setOpacity(0.25);
+            .setId(KityMinder.uuid('node_shadow'));
 
         group.addShapes([shadow, outline]);
 
@@ -51,16 +49,20 @@ var OutlineRenderer = kity.createClass('OutlineRenderer', {
         this.outline
             .setPosition(outlineBox.x, outlineBox.y)
             .setSize(outlineBox.width, outlineBox.height)
-            .setRadius(node.getStyle('radius'))
-            .fill(node.isSelected() ?
-                node.getStyle('selected-background') :
-                node.getStyle('background'));
+            .setRadius(node.getStyle('radius'));
 
-        if (node.getLevel() < 2) {
+        var prefix = node.isSelected() ? 'selected-' : '';
+
+        this.outline.fill(node.getStyle(prefix + 'background'));
+        this.outline.stroke(node.getStyle(prefix + 'stroke'),
+            node.getStyle(prefix + 'stroke-width'));
+
+        if (node.getStyle('shadow')) {
             this.shadow
                 .setVisible(true)
                 .setPosition(outlineBox.x + 4, outlineBox.y + 5)
                 .setSize(outlineBox.width, outlineBox.height)
+                .fill(node.getStyle('shadow'))
                 .setRadius(node.getStyle('radius'));
         } else {
             this.shadow.setVisible(false);

src/module/select.js

@@ -9,7 +9,7 @@ KityMinder.registerModule('Select', function() {
         var startPosition = null;
 
         // 选区的图形
-        var marqueeShape = new kity.Path().fill('rgba(255,255,255,.3)').stroke('white');
+        var marqueeShape = new kity.Path();
 
         // 标记是否已经启动框选状态
         //    并不是 mousedown 发生之后就启动框选状态，而是检测到移动了一定的距离（MARQUEE_MODE_THRESHOLD）之后
@@ -46,7 +46,9 @@ KityMinder.registerModule('Select', function() {
                     // 已经达到阈值，记录下来并且重置选区形状
                     marqueeMode = true;
                     minder.getPaper().addShape(marqueeShape);
-                    marqueeShape.setOpacity(0.8).getDrawer().clear();
+                    marqueeShape
+                        .fill(minder.getStyle('marquee-background'))
+                        .stroke(minder.getStyle('marquee-stroke')).setOpacity(0.8).getDrawer().clear();
                 }
 
                 var marquee = g.getBox(p1, p2),

src/module/view.js

@@ -18,7 +18,7 @@ var ViewDragger = kity.createClass("ViewDragger", {
         this._enabled = value;
     },
     move: function(offset) {
-        this._minder.getRenderContainer().translate(offset.x, offset.y);
+        this._minder.getRenderContainer().translate(offset.x | 0, offset.y | 0);
     },
 
     _bind: function() {

src/template/bottom.js

@@ -9,6 +9,6 @@ KityMinder.registerTemplate('bottom', {
     },
 
     getTheme: function(node) {
-        return node.isRoot() ? 'bottom' : 'filetree';
+        return node ? (node.isRoot() ? 'bottom' : 'filetree') : 'default';
     }
 });
\ No newline at end of file

src/theme/default.js

 KityMinder.registerTheme('default', {
+    'background': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=) repeat',
+
     'root-color': '#430',
     'root-background': '#e9df98',
     'root-stroke': 'none',
@@ -7,6 +9,7 @@ KityMinder.registerTheme('default', {
     'root-margin': 100,
     'root-radius': 30,
     'root-space': 10,
+    'root-shadow': 'rgba(0, 0, 0, .25)',
 
     'main-color': '#333',
     'main-background': '#a4c5c0',
@@ -16,10 +19,11 @@ KityMinder.registerTheme('default', {
     'main-margin': 20,
     'main-radius': 10,
     'main-space': 5,
+    'main-shadow': 'rgba(0, 0, 0, .25)',
 
     'sub-color': 'white',
     'sub-background': 'none',
-    'sub-stroke': 'white',
+    'sub-stroke': 'none',
     'sub-font-size': 12,
     'sub-padding': [5, 10],
     'sub-margin': [15, 20],
@@ -34,6 +38,9 @@ KityMinder.registerTheme('default', {
     'selected-background': 'rgb(254, 219, 0)',
     'selected-color': 'black',
 
+    'marquee-background': 'rgba(255,255,255,.3)',
+    'marquee-stroke': 'white',
+
     'drop-hint-color': 'yellow',
     'sub-drop-hint-width': 2,
     'main-drop-hint-width': 4,

src/theme/fresh.js

+KityMinder.registerTheme('fresh', {
+    'background': 'white',
+
+    'root-color': '#fff',
+    'root-background': '#73bf75',
+    'root-selected-background': '#73bf75',
+    'root-stroke': 'none',
+    'root-font-size': 16,
+    'root-padding': [12, 24],
+    'root-margin': 100,
+    'root-radius': 5,
+    'root-space': 10,
+
+
+    'main-color': '#000',
+    'main-background': '#f3f9f3',
+    'main-selected-background': '#f3f9f3',
+    'main-stroke': '#beddbf',
+    'main-stroke-width': 1,
+    'main-font-size': 16,
+    'main-padding': [6, 20],
+    'main-margin': 20,
+    'main-radius': 3,
+    'main-space': 5,
+
+    'sub-color': 'black',
+    'sub-background': 'none',
+    'sub-selected-background': 'none',
+    'sub-stroke': 'none',
+    'sub-font-size': 12,
+    'sub-padding': [5, 10],
+    'sub-margin': [15, 20],
+    'sub-tree-margin': 30,
+    'sub-radius': 5,
+    'sub-space': 5,
+
+    'connect-color': '#80bf82',
+    'connect-width': 2,
+    'connect-radius': 5,
+
+    'selected-stroke': '#437152',
+    'selected-stroke-width': '3',
+
+    'marquee-background': 'rgba(154,255,156,.1)',
+    'marquee-stroke': '#73bf75',
+
+    'drop-hint-color': '#437152',
+    'sub-drop-hint-width': 2,
+    'main-drop-hint-width': 4,
+    'root-drop-hint-width': 4,
+
+    'order-hint-area-color': 'rgba(0, 255, 0, .5)',
+    'order-hint-path-color': '#0f0',
+    'order-hint-path-width': 2
+});
\ No newline at end of file