Add a new command - create symbol instance

Author: tankxu

README.md

@@ -1,8 +1,9 @@
 # CODING Toolkit Sketch Plugin
 
-<img src='https://user-images.githubusercontent.com/5106039/80296781-61060600-87b0-11ea-8dd4-d9a15d29d9cd.png' width='674px'>
+<img src='https://user-images.githubusercontent.com/5106039/80345374-9c313380-889b-11ea-9686-2e3d2d6ee4ac.png' width='839px'>
 
 ## 插件命令
+Dev Library 分类中的命令主要用于开发 Sketch Library 时使用。
 
 ### 1. Update Icon 升级图标
 用于替换旧版 CODING Icon 至新版 CODING Icon，在设计稿中选中来自旧版的 CODING Icon Library 的 symbol 然后执行此命令即可自动替换为对应的新版 CODING ICON，并且保留原来 icon 覆盖的颜色。
@@ -11,6 +12,9 @@
 用与在 CODING Icon Library 文件中修改或添加 icon 后重新生成 icon 集合，以便在 Abstract 中查找 icon。执行此命令将会自动删除原 Page 1 中的 icon collection 画板然后重新生成新的画板。
 更新 CODING Icon 的具体方法请查看此 [Wiki](https://codingcorp.coding.net/p/Design-Center/wiki/1495)
 
+### 3. Create Symbol Instance 通过选中的 Symbol Master 创建 Instance
+选中一个或多个 Symbol Master 后执行此命令，可自动在 Symbol Master 下方创建对应的 instance，用于快速预览和检查 Symbol Master 的使用效果与 Overrides 配置。
+
 ## Installation
 
 - [Download](../../releases/latest/download/coding-toolkit.sketchplugin.zip) the latest release of the plugin

src/create-symbol-instance.js

@@ -0,0 +1,30 @@
+import sketch from 'sketch'
+
+export default function() {
+  const document = sketch.getSelectedDocument()
+  const selection = document.selectedLayers.layers
+  const SymbolInstance = sketch.SymbolInstance
+
+  const currentPage = document.selectedPage
+  const notSymbolArrary = []
+
+  // Create symbol instance under selected symbol
+  selection.map(symbolMaster => {
+    if (symbolMaster.symbolId) {
+      let instance = new SymbolInstance({
+        name: symbolMaster.name,
+        parent: currentPage,
+        frame: symbolMaster.frame,
+        symbolId: symbolMaster.symbolId,
+      })
+      instance.frame.y = instance.frame.y + instance.frame.height   
+    } else {
+      notSymbolArrary.push(symbolMaster.name)
+    }
+  })
+
+  // Show the layers which not symbol
+  if (notSymbolArrary.length > 0 ) {
+    sketch.UI.message(`‼️ Error: Layer '${notSymbolArrary.join(', ')}' not a symbol !`)
+  }
+}

src/dev-library/create-symbol-instance.js

@@ -0,0 +1,30 @@
+import sketch from 'sketch'
+
+export default function() {
+  const document = sketch.getSelectedDocument()
+  const selection = document.selectedLayers.layers
+  const SymbolInstance = sketch.SymbolInstance
+
+  const currentPage = document.selectedPage
+  const notSymbolArrary = []
+
+  // Create symbol instance under selected symbol
+  selection.map(symbolMaster => {
+    if (symbolMaster.symbolId) {
+      let instance = new SymbolInstance({
+        name: symbolMaster.name,
+        parent: currentPage,
+        frame: symbolMaster.frame,
+        symbolId: symbolMaster.symbolId,
+      })
+      instance.frame.y = instance.frame.y + instance.frame.height   
+    } else {
+      notSymbolArrary.push(symbolMaster.name)
+    }
+  })
+
+  // Show the layers which not symbol
+  if (notSymbolArrary.length > 0 ) {
+    sketch.UI.message(`‼️ Error: '${notSymbolArrary.join(', ')}' is not a symbol !`)
+  }
+}

src/generate-icons-collection.js renamed to src/dev-library/generate-icons-collection.js

@@ -10,14 +10,25 @@
     {
       "name": "Generate Icon Library Collection",
       "identifier": "coding-toolkit.generate-icons-collection",
-      "script": "./generate-icons-collection.js"
+      "script": "./dev-library/generate-icons-collection.js"
+    },
+    {
+      "name": "Create Symbol Instance",
+      "identifier": "coding-toolkit.create-symbol-instance",
+      "script": "./dev-library/create-symbol-instance.js"
     }
   ],
   "menu": {
     "title": "🐤 CODING Toolkit",
     "items": [
       "coding-toolkit.update-icon",
-      "coding-toolkit.generate-icons-collection"
+      {
+        "title": "Dev Library",
+        "items": [
+          "coding-toolkit.generate-icons-collection",
+          "coding-toolkit.create-symbol-instance"
+        ]
+      }
     ]
   }
 }