nodelayout - npm Package Compare versions

Comparing version 1.2.6 to 1.2.7

package.json

 {
   "name": "nodelayout",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "For node Layout.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/index.js

 import * as d3 from "d3";
 import uuid from "./utils/uuid";
-import deepProxy from "./utils/deepProxy";
 import renderOptionList from "./optionList";
@@ -11,7 +10,2 @@ import { defaultIcon, deletIcon } from "./utils/icon";
 let isInit = true;
-let nodeData = deepProxy((data) => {
-  renderNodes({
-    data
-  });
-});
 
@@ -22,3 +16,3 @@ // circle radius
 const svgWidth = 1000;
-const svgHeight = 400;
+const svgHeight = 800;
 // the x,y change when zoom
@@ -36,6 +30,8 @@ let zoomX = 0;
 let nodeType = "circle";
+// offset size
+let leftSize = 0;
+let topSize = 0;
 
-const connectData = deepProxy((data) => {
-  renderLines(data);
-});
+let nodeData = [];
+let connectData = [];
 
@@ -49,22 +45,2 @@ // main circle drag
 
-function renderNodes (params = {}) {
-  d3.selectAll(".unit-dis").remove();
-  objectWrap = gWrap.selectAll("g")
-    .data(params.data)
-    .enter()
-    .append("g")
-    .attr("id", d => d.id)
-    .attr("class", "unit-dis")
-    .call(drag)
-    .on("click", handleClick)
-    .attr('transform', (d) => isInit ? `translate(0, 0)` : `translate(${d.x}, ${d.y})` );
-  if (isInit) {
-    objectWrap.transition()
-      .duration(750)
-      .delay(function(d, i) { return i * 10; })
-      .attr('transform', (d) => `translate(${d.x}, ${d.y})`);
-  }
-  renderMain();
-}
-
 // on click
@@ -88,3 +64,3 @@ function handleClick (event, d) {
   d.yp = d.y - (d.dy - event.sourceEvent.y);
-  connectData.data.forEach(item => {
+  connectData.forEach(item => {
     const index = item.source === d.id ? item.startIndex : item.endIndex;
@@ -101,3 +77,3 @@ const xValue = Math.cos(Math.PI / 180 * index * 90) * mainCirceRadius;
   });
-  renderLines(connectData.data);
+  renderLines({ data: connectData });
   d3.select($this).attr("transform", () => `translate(${d.xp}, ${d.yp})`);
@@ -111,7 +87,27 @@ }
 
+function renderNodes (params = {}) {
+  d3.selectAll(".unit-dis").remove();
+  objectWrap = gWrap.selectAll("g")
+    .data(params.data)
+    .enter()
+    .append("g")
+    .attr("id", d => d.id)
+    .attr("class", "unit-dis")
+    .call(drag)
+    .on("click", handleClick)
+    .attr('transform', (d) => isInit ? `translate(0, 0)` : `translate(${d.x}, ${d.y})` );
+  if (isInit) {
+    objectWrap.transition()
+      .duration(750)
+      .delay(function(d, i) { return i * 10; })
+      .attr('transform', (d) => `translate(${d.x}, ${d.y})`);
+  }
+  renderMain();
+}
+
 // draw connect lines
-function renderLines (data) {
+function renderLines (params = {}) {
   pathWrap.selectAll(".connect-fixed-line").remove();
   const allPath = pathWrap.selectAll(".connect-fixed-line")
-    .data(data)
+    .data(params.data)
     .enter()
@@ -136,6 +132,8 @@ .append("path")
 function handleDeleteNode(event, d) {
-  nodeData.data = nodeData.data.filter (item => d.id !== item.id);
-  connectData.data = connectData.data.filter (item => {
+  nodeData = nodeData.filter (item => d.id !== item.id);
+  renderNodes({ data: nodeData });
+  connectData = connectData.filter (item => {
     return item.source !== d.id && item.target !== d.id;
-  })
+  });
+  renderLines({ data: connectData });
 }
@@ -205,2 +203,3 @@
       });
+      renderLines({ data: connectData });
     }
@@ -274,2 +273,5 @@ }
   const wrap = d3.select(`#${params.id}`).attr("height", svgHeight);
+  const queryWrap = document.querySelector(`#${params.id}`)
+  leftSize = queryWrap.offsetLeft
+  topSize = queryWrap.offsetTop
   connectType = params.connectType || "line"
@@ -317,3 +319,3 @@ nodeType = params.nodeType || "circle"
   if (params.onPathClick) onPathClick = params.onPathClick;
-  nodeData.data = params.nodes.map((item, index) => {
+  /* nodeData = params.nodes.map((item, index) => {
     return {
@@ -325,6 +327,19 @@ id: item.id,
     };
+  }); */
+  nodeData = params.nodes.map((item, index) => {
+    return {
+      id: item.id,
+      text: item.title,
+      x: 100 * index + 200,
+      y: svgHeight/5
+    };
   });
+  nodeData[0].x = 700;
+  nodeData[0].y = svgHeight/2 + 100;
+  renderNodes({ data: nodeData });
   // node connect line
   if (params.lines) {
-    params.lines.forEach(item => {
+    params.lines.forEach((item, index) => {
+      const startIndex = 3
+      const endIndex = 1
       connectData.push({
@@ -334,10 +349,11 @@ id: uuid(),
         target: item.target,
-        startIndex: 0,
-        endIndex: 2,
-        x1: nodeData.data[0].x + Math.cos(Math.PI / 180 * 2 * 90) * mainCirceRadius,
-        y1: nodeData.data[0].y + Math.sin(Math.PI / 180 * 0 * 90) * mainCirceRadius,
-        x2: nodeData.data[1].x + Math.cos(Math.PI / 180 * 2 * 90) * mainCirceRadius,
-        y2: nodeData.data[1].y + Math.sin(Math.PI / 180 * 0 * 90) * mainCirceRadius
+        startIndex: startIndex,
+        endIndex: endIndex,
+        x1: nodeData[0].x + Math.cos(Math.PI / 180 * startIndex * 90) * mainCirceRadius,
+        y1: nodeData[0].y + Math.sin(Math.PI / 180 * startIndex * 90) * mainCirceRadius,
+        x2: nodeData[index + 1].x + Math.cos(Math.PI / 180 * endIndex * 90) * mainCirceRadius,
+        y2: nodeData[index + 1].y + Math.sin(Math.PI / 180 * endIndex * 90) * mainCirceRadius
       });
     });
+    renderLines({ data: connectData });
   }
@@ -402,12 +418,13 @@ // arrow
 function add (params = {}) {
-  const x = params.x || svgWidth/10 + nodeData.data.length * 200;
-  const y = params.y || svgHeight/2;
+  const x = Math.random() * 1000;
+  const y = Math.random() * 600 + 100;
   const k = zoomK === 0 ? 1 : zoomK;
   nodeData.push({
     id: uuid(),
-    text: params.title || params + (nodeData.data.length + 1),
-    x: (x - zoomX) / k,
-    y: (y - zoomY) / k
+    text: params.title || params + (nodeData.length + 1),
+    x: (x - zoomX) / k - leftSize,
+    y: (y - zoomY) / k - topSize
   });
+  renderNodes({ data: nodeData });
 }
 export { init, add };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1599202

increased by0.16%

Lines of code

8863

increased by0.26%

No dependency changes