Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

zoom buttons

  • Loading branch information...
commit 3f7a1747bac7b23a142896d3b04ac99a19bace6b 1 parent fd7baf7
@G3z authored
View
5 README.mdown
@@ -1,8 +1,9 @@
###What?
-PixelMixer is meant to be an online editing tool for pixel artists that want to create something on the fly in the web browser to share talent with other artists. all without leaving the web page
+PixelMixer is meant to be an online editing tool for pixel artists that want to create something on the fly in the web browser to share talent with other artists.
+All without leaving the web page
###How?
-PixelMixer is written in [CoffeeScript](http://jashkenas.github.com/coffee-script/) and [Less](http://lesscss.org/)
+PixelMixer is written in [CoffeeScript](http://jashkenas.github.com/coffee-script/) and [Less](http://lesscss.org/)
At this time PixelMixer makes great use of [jQuery](http://jquery.com/) and uses [Codekit](incident57.com/codekit/) as building tool (i'll change that once i find something as efficient)
###Why?
View
213 build/PixelMixer.css
@@ -39,3 +39,216 @@
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
+.PMButton {
+ display: inline-block;
+ outline: none;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ font: 18px/100% Arial, Helvetica, sans-serif;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+ -webkit-border-radius: .5em;
+ -moz-border-radius: .5em;
+ border-radius: .5em;
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.PMButton:hover {
+ text-decoration: none;
+}
+.PMButton:active {
+ position: relative;
+ top: 1px;
+}
+/* color styles
+---------------------------------------------- */
+/* black */
+.black {
+ color: #d7d7d7;
+ border: solid 1px #333;
+ background: #333;
+ background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#000000));
+ background: -moz-linear-gradient(top, #666666, #000000);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
+}
+.black:hover {
+ background: #000;
+ background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#000000));
+ background: -moz-linear-gradient(top, #444444, #000000);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
+}
+.black:active {
+ color: #666;
+ background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#444444));
+ background: -moz-linear-gradient(top, #000000, #444444);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
+}
+/* gray */
+.gray {
+ color: #e9e9e9;
+ border: solid 1px #555;
+ background: #6e6e6e;
+ background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#575757));
+ background: -moz-linear-gradient(top, #888888, #575757);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
+}
+.gray:hover {
+ background: #616161;
+ background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
+ background: -moz-linear-gradient(top, #757575, #4b4b4b);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
+}
+.gray:active {
+ color: #afafaf;
+ background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888888));
+ background: -moz-linear-gradient(top, #575757, #888888);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
+}
+/* white */
+.white {
+ color: #606060;
+ border: solid 1px #b7b7b7;
+ background: #fff;
+ background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ededed));
+ background: -moz-linear-gradient(top, #ffffff, #ededed);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
+}
+.white:hover {
+ background: #ededed;
+ background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dcdcdc));
+ background: -moz-linear-gradient(top, #ffffff, #dcdcdc);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
+}
+.white:active {
+ color: #999;
+ background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ffffff));
+ background: -moz-linear-gradient(top, #ededed, #ffffff);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
+}
+/* orange */
+.orange {
+ color: #fef4e9;
+ border: solid 1px #da7c0c;
+ background: #f78d1d;
+ background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
+ background: -moz-linear-gradient(top, #faa51a, #f47a20);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
+}
+.orange:hover {
+ background: #f47c20;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
+ background: -moz-linear-gradient(top, #f88e11, #f06015);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
+}
+.orange:active {
+ color: #fcd3a5;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
+ background: -moz-linear-gradient(top, #f47a20, #faa51a);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
+}
+/* red */
+.red {
+ color: #faddde;
+ border: solid 1px #980c10;
+ background: #d81b21;
+ background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
+ background: -moz-linear-gradient(top, #ed1c24, #aa1317);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
+}
+.red:hover {
+ background: #b61318;
+ background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
+ background: -moz-linear-gradient(top, #c9151b, #a11115);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
+}
+.red:active {
+ color: #de898c;
+ background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
+ background: -moz-linear-gradient(top, #aa1317, #ed1c24);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
+}
+/* blue */
+.blue {
+ color: #d9eef7;
+ border: solid 1px #0076a3;
+ background: #0095cd;
+ background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
+ background: -moz-linear-gradient(top, #00adee, #0078a5);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
+}
+.blue:hover {
+ background: #007ead;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
+ background: -moz-linear-gradient(top, #0095cc, #00678e);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
+}
+.blue:active {
+ color: #80bed6;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
+ background: -moz-linear-gradient(top, #0078a5, #00adee);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
+}
+/* rosy */
+.rosy {
+ color: #fae7e9;
+ border: solid 1px #b73948;
+ background: #da5867;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
+ background: -moz-linear-gradient(top, #f16c7c, #bf404f);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
+}
+.rosy:hover {
+ background: #ba4b58;
+ background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
+ background: -moz-linear-gradient(top, #cf5d6a, #a53845);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
+}
+.rosy:active {
+ color: #dca4ab;
+ background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
+ background: -moz-linear-gradient(top, #bf404f, #f16c7c);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
+}
+/* green */
+.green {
+ color: #e8f0de;
+ border: solid 1px #538312;
+ background: #64991e;
+ background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
+ background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
+}
+.green:hover {
+ background: #538018;
+ background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
+ background: -moz-linear-gradient(top, #6b9d28, #436b0c);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
+}
+.green:active {
+ color: #a9c08c;
+ background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
+ background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
+}
+/* pink */
+.pink {
+ color: #feeef5;
+ border: solid 1px #d2729e;
+ background: #f895c2;
+ background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
+ background: -moz-linear-gradient(top, #feb1d3, #f171ab);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
+}
+.pink:hover {
+ background: #d57ea5;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
+ background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
+}
+.pink:active {
+ color: #f3c3d9;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
+ background: -moz-linear-gradient(top, #f171ab, #feb1d3);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
+}
View
143 build/PixelMixer.js
@@ -3,7 +3,7 @@
Editable Image with Overlay
*/
-var PMButton, PMCanvas, PMEditableImage, PMLayers, PMPixel, PMTool, PMToolBar, PMWindow, PixelMixer, ZoomIn,
+var PMButton, PMCanvas, PMEditableImage, PMLayers, PMPixel, PMTool, PMToolBar, PMWindow, PixelMixer, ZoomIn, ZoomOut,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__hasProp = Object.prototype.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
@@ -101,19 +101,20 @@ PMCanvas = (function() {
this.loader = this.pixMix.loader;
}
- PMCanvas.prototype.load = function(img, loader) {
+ PMCanvas.prototype.load = function(img) {
this.img = img;
- this.loader = loader;
- this.left = (this.width - this.img.width * this.zoom) / 2;
- this.top = (this.height - this.img.height * this.zoom) / 2;
- if (this.left < 0) this.left = 0;
- if (this.top < 0) this.top = 0;
- this.ctx.fillStyle = "#fff";
- this.ctx.fillRect(0, 0, this.width, this.height);
- if (this.img.extension === "gif") {
- return this.loadAnimation(this.img);
- } else {
- return this.loadStill(this.img);
+ if (this.img != null) {
+ this.left = (this.width - this.img.width * this.zoom) / 2;
+ this.top = (this.height - this.img.height * this.zoom) / 2;
+ if (this.left < 0) this.left = 0;
+ if (this.top < 0) this.top = 0;
+ this.ctx.fillStyle = "#fff";
+ this.ctx.fillRect(0, 0, this.width, this.height);
+ if (this.img.extension === "gif") {
+ return this.loadAnimation(this.img);
+ } else {
+ return this.loadStill(this.img);
+ }
}
};
@@ -121,6 +122,8 @@ PMCanvas = (function() {
if (pixel != null) {
this.ctx.fillStyle = pixel.hexColor();
return this.ctx.fillRect(this.left + pixel.x * this.zoom, this.top + pixel.y * this.zoom, 1 * this.zoom, 1 * this.zoom);
+ } else {
+ return this.load(this.img);
}
};
@@ -251,7 +254,10 @@ PMLayers = (function() {
function PMLayers(container, pixMix) {
this.container = container;
this.pixMix = pixMix;
+ this.zoomOut = __bind(this.zoomOut, this);
+ this.zoomIn = __bind(this.zoomIn, this);
this.update = __bind(this.update, this);
+ this.selfUpdate = __bind(this.selfUpdate, this);
this.add = __bind(this.add, this);
this.length = 0;
this.tools = new PMCanvas(this.container, 3, this.pixMix);
@@ -262,10 +268,10 @@ PMLayers = (function() {
layer = new PMCanvas(this.container, this.length, this.pixMix);
this.active = layer;
this["l" + this.length] = layer;
- return this.update();
+ return this.selfUpdate();
};
- PMLayers.prototype.update = function() {
+ PMLayers.prototype.selfUpdate = function() {
var i, prop;
i = 0;
for (prop in this) {
@@ -274,6 +280,32 @@ PMLayers = (function() {
return this.length = i;
};
+ PMLayers.prototype.update = function() {
+ var i, obj, prop;
+ i = 0;
+ for (prop in this) {
+ if (prop.slice(0, 1) === "l" && prop.length < 4) {
+ obj = this[prop];
+ obj.zoom = this.pixMix.zoom;
+ obj.update();
+ i++;
+ }
+ }
+ return this.length = i;
+ };
+
+ PMLayers.prototype.zoomIn = function() {
+ this.pixMix.zoom++;
+ return this.update();
+ };
+
+ PMLayers.prototype.zoomOut = function() {
+ if (this.pixMix.zoom > 1) {
+ this.pixMix.zoom--;
+ return this.update();
+ }
+ };
+
return PMLayers;
})();
@@ -290,13 +322,14 @@ PMToolBar = (function() {
this.setActiveTool = __bind(this.setActiveTool, this);
this.add = __bind(this.add, this);
this.container = this.pixMix.container;
- this.domElm = $("<div id=\"PMToolBar\" style=\"width:40px;height:" + (this.container.attr('height')) + "px;\"></div>");
+ this.domElm = $("<div id=\"PMToolBar\" style=\"width:70px;height:" + (this.container.attr('height')) + "px;\"></div>");
this.container.append(this.domElm);
this.activeTool = null;
}
- PMToolBar.prototype.add = function(button) {
- var elm;
+ PMToolBar.prototype.add = function(tool) {
+ var button, elm;
+ button = tool.button;
elm = button.domElm;
return this.domElm.append(elm);
};
@@ -327,7 +360,7 @@ PMTool = (function() {
}
this.rightClick = __bind(this.rightClick, this);
this.leftClick = __bind(this.leftClick, this);
- this.button = new PMButton(38, 38, icon, target, arg);
+ this.button = new PMButton(32, 32, icon, target, arg);
}
PMTool.prototype.leftClick = function() {};
@@ -349,27 +382,31 @@ PMTool = (function() {
PMButton = (function() {
- function PMButton() {
- this.trigger = __bind(this.trigger, this);
- }
-
- PMButton.prototype.construcotr = function(width, height, icon, target, action) {
+ function PMButton(width, height, icon, target, action) {
+ var _this = this;
this.width = width;
this.height = height;
this.icon = icon;
this.target = target;
this.action = action;
- this.domElement = $("<div/>");
+ this.trigger = __bind(this.trigger, this);
+ this.domElm = $("<div/>").addClass("PMButton").addClass("blue");
if ((this.width != null) && !(this.height != null)) {
- return this.domElement = $("<div/>").attr("style", "width:" + this.width + "px;");
+ this.domElm.attr("style", "width:" + this.width + "px;");
} else if (!(this.width != null) && (this.height != null)) {
- return this.domElement = $("<div/>").attr("style", "height:" + this.height + "px;");
+ this.domElm.attr("style", "height:" + this.height + "px;");
} else if ((this.width != null) && (this.height != null)) {
- return this.domElement = $("<div/>").attr("style", "width:" + this.width + "px;height:" + this.height + "px;");
+ this.domElm.attr("style", "width:" + this.width + "px;height:" + this.height + "px;");
} else {
- return this.domElement = $("<div/>").attr("style", "width:20px;height:20px;");
+ this.domElm.attr("style", "width:20px;height:20px;");
}
- };
+ if (this.icon != null) {
+ if (this.icon.slice(-3, -4) !== ".") this.domElm.html(this.icon);
+ }
+ this.domElm.click(function() {
+ return _this.trigger();
+ });
+ }
PMButton.prototype.trigger = function() {
var args, method;
@@ -383,8 +420,12 @@ PMButton = (function() {
}
}
}
- if ((this.target != null) && (method != null) && (args != null)) {
- return this.target.apply(method, args);
+ if ((this.target != null) && (method != null)) {
+ if (args != null) {
+ return this.target[method](args);
+ } else {
+ return this.target[method]();
+ }
}
};
@@ -404,10 +445,9 @@ ZoomIn = (function() {
function ZoomIn(pixMix) {
var args;
args = {
- action: "add",
- args: 1
+ action: "zoomIn"
};
- ZoomIn.__super__.constructor.call(this, "", pixMix.zoom, args);
+ ZoomIn.__super__.constructor.call(this, "+", pixMix.layers, args);
}
return ZoomIn;
@@ -415,6 +455,27 @@ ZoomIn = (function() {
})();
/* --------------------------------------------
+ Begin ZoomOut.coffee
+--------------------------------------------
+*/
+
+ZoomOut = (function() {
+
+ __extends(ZoomOut, PMTool);
+
+ function ZoomOut(pixMix) {
+ var args;
+ args = {
+ action: "zoomOut"
+ };
+ ZoomOut.__super__.constructor.call(this, "-", pixMix.layers, args);
+ }
+
+ return ZoomOut;
+
+})();
+
+/* --------------------------------------------
Begin PixelMixer.coffee
--------------------------------------------
*/
@@ -459,6 +520,7 @@ PixelMixer = (function() {
this.mouseUp = __bind(this.mouseUp, this);
this.mouseDown = __bind(this.mouseDown, this);
this.mouseOver = __bind(this.mouseOver, this);
+ this.loadTools = __bind(this.loadTools, this);
var scope,
_this = this;
this.isMouseDown = false;
@@ -501,14 +563,13 @@ PixelMixer = (function() {
} else {
this.prepareImgs(this.scope);
}
- this.toolBar = new PMToolBar(this);
- this.toolBar.add(new ZoomIn(this));
this.loaderElm = document.createElement("canvas");
this.loaderElm.setAttribute("width", "1000");
this.loaderElm.setAttribute("height", "1000");
this.loader = this.loaderElm.getContext("2d");
this.layers = new PMLayers(this.container, this);
this.layers.add();
+ this.loadTools();
this.container.bind("mousemove", function(event) {
return _this.mouseOver(event);
});
@@ -520,6 +581,12 @@ PixelMixer = (function() {
});
}
+ PixelMixer.prototype.loadTools = function() {
+ this.toolBar = new PMToolBar(this);
+ this.toolBar.add(new ZoomIn(this));
+ return this.toolBar.add(new ZoomOut(this));
+ };
+
PixelMixer.prototype.mouseOver = function(evt) {
var pixel;
this.container[0].style.cursor = 'crosshair';
@@ -556,7 +623,7 @@ PixelMixer = (function() {
};
PixelMixer.prototype.loadImg = function(img) {
- return this.layers.l0.load(img, this.loader);
+ return this.layers.l0.load(img);
};
PixelMixer.prototype.prepareImgs = function(scope) {
View
225 less/PixelMixer.less
@@ -43,6 +43,7 @@
border-radius: 15px;
color:#cccccc;
}
+
#PMToolBar{
position:absolute;
top:0;
@@ -53,4 +54,228 @@
color:#cccccc;
z-index:4;
.box-shadow(0,0,5px,0.4)
+}
+.PMButton {
+ display: inline-block;
+ outline: none;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ font: 18px/100% Arial, Helvetica, sans-serif;
+ //padding: .5em 2em .55em;
+ text-shadow: 0 1px 1px rgba(0,0,0,.3);
+ -webkit-border-radius: .5em;
+ -moz-border-radius: .5em;
+ border-radius: .5em;
+ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
+ -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
+ box-shadow: 0 1px 2px rgba(0,0,0,.2);
+}
+.PMButton:hover {
+ text-decoration: none;
+}
+.PMButton:active {
+ position: relative;
+ top: 1px;
+}
+
+/* color styles
+---------------------------------------------- */
+
+/* black */
+.black {
+ color: #d7d7d7;
+ border: solid 1px #333;
+ background: #333;
+ background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
+ background: -moz-linear-gradient(top, #666, #000);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000')";
+}
+.black:hover {
+ background: #000;
+ background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
+ background: -moz-linear-gradient(top, #444, #000);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000')";
+}
+.black:active {
+ color: #666;
+ background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
+ background: -moz-linear-gradient(top, #000, #444);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666')";
+}
+
+/* gray */
+.gray {
+ color: #e9e9e9;
+ border: solid 1px #555;
+ background: #6e6e6e;
+ background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
+ background: -moz-linear-gradient(top, #888, #575757);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757')";
+}
+.gray:hover {
+ background: #616161;
+ background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
+ background: -moz-linear-gradient(top, #757575, #4b4b4b);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b')";
+}
+.gray:active {
+ color: #afafaf;
+ background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
+ background: -moz-linear-gradient(top, #575757, #888);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888')";
+}
+
+/* white */
+.white {
+ color: #606060;
+ border: solid 1px #b7b7b7;
+ background: #fff;
+ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
+ background: -moz-linear-gradient(top, #fff, #ededed);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')";
+}
+.white:hover {
+ background: #ededed;
+ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
+ background: -moz-linear-gradient(top, #fff, #dcdcdc);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc')";
+}
+.white:active {
+ color: #999;
+ background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
+ background: -moz-linear-gradient(top, #ededed, #fff);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff')";
+}
+
+/* orange */
+.orange {
+ color: #fef4e9;
+ border: solid 1px #da7c0c;
+ background: #f78d1d;
+ background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
+ background: -moz-linear-gradient(top, #faa51a, #f47a20);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20')";
+}
+.orange:hover {
+ background: #f47c20;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
+ background: -moz-linear-gradient(top, #f88e11, #f06015);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015')";
+}
+.orange:active {
+ color: #fcd3a5;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
+ background: -moz-linear-gradient(top, #f47a20, #faa51a);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a')";
+}
+
+/* red */
+.red {
+ color: #faddde;
+ border: solid 1px #980c10;
+ background: #d81b21;
+ background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
+ background: -moz-linear-gradient(top, #ed1c24, #aa1317);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317')";
+}
+.red:hover {
+ background: #b61318;
+ background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
+ background: -moz-linear-gradient(top, #c9151b, #a11115);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115')";
+}
+.red:active {
+ color: #de898c;
+ background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
+ background: -moz-linear-gradient(top, #aa1317, #ed1c24);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24')";
+}
+
+/* blue */
+.blue {
+ color: #d9eef7;
+ border: solid 1px #0076a3;
+ background: #0095cd;
+ background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
+ background: -moz-linear-gradient(top, #00adee, #0078a5);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5')";
+}
+.blue:hover {
+ background: #007ead;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
+ background: -moz-linear-gradient(top, #0095cc, #00678e);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e')";
+}
+.blue:active {
+ color: #80bed6;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
+ background: -moz-linear-gradient(top, #0078a5, #00adee);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee')";
+}
+
+/* rosy */
+.rosy {
+ color: #fae7e9;
+ border: solid 1px #b73948;
+ background: #da5867;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
+ background: -moz-linear-gradient(top, #f16c7c, #bf404f);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f')";
+}
+.rosy:hover {
+ background: #ba4b58;
+ background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
+ background: -moz-linear-gradient(top, #cf5d6a, #a53845);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845')";
+}
+.rosy:active {
+ color: #dca4ab;
+ background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
+ background: -moz-linear-gradient(top, #bf404f, #f16c7c);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c')";
+}
+
+/* green */
+.green {
+ color: #e8f0de;
+ border: solid 1px #538312;
+ background: #64991e;
+ background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
+ background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e')";
+}
+.green:hover {
+ background: #538018;
+ background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
+ background: -moz-linear-gradient(top, #6b9d28, #436b0c);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c')";
+}
+.green:active {
+ color: #a9c08c;
+ background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
+ background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f')";
+}
+
+/* pink */
+.pink {
+ color: #feeef5;
+ border: solid 1px #d2729e;
+ background: #f895c2;
+ background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
+ background: -moz-linear-gradient(top, #feb1d3, #f171ab);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab')";
+}
+.pink:hover {
+ background: #d57ea5;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
+ background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4')";
+}
+.pink:active {
+ color: #f3c3d9;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
+ background: -moz-linear-gradient(top, #f171ab, #feb1d3);
+ filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3')";
}
View
27 src/PMCanvas.coffee
@@ -22,23 +22,26 @@ class PMCanvas
@loader = @pixMix.loader
#@canvas.css('cursor','crosshair')
- load:(@img,@loader)=>
- @left = (@width - @img.width*@zoom) /2
- @top = (@height - @img.height*@zoom) /2
- @left = 0 if @left < 0
- @top = 0 if @top <0
- @ctx.fillStyle = "#fff"
- @ctx.fillRect(0,0,@width,@height)
- if @img.extension == "gif"
- @loadAnimation(@img)
- else
- @loadStill(@img)
+ load:(@img)=>
+ if @img?
+ @left = (@width - @img.width*@zoom) /2
+ @top = (@height - @img.height*@zoom) /2
+ @left = 0 if @left < 0
+ @top = 0 if @top <0
+ @ctx.fillStyle = "#fff"
+ @ctx.fillRect(0,0,@width,@height)
+ if @img.extension == "gif"
+ @loadAnimation(@img)
+ else
+ @loadStill(@img)
update:(pixel)=>
#@pixels =[]
if pixel?
@ctx.fillStyle = pixel.hexColor()
- @ctx.fillRect(@left+pixel.x*@zoom,@top+pixel.y*@zoom, 1*@zoom, 1*@zoom)
+ @ctx.fillRect(@left+pixel.x*@zoom,@top+pixel.y*@zoom, 1*@zoom, 1*@zoom)
+ else
+ @load(@img)
loadStill:(@img)=>
@loader.drawImage(@img.img,0,0)
View
25 src/PMLayers.coffee
@@ -3,15 +3,34 @@ class PMLayers
@length = 0
@tools = new PMCanvas(@container,3,@pixMix)
- add:()=>
+ add:=>
layer = new PMCanvas(@container,@length,@pixMix)
@active = layer
@["l"+@length] = layer
- @update()
+ @selfUpdate()
+
+ selfUpdate:=>
+ i = 0
+ for prop of this
+ if prop[0...1] == "l" and prop.length < 4
+ i++
+ @length = i
update:=>
i = 0
for prop of this
if prop[0...1] == "l" and prop.length < 4
+ obj = this[prop]
+ obj.zoom = @pixMix.zoom
+ obj.update()
i++
- @length = i
+ @length = i
+
+ zoomIn:=>
+ @pixMix.zoom++
+ @update()
+
+ zoomOut:=>
+ if @pixMix.zoom > 1
+ @pixMix.zoom--
+ @update()
View
5 src/PMToolBar.coffee
@@ -1,11 +1,12 @@
class PMToolBar
constructor:(@pixMix)->
@container = @pixMix.container
- @domElm = $("<div id=\"PMToolBar\" style=\"width:40px;height:#{@container.attr('height')}px;\"></div>")
+ @domElm = $("<div id=\"PMToolBar\" style=\"width:70px;height:#{@container.attr('height')}px;\"></div>")
@container.append(@domElm)
@activeTool = null
- add:(button)=>
+ add:(tool)=>
+ button = tool.button
elm = button.domElm
@domElm.append(elm)
View
15 src/PixelMixer.coffee
@@ -11,9 +11,11 @@
#@codekit-prepend PMWindow.coffee
#@codekit-prepend PMToolBar.coffee
#@codekit-prepend buttons/PMButton.coffee
+
## Standard Tools
#@codekit-prepend tools/PMTool.coffee
#@codekit-prepend tools/ZoomIn.coffee
+#@codekit-prepend tools/ZoomOut.coffee
class PixelMixer
###
@@ -70,9 +72,6 @@ class PixelMixer
else
@prepareImgs(@scope)
- @toolBar = new PMToolBar(this)
- @toolBar.add(new ZoomIn(this))
-
@loaderElm = document.createElement("canvas")
@loaderElm.setAttribute("width","1000")
@loaderElm.setAttribute("height","1000")
@@ -81,6 +80,8 @@ class PixelMixer
@layers = new PMLayers(@container,this)
@layers.add()
+ @loadTools()
+
@container.bind("mousemove",
(event)=>
@mouseOver(event)
@@ -94,6 +95,11 @@ class PixelMixer
@mouseUp(event)
)
+ loadTools:()=>
+ @toolBar = new PMToolBar(this)
+ @toolBar.add(new ZoomIn(this))
+ @toolBar.add(new ZoomOut(this))
+
mouseOver:(evt)=>
@container[0].style.cursor='crosshair'
if @isMouseDown
@@ -120,8 +126,7 @@ class PixelMixer
}
loadImg:(img)=>
-
- @layers.l0.load(img,@loader)
+ @layers.l0.load(img)
prepareImgs:(scope)=>
scope.each(
View
27 src/buttons/PMButton.coffee
@@ -2,19 +2,21 @@
Basic Button Class
###
class PMButton
- construcotr:(@width,@height,@icon,@target,@action)->
- @domElement = $("<div/>")
+ constructor:(@width,@height,@icon,@target,@action)->
+ @domElm = $("<div/>").addClass("PMButton").addClass("blue")
if @width? and not @height?
- @domElement = $("<div/>").attr("style","width:#{@width}px;")
+ @domElm.attr("style","width:#{@width}px;")
else if not @width? and @height?
- @domElement = $("<div/>").attr("style","height:#{@height}px;")
+ @domElm.attr("style","height:#{@height}px;")
else if @width? and @height?
- @domElement = $("<div/>").attr("style","width:#{@width}px;height:#{@height}px;")
+ @domElm.attr("style","width:#{@width}px;height:#{@height}px;")
else
- @domElement = $("<div/>").attr("style","width:20px;height:20px;")
-
-
-
+ @domElm.attr("style","width:20px;height:20px;")
+ if @icon?
+ if @icon[-3...-4] != "."
+ @domElm.html(@icon)
+ @domElm.click(()=>@trigger())
+
trigger:()=>
if @action? and @target?
if @action.action?
@@ -24,5 +26,8 @@ class PMButton
args = @action.args
else
args = [@action.args]
- if @target? and method? and args?
- @target.apply(method,args)
+ if @target? and method?
+ if args?
+ @target[method](args)
+ else
+ @target[method]()
View
2  src/tools/PMTool.coffee
@@ -1,7 +1,7 @@
class PMTool
@options = {}
constructor:(icon,target,arg={action:"setActive",args:this})->
- @button = new PMButton(38,38,icon,target,arg)
+ @button = new PMButton(32,32,icon,target,arg)
leftClick:()=>
View
5 src/tools/ZoomIn.coffee
@@ -1,7 +1,6 @@
class ZoomIn extends PMTool
constructor:(pixMix)->
args = {
- action:"add"
- args:1
+ action:"zoomIn"
}
- super("",pixMix.zoom,args)
+ super("+",pixMix.layers,args)
View
6 src/tools/ZoomOut.coffee
@@ -0,0 +1,6 @@
+class ZoomOut extends PMTool
+ constructor:(pixMix)->
+ args = {
+ action:"zoomOut"
+ }
+ super("-",pixMix.layers,args)

0 comments on commit 3f7a174

Please sign in to comment.
Something went wrong with that request. Please try again.