ngx-vflow 2.0.0 → 2.1.0

package/fesm2022/ngx-vflow.mjs

@@ -759,7 +759,7 @@ class DraggableService {
     moveNode(model, point) {
         const parent = model.parent();
         // keep node in bounds of parent
-        if (parent) {
+        if (model.extent() === 'parent' && 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);
@@ -1059,6 +1059,7 @@ const NODE_DEFAULTS = {
     height: 50,
     draggable: true,
     parentId: null,
+    extent: 'parent',
     preview: { style: {} },
     selected: false,
     color: '#1b262c',
@@ -1093,10 +1094,11 @@ function createBaseNode(node, useDefaults) {
         return {
             id: node.id,
             point: signal(node.point),
-            draggable: signal(node.draggable ?? NODE_DEFAULTS.draggable),
-            parentId: signal(node.parentId ?? NODE_DEFAULTS.parentId),
-            preview: signal(node.preview ?? NODE_DEFAULTS.preview),
-            selected: signal(node.selected ?? NODE_DEFAULTS.selected),
+            draggable: signal(isDefined(node.draggable) ? node.draggable : NODE_DEFAULTS.draggable),
+            parentId: signal(isDefined(node.parentId) ? node.parentId : NODE_DEFAULTS.parentId),
+            extent: signal(isDefined(node.extent) ? node.extent : NODE_DEFAULTS.extent),
+            preview: signal(isDefined(node.preview) ? node.preview : NODE_DEFAULTS.preview),
+            selected: signal(isDefined(node.selected) ? node.selected : NODE_DEFAULTS.selected),
         };
     }
     else {
@@ -1105,6 +1107,7 @@ function createBaseNode(node, useDefaults) {
             point: signal(node.point),
             draggable: isDefined(node.draggable) ? signal(node.draggable) : undefined,
             parentId: isDefined(node.parentId) ? signal(node.parentId) : undefined,
+            extent: isDefined(node.extent) ? signal(node.extent) : undefined,
             preview: isDefined(node.preview) ? signal(node.preview) : undefined,
             selected: isDefined(node.selected) ? signal(node.selected) : undefined,
         };
@@ -1413,6 +1416,7 @@ class NodeModel {
         this.renderOrder = signal(0);
         this.selected = signal(false);
         this.preview = signal({ style: {} });
+        this.extent = signal(NODE_DEFAULTS.extent);
         this.globalPoint = computed(() => {
             let parent = this.parent();
             let x = this.point().x;
@@ -1499,6 +1503,9 @@ class NodeModel {
         if (rawNode.selected) {
             this.selected = rawNode.selected;
         }
+        if (rawNode.extent) {
+            this.extent = rawNode.extent;
+        }
         if (rawNode.type === 'default-group' && rawNode.color) {
             this.color = rawNode.color;
         }
@@ -1569,18 +1576,18 @@ function createEdge(edge, options = { useDefaults: true }) {
     if (options.useDefaults) {
         return {
             id: edge.id,
-            type: edge.type ?? EDGE_DEFAULTS.type,
             source: edge.source,
             target: edge.target,
-            sourceHandle: edge.sourceHandle ?? '',
-            targetHandle: edge.targetHandle ?? '',
-            curve: signal(edge.curve ?? EDGE_DEFAULTS.curve),
-            data: signal(edge.data ?? EDGE_DEFAULTS.data),
-            edgeLabels: signal(edge.edgeLabels ?? EDGE_DEFAULTS.edgeLabels),
-            markers: signal(edge.markers ?? EDGE_DEFAULTS.markers),
-            reconnectable: signal(edge.reconnectable ?? EDGE_DEFAULTS.reconnectable),
-            floating: signal(edge.floating ?? EDGE_DEFAULTS.floating),
-            selected: signal(edge.selected ?? EDGE_DEFAULTS.selected),
+            type: isDefined(edge.type) ? edge.type : EDGE_DEFAULTS.type,
+            sourceHandle: isDefined(edge.sourceHandle) ? edge.sourceHandle : '',
+            targetHandle: isDefined(edge.targetHandle) ? edge.targetHandle : '',
+            curve: signal(isDefined(edge.curve) ? edge.curve : EDGE_DEFAULTS.curve),
+            data: signal(isDefined(edge.data) ? edge.data : EDGE_DEFAULTS.data),
+            edgeLabels: signal(isDefined(edge.edgeLabels) ? edge.edgeLabels : EDGE_DEFAULTS.edgeLabels),
+            markers: signal(isDefined(edge.markers) ? edge.markers : EDGE_DEFAULTS.markers),
+            reconnectable: signal(isDefined(edge.reconnectable) ? edge.reconnectable : EDGE_DEFAULTS.reconnectable),
+            floating: signal(isDefined(edge.floating) ? edge.floating : EDGE_DEFAULTS.floating),
+            selected: signal(isDefined(edge.selected) ? edge.selected : EDGE_DEFAULTS.selected),
         };
     }
     else {
@@ -4263,8 +4270,16 @@ class AlignmentHelperComponent {
             .pipe(filter(isNodeDragEndStatus), map((status) => status.payload.node), map((node) => [node, this.intersections()]), tap(([node, intersections]) => {
             if (intersections) {
                 const snapped = { x: intersections.snappedX, y: intersections.snappedY };
-                const parentIfExists = node.parent() ? [node.parent()] : [];
-                node.setPoint(getSpacePoints(snapped, parentIfExists)[0]);
+                const parent = node.parent();
+                if (parent) {
+                    node.setPoint({
+                        x: snapped.x - parent.globalPoint().x,
+                        y: snapped.y - parent.globalPoint().y,
+                    });
+                }
+                else {
+                    node.setPoint(snapped);
+                }
             }
         }), takeUntilDestroyed())
             .subscribe();