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 height and width made optional
Browse files Browse the repository at this point in the history
  • Loading branch information
@vikas-cldcvr
vikas-cldcvr committed Jun 10, 2024
1 parent c8c5f8a commit d1901dd
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 86 deletions.
75 changes: 47 additions & 28 deletions packages/flow-lineage/src/components/f-dag/f-dag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ injectCss("f-dag", globalStyle);
// Renders attribute names of parent element to textContent
export type HierarchyNode = {
id: string;
height: number;
width: number;
height?: number;
width?: number;
group?: string;
type: "group" | "node";
children: HierarchyNode[];
Expand Down Expand Up @@ -123,6 +123,13 @@ export class FDag extends FRoot {
y: 0
};

get defaultElementWidth(): number {
return this.config.defaultNodeSize?.width ?? 50;
}
get defaultElementHeight(): number {
return this.config.defaultNodeSize?.height ?? 50;
}

svgElement: Ref<SVGSVGElement> = createRef();
currentLine?: d3.Selection<SVGPathElement, FDagLink, null, undefined>;
currentArrow?: d3.Selection<SVGTextPathElement, FDagLink, null, undefined>;
Expand Down Expand Up @@ -158,8 +165,6 @@ export class FDag extends FRoot {

const rootNodes = buildHierarchy(this.config);

const [defaultWidth, defaultHeight] = [100, 100];

const positionNodes = (
elements: HierarchyNode[],
x: number,
Expand Down Expand Up @@ -199,8 +204,8 @@ export class FDag extends FRoot {
const minY = y;
const calculateCords = (ns: HierarchyNode[]) => {
const nexts: HierarchyNode[] = [];
let maxWidth = defaultWidth;
let maxHeight = defaultHeight;
let maxWidth = this.defaultElementWidth;
let maxHeight = this.defaultElementHeight;
ns.forEach(n => {
const elementObject = this.getElement(n.id);
if (!elementObject.x && !elementObject.y) {
Expand All @@ -218,6 +223,13 @@ export class FDag extends FRoot {

elementObject.width = width;
elementObject.height = height + 20;
} else {
if (!elementObject.width) {
elementObject.width = this.defaultElementWidth;
}
if (!elementObject.height) {
elementObject.height = this.defaultElementHeight;
}
}
if (x + elementObject.width > maxX) {
maxX = x + elementObject.width;
Expand Down Expand Up @@ -337,8 +349,8 @@ export class FDag extends FRoot {
return html`<f-div
align="top-left"
variant="curved"
.height=${g.height + "px"}
.width=${g.width + "px"}
.height=${((g as FDagElement).height ?? this.defaultElementHeight) + "px"}
.width=${((g as FDagElement).width ?? this.defaultElementWidth) + "px"}
data-group=${ifDefined(g.group)}
class="dag-node"
data-node-type="group"
Expand All @@ -348,7 +360,14 @@ export class FDag extends FRoot {
@mousemove=${this.dragNode}
@mouseup=${this.updateNodePosition}
>
<f-div gap="medium" height="hug-content" clickable state="secondary" padding="medium">
<f-div
gap="medium"
class="group-header"
height="hug-content"
clickable
state="secondary"
padding="medium"
>
<f-icon .source=${g.icon}></f-icon>
<f-text size="small" weight="medium">${g.label}</f-text>
</f-div>
Expand Down Expand Up @@ -395,38 +414,38 @@ export class FDag extends FRoot {
d.to.x = toElement.x;
d.to.y = toElement.y;
if (this.config.layoutDirection === "horizontal") {
d.linkDirection = "horizontal";
d.direction = "horizontal";
if (d.to.x! > d.from.x!) {
d.from.x! += fromElement.width;
d.from.x! += fromElement.width!;
d.from.y! += randomIntFromInterval(
fromElement.height / 3,
fromElement.height * (2 / 3)
fromElement.height! / 3,
fromElement.height! * (2 / 3)
);
d.to.y! += randomIntFromInterval(toElement.height / 3, toElement.height * (2 / 3));
d.to.y! += randomIntFromInterval(toElement.height! / 3, toElement.height! * (2 / 3));
} else {
d.from.y! += randomIntFromInterval(
fromElement.height / 3,
fromElement.height * (2 / 3)
fromElement.height! / 3,
fromElement.height! * (2 / 3)
);
d.to.x! += fromElement.width;
d.to.y! += randomIntFromInterval(toElement.height / 3, toElement.height * (2 / 3));
d.to.x! += fromElement.width!;
d.to.y! += randomIntFromInterval(toElement.height! / 3, toElement.height! * (2 / 3));
}
} else {
d.linkDirection = "vertical";
d.direction = "vertical";
if (d.to.y! > d.from.y!) {
d.from.x! += randomIntFromInterval(
fromElement.width / 3,
fromElement.width * (2 / 3)
fromElement.width! / 3,
fromElement.width! * (2 / 3)
);
d.from.y! += fromElement.height;
d.to.x! += randomIntFromInterval(toElement.width / 3, toElement.width * (2 / 3));
d.from.y! += fromElement.height!;
d.to.x! += randomIntFromInterval(toElement.width! / 3, toElement.width! * (2 / 3));
} else {
d.from.x! += randomIntFromInterval(
fromElement.width / 3,
fromElement.width * (2 / 3)
fromElement.width! / 3,
fromElement.width! * (2 / 3)
);
d.to.x! += randomIntFromInterval(toElement.width / 3, toElement.width * (2 / 3));
d.to.y! += toElement.height;
d.to.x! += randomIntFromInterval(toElement.width! / 3, toElement.width! * (2 / 3));
d.to.y! += toElement.height!;
}
}
}
Expand All @@ -439,7 +458,7 @@ export class FDag extends FRoot {
y: d.to.y
});

return this.generatePath(points, d.linkDirection)!.toString();
return this.generatePath(points, d.direction)!.toString();
})
.attr("stroke", "var(--color-border-default)");

Expand Down
16 changes: 8 additions & 8 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 @@ -34,7 +34,7 @@ export function startPlottingLine(this: FDag, event: MouseEvent) {
y1 = circleY + offset;
}

const linkDirection =
const direction =
circle.classList.contains("right") || circle.classList.contains("left")
? "horizontal"
: "vertical";
Expand All @@ -49,7 +49,7 @@ export function startPlottingLine(this: FDag, event: MouseEvent) {
y: event.clientY - dagRect.top - this.viewPortTranslate.y,
elementId: ``
},
linkDirection
direction
};

this.currentLine = svg
Expand All @@ -68,7 +68,7 @@ export function startPlottingLine(this: FDag, event: MouseEvent) {
y: d.to.y
});

return this.generatePath(points, d.linkDirection);
return this.generatePath(points, d.direction);
})
.attr("stroke", "var(--color-primary-default)");

Expand Down Expand Up @@ -110,7 +110,7 @@ export function updateLinePath(this: FDag, event: MouseEvent) {
y: d.to.y
});

return this.generatePath(points, d.linkDirection);
return this.generatePath(points, d.direction);
});
} else {
this.allGroupsAndNodes?.forEach(n => {
Expand Down Expand Up @@ -185,7 +185,7 @@ export function dropLine(this: FDag, event: MouseEvent) {
y: d.to.y
});

return this.generatePath(points, d.linkDirection);
return this.generatePath(points, d.direction);
})
.attr("stroke", "var(--color-border-default)");
if (this.currentArrow) {
Expand All @@ -203,7 +203,7 @@ export function dropLine(this: FDag, event: MouseEvent) {
linkElement.datum().from.y,
linkElement.datum().to.x,
linkElement.datum().to.y,
linkElement.datum().linkDirection
linkElement.datum().direction
);

this.currentLine = undefined;
Expand All @@ -219,7 +219,7 @@ export function updateLink(
y1: number = 0,
x2: number = 0,
y2: number = 0,
linkDirection: FDagLinkDirection = "horizontal"
direction: FDagLinkDirection = "horizontal"
) {
let linkObject = this.config.links.find(
l => l.from.elementId === fromNodeId && l.to.elementId === toNodeId
Expand All @@ -237,7 +237,7 @@ export function updateLink(
x: x2,
y: y2
},
linkDirection
direction
};

this.config.links.push(linkObject);
Expand Down
8 changes: 4 additions & 4 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 @@ -64,7 +64,7 @@ export function moveElement(this: FDag, nodeElement: HTMLElement, event: MouseEv
y: d.to.y
});

return this.generatePath(points, d.linkDirection);
return this.generatePath(points, d.direction);
});

const toLines = d3.selectAll<SVGPathElement, FDagLink>(
Expand Down Expand Up @@ -99,7 +99,7 @@ export function moveElement(this: FDag, nodeElement: HTMLElement, event: MouseEv
y: d.to.y
});

return this.generatePath(points, d.linkDirection).toString();
return this.generatePath(points, d.direction).toString();
});
}

Expand Down Expand Up @@ -191,7 +191,7 @@ export function updateNodePosition(this: FDag, event: MouseEvent) {
d.from.y,
d.to.x,
d.to.y,
d.linkDirection
d.direction
);
});

Expand All @@ -203,7 +203,7 @@ export function updateNodePosition(this: FDag, event: MouseEvent) {
d.from.y,
d.to.x,
d.to.y,
d.linkDirection
d.direction
);
});

Expand Down
17 changes: 13 additions & 4 deletions packages/flow-lineage/src/components/f-dag/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,39 @@ export type FDagElement = {
id: string;
label: string;
icon: string;
height: number;
width: number;
height?: number;
width?: number;
group?: string;
spacing?: {
x: number;
y: number;
};
placement?: {
section: number;
position: "before" | "after";
elementId?: string;
};
} & CoOrdinates;

export type FDagLinkDirection = "horizontal" | "vertical";
export type FDagLink = {
from: CoOrdinates & { elementId: string };
to: CoOrdinates & { elementId: string };
linkDirection?: FDagLinkDirection;
direction?: FDagLinkDirection;
};

export type FDagConfig = {
nodes: FDagElement[];
links: FDagLink[];
groups: FDagElement[];
groups: Omit<FDagElement, "height" | "width">[];
spacing?: {
x: number;
y: number;
};
defaultNodeSize?: {
width: number;
height: number;
};
layoutDirection?: "horizontal" | "vertical";
};

Expand Down
Loading

0 comments on commit d1901dd

Please sign in to comment.