refactor(edges): dont add width and height params

xyflow · Jul 24, 2019 · dbb178b · dbb178b
1 parent e496cbe
commit dbb178b
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 10 deletions.
diff --git a/dist/ReactGraph.css b/dist/ReactGraph.css
@@ -60,7 +60,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   pointer-events: none;
   transform-origin: 0 0;
 }

diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
@@ -204,6 +204,10 @@
     return element.data && element.data.source && element.data.target;
   };
   var parseElements = function parseElements(e) {
+    if (isEdge(e)) {
+      return e;
+    }
+
     return _objectSpread2({}, e, {
       __rg: {
         position: e.position,
@@ -32893,6 +32897,7 @@
         className: nodeClasses,
         ref: nodeElement,
         style: {
+          zIndex: selected ? 10 : 3,
           transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
         },
         onClick: function onClick(e) {

diff --git a/example/index.html b/example/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" type="text/css" href="../dist/ReactGraph.css">
   <title>Document</title>
   <style>
     html, body {

diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js
@@ -64,7 +64,7 @@ export default NodeComponent => (props) => {
       <div
         className={nodeClasses}
         ref={nodeElement}
-        style={{ transform: `translate(${position.x}px,${position.y}px)` }}
+        style={{ zIndex: selected ? 10 : 3, transform: `translate(${position.x}px,${position.y}px)` }}
         onClick={(e) => {
           if (isInputTarget(e)) {
             return false;

diff --git a/src/graph-utils.js b/src/graph-utils.js
@@ -1,13 +1,19 @@
 export const isEdge = element => element.data && element.data.source && element.data.target;
 
-export const parseElements = e => ({
-  ...e,
-  __rg: {
-    position: e.position,
-    width: null,
-    height: null
+export const parseElements = e => {
+  if (isEdge(e)) {
+    return e;
   }
-});
+
+  return {
+    ...e,
+    __rg: {
+      position: e.position,
+      width: null,
+      height: null
+    }
+  }
+};
 
 export const separateElements = (res, element) => {
   res.edges = res.edges ? res.edges : [];

diff --git a/src/style.css b/src/style.css
@@ -60,7 +60,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   pointer-events: none;
   transform-origin: 0 0;
 }