From e734df771a592bca3c18ac7b4669ac09ca1a9d55 Mon Sep 17 00:00:00 2001 From: Artem Novichkov Date: Fri, 23 Mar 2018 17:51:40 +0600 Subject: [PATCH 1/5] Add test shadow template --- src/index.js | 14 +------------- src/templates/shadow.js | 17 +++++++++++++++++ src/zepcode.js | 22 +++++++++++++++++----- 3 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 src/templates/shadow.js diff --git a/src/index.js b/src/index.js index 1e2a4d6..dd4d26a 100644 --- a/src/index.js +++ b/src/index.js @@ -59,19 +59,7 @@ function layer(context, layerParams) { if (layerParams.shadows.length) { const shadow = layerParams.shadows[0]; - const { color } = shadow; - - if (color !== undefined) { - const shadowColor = zepcodeInstance.cgColorString(shadow.color); - string += `view.layer.shadowColor = ${shadowColor}\n`; - } - string += `view.layer.shadowOffset = `; - if (shadow.offsetX && shadow.offsetY) { - string += `CGSize(width: ${shadow.offsetX}, height: ${shadow.offsetY})\n`; - } else { - string += `.zero\n`; - } - string += `view.layer.shadowRadius = ${layerParams.borderRadius}`; + string += zepcodeInstance.shadow(shadow); } let result = {}; diff --git a/src/templates/shadow.js b/src/templates/shadow.js new file mode 100644 index 0000000..566627f --- /dev/null +++ b/src/templates/shadow.js @@ -0,0 +1,17 @@ +import customColorTemplate from './custom-color'; +import colorTemplate from './color'; + +const shadowTemplate = (shadow, colorString, extensionOptions) => `view.layer.shadowColor = ${colorString} +view.layer.shadowOpacity = 1 +view.layer.shadowOffset = ${ + shadow.offsetX || shadow.offsetY + ? `CGSize(width: ${shadow.offsetX}, height: ${shadow.offsetY})` + : `.zero`} +view.layer.shadowRadius = ${shadow.blurRadius} / 2 +${ + shadow.spread > 0 + ? `let rect = bounds.insetBy(dx: ${-shadow.spread}, dy: ${-shadow.spread}) +view.layer.shadowPath = UIBezierPath(rect: rect).cgPath` + : `view.layer.shadowPath = nil`}`; + +export default shadowTemplate; \ No newline at end of file diff --git a/src/zepcode.js b/src/zepcode.js index 44c9af3..795ca12 100644 --- a/src/zepcode.js +++ b/src/zepcode.js @@ -5,6 +5,7 @@ import linearGradientTemplate from './templates/linear-gradient'; import radialGradientTemplate from './templates/radial-gradient'; import fontExtensionTemplate from './templates/font-extension'; import headerTemplate from './templates/header'; +import shadowTemplate from './templates/shadow'; const zepcode = (() => { let instance; @@ -23,19 +24,20 @@ const zepcode = (() => { }; } - me.cgColorString = color => { + me.colorString = (color, postfix) => { const styleguideColor = me.project.findColorEqual(color); - const cgColorPostfix = '.cgColor'; if (me.options.useColorNames && styleguideColor) { - return `UIColor.${styleguideColor.name}${cgColorPostfix}`; + return `UIColor.${styleguideColor.name}${postfix}`; } if (me.options.useCustomColorInitializer) { - return customColorTemplate(color) + cgColorPostfix; + return customColorTemplate(color) + postfix; } - return colorTemplate(color) + cgColorPostfix; + return colorTemplate(color) + postfix; }; + me.cgColorString = color => me.colorString(color, `.cgColor`); + me.colorStopsString = gradient => { const { colorStops } = gradient; return colorStops @@ -81,6 +83,16 @@ const zepcode = (() => { }; }; + me.shadow = shadow => { + const color = Object.assign({}, shadow.color); + const colorString = me.colorString( + color, + `.withAlphaComponent(${shadow.color.a}).cgColor` + ); + + return shadowTemplate(shadow, colorString, me.options); + }; + return me; } From c200543a76fe0f99deb3092e9c36ccd0569b822c Mon Sep 17 00:00:00 2001 From: Artem Novichkov Date: Fri, 23 Mar 2018 18:07:44 +0600 Subject: [PATCH 2/5] Remove extra alpha setting --- src/zepcode.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/zepcode.js b/src/zepcode.js index 795ca12..eadfd9e 100644 --- a/src/zepcode.js +++ b/src/zepcode.js @@ -24,8 +24,9 @@ const zepcode = (() => { }; } - me.colorString = (color, postfix) => { + me.cgColorString = color => { const styleguideColor = me.project.findColorEqual(color); + const postfix = `.cgColor`; if (me.options.useColorNames && styleguideColor) { return `UIColor.${styleguideColor.name}${postfix}`; @@ -36,8 +37,6 @@ const zepcode = (() => { return colorTemplate(color) + postfix; }; - me.cgColorString = color => me.colorString(color, `.cgColor`); - me.colorStopsString = gradient => { const { colorStops } = gradient; return colorStops @@ -84,11 +83,7 @@ const zepcode = (() => { }; me.shadow = shadow => { - const color = Object.assign({}, shadow.color); - const colorString = me.colorString( - color, - `.withAlphaComponent(${shadow.color.a}).cgColor` - ); + const colorString = me.cgColorString(shadow.color); return shadowTemplate(shadow, colorString, me.options); }; From 7e0bc8652bd28aa9bf3d951016d75a548b9a2f9f Mon Sep 17 00:00:00 2001 From: Artem Novichkov Date: Fri, 23 Mar 2018 20:53:38 +0600 Subject: [PATCH 3/5] Add layer extension for shadows and related option --- README.md | 28 ++++++++++++++++++++++++++++ package.json | 6 ++++++ src/templates/custom-shadow.js | 15 +++++++++++++++ src/templates/shadow.js | 2 +- src/zepcode.js | 16 ++++++++++++---- 5 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 src/templates/custom-shadow.js diff --git a/README.md b/README.md index 06bc20a..edcf336 100644 --- a/README.md +++ b/README.md @@ -153,6 +153,34 @@ Use color names from Color Palette or default `UIColor(red:green:blue:alpha:)` i #### Use custom color initializer Use `UIColor(r:g:b:a:)` initializer. +#### Use layer extension for shadows +Use this function for shadow parameters. Don't forget to add this extension to your project. + +```swift +import UIKit + +extension CALayer { + + func makeShadow(color: UIColor, + x: CGFloat = 0, + y: CGFloat = 0, + blur: CGFloat = 0, + spread: CGFloat = 0) { + shadowColor = color.cgColor + shadowOpacity = 1 + shadowOffset = CGSize(width: x, height: y) + shadowRadius = blur / 2 + if spread == 0 { + shadowPath = nil + } + else { + let rect = bounds.insetBy(dx: -spread, dy: -spread) + shadowPath = UIBezierPath(rect: rect).cgPath + } + } +} +``` + ## How to Install Download and unzip [the latest release](https://github.com/artemnovichkov/zepcode/releases/). diff --git a/package.json b/package.json index f668926..c3caf36 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,12 @@ "type": "switch", "id": "use_custom_color_initializer", "default": false + }, + { + "name": "Use layer extension for shadows", + "type": "switch", + "id": "use_layer_shadow_extension", + "default": false } ] } diff --git a/src/templates/custom-shadow.js b/src/templates/custom-shadow.js new file mode 100644 index 0000000..11f14b8 --- /dev/null +++ b/src/templates/custom-shadow.js @@ -0,0 +1,15 @@ +const customShadowTemplate = (shadow, colorString) => `view.layer.makeShadow(color: ${colorString}${ + shadow.offsetX ? `, + x: ${shadow.offsetX}` : `` +}${ + shadow.offsetY ? `, + y: ${shadow.offsetY}` : `` +}${ + shadow.blurRadius ? `, + blur: ${shadow.blurRadius}` : `` +}${ + shadow.spread ? `, + spread: ${shadow.spread}` : `` +})`; + +export default customShadowTemplate; \ No newline at end of file diff --git a/src/templates/shadow.js b/src/templates/shadow.js index 566627f..c14e432 100644 --- a/src/templates/shadow.js +++ b/src/templates/shadow.js @@ -1,7 +1,7 @@ import customColorTemplate from './custom-color'; import colorTemplate from './color'; -const shadowTemplate = (shadow, colorString, extensionOptions) => `view.layer.shadowColor = ${colorString} +const shadowTemplate = (shadow, colorString) => `view.layer.shadowColor = ${colorString} view.layer.shadowOpacity = 1 view.layer.shadowOffset = ${ shadow.offsetX || shadow.offsetY diff --git a/src/zepcode.js b/src/zepcode.js index eadfd9e..f00eb89 100644 --- a/src/zepcode.js +++ b/src/zepcode.js @@ -6,6 +6,7 @@ import radialGradientTemplate from './templates/radial-gradient'; import fontExtensionTemplate from './templates/font-extension'; import headerTemplate from './templates/header'; import shadowTemplate from './templates/shadow'; +import customShadowTemplate from './templates/custom-shadow'; const zepcode = (() => { let instance; @@ -19,14 +20,16 @@ const zepcode = (() => { useCustomColorInitializer: privateContext.getOption( 'use_custom_color_initializer' ), + useLayerShadowExtension: privateContext.getOption( + 'use_layer_shadow_extension' + ), }, project: privateContext.project, }; } - me.cgColorString = color => { + me.colorString = (color, postfix) => { const styleguideColor = me.project.findColorEqual(color); - const postfix = `.cgColor`; if (me.options.useColorNames && styleguideColor) { return `UIColor.${styleguideColor.name}${postfix}`; @@ -37,6 +40,8 @@ const zepcode = (() => { return colorTemplate(color) + postfix; }; + me.cgColorString = color => me.colorString(color, `.cgColor`); + me.colorStopsString = gradient => { const { colorStops } = gradient; return colorStops @@ -83,9 +88,12 @@ const zepcode = (() => { }; me.shadow = shadow => { + if (me.options.useLayerShadowExtension) { + const colorString = me.colorString(shadow.color, ``); + return customShadowTemplate(shadow, colorString); + } const colorString = me.cgColorString(shadow.color); - - return shadowTemplate(shadow, colorString, me.options); + return shadowTemplate(shadow, colorString); }; return me; From e6a96a8e40f145b600f754e9cbe74264ccd02a97 Mon Sep 17 00:00:00 2001 From: Artem Novichkov Date: Fri, 23 Mar 2018 21:06:55 +0600 Subject: [PATCH 4/5] Add missing view --- src/templates/shadow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/shadow.js b/src/templates/shadow.js index c14e432..3eb5d12 100644 --- a/src/templates/shadow.js +++ b/src/templates/shadow.js @@ -10,7 +10,7 @@ view.layer.shadowOffset = ${ view.layer.shadowRadius = ${shadow.blurRadius} / 2 ${ shadow.spread > 0 - ? `let rect = bounds.insetBy(dx: ${-shadow.spread}, dy: ${-shadow.spread}) + ? `let rect = view.bounds.insetBy(dx: ${-shadow.spread}, dy: ${-shadow.spread}) view.layer.shadowPath = UIBezierPath(rect: rect).cgPath` : `view.layer.shadowPath = nil`}`; From d7b264aa8ebae341770c2978b9ba729b5fb12fa9 Mon Sep 17 00:00:00 2001 From: Artem Novichkov Date: Fri, 23 Mar 2018 23:55:10 +0600 Subject: [PATCH 5/5] Update version --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index bbfe39a..aec6aec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "zepcode", - "version": "0.5.3", + "version": "0.5.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index c3caf36..15c1c09 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "zepcode", - "version": "0.5.3", + "version": "0.5.4", "description": "Generates Swift snippets from colors, fonts and layers.", "lint-staged": { "src/**/*.{js,json}": [