nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/diagrams/services/diagram.service.ts

@@ -0,0 +1,327 @@
+import { Injectable } from '@angular/core';
+import { NodeEditor } from 'rete';
+import { Position } from 'rete-area-plugin/_types/types';
+import { Subject } from 'rxjs';
+import { NODE_CIRCLE_SIZE, NODE_TYPE, NOTIFY_EVENT } from '../constants';
+import { initNodeByType } from '../editor';
+import {
+  BaseNodeClass,
+  Connection,
+  ContentNode,
+  InputPort,
+  OutputPort,
+  Socket
+} from '../models';
+import {
+  ConnectionConfigType,
+  DiagramEditorWithPlugins,
+  InputConfigType,
+  NodeDefinitionData,
+  NodeType,
+  NotifyEventType,
+  OutputConfigType,
+  PortType,
+  Schemes
+} from '../types';
+import {
+  DiagramUtils,
+  removeNode,
+  removeNodeAndConnections
+} from '../utilities';
+import { DiagramPluginsService } from './diagram-plugins.service';
+
+@Injectable()
+export class DiagramService {
+	private _editorSub = new Subject<DiagramEditorWithPlugins>();
+
+	public editor!: NodeEditor<Schemes>;
+	public socket!: Socket;
+
+	onReady$ = this._editorSub.asObservable();
+	destroy!: () => void;
+	fitToZoom!: () => void;
+
+	/**
+	 *
+	 */
+	constructor(public plugins: DiagramPluginsService) {}
+
+	setEditor(editor: DiagramEditorWithPlugins) {
+		this._editorSub.next(editor);
+		this.editor = editor.editor;
+		this.socket = editor.socket;
+		this.destroy = editor.destroy;
+		this.fitToZoom = editor.fitToZoom;
+	}
+
+	diagramClientRect(): DOMRect | undefined {
+		return this.plugins.area.container.getBoundingClientRect();
+	}
+
+	getContentNodes() {
+		return this.editor
+			.getNodes()
+			.filter(
+				(nd) => ![NODE_TYPE.start, NODE_TYPE.end].includes(nd.type as any)
+			);
+	}
+
+	getNodesData() {
+		return this.getContentNodes().map((node) => node.content.data);
+	}
+
+	canAddNode(nodeType: NodeType) {
+		if (nodeType === NODE_TYPE.content) {
+			return true;
+		}
+		const _nodes = this.editor.getNodes();
+		const _isExist = _nodes.some(
+			(nd) => (nd as BaseNodeClass).type === nodeType
+		);
+		return !_isExist;
+	}
+
+	async addNode(node: BaseNodeClass) {
+		await this.editor.addNode(node);
+	}
+
+	createNode<T extends BaseNodeClass = ContentNode>(
+		type: NodeType = NODE_TYPE.content,
+		config: NodeDefinitionData
+	): T {
+		const _node = initNodeByType(type, config);
+
+		if (config.type !== NODE_TYPE.start) {
+			this.createInput(_node, DiagramUtils.createInputId(_node.id), {
+				styleClass: DiagramUtils.createInputClass()
+			});
+		}
+
+		if (config.type !== NODE_TYPE.end) {
+			this.createOutput(_node, DiagramUtils.createOutputId(_node.id), {
+				styleClass: DiagramUtils.createOutputClass()
+			});
+		}
+
+		if (config.type === NODE_TYPE.gateway) {
+			this._creteGatewayOutput<T>(_node);
+		}
+
+		if ([NODE_TYPE.content, NODE_TYPE.template].includes(config.type as any)) {
+			const contentPorts: PortType[] = ['secondary', 'tertiary', 'quaternary'];
+
+			DiagramUtils.createInputsConfig(_node.id, contentPorts).forEach(
+				({ id, config }) => this.createInput(_node, id, config)
+			);
+
+			DiagramUtils.createOutputsConfig(_node.id, contentPorts).forEach(
+				({ id, config }) => this.createOutput(_node, id, config)
+			);
+		}
+
+		_node.notify = this.notifyListener(_node);
+
+		return _node as T;
+	}
+
+	shouldAddStart(nodeType: string) {
+		if (nodeType === NODE_TYPE.start) {
+			return false;
+		}
+		const _nodes = this.editor.getNodes();
+		const _isExist = _nodes.some(
+			(nd) => (nd as BaseNodeClass).type === NODE_TYPE.start
+		);
+
+		return !_isExist;
+	}
+
+	getNode(id: string) {
+		return this.editor.getNode(id);
+	}
+
+	getNodes() {
+		return this.editor.getNodes();
+	}
+
+	getConnections() {
+		return this.editor.getConnections();
+	}
+
+	getConnection(id: string) {
+		return this.editor.getConnection(id);
+	}
+
+	getLastNode() {
+		const nodes = this.editor.getNodes();
+		return nodes.length ? nodes[nodes.length - 1] : null;
+	}
+
+	getNodesByType(type: NodeType) {
+		return this.editor.getNodes().filter((nd) => nd.type === type);
+	}
+
+	getViewNodes() {
+		return Array.from(this.plugins.area.nodeViews.values());
+	}
+
+	getLastViewNode() {
+		const nodes = this.getViewNodes();
+		return nodes.length ? nodes[nodes.length - 1] : null;
+	}
+
+	getViewNode(id: string) {
+		return this.plugins.area.nodeViews.get(id);
+	}
+
+	getViewNodePosition(id: string) {
+		const node = this.getViewNode(id);
+		return node ? node.position : null;
+	}
+
+	createInput(
+		node: BaseNodeClass,
+		id = `${node.id}-input`,
+		config?: InputConfigType
+	) {
+		node.addInput(
+			id,
+			new InputPort({
+				socket: this.socket,
+				...config
+			})
+		);
+		return node;
+	}
+
+	createOutput(
+		node: BaseNodeClass,
+		id = `${node.id}-output`,
+		config?: OutputConfigType
+	) {
+		node.addOutput(
+			id,
+			new OutputPort({
+				socket: this.socket,
+				...config
+			})
+		);
+		return node;
+	}
+
+	async addConnection(
+		sourceNode: BaseNodeClass,
+		targetNode: BaseNodeClass,
+		config?: ConnectionConfigType
+	) {
+		await this.editor.addConnection(
+			this.createConnection(sourceNode, targetNode, config)
+		);
+	}
+
+	createConnection(
+		sourceNode: BaseNodeClass,
+		targetNode: BaseNodeClass,
+		config?: ConnectionConfigType
+	) {
+		return new Connection(sourceNode, targetNode, config);
+	}
+
+	async appendConnection(connection: Connection) {
+		await this.editor.addConnection(connection);
+	}
+
+	async clear() {
+		return await this.editor.clear();
+	}
+
+	redraw() {
+		this.editor.getNodes().forEach((node) => {
+			this.plugins.area.update('node', node.id);
+		});
+	}
+
+	notifyListener(node: BaseNodeClass) {
+		return (
+			eventType: NotifyEventType,
+			payload: NotifyEventType extends 'remove'
+				? { nodeId: string }
+				: Record<string, any>
+		) => {
+			const _actions = {
+				[NOTIFY_EVENT.remove]: this._removeNode.bind(this)
+			};
+
+			return _actions[eventType]?.(payload as { nodeId: string });
+		};
+	}
+
+	async translateView() {
+		const { container, area } = this.plugins.area;
+		const rect = container.getBoundingClientRect();
+		const k = area.transform.k;
+		const delta = -0.2;
+		const ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
+		const oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
+
+		area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
+	}
+
+	async removeEndNode() {
+		const node = this.getNodesByType(NODE_TYPE.end)[0];
+		if (node) {
+			await removeNodeAndConnections(node, this.editor);
+		}
+	}
+
+	private _creteGatewayOutput<T extends BaseNodeClass = ContentNode>(
+		_node: ContentNode<unknown>
+	) {
+		DiagramUtils.createOutputsConfig(_node.id, [
+			'secondary',
+			'tertiary'
+		]).forEach((input) => this.createOutput(_node, input.id, input?.config));
+	}
+
+	private async _removeNode(data: { nodeId: string }) {
+		const node = this.editor.getNode(data.nodeId);
+		if (!node) {
+			return;
+		}
+
+		const viewNode = (id: string) => this.plugins.area.nodeViews.get(id);
+
+		let config = node.config;
+		let index = null;
+		let position: Position = null;
+		let direction = null;
+		if (config.isLinked) {
+			index = this.editor.getNodes().findIndex((nd) => nd.id === data.nodeId);
+			position = viewNode(data.nodeId).position;
+			direction = node.directions;
+		}
+		this.plugins.readonly.disable();
+		await removeNode(data, this.editor);
+
+		if (config.isLinked) {
+			const nodes = this.editor.getNodes().slice(index);
+
+			while (nodes.length) {
+				const _node = nodes.shift();
+				const _dir = { ..._node.directions };
+				const _position = { ...viewNode(_node.id).position };
+				_node.directions = direction;
+				if (_node.type == NODE_TYPE.end) {
+					position.y = Math.abs(
+						Math.floor(position.y - (_node.height - NODE_CIRCLE_SIZE) / 2)
+					);
+				}
+				await this.plugins.area.translate(_node.id, position);
+				await this.plugins.area.update('node', _node.id);
+				position = _position;
+				direction = _dir;
+			}
+		}
+		this.plugins.readonly.enable();
+	}
+}

package/src/lib/components/diagrams/services/message.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { MessageType } from '../types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MessageService {
+  private messageSubject = new Subject<{ key: string; payload: any }>();
+
+  sendMessage(key: MessageType, payload: any): void {
+    this.messageSubject.next({ key, payload });
+  }
+
+  onMessage(key: MessageType): Observable<any> {
+    return this.messageSubject.asObservable().pipe(
+      filter((data) => data.key === key),
+      map((data) => data.payload)
+    );
+  }
+}

package/src/lib/components/diagrams/services/workflow.service.ts

@@ -0,0 +1,322 @@
+import { Injectable } from '@angular/core';
+import { NodeEditor, Root } from 'rete';
+import { NodeView } from 'rete-area-plugin';
+import {
+  IN_OUT_DIRECTION,
+  MESSAGE_TYPE,
+  NODE_CIRCLE_SIZE,
+  NODE_HEIGHT,
+  NODE_MARGIN,
+  NODE_TYPE,
+  NODE_WIDTH
+} from '../constants';
+import { BaseNodeClass, ContentNode } from '../models';
+import {
+  ConnectionConfigType,
+  DiagramConfig,
+  NodeContent,
+  NodeDefinitionData,
+  NodeType,
+  Schemes
+} from '../types';
+import { DiagramPluginsService } from './diagram-plugins.service';
+import { DiagramService } from './diagram.service';
+import { MessageService } from './message.service';
+
+@Injectable()
+export class WorkflowService {
+	private _config!: DiagramConfig;
+
+	private _defaultNodeHeight = NODE_HEIGHT;
+	private _defaultNodeWidth = NODE_WIDTH;
+	private _defaultNodeCircleSize = NODE_CIRCLE_SIZE;
+	private _defaultNodeMargin = NODE_MARGIN;
+	private _offset = 60;
+	constructor(
+		private _diagram: DiagramService,
+		private _plugins: DiagramPluginsService,
+		private _message: MessageService
+	) {}
+
+	setConfig(_config: DiagramConfig) {
+		this._config = _config;
+		this._message.sendMessage(MESSAGE_TYPE.configUpdated, _config);
+	}
+
+	async addNode<T = any>(nodeType: NodeType, data: NodeContent<T>) {
+		if (!this._diagram.canAddNode(nodeType)) {
+			if (this._isReadonlyDisabled()) {
+				this._plugins.readonly.enable();
+			}
+			return;
+		}
+
+		let position = { x: this._offset, y: this._offset };
+
+		if (this._isReadonlyEnabled()) {
+			this._plugins.readonly.disable();
+		}
+
+		const _node = this._createNode(nodeType, data);
+
+		if (this._diagram.shouldAddStart(nodeType)) {
+			await this.addStartNode(position);
+		}
+
+		if (this._config.node?.isLinked) {
+			const lastNode = await this._linkToLastNode(_node);
+			if (lastNode) {
+				position = this._calculatePosition(_node, lastNode);
+			}
+		}
+
+		await this._diagram.addNode(_node);
+		await this._plugins.area.translate(_node.id, position);
+
+		if (this._config?.fitToView) {
+			setTimeout(() => {
+				this._diagram.fitToZoom();
+			}, 300);
+		}
+
+		if (this._isReadonlyDisabled()) {
+			this._plugins.readonly.enable();
+		}
+	}
+
+	async removeEndNode() {
+		await this._diagram.removeEndNode();
+	}
+
+	/**
+	 *
+	 * @param _node
+	 * @param lastNode
+	 * @returns
+	 */
+	private _calculatePosition(
+		_node: ContentNode,
+		lastNode: {
+			node: ContentNode;
+			viewNode: NodeView;
+		}
+	): { x: number; y: number } {
+		const isEndNode = _node.type === NODE_TYPE.end;
+		return {
+			x: this._calculatePositionX(
+				lastNode.node.type,
+				lastNode.viewNode.position.x
+			),
+			y: this._calculatePositionY(
+				isEndNode ? NODE_TYPE.end : lastNode.node.type,
+				lastNode.viewNode.position.y
+			)
+		};
+	}
+
+	private _createNode<T = any>(
+		nodeType: NodeType,
+		data: NodeContent<T>,
+		config?: NodeDefinitionData
+	) {
+		return this._diagram.createNode(nodeType, {
+			label: nodeType,
+			type: nodeType,
+			name: data.name,
+			description: data.description,
+			status: data.status,
+			...(config ? config : {}),
+			content: data
+		});
+	}
+
+	addWrapNodesPipe(editor: NodeEditor<Schemes>) {
+		editor.addPipe(async (context) => {
+			if (context.type === 'nodecreate') {
+				if (context.data.type === NODE_TYPE.end) {
+					let node = this._diagram.getLastNode() as ContentNode;
+					node.directions.outputs = IN_OUT_DIRECTION.end;
+					await this._plugins.area.update('node', node.id);
+				} else {
+					return this._changeNodeSocketPosition(context);
+				}
+			}
+
+			if (
+				context.type === 'nodecreated' &&
+				context.data.type !== NODE_TYPE.end
+			) {
+				setTimeout(() => {
+					this._updateNodePosition(context);
+				});
+			}
+
+			return context;
+		});
+	}
+
+	private _changeNodeSocketPosition(context: {
+		type: 'nodecreate';
+		data: BaseNodeClass;
+	}): Root<Schemes> | Promise<Root<Schemes> | undefined> | undefined {
+		const previousNode = this._diagram.getLastViewNode();
+
+		if (previousNode && this._isNearEndBoundary(previousNode)) {
+			context.data.directions.outputs = IN_OUT_DIRECTION.bottom;
+		}
+
+		if (previousNode && this._isOverEndBoundary(context.data, previousNode)) {
+			context.data.directions.inputs = IN_OUT_DIRECTION.top;
+			context.data.directions.outputs = IN_OUT_DIRECTION.end;
+		}
+		return { ...context };
+	}
+
+	private async _linkToLastNode(
+		_addedNode: ContentNode,
+		connectionConfig?: ConnectionConfigType
+	) {
+		let node = this._diagram.getLastNode() as ContentNode;
+		let viewNode = this._diagram.getLastViewNode();
+
+		if (node && viewNode) {
+			await this._diagram.addConnection(node, _addedNode, connectionConfig);
+			return { node, viewNode };
+		}
+
+		return null;
+	}
+
+	/**
+	 *
+	 * @returns
+	 */
+	private _isReadonlyDisabled() {
+		return this._config.readonly && !this._plugins.readonly.enabled;
+	}
+	/**
+	 *
+	 * @returns
+	 */
+	private _isReadonlyEnabled() {
+		return this._config.readonly && this._plugins.readonly.enabled;
+	}
+	/**
+	 *
+	 * @param position
+	 */
+	async addStartNode(position: { x: number; y: number }) {
+		const startNode = this._diagram.createNode(NODE_TYPE.start, {
+			type: NODE_TYPE.start,
+			label: NODE_TYPE.start,
+			name: 'start'
+		});
+
+		await this._diagram.addNode(startNode);
+		await this._plugins.area.translate(startNode.id, position);
+	}
+
+	/**
+	 *
+	 * @param nodeType
+	 * @param y
+	 * @returns
+	 */
+	private _calculatePositionY(nodeType: NodeType, y: number): number {
+		if (nodeType === NODE_TYPE.start) {
+			return Math.abs(
+				Math.floor(
+					y - (this._defaultNodeHeight - this._defaultNodeCircleSize) / 2
+				)
+			);
+		}
+
+		if (nodeType === NODE_TYPE.end) {
+			return Math.abs(
+				Math.floor(
+					y + (this._defaultNodeHeight - this._defaultNodeCircleSize) / 2
+				)
+			);
+		}
+		return y;
+	}
+	/**
+	 *
+	 * @param nodeType
+	 * @param lastNodePositionX
+	 * @returns
+	 */
+	private _calculatePositionX(nodeType: NodeType, lastNodePositionX: number) {
+		const _nodeWidth =
+			nodeType === NODE_TYPE.content
+				? this._defaultNodeWidth
+				: this._defaultNodeCircleSize;
+
+		return lastNodePositionX + this._defaultNodeMargin + _nodeWidth;
+	}
+
+	/**
+	 *
+	 * @param node
+	 * @param previousNode
+	 * @returns
+	 */
+	private _isOverEndBoundary(node: BaseNodeClass, previousNode: NodeView) {
+		const _diagramWidth =
+			Number(this._diagram.diagramClientRect()?.width) - this._defaultNodeMargin;
+		const _width =
+			previousNode.position.x + (node.width + this._defaultNodeMargin) * 2;
+		return _width >= _diagramWidth;
+	}
+	/**
+	 *
+	 * @param previousNode
+	 * @returns
+	 */
+	private _isNearEndBoundary(previousNode: NodeView) {
+		const currentPosition =
+			previousNode.position.x +
+			this._defaultNodeWidth +
+			this._defaultNodeMargin * 2 +
+			this._offset;
+		const wrapLine =
+			Number(this._diagram.diagramClientRect()?.width) -
+			this._defaultNodeWidth * 2;
+		return currentPosition >= wrapLine;
+	}
+
+	private async _updateNodePosition(context: {
+		type: 'nodecreated';
+		data: ContentNode;
+	}) {
+		const _previousNode = this._diagram.getLastNode();
+		const _nodeViewPosition = this._plugins.area.nodeViews.get(
+			context.data.id
+		)?.position;
+
+		if (_previousNode && _nodeViewPosition) {
+			const _diagramWidth = Number(this._diagram.diagramClientRect()?.width);
+			const _currentX = _nodeViewPosition.x + context.data.width;
+
+			if (_currentX >= _diagramWidth) {
+				this._plugins.readonly.disable();
+				const _fNode = this._diagram.editor
+					.getNodes()
+					.find((nd) => nd.type !== NODE_TYPE.start);
+
+				let x = this._offset;
+				if (_fNode) {
+					const _fViewNode = this._plugins.area.nodeViews.get(_fNode.id);
+					x = _fViewNode?.position.x || this._offset;
+				}
+
+				await this._plugins.area.translate(context.data.id, {
+					x: x,
+					y: _nodeViewPosition.y + this._defaultNodeMargin + context.data.height
+				});
+				this._plugins.readonly.enable();
+			}
+		}
+		return context;
+	}
+}