import { GlyphplotComponent } from './glyphplot.component' ; import { LenseCursor } from '../lense/cursor.service' ; import { ConfigurationData } from '../shared/services/configuration.data' ; import { Logger } from 'src/app/shared/services/logger.service' ; import { GlyphLayout } from '../glyph/glyph.layout' ; export class FlexiWallController { private urlFlexiwall = 'ws://localhost:8080/Broadcast' ; private flexiLastX : number = 0 ; private flexiLastY : number = 0 ; private flexiLastZ : number = 0 ; private eventCount = 0 ; constructor ( private component , private logger , private cursor , private configuration ) { } return { void } public doWebSocket ( ) { try { const websocket = new WebSocket ( this . urlFlexiwall ) ; const component = this . component ; const that = this ; websocket . onopen = ( e ) => { component . suppressAnimations = true ; } ; websocket . onmessage = ( e ) => { that . eventCount ++ ; { that . onMessage ( e ) ; that . eventCount = 0 ; } } ; websocket . onerror = function ( e ) { component . suppressAnimations = false ; } ; websocket . onclose = function ( e ) { component . suppressAnimations = false ; } ; } catch ( err ) { this . logger . log ( 'No Flexiwall Connection found.' ) ; } } onMessage ( event ) { const data = JSON . parse ( event . data ) ; if ( data . Position . Z < 1300 && this . cursor . isVisible ) { let deltaX = 0 ; let deltaY = 0 ; const moveX = Math . abs ( this . flexiLastX - data . Position . X ) ; const moveY = Math . abs ( this . flexiLastY - data . Position . Y ) ; { deltaX = this . flexiLastX > data . Position . X ? moveX : - 1 * moveX ; } { deltaY = this . flexiLastY > data . Position . Y ? moveY : - 1 * moveY ; } const oldPosition = this . cursor . position ; this . cursor . updateGlyphs = true ; const newPosition = { left : oldPosition . left + deltaX , top : oldPosition . top + deltaY } ; this . cursor . position = newPosition ; this . flexiLastZ = data . Position . Z ; this . flexiLastY = data . Position . Y ; this . flexiLastX = data . Position . X ; } if ( data . Position . Z > 1280 && this . cursor . isVisible ) { this . cursor . forceAnimateGlyphs = true ; const currentPosition = this . cursor . position ; this . cursor . position = currentPosition ; console . log ( 'Do force' ) ; } if ( this . cursor . isVisible ) { return ; } const zoomFactor = data . Position . Z > 1500 ? 0.95 : data . Position . Z < 1200 ? 1.05 : 1 ; const trans = this . component . configuration . zoomIdentity ; trans . k = trans . k * zoomFactor ; trans . x = ( this . component . width / 2 - 50 ) - ( ( this . component . width / 2 - 50 ) * trans . k ) ; trans . y = ( this . component . height / 2 + 80 ) - ( ( this . component . height / 2 + 80 ) * trans . k ) ; if ( trans . k < 1 || trans . k > 40 ) { return ; } this . component . configuration . zoomIdentity = trans ; this . configuration . updateCurrentLevelOfDetail ( this . component . configuration . zoomIdentity . k ) ; this . configuration . currentLayout = GlyphLayout . Cluster ; this . component . animate ( ) ; } }