Paint Editor: Pipette tool

and code formatting adjustments for JSLint

history.txt

@@ -1805,3 +1805,8 @@ ______
 * Blocks: fixed occasional flickering in scripting areas (caused by deleted feedback morphs, a bug that surfaced in Chrome 28 on OSX and may be due to a possible Chrome GC issue)
 * Blocks: preserve nested blocks in the scripting area when replacing a variadic input list with another input ("kick out" the nested blocks instead of "swallowing" them)
 * Blocks, Threads: new floor() function in monadic math reporter's drop-down
+
+130712
+------
+* Blocks: Pipette symbol
+* Paint: Pipette tool

paint.js

@@ -46,8 +46,9 @@
     revision history
     ----------------
     May 10 - first full release (Kartik)
-    May 14 - bugfixes (bugfixes, Snap integration (Jens)
+    May 14 - bugfixes, Snap integration (Jens)
     May 16 - flat design adjustments (Jens)
+    July 12 - pipette tool, code formatting adjustments (Jens)
 
  */
 
@@ -56,12 +57,12 @@
  CostumeIconMorph, IDE_Morph, Costume, SpriteMorph, nop, Image, WardrobeMorph,
  TurtleIconMorph, localize, MenuMorph, InputFieldMorph, SliderMorph,
  ToggleMorph, ToggleButtonMorph, BoxMorph, modules, radians,
- MorphicPreferences
+ MorphicPreferences, getDocumentPositionOf
  */
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.paint = '2013-May-16';
+modules.paint = '2013-July-12';
 
 // Declarations
 
@@ -83,7 +84,7 @@ function PaintEditorMorph() {
     this.init();
 }
 
-PaintEditorMorph.prototype.init = function() {
+PaintEditorMorph.prototype.init = function () {
     // additional properties:
     this.paper = null; // paint canvas
     this.oncancel = null;
@@ -102,7 +103,7 @@ PaintEditorMorph.prototype.init = function() {
 PaintEditorMorph.prototype.buildContents = function () {
     var myself = this;
 
-    this.paper = new PaintCanvasMorph(function() {return myself.shift; });
+    this.paper = new PaintCanvasMorph(function () {return myself.shift; });
     this.paper.setExtent(new Point(480, 360));
 
     this.addBody(new AlignmentMorph('row', this.padding));
@@ -146,7 +147,7 @@ PaintEditorMorph.prototype.buildContents = function () {
     this.drawNew();
 };
 
-PaintEditorMorph.prototype.buildToolbox = function() {
+PaintEditorMorph.prototype.buildToolbox = function () {
     var tools = {
             brush:
                 "Paintbrush tool\n(free draw)",
@@ -166,7 +167,9 @@ PaintEditorMorph.prototype.buildToolbox = function() {
             circleSolid:
                 "Filled Ellipse\n(shift: circle)",
             paintbucket:
-                "Fill a region"
+                "Fill a region",
+            pipette:
+                "Pipette tool\n(pick a color anywhere)"
         },
         myself = this,
         left = this.toolbox.left(),
@@ -176,7 +179,7 @@ PaintEditorMorph.prototype.buildToolbox = function() {
         x = 0,
         y = 0;
 
-    Object.keys(tools).forEach(function(tool) {
+    Object.keys(tools).forEach(function (tool) {
         var btn = myself.toolButton(tool, tools[tool]);
         btn.setPosition(new Point(
             left + x,
@@ -196,7 +199,7 @@ PaintEditorMorph.prototype.buildToolbox = function() {
     this.toolbox.drawNew();
 };
 
-PaintEditorMorph.prototype.buildEdits = function() {
+PaintEditorMorph.prototype.buildEdits = function () {
     var paper = this.paper;
 
     this.edits.add(this.pushButton(
@@ -211,18 +214,18 @@ PaintEditorMorph.prototype.buildEdits = function() {
     this.edits.fixLayout();
 };
 
-PaintEditorMorph.prototype.openIn = function(world, oldim, oldrc, callback) {
+PaintEditorMorph.prototype.openIn = function (world, oldim, oldrc, callback) {
     // Open the editor in a world with an optional image to edit
     this.oldim = oldim;
     this.oldrc = oldrc.copy();
     this.callback = callback || nop;
 
-    this.processKeyUp = function() {
+    this.processKeyUp = function () {
         this.shift = false;
         this.propertiesControls.constrain.refresh();
     };
 
-    this.processKeyDown = function() {
+    this.processKeyDown = function () {
         this.shift = this.world().currentKey === 16;
         this.propertiesControls.constrain.refresh();
     };
@@ -244,7 +247,7 @@ PaintEditorMorph.prototype.openIn = function(world, oldim, oldrc, callback) {
     this.popUp(world);
 };
 
-PaintEditorMorph.prototype.fixLayout = function() {
+PaintEditorMorph.prototype.fixLayout = function () {
     var oldFlag = Morph.prototype.trackChanges;
 
     this.changed();
@@ -263,13 +266,13 @@ PaintEditorMorph.prototype.fixLayout = function() {
     this.changed();
 };
 
-PaintEditorMorph.prototype.refreshToolButtons = function() {
+PaintEditorMorph.prototype.refreshToolButtons = function () {
     this.toolbox.children.forEach(function (toggle) {
         toggle.refresh();
     });
 };
 
-PaintEditorMorph.prototype.ok = function() {
+PaintEditorMorph.prototype.ok = function () {
     this.callback(
         this.paper.paper,
         this.paper.rotationCenter
@@ -282,7 +285,7 @@ PaintEditorMorph.prototype.cancel = function () {
     this.destroy();
 };
 
-PaintEditorMorph.prototype.populatePropertiesMenu = function() {
+PaintEditorMorph.prototype.populatePropertiesMenu = function () {
     var c = this.controls,
         myself = this,
         pc = this.propertiesControls,
@@ -293,7 +296,7 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function() {
     pc.primaryColorViewer.color = new Color(0, 0, 0);
     pc.colorpicker = new PaintColorPickerMorph(
         new Point(180, 100),
-        function(color) {
+        function (color) {
             var ni = newCanvas(pc.primaryColorViewer.extent()),
                 ctx = ni.getContext("2d"),
                 i,
@@ -331,7 +334,7 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function() {
     pc.penSizeSlider.orientation = "horizontal";
     pc.penSizeSlider.setHeight(15);
     pc.penSizeSlider.setWidth(150);
-    pc.penSizeSlider.action = function(num) {
+    pc.penSizeSlider.action = function (num) {
         if (pc.penSizeField) {
             pc.penSizeField.setContents(num);
         }
@@ -341,7 +344,7 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function() {
     pc.penSizeField = new InputFieldMorph("5", true, null, false);
     pc.penSizeField.contents().minWidth = 20;
     pc.penSizeField.setWidth(25);
-    pc.penSizeField.accept = function() {
+    pc.penSizeField.accept = function () {
         var val = parseFloat(pc.penSizeField.getValue());
         pc.penSizeSlider.value = val;
         pc.penSizeSlider.drawNew();
@@ -359,9 +362,9 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function() {
     pc.constrain = new ToggleMorph(
         "checkbox",
         this,
-        function() {myself.shift = !myself.shift; },
+        function () {myself.shift = !myself.shift; },
         "Constrain proportions of shapes?\n(you can also hold shift)",
-        function() {return myself.shift; }
+        function () {return myself.shift; }
     );
     c.add(pc.colorpicker);
     //c.add(pc.primaryColorButton);
@@ -371,7 +374,7 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function() {
     c.add(pc.constrain);
 };
 
-PaintEditorMorph.prototype.toolButton = function(icon, hint) {
+PaintEditorMorph.prototype.toolButton = function (icon, hint) {
     var button, myself = this;
 
     button = new ToggleButtonMorph(
@@ -381,6 +384,9 @@ PaintEditorMorph.prototype.toolButton = function(icon, hint) {
             myself.paper.currentTool = icon;
             myself.paper.toolChanged(icon);
             myself.refreshToolButtons();
+            if (icon === 'pipette') {
+                myself.getUserColor();
+            }
         },
         new SymbolMorph(icon, 18),
         function () {return myself.paper.currentTool === icon; }
@@ -392,7 +398,7 @@ PaintEditorMorph.prototype.toolButton = function(icon, hint) {
     return button;
 };
 
-PaintEditorMorph.prototype.pushButton = function(title, action, hint) {
+PaintEditorMorph.prototype.pushButton = function (title, action, hint) {
     return new PushButtonMorph(
         this,
         action,
@@ -402,6 +408,38 @@ PaintEditorMorph.prototype.pushButton = function(title, action, hint) {
     );
 };
 
+PaintEditorMorph.prototype.getUserColor = function () {
+    var myself = this,
+        world = this.world(),
+        hand = world.hand,
+        posInDocument = getDocumentPositionOf(world.worldCanvas),
+        mouseMoveBak = hand.processMouseMove,
+        mouseDownBak = hand.processMouseDown,
+        mouseUpBak = hand.processMouseUp;
+
+    hand.processMouseMove = function (event) {
+        var color;
+        hand.setPosition(new Point(
+            event.pageX - posInDocument.x,
+            event.pageY - posInDocument.y
+        ));
+        color = world.getGlobalPixelColor(hand.position());
+        myself.propertiesControls.colorpicker.action(color);
+        myself.paper.settings.primarycolor = color;
+    };
+
+    hand.processMouseDown = nop;
+
+    hand.processMouseUp = function () {
+        myself.paper.currentTool = 'brush';
+        myself.paper.toolChanged('brush');
+        myself.refreshToolButtons();
+        hand.processMouseMove = mouseMoveBak;
+        hand.processMouseDown = mouseDownBak;
+        hand.processMouseUp = mouseUpBak;
+    };
+};
+
 // AdvancedColorPickerMorph //////////////////
 
 // A large hsl color picker
@@ -414,13 +452,13 @@ function PaintColorPickerMorph(extent, action) {
     this.init(extent, action);
 }
 
-PaintColorPickerMorph.prototype.init = function(extent, action) {
+PaintColorPickerMorph.prototype.init = function (extent, action) {
     this.setExtent(extent || new Point(200, 100));
     this.action = action || nop;
     this.drawNew();
 };
 
-PaintColorPickerMorph.prototype.drawNew = function() {
+PaintColorPickerMorph.prototype.drawNew = function () {
     var x = 0,
         y = 0,
         can = newCanvas(this.extent()),
@@ -464,7 +502,7 @@ PaintColorPickerMorph.prototype.drawNew = function() {
     this.image = can;
 };
 
-PaintColorPickerMorph.prototype.mouseDownLeft = function(pos) {
+PaintColorPickerMorph.prototype.mouseDownLeft = function (pos) {
     if ((pos.subtract(this.position()).x > this.width() * 2 / 3) &&
             (pos.subtract(this.position()).y > this.height() - 10)) {
         this.action("transparent");
@@ -490,7 +528,7 @@ function PaintCanvasMorph(shift) {
     this.init(shift);
 }
 
-PaintCanvasMorph.prototype.init = function(shift) {
+PaintCanvasMorph.prototype.init = function (shift) {
     this.rotationCenter = new Point(240, 180);
     this.dragRect = null;
     this.previousDragPoint = null;
@@ -509,20 +547,20 @@ PaintCanvasMorph.prototype.init = function(shift) {
     };
     this.brushBuffer = [];
     this.undoBuffer = [];
-    this.isShiftPressed = shift || function() {
+    this.isShiftPressed = shift || function () {
         var key = this.world().currentKey;
         return (key === 16);
     };
     this.buildContents();
 };
 
-PaintCanvasMorph.prototype.cacheUndo = function() {
+PaintCanvasMorph.prototype.cacheUndo = function () {
     var cachecan = newCanvas(this.extent());
     this.merge(this.paper, cachecan);
     this.undoBuffer.push(cachecan);
 };
 
-PaintCanvasMorph.prototype.undo = function() {
+PaintCanvasMorph.prototype.undo = function () {
     if (this.undoBuffer.length > 0) {
         this.paper = newCanvas(this.extent());
         this.mask.width = this.mask.width + 1 - 1;
@@ -532,11 +570,11 @@ PaintCanvasMorph.prototype.undo = function() {
     }
 };
 
-PaintCanvasMorph.prototype.merge = function(a, b) {
+PaintCanvasMorph.prototype.merge = function (a, b) {
     b.getContext("2d").drawImage(a, 0, 0);
 };
 
-PaintCanvasMorph.prototype.centermerge = function(a, b) {
+PaintCanvasMorph.prototype.centermerge = function (a, b) {
     b.getContext("2d").drawImage(
         a,
         (b.width - a.width) / 2,
@@ -544,13 +582,13 @@ PaintCanvasMorph.prototype.centermerge = function(a, b) {
     );
 };
 
-PaintCanvasMorph.prototype.clearCanvas = function() {
+PaintCanvasMorph.prototype.clearCanvas = function () {
     this.buildContents();
     this.drawNew();
     this.changed();
 };
 
-PaintCanvasMorph.prototype.toolChanged = function(tool) {
+PaintCanvasMorph.prototype.toolChanged = function (tool) {
     this.mask = newCanvas(this.extent());
     if (tool === "crosshairs") {
         this.drawcrosshair();
@@ -559,7 +597,7 @@ PaintCanvasMorph.prototype.toolChanged = function(tool) {
     this.changed();
 };
 
-PaintCanvasMorph.prototype.drawcrosshair = function(context) {
+PaintCanvasMorph.prototype.drawcrosshair = function (context) {
     var ctx = context || this.mask.getContext("2d"),
         rp = this.rotationCenter;
 
@@ -612,7 +650,7 @@ PaintCanvasMorph.prototype.drawcrosshair = function(context) {
     this.changed();
 };
 
-PaintCanvasMorph.prototype.floodfill = function(sourcepoint) {
+PaintCanvasMorph.prototype.floodfill = function (sourcepoint) {
     var width = this.paper.width,
         height = this.paper.height,
         ctx = this.paper.getContext("2d"),
@@ -628,7 +666,7 @@ PaintCanvasMorph.prototype.floodfill = function(sourcepoint) {
         return [data[d], data[d + 1], data[d + 2], data[d + 3]];
     };
     sourcecolor = read(stack[0]);
-    checkpoint = function(p) {
+    checkpoint = function (p) {
         return p[0] === sourcecolor[0] &&
             p[1] === sourcecolor[1] &&
             p[2] === sourcecolor[2] &&
@@ -660,7 +698,7 @@ PaintCanvasMorph.prototype.floodfill = function(sourcepoint) {
     this.changed();
 };
 
-PaintCanvasMorph.prototype.mouseDownLeft = function(pos) {
+PaintCanvasMorph.prototype.mouseDownLeft = function (pos) {
     this.cacheUndo();
     this.dragRect.origin = pos.subtract(this.bounds.origin);
     this.dragRect.corner = pos.subtract(this.bounds.origin);
@@ -680,7 +718,7 @@ PaintCanvasMorph.prototype.mouseDownLeft = function(pos) {
     }
 };
 
-PaintCanvasMorph.prototype.mouseMove = function(pos) {
+PaintCanvasMorph.prototype.mouseMove = function (pos) {
     if (this.currentTool === "paintbucket") {
         return;
     }
@@ -824,14 +862,14 @@ PaintCanvasMorph.prototype.mouseMove = function(pos) {
     mctx.restore();
 };
 
-PaintCanvasMorph.prototype.mouseClickLeft = function() {
+PaintCanvasMorph.prototype.mouseClickLeft = function () {
     if (this.currentTool !== "crosshairs") {
         this.merge(this.mask, this.paper);
     }
     this.brushBuffer = [];
 };
 
-PaintCanvasMorph.prototype.buildContents = function() {
+PaintCanvasMorph.prototype.buildContents = function () {
     this.background = newCanvas(this.extent());
     this.paper = newCanvas(this.extent());
     this.mask = newCanvas(this.extent());
@@ -849,7 +887,7 @@ PaintCanvasMorph.prototype.buildContents = function() {
     }
 };
 
-PaintCanvasMorph.prototype.drawNew = function() {
+PaintCanvasMorph.prototype.drawNew = function () {
     var can = newCanvas(this.extent());
     this.merge(this.background, can);
     this.merge(this.paper, can);