ngx-vflow 0.8.0 → 0.9.0

package/esm2022/lib/vflow/utils/nodes.mjs

@@ -0,0 +1,36 @@
+export function getNodesBounds(nodes) {
+    if (nodes.length === 0) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };
+    nodes.forEach(node => {
+        const nodeBox = nodeToBox(node);
+        box = getBoundsOfBoxes(box, nodeBox);
+    });
+    return boxToRect(box);
+}
+function nodeToBox(node) {
+    return {
+        x: node.point().x,
+        y: node.point().y,
+        x2: node.point().x + node.size().width,
+        y2: node.point().y + node.size().height,
+    };
+}
+function boxToRect({ x, y, x2, y2 }) {
+    return {
+        x,
+        y,
+        width: x2 - x,
+        height: y2 - y,
+    };
+}
+function getBoundsOfBoxes(box1, box2) {
+    return {
+        x: Math.min(box1.x, box2.x),
+        y: Math.min(box1.y, box2.y),
+        x2: Math.max(box1.x2, box2.x2),
+        y2: Math.max(box1.y2, box2.y2),
+    };
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvdXRpbHMvbm9kZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUEsTUFBTSxVQUFVLGNBQWMsQ0FBQyxLQUFrQjtJQUMvQyxJQUFJLEtBQUssQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO1FBQ3RCLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUE7S0FDM0M7SUFFRCxJQUFJLEdBQUcsR0FBUSxFQUFFLENBQUMsRUFBRSxRQUFRLEVBQUUsQ0FBQyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsQ0FBQyxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsUUFBUSxFQUFFLENBQUE7SUFFekUsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRTtRQUNuQixNQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUE7UUFDL0IsR0FBRyxHQUFHLGdCQUFnQixDQUFDLEdBQUcsRUFBRSxPQUFPLENBQUMsQ0FBQTtJQUN0QyxDQUFDLENBQUMsQ0FBQTtJQUVGLE9BQU8sU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFBO0FBQ3ZCLENBQUM7QUFFRCxTQUFTLFNBQVMsQ0FBQyxJQUFlO0lBQ2hDLE9BQU87UUFDTCxDQUFDLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDakIsQ0FBQyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQ2pCLEVBQUUsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxLQUFLO1FBQ3RDLEVBQUUsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxNQUFNO0tBQ3hDLENBQUE7QUFDSCxDQUFDO0FBRUQsU0FBUyxTQUFTLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQU87SUFDdEMsT0FBTztRQUNMLENBQUM7UUFDRCxDQUFDO1FBQ0QsS0FBSyxFQUFFLEVBQUUsR0FBRyxDQUFDO1FBQ2IsTUFBTSxFQUFFLEVBQUUsR0FBRyxDQUFDO0tBQ2YsQ0FBQTtBQUNILENBQUM7QUFFRCxTQUFTLGdCQUFnQixDQUFDLElBQVMsRUFBRSxJQUFTO0lBQzVDLE9BQU87UUFDTCxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDM0IsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQzNCLEVBQUUsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLEVBQUUsQ0FBQztRQUM5QixFQUFFLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFLENBQUM7S0FDL0IsQ0FBQTtBQUNILENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3ggfSBmcm9tIFwiLi4vaW50ZXJmYWNlcy9ib3hcIjtcbmltcG9ydCB7IFJlY3QgfSBmcm9tIFwiLi4vaW50ZXJmYWNlcy9yZWN0XCI7XG5pbXBvcnQgeyBOb2RlTW9kZWwgfSBmcm9tIFwiLi4vbW9kZWxzL25vZGUubW9kZWxcIjtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldE5vZGVzQm91bmRzKG5vZGVzOiBOb2RlTW9kZWxbXSk6IFJlY3Qge1xuICBpZiAobm9kZXMubGVuZ3RoID09PSAwKSB7XG4gICAgcmV0dXJuIHsgeDogMCwgeTogMCwgd2lkdGg6IDAsIGhlaWdodDogMCB9XG4gIH1cblxuICBsZXQgYm94OiBCb3ggPSB7IHg6IEluZmluaXR5LCB5OiBJbmZpbml0eSwgeDI6IC1JbmZpbml0eSwgeTI6IC1JbmZpbml0eSB9XG5cbiAgbm9kZXMuZm9yRWFjaChub2RlID0+IHtcbiAgICBjb25zdCBub2RlQm94ID0gbm9kZVRvQm94KG5vZGUpXG4gICAgYm94ID0gZ2V0Qm91bmRzT2ZCb3hlcyhib3gsIG5vZGVCb3gpXG4gIH0pXG5cbiAgcmV0dXJuIGJveFRvUmVjdChib3gpXG59XG5cbmZ1bmN0aW9uIG5vZGVUb0JveChub2RlOiBOb2RlTW9kZWwpOiBCb3gge1xuICByZXR1cm4ge1xuICAgIHg6IG5vZGUucG9pbnQoKS54LFxuICAgIHk6IG5vZGUucG9pbnQoKS55LFxuICAgIHgyOiBub2RlLnBvaW50KCkueCArIG5vZGUuc2l6ZSgpLndpZHRoLFxuICAgIHkyOiBub2RlLnBvaW50KCkueSArIG5vZGUuc2l6ZSgpLmhlaWdodCxcbiAgfVxufVxuXG5mdW5jdGlvbiBib3hUb1JlY3QoeyB4LCB5LCB4MiwgeTIgfTogQm94KTogUmVjdCB7XG4gIHJldHVybiB7XG4gICAgeCxcbiAgICB5LFxuICAgIHdpZHRoOiB4MiAtIHgsXG4gICAgaGVpZ2h0OiB5MiAtIHksXG4gIH1cbn1cblxuZnVuY3Rpb24gZ2V0Qm91bmRzT2ZCb3hlcyhib3gxOiBCb3gsIGJveDI6IEJveCk6IEJveCB7XG4gIHJldHVybiB7XG4gICAgeDogTWF0aC5taW4oYm94MS54LCBib3gyLngpLFxuICAgIHk6IE1hdGgubWluKGJveDEueSwgYm94Mi55KSxcbiAgICB4MjogTWF0aC5tYXgoYm94MS54MiwgYm94Mi54MiksXG4gICAgeTI6IE1hdGgubWF4KGJveDEueTIsIGJveDIueTIpLFxuICB9XG59XG4iXX0=

package/esm2022/lib/vflow/utils/viewport.mjs

@@ -0,0 +1,15 @@
+export function getViewportForBounds(bounds, width, height, minZoom, maxZoom, padding) {
+    const xZoom = width / (bounds.width * (1 + padding));
+    const yZoom = height / (bounds.height * (1 + padding));
+    const zoom = Math.min(xZoom, yZoom);
+    const clampedZoom = clamp(zoom, minZoom, maxZoom);
+    const boundsCenterX = bounds.x + bounds.width / 2;
+    const boundsCenterY = bounds.y + bounds.height / 2;
+    const x = width / 2 - boundsCenterX * clampedZoom;
+    const y = height / 2 - boundsCenterY * clampedZoom;
+    return { x, y, zoom: clampedZoom };
+}
+export function clamp(value, min = 0, max = 1) {
+    return Math.min(Math.max(value, min), max);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld3BvcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvdXRpbHMvdmlld3BvcnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0EsTUFBTSxVQUFVLG9CQUFvQixDQUNsQyxNQUFZLEVBQ1osS0FBYSxFQUNiLE1BQWMsRUFDZCxPQUFlLEVBQ2YsT0FBZSxFQUNmLE9BQWU7SUFFZixNQUFNLEtBQUssR0FBRyxLQUFLLEdBQUcsQ0FBQyxNQUFNLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDckQsTUFBTSxLQUFLLEdBQUcsTUFBTSxHQUFHLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQ3ZELE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLE1BQU0sV0FBVyxHQUFHLEtBQUssQ0FBQyxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQyxDQUFDO0lBQ2xELE1BQU0sYUFBYSxHQUFHLE1BQU0sQ0FBQyxDQUFDLEdBQUcsTUFBTSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDbEQsTUFBTSxhQUFhLEdBQUcsTUFBTSxDQUFDLENBQUMsR0FBRyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUNuRCxNQUFNLENBQUMsR0FBRyxLQUFLLEdBQUcsQ0FBQyxHQUFHLGFBQWEsR0FBRyxXQUFXLENBQUM7SUFDbEQsTUFBTSxDQUFDLEdBQUcsTUFBTSxHQUFHLENBQUMsR0FBRyxhQUFhLEdBQUcsV0FBVyxDQUFDO0lBRW5ELE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUUsQ0FBQztBQUVyQyxDQUFDO0FBRUQsTUFBTSxVQUFVLEtBQUssQ0FBQyxLQUFhLEVBQUUsR0FBRyxHQUFHLENBQUMsRUFBRSxHQUFHLEdBQUcsQ0FBQztJQUNuRCxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLEVBQUUsR0FBRyxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUE7QUFDNUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlY3QgfSBmcm9tIFwiLi4vaW50ZXJmYWNlcy9yZWN0XCI7XG5pbXBvcnQgeyBWaWV3cG9ydFN0YXRlIH0gZnJvbSBcIi4uL2ludGVyZmFjZXMvdmlld3BvcnQuaW50ZXJmYWNlXCI7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRWaWV3cG9ydEZvckJvdW5kcyhcbiAgYm91bmRzOiBSZWN0LFxuICB3aWR0aDogbnVtYmVyLFxuICBoZWlnaHQ6IG51bWJlcixcbiAgbWluWm9vbTogbnVtYmVyLFxuICBtYXhab29tOiBudW1iZXIsXG4gIHBhZGRpbmc6IG51bWJlclxuKTogVmlld3BvcnRTdGF0ZSB7XG4gIGNvbnN0IHhab29tID0gd2lkdGggLyAoYm91bmRzLndpZHRoICogKDEgKyBwYWRkaW5nKSk7XG4gIGNvbnN0IHlab29tID0gaGVpZ2h0IC8gKGJvdW5kcy5oZWlnaHQgKiAoMSArIHBhZGRpbmcpKTtcbiAgY29uc3Qgem9vbSA9IE1hdGgubWluKHhab29tLCB5Wm9vbSk7XG4gIGNvbnN0IGNsYW1wZWRab29tID0gY2xhbXAoem9vbSwgbWluWm9vbSwgbWF4Wm9vbSk7XG4gIGNvbnN0IGJvdW5kc0NlbnRlclggPSBib3VuZHMueCArIGJvdW5kcy53aWR0aCAvIDI7XG4gIGNvbnN0IGJvdW5kc0NlbnRlclkgPSBib3VuZHMueSArIGJvdW5kcy5oZWlnaHQgLyAyO1xuICBjb25zdCB4ID0gd2lkdGggLyAyIC0gYm91bmRzQ2VudGVyWCAqIGNsYW1wZWRab29tO1xuICBjb25zdCB5ID0gaGVpZ2h0IC8gMiAtIGJvdW5kc0NlbnRlclkgKiBjbGFtcGVkWm9vbTtcblxuICByZXR1cm4geyB4LCB5LCB6b29tOiBjbGFtcGVkWm9vbSB9O1xuXG59XG5cbmV4cG9ydCBmdW5jdGlvbiBjbGFtcCh2YWx1ZTogbnVtYmVyLCBtaW4gPSAwLCBtYXggPSAxKTogbnVtYmVyIHtcbiAgcmV0dXJuIE1hdGgubWluKE1hdGgubWF4KHZhbHVlLCBtaW4pLCBtYXgpXG59XG4iXX0=

package/esm2022/lib/vflow/vflow.module.mjs

@@ -17,6 +17,7 @@ import { SelectableDirective } from './directives/selectable.directive';
 import { PointerDirective } from './directives/pointer.directive';
 import { RootPointerDirective } from './directives/root-pointer.directive';
 import { BackgroundComponent } from './components/background/background.component';
+import { FlowSizeControllerDirective } from './directives/flow-size-controller.directive';
 import * as i0 from "@angular/core";
 const components = [
     VflowComponent,
@@ -36,7 +37,8 @@ const directives = [
     HandleSizeControllerDirective,
     SelectableDirective,
     PointerDirective,
-    RootPointerDirective
+    RootPointerDirective,
+    FlowSizeControllerDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -61,7 +63,8 @@ export class VflowModule {
             HandleSizeControllerDirective,
             SelectableDirective,
             PointerDirective,
-            RootPointerDirective, NodeHtmlTemplateDirective,
+            RootPointerDirective,
+            FlowSizeControllerDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
@@ -87,4 +90,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     declarations: [...components, ...directives, ...templateDirectives],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmZsb3cubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZmbG93LWxpYi9zcmMvbGliL3ZmbG93L3ZmbG93Lm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDcEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNsRixPQUFPLEVBQUUsMkJBQTJCLEVBQUUsOEJBQThCLEVBQUUscUJBQXFCLEVBQUUsdUJBQXVCLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN6TCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNuRixPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUN4RixPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM3RSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUNsRixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDakUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQzlGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ3hFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDOztBQUVuRixNQUFNLFVBQVUsR0FBRztJQUNqQixjQUFjO0lBQ2QsYUFBYTtJQUNiLGFBQWE7SUFDYixrQkFBa0I7SUFDbEIsbUJBQW1CO0lBQ25CLGVBQWU7SUFDZixhQUFhO0lBQ2IsbUJBQW1CO0NBQ3BCLENBQUE7QUFFRCxNQUFNLFVBQVUsR0FBRztJQUNqQiwwQkFBMEI7SUFDMUIsbUJBQW1CO0lBQ25CLHlCQUF5QjtJQUN6Qix1QkFBdUI7SUFDdkIsNkJBQTZCO0lBQzdCLG1CQUFtQjtJQUNuQixnQkFBZ0I7SUFDaEIsb0JBQW9CO0NBQ3JCLENBQUE7QUFFRCxNQUFNLGtCQUFrQixHQUFHO0lBQ3pCLHlCQUF5QjtJQUN6Qiw4QkFBOEI7SUFDOUIscUJBQXFCO0lBQ3JCLDJCQUEyQjtJQUMzQix1QkFBdUI7Q0FDeEIsQ0FBQTtBQVlELE1BQU0sT0FBTyxXQUFXOytHQUFYLFdBQVc7Z0hBQVgsV0FBVyxpQkF2Q3RCLGNBQWM7WUFDZCxhQUFhO1lBQ2IsYUFBYTtZQUNiLGtCQUFrQjtZQUNsQixtQkFBbUI7WUFDbkIsZUFBZTtZQUNmLGFBQWE7WUFDYixtQkFBbUIsRUFJbkIsMEJBQTBCO1lBQzFCLG1CQUFtQjtZQUNuQix5QkFBeUI7WUFDekIsdUJBQXVCO1lBQ3ZCLDZCQUE2QjtZQUM3QixtQkFBbUI7WUFDbkIsZ0JBQWdCO1lBQ2hCLG9CQUFvQixFQUlwQix5QkFBeUI7WUFDekIsOEJBQThCO1lBQzlCLHFCQUFxQjtZQUNyQiwyQkFBMkI7WUFDM0IsdUJBQXVCLGFBSWIsWUFBWSxhQUVwQixjQUFjO1lBQ2QsZUFBZTtZQUNmLG1CQUFtQixFQVpyQix5QkFBeUI7WUFDekIsOEJBQThCO1lBQzlCLHFCQUFxQjtZQUNyQiwyQkFBMkI7WUFDM0IsdUJBQXVCO2dIQWFaLFdBQVcsWUFUWixZQUFZOzs0RkFTWCxXQUFXO2tCQVZ2QixRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQztvQkFDdkIsT0FBTyxFQUFFO3dCQUNQLGNBQWM7d0JBQ2QsZUFBZTt3QkFDZixtQkFBbUI7d0JBQ25CLEdBQUcsa0JBQWtCO3FCQUN0QjtvQkFDRCxZQUFZLEVBQUUsQ0FBQyxHQUFHLFVBQVUsRUFBRSxHQUFHLFVBQVUsRUFBRSxHQUFHLGtCQUFrQixDQUFDO2lCQUNwRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVmZsb3dDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvdmZsb3cvdmZsb3cuY29tcG9uZW50JztcbmltcG9ydCB7IE5vZGVDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvbm9kZS9ub2RlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNYXBDb250ZXh0RGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL21hcC1jb250ZXh0LmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBFZGdlQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2VkZ2UvZWRnZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgRWRnZUxhYmVsQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2VkZ2UtbGFiZWwvZWRnZS1sYWJlbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29ubmVjdGlvblRlbXBsYXRlRGlyZWN0aXZlLCBFZGdlTGFiZWxIdG1sVGVtcGxhdGVEaXJlY3RpdmUsIEVkZ2VUZW1wbGF0ZURpcmVjdGl2ZSwgSGFuZGxlVGVtcGxhdGVEaXJlY3RpdmUsIE5vZGVIdG1sVGVtcGxhdGVEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvdGVtcGxhdGUuZGlyZWN0aXZlJztcbmltcG9ydCB7IENvbm5lY3Rpb25Db21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvY29ubmVjdGlvbi9jb25uZWN0aW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTcGFjZVBvaW50Q29udGV4dERpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9zcGFjZS1wb2ludC1jb250ZXh0LmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBSb290U3ZnUmVmZXJlbmNlRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL3JlZmVyZW5jZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgUm9vdFN2Z0NvbnRleHREaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvcm9vdC1zdmctY29udGV4dC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgRGVmc0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9kZWZzL2RlZnMuY29tcG9uZW50JztcbmltcG9ydCB7IEhhbmRsZUNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9oYW5kbGUvaGFuZGxlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBIYW5kbGVTaXplQ29udHJvbGxlckRpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9oYW5kbGUtc2l6ZS1jb250cm9sbGVyLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBTZWxlY3RhYmxlRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL3NlbGVjdGFibGUuZGlyZWN0aXZlJztcbmltcG9ydCB7IFBvaW50ZXJEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvcG9pbnRlci5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgUm9vdFBvaW50ZXJEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvcm9vdC1wb2ludGVyLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2JhY2tncm91bmQvYmFja2dyb3VuZC5jb21wb25lbnQnO1xuXG5jb25zdCBjb21wb25lbnRzID0gW1xuICBWZmxvd0NvbXBvbmVudCxcbiAgTm9kZUNvbXBvbmVudCxcbiAgRWRnZUNvbXBvbmVudCxcbiAgRWRnZUxhYmVsQ29tcG9uZW50LFxuICBDb25uZWN0aW9uQ29tcG9uZW50LFxuICBIYW5kbGVDb21wb25lbnQsXG4gIERlZnNDb21wb25lbnQsXG4gIEJhY2tncm91bmRDb21wb25lbnRcbl1cblxuY29uc3QgZGlyZWN0aXZlcyA9IFtcbiAgU3BhY2VQb2ludENvbnRleHREaXJlY3RpdmUsXG4gIE1hcENvbnRleHREaXJlY3RpdmUsXG4gIFJvb3RTdmdSZWZlcmVuY2VEaXJlY3RpdmUsXG4gIFJvb3RTdmdDb250ZXh0RGlyZWN0aXZlLFxuICBIYW5kbGVTaXplQ29udHJvbGxlckRpcmVjdGl2ZSxcbiAgU2VsZWN0YWJsZURpcmVjdGl2ZSxcbiAgUG9pbnRlckRpcmVjdGl2ZSxcbiAgUm9vdFBvaW50ZXJEaXJlY3RpdmVcbl1cblxuY29uc3QgdGVtcGxhdGVEaXJlY3RpdmVzID0gW1xuICBOb2RlSHRtbFRlbXBsYXRlRGlyZWN0aXZlLFxuICBFZGdlTGFiZWxIdG1sVGVtcGxhdGVEaXJlY3RpdmUsXG4gIEVkZ2VUZW1wbGF0ZURpcmVjdGl2ZSxcbiAgQ29ubmVjdGlvblRlbXBsYXRlRGlyZWN0aXZlLFxuICBIYW5kbGVUZW1wbGF0ZURpcmVjdGl2ZVxuXVxuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgZXhwb3J0czogW1xuICAgIFZmbG93Q29tcG9uZW50LFxuICAgIEhhbmRsZUNvbXBvbmVudCxcbiAgICBTZWxlY3RhYmxlRGlyZWN0aXZlLFxuICAgIC4uLnRlbXBsYXRlRGlyZWN0aXZlc1xuICBdLFxuICBkZWNsYXJhdGlvbnM6IFsuLi5jb21wb25lbnRzLCAuLi5kaXJlY3RpdmVzLCAuLi50ZW1wbGF0ZURpcmVjdGl2ZXNdLFxufSlcbmV4cG9ydCBjbGFzcyBWZmxvd01vZHVsZSB7IH1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmZsb3cubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZmbG93LWxpYi9zcmMvbGliL3ZmbG93L3ZmbG93Lm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDcEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNsRixPQUFPLEVBQUUsMkJBQTJCLEVBQUUsOEJBQThCLEVBQUUscUJBQXFCLEVBQUUsdUJBQXVCLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN6TCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNuRixPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUN4RixPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM3RSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUNsRixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDakUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQzlGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ3hFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ25GLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOztBQUUxRixNQUFNLFVBQVUsR0FBRztJQUNqQixjQUFjO0lBQ2QsYUFBYTtJQUNiLGFBQWE7SUFDYixrQkFBa0I7SUFDbEIsbUJBQW1CO0lBQ25CLGVBQWU7SUFDZixhQUFhO0lBQ2IsbUJBQW1CO0NBQ3BCLENBQUE7QUFFRCxNQUFNLFVBQVUsR0FBRztJQUNqQiwwQkFBMEI7SUFDMUIsbUJBQW1CO0lBQ25CLHlCQUF5QjtJQUN6Qix1QkFBdUI7SUFDdkIsNkJBQTZCO0lBQzdCLG1CQUFtQjtJQUNuQixnQkFBZ0I7SUFDaEIsb0JBQW9CO0lBQ3BCLDJCQUEyQjtDQUM1QixDQUFBO0FBRUQsTUFBTSxrQkFBa0IsR0FBRztJQUN6Qix5QkFBeUI7SUFDekIsOEJBQThCO0lBQzlCLHFCQUFxQjtJQUNyQiwyQkFBMkI7SUFDM0IsdUJBQXVCO0NBQ3hCLENBQUE7QUFZRCxNQUFNLE9BQU8sV0FBVzsrR0FBWCxXQUFXO2dIQUFYLFdBQVcsaUJBeEN0QixjQUFjO1lBQ2QsYUFBYTtZQUNiLGFBQWE7WUFDYixrQkFBa0I7WUFDbEIsbUJBQW1CO1lBQ25CLGVBQWU7WUFDZixhQUFhO1lBQ2IsbUJBQW1CLEVBSW5CLDBCQUEwQjtZQUMxQixtQkFBbUI7WUFDbkIseUJBQXlCO1lBQ3pCLHVCQUF1QjtZQUN2Qiw2QkFBNkI7WUFDN0IsbUJBQW1CO1lBQ25CLGdCQUFnQjtZQUNoQixvQkFBb0I7WUFDcEIsMkJBQTJCLEVBSTNCLHlCQUF5QjtZQUN6Qiw4QkFBOEI7WUFDOUIscUJBQXFCO1lBQ3JCLDJCQUEyQjtZQUMzQix1QkFBdUIsYUFJYixZQUFZLGFBRXBCLGNBQWM7WUFDZCxlQUFlO1lBQ2YsbUJBQW1CLEVBWnJCLHlCQUF5QjtZQUN6Qiw4QkFBOEI7WUFDOUIscUJBQXFCO1lBQ3JCLDJCQUEyQjtZQUMzQix1QkFBdUI7Z0hBYVosV0FBVyxZQVRaLFlBQVk7OzRGQVNYLFdBQVc7a0JBVnZCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO29CQUN2QixPQUFPLEVBQUU7d0JBQ1AsY0FBYzt3QkFDZCxlQUFlO3dCQUNmLG1CQUFtQjt3QkFDbkIsR0FBRyxrQkFBa0I7cUJBQ3RCO29CQUNELFlBQVksRUFBRSxDQUFDLEdBQUcsVUFBVSxFQUFFLEdBQUcsVUFBVSxFQUFFLEdBQUcsa0JBQWtCLENBQUM7aUJBQ3BFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBWZmxvd0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy92Zmxvdy92Zmxvdy5jb21wb25lbnQnO1xuaW1wb3J0IHsgTm9kZUNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9ub2RlL25vZGUuY29tcG9uZW50JztcbmltcG9ydCB7IE1hcENvbnRleHREaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvbWFwLWNvbnRleHQuZGlyZWN0aXZlJztcbmltcG9ydCB7IEVkZ2VDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZWRnZS9lZGdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBFZGdlTGFiZWxDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZWRnZS1sYWJlbC9lZGdlLWxhYmVsLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDb25uZWN0aW9uVGVtcGxhdGVEaXJlY3RpdmUsIEVkZ2VMYWJlbEh0bWxUZW1wbGF0ZURpcmVjdGl2ZSwgRWRnZVRlbXBsYXRlRGlyZWN0aXZlLCBIYW5kbGVUZW1wbGF0ZURpcmVjdGl2ZSwgTm9kZUh0bWxUZW1wbGF0ZURpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy90ZW1wbGF0ZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgQ29ubmVjdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jb25uZWN0aW9uL2Nvbm5lY3Rpb24uY29tcG9uZW50JztcbmltcG9ydCB7IFNwYWNlUG9pbnRDb250ZXh0RGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL3NwYWNlLXBvaW50LWNvbnRleHQuZGlyZWN0aXZlJztcbmltcG9ydCB7IFJvb3RTdmdSZWZlcmVuY2VEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvcmVmZXJlbmNlLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBSb290U3ZnQ29udGV4dERpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9yb290LXN2Zy1jb250ZXh0LmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBEZWZzQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RlZnMvZGVmcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgSGFuZGxlQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2hhbmRsZS9oYW5kbGUuY29tcG9uZW50JztcbmltcG9ydCB7IEhhbmRsZVNpemVDb250cm9sbGVyRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL2hhbmRsZS1zaXplLWNvbnRyb2xsZXIuZGlyZWN0aXZlJztcbmltcG9ydCB7IFNlbGVjdGFibGVEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvc2VsZWN0YWJsZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgUG9pbnRlckRpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9wb2ludGVyLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBSb290UG9pbnRlckRpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9yb290LXBvaW50ZXIuZGlyZWN0aXZlJztcbmltcG9ydCB7IEJhY2tncm91bmRDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvYmFja2dyb3VuZC9iYWNrZ3JvdW5kLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGbG93U2l6ZUNvbnRyb2xsZXJEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvZmxvdy1zaXplLWNvbnRyb2xsZXIuZGlyZWN0aXZlJztcblxuY29uc3QgY29tcG9uZW50cyA9IFtcbiAgVmZsb3dDb21wb25lbnQsXG4gIE5vZGVDb21wb25lbnQsXG4gIEVkZ2VDb21wb25lbnQsXG4gIEVkZ2VMYWJlbENvbXBvbmVudCxcbiAgQ29ubmVjdGlvbkNvbXBvbmVudCxcbiAgSGFuZGxlQ29tcG9uZW50LFxuICBEZWZzQ29tcG9uZW50LFxuICBCYWNrZ3JvdW5kQ29tcG9uZW50XG5dXG5cbmNvbnN0IGRpcmVjdGl2ZXMgPSBbXG4gIFNwYWNlUG9pbnRDb250ZXh0RGlyZWN0aXZlLFxuICBNYXBDb250ZXh0RGlyZWN0aXZlLFxuICBSb290U3ZnUmVmZXJlbmNlRGlyZWN0aXZlLFxuICBSb290U3ZnQ29udGV4dERpcmVjdGl2ZSxcbiAgSGFuZGxlU2l6ZUNvbnRyb2xsZXJEaXJlY3RpdmUsXG4gIFNlbGVjdGFibGVEaXJlY3RpdmUsXG4gIFBvaW50ZXJEaXJlY3RpdmUsXG4gIFJvb3RQb2ludGVyRGlyZWN0aXZlLFxuICBGbG93U2l6ZUNvbnRyb2xsZXJEaXJlY3RpdmVcbl1cblxuY29uc3QgdGVtcGxhdGVEaXJlY3RpdmVzID0gW1xuICBOb2RlSHRtbFRlbXBsYXRlRGlyZWN0aXZlLFxuICBFZGdlTGFiZWxIdG1sVGVtcGxhdGVEaXJlY3RpdmUsXG4gIEVkZ2VUZW1wbGF0ZURpcmVjdGl2ZSxcbiAgQ29ubmVjdGlvblRlbXBsYXRlRGlyZWN0aXZlLFxuICBIYW5kbGVUZW1wbGF0ZURpcmVjdGl2ZVxuXVxuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgZXhwb3J0czogW1xuICAgIFZmbG93Q29tcG9uZW50LFxuICAgIEhhbmRsZUNvbXBvbmVudCxcbiAgICBTZWxlY3RhYmxlRGlyZWN0aXZlLFxuICAgIC4uLnRlbXBsYXRlRGlyZWN0aXZlc1xuICBdLFxuICBkZWNsYXJhdGlvbnM6IFsuLi5jb21wb25lbnRzLCAuLi5kaXJlY3RpdmVzLCAuLi50ZW1wbGF0ZURpcmVjdGl2ZXNdLFxufSlcbmV4cG9ydCBjbGFzcyBWZmxvd01vZHVsZSB7IH1cbiJdfQ==

package/esm2022/public-api.mjs

@@ -11,6 +11,7 @@ export * from './lib/vflow/interfaces/connection-settings.interface';
 export * from './lib/vflow/interfaces/handle-positions.interface';
 export * from './lib/vflow/interfaces/marker.interface';
 export * from './lib/vflow/interfaces/component-node-event.interface';
+export * from './lib/vflow/interfaces/fit-view-options.interface';
 // Types
 export * from './lib/vflow/types/node-change.type';
 export * from './lib/vflow/types/edge-change.type';
@@ -26,4 +27,4 @@ export * from './lib/vflow/directives/template.directive';
 export * from './lib/vflow/directives/connection-controller.directive';
 export * from './lib/vflow/directives/changes-controller.directive';
 export * from './lib/vflow/directives/selectable.directive';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsVUFBVTtBQUNWLGNBQWMsMEJBQTBCLENBQUM7QUFFekMsYUFBYTtBQUNiLGNBQWMsdUNBQXVDLENBQUM7QUFDdEQsY0FBYyx3Q0FBd0MsQ0FBQztBQUN2RCxjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELGNBQWMsNkNBQTZDLENBQUM7QUFDNUQsY0FBYyw2Q0FBNkMsQ0FBQztBQUM1RCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsc0RBQXNELENBQUM7QUFDckUsY0FBYyxtREFBbUQsQ0FBQztBQUNsRSxjQUFjLHlDQUF5QyxDQUFDO0FBRXhELGNBQWMsdURBQXVELENBQUM7QUFFdEUsUUFBUTtBQUNSLGNBQWMsb0NBQW9DLENBQUM7QUFDbkQsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYyx3Q0FBd0MsQ0FBQztBQUV2RCxhQUFhO0FBQ2IsY0FBYyw4Q0FBOEMsQ0FBQztBQUM3RCxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMscURBQXFELENBQUM7QUFFcEUsYUFBYTtBQUNiLGNBQWMsMkNBQTJDLENBQUM7QUFDMUQsY0FBYyx3REFBd0QsQ0FBQztBQUN2RSxjQUFjLHFEQUFxRCxDQUFDO0FBQ3BFLGNBQWMsNkNBQTZDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBNb2R1bGVzXG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy92Zmxvdy5tb2R1bGUnO1xuXG4vLyBJbnRlcmZhY2VzXG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL25vZGUuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvcG9pbnQuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvZWRnZS5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9lZGdlLWxhYmVsLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL2Nvbm5lY3Rpb24uaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvY29ubmVjdGlvbi5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9jb25uZWN0aW9uLXNldHRpbmdzLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL2hhbmRsZS1wb3NpdGlvbnMuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvbWFya2VyLmludGVyZmFjZSc7XG5leHBvcnQgeyBWaWV3cG9ydFN0YXRlIH0gZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy92aWV3cG9ydC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9jb21wb25lbnQtbm9kZS1ldmVudC5pbnRlcmZhY2UnO1xuXG4vLyBUeXBlc1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvdHlwZXMvbm9kZS1jaGFuZ2UudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy90eXBlcy9lZGdlLWNoYW5nZS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L3R5cGVzL3Bvc2l0aW9uLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvdHlwZXMvYmFja2dyb3VuZC50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L3R5cGVzL2Nvbm5lY3Rpb24tbW9kZS50eXBlJztcblxuLy8gQ29tcG9uZW50c1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvY29tcG9uZW50cy92Zmxvdy92Zmxvdy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvY29tcG9uZW50cy9oYW5kbGUvaGFuZGxlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9wdWJsaWMtY29tcG9uZW50cy9jdXN0b20tbm9kZS5jb21wb25lbnQnO1xuXG4vLyBEaXJlY3RpdmVzXG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9kaXJlY3RpdmVzL3RlbXBsYXRlLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9kaXJlY3RpdmVzL2Nvbm5lY3Rpb24tY29udHJvbGxlci5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvZGlyZWN0aXZlcy9jaGFuZ2VzLWNvbnRyb2xsZXIuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2RpcmVjdGl2ZXMvc2VsZWN0YWJsZS5kaXJlY3RpdmUnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsVUFBVTtBQUNWLGNBQWMsMEJBQTBCLENBQUM7QUFFekMsYUFBYTtBQUNiLGNBQWMsdUNBQXVDLENBQUM7QUFDdEQsY0FBYyx3Q0FBd0MsQ0FBQztBQUN2RCxjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELGNBQWMsNkNBQTZDLENBQUM7QUFDNUQsY0FBYyw2Q0FBNkMsQ0FBQztBQUM1RCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsc0RBQXNELENBQUM7QUFDckUsY0FBYyxtREFBbUQsQ0FBQztBQUNsRSxjQUFjLHlDQUF5QyxDQUFDO0FBRXhELGNBQWMsdURBQXVELENBQUM7QUFDdEUsY0FBYyxtREFBbUQsQ0FBQztBQUVsRSxRQUFRO0FBQ1IsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLHdDQUF3QyxDQUFDO0FBRXZELGFBQWE7QUFDYixjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsZ0RBQWdELENBQUM7QUFDL0QsY0FBYyxxREFBcUQsQ0FBQztBQUVwRSxhQUFhO0FBQ2IsY0FBYywyQ0FBMkMsQ0FBQztBQUMxRCxjQUFjLHdEQUF3RCxDQUFDO0FBQ3ZFLGNBQWMscURBQXFELENBQUM7QUFDcEUsY0FBYyw2Q0FBNkMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vIE1vZHVsZXNcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L3ZmbG93Lm1vZHVsZSc7XG5cbi8vIEludGVyZmFjZXNcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvbm9kZS5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9wb2ludC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9lZGdlLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL2VkZ2UtbGFiZWwuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvY29ubmVjdGlvbi5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9jb25uZWN0aW9uLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL2Nvbm5lY3Rpb24tc2V0dGluZ3MuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvaGFuZGxlLXBvc2l0aW9ucy5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9tYXJrZXIuaW50ZXJmYWNlJztcbmV4cG9ydCB7IFZpZXdwb3J0U3RhdGUgfSBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL3ZpZXdwb3J0LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL2NvbXBvbmVudC1ub2RlLWV2ZW50LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL2ZpdC12aWV3LW9wdGlvbnMuaW50ZXJmYWNlJztcblxuLy8gVHlwZXNcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L3R5cGVzL25vZGUtY2hhbmdlLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvdHlwZXMvZWRnZS1jaGFuZ2UudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy90eXBlcy9wb3NpdGlvbi50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L3R5cGVzL2JhY2tncm91bmQudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy90eXBlcy9jb25uZWN0aW9uLW1vZGUudHlwZSc7XG5cbi8vIENvbXBvbmVudHNcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2NvbXBvbmVudHMvdmZsb3cvdmZsb3cuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2NvbXBvbmVudHMvaGFuZGxlL2hhbmRsZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvcHVibGljLWNvbXBvbmVudHMvY3VzdG9tLW5vZGUuY29tcG9uZW50JztcblxuLy8gRGlyZWN0aXZlc1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvZGlyZWN0aXZlcy90ZW1wbGF0ZS5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvZGlyZWN0aXZlcy9jb25uZWN0aW9uLWNvbnRyb2xsZXIuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2RpcmVjdGl2ZXMvY2hhbmdlcy1jb250cm9sbGVyLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9kaXJlY3RpdmVzL3NlbGVjdGFibGUuZGlyZWN0aXZlJztcbiJdfQ==

package/fesm2022/ngx-vflow.mjs

@@ -1,62 +1,50 @@
 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, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, HostBinding, 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, fromEvent, share, Observable, startWith } from 'rxjs';
+import { Subject, tap, merge, BehaviorSubject, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, zip, asyncScheduler, 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';
 import { __decorate } from 'tslib';
 
-class ViewportService {
-    constructor() {
-        /**
-         * Internal signal that accepts value from user by lib api
-         * When this signal changes, lib sets new view state and update readableViewport signal
-         */
-        this.writableViewport = signal({
-            changeType: 'initial',
-            state: ViewportService.getDefaultViewport()
-        });
-        /**
-         * Public signal with viewport state. User can directly read from this signal. It's updated by:
-         * - user events on flow
-         * - writableViewport signal
-         */
-        this.readableViewport = signal(ViewportService.getDefaultViewport());
-    }
-    /**
-     * The default value used by d3, just copy it here
-     *
-     * @returns default viewport value
-     */
-    static getDefaultViewport() { return { zoom: 1, x: 0, y: 0 }; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService }); }
+function getNodesBounds(nodes) {
+    if (nodes.length === 0) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };
+    nodes.forEach(node => {
+        const nodeBox = nodeToBox(node);
+        box = getBoundsOfBoxes(box, nodeBox);
+    });
+    return boxToRect(box);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, decorators: [{
-            type: Injectable
-        }] });
-
-function isDefined(data) {
-    return data !== undefined;
+function nodeToBox(node) {
+    return {
+        x: node.point().x,
+        y: node.point().y,
+        x2: node.point().x + node.size().width,
+        y2: node.point().y + node.size().height,
+    };
 }
-
-class RootSvgReferenceDirective {
-    constructor() {
-        this.element = inject(ElementRef).nativeElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]", ngImport: i0 }); }
+function boxToRect({ x, y, x2, y2 }) {
+    return {
+        x,
+        y,
+        width: x2 - x,
+        height: y2 - y,
+    };
+}
+function getBoundsOfBoxes(box1, box2) {
+    return {
+        x: Math.min(box1.x, box2.x),
+        y: Math.min(box1.y, box2.y),
+        x2: Math.max(box1.x2, box2.x2),
+        y2: Math.max(box1.y2, box2.y2),
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'svg[rootSvgRef]'
-                }]
-        }] });
 
 class ConnectionModel {
     constructor(settings) {
@@ -148,6 +136,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+function getViewportForBounds(bounds, width, height, minZoom, maxZoom, padding) {
+    const xZoom = width / (bounds.width * (1 + padding));
+    const yZoom = height / (bounds.height * (1 + padding));
+    const zoom = Math.min(xZoom, yZoom);
+    const clampedZoom = clamp(zoom, minZoom, maxZoom);
+    const boundsCenterX = bounds.x + bounds.width / 2;
+    const boundsCenterY = bounds.y + bounds.height / 2;
+    const x = width / 2 - boundsCenterX * clampedZoom;
+    const y = height / 2 - boundsCenterY * clampedZoom;
+    return { x, y, zoom: clampedZoom };
+}
+function clamp(value, min = 0, max = 1) {
+    return Math.min(Math.max(value, min), max);
+}
+
+class FlowSettingsService {
+    constructor() {
+        this.entitiesSelectable = signal(true);
+        /**
+         * Global setting with handle positions. Nodes derive this value
+         *
+         * @deprecated
+         */
+        this.handlePositions = signal({ source: 'right', target: 'left' });
+        /**
+         * @see {VflowComponent.view}
+         */
+        this.view = signal([400, 400]);
+        /**
+         * Set based on view property. May change if view is 'auto'
+         */
+        this.computedFlowWidth = signal(0);
+        /**
+         * Set based on view property. May change if view is 'auto'
+         */
+        this.computedFlowHeight = signal(0);
+        this.minZoom = signal(0.5);
+        this.maxZoom = signal(3);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, decorators: [{
+            type: Injectable
+        }] });
+
+class ViewportService {
+    constructor() {
+        this.entitiesService = inject(FlowEntitiesService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        /**
+         * Internal signal that accepts value from user by lib api
+         * When this signal changes, lib sets new view state and update readableViewport signal
+         */
+        this.writableViewport = signal({
+            changeType: 'initial',
+            state: ViewportService.getDefaultViewport(),
+            duration: 0
+        });
+        /**
+         * Public signal with viewport state. User can directly read from this signal. It's updated by:
+         * - user events on flow
+         * - writableViewport signal
+         */
+        this.readableViewport = signal(ViewportService.getDefaultViewport());
+    }
+    /**
+     * The default value used by d3, just copy it here
+     *
+     * @returns default viewport value
+     */
+    static getDefaultViewport() { return { zoom: 1, x: 0, y: 0 }; }
+    // TODO: add writableViewportWithConstraints (to apply min zoom/max zoom values)
+    fitView(options = { padding: .1, duration: 0, nodes: [] }) {
+        const nodes = this.getBoundsNodes(options.nodes ?? []);
+        const state = getViewportForBounds(getNodesBounds(nodes), this.flowSettingsService.computedFlowWidth(), this.flowSettingsService.computedFlowHeight(), this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom(), options.padding ?? .1);
+        const duration = options.duration ?? 0;
+        this.writableViewport.set({ changeType: 'absolute', state, duration });
+    }
+    getBoundsNodes(nodeIds) {
+        return !nodeIds?.length
+            // If nodes option not passed or the list is empty, then get fit the whole view
+            ? this.entitiesService.nodes()
+            // Otherwise fit to specific nodes
+            : nodeIds
+                .map(nodeId => this.entitiesService.nodes().find(({ node }) => node.id === nodeId))
+                .filter((node) => !!node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, decorators: [{
+            type: Injectable
+        }] });
+
+function isDefined(data) {
+    return data !== undefined;
+}
+
+class RootSvgReferenceDirective {
+    constructor() {
+        this.element = inject(ElementRef).nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'svg[rootSvgRef]'
+                }]
+        }] });
+
 class SelectionService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
@@ -194,6 +295,7 @@ class MapContextDirective {
         this.host = inject(ElementRef).nativeElement;
         this.selectionService = inject(SelectionService);
         this.viewportService = inject(ViewportService);
+        this.flowSettingsService = inject(FlowSettingsService);
         this.rootSvgSelection = select(this.rootSvg);
         this.zoomableSelection = select(this.host);
         this.viewportForSelection = {};
@@ -206,19 +308,25 @@ class MapContextDirective {
             }
             // If only zoom provided
             if (isDefined(state.zoom) && (!isDefined(state.x) && !isDefined(state.y))) {
-                this.rootSvgSelection.call(this.zoomBehavior.scaleTo, state.zoom);
+                this.rootSvgSelection
+                    .transition().duration(viewport.duration)
+                    .call(this.zoomBehavior.scaleTo, state.zoom);
                 return;
             }
             // If only pan provided
             if ((isDefined(state.x) && isDefined(state.y)) && !isDefined(state.zoom)) {
                 // remain same zoom value
                 const zoom = untracked(this.viewportService.readableViewport).zoom;
-                this.rootSvgSelection.call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(zoom));
+                this.rootSvgSelection
+                    .transition().duration(viewport.duration)
+                    .call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(zoom));
                 return;
             }
             // If whole viewort state provided
             if (isDefined(state.x) && isDefined(state.y) && isDefined(state.zoom)) {
-                this.rootSvgSelection.call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(state.zoom));
+                this.rootSvgSelection
+                    .transition().duration(viewport.duration)
+                    .call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(state.zoom));
                 return;
             }
         }, { allowSignalWrites: true });
@@ -230,7 +338,7 @@ class MapContextDirective {
     }
     ngOnInit() {
         this.zoomBehavior = zoom()
-            .scaleExtent([this.minZoom, this.maxZoom])
+            .scaleExtent([this.flowSettingsService.minZoom(), this.flowSettingsService.maxZoom()])
             .on('start', (event) => this.onD3zoomStart(event))
             .on('zoom', (event) => this.handleZoom(event))
             .on('end', (event) => this.onD3zoomEnd(event));
@@ -252,16 +360,12 @@ class MapContextDirective {
         this.selectionService.setViewport(this.viewportForSelection);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MapContextDirective, selector: "g[mapContext]", inputs: { minZoom: "minZoom", maxZoom: "maxZoom" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MapContextDirective, selector: "g[mapContext]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'g[mapContext]' }]
-        }], propDecorators: { minZoom: [{
-                type: Input
-            }], maxZoom: [{
-                type: Input
-            }] } });
+        }] });
 const mapTransformToViewportState = (transform) => ({ zoom: transform.k, x: transform.x, y: transform.y });
 const evTarget = (anyEvent) => {
     if (anyEvent instanceof Event && anyEvent.target instanceof Element) {
@@ -587,29 +691,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class FlowSettingsService {
-    constructor() {
-        this.entitiesSelectable = signal(true);
-        /**
-         * Global setting with handle positions. Nodes derive this value
-         *
-         * @deprecated
-         */
-        this.handlePositions = signal({ source: 'right', target: 'left' });
-        /**
-         * @see {VflowComponent.view}
-         */
-        this.view = signal([400, 400]);
-        this.flowWidth = computed(() => this.view() === 'auto' ? '100%' : this.view()[0]);
-        this.flowHeight = computed(() => this.view() === 'auto' ? '100%' : this.view()[1]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, decorators: [{
-            type: Injectable
-        }] });
-
 class ComponentEventBusService {
     constructor() {
         this._event$ = new Subject();
@@ -962,7 +1043,7 @@ class NodesChangeService {
         this.changes$ = merge(this.nodesPositionChange$, this.nodeAddChange$, this.nodeRemoveChange$, this.nodeSelectedChange$).pipe(
         // this fixes a bug when on fire node event change,
         // you can't get valid list of detached edges
-        observeOn(asyncScheduler));
+        observeOn(animationFrameScheduler));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService }); }
@@ -1950,6 +2031,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['document:touchend']
             }] } });
 
+class FlowSizeControllerDirective {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.flowWidth = 0;
+        this.flowHeight = 0;
+        effect(() => {
+            const view = this.flowSettingsService.view();
+            this.flowWidth = view === 'auto' ? '100%' : view[0];
+            this.flowHeight = view === 'auto' ? '100%' : view[1];
+        });
+        resizable([this.host.nativeElement]).pipe(tap(([entry]) => {
+            this.flowSettingsService.computedFlowWidth.set(entry.contentRect.width);
+            this.flowSettingsService.computedFlowHeight.set(entry.contentRect.height);
+        }), takeUntilDestroyed()).subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "this.flowWidth", "attr.height": "this.flowHeight" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'svg[flowSizeController]' }]
+        }], ctorParameters: function () { return []; }, propDecorators: { flowWidth: [{
+                type: HostBinding,
+                args: ['attr.width']
+            }], flowHeight: [{
+                type: HostBinding,
+                args: ['attr.height']
+            }] } });
+
 const connectionControllerHostDirective = {
     directive: ConnectionControllerDirective,
     outputs: ['onConnect']
@@ -1996,14 +2107,6 @@ class VflowComponent {
         this.flowSettingsService = inject(FlowSettingsService);
         this.componentEventBusService = inject(ComponentEventBusService);
         this.injector = inject(Injector);
-        /**
-         * Minimum zoom value
-         */
-        this.minZoom = 0.5;
-        /**
-         * Maximum zoom value
-         */
-        this.maxZoom = 3;
         /**
          * Background for flow
          */
@@ -2048,8 +2151,6 @@ class VflowComponent {
          */
         this.edgesChange$ = this.edgesChangeService.changes$;
         // #endregion
-        this.flowWidth = this.flowSettingsService.flowWidth;
-        this.flowHeight = this.flowSettingsService.flowHeight;
         this.markers = this.flowEntitiesService.markers;
     }
     // #endregion
@@ -2064,6 +2165,18 @@ class VflowComponent {
     set view(view) {
         this.flowSettingsService.view.set(view);
     }
+    /**
+     * Minimum zoom value
+     */
+    set minZoom(value) {
+        this.flowSettingsService.minZoom.set(value);
+    }
+    /**
+     * Maximum zoom value
+     */
+    set maxZoom(value) {
+        this.flowSettingsService.maxZoom.set(value);
+    }
     /**
      * Object that controls flow direction.
      *
@@ -2115,7 +2228,7 @@ class VflowComponent {
      * @param viewport viewport state
      */
     viewportTo(viewport) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: viewport });
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: viewport, duration: 0 });
     }
     /**
      * Change zoom
@@ -2123,7 +2236,7 @@ class VflowComponent {
      * @param zoom zoom value
      */
     zoomTo(zoom) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: { zoom } });
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: { zoom }, duration: 0 });
     }
     /**
      * Move to specified coordinate
@@ -2131,7 +2244,10 @@ class VflowComponent {
      * @param point point where to move
      */
     panTo(point) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: point });
+        this.viewportService.writableViewport.set({ changeType: 'absolute', state: point, duration: 0 });
+    }
+    fitView(options) {
+        this.viewportService.fitView(options);
     }
     /**
      * Get node by id
@@ -2172,7 +2288,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 }, { 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 }); }
+        ], 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  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\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]" }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -2190,7 +2306,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  [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"] }]
+                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\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: [{
@@ -2284,7 +2400,8 @@ const directives = [
     HandleSizeControllerDirective,
     SelectableDirective,
     PointerDirective,
-    RootPointerDirective
+    RootPointerDirective,
+    FlowSizeControllerDirective
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
@@ -2309,7 +2426,8 @@ class VflowModule {
             HandleSizeControllerDirective,
             SelectableDirective,
             PointerDirective,
-            RootPointerDirective, NodeHtmlTemplateDirective,
+            RootPointerDirective,
+            FlowSizeControllerDirective, NodeHtmlTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,