f-dag-app Unlink feature

ollionorg · Jul 2, 2024 · b3bd65f · b3bd65f
1 parent 7f5eb3b
commit b3bd65f
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 44 deletions.
diff --git a/packages/flow-lineage/src/components/f-dag/f-dag.ts b/packages/flow-lineage/src/components/f-dag/f-dag.ts
@@ -206,28 +206,6 @@ export class FDag extends FRoot {
 		);
 	}
 
-	unGroup() {
-		const id = this.currentClickedNode!.node.id;
-		this.config.groups
-			.filter(g => g.group === id)
-			.forEach(g => {
-				g.group = undefined;
-			});
-		this.config.nodes
-			.filter(n => n.group === id)
-			.forEach(n => {
-				n.group = undefined;
-			});
-		const groupIndex = this.config.groups.findIndex(e => e.id === id);
-		if (groupIndex > -1) {
-			this.config.groups.splice(groupIndex, 1);
-		}
-
-		this.config.links = this.config.links.filter(
-			l => !(l.from.elementId === id || l.to.elementId === id)
-		);
-		this.requestUpdate();
-	}
 	deleteElement() {
 		const nodeType = this.currentClickedNode?.element.dataset.nodeType;
 		if (nodeType === "node") {
@@ -317,29 +295,10 @@ export class FDag extends FRoot {
 		}
 	}
 
-	selectNode(event: PointerEvent) {
-		event.stopPropagation();
-
-		if (this.currentClickedNode) {
-			const nodeElement = this.currentClickedNode.element;
-			nodeElement.classList.add("selected");
-			this.nodeActions.style.display = "none";
-
-			this.selectedNodes.push(this.currentClickedNode.node);
-			this.addGroupButton.style.display = "flex";
-			this.linkToButton.style.display = "flex";
-		}
-	}
-
 	handleViewPortClick() {
 		this.nodeActions.style.display = "none";
 	}
 
-	openLinkTo() {
-		const linkToPopOver = this.querySelector<FPopover>(`#link-to-popover`)!;
-		linkToPopOver.target = this.currentClickedNode!.element;
-		linkToPopOver.open = true;
-	}
 	openBulkLinkTo() {
 		const linkToPopOver = this.querySelector<FPopover>(`#link-to-popover`)!;
 		linkToPopOver.target = this.linkToButton;

diff --git a/packages/flow-lineage/src/components/f-dag/node-group-actions.ts b/packages/flow-lineage/src/components/f-dag/node-group-actions.ts
@@ -1,7 +1,58 @@
 import { html } from "lit";
 import type { FDag } from "./f-dag";
+import type { FPopover } from "@ollion/flow-core";
 
 export default function getNodeGroupActions(this: FDag) {
+	const selectNode = (event: PointerEvent) => {
+		event.stopPropagation();
+
+		if (this.currentClickedNode) {
+			const nodeElement = this.currentClickedNode.element;
+			nodeElement.classList.add("selected");
+			this.nodeActions.style.display = "none";
+
+			this.selectedNodes.push(this.currentClickedNode.node);
+			this.addGroupButton.style.display = "flex";
+			this.linkToButton.style.display = "flex";
+		}
+	};
+
+	const unGroup = () => {
+		const id = this.currentClickedNode!.node.id;
+		this.config.groups
+			.filter(g => g.group === id)
+			.forEach(g => {
+				g.group = undefined;
+			});
+		this.config.nodes
+			.filter(n => n.group === id)
+			.forEach(n => {
+				n.group = undefined;
+			});
+		const groupIndex = this.config.groups.findIndex(e => e.id === id);
+		if (groupIndex > -1) {
+			this.config.groups.splice(groupIndex, 1);
+		}
+
+		this.config.links = this.config.links.filter(
+			l => !(l.from.elementId === id || l.to.elementId === id)
+		);
+		this.requestUpdate();
+	};
+
+	const openLinkTo = () => {
+		const linkToPopOver = this.querySelector<FPopover>(`#link-to-popover`)!;
+		linkToPopOver.target = this.currentClickedNode!.element;
+		linkToPopOver.open = true;
+	};
+
+	const unlink = () => {
+		const nodeId = this.currentClickedNode!.node.id;
+		this.config.links = this.config.links.filter(
+			l => l.from.elementId !== nodeId && l.to.elementId !== nodeId
+		);
+		this.requestUpdate();
+	};
 	return html` <f-div
 		id="nodeActions"
 		style="position:absolute;z-index:12;display:none"
@@ -12,7 +63,7 @@ export default function getNodeGroupActions(this: FDag) {
 		state="default"
 	>
 		<f-div
-			@click=${this.selectNode}
+			@click=${selectNode}
 			clickable
 			width="hug-content"
 			align="middle-center"
@@ -22,15 +73,15 @@ export default function getNodeGroupActions(this: FDag) {
 		</f-div>
 
 		<f-divider></f-divider>
-		<f-div id="ungroup-action" @click=${this.unGroup}>
+		<f-div id="ungroup-action" @click=${unGroup}>
 			<f-div clickable width="hug-content" align="middle-center" padding="x-small small">
 				<f-text size="x-small">Ungroup</f-text>
 			</f-div>
 
 			<f-divider></f-divider>
 		</f-div>
 		<f-div
-			@click=${this.openLinkTo}
+			@click=${openLinkTo}
 			clickable
 			width="hug-content"
 			align="middle-center"
@@ -39,6 +90,17 @@ export default function getNodeGroupActions(this: FDag) {
 			<f-text size="x-small">Link To</f-text>
 		</f-div>
 
+		<f-divider></f-divider>
+		<f-div
+			@click=${unlink}
+			clickable
+			width="hug-content"
+			align="middle-center"
+			padding="x-small small"
+		>
+			<f-text size="x-small">Unlink</f-text>
+		</f-div>
+
 		<f-divider></f-divider>
 		<f-div
 			@click=${this.deleteElement}