diff --git a/projects/f-flow/src/f-draggable/f-draggable-base.ts b/projects/f-flow/src/f-draggable/f-draggable-base.ts index 940b422..91a77b8 100644 --- a/projects/f-flow/src/f-draggable/f-draggable-base.ts +++ b/projects/f-flow/src/f-draggable/f-draggable-base.ts @@ -58,8 +58,9 @@ export abstract class FDraggableBase implements IHasHostElement { private moveHandler: Function = this.checkDragSequenceToStart; protected constructor( - protected ngZone: ICanRunOutsideAngular + protected ngZone: ICanRunOutsideAngular | undefined ) { + console.log('FDraggableBase', this.ngZone); } private onMouseDown = (event: MouseEvent) => { @@ -76,7 +77,7 @@ export abstract class FDraggableBase implements IHasHostElement { this.dragStartTime = Date.now(); this.dragStartPosition = mouseEvent.getPosition(); - this.ngZone.runOutsideAngular(() => { + this.ngZone?.runOutsideAngular(() => { this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener()); this.document?.addEventListener('mousemove', this.onMouseMove); this.document?.addEventListener('mouseup', this.onMouseUp); @@ -103,7 +104,7 @@ export abstract class FDraggableBase implements IHasHostElement { this.dragStartTime = Date.now(); this.dragStartPosition = touchEvent.getPosition(); - this.ngZone.runOutsideAngular(() => { + this.ngZone?.runOutsideAngular(() => { this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener()); this.document?.addEventListener('touchmove', this.onTouchMove); this.document?.addEventListener('touchend', this.onTouchUp); @@ -198,7 +199,7 @@ export abstract class FDraggableBase implements IHasHostElement { } this.document = document; - this.ngZone.runOutsideAngular(() => { + this.ngZone?.runOutsideAngular(() => { document.addEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener()); document.addEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener()); }); diff --git a/projects/f-flow/src/f-draggable/f-draggable.directive.ts b/projects/f-flow/src/f-draggable/f-draggable.directive.ts index 07bc143..9b9713f 100644 --- a/projects/f-flow/src/f-draggable/f-draggable.directive.ts +++ b/projects/f-flow/src/f-draggable/f-draggable.directive.ts @@ -6,7 +6,7 @@ import { Input, NgZone, OnDestroy, - OnInit, Output + OnInit, Optional, Output } from "@angular/core"; import { F_DRAGGABLE, FDraggableBase } from './f-draggable-base'; import { FComponentsStore } from '../f-storage'; @@ -32,6 +32,7 @@ import { isExternalItem } from '../f-external-item'; import { SingleSelectRequest } from './single-select'; import { NodeResizeFinalizeRequest, NodeResizePreparationRequest } from './node-resize'; import { SelectionAreaFinalizeRequest, SelectionAreaPreparationRequest } from './selection-area'; +import { ICanRunOutsideAngular } from './i-can-run-outside-angular'; @Directive({ selector: "f-flow[fDraggable]", @@ -69,7 +70,7 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After constructor( private elementReference: ElementRef, private fDraggableDataContext: FDraggableDataContext, - ngZone: NgZone, + @Inject(NgZone) @Optional() ngZone: ICanRunOutsideAngular, private fComponentsStore: FComponentsStore, private fMediator: FFlowMediator, @Inject(DOCUMENT) private doc: Document diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..35c8867 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..e448e9c Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..10596c4 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 30de221..7f779c3 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..4abedd2 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..1124d24 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "Foblex Flow", + "short_name": "Foblex Flow", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#FFFFFF", + "background_color": "#FFFFFF", + "display": "standalone" +} \ No newline at end of file diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 08c825a..9ca149e 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,4 +1,8 @@ -import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { + ApplicationConfig, + provideExperimentalZonelessChangeDetection, + provideZoneChangeDetection +} from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideHttpClient } from '@angular/common/http'; diff --git a/src/app/home/hero-flow/domain/hero-flow.configuration.ts b/src/app/home/hero-flow/domain/hero-flow.configuration.ts index 2be5ebb..461b65a 100644 --- a/src/app/home/hero-flow/domain/hero-flow.configuration.ts +++ b/src/app/home/hero-flow/domain/hero-flow.configuration.ts @@ -5,22 +5,25 @@ export const HERO_FLOW_CONFIGURATION: IHeroFlowConfiguration = { nodes: [ { uid: '1', - position: { x: 180, y: 277 }, + position: { x: 180, y: 281 }, to: EFConnectableSide.AUTO, from: EFConnectableSide.TOP, large: true, + text: 'Angular 12+' }, { uid: '2', to: EFConnectableSide.LEFT, from: EFConnectableSide.BOTTOM, position: { x: 342, y: 199 }, + text: 'Zone Less' }, { uid: '3', to: EFConnectableSide.TOP, from: EFConnectableSide.AUTO, position: { x: 342, y: 385 }, + text: 'MIT License' } ], connections: [ diff --git a/src/app/home/hero-flow/domain/i-hero-flow-connection.ts b/src/app/home/hero-flow/domain/i-hero-flow-connection.ts index 20e173c..6a1e1bc 100644 --- a/src/app/home/hero-flow/domain/i-hero-flow-connection.ts +++ b/src/app/home/hero-flow/domain/i-hero-flow-connection.ts @@ -3,4 +3,6 @@ export interface IHeroFlowConnection { input: string; output: string; + + text?: string; } diff --git a/src/app/home/hero-flow/domain/i-hero-flow-node.ts b/src/app/home/hero-flow/domain/i-hero-flow-node.ts index bfd76c0..597b859 100644 --- a/src/app/home/hero-flow/domain/i-hero-flow-node.ts +++ b/src/app/home/hero-flow/domain/i-hero-flow-node.ts @@ -12,4 +12,6 @@ export interface IHeroFlowNode { from: EFConnectableSide; large?: boolean; + + text?: string; } diff --git a/src/app/home/hero-flow/hero-flow.component.html b/src/app/home/hero-flow/hero-flow.component.html index af1677b..e09df8b 100644 --- a/src/app/home/hero-flow/hero-flow.component.html +++ b/src/app/home/hero-flow/hero-flow.component.html @@ -9,6 +9,7 @@ [fBehavior]="eConnectionBehaviour.FIXED" [fRadius]="12" [fType]="'segment'" + [fText]="connection.text!" [fOutputId]="connection.output" [fInputId]="connection.input"> diff --git a/src/app/home/hero-flow/hero-node/hero-node.component.html b/src/app/home/hero-flow/hero-node/hero-node.component.html index 8b13789..86c6053 100644 --- a/src/app/home/hero-flow/hero-node/hero-node.component.html +++ b/src/app/home/hero-flow/hero-node/hero-node.component.html @@ -1 +1 @@ - +{{ node.text }} diff --git a/src/app/home/hero-flow/hero-node/hero-node.component.scss b/src/app/home/hero-flow/hero-node/hero-node.component.scss index e3be9a2..d0ab357 100644 --- a/src/app/home/hero-flow/hero-node/hero-node.component.scss +++ b/src/app/home/hero-flow/hero-node/hero-node.component.scss @@ -12,8 +12,9 @@ :host { position: relative; - width: 90px; - height: 90px; + display: flex; + width: 100px; + height: 100px; cursor: pointer; background: linear-gradient(var(--background-color), var(--background-color)) 50% 50%/calc(100% - 16px) calc(100% - 16px) no-repeat, linear-gradient(140deg, var(--gradient-1) 0%, var(--gradient-2) 100%); @@ -22,8 +23,8 @@ transition: --gradient-1 0.3s, --gradient-2 0.3s; &.large { - width: 120px; - height: 120px; + width: 140px; + height: 140px; } } @@ -33,3 +34,13 @@ --gradient-2: #41d1ff; } } + +span { + margin: auto; + text-align: center; + font-weight: 600; + font-size: 1.1em; + background: -webkit-linear-gradient(120deg, var(--gradient-2) 30%, var(--gradient-1)); + background-clip: text; + color: transparent; +} diff --git a/src/index.html b/src/index.html index 7f199c4..35a6ddf 100644 --- a/src/index.html +++ b/src/index.html @@ -29,6 +29,17 @@ + + + + + + + + + + +