import { ConnectorPlacement , ContextMenuRenderCallbacks , DiagramMaker , DiagramMakerData , DiagramMakerNode , DiagramMakerPotentialNode , VisibleConnectorTypes } from 'diagram-maker' ; import 'diagram-maker/dist/diagramMaker.css' ; import { Action , Dispatch } from 'redux' ; import '../scss/CircularNode.scss' ; import '../scss/Logger.scss' ; import '../scss/MinimapNode.scss' ; import '../scss/RectangularNode.scss' ; import { graph } from './data' ; import { addDevTools , createCircularNode , createEdgeContextMenu , createLibraryPanel , createMinimapPanel , createNodeContextMenu , createNodeWithDropdown , createNodeWithInput , createPanelContextMenu , createPotentialNode , createRectangularNode , createWorkspaceContextMenu , updateActionInLogger } from '../utils' ; import { handleMinimapEvent } from 'diagramMakerMinimap/state' ; const windowAsAny = window as any ; export function renderDiagramMaker ( ) { windowAsAny . diagramMaker = new DiagramMaker ( 'diagramMakerContainer' , { options : { connectorPlacement : ConnectorPlacement . LEFT_RIGHT } , renderCallbacks : { destroy : ( ) => undefined , node : ( node , container ) => { if ( node . typeId === 'testId-centered' ) { return createCircularNode ( node , container ) ; } if ( node . typeId === 'testId-input' ) { return createNodeWithInput ( node , container ) ; } if ( node . typeId === 'testId-dropdown' ) { return createNodeWithDropdown ( node , container ) ; } return createRectangularNode ( node , container ) ; } , potentialNode : ( node , container ) => createPotentialNode ( node , container ) , panels : { library : ( panel , state , container ) => createLibraryPanel ( container ) , minimap : ( panel , state , container ) => createMinimapPanel ( container , state ) } , contextMenu : { node : ( id , container ) => createNodeContextMenu ( id , container ) , edge : ( id , container ) => createEdgeContextMenu ( id , container ) , panel : ( id , container ) => createPanelContextMenu ( id , container ) , workspace : ( container ) => createWorkspaceContextMenu ( container ) } as ContextMenuRenderCallbacks } , actionInterceptor : ( action , next , getState ) => { updateActionInLogger ( action ) ; next ( action ) ; } , nodeTypeConfig : { 'testId-centered' : { size : { width : 100 , height : 100 } , connectorPlacementOverride : ConnectorPlacement . CENTERED } , 'testId-dead' : { size : { width : 150 , height : 50 } , visibleConnectorTypes : VisibleConnectorTypes . NONE } , 'testId-dropdown' : { size : { width : 150 , height : 50 } } , 'testId-end' : { size : { width : 150 , height : 50 } , visibleConnectorTypes : VisibleConnectorTypes . INPUT_ONLY } , 'testId-input' : { size : { width : 150 , height : 50 } } , 'testId-normal' : { size : { width : 150 , height : 50 } } , 'testId-normalWithSize' : { size : { width : 150 , height : 50 } } , 'testId-start' : { size : { width : 150 , height : 50 } , visibleConnectorTypes : VisibleConnectorTypes . OUTPUT_ONLY } , 'testId-topBottom' : { size : { width : 150 , height : 50 } , connectorPlacementOverride : ConnectorPlacement . TOP_BOTTOM } } } , { consumerEnhancer : addDevTools ( ) , eventListener : ( event ) => { handleMinimapEvent ( event , windowAsAny . diagramMaker ) ; } , initialData : graph } ) ; }