Current Supported Skema Version:
- 0.1.6
+ 0.1.7
Current File Version:
@@ -64,11 +64,11 @@ export default {
{ text: 'while1', value: 'https://raw.githubusercontent.com/ml4ai/skema/main/data/gromet/python/while1/FN_0.1.6/while1--Gromet-FN-auto.json' },
{ text: 'cond1', value: 'https://raw.githubusercontent.com/hconhisway/webcrawler/master/cond1--Gromet-FN-auto.json' },
{ text: 'fun1', value: 'https://raw.githubusercontent.com/ml4ai/skema/main/data/gromet/python/fun1/FN_0.1.6/fun1--Gromet-FN-auto.json' },
- { text: 'fun4', value: 'https://raw.githubusercontent.com/ml4ai/skema/main/data/gromet/python/fun4/FN_0.1.6/fun4--Gromet-FN-auto.json' },
+ { text: 'fun4', value: 'https://raw.githubusercontent.com/ml4ai/skema/adarshp/nom_error_handling/data/gromet/python/fun4/FN_0.1.6/fun4--Gromet-FN-auto.json' },
{ text: 'exp1', value: 'https://raw.githubusercontent.com/ml4ai/skema/main/data/gromet/python/exp1/FN_0.1.6/exp1--Gromet-FN-auto.json' },
{ text: 'exp2', value: 'https://gist.githubusercontent.com/jastier/76f7566ac44265707d892a252d8f85ab/raw/2be498c5fb369635725e9e6b493732a5c181ac65/first_matlab.json' },
{ text: 'exp3', value: 'https://raw.githubusercontent.com/ml4ai/skema/main/data/gromet/python/exp3/FN_0.1.6/exp3--Gromet-FN-auto.json' },
- { text: 'fun_default1', value: 'https://raw.githubusercontent.com/ml4ai/skema/main/data/gromet/python/fun_default1/FN_0.1.6/fun_default1--Gromet-FN-auto.json' },
+ { text: 'fun_default1', value: 'https://raw.githubusercontent.com/ml4ai/skema/adarshp/nom_error_handling/data/gromet/python/fun_default1/FN_0.1.6/fun_default1--Gromet-FN-auto.json' },
{ text: 'assign_operator1', value: 'https://raw.githubusercontent.com/ml4ai/skema/main/data/gromet/python/assign_operator1/FN_0.1.6/assign_operator1--Gromet-FN-auto.json' },
],
};
diff --git a/src/utils/click.js b/src/utils/click.js
index 434bc5d..7c45f28 100644
--- a/src/utils/click.js
+++ b/src/utils/click.js
@@ -108,7 +108,7 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
body_num = String(body_num);
const layout = getBoxLayout(fnS[body-1]);
const spaceX = 80;
- const spaceY = 100;
+ const spaceY = 0;
const padding = 90;
const newLabel = String(body_num) + '-' + String(body); // new body_num
drawBox(layout, fnS, newLabel, direction);
@@ -132,7 +132,7 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
console.log(treeLayout);
let differenceX = treeLayout[newLabel][0] - treeLayout[body_num][0];
- let differenceY = treeLayout[newLabel][1] - treeLayout[newLabel][3] / 2 - (treeLayout[body_num][1] - treeLayout[body_num][3] / 2);
+ let differenceY = treeLayout[newLabel][1] - (treeLayout[body_num][1]);
const locationTransform = [differenceX, differenceY];
drawLines(sourceid, "frame" + newLabel, locationTransform, body_num, newLabel, color, direction);
@@ -142,7 +142,7 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
if (nodeID.split('_').length !==2) {
if (nodeID === newLabel) {
d3.select(this)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`)
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5})`)
.attr("opacity", 0);
d3.select(this)
.transition()
@@ -152,7 +152,7 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
d3.select(this)
.transition()
.duration(transitionTime2)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`);
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5})`);
}
}
})
@@ -170,8 +170,8 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 - treeLayout[sourceGID][3] / 2];
- const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - treeLayout[targetGID][3] / 2 - (treeLayout[sourceGID][1] - treeLayout[sourceGID][3] / 2)];
+ newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5];
+ const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - (treeLayout[sourceGID][1])];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const a01 = d3.select(this).attr('sourceid');
const a02 = d3.select(this).attr('targetid');
@@ -187,8 +187,8 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - treeLayout[targetGID][3] / 2 - (treeLayout[sourceGID][1] - treeLayout[sourceGID][3] / 2)];
- newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 - treeLayout[targetGID][3] / 2];
+ const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - (treeLayout[sourceGID][1])];
+ newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 ];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const a01 = d3.select(this).attr('sourceid');
const a02 = d3.select(this).attr('targetid');
@@ -203,7 +203,7 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
nodeID = nodeID.replace("line", "");
nodeID = nodeID.split('_')[0];
d3.select(this)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`)
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 })`)
.style("opacity", 0.38);
} else {
const lineID = nodeID;
@@ -216,7 +216,7 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 - treeLayout[sourceGID][3] / 2];
+ newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const line_label = d3.select(this).select('text').text();
updateLinesDashArrow(treeLayout, sourceGID, targetGID, "black", line_label, lineID);
@@ -227,7 +227,7 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 - treeLayout[targetGID][3] / 2];
+ newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const line_label = d3.select(this).select('text').text();
updateLinesDashArrow(treeLayout, sourceGID, targetGID, "black", line_label, lineID);
@@ -238,7 +238,7 @@ export function handleClick(fnS, body, body_num, sourceid, color, clicked, direc
d3.select(this)
.transition()
.duration(720)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`);
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5})`);
}
}
})
diff --git a/src/utils/clickCond.js b/src/utils/clickCond.js
index 96a708d..d3365c7 100644
--- a/src/utils/clickCond.js
+++ b/src/utils/clickCond.js
@@ -111,7 +111,7 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
layoutElse = getBoxLayout(fnS[body_else-1]);
}
const spaceX = 80;
- const spaceY = 100;
+ const spaceY = 0;
const padding = 90;
const newLabelCond = String(body_num) + '-' + String(cond); // new body_num for Cond
const newLabelIf = String(newLabelCond) + '-' + String(body_if); // new body_num for if
@@ -142,7 +142,7 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
console.log(treeLayout);
console.log()
let differenceX = treeLayout[newLabelCond][0] - treeLayout[body_num][0];
- let differenceY = treeLayout[newLabelCond][1] - treeLayout[newLabelCond][3] / 2 - (treeLayout[body_num][1] - treeLayout[body_num][3] / 2);
+ let differenceY = treeLayout[newLabelCond][1] - (treeLayout[body_num][1]);
const locationTransform = [differenceX, differenceY];
drawLines(sourceid, "frame" + newLabelCond, locationTransform, body_num, newLabelCond, color, direction);
@@ -166,8 +166,8 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 - treeLayout[sourceGID][3] / 2];
- const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - treeLayout[targetGID][3] / 2 - (treeLayout[sourceGID][1] - treeLayout[sourceGID][3] / 2)];
+ newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5];
+ const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - (treeLayout[sourceGID][1] )];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const a01 = d3.select(this).attr('sourceid');
const a02 = d3.select(this).attr('targetid');
@@ -186,8 +186,8 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 - treeLayout[targetGID][3] / 2];
- const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - treeLayout[targetGID][3] / 2 - (treeLayout[sourceGID][1] - treeLayout[sourceGID][3] / 2)];
+ newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 ];
+ const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - (treeLayout[sourceGID][1])];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const a01 = d3.select(this).attr('sourceid');
const a02 = d3.select(this).attr('targetid');
@@ -205,7 +205,7 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
nodeID = nodeID.replace("line", "");
nodeID = nodeID.split('_')[0];
d3.select(this)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`)
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5})`)
.style("opacity", 0.38);
} else {
const lineID = nodeID;
@@ -218,7 +218,7 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 - treeLayout[sourceGID][3] / 2];
+ newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 ];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const line_label = d3.select(this).select('text').text();
const currentDirection = d3.select("#boxid" + targetGID).attr("direction");
@@ -230,7 +230,7 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 - treeLayout[targetGID][3] / 2];
+ newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 ];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const line_label = d3.select(this).select('text').text();
const currentDirection = d3.select("#boxid" + targetGID).attr("direction");
@@ -242,12 +242,12 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
d3.select(this)
// .transition()
// .duration(720)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`);
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 })`);
}
} else {
if (nodeID === newLabelCond || nodeID === newLabelElse || nodeID === newLabelIf) {
d3.select(this)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`)
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 })`)
.attr("opacity", 0);
d3.select(this)
.transition()
@@ -257,7 +257,7 @@ export function handleClickCond(fnS, cond, body_if, body_else, body_num, sourcei
d3.select(this)
.transition()
.duration(transitionTime2)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`);
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 })`);
}
}
}
@@ -414,7 +414,7 @@ export function handleClickLoop(fnS, cond, pre, body, post, body_num, sourceid,
console.log(treeLayout);
console.log()
let differenceX = treeLayout[newLabelCond][0] - treeLayout[body_num][0];
- let differenceY = treeLayout[newLabelCond][1] - treeLayout[newLabelCond][3] / 2 - (treeLayout[body_num][1] - treeLayout[body_num][3] / 2);
+ let differenceY = treeLayout[newLabelCond][1] - (treeLayout[body_num][1] );
const locationTransform = [differenceX, differenceY];
drawLines(sourceid, "frame" + newLabelCond, locationTransform, body_num, newLabelCond, color, direction);
@@ -443,8 +443,8 @@ export function handleClickLoop(fnS, cond, pre, body, post, body_num, sourceid,
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 - treeLayout[sourceGID][3] / 2];
- const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - treeLayout[targetGID][3] / 2 - (treeLayout[sourceGID][1] - treeLayout[sourceGID][3] / 2)];
+ newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 ];
+ const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - (treeLayout[sourceGID][1] )];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const a01 = d3.select(this).attr('sourceid');
const a02 = d3.select(this).attr('targetid');
@@ -463,8 +463,8 @@ export function handleClickLoop(fnS, cond, pre, body, post, body_num, sourceid,
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 - treeLayout[targetGID][3] / 2];
- const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - treeLayout[targetGID][3] / 2 - (treeLayout[sourceGID][1] - treeLayout[sourceGID][3] / 2)];
+ newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5];
+ const locationTransformForThis = [treeLayout[targetGID][0] - treeLayout[sourceGID][0], treeLayout[targetGID][1] - (treeLayout[sourceGID][1])];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const a01 = d3.select(this).attr('sourceid');
const a02 = d3.select(this).attr('targetid');
@@ -482,7 +482,7 @@ export function handleClickLoop(fnS, cond, pre, body, post, body_num, sourceid,
nodeID = nodeID.replace("line", "");
nodeID = nodeID.split('_')[0];
d3.select(this)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`)
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 })`)
.style("opacity", 0.38);
} else {
const lineID = nodeID;
@@ -495,7 +495,7 @@ export function handleClickLoop(fnS, cond, pre, body, post, body_num, sourceid,
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 - treeLayout[sourceGID][3] / 2];
+ newTransArray = [treeLayout[sourceGID][0] + padding, treeLayout[sourceGID][1] + padding *7.5 ];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const line_label = d3.select(this).select('text').text();
const currentDirection = d3.select("#boxid" + targetGID).attr("direction");
@@ -507,7 +507,7 @@ export function handleClickLoop(fnS, cond, pre, body, post, body_num, sourceid,
const translateValues = translatePart.split(",");
const transformArray = translateValues.map(Number);
let newTransArray = [];
- newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 - treeLayout[targetGID][3] / 2];
+ newTransArray = [treeLayout[targetGID][0] + padding, treeLayout[targetGID][1] + padding *7.5 ];
if (transformArray[1]!==newTransArray[1] || transformArray[0]!==newTransArray[0]) {
const line_label = d3.select(this).select('text').text();
const currentDirection = d3.select("#boxid" + targetGID).attr("direction");
@@ -519,12 +519,12 @@ export function handleClickLoop(fnS, cond, pre, body, post, body_num, sourceid,
d3.select(this)
// .transition()
// .duration(720)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`);
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 })`);
}
} else {
if (nodeID === newLabelCond || nodeID === newLabelPre || nodeID === newLabelBody || nodeID === newLabelPost) {
d3.select(this)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`)
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 })`)
.attr("opacity", 0);
d3.select(this)
.transition()
@@ -534,7 +534,7 @@ export function handleClickLoop(fnS, cond, pre, body, post, body_num, sourceid,
d3.select(this)
.transition()
.duration(transitionTime2)
- .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 - treeLayout[nodeID][3] / 2})`);
+ .attr("transform", `translate(${treeLayout[nodeID][0] + padding},${treeLayout[nodeID][1] + padding *7.5 })`);
}
}
}
diff --git a/src/utils/drawlines.js b/src/utils/drawlines.js
index 9d80156..daa4c35 100644
--- a/src/utils/drawlines.js
+++ b/src/utils/drawlines.js
@@ -651,6 +651,8 @@ export function drawLinesDashArrow(treeLayout, sourceID, targetID, color, label,
sourceY = Number(d3.select("#" + sourceFrame).attr('y')) + Number(d3.select("#" + sourceFrame).attr('height'));
dx = treeLayout[targetID][0] - treeLayout[sourceID][0];
dy = treeLayout[targetID][1] - treeLayout[sourceID][1] - Number(d3.select("#" + sourceFrame).attr('height'));
+ targetX = sourceX + dx;
+ targetY = sourceY + dy;
}
const g = d3.select('svg').select('#sumGroup').append("g").attr('id', 'line' + String(sourceID) + '_' + String(targetID)).attr("line-type", "dashed").attr('class', 'drawer');
const paddingL = 17;
@@ -700,6 +702,8 @@ export function updateLinesDashArrow(treeLayout, sourceID, targetID, color, labe
sourceY = Number(d3.select("#" + sourceFrame).attr('y')) + Number(d3.select("#" + sourceFrame).attr('height'));
dx = treeLayout[targetID][0] - treeLayout[sourceID][0];
dy = treeLayout[targetID][1] - treeLayout[sourceID][1] - Number(d3.select("#" + sourceFrame).attr('height'));
+ targetX = sourceX + dx;
+ targetY = sourceY + dy;
}
const g = d3.select('svg').select('#sumGroup').select("#" + lineID);
g.select("line")
diff --git a/src/utils/multitree.js b/src/utils/multitree.js
index 0b11340..5ea294a 100644
--- a/src/utils/multitree.js
+++ b/src/utils/multitree.js
@@ -3,6 +3,7 @@ import { tree } from "d3";
import flextree from "./flextree";
import cloneDeep from 'lodash/cloneDeep';
import { layout } from "dagre";
+import { loopOverHierarchy } from "./utilities";
export default function getMultiTree(hierarchies) {
let hierarchies_copy = cloneDeep(hierarchies);
@@ -81,6 +82,7 @@ function processTree(hierarchies) {
function findAllSubtrees(root) {
let parentNodesRight = new Set();
let parentNodesDown = new Set();
+ const spacing = 100;
setParents(root, null);
dfs(root, parentNodesRight, parentNodesDown);
const parentNodesMix = new Set();
@@ -101,6 +103,11 @@ function processTree(hierarchies) {
clone.size[0] = clone.size[1];
clone.size[1] = clonex;
}
+ loopOverHierarchy(clone, d => {
+ if (Array.isArray(d.size)) {
+ d.size[1] += spacing;
+ }
+ });
const flexLayout = flextree({ spacing: 80 });
const tree = flexLayout.hierarchy(clone);
var treeData = flexLayout(tree);
@@ -111,53 +118,85 @@ function processTree(hierarchies) {
});
var treeLayout = {};
treeData.each(d => {
- treeLayout[d.data.oName] = [d.x, d.y, d.data.size[1], d.data.size[0] * 1];
+ treeLayout[d.data.oName] = [d.x, d.y - d.data.size[0] / 2, d.data.size[1], d.data.size[0] * 1];
});
const newBoundingbox = findBoundingBox(treeLayout);
- node.size = [newBoundingbox.width, newBoundingbox.height];
- node._size = [newBoundingbox.height, newBoundingbox.width];
+ node._size = [newBoundingbox.width, newBoundingbox.height];
+ node.size = [newBoundingbox.height, newBoundingbox.width];
+ console.log(treeLayout, "test");
return treeLayout;
}),
down: Array.from(parentNodesDown).map(node => {
let clone = cloneDeep(node);
delete node.children;
removeRightChildren(clone);
- if (node.direction==="right") {
+ loopOverHierarchy(clone, d => {
+ if (Array.isArray(d.size)) {
+ if (!d._size) d._size = d.size.slice();
+ d.size = [d.size[1], d.size[0]];
+ }
+ });
+ loopOverHierarchy(clone, d => {
+ if (Array.isArray(d.size)) {
+ d.size[1] += spacing;
+ }
+ });
+ if (node.direction==="down") {
const clonex = clone.size[0];
clone.size[0] = clone.size[1];
clone.size[1] = clonex;
}
- const flexLayout = flextree({ spacing: 80 });
+ const flexLayout = flextree({ spacing: 120 });
const tree = flexLayout.hierarchy(clone);
var treeData = flexLayout(tree);
var treeLayout = {};
treeData.each(d => {
- treeLayout[d.data.oName] = [d.x, d.y, d.data.size[0] * 1, d.data.size[1]];
+ treeLayout[d.data.oName] = [d.x - d.data.size[0] / 2, d.y, d.data.size[0] * 1, d.data.size[1]];
});
const newBoundingbox = findBoundingBox(treeLayout);
- node.size = [newBoundingbox.width, newBoundingbox.height];
- node._size = [newBoundingbox.height, newBoundingbox.width];
+ node._size = [newBoundingbox.width, newBoundingbox.height];
+ node.size = [newBoundingbox.height, newBoundingbox.width];
+
return treeLayout;
}),
mix: Array.from(parentNodesMix).map(node => {
let cloneRight = cloneDeep(node);
delete node.children;
let cloneDown = cloneDeep(cloneRight);
+ loopOverHierarchy(cloneDown, d => {
+ if (Array.isArray(d.size)) {
+ if (!d._size) d._size = d.size.slice();
+ d.size = [d.size[1], d.size[0]];
+ }
+ });
+ loopOverHierarchy(cloneDown, d => {
+ if (Array.isArray(d.size)) {
+ d.size[1] += spacing;
+ }
+ });
+ loopOverHierarchy(cloneRight, d => {
+ if (Array.isArray(d.size)) {
+ d.size[1] += spacing;
+ }
+ });
removeRightChildren(cloneDown);
removeDownChildren(cloneRight);
- const flexLayoutDown = flextree({ spacing: 80 });
+ const flexLayoutDown = flextree({ spacing: 120 });
const flexLayoutRight = flextree({ spacing: 80 });
const treeDown = flexLayoutDown.hierarchy(cloneDown);
const treeRight = flexLayoutRight.hierarchy(cloneRight);
- if (node.direction==="right") {
- const cloneDownx = cloneDown.size[0];
- cloneDown.size[0] = cloneDown.size[1];
- cloneDown.size[1] = cloneDownx;
- }
+ // if (node.direction==="right") {
+ // const cloneDownx = cloneDown.size[0];
+ // cloneDown.size[0] = cloneDown.size[1];
+ // cloneDown.size[1] = cloneDownx;
+ // }
if (node.direction==="down") {
const cloneRightx = cloneRight.size[0];
cloneRight.size[0] = cloneRight.size[1];
cloneRight.size[1] = cloneRightx;
+ const cloneDownx = cloneDown.size[0];
+ cloneDown.size[0] = cloneDown.size[1];
+ cloneDown.size[1] = cloneDownx;
}
var treeDataDown = flexLayoutDown(treeDown);
var treeDataRight = flexLayoutDown(treeRight);
@@ -168,11 +207,11 @@ function processTree(hierarchies) {
});
var treeLayoutDown = {};
treeDataDown.each(d => {
- treeLayoutDown[d.data.oName] = [d.x, d.y, d.data.size[0], d.data.size[1] * 1];
+ treeLayoutDown[d.data.oName] = [d.x - d.data.size[0] / 2, d.y, d.data.size[0], d.data.size[1] * 1];
});
var treeLayoutRight = {};
treeDataRight.each(d => {
- treeLayoutRight[d.data.oName] = [d.x, d.y, d.data.size[1], d.data.size[0] * 1];
+ treeLayoutRight[d.data.oName] = [d.x, d.y - d.data.size[0] / 2, d.data.size[1], d.data.size[0] * 1];
});
const differenceX = treeLayoutRight[node.oName][0] - treeLayoutDown[node.oName][0];
const differenceY = treeLayoutRight[node.oName][1] - treeLayoutDown[node.oName][1];
@@ -182,8 +221,8 @@ function processTree(hierarchies) {
}
const mergedLayout = { ...treeLayoutRight, ...treeLayoutDown };
const newBoundingbox = findBoundingBox(mergedLayout);
- node.size = [newBoundingbox.width, newBoundingbox.height];
- node._size = [newBoundingbox.height, newBoundingbox.width];
+ node._size = [newBoundingbox.width, newBoundingbox.height];
+ node.size = [newBoundingbox.height, newBoundingbox.width];
console.log(newBoundingbox, "test");
return mergedLayout;
}),
diff --git a/src/utils/utilities.js b/src/utils/utilities.js
index faecf59..e99ae99 100644
--- a/src/utils/utilities.js
+++ b/src/utils/utilities.js
@@ -13,7 +13,7 @@ export function arraysAreEqual(array1, array2) {
return true;
}
-function loopOverHierarchy(d, callback) {
+export function loopOverHierarchy(d, callback) {
callback(d);
if (d.children) d.children.forEach(c => loopOverHierarchy(c, callback));
if (d._children) d._children.forEach(c => loopOverHierarchy(c, callback));