license import { h , Component } from 'preact' ; import { css } from 'glamor' ; import { tachyons as tac } from 'glamor-tachyons' ; import { SurfaceInfoStrict , StyleOptions } from '../types' ; interface SurfaceProps extends SurfaceInfoStrict { visible : boolean ; registerSurface : ( name : string , tab : string , surface : SurfaceComponent ) => void ; } /**
 * A surface is container for visualizations and other rendered thigns.
 * It consists of a containing DOM Element, a label and an empty drawArea.
 */ export class SurfaceComponent extends Component < SurfaceProps > { static defaultStyles : Partial < StyleOptions > = { maxWidth : '580px' , maxHeight : '580px' , height : 'auto' , width : 'auto' , } ; container : HTMLElement ; label : HTMLElement ; drawArea : HTMLElement ; componentDidMount ( ) { const { name , tab } = this . props ; this . props . registerSurface ( name , tab , this ) ; } componentDidUpdate ( ) { return false ; } render ( ) { const { name , visible , styles } = this . props ; const finalStyles = { ... SurfaceComponent . defaultStyles , ... styles , } ; const { width , height , } = finalStyles ; let { maxHeight , maxWidth , } = finalStyles ; maxHeight = height === SurfaceComponent . defaultStyles . height ? maxHeight : height ; maxWidth = width === SurfaceComponent . defaultStyles . width ? maxWidth : width ; const surfaceStyle = css ( { display : visible ? 'block' : 'none' , backgroundColor : 'white' , marginTop : '10px' , marginBottom : '10px' , boxShadow : '0 0 6px -3px #777' , padding : '10px !important' , height , width , maxHeight , maxWidth , overflow : 'auto' , } ) ; const labelStyle = css ( { backgroundColor : 'white' , boxSizing : 'border-box' , borderBottom : '1px solid #357EDD' , lineHeight : '2em' , marginBottom : '20px' , ... tac ( 'fw6 tc' ) } ) ; const drawAreaStyle = css ( { boxSizing : 'border-box' , } ) ; return ( < div className = { `${ surfaceStyle } tf-surface` } ref = { ( r ) => this . container = r ! } data - visible = { visible } > < div className = { `${ labelStyle } tf-label` } ref = { ( r ) => this . label = r ! } > { name } < /div> < div className = { `${ drawAreaStyle } tf-draw-area` } ref = { ( r ) => this . drawArea = r ! } /> < /div>); } }