Merge pull request #1953 from xodio/feat-color-picker

Add color picker widget
xodio · Feb 13, 2020 · 0e89941 · 0e89941
2 parents fbff3d7 + 91213f2
commit 0e89941
Show file tree

Hide file tree

Showing 41 changed files with 1,276 additions and 268 deletions.
diff --git a/packages/xod-client-electron/src/debugger/sendToSerialMiddleware.js b/packages/xod-client-electron/src/debugger/sendToSerialMiddleware.js
@@ -19,8 +19,9 @@ export default ({ getState }) => next => action => {
   }
 
   const isTweakActionType =
-    action.type === client.NODE_UPDATE_PROPERTY ||
-    action.type === client.TWEAK_PULSE_SENT;
+    action.type === client.NODE_PROPERTY_UPDATED ||
+    action.type === client.TWEAK_PULSE_SENT ||
+    action.type === client.NODE_PROPERTY_UPDATING;
   if (isTweakActionType && client.isSerialDebugRunning(state)) {
     const { id: nodeId, value = '', patchPath } = action.payload;
     const nodeType = R.compose(

diff --git a/packages/xod-client/package.json b/packages/xod-client/package.json
@@ -22,6 +22,7 @@
     "big.js": "^5.2.2",
     "classnames": "^2.2.5",
     "codemirror": "^5.31.0",
+    "color-convert": "^2.0.1",
     "escape-string-regexp": "^1.0.5",
     "font-awesome": "^4.6.3",
     "line-intersection": "^1.0.8",

diff --git a/packages/xod-client/src/core/styles/components/ColorPicker.scss b/packages/xod-client/src/core/styles/components/ColorPicker.scss
@@ -0,0 +1,158 @@
+.ColorPickerWidget {
+  width: 220px;
+}
+.PointingPopup-content .ColorPicker {
+  &, & * {
+    @include noselect();
+  }
+}
+.ColorPicker {
+  width: 220px;
+  position: relative;
+  padding: 10px 0;
+
+  .HueCircle {
+    z-index: 1;
+    margin: 0 20px;
+    position: relative;
+
+    & > * {
+      display: block;
+      position: absolute;
+    }
+    &_area {
+      background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red);
+      border-radius: 50%;
+      z-index: 1;
+    }
+    &_inner {
+      border-radius: 50%;
+      left: 50%;
+      top: 50%;
+      background: $sidebar-color-bg;
+      z-index: 2;
+    }
+    &_pointer {
+      z-index: 3;
+      left: 50%;
+      top: 50%;
+
+      border: 1px solid #fff;
+      border-radius: 50%;
+
+      cursor: grab;
+      box-shadow: inset 0 0 2px 1px rgba(0,0,0,.3), 0 1px 2px 1px rgba(0,0,0,.3);
+    }
+  }
+
+  &_preview {
+    z-index: 2;
+    position: absolute;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+
+    top: 10px;
+    left: 10px;
+  }
+
+  .SatLightBox {
+    z-index: 3;
+    position: absolute;
+    overflow: hidden;
+    border-radius: 5px;
+    padding: 2px 4px;
+    box-sizing: border-box;
+
+    // position it inside Hue slider
+    left: 55px;
+    top: 65px;
+
+    .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: 10px;
+      height: 10px;
+
+      margin-left: -5px;
+      margin-top: -5px;
+
+      border: 1px solid #fff;
+      border-radius: 50%;
+
+      cursor: grab;
+      box-shadow: inset 0 0 2px 1px rgba(0,0,0,.3), 0 1px 2px 1px rgba(0,0,0,.3);
+    }
+  }
+
+  .ColorPicker_values {
+    padding: 10px 20px 0;
+    overflow: hidden;
+
+    & > div {
+      clear: both;
+      margin-bottom: 2px;
+    }
+    span {
+      float: right;
+      width: 2em;
+      text-align: left;
+    }
+    input {
+      @include select-text();
+      float: right;
+      width: 40px;
+      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 {
+      float: none;
+      max-width: 120px;
+      width: 120px;
+      padding: 1px 0;
+    }
+    label, input, span {
+      color: $chalk;
+      font-size: $font-size-m;
+    }
+  }
+}
diff --git a/packages/xod-client/src/core/styles/components/CustomScroll.scss b/packages/xod-client/src/core/styles/components/CustomScroll.scss
@@ -15,6 +15,7 @@
   }
 
   .inner-container {
+    position: relative;
     overflow-x: hidden;
     overflow-y: scroll;
 

diff --git a/packages/xod-client/src/core/styles/components/Helpbox.scss b/packages/xod-client/src/core/styles/components/Helpbox.scss
@@ -1,35 +1,7 @@
 .Helpbox {
-  position: fixed;
-  z-index: 15;
-  top: 0;
-  background: $sidebar-color-bg;
-  border: 1px solid $chrome-outlines;
-  border-radius: 5px;
-  box-shadow: 5px 5px 10px -5px rgba(0,0,0,.5);
   max-height: 80%;
   min-width: 300px;
 
-  margin-top: -13px; // to point accurately on selected item
-
-  display: flex;
-  flex-direction: column;
-
-  transition: opacity 0.1s;
-
-  &--rightSided {
-    .pointer {
-      left: auto !important;
-      right: -7px;
-      &:before {
-        transform: rotate(135deg) !important;
-      }
-    }
-  }
-  &--hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-
   &-content {
     display: flex;
     flex-grow: 1;
@@ -41,30 +13,4 @@
     * { user-select: text; }
     span { cursor: text; }
   }
-
-  .pointer {
-    position: absolute;
-    z-index: 2;
-    left: -7px;
-    top: 20px;
-
-    &:before {
-      content: '';
-      display: block;
-      width: 12px;
-      height: 12px;
-
-      background: $sidebar-color-bg;
-      border-left: 1px solid $chrome-outlines;
-      border-top: 1px solid $chrome-outlines;
-      transform: rotate(-45deg);
-    }
-  }
-
-  .no-selection {
-    color: $sidebar-color-text;
-    font-size: $font-size-m;
-    text-align: center;
-    padding: 10px;
-  }
 }
diff --git a/packages/xod-client/src/core/styles/components/Inspector.scss b/packages/xod-client/src/core/styles/components/Inspector.scss
@@ -262,6 +262,16 @@
       float: none;
     }
   }
+  .ColorPicker_toggleBtn {
+    cursor: pointer;
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    border: none;
+  }
 }
 
 .LabelWidget .inspectorTextInput {

diff --git a/packages/xod-client/src/core/styles/components/PointingPopup.scss b/packages/xod-client/src/core/styles/components/PointingPopup.scss
@@ -0,0 +1,72 @@
+.PointingPopup {
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  background: $sidebar-color-bg;
+  border: 1px solid $chrome-outlines;
+  border-radius: 5px;
+  box-shadow: 5px 5px 10px -5px rgba(0,0,0,.5);
+
+  margin-top: -13px; // to point accurately on selected item
+
+  display: flex;
+  flex-direction: column;
+
+  transition: opacity 0.1s;
+
+  .outer-container, .content-wrapper {
+    width: auto !important;
+  }
+
+  &--rightSided {
+    .pointer {
+      left: auto !important;
+      right: -7px;
+      &:before {
+        transform: rotate(135deg) !important;
+      }
+    }
+  }
+  &--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &-content {
+    display: flex;
+    flex-grow: 1;
+
+    .PatchDocs {
+      padding: 12px;
+    }
+
+    * { user-select: text; }
+    span { cursor: text; }
+  }
+
+  .pointer {
+    position: absolute;
+    z-index: 2;
+    left: -7px;
+    top: 20px;
+
+    &:before {
+      content: '';
+      display: block;
+      width: 12px;
+      height: 12px;
+
+      background: $sidebar-color-bg;
+      border-left: 1px solid $chrome-outlines;
+      border-top: 1px solid $chrome-outlines;
+      transform: rotate(-45deg);
+    }
+  }
+
+  .no-selection {
+    color: $sidebar-color-text;
+    font-size: $font-size-m;
+    text-align: center;
+    padding: 10px;
+  }
+}
diff --git a/packages/xod-client/src/core/styles/main.scss b/packages/xod-client/src/core/styles/main.scss
@@ -24,6 +24,7 @@
   'components/Button',
   'components/CloseButton',
   'components/Comment',
+  'components/ColorPicker',
   'components/ContextMenu',
   'components/CodeMirror',
   'components/CppPatchDocs',
@@ -46,6 +47,7 @@
   'components/Pin',
   'components/PinLabel',
   'components/PinValue',
+  'components/PointingPopup',
   'components/PopupPublishProject',
   'components/ProjectBrowser',
   'components/Sidebar',

diff --git a/packages/xod-client/src/debugger/sendToSimulationSerialMiddleware.js b/packages/xod-client/src/debugger/sendToSimulationSerialMiddleware.js
@@ -12,15 +12,20 @@ import {
 } from './selectors';
 import * as editorSelectors from '../editor/selectors';
 
-import { NODE_UPDATE_PROPERTY } from '../project/actionTypes';
-import { TWEAK_PULSE_SENT } from '../editor/actionTypes';
+import { NODE_PROPERTY_UPDATED } from '../project/actionTypes';
+import {
+  TWEAK_PULSE_SENT,
+  NODE_PROPERTY_UPDATING,
+} 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_PROPERTY_UPDATED ||
+    action.type === TWEAK_PULSE_SENT ||
+    action.type === NODE_PROPERTY_UPDATING;
   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,3 +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_UPDATING = 'NODE_PROPERTY_UPDATING';
+
+export const SHOW_COLORPICKER_WIDGET = 'SHOW_COLORPICKER_WIDGET';
+export const HIDE_COLORPICKER_WIDGET = 'HIDE_COLORPICKER_WIDGET';