1 files changed, 97 insertions, 22 deletions

diff --git a/index.html b/index.html
index ba59d06..de11e63 100644
--- a/index.html
+++ b/index.html
@@ -29,25 +29,32 @@ let ILLUMINANT_D65 = [ 0.950489, 1.0, 1.088840 ];
 
 
 function main() {
-  let svgState = svgInit();
-
-  generateColorWheel(svgState);
-
-  let colorSelectionDotParameters = {
-    x: 5000,
-    y: -5000,
+  let svgParameters = {
+    scale: 10000,
   };
 
-  generateColorSelectionDot(svgState, colorSelectionDotParameters);
-}
+  let svgState = svgInit(svgParameters);
 
-function generateColorWheel(svgState) {
   let colorWheelParameters = {
-    scale: 10000,
+    scale: svgParameters.scale,
     nStepsAround: 128,
     nStepsOutward: 128,
   };
 
+  generateColorWheel(svgState, colorWheelParameters);
+
+  let colorSelectionDotParameters = {
+    scale: svgParameters.scale,
+  };
+
+  let colorSelectionDotSvgCoordinates = [ 5000, -5000 ];
+
+  let colorSelectionDotState =
+          generateColorSelectionDot(svgState, colorSelectionDotParameters,
+              colorSelectionDotSvgCoordinates);
+}
+
+function generateColorWheel(svgState, colorWheelParameters) {
   let radiusForStepOutward = function(stepOutward) {
     return stepOutward / colorWheelParameters.nStepsOutward;
   };
@@ -142,18 +149,24 @@ function generateOneColorWheelChunk(svgState, colorWheelParameters, chunkParamet
 }
 
 
-function generateColorSelectionDot(svgState, colorSelectionDotParameters) {
-  let dotId = svgGenerateId(svgState, 'colorSelectionDot'),
-      translateParameters = [
-        colorSelectionDotParameters.x,
-        colorSelectionDotParameters.y
-      ];
+function generateColorSelectionDot(svgState, dotParameters, svgCoordinates) {
+  let dotId = svgGenerateId(svgState, 'colorSelectionDot');
+
+  let dotState = { };
 
-  let transform = 'translate(' + translateParameters.join(',') + ')';
+  let dragState = { };
+
+  let pointerStartHandler = function(event) {
+        colorSelectionDotPointerStart(event, svgState, dotState, dragState, dotParameters);
+      },
+      pointerMoveHandler = function(event) {
+        colorSelectionDotPointerMove(event, svgState, dotState, dragState, dotParameters);
+      };
 
   let groupElement = document.createElementNS(svgState.SVG_NS, 'g');
   groupElement.setAttribute('id', dotId);
-  groupElement.setAttribute('transform', transform);
+  groupElement.setAttribute('draggable', 'true');
+  groupElement.addEventListener('dragstart', pointerStartHandler);
 
   let blackCircleElement = document.createElementNS(svgState.SVG_NS, 'circle');
   blackCircleElement.setAttribute('r', '200');
@@ -167,17 +180,79 @@ function generateColorSelectionDot(svgState, colorSelectionDotParameters) {
   groupElement.appendChild(whiteCircleElement);
 
   svgState.svgElement.appendChild(groupElement);
+
+  dotState.element = groupElement;
+
+  colorSelectionDotSetLocation(dotState, svgCoordinates);
+
+  return dotState;
+}
+
+
+function colorSelectionDotSetLocation(dotState, svgCoordinates) {
+  let transform = 'translate(' + svgCoordinates.join(',') + ')';
+
+  dotState.element.setAttribute('transform', transform);
+
+  dotState.location = [].concat(svgCoordinates);
+}
+
+
+function colorSelectionDotPointerStart(event, svgState, dotState, dragState, dotParameters) {
+  let clientCoordinates = [ event.clientX, event.clientY ],
+      scale = dotParameters.scale,
+      svgCoordinates = clientCoordinatesToSvg(svgState, clientCoordinates, scale);
+  console.log('start', svgCoordinates);
+
+  dragState.isActive = true;
+  dragState.mouseDownLocation = svgCoordinates;
+  dragState.originalDotLocation = dotState.location;
 }
 
 
-function svgInit() {
-  let svgState = { };
+function colorSelectionDotPointerMove(event, svgState, dotState, dragState, dotParameters) {
+  let eventClientCoordinates = [ event.clientX, event.clientY ],
+      scale = dotParameters.scale,
+      eventSvgCoordinates = clientCoordinatesToSvg(svgState, eventClientCoordinates, scale),
+      offset = [
+        eventSvgCoordinates[0] - dragState.mouseDownLocation[0],
+        eventSvgCoordinates[1] - dragState.mouseDownLocation[1],
+      ],
+      newLocation = [
+        dragState.originalDotLocation[0] + offset[0],
+        dragState.originalDotLocation[1] + offset[1],
+      ];
+  console.log('offset', offset);
+
+  colorSelectionDotSetLocation(dotState, newLocation);
+}
+
+
+function clientCoordinatesToSvg(svgState, clientCoordinates, scale) {
+  let svgRect = svgState.svgElement.getClientRects()[0],
+      clientWidth = svgState.svgElement.clientWidth,
+      clientHeight = svgState.svgElement.clientHeight,
+      horizontalScale = scale * 2.0 / clientWidth,
+      verticalScale = scale * 2.0 / clientHeight;
+
+  return [
+             (clientCoordinates[0] - svgRect.left) * horizontalScale - scale,
+             scale - (clientCoordinates[1] - svgRect.top) * verticalScale,
+         ];
+}
+
+
+function svgInit(svgParameters) {
+  let svgState = { },
+      scale = svgParameters.scale;
+
+  viewBox = [ -1 * scale, -1 * scale, 2 * scale, 2 * scale ].join(' ');
 
   svgState.SVG_NS = 'http://www.w3.org/2000/svg';
   svgState.divElement = document.getElementById('color-wheel');
   svgState.svgElement = document.createElementNS(svgState.SVG_NS, 'svg');
   svgState.svgElement.setAttribute('class', 'color-wheel');
-  svgState.svgElement.setAttribute('viewBox', '-10000 -10000 20000 20000');
+  svgState.svgElement.setAttribute('viewBox', viewBox);
   svgState.svgElement.setAttribute('transform', 'scale(1 -1)');
   svgState.divElement.appendChild(svgState.svgElement);