FDS-664 fClick added on link (#265)

* FDS-664 fClick callback added for links

* FDS-664 changelog updated

* FDS-664 changelog updated

* FDS-664 f-select updateDimention bug fixed

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.9.10] - 2024-04-15
+
+### Bug Fixes
+
+- `f-select` : call `updateDimentions` only while opening.
+
 ## [2.9.9] - 2024-04-04
 
 ### Bug Fixes

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.9",
+  "version": "2.9.10",
   "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-select/f-select.ts

@@ -623,7 +623,9 @@ export class FSelect extends FRoot {
 	protected updated(changedProperties: PropertyValues) {
 		super.updated(changedProperties);
 
-		this.updateDimentions();
+		if (this.openDropdown) {
+			this.updateDimentions();
+		}
 
 		if (changedProperties.has("value")) {
 			if (this.value && this.type === "single") {

packages/flow-lineage/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 # Change Log
 
+## [3.2.1] - 2024-03-19
+
+### Improvements
+
+- `fClick` callback added in the link.
+- `label` property added to display a label on the link.
+- `showLabelOn` property added to customize label displaying behaviour either on click or hover;
+- The `tooltip` property was added to display more information about the link
+
 ## [3.2.0] - 2024-03-19
 
 ### Features

packages/flow-lineage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-lineage",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "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-links.ts

@@ -29,7 +29,11 @@ export default function createLinks(
 					id: sourceNode.id + "->" + targetNode.id,
 					level: sourceNode.level,
 					source: sourceNode,
-					target: nodeElementsObj[targetNode.id as string]
+					target: nodeElementsObj[targetNode.id as string],
+					fClick: link.fClick,
+					label: link.label,
+					tooltip: link.tooltip,
+					showLabelOn: link.showLabelOn
 				});
 			}
 		}

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

@@ -1,3 +1,4 @@
+import { FText, FTooltip } from "@ollion/flow-core";
 import { DrawLineageParams, LevelLinkGap, LineageLinkElement } from "../lineage-types";
 
 import drawElbow, {
@@ -39,6 +40,9 @@ export default function drawLinks({
 		return filter ? filter(l) : degreeFilter(l);
 	});
 
+	const tooltipElement = element.shadowRoot!.querySelector<FTooltip>("#lineage-tooltip");
+	const tooltipTextElement = tooltipElement?.querySelector<FText>("#lineage-tooltip-text");
+
 	const links = svg
 		.append("g")
 		.attr("class", "links")
@@ -88,7 +92,74 @@ export default function drawLinks({
 			}
 			return null;
 		})
-		.attr("fill", "none");
+		.attr("fill", "none")
+		.on("click", (event: MouseEvent, d) => {
+			event.stopPropagation();
+			if (d.fClick) {
+				d.fClick(event, d);
+			}
+			if (d.label && d.showLabelOn === "click") {
+				const linkLabel = element.shadowRoot!.querySelector<SVGTextElement>(
+					`[id="${d.id}-link-text"]`
+				);
+				console.log(linkLabel!.computedStyleMap().get("visibility"));
+				if (linkLabel!.computedStyleMap().get("visibility")?.toString() === "visible") {
+					linkLabel!.style.setProperty("visibility", "hidden");
+				} else {
+					linkLabel!.style.setProperty("visibility", "visible");
+				}
+			}
+		})
+		.on("mouseenter", (event: MouseEvent, d) => {
+			event.stopPropagation();
+			(event.target as HTMLElement).setAttribute("stroke-width", "4");
+			if (d.label && d.showLabelOn !== "click") {
+				const linkLabel = element.shadowRoot!.querySelector<SVGTextElement>(
+					`[id="${d.id}-link-text"]`
+				);
+				linkLabel!.style.setProperty("visibility", "visible");
+			}
+
+			if (d.tooltip) {
+				tooltipElement!.open = true;
+				tooltipElement!.target = event.target as HTMLElement;
+				tooltipTextElement!.innerText = d.tooltip;
+			}
+		})
+		.on("mouseleave", (event: MouseEvent, d) => {
+			(event.target as HTMLElement).setAttribute("stroke-width", "2");
+			if (d.label && d.showLabelOn !== "click") {
+				const linkLabel = element.shadowRoot!.querySelector<SVGTextElement>(
+					`[id="${d.id}-link-text"]`
+				);
+				linkLabel!.style.setProperty("visibility", "hidden");
+			}
+
+			event.stopPropagation();
+			tooltipElement!.open = false;
+			tooltipTextElement!.innerText = "";
+		});
+
+	links
+		.selectAll("text.link-label")
+		.data(filteredlinks)
+		.join("text")
+
+		.attr("dy", "-4")
+		.attr("class", "link-label lineage-element")
+		.attr("id", function (d) {
+			return `${d.id}-link-text`;
+		})
+		.append("textPath")
+		.attr("startOffset", "50%")
+		.attr("text-anchor", "middle")
+		.attr("xlink:href", d => {
+			return `#${d.id}`;
+		})
+		.attr("fill", "var(--color-text-default)")
+		.text(d => {
+			return `${d.label}`;
+		});
 
 	links
 		.append("circle")

packages/flow-lineage/src/components/f-lineage/f-lineage.scss

@@ -56,4 +56,10 @@
 			drop-shadow(0 -1px 0 var(--color-primary-default))
 			drop-shadow(0 1px 0 var(--color-primary-default));
 	}
+	.link {
+		cursor: pointer;
+	}
+	.link-label {
+		visibility: hidden;
+	}
 }

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

@@ -357,6 +357,9 @@ export class FLineage extends FRoot {
 					></f-icon-button
 					><slot name="node-meta" @slotchange=${this._onPopoverSlotChange}></slot></f-div
 			></f-popover>
+			<f-tooltip placement="auto" id="lineage-tooltip">
+				<f-text variant="para" size="small" id="lineage-tooltip-text"> </f-text>
+			</f-tooltip>
 		`;
 	}
 	connectedCallback() {

packages/flow-lineage/src/components/f-lineage/highlight/highlight-path.ts

@@ -41,7 +41,7 @@ export default function highlightPath(node: LineageNodeElement, lineage: FLineag
 						});
 					}
 
-					root.querySelectorAll(`[id^="${id}->"]`).forEach(el => {
+					root.querySelectorAll(`[id^="${id}->"],[id="${id}-link-label"]`).forEach(el => {
 						el.classList.add("highlight");
 						el.classList.remove("lowlight");
 						const fromid = el.getAttribute("id")?.split("->")[1];
@@ -75,7 +75,7 @@ export default function highlightPath(node: LineageNodeElement, lineage: FLineag
 						});
 					}
 
-					root.querySelectorAll(`[id$="->${id}"]`).forEach(el => {
+					root.querySelectorAll(`[id$="->${id}"],[id="${id}-link-label"]`).forEach(el => {
 						el.classList.add("highlight");
 						el.classList.remove("lowlight");
 						const fromid = el.getAttribute("id")?.split("->")[0];
@@ -89,6 +89,10 @@ export default function highlightPath(node: LineageNodeElement, lineage: FLineag
 						el.classList.add("highlight");
 						el.classList.remove("lowlight");
 					});
+					root.querySelectorAll(`[id$="->${id}-link-text"]`).forEach(el => {
+						el.classList.add("highlight");
+						el.classList.remove("lowlight");
+					});
 					root.querySelectorAll(`[data-parent-id$="->${id}"]`).forEach(el => {
 						el.classList.add("highlight");
 						el.classList.remove("lowlight");

packages/flow-lineage/src/components/f-lineage/lineage-types.ts

@@ -72,6 +72,10 @@ export type LineageLinkElement = {
 	source: LineageNodeElement;
 	target: LineageNodeElement;
 	level: number;
+	label?: string;
+	tooltip?: string;
+	showLabelOn?: "click" | "hover";
+	fClick?: (event: Event, node: LineageLinkElement) => void;
 };
 
 export type LineageDirection = "horizontal" | "vertical";
@@ -141,6 +145,10 @@ export type LineageNodes = Record<string, LineageNodePartial>;
 export type LineageNodeLinkSchema = {
 	from: string;
 	to: string;
+	showLabelOn?: "click" | "hover";
+	label?: string;
+	tooltip?: string;
+	fClick?: (event: Event, node: LineageLinkElement) => void;
 	state?: "success" | "danger" | "warning" | "primary" | "default";
 	type?: "solid" | "dotted" | "dashed";
 };

stories/flow-lineage/f-lineage.stories.ts

@@ -1,4 +1,4 @@
-import { FLineage, LineageNodeElement } from "@ollion/flow-lineage";
+import { FLineage, LineageLinkElement, LineageNodeElement } from "@ollion/flow-lineage";
 import { html } from "lit-html";
 import { createRef, ref } from "lit/directives/ref.js";
 
@@ -166,7 +166,13 @@ export const Playground = {
 		links: [
 			{
 				from: "Tony",
-				to: "Charlie"
+				to: "Charlie",
+				label: "Tony to charlie",
+				tooltip: "Link tooltip",
+				// showLabelOn: "click",
+				fClick(event: Event, d: LineageLinkElement) {
+					console.log("link fClick", event, d);
+				}
 			},
 			{
 				from: "Charlie",