@foblex/flow 18.3.0 → 18.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foblex/flow",
-  "version": "18.3.0",
+  "version": "18.4.0",
   "description": "Angular-native node-based UI library for building node editors, workflow builders, and interactive graph interfaces.",
   "main": "index.js",
   "types": "index.d.ts",
@@ -36,12 +36,12 @@
     "save": "dependencies"
   },
   "peerDependencies": {
-    "@angular/common": ">=15.0.0",
-    "@angular/core": ">=15.0.0",
-    "@foblex/platform": "1.0.4",
-    "@foblex/mediator": "1.1.3",
-    "@foblex/2d": "1.2.2",
-    "@foblex/utils": "1.1.1"
+    "@angular/common": ">=17.3.0",
+    "@angular/core": ">=17.3.0",
+    "@foblex/platform": "^1.0.4",
+    "@foblex/mediator": "^1.1.3",
+    "@foblex/2d": "^1.2.2",
+    "@foblex/utils": "^1.1.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -1,4 +1,5 @@
 export * from './f-backgroud';
+export * from './f-auto-pan';
 export * from './f-canvas';
 export * from './domain';
 export * from './drag-toolkit';

package/schematics/ng-add/index.js

@@ -1,13 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAdd = ngAdd;
+const schematics_1 = require("@angular-devkit/schematics");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
+const utility_1 = require("@schematics/angular/utility");
 const dependencies_1 = require("@schematics/angular/utility/dependencies");
 const foblex_dependencies_1 = require("../shared/foblex-dependencies");
+const DEFAULT_THEME_STYLE_PATH = 'node_modules/@foblex/flow/styles/default.scss';
+const KNOWN_THEME_STYLE_PATHS = new Set([
+    DEFAULT_THEME_STYLE_PATH,
+    '@foblex/flow/styles/default.scss',
+]);
 function ngAdd() {
+    return (0, schematics_1.chain)([addDependencies(), addDefaultTheme(), installDependencies()]);
+}
+function addDependencies() {
     return (tree, context) => {
         context.logger.info('⚡ Installing @foblex/flow dependencies...');
-        foblex_dependencies_1.FoblexDependencies.forEach(dependency => {
+        foblex_dependencies_1.FoblexDependencies.forEach((dependency) => {
             (0, dependencies_1.addPackageJsonDependency)(tree, {
                 type: dependencies_1.NodeDependencyType.Default,
                 name: dependency.name,
@@ -15,9 +25,60 @@ function ngAdd() {
             });
             context.logger.info(`✅ Added "${dependency.name}" to package.json`);
         });
+        return tree;
+    };
+}
+function addDefaultTheme() {
+    return (0, utility_1.updateWorkspace)((workspace) => {
+        for (const [, project] of workspace.projects) {
+            if (project.extensions['projectType'] !== 'application') {
+                continue;
+            }
+            addStyleToTarget(project.targets.get('build'));
+            addStyleToTarget(project.targets.get('test'));
+        }
+    });
+}
+function addStyleToTarget(target) {
+    var _a;
+    if (!target) {
+        return;
+    }
+    ensureThemeInStyles(((_a = target.options) !== null && _a !== void 0 ? _a : (target.options = {})));
+    if (!target.configurations) {
+        return;
+    }
+    Object.values(target.configurations).forEach((configuration) => {
+        if (!configuration) {
+            return;
+        }
+        ensureThemeInStyles(configuration);
+    });
+}
+function ensureThemeInStyles(options) {
+    const styles = Array.isArray(options['styles']) ? [...options['styles']] : [];
+    if (styles.some(isThemeStyleEntry)) {
+        return;
+    }
+    styles.push(DEFAULT_THEME_STYLE_PATH);
+    options['styles'] = styles;
+}
+function isThemeStyleEntry(entry) {
+    if (typeof entry === 'string') {
+        return KNOWN_THEME_STYLE_PATHS.has(entry);
+    }
+    if (!entry || typeof entry !== 'object' || Array.isArray(entry)) {
+        return false;
+    }
+    const input = entry['input'];
+    return typeof input === 'string' && KNOWN_THEME_STYLE_PATHS.has(input);
+}
+function installDependencies() {
+    return (_tree, context) => {
         context.addTask(new tasks_1.NodePackageInstallTask());
+        context.logger.info(`✅ Added "${DEFAULT_THEME_STYLE_PATH}" to application styles.`);
         context.logger.info('✅ All dependencies installed successfully.');
-        return tree;
+        return _tree;
     };
 }
 //# sourceMappingURL=index.js.map

package/schematics/ng-add/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/f-flow/schematics/ng-add/index.ts"],"names":[],"mappings":";;AAQA,sBAmBC;AA1BD,4DAA0E;AAC1E,2EAGkD;AAClD,uEAAmE;AAEnE,SAAgB,KAAK;IACnB,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,2CAA2C,CAAC,CAAC;QAEjE,wCAAkB,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YACtC,IAAA,uCAAwB,EAAC,IAAI,EAAE;gBAC7B,IAAI,EAAE,iCAAkB,CAAC,OAAO;gBAChC,IAAI,EAAE,UAAU,CAAC,IAAI;gBACrB,OAAO,EAAE,UAAU,CAAC,OAAO;aAC5B,CAAC,CAAC;YACH,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,UAAU,CAAC,IAAI,mBAAmB,CAAC,CAAC;QACtE,CAAC,CAAC,CAAC;QAEH,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAE9C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;QAElE,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/f-flow/schematics/ng-add/index.ts"],"names":[],"mappings":"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"}

package/schematics/shared/foblex-dependencies.js

@@ -4,7 +4,7 @@ exports.FoblexDependencies = void 0;
 exports.FoblexDependencies = [
     { name: '@foblex/platform', version: '^1.0.4' },
     { name: '@foblex/mediator', version: '^1.1.3' },
-    { name: '@foblex/2d', version: '^1.2.1' },
+    { name: '@foblex/2d', version: '^1.2.2' },
     { name: '@foblex/utils', version: '^1.1.1' },
 ];
 //# sourceMappingURL=foblex-dependencies.js.map

package/styles/_index.scss

@@ -0,0 +1,31 @@
+@forward 'domains/flow-canvas';
+@forward 'domains/node-group';
+@forward 'domains/connector';
+@forward 'domains/connection';
+@forward 'domains/external-item';
+@forward 'domains/plugins';
+
+@use 'tokens/primitive';
+@use 'tokens/semantic';
+@use 'tokens/ff-aliases';
+@use 'domains/flow-canvas';
+@use 'domains/node-group';
+@use 'domains/connector';
+@use 'domains/connection';
+@use 'domains/external-item';
+@use 'domains/plugins';
+
+@mixin theme-tokens() {
+  @include primitive.primitive-tokens();
+  @include semantic.semantic-tokens();
+  @include ff-aliases.ff-aliases();
+}
+
+@mixin theme-all($scoped: true) {
+  @include flow-canvas.flow-canvas($scoped);
+  @include node-group.node-group($scoped);
+  @include connector.connector($scoped);
+  @include connection.connection-all($scoped);
+  @include external-item.external-item-all($scoped);
+  @include plugins.plugins($scoped);
+}

package/styles/default.scss

@@ -0,0 +1,4 @@
+@use './index' as flow-theme;
+
+@include flow-theme.theme-tokens();
+@include flow-theme.theme-all();

package/styles/domains/_connection.scss

@@ -0,0 +1,175 @@
+@mixin _connection-scope($scoped: true) {
+  @if $scoped {
+    f-flow,
+    .f-flow {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin connection($scoped: true) {
+  @include _connection-scope($scoped) {
+    .f-connection-content {
+      box-sizing: border-box;
+      color: var(--ff-connection-content-color);
+      font-size: var(--ff-connection-content-font-size);
+      padding: var(--ff-connection-content-padding-y) var(--ff-connection-content-padding-x);
+      background: var(--ff-connection-content-background-color);
+      border: 1px solid var(--ff-connection-content-border-color);
+      border-radius: var(--ff-connection-content-border-radius);
+    }
+
+    .f-connection {
+      .f-connection-selection {
+        fill: none;
+        stroke: transparent;
+        stroke-width: var(--ff-connection-hit-width);
+      }
+
+      .f-connection-path {
+        fill: none;
+        stroke: var(--ff-connection-color);
+        stroke-width: var(--ff-connection-width);
+      }
+
+      .f-connection-drag-handle {
+        fill: transparent;
+        stroke: transparent;
+        cursor: move;
+      }
+
+      &.f-snap-connection {
+        .f-connection-path {
+          stroke: var(--ff-snap-connection-color);
+          stroke-dasharray: 8 4;
+        }
+      }
+
+      &.f-selected {
+        .f-connection-content {
+          border-color: var(--ff-connection-content-border-color-selected);
+        }
+
+        .f-connection-path {
+          stroke: var(--ff-connection-selected-color);
+        }
+      }
+
+    }
+
+    &:not(.f-dragging) {
+      .f-connection:not(.f-dragging):not(.f-selected):not(.f-connection-selection-disabled) {
+        &:hover {
+          .f-connection-selection {
+            stroke: var(--ff-connection-hover-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin connection-markers($scoped: true) {
+  @include _connection-scope($scoped) {
+    .f-marker,
+    .connection-marker {
+      color: var(--ff-marker-color);
+
+      circle,
+      rect,
+      path,
+      polygon,
+      line {
+        fill: currentColor;
+        stroke: currentColor;
+      }
+    }
+
+    .f-connection {
+      &.f-snap-connection {
+        .f-marker,
+        .connection-marker {
+          color: var(--ff-snap-connection-color);
+        }
+      }
+
+      &.f-selected {
+        .f-marker,
+        .connection-marker {
+          color: var(--ff-connection-selected-color);
+        }
+      }
+    }
+  }
+}
+
+@mixin connection-waypoints($scoped: true) {
+  @include _connection-scope($scoped) {
+    .f-connection {
+      .f-connection-waypoints {
+        .f-candidate,
+        .f-waypoint {
+          vector-effect: non-scaling-stroke;
+          transform-box: fill-box;
+          transform-origin: center;
+          stroke-width: 1.5;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+
+        .f-candidate {
+          fill: var(--ff-waypoint-candidate-fill);
+          stroke: var(--ff-waypoint-candidate-stroke);
+        }
+
+        .f-waypoint {
+          fill: var(--ff-waypoint-fill);
+          stroke: var(--ff-waypoint-stroke);
+          cursor: move;
+        }
+      }
+    }
+  }
+}
+
+@mixin connection-drag-handles($scoped: true) {
+  @include _connection-scope($scoped) {
+    .f-connection {
+      .f-connection-drag-handle {
+        fill: transparent;
+        stroke: var(--ff-connection-drag-handle-stroke);
+        stroke-width: 1.5;
+      }
+    }
+  }
+}
+
+@mixin connection-drag-handles-visible($scoped: true) {
+  @include connection-drag-handles($scoped);
+
+  @include _connection-scope($scoped) {
+    .f-connection {
+      .f-connection-drag-handle {
+        fill: var(--ff-connection-drag-handle-fill);
+      }
+
+      &.f-selected {
+        .f-connection-drag-handle {
+          fill: var(--ff-connection-drag-handle-fill);
+          stroke: var(--ff-connection-selected-color);
+        }
+      }
+    }
+  }
+}
+
+@mixin connection-all($scoped: true) {
+  @include connection($scoped);
+  @include connection-markers($scoped);
+  @include connection-waypoints($scoped);
+  @include connection-drag-handles($scoped);
+}

package/styles/domains/_connector.scss

@@ -0,0 +1,150 @@
+@mixin _connector-scope($scoped: true) {
+  @if $scoped {
+    f-flow,
+    .f-flow {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin _socket-positioning() {
+  &.left {
+    left: calc(var(--ff-connector-size) / -2);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &.right {
+    right: calc(var(--ff-connector-size) / -2);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &.top {
+    top: calc(var(--ff-connector-size) / -2);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.top-left {
+    top: calc(var(--ff-connector-size) / -2);
+    left: calc(var(--ff-connector-size) / -2);
+  }
+
+  &.top-right {
+    top: calc(var(--ff-connector-size) / -2);
+    right: calc(var(--ff-connector-size) / -2);
+  }
+
+  &.bottom {
+    bottom: calc(var(--ff-connector-size) / -2);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.bottom-left {
+    bottom: calc(var(--ff-connector-size) / -2);
+    left: calc(var(--ff-connector-size) / -2);
+  }
+
+  &.bottom-right {
+    bottom: calc(var(--ff-connector-size) / -2);
+    right: calc(var(--ff-connector-size) / -2);
+  }
+}
+
+@mixin _socket-frame($radius: 50%) {
+  position: absolute;
+  width: var(--ff-connector-size);
+  height: var(--ff-connector-size);
+  box-sizing: border-box;
+  border: 1px solid var(--ff-connector-border-color);
+  border-radius: $radius;
+  background: var(--ff-connector-background-color);
+  box-shadow: 0 0 0 2px var(--ff-connector-node-ring-color);
+  pointer-events: all;
+
+  @include _socket-positioning();
+
+  &.f-connector-connectable {
+    border-color: var(--ff-connector-accent-color);
+  }
+
+  &.f-node-output-connected,
+  &.f-node-input-connected {
+    background: var(--ff-connector-connected-color);
+    border-color: var(--ff-connector-connected-color);
+  }
+
+  &.f-node-output-not-connectable,
+  &.f-node-input-not-connectable,
+  &.f-node-input-disabled,
+  &.f-node-output-disabled {
+    background: var(--ff-connector-disabled-color);
+    border-color: var(--ff-connector-disabled-border-color);
+  }
+}
+
+@mixin connector-sockets($scoped: true, $selectorless: false) {
+  @if $selectorless {
+    @include _socket-frame();
+  } @else {
+    @include _connector-scope($scoped) {
+      .f-node-input,
+      .f-node-output {
+        &:not(.f-node) {
+          @include _socket-frame();
+        }
+      }
+
+      .f-node-input {
+        &:not(.f-node) {
+          border-radius: var(--ff-radius-socket-square);
+        }
+      }
+
+      .f-connections-dragging {
+        .f-node-input,
+        .f-node-output {
+          &:not(.f-connector-connectable) {
+            &:not(.f-node-input-connected):not(.f-node-output-connected) {
+              border-color: var(--ff-connector-disabled-border-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin connector-outlet($scoped: true) {
+  @include _connector-scope($scoped) {
+    .f-node-outlet {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-height: 32px;
+      padding: var(--ff-outlet-padding-y) var(--ff-outlet-padding-x);
+      box-sizing: border-box;
+      border: 1px solid var(--ff-outlet-border-color);
+      border-radius: var(--ff-outlet-border-radius);
+      background: var(--ff-outlet-background-color);
+      color: var(--ff-outlet-color);
+      pointer-events: all;
+
+      &.f-node-outlet-disabled {
+        background: var(--ff-outlet-disabled-background-color);
+        border-color: var(--ff-outlet-disabled-border-color);
+        color: var(--ff-outlet-disabled-color);
+      }
+    }
+  }
+}
+
+@mixin connector($scoped: true) {
+  @include connector-sockets($scoped);
+  @include connector-outlet($scoped);
+}

package/styles/domains/_external-item.scss

@@ -0,0 +1,44 @@
+@mixin external-item($scoped: true) {
+  .f-external-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 14px;
+    box-sizing: border-box;
+    color: var(--ff-external-item-color);
+    background: var(--ff-external-item-background-color);
+    border: 1px solid var(--ff-external-item-border-color);
+    border-radius: var(--ff-external-item-border-radius);
+    box-shadow: var(--ff-external-item-shadow);
+    cursor: grab;
+    user-select: none;
+
+    &.f-external-item-disabled {
+      color: var(--ff-external-item-disabled-color);
+      background: var(--ff-external-item-disabled-background-color);
+      cursor: not-allowed;
+    }
+  }
+}
+
+@mixin external-item-preview($scoped: true) {
+  .f-external-item-preview {
+    box-sizing: border-box;
+    box-shadow: var(--ff-external-item-preview-shadow);
+  }
+}
+
+@mixin external-item-placeholder($scoped: true) {
+  .f-external-item-placeholder {
+    box-sizing: border-box;
+    background: var(--ff-external-item-placeholder-background-color);
+    border: 1px dashed var(--ff-external-item-placeholder-border-color);
+    border-radius: var(--ff-external-item-border-radius);
+  }
+}
+
+@mixin external-item-all($scoped: true) {
+  @include external-item($scoped);
+  @include external-item-preview($scoped);
+  @include external-item-placeholder($scoped);
+}

package/styles/domains/_flow-canvas.scss

@@ -0,0 +1,41 @@
+@mixin _flow-scope($scoped: true) {
+  @if $scoped {
+    f-flow,
+    .f-flow {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin flow($scoped: true) {
+  @include _flow-scope($scoped) {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: all;
+    user-select: none;
+    touch-action: none;
+    color: var(--ff-flow-text-color);
+    background: var(--ff-flow-background-color);
+    font-family: var(--ff-flow-font-family);
+    font-size: var(--ff-flow-font-size);
+    line-height: 1.4;
+  }
+}
+
+@mixin canvas($scoped: true) {
+  @include _flow-scope($scoped) {
+    .f-canvas {
+      background: var(--ff-canvas-background-color);
+    }
+  }
+}
+
+@mixin flow-canvas($scoped: true) {
+  @include flow($scoped);
+  @include canvas($scoped);
+}