import { Component } from '@angular/core' ; import { moduleMetadata } from '@storybook/angular' ; import { AtftDataCenterActorModule } from '../../../projects/atft/src/lib/actor/data-center' ; import { AtftModule } from '../../../projects/atft/src/lib/atft.module' ; import { worldSceneWrapper } from '../scene-wrapper/world-scene-wrapper' ; import { AnimationService } from '../../../projects/atft/src/lib/animation' ; @ Component ( { selector : 'app-storybook' , template : worldSceneWrapper ( `
    <atft-dagre-layout>
      <atft-dagre-node *ngFor="let x of fakeArray(numDatabases)" composition="data">
        <atft-model-actor model="fingerprint" label="db"></atft-model-actor>
      </atft-dagre-node>

      <atft-dagre-composition name="data" label="Data"></atft-dagre-composition>
    </atft-dagre-layout>
` ) } ) class StorybookLoopComponent { constructor ( private animationService ) { this . animationService . start ( ) ; } numDatabases = 1 ; fakeArray ( length ) { if ( length >= 0 ) { return new Array ( length ) ; } } } export default { title : 'Dagre Layout/Loop' , component : StorybookLoopComponent , decorators : [ moduleMetadata ( { imports : [ AtftModule , AtftDataCenterActorModule ] } ) ] , args : { numDatabases : 0 } } ; export const Loop = ( args ) => ( { props : args } ) ;