Skip to content
This repository has been archived by the owner on Jul 31, 2024. It is now read-only.

Commit

Permalink
f-dag-app plotting link in scaled version
Browse files Browse the repository at this point in the history
  • Loading branch information
@vikas-cldcvr
vikas-cldcvr committed Jun 13, 2024
1 parent 967323d commit 744f572
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 52 deletions.
92 changes: 47 additions & 45 deletions packages/flow-lineage/src/components/f-dag/link-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,36 @@ export function startPlottingLine(this: FDag, event: MouseEvent) {
n.style.pointerEvents = "none";
});
const circle = event.currentTarget as HTMLElement;
const rect = circle.getBoundingClientRect();
const dagRect = this.getBoundingClientRect();
const svg = d3.select(this.svgElement.value!);
const circleX = rect.left - dagRect.left - this.viewPortTranslate.x;
const circleY = rect.top - dagRect.top - this.viewPortTranslate.y;
const elementId = circle.dataset.nodeId;

let x1 = event.clientX - dagRect.left - this.viewPortTranslate.x;
let y1 = event.clientY - dagRect.top - this.viewPortTranslate.y;
const elementObject = this.getElement(elementId!);
let x1 = elementObject.x;
let y1 = elementObject.y;

if (Math.abs(x1 - circleX) <= 12) {
let offset = 8;
if (circle.classList.contains("right")) {
offset = 0;
}
x1 = circleX + offset;
if (circle.classList.contains("right")) {
x1! += elementObject.width!;
y1! += event.offsetY;
}
if (circle.classList.contains("bottom")) {
y1! += elementObject.height!;
x1! += event.offsetX;
}
if (circle.classList.contains("left")) {
y1! += event.offsetY;
}
if (circle.classList.contains("top")) {
x1! += event.offsetX;
}

if (Math.abs(y1 - circleY) <= 12) {
let offset = 8;
if (circle.classList.contains("bottom")) {
offset = 0;
}
y1 = circleY + offset;
let x2 = x1;
let y2 = y1;
if (circle.classList.contains("bottom") || circle.classList.contains("top")) {
y2! += 8;
}
if (circle.classList.contains("left") || circle.classList.contains("right")) {
x2! += 8;
}
const svg = d3.select(this.svgElement.value!);

const direction =
circle.classList.contains("right") || circle.classList.contains("left")
Expand All @@ -45,8 +51,8 @@ export function startPlottingLine(this: FDag, event: MouseEvent) {
elementId: circle.dataset.nodeId!
},
to: {
x: event.clientX - dagRect.left - this.viewPortTranslate.x,
y: event.clientY - dagRect.top - this.viewPortTranslate.y,
x: x2,
y: y2,
elementId: ``
},
direction
Expand Down Expand Up @@ -95,10 +101,9 @@ export function startPlottingLine(this: FDag, event: MouseEvent) {
}
export function updateLinePath(this: FDag, event: MouseEvent) {
if (event.buttons === 1 && this.currentLine) {
const dagRect = this.getBoundingClientRect();
this.currentLine.attr("d", d => {
d.to.x = event.clientX - dagRect.left - this.viewPortTranslate.x;
d.to.y = event.clientY - dagRect.top - this.viewPortTranslate.y;
d.to.x! += event.movementX * (1 / this.scale);
d.to.y! += event.movementY * (1 / this.scale);

const points: CoOrdinates[] = [];
points.push({
Expand All @@ -122,8 +127,8 @@ export function updateLinePath(this: FDag, event: MouseEvent) {
this.currentArrow = undefined;

if (event.buttons === 1) {
this.viewPortTranslate.x += event.movementX;
this.viewPortTranslate.y += event.movementY;
this.viewPortTranslate.x += event.movementX * (1 / this.scale);
this.viewPortTranslate.y += event.movementY * (1 / this.scale);
this.backgroundPattern.setAttribute(
"patternTransform",
`translate(${this.viewPortTranslate.x * this.scale},${
Expand All @@ -136,8 +141,7 @@ export function updateLinePath(this: FDag, event: MouseEvent) {
}
export function dropLine(this: FDag, event: MouseEvent) {
const circle = event.currentTarget as HTMLElement;
const rect = circle.getBoundingClientRect();
const dagRect = this.getBoundingClientRect();

this.allGroupsAndNodes?.forEach(n => {
n.style.pointerEvents = "all";
});
Expand All @@ -146,25 +150,23 @@ export function dropLine(this: FDag, event: MouseEvent) {
const fromNodeId = linkElement.attr("id").replace(/(->)$/, "");
const toNodeId = circle.dataset.nodeId!;

let x2 = event.clientX - dagRect.left - this.viewPortTranslate.x;
let y2 = event.clientY - dagRect.top - this.viewPortTranslate.y;

const circleX2 = rect.left - dagRect.left - this.viewPortTranslate.x;
const circleY2 = rect.top - dagRect.top - this.viewPortTranslate.y;
const elementObject = this.getElement(toNodeId);
let x2 = elementObject.x;
let y2 = elementObject.y;

if (Math.abs(y2 - circleY2) <= 12) {
let offset = 8;
if (circle.classList.contains("bottom")) {
offset = 0;
}
y2 = circleY2 + offset;
if (circle.classList.contains("right")) {
x2! += elementObject.width!;
y2! += event.offsetY;
}
if (Math.abs(x2 - circleX2) <= 12) {
let offset = 8;
if (circle.classList.contains("right")) {
offset = 0;
}
x2 = circleX2 + offset;
if (circle.classList.contains("bottom")) {
y2! += elementObject.height!;
x2! += event.offsetX;
}
if (circle.classList.contains("left")) {
y2! += event.offsetY;
}
if (circle.classList.contains("top")) {
x2! += event.offsetX;
}

this.currentLine
Expand Down
16 changes: 9 additions & 7 deletions packages/flow-lineage/src/components/f-dag/node-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,12 @@ export function moveElement(this: FDag, nodeElement: HTMLElement, event: MouseEv

nodeElement.style.setProperty(
"transform",
`translate(${translateX + event.movementX}px, ${translateY + event.movementY}px)`
`translate(${translateX + event.movementX * (1 / this.scale)}px, ${
translateY + event.movementY * (1 / this.scale)
}px)`
);
nodeElement.dataset.lastTranslateX = `${translateX + event.movementX}`;
nodeElement.dataset.lastTranslateY = `${translateY + event.movementY}`;
nodeElement.dataset.lastTranslateX = `${translateX + event.movementX * (1 / this.scale)}`;
nodeElement.dataset.lastTranslateY = `${translateY + event.movementY * (1 / this.scale)}`;
const fromLines = d3.selectAll<SVGPathElement, FDagLink>(
`.dag-line[id^="${nodeElement.getAttribute("id")}->"]`
);
Expand All @@ -46,8 +48,8 @@ export function moveElement(this: FDag, nodeElement: HTMLElement, event: MouseEv
return {
...d,
from: {
x: (d.from.x += event.movementX),
y: (d.from.y += event.movementY),
x: (d.from.x += event.movementX * (1 / this.scale)),
y: (d.from.y += event.movementY * (1 / this.scale)),
elementId: d.from.elementId
}
};
Expand Down Expand Up @@ -81,8 +83,8 @@ export function moveElement(this: FDag, nodeElement: HTMLElement, event: MouseEv
return {
...d,
to: {
x: (d.to.x += event.movementX),
y: (d.to.y += event.movementY),
x: (d.to.x += event.movementX * (1 / this.scale)),
y: (d.to.y += event.movementY * (1 / this.scale)),
elementId: d.to.elementId
}
};
Expand Down

0 comments on commit 744f572

Please sign in to comment.