import _ from "lodash" ; import { action , makeObservable , observable } from "mobx" ; import { observer } from "mobx-react" ; import React from "react" ; import { Button , Checkbox , Col , ControlLabel , Form , FormControl , InputGroup , Modal } from "react-bootstrap" ; import EditorActionsManager from "../managers/EditorActionsManager" ; import { EModalType } from "../ui/react-pathway-mapper" ; import PathwayActions from "../utils/PathwayActions" ; interface ILayoutPropertiesProps { show : boolean ; handleClose : ( modelId : EModalType ) => void ; pathwayActions : PathwayActions ; } export interface ILayoutProperties { name : string ; animationDuration : number ; animationEasing : string ; nodeRepulsion : number ; idealEdgeLength : number ; edgeElasticity : number ; nestingFactor : number ; gravity : number ; numIter : number ; gravityRangeCompound : number ; gravityCompound : number ; gravityRange : number ; tilingPaddingVertical : number ; tilingPaddingHorizontal : number ; initialEnergyOnIncremental : number ; tile : boolean ; animate : boolean ; randomize : boolean ; nodeDimensionsIncludeLabels : boolean ; } @ observer export default class LayoutProperties extends React . Component < ILayoutPropertiesProps > { static layoutProperties : ILayoutProperties ; @ observable internalLayoutProperties : ILayoutProperties ; constructor ( props ) { super ( props ) ; makeObservable ( this ) ; this . internalLayoutProperties = _ . clone ( EditorActionsManager . defaultLayoutProperties ) ; LayoutProperties . layoutProperties = _ . clone ( EditorActionsManager . defaultLayoutProperties ) ; } @ action . bound updateInternalLayoutProperty ( property , val ) { this . internalLayoutProperties [ property ] = val ; } render ( ) { return ( < Modal id = "layoutPropertiesDiv" show = { this . props . show } onEnter = { ( ) => { this . internalLayoutProperties = _ . clone ( LayoutProperties . layoutProperties ) ; } } onHide = { ( ) => { this . internalLayoutProperties = _ . clone ( LayoutProperties . layoutProperties ) ; this . props . handleClose ( EModalType . LAYOUT ) ; } } > < Modal . Header closeButton > < Modal . Title > Layout Properties < /Modal.Title> < /Modal.Header> < Modal . Body id = "layoutPropsForm" className = "leftText" > < Form > < InputGroup > < Col className = "control-label" sm = { 6 } > Node Repulsion : < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . nodeRepulsion . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "nodeRepulsion" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Ideal Edge Length : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . idealEdgeLength . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "idealEdgeLength" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Edge Elasticity : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . edgeElasticity . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "edgeElasticity" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Nesting Factor : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . nestingFactor . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "nestingFactor" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Gravity : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . gravity . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "gravity" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Gravity Range : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . gravityRange . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "gravityRange" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Compound Gravity : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . gravityCompound . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "gravityCompound" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Compound Gravity Range : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . gravityRangeCompound . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "gravityRangeCompound" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Number of Iterations : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . numIter . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "numIter" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Tiling Vertical Padding : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . tilingPaddingVertical . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "tilingPaddingVertical" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Tiling Horizontal Padding : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . tilingPaddingHorizontal . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "tilingPaddingHorizontal" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Tile Disconnected : < /ControlLabel> < /Col> < Col sm = { 6 } > < Checkbox className = "layProps" checked = { this . internalLayoutProperties . tile } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "tile" , ! this . internalLayoutProperties . tile ) ; } } > < /Checkbox> < /Col> < /InputGroup> < InputGroup > < Col className = "control-label" sm = { 6 } > Animate : < /Col> < Col sm = { 6 } > < Checkbox className = "layProps" checked = { this . internalLayoutProperties . animate } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "animate" , ! this . internalLayoutProperties . animate ) ; } } > < /Checkbox> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Incremental : < /ControlLabel> < /Col> < Col sm = { 6 } > < Checkbox className = "layProps" checked = { ! this . internalLayoutProperties . randomize } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "randomize" , ! this . internalLayoutProperties . randomize ) ; } } > < /Checkbox> < /Col> < /InputGroup> < InputGroup > < Col className = "rightAlignText" sm = { 6 } > < ControlLabel > Incremental Cooling Factor : < /ControlLabel> < /Col> < Col sm = { 6 } > < FormControl type = "number" value = { this . internalLayoutProperties . initialEnergyOnIncremental . toString ( ) } onChange = { ( e ) => { this . updateInternalLayoutProperty ( "initialEnergyOnIncremental" , Number ( e . target . value ) ) ; } } /> < /Col> < /InputGroup> < /Form> < /Modal.Body> < Modal . Footer > < Button onClick = { ( ) => { LayoutProperties . layoutProperties = _ . clone ( this . internalLayoutProperties ) ; this . props . pathwayActions . setLayoutProperties ( LayoutProperties . layoutProperties ) ; this . props . handleClose ( EModalType . LAYOUT ) ; } } > Save < /Button> < Button onClick = { ( ) => { this . internalLayoutProperties = _ . clone ( EditorActionsManager . defaultLayoutProperties ) ; LayoutProperties . layoutProperties = _ . clone ( this . internalLayoutProperties ) ; this . props . pathwayActions . setLayoutProperties ( this . internalLayoutProperties ) ; } } > Default < /Button> < /Modal.Footer> < /Modal>); } }