Merge pull request #51 from MetaCell/feature/49

Feature/49 Composition UI
MetaCell · Aug 31, 2022 · 23b61fb · 23b61fb
2 parents d48582f + e98757a
commit 23b61fb
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "react": "^17.0.2",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^17.0.2",
+    "react-rnd": "^10.3.7",
     "react-scripts": "5.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "stream-browserify": "^3.0.0",

diff --git a/src/assets/styles/variables.js b/src/assets/styles/variables.js
@@ -53,6 +53,9 @@ const vars = {
   progressShadow: 'inset 0 0 0.0625rem #E3E3E3',
 
   switchShadow: '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)',
+
+  draggableBg: 'rgba(242, 242, 247, 0.6)',
+  chipBorderColor: 'rgba(60, 60, 67, 0.6)',
   ...nodeRed,
   ...nodeBlue,
   ...nodeGray,

diff --git a/src/assets/svg/option.svg b/src/assets/svg/option.svg
diff --git a/src/components/views/mechanisms/GenericMechanism.js b/src/components/views/mechanisms/GenericMechanism.js
@@ -1,12 +1,92 @@
 import * as React from "react";
 import MechSimple from "./MechSimple";
 import MechMetadata from "./MechMetadata";
+import { Rnd } from "react-rnd";
+import { withStyles } from "@mui/styles";
+import { Box, Chip } from "@mui/material";
+import MORE_OPTION from "../../../assets/svg/option.svg"
+import vars from "../../../assets/styles/variables";
+
+const { draggableBg, listItemActiveBg, textWhite, chipTextColor, chipBorderColor } = vars;
+
+const commonStyles = {
+  background: `${textWhite} !important`,
+  border: `0.0975rem solid ${listItemActiveBg} !important`,
+  borderRadius: '0.125rem !important'
+};
+
+const styles = () => ({
+  root: {
+    '& .react-draggable': {
+      background: draggableBg,
+      border: `0.125rem solid ${chipBorderColor}`,
+      borderRadius: '0.75rem',
+      display: "flex !important",
+      alignItems: "center",
+      justifyContent: "center",
+
+      '&:hover': {
+        borderColor: listItemActiveBg
+      },
+    },
+
+    '& .MuiChip-root': {
+      background: chipBorderColor,
+      borderRadius: '0.75rem',
+      padding: '0 0.5rem',
+      display: "flex",
+      left: 0,
+      position: 'absolute',
+      color: chipTextColor,
+      top: '-1.75rem',
+      alignItems: "center",
+      height: '1.5rem',
+      letterSpacing: '-0.005rem',
+      fontWeight: 510,
+      fontSize: '0.8125rem',
+      lineHeight: '1.25rem',
+      flexDirection: 'row-reverse',
+
+      '& .MuiChip-label': {
+        padding: 0,
+      },
+
+      '& .MuiChip-icon': {
+        margin: '0 0 0 0.25rem',
+      },
+    },
+  },
+
+  selected: {
+    '&:before': {
+      left: 0,
+      ...commonStyles
+    },
+
+    '&:after': {
+      right: 0,
+      ...commonStyles
+    },
+
+    '& .MuiChip-root': {
+      background: listItemActiveBg
+    },
+
+    '& .react-draggable': {
+      borderColor: listItemActiveBg,
+    }
+  },
+});
 
 class GenericMechanism extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       expanded: false,
+      width: 442,
+      height: 192,
+      x: 0,
+      y: 0
     }
     this.changeVisibility = this.changeVisibility.bind(this);
   }
@@ -17,16 +97,39 @@ class GenericMechanism extends React.Component {
 
   render() {
     const { expanded } = this.state;
+    const { classes } = this.props;
 
     return (
-      <>
-        { expanded
+      // <>
+      //   { expanded
+      //     ? ( <MechMetadata changeVisibility={this.changeVisibility} {...this.props} /> )
+      //     : ( <MechSimple changeVisibility={this.changeVisibility} {...this.props} /> )
+      //   }
+      // </>
+      <Box className={`${classes.root} ${expanded ? classes.selected : ''}`}>
+        <Rnd
+          size={{ width: this.state.width, height: this.state.height }}
+          position={{ x: this.state.x, y: this.state.y }}
+          onDragStop={(e, d) => {
+            this.setState({ x: d.x, y: d.y });
+          }}
+          onResizeStop={(e, direction, ref, delta, position) => {
+            this.setState({
+              width: ref.style.width,
+              height: ref.style.height,
+              ...position
+            });
+          }}
+        >
+          <Chip icon={<img src={MORE_OPTION} alt="" />} label="New Comp" color="secondary" />
+          { expanded
           ? ( <MechMetadata changeVisibility={this.changeVisibility} {...this.props} /> )
           : ( <MechSimple changeVisibility={this.changeVisibility} {...this.props} /> )
         }
-      </>
+        </Rnd>
+      </Box>
     );
   }
 }
 
-export default GenericMechanism;
+export default withStyles(styles)(GenericMechanism);