8 |
9 | Make it much more convenient to select layers with similar attributes
10 |
11 | * [中文说明](README_zh.md)
12 |
13 | ## Installing Plugins
14 |
15 | ### Direct download
16 |
17 | 1. [Download the ZIP file](https://github.com/canisminor1990/sketch-select/archive/master.zip) and unzip
18 | 2. Open the `SketchSelect.sketchplugin`
19 |
20 | ### Install with Sketchpacks
21 |
22 | 
23 |
24 | ### Install with Runner
25 |
26 | 1. Press ⌘ + ' open Runner window;
27 | 2. Switch to `install` tab;
28 | 3. Type `SketchSelect`;
29 | 4. Select `Sketch Select` item and press `Return`.
30 |
31 | 
38 |
39 | Select a layer and press Command + Shift + F on keyboard to callout the plugin dialog.
40 |
41 | 
42 |
43 | ### Select layers in all artboards
44 |
45 | You can choose wether to select layers in all artboards or just in one artboard.
46 |
47 | 
48 |
49 | ### Run with Runner
50 |
51 | 1. Press ⌘ + ' open Runner window;
52 | 2. Type `Select`;
53 |
54 | 
55 |
56 | ## Contact
57 |
58 | * Author [canisminor1990](https://github.com/canisminor1990)
59 | * Email
8 |
9 | 一键选择相同属性的图层
10 |
11 | ## 安装插件
12 |
13 | ### 直接下载
14 |
15 | 1. [下载 ZIP 包](https://github.com/canisminor1990/sketch-select/archive/master.zip) 并解压
16 | 2. 打开 `SketchSelect.sketchplugin` 即可安装
17 |
18 | ### 使用 Sketchpacks 安装
19 |
20 |
21 |
22 | ### 使用 Runner 安装
23 |
24 | 1. ⌘ + ' 打开 Runner;
25 | 2. 切换至 `install` 标签;
26 | 3. 输入 `SketchSelect`;
27 | 4. 选择 `Sketch Select` 并回车.
28 |
29 |
36 |
37 | 选择一个图层并按下 Command + Shift + F 将开打插件对话框
38 |
39 |
40 |
41 | ### 全部画板选择图层
42 |
43 | 勾选 `select layers in all artboards` 开启全局模式
44 |
45 |
46 |
47 | ### Run with Runner
48 |
49 | 1. ⌘ + ' 打开 Runner;
50 | 2. 输入 `Select`;
51 |
52 |
53 |
54 | ## 反馈方式
55 |
56 | * Author [canisminor1990](https://github.com/canisminor1990)
57 | * Email
17 |
20 | );
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/panel/components/Copyright/index.scss:
--------------------------------------------------------------------------------
1 | .footer {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | width: 100%;
6 | border: none;
7 | color: #ccc;
8 | margin-top: 12px;
9 | font-size: 13px;
10 | cursor: pointer;
11 | > span {
12 | margin-left: 8px;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/panel/components/Selection/index.js:
--------------------------------------------------------------------------------
1 | import { Checkbox, Input } from 'antd';
2 | import { connect } from 'dva';
3 | import style from './index.scss';
4 |
5 | const State = ({ config }) => ({ config });
6 |
7 | const Selection = ({ dispatch, config, title, type }) => {
8 | const update = (data, type = 'config') => {
9 | dispatch({ type: `${type}/update`, payload: data });
10 | };
11 | const onCheck = (e, type) => {
12 | const checked = e.target.checked;
13 | update({ [`${type}Checked`]: checked }, 'config');
14 | };
15 | const onInputChange = (e, type) => {
16 | const value = e.target.value;
17 | update({ [type]: value }, 'config');
18 | };
19 |
20 | return (
21 |
17 | onSwitch(e, type)} />
18 | {title}
19 |
20 | );
21 | };
22 |
23 | export default connect(State)(Switchbox);
24 |
--------------------------------------------------------------------------------
/panel/components/Switchbox/index.scss:
--------------------------------------------------------------------------------
1 | .globalSwitch {
2 | display: flex;
3 | align-items: center;
4 | > span {
5 | margin-right: 0.5rem;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/panel/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Copyright } from './Copyright';
2 | export { default as Selection } from './Selection';
3 | export { default as Switchbox } from './Switchbox';
4 |
--------------------------------------------------------------------------------
/panel/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
15 |
30 | );
31 | };
32 |
33 | render() {
34 | return (
35 |
16 |
21 | Check all
22 |
23 |
24 |
12 |
14 | );
15 |
16 | render() {
17 | return (
18 |
10 |
13 | );
14 | };
15 |
16 | Rectangle = () => {
17 | return (
18 |
19 |
24 | );
25 | };
26 |
27 | Style = () => {
28 | return (
29 |
30 |
35 | );
36 | };
37 |
38 | Other = () => {
39 | return (
40 |
41 |
45 | );
46 | };
47 | }
48 |
49 | Tab.State = state => ({
50 | ...state,
51 | });
52 |
53 | Tab.Func = dispatch => ({
54 | update(data, type = 'config') {
55 | dispatch({ type: `${type}/update`, payload: data });
56 | },
57 | reset() {
58 | dispatch({ type: `config/reset` });
59 | dispatch({ type: `layers/reset` });
60 | },
61 | });
62 |
63 | export default Tab;
64 |
--------------------------------------------------------------------------------
/panel/routes/Tab/test.json:
--------------------------------------------------------------------------------
1 | {
2 | "type" : "Shape",
3 | "id" : "38D53BC0-823D-4376-A038-B24D82A274F3",
4 | "frame" : {
5 | "x" : 56,
6 | "y" : 41,
7 | "width" : 150,
8 | "height": 108
9 | },
10 | "name" : "Rectangle",
11 | "selected": true,
12 | "flow" : null,
13 | "style" : {
14 | "type" : "Style",
15 | "id" : "826FDC94-2F8A-4151-A5A0-3A1237F2AF9F",
16 | "fills" : [
17 | {
18 | "color": "#d8d8d8ff",
19 | "fill" : "color"
20 | }
21 | ],
22 | "borders": [
23 | {
24 | "color" : "#979797ff",
25 | "fillType" : "color",
26 | "position" : "Inside",
27 | "thickness": 1
28 | }
29 | ]
30 | }
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/panel/routes/Text/index.js:
--------------------------------------------------------------------------------
1 | import Tab from '../Tab';
2 | import { connect } from 'dva';
3 | import { Collapse } from 'antd';
4 | import { Selection, Switchbox } from '../../components';
5 | import style from '../index.scss';
6 | const Panel = Collapse.Panel;
7 |
8 | class Page extends Tab {
9 | // Components
10 |
11 | Content = () => (
12 |
13 |
16 | );
17 |
18 | Prototyping = () => (
19 |
20 |
24 | );
25 |
26 | render() {
27 | return (
28 |
20 |
31 | );
32 |
33 | ResetBtn = () => (
34 |
37 | );
38 |
39 | render() {
40 | return (
41 |
22 |
25 |
28 |
29 |
42 |
46 |
47 |
49 |
50 |
52 |
53 |
55 |
56 |
58 |
59 |
61 | );
62 | }
63 |
64 | onReset = () => {
65 | this.props.reset();
66 | message.success(`Reset Success`);
67 | };
68 |
69 | onTabsChange = activeKey => this.props.update({ page: activeKey });
70 |
71 | onGetBtnClick = () => {
72 | pluginCall('getSelection');
73 | const json = localStorage.getItem('selection');
74 | const data = MapSelection(JSON.parse(json));
75 | this.props.update(data);
76 | this.props.update({ checkAll: false, checkedList: [data.type] }, 'layers');
77 | if (data.name) {
78 | message.success(`Select: ${data.name}`);
79 | } else {
80 | message.error(`Select a target first`);
81 | }
82 | };
83 |
84 | onSelectBtnClick = () => {
85 | const page = this.props.config.page;
86 | const Props = {
87 | Name: ['name', 'id'],
88 | Rect: ['x', 'y', 'width', 'height'],
89 | Prototyping: ['text', 'alignment', 'lineSpacing', 'fixedWidth'],
90 | Style: ['fillColor', 'fillType', 'borderColor', 'borderThickness'],
91 | Symbol: ['symbolId'],
92 | };
93 | const Page = {
94 | Any: {
95 | types: this.props.layers.checkedList,
96 | props: ['Name', 'Rect'],
97 | },
98 | Text: {
99 | types: ['Text'],
100 | props: ['Name', 'Rect', 'Prototyping'],
101 | },
102 | Shape: {
103 | types: ['Shape'],
104 | props: ['Name', 'Rect', 'Style'],
105 | },
106 | Symbol: {
107 | types: ['SymbolInstance', 'SymbolInstance'],
108 | props: ['Name', 'Rect', 'Symbol'],
109 | },
110 | };
111 |
112 | // Map props
113 | const propsType = Page[page].props;
114 | const typesArray = _.compact(Page[this.props.config.page].types);
115 | let pagePropsType = {};
116 | let pageProps = {};
117 | let types = {};
118 | let err = false;
119 |
120 | _.forEach(propsType, props => {
121 | pagePropsType[props] = Props[props];
122 | });
123 |
124 | _.forEach(pagePropsType, (props, key) => {
125 | _.forEach(props, type => {
126 | if (this.props.config[`${type}Checked`]) {
127 | if (this.props.config[type] !== '') {
128 | if (!pageProps[key]) pageProps[key] = {};
129 | pageProps[key][type] = this.props.config[type];
130 | if (type === 'text') pageProps.Prototyping.textReg = this.props.config.textRegSwitch;
131 | } else {
132 | err = type;
133 | }
134 | }
135 | });
136 | });
137 |
138 | if (err) return message.error(`${err} need to set`);
139 |
140 | _.forEach(typesArray, type => (types[type] = true));
141 |
142 | const data = {
143 | types,
144 | page,
145 | global: this.props.config.globalSwitch,
146 | config: pageProps,
147 | };
148 |
149 | console.log(data);
150 |
151 | if (
152 | Object.keys(data.types).length === 0 ||
153 | (page !== 'Any' && Object.keys(data.config).length === 0)
154 | ) {
155 | return message.error('Config is empty');
156 | }
157 |
158 | pluginCall('select', JSON.stringify(data));
159 | };
160 | }
161 |
162 | export default connect(Tab.State, Tab.Func)(WebView);
163 |
--------------------------------------------------------------------------------
/panel/routes/index.scss:
--------------------------------------------------------------------------------
1 | $c-primary: #32d1ff;
2 | @import 'scroll';
3 | :global {
4 | @import 'reset';
5 | }
6 | .banner {
7 | width: 100%;
8 | height: 150px;
9 | background-repeat: no-repeat;
10 | background-size: auto 90%;
11 | background-position: top center;
12 | background-color: $c-primary;
13 | padding: 1rem;
14 | }
15 |
16 | .view .container {
17 | width: 100vw;
18 | height: calc(100vh - 320px);
19 | padding: 0.5rem 1rem 1rem;
20 | overflow-x: hidden;
21 | overflow-y: auto;
22 | border: none !important;
23 | background: transparent;
24 | }
25 | .btnGroup {
26 | display: flex;
27 | margin-top: 1rem;
28 | }
29 | .getBtn,
30 | .submitBtn {
31 | flex: 1;
32 |
33 | border-radius: 3rem;
34 | }
35 | .getBtn {
36 | margin-right: 1rem;
37 | }
38 | .submitBtn {
39 | font-weight: 600;
40 | border: none;
41 | background: linear-gradient(
42 | 45deg,
43 | $c-primary,
44 | lighten($c-primary, 16%)
45 | ) !important;
46 | box-shadow: 0 4px 24px rgba($c-primary, 0.25);
47 | }
48 | .resetBtn {
49 | border-radius: 2rem;
50 | margin: 0 auto;
51 | float: right;
52 | font-size: 0.8rem;
53 | border: none;
54 | color: #fff !important;
55 | background: rgba(#fff, 0.2) !important;
56 | }
57 | .footbar {
58 | position: fixed;
59 | bottom: 0;
60 | left: 0;
61 | width: 100vw;
62 | padding: 1rem;
63 | background: #fff;
64 | box-shadow: 0 -4px 16px rgba(#000, 0.05);
65 | }
66 | .split {
67 | padding-bottom: 0.5rem;
68 | margin-bottom: 0.5rem;
69 | border-bottom: 1px solid #eee;
70 | }
71 |
--------------------------------------------------------------------------------
/panel/routes/mapSelection.js:
--------------------------------------------------------------------------------
1 | export default data => {
2 | return {
3 | ...map(data, 'type'),
4 | ...map(data, 'name'),
5 | ...map(data, 'id'),
6 | ...mapFrame(data, 'x'),
7 | ...mapFrame(data, 'y'),
8 | ...mapFrame(data, 'width'),
9 | ...mapFrame(data, 'height'),
10 | ...map(data, 'text'),
11 | ...map(data, 'alignment'),
12 | ...map(data, 'lineSpacing'),
13 | ...map(data, 'fixedWidth'),
14 | ...mapStyle(data, 'fillColor', 'fills', 'color'),
15 | ...mapStyle(data, 'fillType', 'fills', 'fill'),
16 | ...mapStyle(data, 'borderColor', 'borders', 'color'),
17 | ...mapStyle(data, 'borderThickness', 'borders', 'thickness'),
18 | ...map(data, 'symbolId'),
19 | };
20 | };
21 |
22 | function map(data, key, dataKey) {
23 | try {
24 | return {
25 | [key]: data[dataKey || key],
26 | };
27 | } catch (e) {}
28 | }
29 |
30 | function mapFrame(data, key) {
31 | try {
32 | return {
33 | [key]: data.frame[key],
34 | };
35 | } catch (e) {}
36 | }
37 |
38 | function mapStyle(data, key, type, dataKey) {
39 | try {
40 | return {
41 | [key]: data.style[type][0][dataKey],
42 | };
43 | } catch (e) {}
44 | }
45 |
--------------------------------------------------------------------------------
/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/canisminor1990/sketch-select/7d00f48db0f235b48670e4b575a2db3379507c94/public/banner.png
--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/canisminor1990/sketch-select/7d00f48db0f235b48670e4b575a2db3379507c94/public/icon.png
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import sketch from 'sketch/dom';
2 | import UI from 'sketch/ui';
3 | import WebUI from 'sketch-module-web-view';
4 | import { mapLayers, selectLayers, hex2NSColor, openURL } from './utils';
5 |
6 | const isDev = process.env.NODE_ENV === 'development';
7 | const Panel = isDev ? 'http://localhost:8000' : 'index.html';
8 |
9 | export default context => {
10 | const document = sketch.getSelectedDocument();
11 | const panelID = 'sketch-select.panel';
12 |
13 | const panelUI = new WebUI(context, Panel, {
14 | identifier: panelID,
15 | x: 0,
16 | y: 0,
17 | width: 340,
18 | height: 624,
19 | title: 'Sketch Select',
20 | onlyShowCloseButton: true,
21 | background: hex2NSColor('32d1ff'),
22 | hideTitleBar: false,
23 | shouldKeepAround: true,
24 | resizable: false,
25 | handlers: {
26 | select: callback => {
27 | const config = JSON.parse(callback);
28 | let Target;
29 | console.log(config);
30 | if (config.global) {
31 | Target = document.selectedPage;
32 | } else {
33 | Target = document.selectedLayers.layers[0];
34 | Target = searchArtboard(Target);
35 | if (!Target) return UI.alert('🖱 Select', `Select target-artboard first ~`);
36 | }
37 | const AllLayers = mapLayers(Target, config);
38 | if (AllLayers.length > 0) {
39 | document.selectedLayers.clear();
40 | selectLayers(AllLayers);
41 | UI.message(`🖱 Selected ${AllLayers.length} Layers!`);
42 | } else {
43 | UI.alert('🖱 Select', `Nothing to select ...`);
44 | }
45 | },
46 | getSelection() {
47 | const selection = document.selectedLayers.layers[0];
48 | const data = JSON.stringify(selection);
49 | UI.message(`🖱 Select: ${selection.name} (${selection.type})`);
50 | console.log(data);
51 | panelUI.eval(`getSelection(${data})`);
52 | },
53 | openWeb: url => openURL(url),
54 | },
55 | });
56 | };
57 | function searchArtboard(target) {
58 | if (!target) return false;
59 | if (target.type === 'Artboard') return target;
60 | if (target.parent) return searchArtboard(target.parent);
61 | return false;
62 | }
63 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Sketch Select",
3 | "identifier": "cm.sketch.select",
4 | "compatibleVersion": 3,
5 | "bundleVersion": 1,
6 | "icon": "icon.png",
7 | "commands": [{
8 | "name": "🖱 Select",
9 | "script": "index.js",
10 | "identifier": "sketch-select",
11 | "shortcut": "command shift f"
12 | }],
13 | "menu": {
14 | "title": "Select",
15 | "isRoot": true,
16 | "items": [
17 | "sketch-select"
18 | ]
19 | }
20 | }
--------------------------------------------------------------------------------
/src/utils/hex2NSColor.js:
--------------------------------------------------------------------------------
1 | export default hex => {
2 | const r = parseInt(hex.substring(0, 2), 16) / 255;
3 | const g = parseInt(hex.substring(2, 4), 16) / 255;
4 | const b = parseInt(hex.substring(4, 6), 16) / 255;
5 | const a = 1;
6 | return NSColor.colorWithRed_green_blue_alpha(r, g, b, a);
7 | };
8 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export { default as mapLayers } from './mapLayers';
2 | export { default as selectLayers } from './selectLayers';
3 | export { default as hex2NSColor } from './hex2NSColor';
4 | export { default as openURL } from './openURL';
5 |
--------------------------------------------------------------------------------
/src/utils/mapLayers.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 |
3 | export default (page, opt = {}) => {
4 | const configs = _.assign(
5 | {
6 | Artboard: false,
7 | Page: false,
8 | Group: false,
9 | Text: false,
10 | Shape: false,
11 | Image: false,
12 | SymbolInstance: false,
13 | SymbolMaster: false,
14 | SymbolOverride: false,
15 | },
16 | opt.types
17 | );
18 | const All = [];
19 | const Layers = [];
20 | let Filter = [];
21 | const mapLayers = layers => {
22 | _.forEach(layers, layer => {
23 | All.push(layer);
24 | if (!layer.layers) {
25 | Layers.push(layer);
26 | } else {
27 | mapLayers(layer.layers);
28 | }
29 | });
30 | };
31 |
32 | mapLayers(page.layers);
33 |
34 | /*
35 | const Props = {
36 | Name: ['name', 'id'],
37 | Rect: ['x', 'y', 'width', 'height'],
38 | Prototyping: ['text', 'alignment', 'lineSpacing', 'fixedWidth'],
39 | Style: ['fillColor', 'fillType', 'borderColor', 'borderThickness'],
40 | Symbol: ['symbolId'],
41 | };
42 | */
43 |
44 | _.forEach(All, layer => {
45 | let save = true;
46 | if (!configs[layer.type]) save = false;
47 |
48 | if (save && opt.config.Name) {
49 | _.forEach(opt.config.Name, (value, key) => {
50 | if (layer[key] !== value) save = false;
51 | });
52 | }
53 |
54 | if (save && opt.config.Rect) {
55 | _.forEach(opt.config.Rect, (value, key) => {
56 | if (layer.frame[key] !== value) save = false;
57 | });
58 | }
59 |
60 | if (save && opt.config.Symbol) {
61 | _.forEach(opt.config.Symbol, (value, key) => {
62 | if (layer[key] !== value) save = false;
63 | });
64 | }
65 |
66 | if (save && opt.config.Prototyping) {
67 | _.forEach(opt.config.Prototyping, (value, key) => {
68 | if (key === 'text') {
69 | if (opt.config.Prototyping.textReg) {
70 | const reg = new RegExp(value);
71 | if (!reg.test(layer.text)) save = false;
72 | } else {
73 | if (layer.text !== value) save = false;
74 | }
75 | } else {
76 | if (layer[key] && layer[key] !== value) save = false;
77 | }
78 | });
79 | }
80 |
81 | if (save && opt.config.Style) {
82 | const Style = opt.config.Style;
83 | const fill = layer.style.fills[0];
84 | const border = layer.style.borders[0];
85 | if (save && Style.fillColor) {
86 | if (!fill) save = false;
87 | if (save && fill.color !== Style.fillColor) save = false;
88 | }
89 | if (save && Style.fillType) {
90 | if (!fill) save = false;
91 | if (save && fill.fill !== Style.fillType) save = false;
92 | }
93 | if (save && Style.borderColor) {
94 | if (!border) save = false;
95 | if (save && border.color !== Style.borderColor) save = false;
96 | }
97 | if (save && Style.borderThickness) {
98 | if (!border) save = false;
99 | if (save && border.thickness !== Style.borderThickness) save = false;
100 | }
101 | }
102 |
103 | if (save) Filter.push(layer);
104 | });
105 |
106 | console.log('Filter', JSON.stringify(Filter));
107 |
108 | return Filter;
109 | };
110 |
--------------------------------------------------------------------------------
/src/utils/openURL.js:
--------------------------------------------------------------------------------
1 | export default url => NSWorkspace.sharedWorkspace().openURL(NSURL.URLWithString(url));
2 |
--------------------------------------------------------------------------------
/src/utils/selectLayers.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 |
3 | export default layers => {
4 | try {
5 | _.forEach(layers, layer => (layer.selected = true));
6 | } catch (e) {
7 | console.log(e);
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
43 |
45 |