nuxeo-development-framework 5.6.3 → 5.6.4

package/src/lib/components/diagrams/components/gateway-node/gateway-node.component.scss

@@ -0,0 +1,26 @@
+.gateway-node {
+	--node-radius: 0;
+	--angle: 45deg;
+	--socket-radius: 0;
+	border-width: 0;
+	background: transparent;
+	&__wrapper {
+		width: calc(100% - var(--socket-size, 14px));
+		height: calc(100% - var(--socket-size, 14px));
+		transform: rotate(var(--angle));
+		border: var(--node-border, 1px solid #234990);
+		border-radius: var(--node-radius);
+		background: var(--node-background, #fff);
+	}
+
+	&__content {
+		--rotate: calc(var(--angle) * -1);
+		transform: rotate(var(--rotate));
+		height: 100%;
+		width: 100%;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}

package/src/lib/components/diagrams/components/gateway-node/gateway-node.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import { BaseNodeComponent } from '../base-node.component';
+
+@Component({
+	templateUrl: './gateway-node.component.html',
+	styleUrls: ['../../styles/node.scss', './gateway-node.component.scss']
+})
+export class GatewayNodeComponent extends BaseNodeComponent {}

package/src/lib/components/diagrams/components/gateway-ports.component.ts

@@ -0,0 +1,77 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { BaseNodeClass } from '../models';
+import { DirectionType } from '../types';
+@Component({
+	selector: 'gateway-ports',
+	encapsulation: ViewEncapsulation.None,
+
+	template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`,
+	styles: [
+		`
+			.gateway-port {
+				--socket-vertical-align: top;
+				--width: var(--port-width, var(--socket-size, 14px));
+				--height: var(--port-height, var(--socket-size, 14px));
+				position: absolute;
+				inset-inline: var(--port-inset-inline);
+				inset-block: var(--port-inset-block);
+				display: inline-block;
+				width: var(--width);
+				height: var(--height);
+				&.input-primary-port {
+					--port-inset-inline: calc(var(--width) / -2) auto;
+					--port-inset-block: calc(50% - var(--height) / 2) 0;
+				}
+				&.output-primary-port {
+					--port-inset-inline: auto calc(var(--width) / -2);
+					--port-inset-block: calc(50% - var(--height) / 2) auto;
+				}
+				&.output-secondary-port {
+					--port-inset-inline: calc(50% - var(--width) / 2) auto;
+					--port-inset-block: calc(var(--height) / -2) auto;
+				}
+				&.output-tertiary-port {
+					--port-inset-inline: calc(50% - var(--width) / 2) 0;
+					--port-inset-block: auto calc(var(--height) / -2);
+				}
+			}
+		`
+	]
+})
+export class GatewayPortsComponent {
+	@Input() direction: DirectionType;
+	@Input() data!: BaseNodeClass;
+	@Input() seed: number;
+	@Input() emit!: (data: any) => void;
+	@Input() sortByIndex: (a: unknown, b: unknown) => number;
+}

package/src/lib/components/diagrams/components/node-icon.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'node-icon',
+  template: `
+    <mat-icon *ngIf="!isIconTemplate(icon)">{{ icon }}</mat-icon>
+    <span *ngIf="isIconTemplate(icon)">
+      <ng-container [ngTemplateOutlet]="icon"></ng-container>
+    </span>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'da-node__icon',
+  },
+})
+export class NodeIconComponent {
+  @Input() icon: string | TemplateRef<any>;
+  isIconTemplate(icon: string | TemplateRef<any>) {
+    return icon instanceof TemplateRef;
+  }
+}

package/src/lib/components/diagrams/components/node-inputs.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { BaseNodeClass } from '../models';
+import { DirectionType } from '../types';
+
+@Component({
+	selector: 'node-inputs',
+	encapsulation: ViewEncapsulation.None,
+	styleUrls: ['../styles/ports.scss'],
+	host: {
+		'[class]': " 'node-ports node-ports--inputs  node-ports--' + direction"
+	},
+	template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-ports__port {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`
+})
+export class NodeInputsComponent {
+	@Input() direction: DirectionType;
+	@Input() data!: BaseNodeClass;
+	@Input() seed: number;
+	@Input() emit!: (data: any) => void;
+	@Input() sortByIndex: (a: unknown, b: unknown) => number;
+}

package/src/lib/components/diagrams/components/node-outputs.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { BaseNodeClass } from '../models';
+import { DirectionType } from '../types';
+
+@Component({
+	selector: 'node-outputs',
+	encapsulation: ViewEncapsulation.None,
+	styleUrls: ['../styles/ports.scss'],
+	host: {
+		'[class]': " 'node-ports node-ports--outputs  node-ports--' + direction"
+	},
+	template: `<div
+		class="node-ports__port {{ output.value.styleClass }}"
+		*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+		refComponent
+		[data]="{
+			type: 'socket',
+			side: 'output',
+			key: output.key,
+			nodeId: data.id,
+			payload: output.value?.socket,
+			seed: seed
+		}"
+		[emit]="emit"
+	></div>`
+})
+export class NodeOutputsComponent {
+	@Input() direction: DirectionType;
+	@Input() data!: BaseNodeClass;
+	@Input() seed: number;
+	@Input() emit!: (data: any) => void;
+	@Input() sortByIndex: (a: unknown, b: unknown) => number;
+}

package/src/lib/components/diagrams/components/node-ports.component.ts

@@ -0,0 +1,54 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { BaseNodeClass } from '../models';
+import { DirectionType } from '../types';
+@Component({
+	selector: 'node-ports',
+	encapsulation: ViewEncapsulation.None,
+	styleUrls: ['../styles/ports.scss'],
+	host: {
+		class: 'node-ports',
+		'[class]':
+			"'node-ports--inputs--' + inputsDirection + ' ' + 'node-ports--outputs--' + outputsDirection "
+	},
+	template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-port node-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[title]="input.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="node-port node-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[title]="output.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`
+})
+export class NodePortsComponent {
+	@Input() inputsDirection: DirectionType;
+	@Input() outputsDirection: DirectionType;
+	@Input() data!: BaseNodeClass;
+	@Input() seed: number;
+	@Input() emit!: (data: any) => void;
+	@Input() sortByIndex: (a: unknown, b: unknown) => number;
+}

package/src/lib/components/diagrams/components/remove-button.component.ts

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+	selector: 'node-remove-button',
+	template: `
+		<button
+			mat-icon-button
+			(click)="remove.emit()"
+			(pointerdown)="$event.stopPropagation()"
+			(dblclick)="$event.stopPropagation()"
+			class="remove-icon"
+		>
+			<mat-icon>close</mat-icon>
+		</button>
+	`,
+	styles: [
+		`
+			:host {
+				--size: var(--remove-icon-size, 30px);
+				position: var(--remove-icon-position, absolute);
+				inset: var(--remove-icon-inset, 0 0 auto auto);
+				opacity: var(--remove-icon-opacity, 0);
+				background: var(--remove-icon-background, #fff);
+				width: var(--size);
+				height: var(--size);
+				line-height: var(var(--remove-icon-size), calc(var(--size) - 6));
+				border-radius: var(--remove-icon-radius, 50%);
+				z-index: 2;
+				.remove-icon {
+					border: 1px solid currentColor;
+					border-radius: var(--remove-icon-radius, 50%);
+					width: var(--size);
+					height: var(--size);
+					line-height: var(--remove-icon-size, 24px);
+					background: var(--remove-icon-background, #fff);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+		`
+	]
+})
+export class RemoveButtonComponent {
+	@Output() remove = new EventEmitter();
+}

package/src/lib/components/diagrams/components/status-icon.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { NODE_STATUS } from '../constants';
+import { NodeStatus } from '../types';
+
+@Component({
+  selector: 'status-icon',
+  template: ` <mat-icon>
+    {{ getIcon() }}
+  </mat-icon>`,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection :ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': "'da-node__check-status da-node__check-status--' + status",
+  },
+})
+export class StatusIconComponent {
+  @Input() status: NodeStatus;
+
+  getIcon() {
+    switch (this.status) {
+      case NODE_STATUS.completed:
+        return 'check_circle';
+      case NODE_STATUS.rejected:
+        return 'cancel';
+      default:
+        return '';
+    }
+  }
+}

package/src/lib/components/diagrams/components/template-node/template-node.component.html

@@ -0,0 +1,35 @@
+<div
+	class="da-node da-node--{{ data.type }} {{
+		data?.status ? ' da-node--' + data?.status : ''
+	}} {{ data?.styleClass }}"
+	[style.--node-width]="data.width + 'px'"
+	[style.--node-height]="data.height + 'px'"
+>
+	<node-ports
+		[inputsDirection]="data.directions.inputs"
+		[outputsDirection]="data.directions.outputs"
+		[data]="data"
+		[seed]="seed"
+		[emit]="emit"
+		[sortByIndex]="sortByIndex"
+	></node-ports>
+	<div class="da-node__content">
+		<node-remove-button (remove)="removeNode()" *ngIf="data?.config?.canRemove">
+		</node-remove-button>
+
+		<node-icon
+			*ngIf="data.content?.icon"
+			[icon]="data.content?.icon"
+			class="da-node__icon"
+		></node-icon>
+
+		<ng-container
+			[ngTemplateOutlet]="data?.template || defaultTemplate"
+			[ngTemplateOutletContext]="templateOutletContext"
+		></ng-container>
+
+		<ng-template #defaultTemplate>
+			<div class="da-node__title">{{ data?.name }}</div>
+		</ng-template>
+	</div>
+</div>

package/src/lib/components/diagrams/components/template-node/template-node.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TemplateNode } from '../../models';
+import { BaseNodeComponent } from '../base-node.component';
+
+@Component({
+  templateUrl: './template-node.component.html',
+  styleUrls: ['../../styles/node.scss'],
+  changeDetection: ChangeDetectionStrategy.Default,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+})
+export class TemplateNodeComponent extends BaseNodeComponent<TemplateNode> {
+  ngOnInit(): void {}
+
+  get templateOutletContext() {
+    const { content, description, name, status, id } = this.data;
+
+    return {
+      $implicit: {
+        content: content,
+        description,
+        name,
+        status,
+        id,
+      },
+    };
+  }
+}

package/src/lib/components/diagrams/components/zoom-control.component.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { DiagramPluginsService } from '../services';
+
+@Component({
+  selector: 'app-zoom-control',
+  template: `
+    <button mat-flat-button (click)="zoomOut()">
+      <mat-icon>zoom_out</mat-icon>
+    </button>
+    <button mat-flat-button (click)="zoomIn()">
+      <mat-icon>zoom_in</mat-icon>
+    </button>
+  `,
+  styles: [
+    `
+      :host {
+        position: var(--diagram-zoom-position, absolute);
+        inset-inline: var(--diagram-zoom-inline, auto 5px);
+        inset-block: var(--diagram-zoom-block, 5px auto);
+        background: var(--diagram-zoom-background, #f8f8ff);
+        border-radius: var(--diagram-zoom-radius, 4px);
+        border: var(--diagram-zoom-border, 1px solid #dcdce4);
+        display: var(--diagram-zoom-display, inline-flex);
+        flex-direction: var(--diagram-zoom-direction, row);
+        box-shadow: var(--diagram-zoom-shadow, 0 0 0 0 #eee);
+        .mat-flat-button {
+          background-color: transparent;
+          min-width: 36px;
+        }
+      }
+    `,
+  ],
+})
+export class ZoomControlComponent {
+  private delta = 0.1;
+  constructor(public _plugins: DiagramPluginsService) {}
+
+  zoomOut() {
+    const k = this._plugins.area.area.transform.k;
+    this._plugins.area.area.zoom(k - this.delta);
+  }
+  zoomIn() {
+    const k = this._plugins.area.area.transform.k;
+    this._plugins.area.area.zoom(k + this.delta);
+  }
+}

package/src/lib/components/diagrams/constants/defaults.ts

@@ -0,0 +1,20 @@
+import { DiagramConfig } from "../types";
+
+export const DIAGRAM_DEFAULT_OPTIONS: DiagramConfig = {
+  socketType: 'custom',
+  connectionType: 'custom',
+  fitToView: true,
+  area: {
+    restrict: true,
+    scaling: { min: 0.5, max: 1.3 },
+  },
+  path: {
+    arrow: {
+      color: 'var(--path-color , #5d6481)',
+      marker: 'M-3,-6 L-3,6 L10,0 Z',
+    },
+    transform: {
+      active: true,
+    },
+  },
+};

package/src/lib/components/diagrams/constants/direction.ts

@@ -0,0 +1,6 @@
+export const IN_OUT_DIRECTION= {
+  start: 'start',
+  end: 'end',
+  top: 'top',
+  bottom: 'bottom',
+} as const;

package/src/lib/components/diagrams/constants/message-type.ts

@@ -0,0 +1,4 @@
+export const MESSAGE_TYPE = {
+  configUpdated: 'configUpdated',
+  refresh: 'refresh',
+} as const;

package/src/lib/components/diagrams/constants/node-type.ts

@@ -0,0 +1,7 @@
+export const NODE_TYPE = {
+  start: 'start',
+  content: 'content',
+  template: 'template',
+  gateway : 'gateway',
+  end: 'end',
+} as const;

package/src/lib/components/diagrams/constants/notify-events.ts

@@ -0,0 +1,3 @@
+export const NOTIFY_EVENT = {
+  remove: 'remove',
+} as const;

package/src/lib/components/diagrams/constants/sizes.ts

@@ -0,0 +1,7 @@
+export const NODE_MARGIN = 60;
+export const NODE_WIDTH = 150;
+export const NODE_HEIGHT = 118;
+export const NODE_CIRCLE_SIZE = 72;
+export const NODE_GATEWAY_SIZE = 60;
+export const DIAGRAM_HEIGHT = 600;
+export const SOCKET_WIDTH = 8;

package/src/lib/components/diagrams/constants/status.ts

@@ -0,0 +1,11 @@
+export const NODE_STATUS = {
+	draft: 'draft',
+	completed: 'completed',
+	rejected: 'rejected',
+	inProgress: 'inProgress',
+	upcoming: 'upcoming',
+	approved: 'approved',
+	suspended: 'suspended',
+	ready: 'ready',
+	canceled: 'canceled'
+} as const;

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

@@ -0,0 +1,69 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { ReteModule } from 'rete-angular-plugin';
+import { DiagramDirective } from './directive/diagram.directive';
+
+import {
+  CircleNodeComponent,
+  ConnectionLabelComponent,
+  ContentNodeComponent,
+  CustomConnectionComponent,
+  CustomSocketComponent,
+  GatewayNodeComponent,
+  GatewayPortsComponent,
+  NodeIconComponent,
+  NodeInputsComponent,
+  NodeOutputsComponent,
+  NodePortsComponent,
+  RemoveButtonComponent,
+  StatusIconComponent,
+  TemplateNodeComponent,
+  ZoomControlComponent
+} from './components';
+
+import {
+  DiagramPluginsService,
+  DiagramService,
+  WorkflowService
+} from './services';
+
+
+
+@NgModule({
+	declarations: [
+		CircleNodeComponent,
+		ContentNodeComponent,
+		CustomConnectionComponent,
+		CustomSocketComponent,
+		TemplateNodeComponent,
+		DiagramDirective,
+		RemoveButtonComponent,
+		ZoomControlComponent,
+		NodeIconComponent,
+		StatusIconComponent,
+		NodeInputsComponent,
+		NodeOutputsComponent,
+		GatewayNodeComponent,
+		ConnectionLabelComponent,
+		NodePortsComponent,
+		GatewayPortsComponent
+	],
+	imports: [
+		CommonModule,
+		ReteModule,
+		MatButtonModule,
+		MatIconModule,
+		FormsModule,
+		TranslateModule,
+		MatTooltipModule
+	],
+	exports: [DiagramDirective, ZoomControlComponent],
+	providers: [DiagramService, DiagramPluginsService, WorkflowService]
+})
+export class DiagramsModule {}

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);
+		});
+	}
+}