Devtools: Refactor color picker to use WI.installDragHandle()

Source/devtools/front_end/elements/Spectrum.js

 /*
  * Copyright (C) 2011 Brian Grinstead All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 31 matching lines @@
         icon.setAttribute("width", 16);
         var path = icon.createSVGChild("path");
         path.setAttribute("d", "M5,6 L11,6 L8,2 Z M5,10 L11,10 L8,14 Z");
         return icon;
     }
 
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("elements/spectrum.css");
     this.contentElement.tabIndex = 0;
 
-    this._draggerElement = this.contentElement.createChild("div", "spectrum-color");
-    this._dragHelperElement = this._draggerElement.createChild("div", "spectrum-sat fill").createChild("div", "spectrum-val fill").createChild("div", "spectrum-dragger");
+    this._colorElement = this.contentElement.createChild("div", "spectrum-color");
+    this._colorDragElement = this._colorElement.createChild("div", "spectrum-sat fill").createChild("div", "spectrum-val fill").createChild("div", "spectrum-dragger");
 
     var swatchElement = this.contentElement.createChild("span", "swatch");
     this._swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
 
     this._hueElement = this.contentElement.createChild("div", "spectrum-hue");
     this._hueSlider = this._hueElement.createChild("div", "spectrum-slider");
     this._alphaElement = this.contentElement.createChild("div", "spectrum-alpha");
     this._alphaElementBackground = this._alphaElement.createChild("div", "spectrum-alpha-background");
     this._alphaSlider = this._alphaElement.createChild("div", "spectrum-slider");
 
@@ skipping 16 matching lines @@
 
     // HEX display.
     this._hexContainer = this.contentElement.createChild("div", "spectrum-text spectrum-text-hex source-code");
     this._hexValue = this._hexContainer.createChild("input", "spectrum-text-value");
     this._hexValue.maxLength = 7;
     this._hexValue.addEventListener("input", this._inputChanged.bind(this));
 
     var label = this._hexContainer.createChild("div", "spectrum-text-label");
     label.textContent = "HEX";
 
-    WebInspector.Spectrum.draggable(this._hueElement, hueDrag.bind(this));
-    WebInspector.Spectrum.draggable(this._alphaElement, alphaDrag.bind(this));
-    WebInspector.Spectrum.draggable(this._draggerElement, colorDrag.bind(this), colorDragStart.bind(this));
+    WebInspector.installDragHandle(this._hueElement, dragStart.bind(this), hueDrag.bind(this), null, "default");
+    WebInspector.installDragHandle(this._alphaElement, dragStart.bind(this), alphaDrag.bind(this), null, "default");
+    WebInspector.installDragHandle(this._colorElement, colorDragStart.bind(this), colorDrag.bind(this), null, "default");
 
     /**
-     * @param {!Element} element
-     * @param {number} dragX
-     * @param {number} dragY
+     * @param {!Event} event
+     * @return {boolean}
      * @this {WebInspector.Spectrum}
      */
-    function hueDrag(element, dragX, dragY)
+    function dragStart(event)
     {
-        this._hsv[0] = (this._hueAlphaWidth - dragX) / this._hueAlphaWidth;
+        this._mouseDownPosition = new WebInspector.Geometry.Point(event.x, event.y);
+        this._originalColor = this._hsv.slice();
+        return true;
+    }
+
+    /**
+     * @param {!Event} event
+     * @return {boolean}
+     * @this {WebInspector.Spectrum}
+     */
+    function colorDragStart(event)
+    {
+        this._hsv[1] = event.offsetX / this.dragWidth;
+        this._hsv[2] = (this.dragHeight - event.offsetY) / this.dragHeight;
+        this._onchange();
+        return dragStart.call(this, event);
+    }
+
+    /**
+     * @param {!Event} event
+     * @this {WebInspector.Spectrum}
+     */
+    function hueDrag(event)
+    {
+        var deltaX = event.x - this._mouseDownPosition.x;
+        this._hsv[0] = Number.constrain(this._originalColor[0] - deltaX / this._hueAlphaWidth, 0, 1);
         this._onchange();
     }
 
     /**
-     * @param {!Element} element
-     * @param {number} dragX
-     * @param {number} dragY
+     * @param {!Event} event
      * @this {WebInspector.Spectrum}
      */
-    function alphaDrag(element, dragX, dragY)
+    function alphaDrag(event)
     {
-        this._hsv[3] = Math.round((dragX / this._hueAlphaWidth) * 100) / 100;
+        var deltaX = event.x - this._mouseDownPosition.x;
+        var newAlpha = this._originalColor[3] + Math.round((deltaX / this._hueAlphaWidth) * 100) / 100;
+        this._hsv[3] = Number.constrain(newAlpha, 0, 1);
         if (this._color().hasAlpha() && (this._currentFormat === WebInspector.Color.Format.ShortHEX || this._currentFormat === WebInspector.Color.Format.HEX || this._currentFormat === WebInspector.Color.Format.Nickname))
             this.setColorFormat(WebInspector.Color.Format.RGB);
         this._onchange();
     }
 
-    var initialHelperOffset;
-
     /**
+     * @param {!Event} event
      * @this {WebInspector.Spectrum}
      */
-    function colorDragStart()
+    function colorDrag(event)
     {
-        initialHelperOffset = { x: this._dragHelperElement.offsetLeft, y: this._dragHelperElement.offsetTop };
-    }
-
-    /**
-     * @param {!Element} element
-     * @param {number} dragX
-     * @param {number} dragY
-     * @param {!MouseEvent} event
-     * @this {WebInspector.Spectrum}
-     */
-    function colorDrag(element, dragX, dragY, event)
-    {
-        if (event.shiftKey) {
-            if (Math.abs(dragX - initialHelperOffset.x) >= Math.abs(dragY - initialHelperOffset.y))
-                dragY = initialHelperOffset.y;
-            else
-                dragX = initialHelperOffset.x;
-        }
-
-        this._hsv[1] = dragX / this.dragWidth;
-        this._hsv[2] = (this.dragHeight - dragY) / this.dragHeight;
-
+        var deltaX = event.x - this._mouseDownPosition.x;
+        var deltaY = event.y - this._mouseDownPosition.y;
+        this._hsv[1] = Number.constrain(this._originalColor[1] + deltaX / this.dragWidth, 0, 1);
+        this._hsv[2] = Number.constrain(this._originalColor[2] - deltaY / this.dragHeight, 0, 1);
         this._onchange();
     }
 };
 
 WebInspector.Spectrum.Events = {
     ColorChanged: "ColorChanged"
 };
 
-/**
- * @param {!Element} element
- * @param {function(!Element, number, number, !MouseEvent)=} onmove
- * @param {function(!Element, !MouseEvent)=} onstart
- * @param {function(!Element, !MouseEvent)=} onstop
- */
-WebInspector.Spectrum.draggable = function(element, onmove, onstart, onstop) {
-
-    var dragging;
-    var offset;
-    var scrollOffset;
-    var maxHeight;
-    var maxWidth;
-
-    /**
-     * @param {!Event} e
-     */
-    function consume(e)
-    {
-        e.consume(true);
-    }
-
-    /**
-     * @param {!Event} e
-     */
-    function move(e)
-    {
-        if (dragging) {
-            var dragX = Math.max(0, Math.min(e.pageX - offset.left + scrollOffset.left, maxWidth));
-            var dragY = Math.max(0, Math.min(e.pageY - offset.top + scrollOffset.top, maxHeight));
-
-            if (onmove)
-                onmove(element, dragX, dragY, /** @type {!MouseEvent} */ (e));
-        }
-    }
-
-    /**
-     * @param {!Event} e
-     */
-    function start(e)
-    {
-        var mouseEvent = /** @type {!MouseEvent} */ (e);
-        var rightClick = mouseEvent.which ? (mouseEvent.which === 3) : (mouseEvent.button === 2);
-
-        if (!rightClick && !dragging) {
-
-            if (onstart)
-                onstart(element, mouseEvent);
-
-            dragging = true;
-            maxHeight = element.clientHeight;
-            maxWidth = element.clientWidth;
-
-            scrollOffset = element.scrollOffset();
-            offset = element.totalOffset();
-
-            element.ownerDocument.addEventListener("selectstart", consume, false);
-            element.ownerDocument.addEventListener("dragstart", consume, false);
-            element.ownerDocument.addEventListener("mousemove", move, false);
-            element.ownerDocument.addEventListener("mouseup", stop, false);
-
-            move(mouseEvent);
-            consume(mouseEvent);
-        }
-    }
-
-    /**
-     * @param {!Event} e
-     */
-    function stop(e)
-    {
-        if (dragging) {
-            element.ownerDocument.removeEventListener("selectstart", consume, false);
-            element.ownerDocument.removeEventListener("dragstart", consume, false);
-            element.ownerDocument.removeEventListener("mousemove", move, false);
-            element.ownerDocument.removeEventListener("mouseup", stop, false);
-
-            if (onstop)
-                onstop(element, /** @type {!MouseEvent} */ (e));
-        }
-
-        dragging = false;
-    }
-
-    element.addEventListener("mousedown", start, false);
-};
-
 WebInspector.Spectrum.prototype = {
     /**
      * @param {!WebInspector.Color} color
      */
     setColor: function(color)
     {
         this._hsv = color.hsva();
         this._update();
     },
 
@@ skipping 62 matching lines @@
     {
         var h = this._hsv[0];
         var s = this._hsv[1];
         var v = this._hsv[2];
         var alpha = this._hsv[3];
 
         // Where to show the little circle that displays your current selected color.
         var dragX = s * this.dragWidth;
         var dragY = this.dragHeight - (v * this.dragHeight);
 
-        dragX = Math.max(-this._dragHelperElementHeight,
-                        Math.min(this.dragWidth - this._dragHelperElementHeight, dragX - this._dragHelperElementHeight));
-        dragY = Math.max(-this._dragHelperElementHeight,
-                        Math.min(this.dragHeight - this._dragHelperElementHeight, dragY - this._dragHelperElementHeight));
+        dragX = Math.max(-this._colorDragElementHeight,
+                        Math.min(this.dragWidth - this._colorDragElementHeight, dragX - this._colorDragElementHeight));
+        dragY = Math.max(-this._colorDragElementHeight,
+                        Math.min(this.dragHeight - this._colorDragElementHeight, dragY - this._colorDragElementHeight));
 
-        this._dragHelperElement.positionAt(dragX, dragY);
+        this._colorDragElement.positionAt(dragX, dragY);
 
         // Where to show the bar that displays your current selected hue.
         var hueSlideX = (1 - h) * this._hueAlphaWidth - this.slideHelperWidth;
         this._hueSlider.style.left = hueSlideX + "px";
         var alphaSlideX = alpha * this._hueAlphaWidth - this.slideHelperWidth;
         this._alphaSlider.style.left = alphaSlideX + "px";
     },
 
     _updateInput: function()
     {
@@ skipping 17 matching lines @@
                 if (!isRgb && (i === 1 || i === 2))
                     this._textValues[i].value += "%";
             }
             this._textValues[3].value = Math.round(colorValues[3] * 100) / 100;
         }
     },
 
     _updateUI: function()
     {
         var h = WebInspector.Color.fromHSVA([this._hsv[0], 1, 1, 1]);
-        this._draggerElement.style.backgroundColor = /** @type {string} */ (h.asString(WebInspector.Color.Format.RGB));
+        this._colorElement.style.backgroundColor = /** @type {string} */ (h.asString(WebInspector.Color.Format.RGB));
         this._swatchInnerElement.style.backgroundColor = /** @type {string} */ (this._color().asString(WebInspector.Color.Format.RGBA));
         // Show border if the swatch is white.
         this._swatchInnerElement.classList.toggle("swatch-inner-white", this._color().hsla()[2] > 0.9);
-        this._dragHelperElement.style.backgroundColor = /** @type {string} */ (this._color().asString(WebInspector.Color.Format.RGBA));
+        this._colorDragElement.style.backgroundColor = /** @type {string} */ (this._color().asString(WebInspector.Color.Format.RGBA));
         var noAlpha = WebInspector.Color.fromHSVA(this._hsv.slice(0,3).concat(1));
         this._alphaElementBackground.style.backgroundImage = String.sprintf("linear-gradient(to right, rgba(0,0,0,0), %s)", noAlpha.asString(WebInspector.Color.Format.RGB));
     },
 
     _formatViewSwitch: function()
     {
         var cf = WebInspector.Color.Format;
         if (this._currentFormat === cf.RGB)
             this._currentFormat = cf.HSL;
         else if (this._currentFormat === cf.HSL && !this._color().hasAlpha())
@@ skipping 36 matching lines @@
 
         this._dispatchChangeEvent();
         this._updateHelperLocations();
         this._updateUI();
     },
 
     wasShown: function()
     {
         this._hueAlphaWidth = this._hueElement.offsetWidth;
         this.slideHelperWidth = this._hueSlider.offsetWidth / 2;
-        this.dragWidth = this._draggerElement.offsetWidth;
-        this.dragHeight = this._draggerElement.offsetHeight;
-        this._dragHelperElementHeight = this._dragHelperElement.offsetHeight / 2;
+        this.dragWidth = this._colorElement.offsetWidth;
+        this.dragHeight = this._colorElement.offsetHeight;
+        this._colorDragElementHeight = this._colorDragElement.offsetHeight / 2;
         this._update();
     },
 
     __proto__: WebInspector.VBox.prototype
 }