add theme color plug codes

API/example/modifyTrackVia.js

@@ -0,0 +1,18 @@
+//you can get the EasyEDA json objects like https://gist.github.com/071d4680dcdbf6bf9dd6.git
+//try to pen a pcb, then run bellow codes.
+
+var json = api('getSource', {type: "json"}),
+	id;
+
+for(id in json.TRACK){
+	if(json.TRACK.hasOwnProperty(id)){
+		json.TRACK[id].strokeWidth = api('edit.unitConvert', {type:'mil2pixel',value:10}); // 10mil
+	}
+}
+
+for(id in json.VIA){
+	if(json.VIA.hasOwnProperty(id)){
+		json.VIA[id].holeR = api('edit.unitConvert', {type:'mil2pixel',value:10}); // 10mil
+	}
+}
+api('applySource', {source: json, createNew: true});

API/example/theme/README.md

@@ -0,0 +1 @@
+Change the theme colors of your design.

API/example/theme/locale.txt

@@ -0,0 +1,6 @@
+[zh-cn]
+Theme Colors = 主题颜色
+Change the theme colors of your design = 修改设计图的主题颜色。
+White on Black = 黑底白图
+Black on White = 白底黑图
+Custom Colors... = 自定义颜色...

API/example/theme/main.js

@@ -0,0 +1,129 @@
+
+//Add a button on the toolbar
+api('createToolbarButton', {
+	icon: api('getRes', {file:'icon.svg'}),
+	title:'Theme Colors...',
+	fordoctype:'sch,schlib',
+	menu:[
+		{"text":"White on Black", "cmd":"extension-theme-WhiteOnBlack"},
+		{"text":"Black on White", "cmd":"extension-theme-BlackOnWhite"},
+		{"text":"Custom Colors...", "cmd":"extension-theme-setting"}
+	]
+});
+
+
+//subitems of Menu
+api('createExtensionMenu', [
+	{
+		"text":"Theme Colors",
+		"fordoctype": "sch,schlib",
+		submenu:[
+			{"text":"White on Black", "cmd":"extension-theme-WhiteOnBlack"},
+			{"text":"Black on White", "cmd":"extension-theme-BlackOnWhite"},
+			{"text":"Custom Colors...", "cmd":"extension-theme-setting"}
+		]
+	}
+]);
+
+// Command router
+api('createCommand', {
+	'extension-theme-apply' : function (colorConfig){
+		if(!colorConfig){
+			colorConfig = {};
+			$('#dlg-theme-setting-items button[data-key]').each(function (i,el){
+				colorConfig[$(el).attr('data-key')] = $(el).attr('value');
+			});
+		}
+		api('editorCall', {
+			cmd:'setColors',
+			args:[colorConfig]
+		});
+	},
+	'extension-theme-setting' : function (){
+		var oldCfg = api('editorCall', 'getConfig');
+		var colorConfig = $.extend({}, themeWhiteOnBlack, oldCfg && oldCfg.colors);
+		updateItemsByConfig(colorConfig);
+		$dlgTheme.dialog('open');
+		Locale.update($dlgTheme);
+	},
+	'extension-theme-WhiteOnBlack' : function (){
+		api('editorCall', { //This is set Colors API
+			cmd:'setColors',
+			args:[$.extend({}, themeWhiteOnBlack)]
+		});
+	},
+	'extension-theme-BlackOnWhite' : function (){
+		api('editorCall', {
+			cmd:'setColors',
+			args:[$.extend({}, themeBlackOnWhite)]
+		});
+	}
+});
+
+var $dlgTheme = api('createDialog', {
+	title: "Theme Colors",
+	content : '<div id="dlg-theme-setting-items" style="padding:10px;"></div>'
+			+'<div id="dlg-theme-setting-preset" style="padding:0 10px 10px;">'
+			+'<div><strong>Common used:</strong></div>'
+			+'<div><a href="#" data-style="black">White on Black</a></div>'
+			+'<div style="margin-top:4px"><a href="#" data-style="white">Black on White</a></div>'
+			+'</div>',
+	width : 280,
+	height : 400,
+	modal : true,
+	buttons : [{
+			text : 'Apply',
+			iconCls : 'icon-ok',
+			cmd : 'extension-theme-apply;dialog-close'
+		}, {
+			text : 'Cancel',
+			cmd : 'dialog-close'
+		}
+	]
+});
+!(function (){
+	$('#dlg-theme-setting-preset a').linkbutton().on('click',function(e){
+		var st = $(this).attr('data-style');
+		if(st=='black'){
+			updateItemsByConfig(themeWhiteOnBlack);
+		}else if(st=='white'){
+			updateItemsByConfig(themeBlackOnWhite);
+		}
+		Locale.update($('#dlg-theme-setting-items'));
+	});
+}());
+
+function colorConfigToHTML(colorConfig){
+	return Object.keys(colorConfig).reduce(function(html, k){
+			return html + '<div style="margin-bottom:4px;"><button data-key="'+k+'" type="button" class="color" style="width:40px; background-color:'+colorConfig[k]+';" value="'+colorConfig[k]+'">&nbsp;</button> <span class="i18n">'+k.charAt(0).toUpperCase()+k.substr(1)+'</span></div>';
+		}, '');
+}
+function updateItemsByConfig(colorConfig){
+	var content = colorConfigToHTML(colorConfig);
+	var $container = $('#dlg-theme-setting-items');
+	$container.html(content);
+	$('button.color',$container).colorpicker();
+}
+
+var themeWhiteOnBlack = {
+		'background':'#000000',
+		'foreground':'#FFFFFF',
+		'grid':'#FFFFFF',
+		'pin':'#FFFFFF',
+		'bus':'#FFFFFF',
+		'wire':'#FFFFFF',
+		'text':'#FFFFFF',
+		'busEntry':'#FFFFFF',
+		'partGraphics':'#FFFFFF'
+	},
+	themeBlackOnWhite = {
+		'background':'#FFFFFF',
+		'foreground':'#000000',
+		'grid':'#000000',
+		'pin':'#000000',
+		'bus':'#000000',
+		'wire':'#000000',
+		'text':'#000000',
+		'busEntry':'#000000',
+		'partGraphics':'#000000'
+	};

API/example/theme/manifest.json

@@ -0,0 +1,13 @@
+{
+	"name": "Theme Colors",
+	"description": "Change the theme colors of your design",
+	"version": "1.0",
+	"icons": {
+		"default": "icon.svg",
+		"16": "icon16.png",
+		"24": "icon24.png",
+		"32": "icon32.png"
+	},
+	"locale": "locale.txt",
+	"scripts": [ "main.js" ]
+}

Tutorial/new.md

@@ -6,9 +6,6 @@ The new sandbox version is V2.1.1. EasyEDA has lots of new features in the versi
 **Warn:Sandbox version is newer than released version[http://easyeda.com/editor](http://easyeda.com/editor), it can open your old files, but [http://easyeda.com/editor](http://easyeda.com/editor) can not open the files which are created by sandbox version before we release it a few weeks later.** 
 
 
-
- such as , , Improved Design Manager, SVG Preview, User Defined BOM Parameters, 
-
 ## Open File Format
 
  If you want to hack EasyEDA's EDA files, you can check [http://easyeda.com/Doc/Open-File-Format/](http://easyeda.com/Doc/Open-File-Format/) out.  
@@ -39,4 +36,37 @@ If you just need some simple functions, you don't need to create an extension. Y
 ### Run Script code
 In some case, you just need to run the function one time, such as create a user define board outline in codes, changing the Track width, change the hole size etc. You can use this way.
 ![](./images/script.png).
+**example 1 Art **
+You can open an empty schematic and copy [this example javascript codes](https://raw.githubusercontent.com/dillonHe/EasyEDA-Documents/master/API/example/schematicShapes.js) to the text box to run a test. After clicking the `Run` button, you will see bellow art image.
+![](./images/api-example-art.png)
+
+**example 2 Change track width and via hole size **
+You can open a **PCB** and copy [this example javascript codes](https://raw.githubusercontent.com/dillonHe/EasyEDA-Documents/master/API/example/modifyTrackVia.js) to the text box to run a test. After that, All tracks will be 10mil.
+
+##Improved Design Manager
+In the schematic and PCB file, there is toggle button [Design Manager <-> Properties] on the top right, when you switch to Design Manager, you will see bellow image
+![](./images/DesignManager.png)
+
+You can highlight the components and net, at the same time, you can check the ** DRC Errors**.
+
+Schematic has design manager too, and you can filter and highlight the components, such as type a `R`, you will find all resistors.
+![](./images/DesignManager-schematic.png)
+
+##SVG Preview
+![](./images/SVG-Preview.png)
+After click the `SVG Preview` button, you will see a nice SVG image and you can save the SVG file to your hard drive. This operation will be faster than export, because you don't need to send the file to EasyEDA server, and it is safe.
+
+##User Defined BOM Parameters
+After select a schematic lib, you can add a parameter, and you can mark it as `In BOM`, when you export a BOM file, you can find this in CSV file.
+![](./images/UserDefineBOM.png)
+
+##Prefix Start
+Every **new** schematic file has a `Prefix Start` custom paarameter, some users would like use  **multi-sheet designs**, but they hate every prefix start by 1, they hope one schematic start by 1, next start by 100, 200, 300. So you can use this solution.
+![](./images/Prefix-Start.png)
+
+##Allow to adjust the right panel width
+Some Russian, German users' language is long, so they can addjust the width.
+
+![](./images/rightPanelWidth.png) 
 
+## New Pad shapes