feat: add various site icons and upgrade library to Zoneless

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());
     });

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<HTMLElement>,
     private fDraggableDataContext: FDraggableDataContext,
-    ngZone: NgZone,
+    @Inject(NgZone) @Optional() ngZone: ICanRunOutsideAngular,
     private fComponentsStore: FComponentsStore,
     private fMediator: FFlowMediator,
     @Inject(DOCUMENT) private doc: Document

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"
+}

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';

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: [

src/app/home/hero-flow/domain/i-hero-flow-connection.ts

@@ -3,4 +3,6 @@ export interface IHeroFlowConnection {
   input: string;
 
   output: string;
+
+  text?: string;
 }

src/app/home/hero-flow/domain/i-hero-flow-node.ts

@@ -12,4 +12,6 @@ export interface IHeroFlowNode {
   from: EFConnectableSide;
 
   large?: boolean;
+
+  text?: string;
 }

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">
         <svg viewBox="0 0 10 10" fMarker [type]="eMarkerType.START" [height]="10" [width]="10" [refX]="5" [refY]="5">
           <circle cx="5" cy="5" r="2" stroke="none"></circle>

src/app/home/hero-flow/hero-node/hero-node.component.html

@@ -1 +1 @@
-
+<span>{{ node.text }}</span>

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;
+}

src/index.html

@@ -29,6 +29,17 @@
   <meta property="og:image:type" content="image/png">
   <meta property="og:image:width" content="3116" />
   <meta property="og:image:height" content="1880" />
+
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-touch-fullscreen" content="yes" />
+  <meta name="apple-mobile-web-app-title" content="Foblex Flow" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+  <link rel="manifest" href="/site.webmanifest">
+  <meta name="theme-color" content="#FFFFFF">
 </head>
 <body>
   <app-root></app-root>