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 69 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._draggerElement, colorDragStart.bind(this), colorDrag.bind(this), null, "default");

[lushnikov, 2015/05/07 16:02:26]

can we rename draggerElement into colorElement while we are here?

[samli, 2015/05/08 01:43:40]

Done.

 
     /**
-     * @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(0);

[lushnikov, 2015/05/07 16:02:26]

.slice()

[samli, 2015/05/08 01:43:40]

Done.

+        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 174 matching lines @@
         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._update();
     },
 
     __proto__: WebInspector.VBox.prototype
 }