diff --git a/src/js/tools/drawing/Lighten.js b/src/js/tools/drawing/Lighten.js index 24040bcb..f2820b16 100644 --- a/src/js/tools/drawing/Lighten.js +++ b/src/js/tools/drawing/Lighten.js @@ -19,26 +19,10 @@ {key : 'ctrl', description : 'Darken'}, {key : 'shift', description : 'Apply only once per pixel'} ]; - - this.usedPixels_ = { - darken : {}, - lighten : {} - }; }; pskl.utils.inherit(ns.Lighten, ns.SimplePen); - /** - * @Override - */ - ns.Lighten.prototype.resetUsedPixels_ = function() { - this.usedPixels_ = { - darken : {}, - lighten : {} - }; - this.superclass.resetUsedPixels_.call(this); - }; - /** * @Override */ @@ -54,29 +38,32 @@ }; ns.Lighten.prototype.getModifiedColor_ = function(col, row, frame, overlay, event) { + // get colors in overlay and in frame var overlayColor = overlay.getPixel(col, row); var frameColor = frame.getPixel(col, row); - var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor; - var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; - var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR; - var isSinglePass = event.shiftKey; - var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten; - var key = col + '-' + row; - var doNotModify = isTransparent || (isSinglePass && usedPixels[key]); + var isPixelModified = overlayColor !== Constants.TRANSPARENT_COLOR; + var pixelColor = isPixelModified ? overlayColor : frameColor; + + var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR; + if (isTransparent) { + return Constants.TRANSPARENT_COLOR; + } + + var oncePerPixel = event.shiftKey; + if (oncePerPixel && isPixelModified) { + return pixelColor; + } + + var step = oncePerPixel ? DEFAULT_STEP * 2 : DEFAULT_STEP; + var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey; var color; - if (doNotModify) { - color = window.tinycolor(pixelColor); + if (isDarken) { + color = window.tinycolor.darken(pixelColor, step); } else { - var step = isSinglePass ? DEFAULT_STEP * 2 : DEFAULT_STEP; - if (isDarken) { - color = window.tinycolor.darken(pixelColor, step); - } else { - color = window.tinycolor.lighten(pixelColor, step); - } + color = window.tinycolor.lighten(pixelColor, step); } - usedPixels[key] = true; // Convert tinycolor color to string format. return color.toHexString(); diff --git a/test/drawing/tests/lighten.darken.json b/test/drawing/tests/lighten.darken.json index 80d16984..2e065606 100644 --- a/test/drawing/tests/lighten.darken.json +++ b/test/drawing/tests/lighten.darken.json @@ -11,8 +11,8 @@ "ctrlKey": false }, "coords": { - "x": 0, - "y": 1 + "x": 2, + "y": 2 }, "type": "mouse-event" }, { @@ -24,8 +24,8 @@ "ctrlKey": false }, "coords": { - "x": 0, - "y": 1 + "x": 2, + "y": 2 }, "type": "mouse-event" }, { @@ -122,98 +122,10 @@ "y": 0 }, "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 1 - }, - "type": "mouse-event" - }, { + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -304,7 +216,10 @@ "y": 0 }, "type": "mouse-event" - }, { + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -314,513 +229,6 @@ }, "coords": { "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 4, - "y": 0 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 0 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 0 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, "y": 0 }, "type": "mouse-event" @@ -837,58 +245,6 @@ "y": 0 }, "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 0, - "y": 4 - }, - "type": "mouse-event" }, { "event": { "type": "mousemove", @@ -899,7 +255,7 @@ }, "coords": { "x": 1, - "y": 4 + "y": 0 }, "type": "mouse-event" }, { @@ -912,7 +268,7 @@ }, "coords": { "x": 2, - "y": 4 + "y": 0 }, "type": "mouse-event" }, { @@ -925,7 +281,7 @@ }, "coords": { "x": 3, - "y": 4 + "y": 0 }, "type": "mouse-event" }, { @@ -938,7 +294,7 @@ }, "coords": { "x": 4, - "y": 4 + "y": 0 }, "type": "mouse-event" }, { @@ -951,400 +307,13 @@ }, "coords": { "x": 4, - "y": 4 + "y": 0 }, "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 1, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 3, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousemove", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 4 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": false - }, - "coords": { - "x": 2, - "y": 3 - }, - "type": "mouse-event" - }, { + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -1353,104 +322,26 @@ "ctrlKey": true }, "coords": { - "x": 0, - "y": 3 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { "event": { - "type": "mouseup", + "type": "mousemove", "button": 0, "shiftKey": true, "altKey": false, "ctrlKey": true }, "coords": { - "x": 0, - "y": 3 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 4, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 4, - "y": 3 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 3, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 1, - "y": 2 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mousedown", + "type": "mousemove", "button": 0, "shiftKey": true, "altKey": false, @@ -1461,6 +352,19 @@ "y": 0 }, "type": "mouse-event" + }, { + "event": { + "type": "mousemove", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": true + }, + "coords": { + "x": 0, + "y": 0 + }, + "type": "mouse-event" }, { "event": { "type": "mouseup", @@ -1469,12 +373,189 @@ "altKey": false, "ctrlKey": true }, + "coords": { + "x": 0, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 0, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 0, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, "coords": { "x": 1, "y": 0 }, "type": "mouse-event" }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 1, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 1, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 1, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": false + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -1483,7 +564,7 @@ "ctrlKey": true }, "coords": { - "x": 3, + "x": 2, "y": 0 }, "type": "mouse-event" @@ -1496,11 +577,43 @@ "ctrlKey": true }, "coords": { - "x": 3, + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { + "event": { + "type": "mousedown", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": true + }, + "coords": { + "x": 2, "y": 0 }, "type": "mouse-event" }, { + "event": { + "type": "mouseup", + "button": 0, + "shiftKey": true, + "altKey": false, + "ctrlKey": true + }, + "coords": { + "x": 2, + "y": 0 + }, + "type": "mouse-event" + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -1509,8 +622,8 @@ "ctrlKey": true }, "coords": { - "x": 0, - "y": 2 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { @@ -1522,11 +635,14 @@ "ctrlKey": true }, "coords": { - "x": 0, - "y": 2 + "x": 2, + "y": 0 }, "type": "mouse-event" - }, { + }, + {"type":"tool-event","toolId":"tool-colorpicker"}, + {"type":"tool-event","toolId":"tool-lighten"}, + { "event": { "type": "mousedown", "button": 0, @@ -1535,8 +651,8 @@ "ctrlKey": true }, "coords": { - "x": 4, - "y": 2 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { @@ -1548,36 +664,21 @@ "ctrlKey": true }, "coords": { - "x": 4, - "y": 2 + "x": 2, + "y": 0 }, "type": "mouse-event" }, { + "type": "keyboard-event", "event": { - "type": "mousedown", - "button": 0, - "shiftKey": true, + "which": 90, + "shiftKey": false, "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" - }, { - "event": { - "type": "mouseup", - "button": 0, - "shiftKey": true, - "altKey": false, - "ctrlKey": true - }, - "coords": { - "x": 0, - "y": 1 - }, - "type": "mouse-event" + "ctrlKey": true, + "target": { + "nodeName": "BODY" + } + } }], "initialState": { "size": { @@ -1586,8 +687,7 @@ }, "primaryColor": "#000000", "secondaryColor": "rgba(0, 0, 0, 0)", - "selectedTool": "tool-move", - "step" : 100 + "selectedTool": "tool-pen" }, - "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAARklEQVQIW2PU1dX9//HjRwZ+fn4GGM0I5PxnQAIgSUYbGxtMlUBF/4FGMHh7ezNs3bqV4fLlywxg7SAtcnJyDI8ePQKbCwDi5B7DVPJoXAAAAABJRU5ErkJggg==" + "png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2PU1dX9z8/Pz/Do0SMGEA0CjAwMDP/BLCRAoSAAeuwIiFt0t6sAAAAASUVORK5CYII=" }