Skip to content

Commit

Permalink
docs: Added connection markers example
Browse files Browse the repository at this point in the history
  • Loading branch information
@siarheihuzarevich
siarheihuzarevich committed Oct 2, 2024
1 parent fac0ff1 commit 377b610
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 8 deletions.
90 changes: 90 additions & 0 deletions projects/f-examples/connections/connection-markers/connection-markers.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<f-flow fDraggable (fLoaded)="onLoaded()">
<f-canvas>
<f-connection [fReassignDisabled]="true" fOutputId="1" fInputId="2" fBehavior="floating">
<svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.START" class="connection-marker"
[height]="5" [width]="5"
[refX]="2.5" [refY]="2.5" markerUnits="strokeWidth">
<circle cx="350" cy="350" r="350"/>
</svg>
<svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.SELECTED_START" class="connection-marker"
[height]="5" [width]="5"
[refX]="2.5" [refY]="2.5" markerUnits="strokeWidth">
<circle cx="350" cy="350" r="350"/>
</svg>
<svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
[height]="7" [width]="6"
[refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
<path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
</svg>
<svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_END" class="connection-marker"
[height]="7" [width]="6"
[refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
<path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
</svg>
</f-connection>
<div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="right">
I'm a node
</div>
<div fNode fDragHandle [fNodePosition]="{ x: 300, y: 0 }" fNodeInput fInputId="2" fInputConnectableSide="left">
I'm a node
</div>

<f-connection [fReassignDisabled]="true" fOutputId="3" fInputId="4" fBehavior="floating">
<svg viewBox="0 0 9 9" fMarker [type]="eMarkerType.START" class="connection-marker"
[height]="9" [width]="9"
[refX]="1.5" [refY]="4.2" markerUnits="strokeWidth">
<rect y="4.24219" width="6" height="6" transform="rotate(-45 0 4.24219)"/>
</svg>
<svg viewBox="0 0 9 9" fMarker [type]="eMarkerType.SELECTED_START" class="connection-marker"
[height]="9" [width]="9"
[refX]="1.5" [refY]="4.2" markerUnits="strokeWidth">
<rect y="4.24219" width="6" height="6" transform="rotate(-45 0 4.24219)"/>
</svg>
<svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
[height]="7" [width]="6"
[refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
<path d="M5.99961 7L0 3.5L5.99961 0V7Z" />
</svg>
<svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_END" class="connection-marker"
[height]="7" [width]="6"
[refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
<path d="M5.99961 7L0 3.5L5.99961 0V7Z" />
</svg>
</f-connection>
<div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }" fNodeOutput fOutputId="3" fOutputConnectableSide="right">
I'm a node
</div>
<div fNode fDragHandle [fNodePosition]="{ x: 300, y: 150 }" fNodeInput fInputId="4" fInputConnectableSide="left">
I'm a node
</div>

<f-connection [fReassignDisabled]="true" fOutputId="5" fInputId="6" fBehavior="floating">
<svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.START" class="connection-marker"
[height]="7" [width]="6"
[refX]="0.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
<path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
</svg>
<svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_START" class="connection-marker"
[height]="7" [width]="6"
[refX]="0.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
<path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
</svg>
<svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
[height]="7" [width]="6"
[refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
<path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
</svg>
<svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_END" class="connection-marker"
[height]="7" [width]="6"
[refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
<path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
</svg>
</f-connection>
<div fNode fDragHandle [fNodePosition]="{ x: 0, y: 300 }" fNodeOutput fOutputId="5" fOutputConnectableSide="right">
I'm a node
</div>
<div fNode fDragHandle [fNodePosition]="{ x: 300, y: 300 }" fNodeInput fInputId="6" fInputConnectableSide="left">
I'm a node
</div>
</f-canvas>
</f-flow>
29 changes: 29 additions & 0 deletions projects/f-examples/connections/connection-markers/connection-markers.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@use "../../flow-common";

::ng-deep connection-markers {
@include flow-common.connection;

.connection-marker {
circle, rect, path {
fill: var(--connection-color);
}
}

.f-connection {
&.f-selected {

.f-connection-path {
stroke: var(--minimap-node-selected-color);
}
.connection-marker {
circle, rect, path {
fill: var(--minimap-node-selected-color);
}
}
}
}
}

.f-node {
@include flow-common.node;
}
24 changes: 24 additions & 0 deletions projects/f-examples/connections/connection-markers/connection-markers.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import { EFMarkerType, FCanvasComponent, FFlowModule } from '@foblex/flow';

@Component({
selector: 'connection-markers',
styleUrls: [ './connection-markers.component.scss' ],
templateUrl: './connection-markers.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
FFlowModule
]
})
export class ConnectionMarkersComponent {

@ViewChild(FCanvasComponent, { static: true })
public fCanvas!: FCanvasComponent;

public eMarkerType = EFMarkerType;

public onLoaded(): void {
this.fCanvas.resetScaleAndCenter(false);
}
}
17 changes: 17 additions & 0 deletions public/markdown/examples/connection-markers.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Connection Markers

## Description

This guide shows how to set up different connection markers, allowing for different markers to be displayed on connections between connectors.

## Example

::: ng-component <connection-markers></connection-markers> [height]="600"
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-markers/connection-markers.component.html
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-markers/connection-markers.component.ts
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-markers/connection-markers.component.scss
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
:::



19 changes: 11 additions & 8 deletions public/markdown/examples/environment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ function createEnvironment(): IDocsEnvironment {
{ tag: 'connection-types', component: import('../../../projects/f-examples/connections/connection-types/connection-types.component') },
{ tag: 'custom-connection-type', component: import('../../../projects/f-examples/connections/custom-connection-type/custom-connection-type.component') },
{ tag: 'connection-behaviours', component: import('../../../projects/f-examples/connections/connection-behaviours/connection-behaviours.component') },
{ tag: 'connection-markers', component: import('../../../projects/f-examples/connections/connection-markers/connection-markers.component') },

{ tag: 'dagre-layout-example', component: import('../../../projects/f-examples/layouts/dagre-layout-example/dagre-layout-example.component') },
{ tag: 'elkjs-layout-example', component: import('../../../projects/f-examples/layouts/elkjs-layout-example/elkjs-layout-example.component') },
Expand Down Expand Up @@ -281,14 +282,16 @@ function connectionGroup(): INavigationGroup {
image_height: 600,
image_type: 'image/png',
},
// {
// link: 'custom-connection',
// text: 'Custom Connection',
// },
// {
// link: 'connection-markers',
// text: 'Connection Markers',
// },
{
link: 'connection-markers',
text: 'Connection Markers',
description: 'Discover how to add markers to connections. This example demonstrates how to create connections with markers, providing a comprehensive guide to building interactive flow-based diagrams.',
image: './previews/examples/connection-markers.light.png',
image_dark: './previews/examples/connection-markers.dark.png',
image_width: 791,
image_height: 600,
image_type: 'image/png',
},
// {
// link: 'connection-text',
// text: 'Connection Text',
Expand Down
Binary file added public/previews/examples/connection-markers.dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/previews/examples/connection-markers.light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 377b610

Please sign in to comment.