nuxeo-development-framework 4.1.6 → 4.1.7

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

@@ -1,327 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,322 +0,0 @@
-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;
-	}
-}