FDS-655 vertical direction in f-lineage implemented (#248)

* FDS-655 vertical forward links implemented

* FDS-655 reverse vertical links updated

* FDS-655 stoires updated to test vertical layout

* FDS-655 stories updated

* FDS-655 playground story updated

* FDS-655 flow-core changelogs updated

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.9.3] - 2024-03-20
+
+### Improvements
+
+- `f-icon-button` box-sizing updated.
+
 ## [2.9.2] - 2024-03-19
 
 ### Improvements

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

packages/flow-core/src/components/f-icon-button/f-icon-button.scss

@@ -82,6 +82,8 @@ in this case it is `f-icon-button`
 		padding: 0px;
 		position: relative;
 
+		box-sizing: border-box;
+
 		// if counter is specified then overflow has to be visible
 		&[counter] {
 			overflow: visible;

packages/flow-lineage/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [3.2.0] - 2024-03-19
+
+### Features
+
+- `direction="vertical"` implemented in `f-lineage`.
+
 ## [3.1.1] - 2023-12-19
 
 ### Patch Changes

packages/flow-lineage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-lineage",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Lineage dependency for flow design system",
   "module": "dist/flow-lineage.es.js",
   "main": "dist/flow-lineage.cjs.js",

packages/flow-lineage/src/components/f-lineage/create/create-node-elements.ts

@@ -120,12 +120,14 @@ export default function createNodeElements(
 				/**
 				 * checking level max Y
 				 */
-				const maxYWhenScrollBar = nodeElement.y + nodeSize.height + maxChildrenHeight;
-				if (nodeElement.hasScrollbaleChildren && levelPointer.y > maxYWhenScrollBar) {
-					levelPointer.maxY = maxYWhenScrollBar;
-					nodeElement.childrenYMax = maxYWhenScrollBar;
-				} else if (levelPointer.y > (levelPointer.maxY ?? 0)) {
-					levelPointer.maxY = levelPointer.y;
+				if (!nodeElement.fHideChildren) {
+					const maxYWhenScrollBar = nodeElement.y + nodeSize.height + maxChildrenHeight;
+					if (nodeElement.hasScrollbaleChildren && levelPointer.y > maxYWhenScrollBar) {
+						levelPointer.maxY = maxYWhenScrollBar;
+						nodeElement.childrenYMax = maxYWhenScrollBar;
+					} else if (levelPointer.y > (levelPointer.maxY ?? 0)) {
+						levelPointer.maxY = levelPointer.y;
+					}
 				}
 
 				levelPointer.y = nodeElement.y;

packages/flow-lineage/src/components/f-lineage/draw/curve-steps.ts

@@ -7,11 +7,13 @@ class Step {
 	private _point?: number;
 	private _lastX?: number;
 	private _lastY?: number;
+	private _direction?: CurveDirection;
 
-	constructor(context: CanvasRenderingContext2D, curve: number) {
+	constructor(context: CanvasRenderingContext2D, curve: number, direction?: CurveDirection) {
 		this._context = context;
 		this._curve = curve;
 		this._line = NaN;
+		this._direction = direction;
 	}
 
 	/**
@@ -61,7 +63,11 @@ class Step {
 				this._point = 2;
 				this._lastX = x;
 				this._lastY = y;
-				this._context.lineTo(x - this._curve, y);
+				if (this._direction === "vertical") {
+					this._context.lineTo(x, y - this._curve);
+				} else {
+					this._context.lineTo(x - this._curve, y);
+				}
 				break;
 			default: {
 				if (
@@ -102,23 +108,25 @@ class Step {
 	}
 }
 
+type CurveDirection = "horizontal" | "vertical";
+
 /**
  * A factory function that creates a curved step function.
  * @param angle - The angle for curves.
  * @returns A function to create curved steps.
  */
-function curvedStep(angle: number) {
+function curvedStep(angle: number, direction?: CurveDirection) {
 	function createStep(context: CanvasRenderingContext2D) {
-		return new Step(context, angle);
+		return new Step(context, angle, direction);
 	}
 
 	/**
 	 * Set a new angle for curves.
 	 * @param angle - The new angle for curves.
 	 * @returns A curved step function with the specified angle.
 	 */
-	createStep.angle = function (angle: number) {
-		return curvedStep(+angle);
+	createStep.angle = function (angle: number, direction?: CurveDirection) {
+		return curvedStep(+angle, direction);
 	};
 
 	return createStep;

packages/flow-lineage/src/components/f-lineage/draw/draw-elbow.ts

@@ -22,6 +22,7 @@ export type DrawElbowParams = {
 	element: FLineage;
 };
 import curveStep from "./curve-steps";
+import { getChildrenArray } from "../../../utils";
 
 type Point = { x: number; y: number };
 
@@ -62,13 +63,38 @@ export default function drawElbow({
 		.x(p => (p as unknown as Point).x)
 		.y(p => (p as unknown as Point).y)
 		//@ts-expect-error @todo vikas to check
-		.curve(curveStep.angle(curveAngle));
+		.curve(curveStep.angle(curveAngle, element.direction));
 
 	// add point on node for connection
 	let startPoint: Point = {
 		x: link.source.x + (link.source.isChildren ? childrenNodeSize.width : nodeSize.width),
 		y: link.source.y + (link.source.isChildren ? childrenNodeSize.height / 2 : nodeSize.height / 2)
 	};
+	if (element.direction === "vertical") {
+		let startY =
+			link.source.y + (link.source.isChildren ? childrenNodeSize.height : nodeSize.height);
+		if (!link.source.fHideChildren && link.source.fChildren) {
+			const maxChildrenHeight = (element.maxChildren ?? 8) * childrenNodeSize.height;
+			const childrens = getChildrenArray(link.source.fChildren);
+			const totalChildNodeHeight = childrenNodeSize.height * childrens.length;
+
+			if (totalChildNodeHeight > maxChildrenHeight) {
+				startY =
+					link.source.y +
+					(link.source.isChildren ? childrenNodeSize.height : nodeSize.height) +
+					maxChildrenHeight;
+			} else {
+				startY =
+					link.source.y +
+					(link.source.isChildren ? childrenNodeSize.height : nodeSize.height) +
+					totalChildNodeHeight;
+			}
+		}
+		startPoint = {
+			x: link.source.x + (link.source.isChildren ? childrenNodeSize.width / 2 : nodeSize.width / 2),
+			y: startY
+		};
+	}
 	const points: Point[] = [];
 
 	points.push(startPoint);
@@ -83,12 +109,21 @@ export default function drawElbow({
 
 			let closestGapPoint: LineageGapElement;
 			if (link.target.level === l + 1) {
-				closestGapPoint = {
-					x: link.target.x,
-					y:
-						link.target.y +
-						(link.target.isChildren ? childrenNodeSize.height / 2 : nodeSize.height / 2)
-				};
+				if (element.direction === "vertical") {
+					closestGapPoint = {
+						x:
+							link.target.x +
+							(link.target.isChildren ? childrenNodeSize.width / 2 : nodeSize.width / 2),
+						y: link.target.y
+					};
+				} else {
+					closestGapPoint = {
+						x: link.target.x,
+						y:
+							link.target.y +
+							(link.target.isChildren ? childrenNodeSize.height / 2 : nodeSize.height / 2)
+					};
+				}
 			} else {
 				closestGapPoint = lineage.gaps[l + 1].reduce(
 					(previous, current) => {
@@ -102,26 +137,61 @@ export default function drawElbow({
 					{ x: -1, y: -1 }
 				);
 
-				closestGapPoint = {
-					x: closestGapPoint.x + nodeSize.width,
-					y: closestGapPoint.y + gap / 2
-				};
+				if (element.direction === "vertical") {
+					closestGapPoint = {
+						y: closestGapPoint.y + nodeSize.height,
+						x: closestGapPoint.x + gap / 2
+					};
+				} else {
+					closestGapPoint = {
+						x: closestGapPoint.x + nodeSize.width,
+						y: closestGapPoint.y + gap / 2
+					};
+				}
 			}
 
-			const secondPoint = {
+			let secondPoint = {
 				x: startPoint.x + gapDelta,
 				y: startPoint.y
 			};
+
+			const nextGapPoint = lineage.gaps[l + 1].reduce(
+				(previous, current) => {
+					if (previous.x === -1) {
+						return current;
+					}
+					return Math.abs(current.y - startPoint.y) < Math.abs(previous.y - startPoint.y)
+						? current
+						: previous;
+				},
+				{ x: -1, y: -1 }
+			);
+
+			if (element.direction === "vertical") {
+				secondPoint = {
+					x: startPoint.x,
+					y: nextGapPoint.y - gapDelta
+				};
+			}
 			points.push(secondPoint);
 
 			// check if curve is feasible
-			const isCurveFeasible = Math.abs(closestGapPoint.y - startPoint.y) >= curveAngle;
+			let isCurveFeasible = Math.abs(closestGapPoint.y - startPoint.y) >= curveAngle;
 
-			const thirdPoint = {
+			if (element.direction === "vertical") {
+				isCurveFeasible = Math.abs(closestGapPoint.x - startPoint.x) >= curveAngle;
+			}
+			let thirdPoint = {
 				x: startPoint.x + gapDelta,
 				y: isCurveFeasible ? closestGapPoint.y : startPoint.y
 			};
 
+			if (element.direction === "vertical") {
+				thirdPoint = {
+					x: isCurveFeasible ? closestGapPoint.x : startPoint.x,
+					y: nextGapPoint.y - gapDelta
+				};
+			}
 			points.push(thirdPoint);
 
 			points.push(closestGapPoint);
@@ -139,12 +209,21 @@ export default function drawElbow({
 
 			let closestGapPoint: LineageGapElement;
 			if (link.target.level - 1 === l) {
-				closestGapPoint = {
-					x: link.target.x,
-					y:
-						link.target.y +
-						(link.target.isChildren ? childrenNodeSize.height / 2 : nodeSize.height / 2)
-				};
+				if (element.direction === "vertical") {
+					closestGapPoint = {
+						x:
+							link.target.x +
+							(link.target.isChildren ? childrenNodeSize.width / 2 : nodeSize.width / 2),
+						y: link.target.y
+					};
+				} else {
+					closestGapPoint = {
+						x: link.target.x,
+						y:
+							link.target.y +
+							(link.target.isChildren ? childrenNodeSize.height / 2 : nodeSize.height / 2)
+					};
+				}
 			} else {
 				closestGapPoint = lineage.gaps[l].reduce(
 					(previous, current) => {
@@ -157,27 +236,47 @@ export default function drawElbow({
 					},
 					{ x: -1, y: -1 }
 				);
-
-				closestGapPoint = {
-					x: closestGapPoint.x - gapDelta,
-					y: closestGapPoint.y + gap / 2
-				};
+				if (element.direction === "vertical") {
+					closestGapPoint = {
+						y: closestGapPoint.y - gapDelta,
+						x: closestGapPoint.x + gap / 2
+					};
+				} else {
+					closestGapPoint = {
+						x: closestGapPoint.x - gapDelta,
+						y: closestGapPoint.y + gap / 2
+					};
+				}
 			}
 
-			const secondPoint = {
+			let secondPoint = {
 				x: startPoint.x - gapDelta * (link.source.level == l ? -1 : 1),
 				y: startPoint.y
 			};
+
+			if (element.direction === "vertical") {
+				secondPoint = {
+					y: startPoint.y - gapDelta * (link.source.level == l ? -1 : 1),
+					x: startPoint.x
+				};
+			}
 			points.push(secondPoint);
 
 			// check if curve is feasible
 			const isCurveFeasible = Math.abs(closestGapPoint.y - startPoint.y) >= curveAngle;
 
-			const thirdPoint = {
+			let thirdPoint = {
 				x: startPoint.x - gapDelta * (link.source.level == l ? -1 : 1),
 				y: isCurveFeasible ? closestGapPoint.y : startPoint.y
 			};
 
+			if (element.direction === "vertical") {
+				thirdPoint = {
+					y: startPoint.y - gapDelta * (link.source.level == l ? -1 : 1),
+					x: isCurveFeasible ? closestGapPoint.x : startPoint.x
+				};
+			}
+
 			points.push(thirdPoint);
 
 			points.push(closestGapPoint);
@@ -187,7 +286,10 @@ export default function drawElbow({
 	}
 
 	if (element) {
-		if (element.getDrawParams().svg.attr("transform") == null) {
+		if (
+			element.getDrawParams().svg.attr("transform") == null &&
+			element.direction === "horizontal"
+		) {
 			const leftX = element?.padding ?? 0;
 
 			const leftMostPoint = points.find(p => {
@@ -200,6 +302,22 @@ export default function drawElbow({
 					`${leftMostPoint.x - gap} 0 ${element.getWidth()} ${element.getHeight()}`
 				);
 			}
+		} else if (
+			element.getDrawParams().svg.attr("transform") == null &&
+			element.direction === "vertical"
+		) {
+			const topY = element?.padding ?? 0;
+
+			const topMostPoint = points.find(p => {
+				return p.y < topY;
+			});
+
+			if (topMostPoint) {
+				d3.select(element.svg).attr(
+					"viewBox",
+					`0 ${topMostPoint.y - gap} ${element.getWidth()} ${element.getHeight()}`
+				);
+			}
 		}
 	}
 	const path = line(points as unknown as [number, number][]);