nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/diagrams/directive/diagram.directive.ts

@@ -0,0 +1,96 @@
+import {
+	AfterViewInit,
+	ComponentFactoryResolver,
+	Directive,
+	ElementRef,
+	EventEmitter,
+	Injector,
+	Input,
+	OnInit,
+	Output,
+	Renderer2,
+	ViewContainerRef
+} from '@angular/core';
+import { DIAGRAM_HEIGHT } from '../constants';
+import { createDiagramEditor } from '../editor';
+
+import { ZoomControlComponent } from '../components';
+import { DiagramPluginsService, DiagramService } from '../services';
+import { DiagramConfig, DiagramEditorWithPlugins } from '../types';
+
+@Directive({
+	selector: '[appDiagram]',
+	exportAs: 'diagram'
+})
+export class DiagramDirective implements AfterViewInit, OnInit {
+	@Input() height: string = `${DIAGRAM_HEIGHT}px`;
+	@Input() width: string = '100%';
+	@Input() config: DiagramConfig = { readonly: { active: false } };
+	@Input() zoomCtrl = true;
+	@Output() onDiagramReady = new EventEmitter<DiagramEditorWithPlugins>();
+	public diagramEditor!: DiagramEditorWithPlugins;
+	constructor(
+		private _elementRef: ElementRef,
+		private _renderer: Renderer2,
+		private _injector: Injector,
+		private _viewContainerRef: ViewContainerRef,
+		private _resolver: ComponentFactoryResolver,
+		private _diagramService: DiagramService,
+		private _pluginsService: DiagramPluginsService
+	) {}
+
+	get clientRect() {
+		return (
+			this._elementRef.nativeElement as HTMLElement
+		).getBoundingClientRect();
+	}
+
+	ngOnInit(): void {
+		this._appendStyles();
+	}
+
+	private _appendZoomComponent() {
+		if (!this.zoomCtrl) {
+			return;
+		}
+		const factory =
+			this._resolver.resolveComponentFactory(ZoomControlComponent);
+		this._viewContainerRef.createComponent(factory);
+	}
+
+	async ngAfterViewInit() {
+		this._appendZoomComponent();
+		try {
+			const editor = await createDiagramEditor(
+				this._elementRef.nativeElement,
+				this._injector,
+				this.config
+			);
+
+			this._pluginsService.setPlugins(editor);
+			this._diagramService.setEditor(editor);
+			this.diagramEditor = editor;
+			this.onDiagramReady.emit(editor);
+		} catch (error) {
+			console.log(error);
+		}
+	}
+
+	private _appendStyles() {
+		const _requiredStyles = {
+			position: 'var(--diagram-position, relative)',
+			width: `var(--diagram-width, ${this.width})`,
+			height: `var(--diagram-height, ${this.height})`,
+			direction: 'ltr'
+		};
+		if (this.config?.readonly?.active) {
+			this._elementRef.nativeElement.style.setProperty(
+				'--port-offset',
+				'var(--custom-diagram-port-offset , calc(50% - 8px))'
+			);
+		}
+		Object.entries(_requiredStyles).forEach(([key, value]) => {
+			this._renderer.setStyle(this._elementRef.nativeElement, key, value);
+		});
+	}
+}

package/src/lib/components/diagrams/editor/customize.ts

@@ -0,0 +1,106 @@
+import { NodeEditor } from 'rete';
+import {
+  ConnectionComponent,
+  NodeComponent,
+  SocketComponent
+} from 'rete-angular-plugin';
+import { ExtractPayload } from 'rete-angular-plugin/presets/classic/types';
+import {
+  CircleNodeComponent,
+  ContentNodeComponent,
+  CustomConnectionComponent,
+  CustomSocketComponent,
+  GatewayNodeComponent,
+  TemplateNodeComponent
+} from '../components';
+import { NODE_TYPE } from '../constants';
+import {
+  BaseNodeClass,
+  CircleNode,
+  Connection,
+  ContentNode,
+  Socket,
+  TemplateNode
+} from '../models';
+import { GateWayNode } from '../models/gate-way.model';
+import {
+  AngularComponent,
+  DiagramConfig,
+  NodeDefinitionData,
+  NodeType,
+  Schemes
+} from '../types';
+
+/**
+ *
+ * @param config
+ * @returns
+ */
+export const customizeSocket: (
+	config: DiagramConfig
+) => (data: ExtractPayload<Schemes, 'socket'>) => AngularComponent | null =
+	(config) => (data) => {
+		const payload = data.payload as Socket;
+		if (payload.renderType === 'custom' || config.socketType === 'custom') {
+			return CustomSocketComponent;
+		}
+		return SocketComponent;
+	};
+
+/**
+ *
+ * @param config
+ * @param editor
+ * @returns
+ */
+export const customizeNode: (
+	config: DiagramConfig,
+	editor: NodeEditor<Schemes>
+) => (data: ExtractPayload<Schemes, 'node'>) => AngularComponent | null =
+	(config, editor) => (data) => {
+		const node = data.payload as BaseNodeClass;
+		node.config ??= config['node'];
+
+		return initAngularComponentByType(node.type);
+	};
+
+/**
+ *
+ * @param config
+ * @returns
+ */
+export const customizeConnection: (
+	config: DiagramConfig
+) => (data: ExtractPayload<Schemes, 'connection'>) => AngularComponent | null =
+	(config) => (data) => {
+		const payload = data.payload as Connection;
+
+		if (payload.renderType === 'custom' || config.connectionType == 'custom') {
+			return CustomConnectionComponent;
+		}
+
+		return ConnectionComponent;
+	};
+
+export const initNodeByType = (type: NodeType, config: NodeDefinitionData) => {
+	const _nodes: Record<NodeType, typeof ContentNode> = {
+		[NODE_TYPE.start]: CircleNode,
+		[NODE_TYPE.content]: ContentNode,
+		[NODE_TYPE.template]: TemplateNode,
+		[NODE_TYPE.end]: CircleNode,
+		[NODE_TYPE.gateway]: GateWayNode
+	};
+	return new _nodes[type](config) || new ContentNode(config);
+};
+
+export const initAngularComponentByType = (type: NodeType) => {
+	const _components: Record<NodeType, AngularComponent> = {
+		[NODE_TYPE.content]: ContentNodeComponent,
+		[NODE_TYPE.start]: CircleNodeComponent,
+		[NODE_TYPE.end]: CircleNodeComponent,
+		[NODE_TYPE.template]: TemplateNodeComponent,
+		[NODE_TYPE.gateway]: GatewayNodeComponent
+	};
+
+	return _components[type] || NodeComponent;
+};

package/src/lib/components/diagrams/editor/editor.ts

@@ -0,0 +1,152 @@
+//@ts-nocheck
+import { Injector } from '@angular/core';
+import { NodeEditor } from 'rete';
+import { AreaExtensions, AreaPlugin } from 'rete-area-plugin';
+import {
+  AreaExtra,
+  ArrangeProps,
+  DiagramConfig,
+  DiagramEditorWithPlugins,
+  Schemes
+} from '../types';
+
+import { AngularPlugin, Presets as AngularPresets } from 'rete-angular-plugin';
+
+import {
+  Presets as ArrangePresets,
+  AutoArrangePlugin
+} from 'rete-auto-arrange-plugin';
+import {
+  ConnectionPlugin,
+  Presets as ConnectionPresets
+} from 'rete-connection-plugin';
+import {
+  RerouteExtensions,
+  ReroutePlugin
+} from 'rete-connection-reroute-plugin';
+import { ReadonlyPlugin } from 'rete-readonly-plugin';
+import { Socket } from '../models';
+
+import { MinimapPlugin } from 'rete-minimap-plugin';
+import {
+  customizeConnection,
+  customizeNode,
+  customizeSocket
+} from './customize';
+import { initPathPlugin } from './path-plugin';
+import { socketPositionWatcher } from './socket-position-watcher';
+
+export const createDiagramEditor = async (
+	container: HTMLElement,
+	injector: Injector,
+	config: DiagramConfig
+): Promise<DiagramEditorWithPlugins> => {
+	//#region PLUGINS
+	const socket = new Socket({ name: '', renderType: config?.socketType });
+	const editor = new NodeEditor<Schemes>();
+	const area = new AreaPlugin<Schemes, AreaExtra>(container);
+	const connection = new ConnectionPlugin<Schemes, AreaExtra>();
+	const pathPlugin = initPathPlugin(config?.path);
+	const angularRender = new AngularPlugin<Schemes, AreaExtra>({ injector });
+	const readonly = new ReadonlyPlugin<Schemes>();
+	const arrange = new AutoArrangePlugin<Schemes>();
+	const reroute = new ReroutePlugin<Schemes>();
+	const minimap = new MinimapPlugin<Schemes>(config?.minimap?.options);
+
+	//#endregion
+
+	//#region SELECTORS
+	const selector = AreaExtensions.selector();
+	const accumulating = AreaExtensions.accumulateOnCtrl();
+	AreaExtensions.selectableNodes(area, selector, { accumulating });
+	RerouteExtensions.selectablePins(reroute, selector, accumulating);
+	//#endregion
+
+	//#region PRESETS
+
+	arrange.addPreset(
+		config?.presets?.arrange
+			? config?.presets.arrange(editor)
+			: ArrangePresets.classic.setup()
+	);
+
+	angularRender.addPreset(
+		AngularPresets.classic.setup({
+			socketPositionWatcher: socketPositionWatcher(
+				0,
+				config?.path?.vertical,
+				editor
+			),
+			customize: {
+				node: customizeNode(config, editor),
+				connection: customizeConnection(config),
+				socket: customizeSocket(config)
+			}
+		})
+	);
+
+	angularRender.addPreset(
+		AngularPresets.minimap.setup({ size: config?.minimap?.size || 150 })
+	);
+
+	connection.addPreset(ConnectionPresets.classic.setup());
+
+	if (config?.area?.restrict) {
+		const _scaling = config?.area.scaling || { min: 0.5, max: 1.5 };
+		AreaExtensions.restrictor(area, {
+			scaling: () => _scaling
+		});
+	}
+
+	//#endregion
+
+	//#region USE
+
+	if (config?.readonly?.active) {
+		editor.use(readonly.root);
+		area.use(readonly.area);
+	}
+
+	editor.use(area);
+
+	if (!config?.readonly?.active) {
+		// Don't use the connection plugin in readonly mode
+		area.use(connection);
+	}
+
+	if (config?.enableArrange) {
+		area.use(arrange);
+	}
+
+	//@ts-ignore
+	angularRender.use(pathPlugin);
+
+	if (config.reroute) {
+		//@ts-ignore
+		angularRender.use(reroute);
+	}
+	if (config?.minimap?.active) {
+		area.use(minimap);
+	}
+
+	// Render Diagram
+	area.use(angularRender);
+
+	//#endregion
+	return {
+		editor,
+		socket,
+		plugins: {
+			area,
+			connection,
+			arrange,
+			reroute,
+			readonly
+		},
+		destroy: () => area.destroy(),
+		layout: (props?: ArrangeProps) => arrange.layout(props),
+		fitToZoom: () => {
+			AreaExtensions.zoomAt(area, editor.getNodes());
+		}
+	};
+};

package/src/lib/components/diagrams/editor/index.ts

@@ -0,0 +1,5 @@
+export * from './customize';
+export * from './editor';
+export * from './path-plugin';
+
+export * from './socket-position-watcher';

package/src/lib/components/diagrams/editor/overrides/connection-path.transformers.ts

@@ -0,0 +1,63 @@
+import { TransformerFactory } from '../../types';
+import { getRandomNumber } from '../../utilities';
+
+export const createSegmentedPath: TransformerFactory = (
+	connection,
+	options
+) => {
+	const { multiPoints = true, offset = 0 } = options?.transform?.options || {};
+	const isVertical = !!options?.vertical;
+	const direction = connection.direction;
+	return (points) => {
+		if (points.length !== 2) {
+			throw new Error(
+				'Exactly two points are required to create a linear path.'
+			);
+		}
+
+		const [start, end] = points;
+
+		if (!isVertical) {
+			switch (direction) {
+				case 'down': {
+					const offset = getRandomNumber(start.x, start.y, 10, 50, 150);
+					const _points = [
+						{ x: start.x, y: start.y + offset },
+						{ x: end.x, y: end.y + offset }
+					];
+					return [start, ..._points, end];
+				}
+
+				case 'backward': {
+					const _points = [{ x: end.x, y: start.y }];
+					return [start, ..._points, end];
+				}
+
+				case 'forward': {
+					if (end.y < start.y) {
+						const _points = [{ x: start.x, y: end.y }];
+						return [start, ..._points, end];
+					}
+					break;
+				}
+			}
+		}
+
+		if (multiPoints) {
+			const midpointY = (end.y - start.y) / 2 + start.y;
+
+			const intermediatePoints = [
+				{ x: start.x, y: midpointY - offset },
+				{ x: end.x, y: midpointY + offset }
+			];
+
+			return [
+				{ ...start, controlOut: { x: start.x, y: midpointY - offset } },
+				...intermediatePoints,
+				{ ...end, controlIn: { x: end.x, y: midpointY + offset } }
+			];
+		}
+
+		return [start, end];
+	};
+};

package/src/lib/components/diagrams/editor/path-plugin.ts

@@ -0,0 +1,29 @@
+import { curveLinear } from 'd3-shape';
+import { Area2D } from 'rete-area-plugin';
+import {
+  ConnectionPathPlugin,
+  Transformers
+} from 'rete-connection-path-plugin';
+import { Connection } from '../models';
+
+import { PathPluginConfig, Schemes } from '../types';
+import { createSegmentedPath } from './overrides';
+
+export const initPathPlugin: (
+	config?: PathPluginConfig
+) => ConnectionPathPlugin<Schemes, Area2D<Schemes>> = (config) =>
+	new ConnectionPathPlugin<Schemes, Area2D<Schemes>>({
+		curve: (c: Connection) => (c.curve || config?.curve) ?? curveLinear,
+		transformer: (c: Connection) => {
+			if (config?.transform?.active) {
+				return (
+					c?.createSegmentedPath?.(c, config) || createSegmentedPath(c, config)
+				);
+			}
+			return Transformers.classic({
+				vertical: !!config?.vertical,
+				curvature: config?.curvature ?? 0.3
+			});
+		},
+		arrow: (connection: Connection) => (!config?.arrow ? false : config?.arrow)
+	});

package/src/lib/components/diagrams/editor/socket-position-watcher.ts

@@ -0,0 +1,14 @@
+import { NodeEditor } from 'rete';
+import { getDOMSocketPosition } from 'rete-render-utils';
+import { Schemes } from '../types';
+
+export const socketPositionWatcher = (
+  offset = 1,
+  isVertical = false,
+  editor: NodeEditor<Schemes>
+) =>
+  getDOMSocketPosition({
+    offset({ x, y }, nodeId, side, key) {
+      return { x, y };
+    },
+  });

package/src/lib/components/diagrams/models/base-node.model.ts

@@ -0,0 +1,59 @@
+import { TemplateRef } from '@angular/core';
+
+import { ClassicPreset } from 'rete';
+import {
+  IN_OUT_DIRECTION,
+  NODE_HEIGHT,
+  NODE_TYPE,
+  NODE_WIDTH
+} from '../constants';
+import {
+  DiagramConfig,
+  DirectionType,
+  NodeContent,
+  NodeDefinitionData,
+  NodeStatus,
+  NodeType,
+  NotifyEventType,
+  Optional
+} from '../types';
+
+export abstract class BaseNodeClass<T = unknown>
+	extends ClassicPreset.Node
+	implements NodeDefinitionData
+{
+	label: string;
+	template?: TemplateRef<any>;
+	name?: Optional<string>;
+	description?: Optional<string>;
+	type: NodeType = NODE_TYPE.content;
+	status?: NodeStatus | string;
+	width: number = NODE_WIDTH;
+	height: number = NODE_HEIGHT;
+	content?: Optional<NodeContent<Record<string, any>>>;
+	parent?: Optional<string>;
+	config?: Optional<DiagramConfig['node']>;
+	children?: BaseNodeClass<T>[];
+	styleClass?: string;
+	options?: Record<string, any>;
+	directions: Record<'inputs' | 'outputs', DirectionType> = {
+		inputs: IN_OUT_DIRECTION.start,
+		outputs: IN_OUT_DIRECTION.end
+	};
+	notify!: (eventType: NotifyEventType, payload: Record<string, any>) => void;
+
+	constructor(config: NodeDefinitionData) {
+		super(config.label);
+		this.name = config?.name;
+		this.directions = config?.directions || this.directions;
+		this.type = config.type || NODE_TYPE.content;
+		this.description = config?.description;
+		this.status = config?.status;
+		this.width = config?.width || NODE_WIDTH;
+		this.height = config?.height || NODE_HEIGHT;
+		this.content = config?.content;
+		this.config = config?.config;
+		this.styleClass = config?.styleClass;
+		this.options = config?.options;
+	}
+}

package/src/lib/components/diagrams/models/circle-node.model.ts

@@ -0,0 +1,12 @@
+import { NODE_CIRCLE_SIZE } from '../constants';
+import { NodeDefinitionData } from '../types';
+import { BaseNodeClass } from './base-node.model';
+
+export class CircleNode<T = unknown> extends BaseNodeClass<T> {
+  width: number = NODE_CIRCLE_SIZE;
+  height: number = NODE_CIRCLE_SIZE;
+
+  constructor(config: NodeDefinitionData) {
+    super(config);
+  }
+}

package/src/lib/components/diagrams/models/connection.model.ts

@@ -0,0 +1,43 @@
+import { CurveFactory } from 'd3-shape';
+import { ClassicPreset } from 'rete';
+import {
+  ConnectionConfigType,
+  ConnectionDirectionType,
+  ConnectionLabelType,
+  TransformerFactory
+} from '../types';
+import { DiagramUtils } from '../utilities';
+import { BaseNodeClass } from './base-node.model';
+
+export class Connection<
+	Source extends BaseNodeClass = BaseNodeClass,
+	Target extends BaseNodeClass = BaseNodeClass
+> extends ClassicPreset.Connection<Source, Target> {
+	curve?: CurveFactory;
+	createSegmentedPath?: TransformerFactory;
+
+	renderType?: 'default' | 'custom';
+	status?: string;
+	styleClass?: string;
+	label?: string | ConnectionLabelType;
+	sourceNode: Source;
+	targetNode: Target;
+	direction: ConnectionDirectionType;
+
+
+	constructor(source: Source, target: Target, config?: ConnectionConfigType) {
+		super(
+			source,
+			config?.sourceOutput || DiagramUtils.createOutputId(source.id),
+			target,
+			config?.targetInput || DiagramUtils.createInputId(target.id)
+		);
+		this.status = config?.status || target.status;
+		this.styleClass = config?.styleClass;
+		this.label = config?.label;
+		this.renderType = config?.renderType || 'default';
+		this.sourceNode = source;
+		this.targetNode = target;
+		this.direction = config?.direction;
+	}
+}

package/src/lib/components/diagrams/models/content-node.model.ts

@@ -0,0 +1,12 @@
+import {
+  NodeDefinitionData
+} from '../types';
+import { BaseNodeClass } from './base-node.model';
+
+
+
+export class ContentNode<T = unknown> extends BaseNodeClass<T> {
+  constructor(config: NodeDefinitionData) {
+    super(config);
+  }
+}

package/src/lib/components/diagrams/models/gate-way.model.ts

@@ -0,0 +1,13 @@
+import { NODE_GATEWAY_SIZE, NODE_TYPE } from '../constants';
+import { NodeDefinitionData } from '../types';
+import { BaseNodeClass } from './base-node.model';
+
+export class GateWayNode<T = unknown> extends BaseNodeClass<T> {
+	type = NODE_TYPE.gateway;
+	width: number = NODE_GATEWAY_SIZE;
+	height: number = NODE_GATEWAY_SIZE;
+
+	constructor(config: NodeDefinitionData) {
+		super(config);
+	}
+}

package/src/lib/components/diagrams/models/ports.model.ts

@@ -0,0 +1,19 @@
+import { ClassicPreset } from 'rete';
+import { PortModelConfig } from '../types';
+import { Socket } from './socket.model';
+
+export class OutputPort<S extends Socket> extends ClassicPreset.Output<S> {
+	styleClass?: string;
+	constructor(config: PortModelConfig<S>) {
+		super(config.socket, config?.label, config?.multipleConnections !== false);
+		this.styleClass = config?.styleClass;
+	}
+}
+
+export class InputPort<S extends Socket> extends ClassicPreset.Input<S> {
+	styleClass?: string;
+	constructor(config: PortModelConfig<S>) {
+		super(config.socket, config?.label, config?.multipleConnections !== false);
+		this.styleClass = config?.styleClass;
+	}
+}

package/src/lib/components/diagrams/models/socket.model.ts

@@ -0,0 +1,12 @@
+import { ClassicPreset } from 'rete';
+import { SocketConfig } from '../types';
+
+export class Socket extends ClassicPreset.Socket {
+	renderType: 'default' | 'custom' ;
+	styleClass?: string;
+	constructor(config: SocketConfig) {
+		super(config.name);
+    this.renderType = config?.renderType || 'default';
+    this.styleClass = config?.styleClass ;
+	}
+}

package/src/lib/components/diagrams/models/template-node.model.ts

@@ -0,0 +1,16 @@
+import { TemplateRef } from '@angular/core';
+import { NODE_TYPE } from '../constants';
+import { NodeDefinitionData } from '../types';
+import { BaseNodeClass } from './base-node.model';
+
+export class TemplateNode<T = unknown> extends BaseNodeClass<T> {
+  template!: TemplateRef<T>;
+  type = NODE_TYPE.template;
+
+  constructor(config: NodeDefinitionData) {
+    super(config);
+    if (config.template) {
+      this.template = config.template;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { AreaPlugin } from 'rete-area-plugin';
+import { AutoArrangePlugin } from 'rete-auto-arrange-plugin';
+import { ReroutePlugin } from 'rete-connection-reroute-plugin';
+import { ReadonlyPlugin } from 'rete-readonly-plugin';
+import {
+  AreaExtra,
+  DiagramEditorWithPlugins,
+  Schemes
+} from '../types';
+
+@Injectable()
+export class DiagramPluginsService {
+  area!: AreaPlugin<Schemes, AreaExtra>;
+  readonly!: ReadonlyPlugin<Schemes>;
+  arrange!: AutoArrangePlugin<Schemes, never>;
+  reroute!: ReroutePlugin<Schemes>;
+
+  setPlugins({ plugins, layout }: DiagramEditorWithPlugins) {
+    this.area = plugins.area;
+    this.readonly = plugins.readonly;
+    this.arrange = plugins.arrange;
+    this.reroute = plugins.reroute;
+  }
+
+  destroy() {
+    this.area.destroy();
+  }
+}