🎛 - Transpile to ES5

.gitignore

@@ -0,0 +1,4 @@
+
+Chain\.sketchplugin/Contents/Sketch/node_modules/
+
+\.DS_Store

Chain.sketchplugin/Contents/Sketch/Chain.cocoascript

@@ -1,6 +1,6 @@
-@import "library/Utils.js";
-@import "library/Dialog.js";
-@import "library/ChainManager.js";
-@import "library/Chain.js";
-@import "library/Main.js";
+@import "build/Utils.js";
+@import "build/Dialog.js";
+@import "build/ChainManager.js";
+@import "build/Chain.js";
+@import "build/Main.js";
 

Chain.sketchplugin/Contents/Sketch/build/Chain.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+// Chain Components: 
+// - guideLayer: Layer containing the color reference. 
+// - referenceTarget: The property containing the color reference inside the layer. Possible values: Fill, Border. 
+// - chainedLayer: Layer to perform the chained change. 
+// - type: What type of color change to perform. Possible values: Hue, Saturation, Brightness, Alpha. 
+// - target: The property to change. Possible values: Fill, Border. 
+// - value: How much to change the color (expressed in percentage (for Bright/Satur/Alpha)) and in a number between -100 and 100 for Hue. 
+// - timestamp: Chain creation time. 
+
+var Chain = function () {
+	function Chain(type, guideLayer, referenceTarget, chainedLayer, target, value, timestamp) {
+		_classCallCheck(this, Chain);
+
+		this.type = type;
+		this.guideLayer = guideLayer;
+		this.referenceTarget = referenceTarget;
+		this.chainedLayer = chainedLayer;
+		this.target = target;
+		this.value = value;
+		this.timestamp = timestamp;
+	}
+
+	_createClass(Chain, null, [{
+		key: 'run',
+		value: function run(chain, context) {
+			var success = void 0;
+			//Find the necesary layers
+			var guide = context.document.documentData().layerWithID(chain.guideLayer);
+			var chained = context.document.documentData().layerWithID(chain.chainedLayer);
+
+			if (guide && chained) {
+				//Get the reference color and the target color. 
+				var guideColor = Chain.getColorFrom(guide, chain.referenceTarget);
+				var chainedColor = Chain.getColorFrom(chained, chain.target);
+
+				if (guideColor && chainedColor) {
+					//Modify the specified values and set color back again. 
+					var linkedColor = Chain.transformColor(guideColor, chainedColor, chain.type, chain.value);
+					Chain.setColorTo(linkedColor, chained, chain.target);
+					success = true;
+				} else {
+					success = false;
+					log('Could not find colors.');
+				}
+			} else {
+				success == false;
+				log('Could not update chain');
+			};
+			return success;
+		}
+	}, {
+		key: 'setColorTo',
+		value: function setColorTo(color, layer, target) {
+
+			if (target == "Fill") {
+
+				if (layer.class() == "MSTextLayer") {
+					// If the layer if text, set the text color instead. 
+					layer.setTextColor(color);
+				} else {
+					layer.style().fills().firstObject().color = color;
+				}
+				return;
+			} else if (target == "Border") {
+
+				var border = layer.style().borders().firstObject();
+
+				if (border && border.isEnabled()) {
+					border.color = color;
+				} else {
+					log('Could not set border.');
+				}
+			} else {
+				log("Chain: Tried to update unrecognized layer property.");
+			}
+		}
+	}, {
+		key: 'getColorFrom',
+		value: function getColorFrom(layer, target) {
+
+			if (target == "Fill") {
+				// If the layer if text, get the text color instead. 
+				if (layer.class() == "MSTextLayer") {
+					return layer.textColor();
+				} else {
+					return layer.style().fills().firstObject().color();
+				}
+			} else if (target == "Border") {
+				var border = layer.style().borders().firstObject();
+
+				if (border && border.isEnabled()) {
+					return layer.style().borders().firstObject().color();
+				} else {
+					log("Could not get border");
+				}
+			} else {
+				log("Chain: Tried to get urecognized layer property.");
+			}
+		}
+	}, {
+		key: 'transformColor',
+		value: function transformColor(guideColor, chainedColor, type, value) {
+
+			var h = type == "Hue" ? Chain.normalizeHue(guideColor.hue(), value) : chainedColor.hue(),
+			    s = type == "Saturation" ? guideColor.saturation() * value : chainedColor.saturation(),
+			    b = type == "Brightness" ? guideColor.brightness() * value : chainedColor.brightness(),
+			    a = type == "Alpha" ? guideColor.alpha() * value : chainedColor.alpha();
+
+			return MSColor.colorWithHue_saturation_brightness_alpha(h, s, b, a);
+		}
+		//Makes the value wrap between 0 and 1. 
+
+	}, {
+		key: 'normalizeHue',
+		value: function normalizeHue(hue, transform) {
+			var addition = hue + transform - 1;
+			if (addition > 1) {
+				return addition - 1;
+			} else if (addition < 0) {
+				return addition + 1;
+			} else {
+				return addition;
+			};
+		}
+	}]);
+
+	return Chain;
+}();

Chain.sketchplugin/Contents/Sketch/build/ChainManager.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var ChainManager = function () {
+	function ChainManager(context) {
+		_classCallCheck(this, ChainManager);
+
+		this.context = context;
+		this.sketch = this.context.api();
+		this.document = this.sketch.selectedDocument;
+		this.selection = this.context.selection;
+		this.command = this.context.command;
+		this.pluginID = this.context.plugin.identifier();
+		this.docData = context.document.documentData();
+		plugin = this.context.plugin;
+
+		this.LAYER_CHAINS_KEY = 'layer-chains';
+	}
+
+	_createClass(ChainManager, [{
+		key: "newChain",
+		value: function newChain() {
+			var _this = this;
+
+			var layers = this.selection;
+
+			if (layers.count() < 2) {
+				Dialog.newInformationDialog("Oops!", "Please select at least two layers to chain.");
+				return;
+			}
+
+			var userInput = Dialog.newChainCreator(layers);
+			switch (userInput.responseCode) {
+				case 1000:
+					//User clicks create chain 
+
+					each(layers, function (layer) {
+						if (layer.objectID() != userInput.guideLayer) {
+							userInput.targets.forEach(function (target) {
+								var chain = new Chain(userInput.type, userInput.guideLayer, userInput.referenceTarget, layer.objectID(), target, userInput.value, Date.now());
+								_this.saveChain(chain);
+							});
+						};
+					});
+					break;
+
+				default:
+					//Just close the dialog
+					break;
+			};
+		}
+	}, {
+		key: "saveChain",
+		value: function saveChain(chain) {
+
+			var chains = this.getStoredChains();
+			var matchingChain = this.findChainWithMatchingTarget(chains, chain);
+
+			if (matchingChain) {
+				removeItemFromArray(chains, matchingChain); //Remove chain with same layers, type and target. 
+			}
+
+			chains.push(chain);
+
+			var relatedChains = chains.filter(function (c) {
+				return c.chainedLayer == chain.chainedLayer && c.target == chain.target;
+			});
+			//Run all the chains with the same layer and target.
+			this.runChains(relatedChains, function (chain, success) {
+				if (!success) {
+					removeItemFromArray(chains, chain);
+					log('Removing...');
+				}
+			});
+			return this.setStoredChains(chains);
+		}
+	}, {
+		key: "removeChainsBetweenSelectedLayers",
+		value: function removeChainsBetweenSelectedLayers() {
+			var layers = this.selection;
+
+			if (layers.count() != 2) {
+				Dialog.newInformationDialog("Cannot remove chains", "Please select two layers.");
+			};
+
+			var chains = this.getStoredChains();
+			//Filter all chains that relate the two selected layers. 
+			var filteredChains = chains.filter(function (chain) {
+				return !(chain.guideLayer == layers[0].objectID() && chain.chainedLayer == layers[1].objectID() || chain.guideLayer == layers[1].objectID() && chain.chainedLayer == layers[0].objectID());
+			});
+			this.setStoredChains(filteredChains);
+			this.context.document.showMessage("Selected chains were removed.");
+		}
+	}, {
+		key: "updateAllChains",
+		value: function updateAllChains() {
+			var chains = this.getStoredChains();
+
+			if (chains.length > 0) {
+				this.runChains(chains, function (chain, success) {
+					if (!success) {
+						removeItemFromArray(chains, chain);
+						log('Removing...');
+					}
+				});
+				this.setStoredChains(chains);
+				this.context.document.showMessage("Chains updated!");
+			} else {
+				Dialog.newInformationDialog("Oops!", "There are no chained layers in this document.");
+			};
+		}
+	}, {
+		key: "runChains",
+		value: function runChains(chains, callback) {
+			var _this2 = this;
+
+			var sorted = chains.sort(function (a, b) {
+				return a - b;
+			}); //Sort the chains by the time they were created. 
+			sorted.forEach(function (chain) {
+				var success = Chain.run(chain, _this2.context); // Perform the chained changes in the chained layer's target.  
+				callback(chain, success);
+			});
+		}
+	}, {
+		key: "findChainWithMatchingTarget",
+		value: function findChainWithMatchingTarget(chains, chain) {
+			var matching = chains.find(function (c) {
+				if (c.chainedLayer == chain.chainedLayer && c.type == chain.type && c.target == chain.target) {
+					return true;
+				} else {
+					return false;
+				};
+			});
+			return matching;
+		}
+	}, {
+		key: "logChains",
+		value: function logChains() {
+			log(this.getStoredChains());
+		}
+
+		//Storing and retrieving chains from layers. 
+
+	}, {
+		key: "getStoredChains",
+		value: function getStoredChains() {
+			var value = this.command.valueForKey_onLayer_forPluginIdentifier(this.LAYER_CHAINS_KEY, this.docData, this.pluginID);
+			return value ? transformToJavascriptArray(value) : [];
+		}
+	}, {
+		key: "setStoredChains",
+		value: function setStoredChains(chains) {
+			return this.command.setValue_forKey_onLayer_forPluginIdentifier(chains, this.LAYER_CHAINS_KEY, this.docData, this.pluginID);
+		}
+	}]);
+
+	return ChainManager;
+}();
+
+//Ale y Cass