import { buffers , eventChannel } from 'redux-saga' ; import { put , take } from 'redux-saga/effects' ; import { ActionTypes } from "./actionTypes" ; import { ActionTypes as AppActionTypes } from '../actionTypes' ; import { AppStore } from "../store" ; import { Bundle } from "../linker" ; import { computeLayoutType } from "../task/layout/layout" ; import { App } from "../index" ; export const mainViewGeometries = [ { size : 'lg' , width : 1140 , svgScale : 1.0 } , { size : 'md' , width : 940 , svgScale : 0.9 } , { size : 'sm' , width : 794 , svgScale : 0.75 } , ] ; export const initialStateWindow = { mainViewGeometry : mainViewGeometries [ 0 ] , panes : { } , windowWidth : 0 , windowHeight : 0 , containerWidth : 0 , viewportTooSmall : false } ; export default function ( bundle ) { bundle . addReducer ( AppActionTypes . AppInit , ( state ) => { state . mainViewGeometry = initialStateWindow . mainViewGeometry ; state . panes = { ... initialStateWindow . panes } ; state . windowWidth = initialStateWindow . windowWidth ; state . windowHeight = initialStateWindow . windowHeight ; } ) ; bundle . defineAction ( ActionTypes . WindowResized ) ; bundle . addReducer ( ActionTypes . WindowResized , ( state , action ) => { const { width , height } = action ; state . windowWidth = width ; state . windowHeight = height ; state . layout . type = computeLayoutType ( width , height ) ; } ) ; const resizeMonitorChannel = eventChannel ( function ( listener ) { function onResize ( ) { const width = window . innerWidth ; const height = window . innerHeight ; listener ( { width , height } ) ; } window . addEventListener ( 'resize' , onResize ) ; onResize ( ) ; return function ( ) { window . removeEventListener ( 'resize' , onResize ) ; } ; } , buffers . sliding ( 1 ) ) ; bundle . addSaga ( function * monitorResize ( app ) { if ( 'main' !== app . environment ) { return ; } while ( true ) { let { width , height } = yield take ( resizeMonitorChannel ) ; yield put ( { type : ActionTypes . WindowResized , width , height } ) ; } } ) ; bundle . addLateReducer ( function updateGeometry ( state ) { if ( ! state . panes ) { return ; } let geometry = mainViewGeometries [ 0 ] ; let panes = state . panes ; let viewportTooSmall = false ; const windowWidth = state . windowWidth ; if ( windowWidth ) { let mainViewWidth = windowWidth ; Object . keys ( panes ) . map ( ( key ) => { const pane = panes [ key ] ; if ( ! pane . enabled ) { pane . visible = false ; } else { mainViewWidth -= ( pane . width + 10 ) ; pane . visible = true ; } } ) ; let geometryIndex = 0 ; while ( geometry . width > mainViewWidth ) { geometryIndex += 1 ; if ( geometryIndex === mainViewGeometries . length ) { viewportTooSmall = true ; Object . keys ( panes ) . map ( ( key ) => { const pane = panes [ key ] ; pane . visible = false ; } ) ; break ; } geometry = mainViewGeometries [ geometryIndex ] ; } } let containerWidth = geometry . width ; Object . keys ( panes ) . map ( ( key ) => { const pane = panes [ key ] ; if ( pane . visible ) { containerWidth += pane . width ; } } ) ; state . viewportTooSmall = viewportTooSmall ; state . containerWidth = containerWidth ; state . mainViewGeometry = geometry ; state . panes = panes ; } ) ; }