docs: Updated Output and Input Documentation

projects/f-flow/src/f-connectors/f-node-output/f-node-output.directive.ts

@@ -14,7 +14,10 @@ let uniqueId: number = 0;
   host: {
     '[attr.data-f-output-id]': 'id',
     class: "f-component f-node-output",
+    '[class.f-node-output-multiple]': 'multiple',
     '[class.f-node-output-disabled]': 'disabled',
+    '[class.f-node-output-not-connectable]': '!canBeConnected',
+    '[class.f-node-output-self-connectable]': 'isSelfConnectable',
   },
   providers: [ { provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective } ],
 })

public/docs/en/environment.ts

@@ -134,6 +134,10 @@ function nodeGroup(): INavigationGroup {
         link: 'f-node-directive',
         text: 'Node',
       },
+      {
+        link: 'f-drag-handle-directive',
+        text: 'Drag Handle',
+      },
     ],
   }
 }

public/docs/en/f-flow-component.md

@@ -55,7 +55,7 @@ Example of two connected nodes without dragging functionality. The nodes are con
 
 #### Adding Dragging Functionality
 
-Let's add the [fDraggable](f-draggable-directive) directive to the f-stream to enable dragging functionality. Also, we need to add the [fDragHandle](f-drag-handle-directive) directive inside [fNode](f-node-directive) to specify the handle for dragging.
+Let's add the [fDraggable](f-draggable-directive) directive to the f-flow to enable dragging functionality. Also, we need to add the [fDragHandle](f-drag-handle-directive) directive inside [fNode](f-node-directive) to specify the handle for dragging.
 ::: ng-component <draggable-flow></draggable-flow>
 [component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/draggable-flow/draggable-flow.component.html
 [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/draggable-flow/draggable-flow.component.ts

public/docs/en/f-node-directive.md

@@ -35,10 +35,52 @@ The **FNodeDirective** is a directive that represents a node within a flow of el
 
 ## Usage
 
+#### Node with Position
+
+This code snippet shows a basic example of a node with a specified position.
+
 ```html
 <f-flow>
   <f-canvas>
-    |:|<div fNode [fNodePosition]="{ x: 100, y: 200 }" [fNodeId]="customNodeId"></div>|:|
+    |:|<div fNode [fNodePosition]="{ x: 100, y: 200 }"></div>|:|
+  </f-canvas>
+</f-flow>
+```
+
+#### Adding Dragging Functionality
+
+Let's add the [fDraggable](f-draggable-directive) directive to the [f-flow](f-flow-component) to enable dragging functionality. 
+Also, we need to add the [fDragHandle](f-drag-handle-directive) directive inside [fNode](f-node-directive) to specify the handle for dragging.
+This can be any element inside the node that will act as the drag handle.
+
+```html
+<f-flow |:|fDraggable|:|>
+  <f-canvas>
+    <div |:|fDragHandle|:| fNode [fNodePosition]="{ x: 100, y: 200 }"></div>
+  </f-canvas>
+</f-flow>
+```
+
+#### Disabling Dragging
+
+This code snippet shows how to disable dragging for a node.
+
+```html
+<f-flow fDraggable>
+  <f-canvas>
+    <div fDragHandle |:|[fNodeDraggingDisabled]="true"|:| fNode [fNodePosition]="{ x: 100, y: 200 }"></div>
+  </f-canvas>
+</f-flow>
+```
+
+#### Disabling Selection
+
+This code snippet shows how to disable selection for a node.
+
+```html
+<f-flow fDraggable>
+  <f-canvas>
+    <div fDragHandle |:|[fNodeSelectionDisabled]="true"|:| fNode [fNodePosition]="{ x: 100, y: 200 }"></div>
   </f-canvas>
 </f-flow>
 ```

public/docs/en/f-node-input-directive.md

@@ -7,21 +7,17 @@ The **FNodeOutputDirective** is a directive that marks an element as an input wi
 ## Inputs
 
   - `fInputId: string;` The unique identifier for the directive instance. Automatically generated. Default: `f-node-input-${uniqueId++}`
+
+  - `fInputMultiple: boolean;`  Determines whether the input allows multiple connectionsDefault: Default: `true`
 
   - `fInputDisabled: boolean;` Indicates whether the input is disabled. A disabled input may have a different visual representation and interaction behavior. Default: `false`
 
-  - `fInputMultiple: boolean;`  Determines whether the input allows multiple connectionsDefault: `Default: true`
+  - `fInputConnectableSide: EFConnectableSide;` Indicates the side of the output where the connection can be created. Accepts a value from [EFConnectableSide](e-f-connectable-side) enum. Default: `EFConnectableSide.AUTO`
 
-  - `fOutputConnectableSide: EFConnectableSide;` Indicates the side of the output where the connection can be created. Accepts a value from [EFConnectableSide](e-f-connectable-side) enum. Default: `EFConnectableSide.AUTO`
-
-## Outputs
+## Properties
 
  - `isConnected: boolean;` Indicates whether the input is connected.
 
-## Methods
-
- - `refresh(): void;` Refreshes the state of the node, typically triggering a re-render or update.
-
 ## Styles
 
   - `.f-component` A general class applied to all F components for shared styling.
@@ -63,7 +59,7 @@ The [f-connection](f-connection-component) component takes the border-radius of
 
 ## Examples
 
-Example of how to use the [fOutputConnectableSide](f-output-connectable-side) and [fInputConnectableSide](f-input-connectable-side) directives to specify the side of the node that can be connected to. Valid values are top, right, bottom, left, and auto from [EFConnectableSide](e-f-connectable-side) enum.
+Example of how to use the [fOutputConnectableSide](f-node-output-directive) and [fInputConnectableSide](f-node-input-directive) directives to specify the side of the node that can be connected to. Valid values are top, right, bottom, left, and auto from [EFConnectableSide](e-f-connectable-side) enum.
 ::: ng-component <connectable-side></connectable-side>
 [component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectable-side/connectable-side.component.html
 [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectable-side/connectable-side.component.ts

public/docs/en/f-node-output-directive.md

@@ -8,17 +8,17 @@ The **FNodeOutputDirective** is a directive that marks an element as an output w
 
   - `fOutputId: string;` The unique identifier for the directive instance. Automatically generated. Default: `f-node-output-${uniqueId++}`
 
+  - `fOutputMultiple: boolean;` Specifies whether the output can have multiple connections. Default: `false`
+
   - `fOutputDisabled: boolean;` Indicates whether the output is disabled. A disabled output may have a different visual representation and interaction behaviour. Default: `false`
 
   - `fOutputConnectableSide: EFConnectableSide;`  Indicates the side of the output where the connection can be created. Accepts a value from [EFConnectableSide](e-f-connectable-side) enum. Default: `EFConnectableSide.AUTO`
 
-## Outputs
-
- - `isConnected: boolean;` Indicates whether the output is connected.
+  - `isSelfConnectable: boolean;` Indicates whether the output can be connected to inputs within the same node. Default: `true`
 
-## Methods
+## Properties
 
- - `refresh(): void;` Refreshes the state of the node, typically triggering a re-render or update.
+ - `isConnected: boolean;` Indicates whether the output is connected.
 
 ## Styles
 
@@ -28,10 +28,20 @@ The **FNodeOutputDirective** is a directive that marks an element as an output w
 
   - `.f-node-output-disabled` Applied when the output is disabled.
 
+  - `.f-node-output-multiple` Applied when the output allows multiple connections.
+
+  - `.f-node-output-not-connectable` Applied when the output is not connectable.
+
   - `.f-node-output-connected` Applied when the output is connected, indicating an active connection.
 
+  - `.f-node-output-self-connectable` Applied when the output can be connected to inputs within the same node.
+
 ## Usage
 
+#### Node with Output
+
+This code snippet shows a basic example of a node with an output element. This output can be connected to an input.
+
 ```html
 <f-flow>
   <f-canvas>
@@ -42,9 +52,37 @@ The **FNodeOutputDirective** is a directive that marks an element as an output w
 </f-flow>
 ```
 
+#### Node with Disabled Output
+
+This code snippet shows how to disable an output element.
+
+```html
+<f-flow>
+  <f-canvas>
+    <div fNode>
+      <div fNodeOutput |:|[fOutputDisabled]="true"|:|></div>
+    </div>
+  </f-canvas>
+</f-flow>
+```
+
+#### Specify connectable side
+
+This code snippet shows how to specify the side of the output that can be connected to. Valid values are top, right, bottom, left, and auto from [EFConnectableSide](e-f-connectable-side) enum.
+
+```html
+<f-flow>
+  <f-canvas>
+    <div fNode>
+      <div fNodeOutput |:|[fOutputConnectableSide]="left"|:|></div>
+    </div>
+  </f-canvas>
+</f-flow>
+```
+
 ## Examples
 
-Example of how to use the [fOutputConnectableSide](f-output-connectable-side) and [fInputConnectableSide](f-input-connectable-side) directives to specify the side of the node that can be connected to. Valid values are top, right, bottom, left, and auto from [EFConnectableSide](e-f-connectable-side) enum.
+Example of how to use the [fOutputConnectableSide](f-node-output-directive) and [fInputConnectableSide](f-node-input-directive) directives to specify the side of the node that can be connected to. Valid values are top, right, bottom, left, and auto from [EFConnectableSide](e-f-connectable-side) enum.
 ::: ng-component <connectable-side></connectable-side>
 [component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectable-side/connectable-side.component.html
 [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connectable-side/connectable-side.component.ts