nuxeo-development-framework 5.6.3 → 5.6.4

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,83 @@
+import { TransformerFactory } from '../../types';
+import { getRandomNumber } from '../../utilities';
+import { NODE_MARGIN, NODE_TYPE, NODE_WIDTH } from '../../constants';
+
+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': {
+					const _x = start.x + NODE_WIDTH + NODE_MARGIN;
+
+					if (end.x > _x && end.y > start.y) {
+						return [start, { x: start.x, y: end.y + offset }, end];
+					}
+
+					if (end.x > _x && end.y == start.y) {
+						const y = Math.random() * (70 - 5) + 20 + start.y;
+						const _points = [
+							{ x: start.x, y: y },
+							{ x: end.x, y: y }
+						];
+						return [start, ..._points, end];
+					}
+
+					if (end.y > start.y && end.x > start.x && connection.targetNode.type == NODE_TYPE.end) {
+						const x = Math.random() * (40 - 5) + 15 + start.x;
+						const _points = [
+							{ x: x, y: start.y },
+							{ x: x, y: end.y }
+						];
+						return [start, ..._points, end];
+					}
+
+					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,53 @@
+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
+	};
+	level?: number;
+	edges?: string[];
+	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();
+  }
+}