#18 fixed height and width of the main to display react-diagram, plus…

… setting up the base component for the mechanism
MetaCell · Jun 27, 2022 · 01785d8 · 01785d8
1 parent eba0e7c
commit 01785d8
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 156 deletions.
diff --git a/src/App.css b/src/App.css
@@ -51,8 +51,8 @@
   position: absolute;
   top: 50px;
   left: 0px;
-  height: 100%;
-  width: 100%;
+  height: 92vh;
+  width: 100vw;
   background-color: gray;
   margin-top: 5px;
 }

diff --git a/src/App.js b/src/App.js
@@ -10,7 +10,7 @@ function App() {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Layout />
-      <Loader />
+      {/* <Loader /> */}
     </ThemeProvider>
   );
 }

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -21,12 +21,12 @@ export default class Main extends React.Component {
 	var model = new DiagramModel();
 
 	//3-A) create a default node
-	var node1 = new JSCustomNodeModel({
-		name: 'Node 1',
-		color: 'rgb(0,192,255)',
-        pnlClass: 'ProcessingMechanism',
-		shape: 'default'
-	});
+	// var node1 = new JSCustomNodeModel({
+	// 	name: 'Node 1',
+	// 	color: 'rgb(0,192,255)',
+    //     pnlClass: 'ProcessingMechanism',
+	// 	shape: 'default'
+	// });
 
 	var node4 = new JSCustomNodeModel({
 		name: 'Node 4',
@@ -35,47 +35,48 @@ export default class Main extends React.Component {
 		shape: 'circle'
 	});
 
-	var node5 = new JSCustomNodeModel({
-		name: 'Node 5',
-		color: 'rgb(0,192,255)',
-        pnlClass: 'ProcessingMechanism',
-		shape: 'hexagon'
-	});
+	// var node5 = new JSCustomNodeModel({
+	// 	name: 'Node 5',
+	// 	color: 'rgb(0,192,255)',
+    //     pnlClass: 'ProcessingMechanism',
+	// 	shape: 'hexagon'
+	// });
 
-	node4.setPosition(900,200);
-	node5.setPosition(550,500);
+	node4.setPosition(700,200);
+	// node5.setPosition(550,500);
 
-	node1.setPosition(100, 100);
+	// node1.setPosition(100, 100);
 	// let port1 = node1.addOutPort('Out');
 
 	//3-B) create another default node
-	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
-	node2.addInPort('in');
-	node2.setPosition(400, 100);
+	// var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	// node2.addInPort('in');
+	// node2.setPosition(400, 100);
 
-	var node3 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
-	node3.addInPort('in');
-	node3.setPosition(200, 400);
+	// var node3 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	// node3.addInPort('in');
+	// node3.setPosition(200, 400);
 
 	// link the ports
 	// let link1 = port1.link(port2);
 	// link1.getOptions().testName = 'Test';
 	// link1.addLabel('Hello World!');
-    const link1 = new DefaultLinkModel();
-    link1.setSourcePort(node1.getPort('out'));
-    link1.setTargetPort(node2.getPort('in'));
-	const link2 = new DefaultLinkModel();
-    link2.setSourcePort(node1.getPort('out'));
-    link2.setTargetPort(node3.getPort('in'));
+    // const link1 = new DefaultLinkModel();
+    // link1.setSourcePort(node1.getPort('out'));
+    // link1.setTargetPort(node2.getPort('in'));
+	// const link2 = new DefaultLinkModel();
+    // link2.setSourcePort(node1.getPort('out'));
+    // link2.setTargetPort(node3.getPort('in'));
 
 	//4) add the models to the root graph
-	model.addAll(node1, node2, node3, link1, link2, node4, node5);
+	// model.addAll(node1, node2, node3, link1, link2, node4, node5);
+	model.addAll(node4);
 
 	//5) load model into engine
 	engine.setModel(model);
 
     return (
-        <div style={{ height: '100%', width: '100%'}}>
+        <div className='main'>
             <CanvasWidget className="diagram-container" engine={engine} />
         </div>
     );

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -13,6 +13,7 @@ const { textWhite, dividerColor } = vars;
 
 const useStyles = makeStyles((theme) => ({
   root: {
+    zIndex: '5',
     width: '4rem',
     background: textWhite,
     boxShadow: '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',

diff --git a/...onents/custom-node/JSCustomNodeWidget2.js → ...omponents/custom-node/GenericMechanism.js b/...onents/custom-node/JSCustomNodeWidget2.js → ...omponents/custom-node/GenericMechanism.js
@@ -15,7 +15,7 @@ const styles = (theme) => ({
   },
 });
 
-class JSCustomNodeWidget2 extends React.Component {
+class GenericMechanism extends React.Component {
   render() {
     const { classes } = this.props;
     return (
@@ -71,4 +71,4 @@ class JSCustomNodeWidget2 extends React.Component {
   }
 }
 
-export default withStyles(styles)(JSCustomNodeWidget2);
+export default withStyles(styles)(GenericMechanism);
diff --git a/src/components/custom-node/JSCustomNodeFactory.js b/src/components/custom-node/JSCustomNodeFactory.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { JSCustomNodeModel } from './JSCustomNodeModel';
 import JSCustomNodeWidget from './JSCustomNodeWidget';
-import JSCustomNodeWidget2 from './JSCustomNodeWidget2';
+import GenericMechanism from './GenericMechanism';
 import JSCustomNodeWidget3 from './JSCustomNodeWidget3';
 import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
 
@@ -20,7 +20,7 @@ export class JSCustomNodeFactory extends AbstractReactFactory {
 				return <JSCustomNodeWidget engine={this.engine} node={event.model} />;
 			}
 			case 'circle': {
-				return <JSCustomNodeWidget2 engine={this.engine} node={event.model} />;
+				return <GenericMechanism engine={this.engine} node={event.model} />;
 			}
 			case 'hexagon': {
 				return <JSCustomNodeWidget3 engine={this.engine} node={event.model} />;