add color class and ui changes (#170)

plynx/constants/parameter_types.py

@@ -13,11 +13,13 @@ class ParameterTypes:
     LIST_INT: str = 'list_int'
     LIST_NODE: str = 'list_node'
     CODE: str = 'code'
+    COLOR: str = 'color'
 
 
 PRIMITIVE_TYPES = {
     ParameterTypes.BOOL,
     ParameterTypes.FLOAT,
     ParameterTypes.INT,
     ParameterTypes.STR,
+    ParameterTypes.COLOR,
 }

plynx/db/node.py

@@ -311,6 +311,8 @@ def _get_default_by_type(parameter_type: str):
         return ParameterListOfNodes()
     elif parameter_type == ParameterTypes.CODE:
         return ParameterCode()
+    elif parameter_type == ParameterTypes.COLOR:
+        return '#FF0000'
     else:
         return None
 

plynx/demo/types.py

@@ -15,6 +15,7 @@ def print_any(value):
 @plynx.node.output(name='dict', var_type=dict)
 @plynx.node.output(name='float', var_type=float)
 @plynx.node.output(name='bool', var_type=bool)
+@plynx.node.output(name='color', var_type="color")
 @plynx.node.operation(
     title="All types",
     description="Echo all types",
@@ -27,6 +28,7 @@ def all_types():
         "dict": {"foo": "woo"},
         "float": math.pi,
         "bool": True,
+        "color": "#FF0000",
     }
 
 
@@ -75,6 +77,15 @@ def print_bool(value):
     print_any(value)
 
 
+@plynx.node.input(name='value', var_type="color")
+@plynx.node.operation(
+    title="Print Color value",
+)
+def print_color(value):
+    """Print input value."""
+    print_any(value)
+
+
 @plynx.node.input(name='value', var_type="py-json-file")
 @plynx.node.output(name='value', var_type=dict)
 @plynx.node.operation(
@@ -108,6 +119,7 @@ def dict_to_file(value):
         print_dict,
         print_float,
         print_bool,
+        print_color,
         file_to_dict,
         dict_to_file,
     ]

plynx/plugins/resources/common.py

@@ -19,26 +19,33 @@ class Raw(resource.BaseResource):
     DISPLAY_RAW: bool = True
 
 
-class RawInt(resource.BaseResource):
+class RawInt(Raw):
     """Raw Resource that will store an integer in the Node."""
-    DISPLAY_RAW: bool = True
 
     @staticmethod
     def preprocess_input(value: Any) -> int:
         """Resource_id to an object"""
         return int(value)
 
 
-class RawFloat(resource.BaseResource):
+class RawFloat(Raw):
     """Raw Resource that will store an integer in the Node."""
-    DISPLAY_RAW: bool = True
 
     @staticmethod
     def preprocess_input(value: Any) -> float:
         """Resource_id to an object"""
         return float(value)
 
 
+class RawColor(Raw):
+    """Raw Resource that will store an integer in the Node."""
+
+    @staticmethod
+    def preprocess_input(value: Any) -> str:
+        """Resource_id to an object"""
+        return str(value)
+
+
 class File(resource.BaseResource):
     """Raw Resource that will be stored in the file format in the Node."""
 

ui/package.json

@@ -36,6 +36,7 @@
     "react-alert-template-basic": "^1.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-cache-buster": "^0.1.8",
+    "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
     "react-cookies": "^0.1.1",
     "react-dev-utils": "^12.0.1",

ui/src/components/Common/ParameterItem.css

@@ -55,6 +55,10 @@
   font-style: italic;
 }
 
+.ParameterValueCell > .input-button {
+  margin-left: 2pt;
+}
+
 .properties-list .option-block {
   display: flex;
 }

ui/src/components/Common/CodeItem.js → ui/src/components/Common/ValueCodeItem.js

@@ -5,7 +5,7 @@ import {CODE_LANGUAGES, CODE_THEMES} from '../../constants';
 import 'brace/ext/language_tools';
 import 'brace/ext/searchbox';
 
-import './CodeItem.css';
+import './ValueCodeItem.css';
 
 // Init react-ace
 
@@ -20,7 +20,7 @@ CODE_THEMES.forEach(theme => {
 
 // Finish react-ace
 
-export default class EnumItem extends Component {
+export default class CodeItem extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     readOnly: PropTypes.bool.isRequired,