nuxeo-development-framework 4.1.6 → 4.1.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-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();
-  }
-}