Merge pull request #10 from flowr-analysis/7-define-functions-for-reo…

…ccuring-elements

feat: export body of node definition into function

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "cSpell.words": [
+        "Layouted",
+        "Layouting",
+        "reactflow"
+    ]
+}

README.md

@@ -2,7 +2,7 @@
 
 To run the project, you need [npm](https://www.npmjs.com/).
 
-1. Run `npm ci` to install all required packages (only once or after updates)
+1. Run `npm ci --force` to install all required packages (only once or after updates). Due to `react-split-pane` we currently have to use force.
 2. Run `npm start` to start the server
 3. Open the URL shown in the logfile (probably something like <http://localhost:8080/>)
-4. Work work work! :D
+4. Work, work, work! :D

css/main.css

@@ -5,6 +5,113 @@ body {
 	margin: 0px;
 }
 
+#legend-close-button-div {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+}
+
+.button-close-legend {
+  background: #FF4742;
+  border: 1px solid #FF4742;
+  border-radius: 0px 8px 0px 8px;
+  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
+  box-sizing: border-box;
+  color: #FFFFFF;
+  cursor: pointer;
+  display: inline-block;
+  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 6px;
+  min-height: 10px;
+  outline: 0;
+  padding: 6px 8px;
+  text-align: center;
+  text-rendering: geometricprecision;
+  text-transform: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.button-close-legend:hover, .button-close-legend:focus {
+  background-color: initial;
+  background-position: 0 0;
+  color: #FF4742;
+}
+
+.button-close-legend:active {
+  opacity: .5;
+  background: #9b0f0b;
+}
+
+.legend-control-elements{
+	display: flex;
+	flex-direction: column;
+}
+
+.slide-in-legend {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+
+	width: 40vw;
+	height: 30vh;
+	background: rgba(255, 255, 255, .9);
+	backdrop-filter: blur(5px);
+	filter: none;
+	border-radius: 0px 8px 0px 0px;
+	overflow: hidden;
+
+	transform: translateX(-100%);
+	transition: 300ms ease-in-out;
+
+	display: flex;
+	flex-direction: row;
+   padding: 12px;
+   padding-right: 25px;
+	gap: 4em;
+
+	z-index: 9999999;
+}
+
+.slide-in-legend.visible {
+	transform: translateX(0);
+	filter: drop-shadow(0px 0px 8px gray);
+}
+
+.function-definition-node {
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	height: 100%;
+	width: 100%;
+}
+
+.react-flow__resize-control.line.function-definition-node-resizer-line{
+	border-color: black;
+}
+
+.react-flow__resize-control.handle.function-definition-node-resizer-edge-dot{
+	background-color: black;
+}
+
+.dot-marker{
+	fill:black;
+	overflow:visible;
+}
+
+.variable-definition-node {
+	border: solid 2px;
+	padding: 5px;
+	margin: 0px;
+}
+
+
 .use-node {
 	border: solid 2px;
 	padding: 5px;
@@ -28,11 +135,39 @@ body {
 	border-style: dotted;
 }
 
+.value-node {
+	border: solid 2px;
+	padding: 5px;
+	margin: 0px;
+	border-radius: 50%;
+}
+
+.group-node{
+	border: solid 2px;
+}
+
 .node-handle.react-flow__handle{
 	background: none;
 	border: none;
 }
+.react-flow__edge-path.multi-edge {
+	stroke: black;
+	stroke-width: 1px;
+	pointer-events: none;
+	cursor: none;
+}
 
+.interactive-edge {
+	stroke-width: 10px;
+	visibility: hidden;
+	pointer-events: all;
+	cursor: pointer;
+}
+
+.edge-label { 
+	visibility: hidden;
+	pointer-events: none;
+}
 
 .label {
 	transition: 3s;
@@ -46,9 +181,125 @@ body {
 
 .main-container {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	margin: 0px;
 	height: 100vh;
 	width: 100vw;
-	overflow-y: hidden;
+	overflow: hidden;
+}
+
+.editor-div{
+	height: 100%;
+	width: 100%;
+	background: #fff;
+	z-index: 99;
+}
+
+.reactflow-div{
+	height: 100%;
+	width: 70%;
+}
+
+/* from https://www.w3schools.com/css/css_tooltip.asp */
+
+.base-node .hover-over-text{
+	visibility: hidden;
+  	background-color: black;
+  	color: #fff;
+  	text-align: left;
+  	padding: 5px 0;
+  	border-radius: 6px;
+
+  	content: " ";
+	position: absolute;
+	left: 100%; /* To the right of the tooltip */
+	margin-top: -5px;
+	border-width: 5px;
+	border-style: solid;
+	border-color: transparent transparent transparent black;
+
+	white-space: nowrap;
+	transition: all 500ms ease-in-out;
 }
+
+.hover-over-text .one-line {
+	display: inline-block
+}
+
+.base-node:hover .hover-over-text{
+	visibility: visible;
+}
+
+.r-code-input {
+	display: flex;
+	flex-direction: row;
+	height: 1.5em;
+	gap: 12px;
+	background-color: white;
+	padding: 15px;
+}
+
+
+
+.legend-element {
+	width: 80%;
+	height: 1em;
+}
+
+.legend-nodes {
+	min-width: 15em;
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	justify-content: flex-start;
+	align-items: center;
+	text-align: center;
+}
+
+.legend-edges {
+	min-width: 15em;
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.legend-edges > *, .legend-nodes > *, .legend-control-elements *  {
+	cursor: pointer;
+	user-select: none;
+}
+
+
+.legend-edge{
+	stroke:black;
+	stroke-width: 1px;
+}
+
+.legend-interactive-edge {
+	pointer-events:all;
+	stroke-width: 20px;
+}
+
+.legend-text{
+	pointer-events: all;
+}
+
+.legend-active {
+	opacity: 0;
+	font-weight: bold;
+}
+
+.legend-passive {
+	opacity: 0.15;
+	font-weight: normal;
+}	
+
+.left-side {
+	height: 100%;
+	width: 30%;
+	display: flex;
+	flex-direction: column;
+	gap: 0px;
+}