import React from 'react' ; import { EntityManager , exportSvg , GraphConfig , GraphLayout , GraphLogo , Viewport , NetworkDiagram } from '@alephdata/react-ftm' ; import logoBase64 from './static/logoBase64' ; const logo = new GraphLogo ( { text : "Data Desktop" , image : logoBase64 , } ) ; const config = new GraphConfig ( { editorTheme : "dark" , toolbarPosition : 'top' , logo } ) ; interface IAppProps { ipcRenderer : any ; } interface IAppState { layout : GraphLayout ; locale ? : string ; viewport : Viewport ; } export default class App extends React . Component < IAppProps , IAppState > { entityManager : EntityManager ; saveTimeout : any ; svgRef : React . RefObject < SVGSVGElement > ; constructor ( props ) { super ( props ) ; this . attachListeners ( ) ; const storedGraphData = localStorage . getItem ( 'storedGraphData' ) ; if ( storedGraphData && ! props . ipcRenderer ) { const parsed = JSON . parse ( storedGraphData ) ; this . state = { layout : GraphLayout . fromJSON ( config , parsed . layout ) , viewport : Viewport . fromJSON ( config , parsed . viewport ) , } ; this . entityManager = EntityManager . fromJSON ( { } , parsed . entities ) ; } else { this . state = { layout : new GraphLayout ( config ) , viewport : new Viewport ( config ) } ; this . entityManager = new EntityManager ( ) ; } this . updateLayout = this . updateLayout . bind ( this ) ; this . updateViewport = this . updateViewport . bind ( this ) ; this . saveFile = this . saveFile . bind ( this ) ; this . openFile = this . openFile . bind ( this ) ; this . exportSvg = this . exportSvg . bind ( this ) ; this . svgRef = React . createRef ( ) ; } attachListeners ( ) { const { ipcRenderer } = this . props ; if ( ipcRenderer ) { ipcRenderer . on ( 'SAVE_FILE' , ( event , saveAs ) => this . saveFile ( saveAs ) ) ; ipcRenderer . on ( 'OPEN_FILE' , ( event , data ) => this . openFile ( data ) ) ; ipcRenderer . on ( 'EXPORT_SVG' , ( event ) => this . exportSvg ( ) ) ; ipcRenderer . on ( 'SET_LOCALE' , ( event , locale ) => this . setLocale ( locale ) ) ; } } saveFile ( saveAs ) { const { ipcRenderer } = this . props ; const { layout , viewport } = this . state ; const graphData = JSON . stringify ( { entities : this . entityManager . toJSON ( ) , layout : layout . toJSON ( ) , viewport : viewport . toJSON ( ) } ) ; ipcRenderer . send ( 'SAVE_FILE_SUCCESS' , { graphData , saveAs } ) ; } openFile ( data ) { const parsed = JSON . parse ( data ) ; const { entities , ... layout } = parsed . layout ; this . entityManager = EntityManager . fromJSON ( { } , entities || parsed . entities ) ; this . setState ( { layout : GraphLayout . fromJSON ( config , layout ) , viewport : Viewport . fromJSON ( config , parsed . viewport ) , } ) ; } setLocale ( locale ) { this . setState ( { locale } ) ; } exportSvg ( ) { const { ipcRenderer } = this . props ; const { layout , viewport } = this . state ; const data = exportSvg ( layout , viewport , this . svgRef . current ) ; ipcRenderer . send ( 'RECEIVE_EXPORT_SVG' , data ) ; } updateLayout ( layout , historyModified = false ) { const { ipcRenderer } = this . props ; this . setState ( { 'layout' : layout } ) ; if ( historyModified ) { if ( ipcRenderer ) { ipcRenderer . send ( 'GRAPH_CHANGED' ) ; } else { this . saveToLocalStorage ( { layout } ) ; } } } updateViewport ( viewport ) { const { ipcRenderer } = this . props ; this . setState ( { 'viewport' : viewport } ) ; if ( ! ipcRenderer ) { this . saveToLocalStorage ( { viewport } ) ; } } saveToLocalStorage ( { layout , viewport } ) { const graphData = JSON . stringify ( { entities : this . entityManager . toJSON ( ) , layout : layout ? layout . toJSON ( ) : this . state . layout . toJSON ( ) , viewport : viewport ? viewport . toJSON ( ) : this . state . viewport . toJSON ( ) } ) ; localStorage . setItem ( 'storedGraphData' , graphData ) ; } render ( ) { const { layout , locale , viewport } = this . state ; return ( < NetworkDiagram config = { config } entityManager = { this . entityManager } layout = { layout } viewport = { viewport } updateLayout = { this . updateLayout } updateViewport = { this . updateViewport } locale = { locale } writeable svgRef = { this . svgRef } / > ) ; } }