ngx-vflow 1.1.2 → 1.2.0

package/fesm2022/ngx-vflow.mjs

@@ -165,6 +165,7 @@ class FlowSettingsService {
         this.minZoom = signal(0.5);
         this.maxZoom = signal(3);
         this.background = signal({ type: 'solid', color: '#fff' });
+        this.snapGrid = signal([1, 1]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService }); }
@@ -459,6 +460,7 @@ const round = (num) => Math.round(num * 100) / 100;
 class DraggableService {
     constructor() {
         this.entitiesService = inject(FlowEntitiesService);
+        this.settingsService = inject(FlowSettingsService);
     }
     /**
      * Enable draggable behavior for element.
@@ -517,7 +519,7 @@ class DraggableService {
                     x: round(event.x + initialPositions[index].x),
                     y: round(event.y + initialPositions[index].y),
                 };
-                moveNode(model, point);
+                this.moveNode(model, point);
             });
         });
     }
@@ -530,22 +532,42 @@ class DraggableService {
             : // we only can move current node if it's not selected
                 [model];
     }
+    /**
+     * @todo make it unit testable
+     */
+    moveNode(model, point) {
+        point = this.alignToGrid(point);
+        const parent = model.parent();
+        // keep node in bounds of parent
+        if (parent) {
+            point.x = Math.min(parent.width() - model.width(), point.x);
+            point.x = Math.max(0, point.x);
+            point.y = Math.min(parent.height() - model.height(), point.y);
+            point.y = Math.max(0, point.y);
+        }
+        model.setPoint(point);
+    }
+    /**
+     * @todo make it unit testable
+     */
+    alignToGrid(point) {
+        const [snapX, snapY] = this.settingsService.snapGrid();
+        if (snapX > 1) {
+            point.x = align(point.x, snapX);
+        }
+        if (snapY > 1) {
+            point.y = align(point.y, snapY);
+        }
+        return point;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService, decorators: [{
             type: Injectable
         }] });
-function moveNode(model, point) {
-    const parent = model.parent();
-    // keep node in bounds of parent
-    if (parent) {
-        point.x = Math.min(parent.size().width - model.size().width, point.x);
-        point.x = Math.max(0, point.x);
-        point.y = Math.min(parent.size().height - model.size().height, point.y);
-        point.y = Math.max(0, point.y);
-    }
-    model.setPoint(point);
+function align(num, constant) {
+    return Math.ceil(num / constant) * constant;
 }
 
 class EdgeTemplateDirective {
@@ -1758,6 +1780,7 @@ class EdgeLabelComponent {
     constructor() {
         this.zone = inject(NgZone);
         this.destroyRef = inject(DestroyRef);
+        this.settingsService = inject(FlowSettingsService);
         // TODO: too many inputs
         this.model = input.required();
         this.edgeModel = input.required();
@@ -1777,12 +1800,29 @@ class EdgeLabelComponent {
                 y: point.y - height / 2,
             };
         });
+        this.edgeLabelStyle = computed(() => {
+            const label = this.model().edgeLabel;
+            if (label.type === 'default' && label.style) {
+                const flowBackground = this.settingsService.background();
+                let color = 'transparent';
+                if (flowBackground.type === 'dots') {
+                    color = flowBackground.backgroundColor ?? '#fff';
+                }
+                if (flowBackground.type === 'solid') {
+                    color = flowBackground.color;
+                }
+                label.style.backgroundColor = label.style.backgroundColor ?? color;
+                return label.style;
+            }
+            return null;
+        });
     }
     ngAfterViewInit() {
-        resizable([this.edgeLabelWrapperRef().nativeElement], this.zone)
+        const labelElement = this.edgeLabelWrapperRef().nativeElement;
+        resizable([labelElement], this.zone)
             .pipe(startWith(null), tap(() => {
-            const width = this.edgeLabelWrapperRef().nativeElement.clientWidth + MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME;
-            const height = this.edgeLabelWrapperRef().nativeElement.clientHeight + MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME;
+            const width = labelElement.clientWidth + MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME;
+            const height = labelElement.clientHeight + MAGIC_NUMBER_TO_FIX_GLITCH_IN_CHROME;
             this.model().size.set({ width, height });
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
@@ -1796,11 +1836,11 @@ class EdgeLabelComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model().edgeLabel.type === 'html-template' && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model().size().width\"\n      [attr.height]=\"model().size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model(); as model) {\n  @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n    @if (htmlTemplate(); as htmlTemplate) {\n      <svg:foreignObject\n        [attr.x]=\"edgeLabelPoint().x\"\n        [attr.y]=\"edgeLabelPoint().y\"\n        [attr.width]=\"model.size().width\"\n        [attr.height]=\"model.size().height\">\n        <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n          <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n        </div>\n      </svg:foreignObject>\n    }\n  }\n\n  @if (model.edgeLabel.type === 'default') {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model.size().width\"\n      [attr.height]=\"model.size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n        {{ model.edgeLabel.text }}\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model().edgeLabel.type === 'html-template' && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model().size().width\"\n      [attr.height]=\"model().size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
+            args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model(); as model) {\n  @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n    @if (htmlTemplate(); as htmlTemplate) {\n      <svg:foreignObject\n        [attr.x]=\"edgeLabelPoint().x\"\n        [attr.y]=\"edgeLabelPoint().y\"\n        [attr.width]=\"model.size().width\"\n        [attr.height]=\"model.size().height\">\n        <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n          <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n        </div>\n      </svg:foreignObject>\n    }\n  }\n\n  @if (model.edgeLabel.type === 'default') {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model.size().width\"\n      [attr.height]=\"model.size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n        {{ model.edgeLabel.text }}\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
         }] });
 
 class EdgeComponent {
@@ -3119,6 +3159,12 @@ class VflowComponent {
     get connection() {
         return this.flowEntitiesService.connection();
     }
+    /**
+     * Snap grid for node movement. Passes as [x, y]
+     */
+    set snapGrid(value) {
+        this.flowSettingsService.snapGrid.set(value);
+    }
     // #endregion
     // #region MAIN_INPUTS
     /**
@@ -3220,7 +3266,7 @@ class VflowComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -3281,6 +3327,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: [{
                         transform: (settings) => new ConnectionModel(settings),
                     }]
+            }], snapGrid: [{
+                type: Input
             }], nodes: [{
                 type: Input,
                 args: [{ required: true }]