feat(xod-client): change the view of ColorPicker widget and make it w…

…orks with state and tweaks in simulation mode
xodio · Feb 5, 2020 · a95f74d · a95f74d
1 parent 315ebca
commit a95f74d
Show file tree

Hide file tree

Showing 14 changed files with 486 additions and 338 deletions.
diff --git a/packages/xod-client/src/core/styles/components/ColorPicker.scss b/packages/xod-client/src/core/styles/components/ColorPicker.scss
@@ -2,15 +2,123 @@
   width: 220px;
 }
 .ColorPicker {
+  width: 220px;
+  position: relative;
+
   padding: 10px 0;
   .HueSlider {
     path.marker {
       stroke-linecap: round;
     }
   }
 
+  svg {
+    margin-bottom: -20px; // Compensate inner paddings
+  }
+
   .ColorSlider_value, .ColorSlider_label,
   .HueSlider_value, .HueSlider_label {
     fill: $sidebar-color-text;
   }
+
+  .ColorPicker_preview {
+    position: absolute;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+
+    right: 20px;
+    margin-top: -20px;
+  }
+
+  .SatLightBox {
+    position: absolute;
+    overflow: hidden;
+    border-radius: 5px;
+    padding: 2px 4px;
+    box-sizing: border-box;
+
+    // position it inside Hue slider
+    left: 55px;
+    top: 85px;
+
+    .SatLightBox_gradients {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+
+      background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
+      background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+
+        background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
+        background: linear-gradient(to top, #000, rgba(0,0,0,0));
+      }
+    }
+
+    .SatLightBox_container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+    .SatLightBox_pointer {
+      position: absolute;
+      z-index: 2;
+
+      width: 6px;
+      height: 6px;
+
+      margin-left: -3px;
+      margin-top: -3px;
+
+      border: 1px solid #fff;
+      border-radius: 50%;
+
+      cursor: grab;
+      boxShadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
+    }
+  }
+
+  .ColorPicker_values {
+    padding: 10px 20px 0;
+    overflow: hidden;
+
+    & > div {
+      clear: both;
+    }
+    span {
+      float: right;
+      width: 2em;
+      text-align: left;
+    }
+    input {
+      float: right;
+      width: 60px;
+      border: 1px solid transparent;
+      background: none;
+      text-align: right;
+
+      &:focus, &:hover {
+        // outline: 1px solid $input-color-border;
+        border: 1px solid $input-color-border;
+        border-radius: 2px;
+      }
+    }
+    label, input, span {
+      color: $chalk;
+      font-size: $font-size-m;
+    }
+  }
 }
diff --git a/packages/xod-client/src/debugger/sendToSimulationSerialMiddleware.js b/packages/xod-client/src/debugger/sendToSimulationSerialMiddleware.js
@@ -13,14 +13,16 @@ import {
 import * as editorSelectors from '../editor/selectors';
 
 import { NODE_UPDATE_PROPERTY } from '../project/actionTypes';
-import { TWEAK_PULSE_SENT } from '../editor/actionTypes';
+import { TWEAK_PULSE_SENT, NODE_PROPERTY_TWEAKED } from '../editor/actionTypes';
 
 export default ({ getState }) => next => action => {
   const state = getState();
   const result = next(action);
 
   const isTweakActionType =
-    action.type === NODE_UPDATE_PROPERTY || action.type === TWEAK_PULSE_SENT;
+    action.type === NODE_UPDATE_PROPERTY ||
+    action.type === TWEAK_PULSE_SENT ||
+    action.type === NODE_PROPERTY_TWEAKED;
   if (isTweakActionType && isSimulationRunning(state)) {
     const { id: nodeId, value = '', patchPath } = action.payload;
     const nodeType = R.compose(

diff --git a/packages/xod-client/src/editor/actionTypes.js b/packages/xod-client/src/editor/actionTypes.js
@@ -64,6 +64,7 @@ export const SIMULATION_ABORT = 'SIMULATION_ABORT';
 export const SIMULATION_ERROR = 'SIMULATION_ERROR';
 
 export const TWEAK_PULSE_SENT = 'TWEAK_PULSE_SENT';
+export const NODE_PROPERTY_TWEAKED = 'NODE_PROPERTY_TWEAKED';
 
 export const SHOW_COLORPICKER_WIDGET = 'SHOW_COLORPICKER_WIDGET';
 export const HIDE_COLORPICKER_WIDGET = 'HIDE_COLORPICKER_WIDGET';
diff --git a/packages/xod-client/src/editor/actions.js b/packages/xod-client/src/editor/actions.js
@@ -910,3 +910,21 @@ export const showColorPickerWidget = elementId => ({
 export const hideColorPickerWidget = () => ({
   type: ActionType.HIDE_COLORPICKER_WIDGET,
 });
+
+export const tweakNodeProperty = (nodeId, kind, key, value) => (
+  dispatch,
+  getState
+) => {
+  Selectors.getCurrentPatchPath(getState()).map(patchPath =>
+    dispatch({
+      type: ActionType.NODE_PROPERTY_TWEAKED,
+      payload: {
+        id: nodeId,
+        kind,
+        key,
+        value,
+        patchPath,
+      },
+    })
+  );
+};
diff --git a/packages/xod-client/src/editor/components/ColorPicker/ColorSlider.jsx b/packages/xod-client/src/editor/components/ColorPicker/ColorSlider.jsx