Skip to content

Commit

Permalink
fixed layout bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@hconhisway
hconhisway committed Sep 28, 2023
1 parent 45a5330 commit 3826c54
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 59 deletions.
10 changes: 5 additions & 5 deletions src/components/Moviz.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,17 @@
@change="handleFileChange"
style="display: none;"
/>
<button class="btn btn-primary" @click="submitUrl">Submit</button>
<button @click="triggerFileInput">
选择文件
Choose File
</button>
<button class="btn btn-primary" @click="submitUrl">Submit</button>
<button class="btn btn-primary download-button" @click="downloadSVG" >downloadSVG</button>
</div>
<div class="row">
<div id="svg-container" :style="blockStyle">
<div class="version-text">
Current Supported Skema Version:
<span class="highlight">0.1.6</span>
<span class="highlight">0.1.7</span>
</div>
<div class="version-text">
Current File Version:
Expand Down Expand Up @@ -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' },
],
};
Expand Down
24 changes: 12 additions & 12 deletions src/utils/click.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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()
Expand All @@ -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})`);
}
}
})
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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})`);
}
}
})
Expand Down
Loading

0 comments on commit 3826c54

Please sign in to comment.