nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/diagrams/styles/node.scss

@@ -0,0 +1,89 @@
+@import './variables.scss';
+
+.da-node {
+	--socket-size: 16px;
+	--width: var(--node-width);
+	--height: var(--node-height);
+	width: var(--width);
+	height: var(--height);
+	display: var(--node-display, flex);
+	justify-content: var(--node-justify, center);
+	align-items: var(--node-items, center);
+	flex-direction: var(--node-direction, column);
+	border: var(--node-border, 1px solid #234990);
+	border-radius: var(--node-radius, 10px);
+	color: var(--node-color, #234990);
+	background: var(--node-background, #fff);
+	box-shadow: var(--node-shadow, unset);
+	cursor: var(--node-cursor, pointer);
+	z-index: var(--node-z-index, 1);
+
+	@each $status, $values in $statuses {
+		&--#{$status} {
+			--node-color: var(
+				--#{map-get($values, base)}-color,
+				#{map-get($values, color)}
+			);
+			--node-background: var(
+				--#{map-get($values, base)}-background,
+				#{map-get($values, background)}
+			);
+			--node-border: var(
+				--#{map-get($values, base)}-border,
+				#{map-get($values, border)}
+			);
+			--node-shadow: var(
+				--#{map-get($values, base)}-shadow,
+				#{map-get($values, shadow)}
+			);
+		}
+	}
+
+	&__check-status {
+		position: absolute;
+		position: var(--check-icon-position, absolute);
+		inset: var(--check-icon-inset, -6px -6px auto auto);
+		color: var(--check-icon-color);
+
+		&--completed {
+			--check-icon-color: var(--status-completed-color);
+		}
+		&--rejected {
+			--check-icon-color: var(--status-rejected-color);
+		}
+	}
+
+	&__content {
+		width: calc(100% - var(--socket-size));
+		height: calc(100% - var(--socket-size));
+		display: var(--node-display, flex);
+		justify-content: var(--node-justify, center);
+		align-items: var(--node-items, center);
+		flex-direction: var(--node-direction, column);
+    z-index: var(--node-z-index, 1);
+	}
+
+	&__title {
+		text-align: center;
+		font-weight: 600;
+	}
+
+	&__description,
+	&__title {
+		color: var(--node-text-color, #28282d);
+		font-size: var(--node-text-font-size, 0.8rem);
+		text-align: var(--node-text-align, center);
+		padding-inline: var(--node-text-inline, 0.4rem);
+	}
+
+	&__icon {
+		position: absolute;
+		inset-inline-start: var(--node-icon-inset-inline, 5px);
+		inset-block-start: var(--node-icon-inset-block, 5px);
+	}
+
+	&:hover {
+		--remove-icon-inset: -8px -8px auto auto;
+		--remove-icon-opacity: 1;
+	}
+}

package/src/lib/components/diagrams/styles/ports.scss

@@ -0,0 +1,169 @@
+.node-ports {
+	--port-size: 16px;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.node-port {
+	position: absolute;
+	inset-inline: var(--port-inset-inline);
+	inset-block: var(--port-inset-block);
+	display: inline-block;
+	width: var(--port-size);
+	height: var(--port-size);
+}
+
+@mixin start($output: false) {
+	--port-inset-inline: 0 auto;
+	--port-inset-block: var(
+			--port-offset,
+			#{if($output, 50%, calc(50% - var(--port-size)))}
+		)
+		auto;
+}
+
+@mixin end($output: false) {
+	--port-inset-inline: auto 0;
+	--port-inset-block: var(
+			--port-offset,
+			#{if($output, 50%, calc(50% - var(--port-size)))}
+		)
+		auto;
+}
+
+@mixin top($output: false) {
+	--port-inset-inline: var(
+			--port-offset,
+			#{if($output, 50%, calc(50% - var(--port-size)))}
+		)
+		auto;
+	--port-inset-block: 0 auto;
+}
+
+@mixin bottom($output: false) {
+	--port-inset-inline: var(
+			--port-offset,
+			#{if($output, 50%, calc(50% - var(--port-size)))}
+		)
+		auto;
+	--port-inset-block: auto 0;
+}
+
+.node-ports--inputs {
+	&--start {
+		.input-primary-port {
+			@include start();
+		}
+		.input-secondary-port {
+			@include top();
+		}
+		.input-tertiary-port {
+			@include end();
+		}
+		.input-quaternary-port {
+			@include bottom();
+		}
+	}
+	&--end {
+		.input-primary-port {
+			@include end();
+		}
+		.input-secondary-port {
+			@include bottom();
+		}
+		.input-tertiary-port {
+			@include start();
+		}
+		.input-quaternary-port {
+			@include top();
+		}
+	}
+
+	&--top {
+		.input-primary-port {
+			@include top();
+		}
+		.input-secondary-port {
+			@include end();
+		}
+		.input-tertiary-port {
+			@include bottom();
+		}
+		.input-quaternary-port {
+			@include start();
+		}
+	}
+	&--bottom {
+		.input-primary-port {
+			@include bottom();
+		}
+		.input-secondary-port {
+			@include start();
+		}
+		.input-tertiary-port {
+			@include top();
+		}
+		.input-quaternary-port {
+			@include end();
+		}
+	}
+}
+.node-ports--outputs {
+	&--top {
+		.output-primary-port {
+			@include top(true);
+		}
+		.output-secondary-port {
+			@include end(true);
+		}
+		.output-tertiary-port {
+			@include bottom(true);
+		}
+		.output-quaternary-port {
+			@include start(true);
+		}
+	}
+	&--bottom {
+		.output-primary-port {
+			@include bottom(true);
+		}
+		.output-secondary-port {
+			@include start(true);
+		}
+		.output-tertiary-port {
+			@include top(true);
+		}
+		.output-quaternary-port {
+			@include end(true);
+		}
+	}
+	&--start {
+		.output-primary-port {
+			@include start(true);
+		}
+		.output-secondary-port {
+			@include top(true);
+		}
+		.output-tertiary-port {
+			@include end(true);
+		}
+		.output-quaternary-port {
+			@include bottom(true);
+		}
+	}
+	&--end {
+		.output-primary-port {
+			@include end(true);
+		}
+		.output-secondary-port {
+			@include bottom(true);
+		}
+		.output-tertiary-port {
+			@include start(true);
+		}
+		.output-quaternary-port {
+			@include top(true);
+		}
+	}
+}

package/src/lib/components/diagrams/styles/variables.scss

@@ -0,0 +1,75 @@
+$statuses: (
+  draft: (
+    base: status-draft,
+    color: #555,
+    background: #f5f5f5,
+    border: 1px solid #555,
+    shadow: unset,
+  ),
+  upcoming: (
+    base: status-upcoming,
+    color: var(--Primary-100, #234990),
+    background: #fff,
+    border: 1px solid var(--node-color, #234990),
+    shadow: unset,
+  ),
+   ready: (
+    base: status-ready,
+    color: var(--Primary-100, #234990),
+    background: #fff,
+    border: 1px solid var(--node-color, #234990),
+    shadow: unset,
+  ),
+  suspended: (
+    base: status-suspended,
+    color: var(--orange-color, #f29339),
+    background: var(--light-orange-color, #fdf4dc),
+    border: 1px solid var(--orange-color, #f29339),
+    shadow:
+      var(
+        --node-shadow,
+        inset 0 0 0 2px var(--node-background),
+        inset 0 0 0 3px var(--orange-color, #f29339)
+      ),
+  ),
+  inProgress: (
+    base: status-progress,
+    color: var(--orange-color, #f29339),
+    background: var(--light-orange-color, #fdf4dc),
+    border: 1px solid var(--orange-color, #f29339),
+    shadow:
+      var(
+        --node-shadow,
+        inset 0 0 0 2px var(--node-background),
+        inset 0 0 0 3px var(--orange-color, #f29339)
+      ),
+  ),
+  completed: (
+    base: status-completed,
+    color: var(--green-color, #05cd99),
+    background: var(--light-green-color, #f0fff0),
+    border: 1px solid var(--green-color, #05cd99),
+    shadow: unset,
+  ),
+  approved: (
+    base: status-completed,
+    color: var(--green-color, #05cd99),
+    background: var(--light-green-color, #f0fff0),
+    border: 1px solid var(--green-color, #05cd99),
+    shadow: unset,
+  ),
+  rejected: (
+    base: status-rejected,
+    color: var(--red-color, #bf0b30),
+    background: var(--light-red-color, #ffe0e7),
+    border: 1px solid var(--red-color, #bf0b30),
+    shadow: unset,
+  ),
+  canceled: (
+    base: status-canceled,
+    color: var(--red-color, #bf0b30),
+    background: var(--light-red-color, #ffe0e7),
+    border: 1px solid var(--red-color, #bf0b30),
+    shadow: unset,
+  ),
+);

package/src/lib/components/diagrams/types/common.type.ts

@@ -0,0 +1,19 @@
+import { Position } from 'rete-connection-plugin/_types/types';
+import { IN_OUT_DIRECTION, MESSAGE_TYPE } from '../constants';
+import { Connection } from '../models/connection.model';
+import { PathPluginConfig } from './path.type';
+
+export type DirectionType =
+	(typeof IN_OUT_DIRECTION)[keyof typeof IN_OUT_DIRECTION];
+
+export type Optional<T = unknown> = T | undefined;
+
+export type MessageType = (typeof MESSAGE_TYPE)[keyof typeof MESSAGE_TYPE];
+
+export type PortType = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+
+
+export type TransformerFactory = (
+  connection : Connection,
+	options: PathPluginConfig
+) => (points: Position[]) => Position[];

package/src/lib/components/diagrams/types/connection-config.type.ts

@@ -0,0 +1,13 @@
+import { ConnectionLabelType } from './connection-label.type';
+
+export type ConnectionConfigType = {
+	renderType?: 'default' | 'custom';
+	sourceOutput?: string;
+	targetInput?: string;
+	status?: string;
+	styleClass?: string;
+	label?: string | ConnectionLabelType;
+	direction?: ConnectionDirectionType;
+};
+
+export type ConnectionDirectionType = 'forward' | 'backward' | 'up' | 'down';

package/src/lib/components/diagrams/types/connection-label.type.ts

@@ -0,0 +1,4 @@
+export type ConnectionLabelType = {
+	text: string;
+	position?: 'center' | 'start' | 'end';
+};

package/src/lib/components/diagrams/types/customization.type.ts

@@ -0,0 +1,20 @@
+
+import { Type } from '@angular/core';
+import { ExtractPayload } from 'rete-angular-plugin/presets/classic/types';
+import { ClassicScheme } from 'rete-connection-plugin/_types/types';
+
+
+
+export type AngularComponent = Type<any>;
+
+
+export type CustomizationProps<Schemes extends ClassicScheme> = {
+  node?: (data: ExtractPayload<Schemes, 'node'>) => AngularComponent | null;
+  connection?: (
+    data: ExtractPayload<Schemes, 'connection'>
+  ) => AngularComponent | null;
+  socket?: (data: ExtractPayload<Schemes, 'socket'>) => AngularComponent | null;
+  control?: (
+    data: ExtractPayload<Schemes, 'control'>
+  ) => AngularComponent | null;
+};

package/src/lib/components/diagrams/types/diagram-config.type.ts

@@ -0,0 +1,42 @@
+import { NodeEditor } from 'rete';
+import { Preset as ArrangePreset } from 'rete-auto-arrange-plugin';
+import { NodeType } from './node.type';
+import { PathPluginConfig } from './path.type';
+import { Schemes } from './schemes.type';
+
+export type DiagramConfig = {
+  readonly?: {
+    active: boolean;
+    wrapNodes?: boolean;
+  };
+  enableArrange?: boolean;
+  reroute?: boolean;
+  config?: boolean;
+  socketType?: 'default' | 'custom';
+  nodeType?: NodeType;
+  connectionType?: 'default' | 'custom';
+  fitToView?: boolean;
+  path?: PathPluginConfig;
+  minimap?: {
+    active: boolean;
+    size?: number;
+    options?:
+      | {
+          minDistance?: number;
+          ratio?: number;
+          boundViewport?: boolean;
+        }
+      | undefined;
+  };
+  area?: {
+    restrict: boolean;
+    scaling?: { min: number; max: number };
+  };
+  node?: {
+    isLinked?: boolean;
+    canRemove?: boolean;
+  };
+  presets?: {
+    arrange?: (editor: NodeEditor<Schemes>) => ArrangePreset;
+  };
+};

package/src/lib/components/diagrams/types/diagram-editor.type.ts

@@ -0,0 +1,28 @@
+import { NodeEditor } from 'rete';
+import { AngularArea2D } from 'rete-angular-plugin';
+import { AreaPlugin } from 'rete-area-plugin';
+import { AutoArrangePlugin } from 'rete-auto-arrange-plugin';
+import { ConnectionPlugin } from 'rete-connection-plugin';
+import { RerouteExtra, ReroutePlugin } from 'rete-connection-reroute-plugin';
+import { MinimapExtra } from 'rete-minimap-plugin';
+import { ReadonlyPlugin } from 'rete-readonly-plugin';
+import { Socket } from '../models';
+import { ArrangeProps } from './layout.type';
+import { Schemes } from './schemes.type';
+
+export type DiagramEditorWithPlugins = {
+	editor: NodeEditor<Schemes>;
+	destroy: () => void;
+	layout: (props?: ArrangeProps) => void;
+	fitToZoom: () => void;
+	socket: Socket;
+	plugins: {
+		area: AreaPlugin<Schemes, AreaExtra>;
+		connection: ConnectionPlugin<Schemes, AreaExtra>;
+		arrange: AutoArrangePlugin<Schemes, never>;
+		reroute: ReroutePlugin<Schemes>;
+		readonly: ReadonlyPlugin<Schemes>;
+	};
+};
+
+export type AreaExtra = AngularArea2D<Schemes> | RerouteExtra | MinimapExtra;

package/src/lib/components/diagrams/types/emitter-type.ts

@@ -0,0 +1,5 @@
+import { BaseSchemes, Root } from 'rete';
+
+export type ExtendedRoot<Scheme extends BaseSchemes> =
+  | { type: 'remove-node-with-connections'; data: Scheme['Node'] }
+  | Root<Scheme>;

package/src/lib/components/diagrams/types/layout.type.ts

@@ -0,0 +1,16 @@
+import { LayoutOptions } from 'elkjs';
+import { Applier } from 'rete-auto-arrange-plugin/_types/appliers';
+
+import { ExpectedSchemes } from 'rete-auto-arrange-plugin';
+import { Schemes } from './schemes.type';
+
+
+type Context<S extends ExpectedSchemes> = {
+  nodes: S['Node'][];
+  connections: S['Connection'][];
+};
+
+export type ArrangeProps<TT = never> = {
+  options?: LayoutOptions;
+  applier?: Applier<Schemes, TT>;
+} & Partial<Context<Schemes>>;

package/src/lib/components/diagrams/types/node-content.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import { NodeStatus } from './node-status.type';
+export type NodeContent<T = any> = {
+  name: string;
+  description?: string;
+  status?: NodeStatus;
+  data: T;
+  icon?: string | TemplateRef<any>;
+};

package/src/lib/components/diagrams/types/node-definition.ts

@@ -0,0 +1,21 @@
+import { TemplateRef } from '@angular/core';
+import { DirectionType } from './common.type';
+import { DiagramConfig } from './diagram-config.type';
+import { NodeContent } from './node-content';
+import { NodeType } from './node.type';
+
+export type NodeDefinitionData<T = any> = {
+	label: string;
+	name?: string;
+	description?: string;
+	type: NodeType;
+	status?: any;
+	width?: number;
+	height?: number;
+	content?: NodeContent<T>;
+	config?: DiagramConfig['node'];
+	directions?: Record<'inputs' | 'outputs', DirectionType>;
+	template?: TemplateRef<any>;
+	styleClass?: string;
+	options?: Record<string, any>;
+};

package/src/lib/components/diagrams/types/node-status.type.ts

@@ -0,0 +1,3 @@
+import { NODE_STATUS } from '../constants';
+
+export type NodeStatus = (typeof NODE_STATUS)[keyof typeof NODE_STATUS];

package/src/lib/components/diagrams/types/node.type.ts

@@ -0,0 +1,3 @@
+import { NODE_TYPE } from '../constants';
+
+export type NodeType = (typeof NODE_TYPE)[keyof typeof NODE_TYPE];

package/src/lib/components/diagrams/types/notify-event.type.ts

@@ -0,0 +1,3 @@
+import { NOTIFY_EVENT } from '../constants';
+
+export type NotifyEventType = (typeof NOTIFY_EVENT)[keyof typeof NOTIFY_EVENT];

package/src/lib/components/diagrams/types/path.type.ts

@@ -0,0 +1,18 @@
+import { CurveFactory } from 'd3-shape';
+
+export type PathPluginConfig = {
+	vertical?: boolean;
+	curve?: CurveFactory;
+	direction?: 'forward' | 'backward' | 'both';
+	curvature?: number | undefined;
+	arrow?:
+		| boolean
+		| {
+				color?: string;
+				marker?: string;
+		  };
+	transform?: {
+		active: boolean;
+		options?: { multiPoints?: boolean; offset?: number };
+	};
+};

package/src/lib/components/diagrams/types/ports-config.type.ts

@@ -0,0 +1,12 @@
+type PortConfig = {
+	label?: string;
+	multipleConnections?: boolean;
+	styleClass?: string;
+};
+
+export type PortModelConfig<S> = {
+	socket: S;
+} & PortConfig;
+
+export type InputConfigType = PortConfig;
+export type OutputConfigType = PortConfig;

package/src/lib/components/diagrams/types/schemes.type.ts

@@ -0,0 +1,8 @@
+import { GetSchemes } from 'rete';
+import { BaseNodeClass, Connection, ContentNode } from '../models';
+
+
+export type Schemes<NOD extends BaseNodeClass = ContentNode> = GetSchemes<
+  NOD,
+  Connection<NOD>
+>;

package/src/lib/components/diagrams/types/socket.type.ts

@@ -0,0 +1,5 @@
+export type SocketConfig = {
+	name: string;
+	renderType: 'default' | 'custom';
+	styleClass?: string;
+};

package/src/lib/components/diagrams/utilities/common.ts

@@ -0,0 +1,42 @@
+import { PortType } from '../types';
+
+export class DiagramUtils {
+
+	static createInputId(id: string, type: PortType = 'primary') {
+		return `${id}-${type}-input`;
+	}
+
+	static createOutputId(id: string, type: PortType = 'primary') {
+		return `${id}-${type}-output`;
+	}
+
+	static createInputClass(type: PortType = 'primary') {
+		return `input-${type}-port`;
+	}
+
+	static createOutputClass(type: PortType = 'primary') {
+		return `output-${type}-port`;
+	}
+
+	static createOutputsConfig(id: string, types: PortType[]) {
+		return types.map((type) => {
+			return {
+				id: DiagramUtils.createOutputId(id, type),
+				config: {
+					styleClass: DiagramUtils.createOutputClass(type)
+				}
+			};
+		});
+	}
+
+	static createInputsConfig(id: string, types: PortType[]) {
+		return types.map((type) => {
+			return {
+				id: DiagramUtils.createInputId(id, type),
+				config: {
+					styleClass: DiagramUtils.createInputClass(type)
+				}
+			};
+		});
+	}
+}

package/src/lib/components/diagrams/utilities/random.ts

@@ -0,0 +1,19 @@
+export function getRandomNumber(
+	x: number,
+	y: number,
+	step = 1,
+	min = 0,
+	max = 1000
+) {
+	// Create a deterministic seed based on x and y
+	const seed = Math.abs(x * 31 + y * 17) % 100000;
+
+	// Generate a pseudo-random number based on the seed
+	const seededRandom = ((seed * 9301 + 49297) % 233280) / 233280;
+
+	// Calculate range
+	const range = Math.floor((max - min) / step) + 1;
+
+	// Return the adjusted number
+	return min + Math.floor(seededRandom * range) * step;
+}