ngx-vflow 0.6.0 → 0.8.0

package/fesm2022/ngx-vflow.mjs

@@ -1,10 +1,10 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, Directive, computed, effect, untracked, Input, TemplateRef, EventEmitter, Output, DestroyRef, runInInjectionContext, HostListener, Injector, NgZone, Component, ChangeDetectionStrategy, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, Directive, computed, effect, untracked, Input, TemplateRef, EventEmitter, Output, DestroyRef, runInInjectionContext, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { Subject, tap, merge, BehaviorSubject, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, Observable, fromEvent, share, Subscription, startWith } from 'rxjs';
+import { Subject, tap, merge, BehaviorSubject, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, fromEvent, share, Observable, startWith } from 'rxjs';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { path } from 'd3-path';
@@ -59,13 +59,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class ConnectionModel {
-    constructor(connection) {
-        this.connection = connection;
-        this.curve = connection.curve ?? 'bezier';
-        this.type = connection.type ?? 'default';
-        this.validator = connection.validator ?? (() => true);
+    constructor(settings) {
+        this.settings = settings;
+        this.curve = settings.curve ?? 'bezier';
+        this.type = settings.type ?? 'default';
+        this.mode = settings.mode ?? 'strict';
+        const validatorsToRun = this.getValidators(settings);
+        this.validator = (connection) => validatorsToRun.every((v) => v(connection));
+    }
+    getValidators(settings) {
+        const validators = [];
+        validators.push(notSelfValidator);
+        if (this.mode === 'loose') {
+            validators.push(hasSourceAndTargetHandleValidator);
+        }
+        if (settings.validator) {
+            validators.push(settings.validator);
+        }
+        return validators;
     }
 }
+/**
+ * Internal validator that not allows self connections
+ */
+const notSelfValidator = (connection) => {
+    return connection.source !== connection.target;
+};
+const hasSourceAndTargetHandleValidator = (connection) => {
+    return connection.sourceHandle !== undefined && connection.targetHandle !== undefined;
+};
 
 function hashCode(str) {
     return str.split('').reduce((a, b) => {
@@ -97,7 +119,7 @@ class FlowEntitiesService {
                     markersMap.set(hash, e.edge.markers.end);
                 }
             });
-            const connectionMarker = this.connection().connection.marker;
+            const connectionMarker = this.connection().settings.marker;
             if (connectionMarker) {
                 const hash = hashCode(JSON.stringify(connectionMarker));
                 markersMap.set(hash, connectionMarker);
@@ -385,14 +407,14 @@ class FlowStatusService {
     setIdleStatus() {
         this.status.set({ state: 'idle', payload: null });
     }
-    setConnectionStartStatus(sourceNode, sourceHandle) {
-        this.status.set({ state: 'connection-start', payload: { sourceNode, sourceHandle } });
+    setConnectionStartStatus(source, sourceHandle) {
+        this.status.set({ state: 'connection-start', payload: { source, sourceHandle } });
     }
-    setConnectionValidationStatus(valid, sourceNode, targetNode, sourceHandle, targetHandle) {
-        this.status.set({ state: 'connection-validation', payload: { sourceNode, targetNode, sourceHandle, targetHandle, valid } });
+    setConnectionValidationStatus(valid, source, target, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-validation', payload: { source, target, sourceHandle, targetHandle, valid } });
     }
-    setConnectionEndStatus(sourceNode, targetNode, sourceHandle, targetHandle) {
-        this.status.set({ state: 'connection-end', payload: { sourceNode, targetNode, sourceHandle, targetHandle } });
+    setConnectionEndStatus(source, target, sourceHandle, targetHandle) {
+        this.status.set({ state: 'connection-end', payload: { source, target, sourceHandle, targetHandle } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService }); }
@@ -415,6 +437,36 @@ function batchStatusChanges(...changes) {
     }
 }
 
+/**
+ * This function contains a hack-y behavior.
+ * If the handles are of the same type (source-source or target-target),
+ * it returns nodes where source === target and
+ * handles where sourceHandle === targetHandle
+ *
+ * This leads to that notSelfValidator returns false for these cases,
+ * exactly what we need for strict connection type
+ */
+function adjustDirection(connection) {
+    const result = {};
+    if (connection.sourceHandle.rawHandle.type === 'source') {
+        result.source = connection.source;
+        result.sourceHandle = connection.sourceHandle;
+    }
+    else {
+        result.source = connection.target;
+        result.sourceHandle = connection.targetHandle;
+    }
+    if (connection.targetHandle.rawHandle.type === 'target') {
+        result.target = connection.target;
+        result.targetHandle = connection.targetHandle;
+    }
+    else {
+        result.target = connection.source;
+        result.targetHandle = connection.sourceHandle;
+    }
+    return result;
+}
+
 class ConnectionControllerDirective {
     constructor() {
         /**
@@ -431,18 +483,96 @@ class ConnectionControllerDirective {
         this.connectEffect = effect(() => {
             const status = this.statusService.status();
             if (status.state === 'connection-end') {
-                const sourceModel = status.payload.sourceNode;
-                const targetModel = status.payload.targetNode;
-                const source = sourceModel.node.id;
-                const target = targetModel.node.id;
-                const sourceHandle = status.payload.sourceHandle.rawHandle.id;
-                const targetHandle = status.payload.targetHandle.rawHandle.id;
-                const connection = this.flowEntitiesService.connection();
-                if (connection.validator({ source, target, sourceHandle, targetHandle })) {
-                    this.onConnect.emit({ source, target, sourceHandle, targetHandle });
+                let source = status.payload.source;
+                let target = status.payload.target;
+                let sourceHandle = status.payload.sourceHandle;
+                let targetHandle = status.payload.targetHandle;
+                if (this.isStrictMode()) {
+                    const adjusted = adjustDirection({
+                        source: status.payload.source,
+                        sourceHandle: status.payload.sourceHandle,
+                        target: status.payload.target,
+                        targetHandle: status.payload.targetHandle
+                    });
+                    source = adjusted.source;
+                    target = adjusted.target;
+                    sourceHandle = adjusted.sourceHandle;
+                    targetHandle = adjusted.targetHandle;
+                }
+                const sourceId = source.node.id;
+                const targetId = target.node.id;
+                const sourceHandleId = sourceHandle.rawHandle.id;
+                const targetHandleId = targetHandle.rawHandle.id;
+                const connectionModel = this.flowEntitiesService.connection();
+                const connection = {
+                    source: sourceId, target: targetId,
+                    sourceHandle: sourceHandleId, targetHandle: targetHandleId
+                };
+                if (connectionModel.validator(connection)) {
+                    this.onConnect.emit(connection);
                 }
             }
         }, { allowSignalWrites: true });
+        this.isStrictMode = computed(() => this.flowEntitiesService.connection().mode === 'strict');
+    }
+    startConnection(handle) {
+        this.statusService.setConnectionStartStatus(handle.parentNode, handle);
+    }
+    validateConnection(handle) {
+        const status = this.statusService.status();
+        if (status.state === 'connection-start') {
+            let source = status.payload.source;
+            let target = handle.parentNode;
+            let sourceHandle = status.payload.sourceHandle;
+            let targetHandle = handle;
+            if (this.isStrictMode()) {
+                // swap direction (if needed) according to actual source and target of strict mode
+                const adjusted = adjustDirection({
+                    source: status.payload.source,
+                    sourceHandle: status.payload.sourceHandle,
+                    target: handle.parentNode,
+                    targetHandle: handle
+                });
+                source = adjusted.source;
+                target = adjusted.target;
+                sourceHandle = adjusted.sourceHandle;
+                targetHandle = adjusted.targetHandle;
+            }
+            const valid = this.flowEntitiesService.connection().validator({
+                source: source.node.id,
+                target: target.node.id,
+                sourceHandle: sourceHandle.rawHandle.id,
+                targetHandle: targetHandle.rawHandle.id
+            });
+            // TODO: check how react flow handles highlight of handle
+            // if direction changes
+            handle.state.set(valid ? 'valid' : 'invalid');
+            // status is about how we draw connection, so we don't need
+            // swapped diretion here
+            this.statusService.setConnectionValidationStatus(valid, status.payload.source, handle.parentNode, status.payload.sourceHandle, handle);
+        }
+    }
+    resetValidateConnection(targetHandle) {
+        targetHandle.state.set('idle');
+        // drop back to start status
+        const status = this.statusService.status();
+        if (status.state === 'connection-validation') {
+            this.statusService.setConnectionStartStatus(status.payload.source, status.payload.sourceHandle);
+        }
+    }
+    endConnection(handle) {
+        const status = this.statusService.status();
+        if (status.state === 'connection-validation') {
+            const source = status.payload.source;
+            const sourceHandle = status.payload.sourceHandle;
+            const target = status.payload.target;
+            const targetHandle = status.payload.targetHandle;
+            batchStatusChanges(
+            // call to create connection
+            () => this.statusService.setConnectionEndStatus(source, target, sourceHandle, targetHandle), 
+            // when connection created, we need go back to idle status
+            () => this.statusService.setIdleStatus());
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[connectionController]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
@@ -1040,6 +1170,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+class RootPointerDirective {
+    constructor() {
+        this.host = inject(ElementRef).nativeElement;
+        this.initialTouch$ = new Subject();
+        // TODO: do not emit if mouse not down
+        this.mouseMovement$ = fromEvent(this.host, 'mousemove').pipe(map(event => ({
+            x: event.clientX,
+            y: event.clientY,
+            originalEvent: event
+        })), observeOn(animationFrameScheduler), share());
+        this.touchMovement$ = merge(this.initialTouch$, fromEvent(this.host, 'touchmove')).pipe(tap((event) => event.preventDefault()), map((originalEvent) => {
+            const x = originalEvent.touches[0]?.clientX ?? 0;
+            const y = originalEvent.touches[0]?.clientY ?? 0;
+            const target = document.elementFromPoint(x, y);
+            return { x, y, target, originalEvent };
+        }), observeOn(animationFrameScheduler), share());
+        this.touchEnd$ = fromEvent(this.host, 'touchend').pipe(map((originalEvent) => {
+            const x = originalEvent.changedTouches[0]?.clientX ?? 0;
+            const y = originalEvent.changedTouches[0]?.clientY ?? 0;
+            const target = document.elementFromPoint(x, y);
+            return { x, y, target, originalEvent };
+        }), share());
+        this.pointerMovement$ = merge(this.mouseMovement$, this.touchMovement$);
+    }
+    /**
+     * We should know when user started a touch in order to not
+     * show old touch position when connection creation is started
+     */
+    setInitialTouch(event) {
+        this.initialTouch$.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootPointerDirective, selector: "svg[rootPointer]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'svg[rootPointer]' }]
+        }] });
+
+class SpacePointContextDirective {
+    constructor() {
+        this.pointerMovementDirective = inject(RootPointerDirective);
+        this.rootSvg = inject(RootSvgReferenceDirective).element;
+        this.host = inject(ElementRef).nativeElement;
+        /**
+         * Signal with current mouse position in svg space
+         */
+        this.svgCurrentSpacePoint = computed(() => {
+            const movement = this.pointerMovement();
+            if (!movement) {
+                return { x: 0, y: 0 };
+            }
+            return this.documentPointToFlowPoint({
+                x: movement.x,
+                y: movement.y
+            });
+        });
+        this.pointerMovement = toSignal(this.pointerMovementDirective.pointerMovement$);
+    }
+    documentPointToFlowPoint(documentPoint) {
+        const point = this.rootSvg.createSVGPoint();
+        point.x = documentPoint.x;
+        point.y = documentPoint.y;
+        return point.matrixTransform(this.host.getScreenCTM().inverse());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpacePointContextDirective, selector: "g[spacePointContext]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'g[spacePointContext]' }]
+        }] });
+
 class HandleService {
     constructor() {
         this.node = signal(null);
@@ -1063,6 +1266,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+function resizable(elems) {
+    return new Observable((subscriber) => {
+        let ro = new ResizeObserver((entries) => {
+            subscriber.next(entries);
+        });
+        elems.forEach(e => ro.observe(e));
+        return () => ro.disconnect();
+    });
+}
+
+function InjectionContext(target, key, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        if (implementsWithInjector(this)) {
+            return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
+        }
+        else {
+            throw new Error('Class that contains decorated method must extends WithInjectorDirective class');
+        }
+    };
+    // Return the modified descriptor
+    return descriptor;
+}
+const implementsWithInjector = (instance) => {
+    return 'injector' in instance && 'get' in instance.injector;
+};
+
+function Microtask(target, key, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        queueMicrotask(() => {
+            originalMethod?.apply(this, args);
+        });
+    };
+    // Return the modified descriptor
+    return descriptor;
+}
+
 class HandleModel {
     constructor(rawHandle, parentNode) {
         this.rawHandle = rawHandle;
@@ -1138,43 +1379,46 @@ class HandleModel {
     }
 }
 
-function resizable(elems, zone) {
-    return new Observable((subscriber) => {
-        let ro = new ResizeObserver((entries) => {
-            zone.run(() => subscriber.next(entries));
-        });
-        elems.forEach(e => ro.observe(e));
-        return () => ro.disconnect();
-    });
-}
-
-function InjectionContext(target, key, descriptor) {
-    const originalMethod = descriptor.value;
-    descriptor.value = function (...args) {
-        if (implementsWithInjector(this)) {
-            return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
-        }
-        else {
-            throw new Error('Class that contains decorated method must extends WithInjectorDirective class');
-        }
-    };
-    // Return the modified descriptor
-    return descriptor;
-}
-const implementsWithInjector = (instance) => {
-    return 'injector' in instance && 'get' in instance.injector;
-};
-
-function Microtask(target, key, descriptor) {
-    const originalMethod = descriptor.value;
-    descriptor.value = function (...args) {
-        queueMicrotask(() => {
-            originalMethod?.apply(this, args);
-        });
-    };
-    // Return the modified descriptor
-    return descriptor;
+class HandleComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.handleService = inject(HandleService);
+        this.element = inject(ElementRef).nativeElement;
+    }
+    ngOnInit() {
+        this.model = new HandleModel({
+            position: this.position,
+            type: this.type,
+            id: this.id,
+            parentReference: this.element.parentElement,
+            template: this.template
+        }, this.handleService.node());
+        this.handleService.createHandle(this.model);
+        requestAnimationFrame(() => this.model.updateParent());
+    }
+    ngOnDestroy() {
+        this.handleService.destroyHandle(this.model);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+__decorate([
+    InjectionContext
+], HandleComponent.prototype, "ngOnInit", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
+        }], propDecorators: { position: [{
+                type: Input,
+                args: [{ required: true }]
+            }], type: [{
+                type: Input,
+                args: [{ required: true }]
+            }], id: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], ngOnInit: [] } });
 
 class HandleSizeControllerDirective {
     constructor() {
@@ -1212,45 +1456,6 @@ function getChildStrokeWidth(element) {
     return 0;
 }
 
-class RootPointerDirective {
-    constructor() {
-        this.host = inject(ElementRef).nativeElement;
-        this.initialTouch$ = new Subject();
-        // TODO: do not emit if mouse not down
-        this.mouseMovement$ = fromEvent(this.host, 'mousemove').pipe(map(event => ({
-            x: event.clientX,
-            y: event.clientY,
-            originalEvent: event
-        })), observeOn(animationFrameScheduler), share());
-        this.touchMovement$ = merge(this.initialTouch$, fromEvent(this.host, 'touchmove')).pipe(tap((event) => event.preventDefault()), map((originalEvent) => {
-            const x = originalEvent.touches[0]?.clientX ?? 0;
-            const y = originalEvent.touches[0]?.clientY ?? 0;
-            const target = document.elementFromPoint(x, y);
-            return { x, y, target, originalEvent };
-        }), observeOn(animationFrameScheduler), share());
-        this.touchEnd$ = fromEvent(this.host, 'touchend').pipe(map((originalEvent) => {
-            const x = originalEvent.changedTouches[0]?.clientX ?? 0;
-            const y = originalEvent.changedTouches[0]?.clientY ?? 0;
-            const target = document.elementFromPoint(x, y);
-            return { x, y, target, originalEvent };
-        }), share());
-        this.pointerMovement$ = merge(this.mouseMovement$, this.touchMovement$);
-    }
-    /**
-     * We should know when user started a touch in order to not
-     * show old touch position when connection creation is started
-     */
-    setInitialTouch(event) {
-        this.initialTouch$.next(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootPointerDirective, selector: "svg[rootPointer]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'svg[rootPointer]' }]
-        }] });
-
 class PointerDirective {
     constructor() {
         this.hostElement = inject(ElementRef).nativeElement;
@@ -1334,31 +1539,29 @@ class NodeComponent {
     constructor() {
         this.injector = inject(Injector);
         this.handleService = inject(HandleService);
-        this.zone = inject(NgZone);
         this.draggableService = inject(DraggableService);
         this.flowStatusService = inject(FlowStatusService);
-        this.flowEntitiesService = inject(FlowEntitiesService);
         this.nodeRenderingService = inject(NodeRenderingService);
         this.flowSettingsService = inject(FlowSettingsService);
         this.selectionService = inject(SelectionService);
         this.hostRef = inject(ElementRef);
+        this.connectionController = inject(ConnectionControllerDirective);
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation');
         this.styleWidth = computed(() => `${this.nodeModel.size().width}px`);
         this.styleHeight = computed(() => `${this.nodeModel.size().height}px`);
-        this.subscription = new Subscription();
     }
     ngOnInit() {
         this.handleService.node.set(this.nodeModel);
         this.draggableService.toggleDraggable(this.hostRef.nativeElement, this.nodeModel);
-        const sub = this.nodeModel.handles$
-            .pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference), this.zone)
-            .pipe(map(() => handles))), tap((handles) => handles.forEach(h => h.updateParent())))
+        this.nodeModel.handles$
+            .pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference)).pipe(map(() => handles))), tap((handles) => {
+            // TODO (performance) inspect how to avoid calls of this when flow initially rendered
+            handles.forEach(h => h.updateParent());
+        }), takeUntilDestroyed())
             .subscribe();
-        this.subscription.add(sub);
     }
     ngAfterViewInit() {
-        this.setInitialHandles();
         if (this.nodeModel.node.type === 'default') {
             this.nodeModel.size.set({
                 width: this.nodeModel.node.width ?? NodeModel.defaultTypeSize.width,
@@ -1366,69 +1569,30 @@ class NodeComponent {
             });
         }
         if (this.nodeModel.node.type === 'html-template' || this.nodeModel.isComponentType) {
-            const sub = resizable([this.htmlWrapperRef.nativeElement], this.zone)
+            resizable([this.htmlWrapperRef.nativeElement])
                 .pipe(startWith(null), tap(() => {
                 const width = this.htmlWrapperRef.nativeElement.clientWidth;
                 const height = this.htmlWrapperRef.nativeElement.clientHeight;
                 this.nodeModel.size.set({ width, height });
-            })).subscribe();
-            this.subscription.add(sub);
+            }), takeUntilDestroyed()).subscribe();
         }
     }
     ngOnDestroy() {
         this.draggableService.destroy(this.hostRef.nativeElement);
-        this.subscription.unsubscribe();
     }
     startConnection(event, handle) {
         // ignore drag by stopping propagation
         event.stopPropagation();
-        this.flowStatusService.setConnectionStartStatus(this.nodeModel, handle);
+        this.connectionController.startConnection(handle);
     }
-    endConnection() {
-        const status = this.flowStatusService.status();
-        if (status.state === 'connection-validation') {
-            const sourceNode = status.payload.sourceNode;
-            const targetNode = this.nodeModel;
-            const sourceHandle = status.payload.sourceHandle;
-            const targetHandle = status.payload.targetHandle;
-            batchStatusChanges(
-            // call to create connection
-            () => this.flowStatusService.setConnectionEndStatus(sourceNode, targetNode, sourceHandle, targetHandle), 
-            // when connection created, we need go back to idle status
-            () => this.flowStatusService.setIdleStatus());
-        }
+    validateConnection(handle) {
+        this.connectionController.validateConnection(handle);
     }
-    /**
-     * TODO srp
-     */
-    validateTargetHandle(targetHandle) {
-        const status = this.flowStatusService.status();
-        if (status.state === 'connection-start') {
-            const sourceNode = status.payload.sourceNode;
-            const sourceHandle = status.payload.sourceHandle;
-            const source = sourceNode.node.id;
-            const targetNode = this.nodeModel;
-            const target = targetNode.node.id;
-            const valid = this.flowEntitiesService.connection().validator({
-                source,
-                target,
-                sourceHandle: sourceHandle.rawHandle.id,
-                targetHandle: targetHandle.rawHandle.id
-            });
-            targetHandle.state.set(valid ? 'valid' : 'invalid');
-            this.flowStatusService.setConnectionValidationStatus(valid, sourceNode, targetNode, sourceHandle, targetHandle);
-        }
+    resetValidateConnection(targetHandle) {
+        this.connectionController.resetValidateConnection(targetHandle);
     }
-    /**
-     * TODO srp
-     */
-    resetValidateTargetHandle(targetHandle) {
-        targetHandle.state.set('idle');
-        // drop back to start status
-        const status = this.flowStatusService.status();
-        if (status.state === 'connection-validation') {
-            this.flowStatusService.setConnectionStartStatus(status.payload.sourceNode, status.payload.sourceHandle);
-        }
+    endConnection(handle) {
+        this.connectionController.endConnection(handle);
     }
     pullNode() {
         this.nodeRenderingService.pullNode(this.nodeModel);
@@ -1438,32 +1602,20 @@ class NodeComponent {
             this.selectionService.select(this.nodeModel);
         }
     }
-    setInitialHandles() {
-        if (this.nodeModel.node.type === 'default') {
-            this.handleService.createHandle(new HandleModel({
-                position: this.nodeModel.sourcePosition(),
-                type: 'source',
-                parentReference: this.htmlWrapperRef.nativeElement
-            }, this.nodeModel));
-            this.handleService.createHandle(new HandleModel({
-                position: this.nodeModel.targetPosition(),
-                type: 'target',
-                parentReference: this.htmlWrapperRef.nativeElement
-            }, this.nodeModel));
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n    [innerHTML]=\"nodeModel.node.text ?? ''\"\n  ></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (pointerOver)=\"validateTargetHandle(handle)\"\n    (pointerOut)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.node.text ?? ''\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
-    Microtask
-], NodeComponent.prototype, "ngAfterViewInit", null);
+    InjectionContext
+], NodeComponent.prototype, "ngOnInit", null);
 __decorate([
+    Microtask // TODO (performance) check if we need microtask here
+    ,
     InjectionContext
-], NodeComponent.prototype, "setInitialHandles", null);
+], NodeComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n    [innerHTML]=\"nodeModel.node.text ?? ''\"\n  ></div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"handle.rawHandle.type === 'source' ? startConnection($event, handle) : null\"\n    (pointerEnd)=\"handle.rawHandle.type === 'target' ? endConnection() : null\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"handle.rawHandle.type === 'target' && showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(); resetValidateTargetHandle(handle)\"\n    (pointerOver)=\"validateTargetHandle(handle)\"\n    (pointerOut)=\"resetValidateTargetHandle(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.node.text ?? ''\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
         }], propDecorators: { nodeModel: [{
                 type: Input
             }], nodeHtmlTemplate: [{
@@ -1474,7 +1626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], htmlWrapperRef: [{
                 type: ViewChild,
                 args: ['htmlWrapper']
-            }], ngAfterViewInit: [], setInitialHandles: [] } });
+            }], ngOnInit: [], ngAfterViewInit: [] } });
 
 class EdgeLabelComponent {
     constructor() {
@@ -1579,34 +1731,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class SpacePointContextDirective {
-    constructor() {
-        this.pointerMovementDirective = inject(RootPointerDirective);
-        this.rootSvg = inject(RootSvgReferenceDirective).element;
-        this.host = inject(ElementRef).nativeElement;
-        /**
-         * Signal with current mouse position in svg space
-         */
-        this.svgCurrentSpacePoint = computed(() => {
-            const movement = this.pointerMovement();
-            if (!movement) {
-                return { x: 0, y: 0 };
-            }
-            const point = this.rootSvg.createSVGPoint();
-            point.x = movement.x;
-            point.y = movement.y;
-            return point.matrixTransform(this.host.getScreenCTM().inverse());
-        });
-        this.pointerMovement = toSignal(this.pointerMovementDirective.pointerMovement$);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpacePointContextDirective, selector: "g[spacePointContext]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'g[spacePointContext]' }]
-        }] });
-
 class ConnectionComponent {
     constructor() {
         this.flowStatusService = inject(FlowStatusService);
@@ -1644,7 +1768,7 @@ class ConnectionComponent {
             return null;
         });
         this.markerUrl = computed(() => {
-            const marker = this.model.connection.marker;
+            const marker = this.model.settings.marker;
             if (marker) {
                 return `url(#${hashCode(JSON.stringify(marker))})`;
             }
@@ -1735,6 +1859,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [{ required: true }]
             }] } });
 
+function id() {
+    const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
+    return randomLetter + Date.now();
+}
+
+const defaultBg = '#fff';
+const defaultGap = 20;
+const defaultDotSize = 2;
+const defaultDotColor = 'rgb(177, 177, 183)';
+class BackgroundComponent {
+    set background(value) {
+        this.backgroundSignal.set(value);
+    }
+    constructor() {
+        this.viewportService = inject(ViewportService);
+        this.rootSvg = inject(RootSvgReferenceDirective).element;
+        this.backgroundSignal = signal({ type: 'solid', color: defaultBg });
+        this.scaledGap = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'dots') {
+                const zoom = this.viewportService.readableViewport().zoom;
+                return zoom * (background.gap ?? defaultGap);
+            }
+            return 0;
+        });
+        this.x = computed(() => this.viewportService.readableViewport().x % this.scaledGap());
+        this.y = computed(() => this.viewportService.readableViewport().y % this.scaledGap());
+        this.patternColor = computed(() => this.backgroundSignal().color ?? defaultDotColor);
+        this.patternSize = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'dots') {
+                return (this.viewportService.readableViewport().zoom * (background.size ?? defaultDotSize)) / 2;
+            }
+            return 0;
+        });
+        // Without ID there will be pattern collision for several flows on the page
+        // Later pattern ID may be exposed to API
+        this.patternId = id();
+        this.patternUrl = `url(#${this.patternId})`;
+        effect(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'dots') {
+                this.rootSvg.style.backgroundColor = background.backgroundColor ?? defaultBg;
+            }
+            if (background.type === 'solid') {
+                this.rootSvg.style.backgroundColor = background.color;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", inputs: { background: ["background", "background", transform] }, ngImport: i0, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { background: [{
+                type: Input,
+                args: [{ required: true, transform }]
+            }] } });
+function transform(background) {
+    return typeof background === 'string'
+        ? { type: 'solid', color: background }
+        : background;
+}
+
 // TODO: too general purpose nane
 class RootSvgContextDirective {
     constructor() {
@@ -1816,9 +2005,9 @@ class VflowComponent {
          */
         this.maxZoom = 3;
         /**
-         * Background color for flow
+         * Background for flow
          */
-        this.background = '#FFFFFF';
+        this.background = '#fff';
         this.nodeModels = computed(() => this.nodeRenderingService.nodes());
         this.edgeModels = computed(() => this.flowEntitiesService.validEdges());
         // #endregion
@@ -1958,6 +2147,12 @@ class VflowComponent {
     getDetachedEdges() {
         return this.flowEntitiesService.getDetachedEdges().map(e => e.edge);
     }
+    /**
+     * Convert point received from document to point on the flow
+     */
+    documentPointToFlowPoint(point) {
+        return this.spacePointContext.documentPointToFlowPoint(point);
+    }
     // #endregion
     trackNodes(idx, { node }) {
         return node;
@@ -1977,7 +2172,7 @@ class VflowComponent {
             SelectionService,
             FlowSettingsService,
             ComponentEventBusService
-        ], queries: [{ propertyName: "nodeHtmlDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeHtmlTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]", inputs: ["minZoom", "maxZoom"] }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeHtmlDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  class=\"root-svg\"\n  #flow\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeHtmlTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]", inputs: ["background"] }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]", inputs: ["minZoom", "maxZoom"] }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -1995,7 +2190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], hostDirectives: [
                         connectionControllerHostDirective,
                         changesControllerHostDirective
-                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  class=\"root-svg\"\n  #flow\n  [style.backgroundColor]=\"background\"\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  class=\"root-svg\"\n  #flow\n  [attr.width]=\"flowWidth()\"\n  [attr.height]=\"flowHeight()\"\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n    [minZoom]=\"minZoom\"\n    [maxZoom]=\"maxZoom\"\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -2033,49 +2228,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], mapContext: [{
                 type: ViewChild,
                 args: [MapContextDirective]
+            }], spacePointContext: [{
+                type: ViewChild,
+                args: [SpacePointContextDirective]
             }] } });
 
-class HandleComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.handleService = inject(HandleService);
-        this.element = inject(ElementRef).nativeElement;
-    }
-    ngOnInit() {
-        this.model = new HandleModel({
-            position: this.position,
-            type: this.type,
-            id: this.id,
-            parentReference: this.element.parentElement,
-            template: this.template
-        }, this.handleService.node());
-        this.handleService.createHandle(this.model);
-        queueMicrotask(() => this.model.updateParent());
-    }
-    ngOnDestroy() {
-        this.handleService.destroyHandle(this.model);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, ngImport: i0, template: "" }); }
-}
-__decorate([
-    InjectionContext
-], HandleComponent.prototype, "ngOnInit", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'handle', template: "" }]
-        }], propDecorators: { position: [{
-                type: Input,
-                args: [{ required: true }]
-            }], type: [{
-                type: Input,
-                args: [{ required: true }]
-            }], id: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], ngOnInit: [] } });
-
 class SelectableDirective {
     constructor() {
         this.flowSettingsService = inject(FlowSettingsService);
@@ -2116,7 +2273,8 @@ const components = [
     EdgeLabelComponent,
     ConnectionComponent,
     HandleComponent,
-    DefsComponent
+    DefsComponent,
+    BackgroundComponent
 ];
 const directives = [
     SpacePointContextDirective,
@@ -2143,7 +2301,8 @@ class VflowModule {
             EdgeLabelComponent,
             ConnectionComponent,
             HandleComponent,
-            DefsComponent, SpacePointContextDirective,
+            DefsComponent,
+            BackgroundComponent, SpacePointContextDirective,
             MapContextDirective,
             RootSvgReferenceDirective,
             RootSvgContextDirective,