@bemedev/mind-flow 0.3.1 → 0.3.2

package/lib/server.es.js

@@ -459,6 +459,11 @@ var machine = createMachine({
 			dimensions[id] = calculateDimensions(position);
 		});
 	} })),
+	setBoard: assign("board", { SET_BOARD: ({ payload }) => payload }),
+	generateID: action(({ pContext }) => pContext.generatedId = nanoid()),
+	select: assign("selected", { SELECT: ({ payload }) => payload }),
+	clearNewEdge: erase("newEdge"),
+	deselect: erase("selected"),
 	startNewEdge: assign("newEdge", { START_NEW_EDGE: ({ payload: from, pContext: { dimensions } }) => {
 		const { x, y } = dimensions[from].output;
 		return {
@@ -469,7 +474,6 @@ var machine = createMachine({
 			y1: y
 		};
 	} }),
-	setBoard: assign("board", { SET_BOARD: ({ payload }) => payload }),
 	buildUI: batch(assign("edgesPositions", {
 		MOVE: ({ context: { data, edgesPositions }, payload, pContext: { dimensions } }) => {
 			const edges = data?.edges;
@@ -502,26 +506,27 @@ var machine = createMachine({
 		},
 		MOVE_IMMEDIATE: ({ context: { data, edgesPositions }, payload, pContext: { dimensions } }) => {
 			(data?.edges)?.forEach(({ from, to, id }) => {
+				const dimension = dimensions[payload.id];
+				const edgePosition = edgesPositions[id];
+				if (!edgePosition || !dimension) return;
 				if (from === payload.id) {
-					const dimension = dimensions[payload.id];
-					const offset = dimension?.outputOffset ?? getDefaultOutputOffset(dimension?.width);
+					const offset = dimension.outputOffset ?? getDefaultOutputOffset(dimension.width);
 					const x0 = payload.x + offset.x;
 					const y0 = payload.y + offset.y;
-					edgesPositions[id].x0 = x0;
-					edgesPositions[id].y0 = y0;
-					if (dimension) {
-						dimension.output.x = x0;
-						dimension.output.y = y0;
-					}
+					edgePosition.x0 = x0;
+					edgePosition.y0 = y0;
+					dimension.output = {
+						x: x0,
+						y: y0
+					};
 				}
 				if (to === payload.id) {
-					const dimension = dimensions[payload.id];
 					const offset = dimension?.inputOffset ?? DEFAULT_INPUT_OFFSET;
 					const x1 = payload.x + offset.x;
 					const y1 = payload.y + offset.y;
-					edgesPositions[id].x1 = x1;
-					edgesPositions[id].y1 = y1;
-					if (dimension) dimension.input = {
+					edgePosition.x1 = x1;
+					edgePosition.y1 = y1;
+					dimension.input = {
 						x: x1,
 						y: y1
 					};
@@ -530,7 +535,7 @@ var machine = createMachine({
 			return edgesPositions;
 		},
 		else: ({ context: { data, edgesPositions }, pContext: { dimensions } }) => {
-			const edges = data?.edges ?? [];
+			const edges = toArray$1.typed(data?.edges);
 			edgesPositions = {};
 			edges.forEach(({ from, id, to }) => {
 				const output = dimensions[from]?.output;
@@ -549,9 +554,6 @@ var machine = createMachine({
 	addDimension: action({ ADD_DIMENSION: ({ payload: { id, dimension }, pContext: { dimensions } }) => {
 		dimensions[id] = dimension;
 	} }),
-	generateID: action(({ pContext }) => {
-		pContext.generatedId = nanoid();
-	}),
 	linkChild: batch(assign("data.edges", { ADD_CHILD: ({ context: { data }, pContext, payload }) => {
 		const edges = toArray$1.typed(data?.edges);
 		const from = payload;
@@ -580,20 +582,18 @@ var machine = createMachine({
 		return edges;
 	} }), assign("selected", ({ pContext: { generatedId } }) => buildNodeID(generatedId))),
 	selectParent: assign("selected", ({ pContext: { generatedId } }) => buildNodeID(generatedId)),
-	moveNode: assign("data.nodes", { MOVE: ({ context: { data }, payload }) => {
-		const { id, x, y } = payload;
-		return data?.nodes?.map((d) => {
-			if (d.id === id) return {
-				...d,
+	moveNode: assign("data.nodes", { MOVE: ({ context: { data }, payload: { id, x, y } }) => {
+		return data?.nodes?.map((node) => {
+			if (node.id === id) return {
+				...node,
 				position: {
 					x,
 					y
 				}
 			};
-			return d;
-		}) ?? [];
+			return node;
+		});
 	} }),
-	select: assign("selected", { SELECT: ({ payload }) => payload }),
 	delete: batch(filter("data.edges", { DELETE: ({ id, from, to }, _, { payload }) => {
 		return id !== payload && from !== payload && to !== payload;
 	} }), filter("data.nodes", { DELETE: ({ id }, _, { payload }) => id !== payload })),
@@ -607,8 +607,6 @@ var machine = createMachine({
 			to
 		}];
 	} }), erase("newEdge")),
-	clearNewEdge: erase("newEdge"),
-	deselect: erase("selected"),
 	zoom: assign("zoom", { ZOOM: ({ context: { zoom }, payload, pContext }) => {
 		const next = zoom + payload;
 		const clamped = Math.min(Math.max(Number(next.toFixed(2)), .2), 3);
@@ -623,6 +621,87 @@ var machine = createMachine({
 		}
 		pContext.previousZoom = zoom;
 		return 1;
+	} }),
+	placeChild: assign("data.nodes", { ADD_CHILD: ({ payload, context: { data, board }, pContext }) => {
+		if (!board) return data?.nodes;
+		const nodes = data?.nodes;
+		if (!payload) return nodes;
+		const parentNode = nodes?.find((node) => node.id === payload);
+		if (!parentNode) return nodes;
+		const parentDimension = pContext.dimensions[payload];
+		const id = `node-${pContext.generatedId}`;
+		const width = parentDimension?.width ?? 192;
+		const height = parentDimension?.height ?? 50;
+		const initialX = parentNode.position.x + width + 100;
+		const initialY = parentNode.position.y;
+		const position = pContext.clampPosition(board, initialX, initialY, width, height);
+		const dimension = pContext.calculateDimensions(position, parentDimension);
+		nodes?.push({
+			id,
+			data: { content: "<Nouveau nœud>" },
+			input: true,
+			position
+		});
+		pContext.dimensions[id] = dimension;
+		return nodes;
+	} }),
+	placeParent: assign("data.nodes", { ADD_PARENT: ({ context: { data, zoom = 1, board }, pContext }) => {
+		if (!board) return data?.nodes;
+		const nodes = data?.nodes;
+		const id = `node-${pContext.generatedId}`;
+		const container = board.parent;
+		const scrollLeft = container?.scrollLeft ?? 0;
+		const scrollTop = container?.scrollTop ?? 0;
+		const width = container?.width ?? 0;
+		const height = container?.height ?? 0;
+		const currentZoom = zoom;
+		const x = (scrollLeft + width / 2) / currentZoom;
+		const y = (scrollTop + height / 2) / currentZoom;
+		const position = pContext.clampPosition(board, x, y);
+		const dimension = pContext.calculateDimensions(position);
+		nodes?.push({
+			id,
+			data: { content: "<Nouveau nœud>" },
+			input: false,
+			position
+		});
+		pContext.dimensions[id] = dimension;
+		return nodes;
+	} }),
+	placeSibling: assign("data.nodes", { ADD_SIBLING: ({ payload, context: { data, board }, pContext }) => {
+		if (!board) return data?.nodes;
+		const edges = data?.edges;
+		const nodes = data?.nodes;
+		const parentID = edges?.find((edge) => edge.to === payload)?.from;
+		if (!parentID) return nodes;
+		const parentNode = nodes?.find((node) => node.id === parentID);
+		if (!parentNode) return nodes;
+		const parentDimension = pContext.dimensions[parentID];
+		const id = `node-${pContext.generatedId}`;
+		const width = parentDimension?.width ?? 192;
+		const height = parentDimension?.height ?? 50;
+		const initialX = parentNode.position.x + width + 100;
+		const initialY = parentNode.position.y + 100;
+		const position = pContext.clampPosition(board, initialX, initialY, width, height);
+		const dimension = pContext.calculateDimensions(position, parentDimension);
+		nodes?.push({
+			id,
+			data: { content: "<Nouveau nœud>" },
+			input: true,
+			position
+		});
+		pContext.dimensions[id] = dimension;
+		return nodes;
+	} }),
+	moveNewEdge: assign("newEdge", { MOVE_NEW_EDGE: ({ context: { newEdge, board }, payload, pContext }) => {
+		if (!board) return void 0;
+		if (!newEdge) return void 0;
+		const { x: x1, y: y1 } = pContext.getBoardPosition(payload.x, payload.y, board);
+		return {
+			...newEdge,
+			x1,
+			y1
+		};
 	} })
 } }));
 //#endregion
@@ -656,7 +735,7 @@ var [Provider, useFlow] = createContext$1(() => {
 			*
 			* @returns Calculated 2D coordinate of type {@linkcode Point}.
 			*/
-			getBoardPosition(clientX, clientY, el) {
+			getBoardPosition: (clientX, clientY, el) => {
 				if (!el) return {
 					x: clientX,
 					y: clientY
@@ -681,7 +760,7 @@ var [Provider, useFlow] = createContext$1(() => {
 			*
 			* @see {@linkcode BOUNDS_CONSTRAINTS}
 			*/
-			clampPosition(board, x, y, nodeWidth = 192, nodeHeight = 50) {
+			clampPosition: (board, x, y, nodeWidth = 192, nodeHeight = 50) => {
 				const container = board?.parent;
 				if (!container) return {
 					x,
@@ -733,89 +812,6 @@ var [Provider, useFlow] = createContext$1(() => {
 			}
 		}
 	});
-	service.addOptions(({ assign }) => ({ actions: {
-		placeChild: assign("data.nodes", { ADD_CHILD: ({ payload, context: { data, board }, pContext }) => {
-			if (!board) return data?.nodes;
-			const nodes = data?.nodes;
-			if (!payload) return nodes;
-			const parentNode = nodes?.find((node) => node.id === payload);
-			if (!parentNode) return nodes;
-			const parentDimension = pContext.dimensions[payload];
-			const id = `node-${pContext.generatedId}`;
-			const width = parentDimension?.width ?? 192;
-			const height = parentDimension?.height ?? 50;
-			const initialX = parentNode.position.x + width + 100;
-			const initialY = parentNode.position.y;
-			const position = pContext.clampPosition(board, initialX, initialY, width, height);
-			const dimension = pContext.calculateDimensions(position, parentDimension);
-			nodes?.push({
-				id,
-				data: { content: "<Nouveau nœud>" },
-				input: true,
-				position
-			});
-			pContext.dimensions[id] = dimension;
-			return nodes;
-		} }),
-		placeParent: assign("data.nodes", { ADD_PARENT: ({ context: { data, zoom = 1, board }, pContext }) => {
-			if (!board) return data?.nodes;
-			const nodes = data?.nodes;
-			const id = `node-${pContext.generatedId}`;
-			const container = board.parent;
-			const scrollLeft = container?.scrollLeft ?? 0;
-			const scrollTop = container?.scrollTop ?? 0;
-			const width = container?.width ?? 0;
-			const height = container?.height ?? 0;
-			const currentZoom = zoom;
-			const x = (scrollLeft + width / 2) / currentZoom;
-			const y = (scrollTop + height / 2) / currentZoom;
-			const position = pContext.clampPosition(board, x, y);
-			const dimension = pContext.calculateDimensions(position);
-			nodes?.push({
-				id,
-				data: { content: "<Nouveau nœud>" },
-				input: false,
-				position
-			});
-			pContext.dimensions[id] = dimension;
-			return nodes;
-		} }),
-		placeSibling: assign("data.nodes", { ADD_SIBLING: ({ payload, context: { data, board }, pContext }) => {
-			if (!board) return data?.nodes;
-			const edges = data?.edges;
-			const nodes = data?.nodes;
-			const parentID = edges?.find((edge) => edge.to === payload)?.from;
-			if (!parentID) return nodes;
-			const parentNode = nodes?.find((node) => node.id === parentID);
-			if (!parentNode) return nodes;
-			const parentDimension = pContext.dimensions[parentID];
-			const id = `node-${pContext.generatedId}`;
-			const width = parentDimension?.width ?? 192;
-			const height = parentDimension?.height ?? 50;
-			const initialX = parentNode.position.x + width + 100;
-			const initialY = parentNode.position.y + 100;
-			const position = pContext.clampPosition(board, initialX, initialY, width, height);
-			const dimension = pContext.calculateDimensions(position, parentDimension);
-			nodes?.push({
-				id,
-				data: { content: "<Nouveau nœud>" },
-				input: true,
-				position
-			});
-			pContext.dimensions[id] = dimension;
-			return nodes;
-		} }),
-		moveNewEdge: assign("newEdge", { MOVE_NEW_EDGE: ({ context: { newEdge, board }, payload, pContext }) => {
-			if (!board) return void 0;
-			if (!newEdge) return void 0;
-			const { x: x1, y: y1 } = pContext.getBoardPosition(payload.x, payload.y, board);
-			return {
-				...newEdge,
-				x1,
-				y1
-			};
-		} })
-	} }));
 	service.start();
 	return service;
 }, { name: "FlowContext" });
@@ -989,7 +985,7 @@ var _tmpl$$2 = [
 ];
 var _tmpl$2$1 = [
 	"<div",
-	" id=\"outputs\" class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
+	" id=\"inputs\" class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
 	"\"><div class=\"cursor-default rounded-full bg-[#e38b29] shadow-md\" style=\"",
 	"\"></div></div>"
 ];
@@ -1005,7 +1001,7 @@ var _tmpl$3$1 = [
 	"\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></div><!--$-->",
 	"<!--/--><!--$-->",
 	"<!--/--><!--$-->",
-	"<!--/--><div id=\"inputs\" class=\"pointer-events-none absolute top-0 z-10 flex flex-col\" style=\"",
+	"<!--/--><div id=\"outputs\" class=\"pointer-events-none absolute top-0 z-10 flex flex-col\" style=\"",
 	"\"><div class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md\" style=\"",
 	"\"></div></div></div>"
 ];
@@ -1031,6 +1027,8 @@ var _tmpl$5 = [
 */
 var NodeComponent = (props) => {
 	const service = useFlow();
+	createState(service, { selector: (s) => s.context.newEdge });
+	createDraggable(props.id);
 	const node = createState(service, {
 		selector: ({ context }) => {
 			const item = toArray.typed(context.data?.nodes).find((n) => n.id === props.id);
@@ -1044,14 +1042,12 @@ var NodeComponent = (props) => {
 		},
 		equals: dequal
 	});
-	createState(service, { selector: (s) => s.context.newEdge });
-	const selected = createState(service, { selector: (s) => s.context.selected === props.id });
+	const selected = createState(service, { selector: ({ context }) => context.selected === props.id });
 	const hasParent = createState(service, { selector: ({ context: { data } }) => {
 		const edges = data?.edges;
 		if (!edges) return false;
 		return edges.some(({ to }) => to === props.id);
 	} });
-	createDraggable(props.id);
 	return ssr(_tmpl$3$1, ssrHydrationKey(), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, ssrStyleProperty("top:", `${escape(node().y, true)}px`) + ssrStyleProperty(";left:", `${escape(node().x, true)}px`), ssrAttribute("id", escape(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
 			return hasParent();
@@ -1118,7 +1114,6 @@ var NodesBoard = () => {
 		x: 0,
 		y: 0
 	});
-	const [id, setId] = createSignal("");
 	const [ref, setRef] = createSignal();
 	let percentX = 0;
 	let percentY = 0;
@@ -1164,14 +1159,6 @@ var NodesBoard = () => {
 	}, { defer: true }));
 	onMount(sendBoard);
 	const selectedId = createState(service, { selector: (s) => s.context?.selected });
-	/**
-	* Determines whether the given element ID matches the currently selected entity.
-	*
-	* @param id - The node or edge identifier to check.
-	*
-	* @returns `true` if the item is currently selected, otherwise `false`.
-	*/
-	const selected = (id) => selectedId() === id;
 	const nodeIds = createState(service, {
 		selector: ({ context }) => {
 			return toArray.typed(context.data?.nodes).map((item) => item.id);
@@ -1187,37 +1174,33 @@ var NodesBoard = () => {
 	const cHeight = () => `calc((${CANVAS_SIZE}vh - ${MARGIN_Y}px) * ${zoom()})`;
 	return ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(DragDropProvider, {
 		onDragMove: ({ draggable: { transform: _transform, node, id } }) => {
-			setId(id);
-			if (selected(id)) {
-				const grandParent = node.parentElement?.parentElement;
-				const currentZoom = zoom();
-				const minX = 0;
-				const maxX = grandParent ? Math.max(0, grandParent.clientWidth / currentZoom - node.offsetWidth) : Infinity;
-				const minY = 0;
-				const maxY = grandParent ? Math.max(0, grandParent.clientHeight / currentZoom - node.offsetHeight) : Infinity;
-				const targetX = node.offsetLeft + _transform.x / currentZoom;
-				const targetY = node.offsetTop + _transform.y / currentZoom;
-				const x = Math.min(Math.max(targetX, minX), maxX);
-				const y = Math.min(Math.max(targetY, minY), maxY);
-				const deltaX = x - node.offsetLeft;
-				const deltaY = y - node.offsetTop;
-				node.style.setProperty("transform", `translate3d(${deltaX}px, ${deltaY}px, 0)`);
-				service.send({
-					type: "MOVE_IMMEDIATE",
-					payload: {
-						id: `${id}`,
-						x,
-						y
-					}
-				});
-				setTransform({
-					x: deltaX * currentZoom,
-					y: deltaY * currentZoom
-				});
-			}
+			const grandParent = node.parentElement?.parentElement;
+			const currentZoom = zoom();
+			const minX = 0;
+			const maxX = grandParent ? Math.max(0, grandParent.clientWidth / currentZoom - node.offsetWidth) : Infinity;
+			const minY = 0;
+			const maxY = grandParent ? Math.max(0, grandParent.clientHeight / currentZoom - node.offsetHeight) : Infinity;
+			const targetX = node.offsetLeft + _transform.x / currentZoom;
+			const targetY = node.offsetTop + _transform.y / currentZoom;
+			const x = Math.min(Math.max(targetX, minX), maxX);
+			const y = Math.min(Math.max(targetY, minY), maxY);
+			const deltaX = x - node.offsetLeft;
+			const deltaY = y - node.offsetTop;
+			node.style.setProperty("transform", `translate3d(${deltaX}px, ${deltaY}px, 0)`);
+			service.send({
+				type: "MOVE_IMMEDIATE",
+				payload: {
+					id: `${id}`,
+					x,
+					y
+				}
+			});
+			setTransform({
+				x: deltaX * currentZoom,
+				y: deltaY * currentZoom
+			});
 		},
 		onDragEnd: ({ draggable: { node, id } }) => {
-			if (!selected(id)) return;
 			const grandParent = node.parentElement?.parentElement;
 			const currentZoom = zoom();
 			const minX = 0;
@@ -1257,7 +1240,7 @@ var NodesBoard = () => {
 				ssr(_tmpl$2, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
 				createComponent(Show, {
 					get when() {
-						return !id() || !selected(id());
+						return !selectedId();
 					},
 					get children() {
 						return createComponent(DragOverlay, { children: "" });
@@ -1291,6 +1274,7 @@ var FlowChart = (props) => {
 	const primaryEdges = props.config?.edges;
 	const service = useFlow();
 	const hasNewEdge = createState(service, { selector: (s) => !!s.context.newEdge });
+	onCleanup(service.pause);
 	onMount(() => {
 		service.resume();
 		service.send({
@@ -1301,7 +1285,6 @@ var FlowChart = (props) => {
 			}
 		});
 	});
-	onCleanup(service.pause);
 	return ssr(_tmpl$, ssrHydrationKey(), ssrStyleProperty("cursor:", hasNewEdge() ? "inherit" : "crosshair") + ssrStyleProperty(";background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), escape(createComponent(NodesBoard, {})));
 };
 //#endregion