import { DiagramMaker , DiagramMakerNode , DiagramMakerPotentialNode , EditorMode , Size } from 'diagram-maker' ; import { Action , AnyAction } from 'redux' ; import { createMinimap } from '../src' ; export function createDivWithText ( text ) { const newDiv = document . createElement ( 'div' ) ; const newContent = document . createTextNode ( text ) ; newDiv . appendChild ( newContent ) ; return newDiv ; } export function createPotentialNode ( node , container ) { const id = node . typeId ; const newDiv = createDivWithText ( id ) ; newDiv . classList . add ( 'rectangle' , 'example-node' ) ; container . innerHTML = '' ; container . appendChild ( newDiv ) ; return newDiv ; } export function createRectangularNode ( node , container ) { const id = node . id . substring ( 0 , 13 ) ; const newDiv = createDivWithText ( id ) ; newDiv . classList . add ( 'rectangle' , 'example-node' ) ; if ( node . diagramMakerData . selected ) { newDiv . classList . add ( 'selected' ) ; } if ( node . consumerData ) { if ( node . consumerData . odd ) { newDiv . classList . add ( 'odd' ) ; } else { newDiv . classList . add ( 'even' ) ; } } container . innerHTML = '' ; container . appendChild ( newDiv ) ; return newDiv ; } export function createNodeWithInput ( node , container ) { if ( container . innerHTML !== '' ) { const childDiv = container . children [ 0 ] ; if ( node . diagramMakerData . selected ) { childDiv . classList . add ( 'selected' ) ; } else { childDiv . classList . remove ( 'selected' ) ; } return ; } const newDiv = document . createElement ( 'div' ) ; const input = document . createElement ( 'input' ) ; input . setAttribute ( 'type' , 'text' ) ; input . setAttribute ( 'data-event-target' , 'true' ) ; input . setAttribute ( 'data-draggable' , 'true' ) ; newDiv . appendChild ( input ) ; newDiv . classList . add ( 'rectangle' , 'example-node' ) ; if ( node . diagramMakerData . selected ) { newDiv . classList . add ( 'selected' ) ; } container . appendChild ( newDiv ) ; return newDiv ; } export function createNodeWithDropdown ( node , container ) { if ( container . innerHTML !== '' ) { const childDiv = container . children [ 0 ] ; if ( node . diagramMakerData . selected ) { childDiv . classList . add ( 'selected' ) ; } else { childDiv . classList . remove ( 'selected' ) ; } return ; } const newDiv = document . createElement ( 'div' ) ; const select = document . createElement ( 'select' ) ; const option = document . createElement ( 'option' ) ; const optionValue = document . createTextNode ( 'test' ) ; option . appendChild ( optionValue ) ; select . appendChild ( option ) ; select . setAttribute ( 'type' , 'text' ) ; select . setAttribute ( 'data-event-target' , 'true' ) ; newDiv . appendChild ( select ) ; newDiv . classList . add ( 'rectangle' , 'example-node' ) ; if ( node . diagramMakerData . selected ) { newDiv . classList . add ( 'selected' ) ; } container . appendChild ( newDiv ) ; return newDiv ; } export function createCircularNode ( node , container ) { const id = node . id . substring ( 0 , 13 ) ; const newDiv = createDivWithText ( id ) ; newDiv . classList . add ( 'circle' , 'example-node' ) ; if ( node . diagramMakerData . selected ) { newDiv . classList . add ( 'selected' ) ; } container . innerHTML = '' ; const connectorDiv = document . createElement ( 'div' ) ; connectorDiv . classList . add ( 'outer' ) ; connectorDiv . setAttribute ( 'data-id' , node . id ) ; connectorDiv . setAttribute ( 'data-type' , 'DiagramMaker.Connector' ) ; connectorDiv . setAttribute ( 'data-draggable' , 'true' ) ; connectorDiv . setAttribute ( 'data-event-target' , 'true' ) ; newDiv . setAttribute ( 'data-id' , node . id ) ; newDiv . setAttribute ( 'data-type' , 'DiagramMaker.Connector' ) ; newDiv . setAttribute ( 'data-dropzone' , 'true' ) ; container . appendChild ( connectorDiv ) ; container . appendChild ( newDiv ) ; return newDiv ; } export function createMinimapRectangularNode ( node , container ) { const newDiv = document . createElement ( 'div' ) ; newDiv . classList . add ( 'rectangle' , 'example-minimap-node' ) ; if ( node . diagramMakerData . selected ) { newDiv . classList . add ( 'selected' ) ; } if ( node . consumerData ) { if ( node . consumerData . odd ) { newDiv . classList . add ( 'odd' ) ; } else { newDiv . classList . add ( 'even' ) ; } } container . innerHTML = '' ; container . appendChild ( newDiv ) ; return newDiv ; } export function createMinimapNodeWithInput ( node , container ) { if ( container . innerHTML !== '' ) { const childDiv = container . children [ 0 ] ; if ( node . diagramMakerData . selected ) { childDiv . classList . add ( 'selected' ) ; } else { childDiv . classList . remove ( 'selected' ) ; } return ; } const newDiv = document . createElement ( 'div' ) ; newDiv . classList . add ( 'rectangle' , 'example-minimap-node' ) ; newDiv . style . backgroundColor = 'blue' ; if ( node . diagramMakerData . selected ) { newDiv . classList . add ( 'selected' ) ; } container . appendChild ( newDiv ) ; return newDiv ; } export function createMinimapNodeWithDropdown ( node , container ) { if ( container . innerHTML !== '' ) { const childDiv = container . children [ 0 ] ; if ( node . diagramMakerData . selected ) { childDiv . classList . add ( 'selected' ) ; } else { childDiv . classList . remove ( 'selected' ) ; } return ; } const newDiv = document . createElement ( 'div' ) ; newDiv . classList . add ( 'rectangle' , 'example-minimap-node' ) ; if ( node . diagramMakerData . selected ) { newDiv . classList . add ( 'selected' ) ; } container . appendChild ( newDiv ) ; return newDiv ; } export function createMinimapCircularNode ( node , container ) { const newDiv = document . createElement ( 'div' ) ; newDiv . classList . add ( 'circle' , 'example-minimap-node' ) ; newDiv . style . backgroundColor = 'orange' ; if ( node . diagramMakerData . selected ) { newDiv . classList . add ( 'selected' ) ; } container . innerHTML = '' ; container . appendChild ( newDiv ) ; return newDiv ; } export function createContextMenu ( text ) { const newDiv = createDivWithText ( text ) ; newDiv . classList . add ( 'contextMenu' ) ; return newDiv ; } export function createNodeContextMenu ( id , container ) { if ( ! id ) { return ; } container . innerHTML = '' ; container . appendChild ( createContextMenu ( `This is the node: ${ id }` ) ) ; } export function createEdgeContextMenu ( id , container ) { if ( ! id ) { return ; } container . innerHTML = '' ; container . appendChild ( createContextMenu ( `This is the edge: ${ id }` ) ) ; } export function createPanelContextMenu ( id , container ) { if ( ! id ) { return ; } container . innerHTML = '' ; container . appendChild ( createContextMenu ( `This is the panel: ${ id }` ) ) ; } export function createWorkspaceContextMenu ( container ) { container . innerHTML = '' ; container . appendChild ( createContextMenu ( 'This is the workspace' ) ) ; } export function createPanelNode ( testId , text , size ? ) { const newDiv = createDivWithText ( text ) ; newDiv . classList . add ( 'rectangle' , 'example-node' , 'potential-node' ) ; newDiv . setAttribute ( 'data-id' , testId ) ; newDiv . setAttribute ( 'data-type' , 'DiagramMaker.PotentialNode' ) ; newDiv . setAttribute ( 'data-draggable' , 'true' ) ; newDiv . setAttribute ( 'data-event-target' , 'true' ) ; if ( size ) { newDiv . setAttribute ( 'data-width' , `${ size . width }` ) ; newDiv . setAttribute ( 'data-height' , `${ size . height }` ) ; } return newDiv ; } export function createLibraryPanel ( container ) { if ( container . innerHTML !== '' ) { return ; } const newDiv = document . createElement ( 'div' ) ; newDiv . setAttribute ( 'data-event-target' , 'true' ) ; newDiv . setAttribute ( 'data-dropzone' , 'true' ) ; newDiv . classList . add ( 'library' ) ; const draggableElement = document . createElement ( 'div' ) ; draggableElement . innerText = 'drag here' ; draggableElement . classList . add ( 'draggableElement' ) ; draggableElement . setAttribute ( 'data-event-target' , 'true' ) ; draggableElement . setAttribute ( 'data-draggable' , 'true' ) ; draggableElement . setAttribute ( 'data-type' , 'DiagramMaker.PanelDragHandle' ) ; draggableElement . setAttribute ( 'data-id' , 'library' ) ; newDiv . appendChild ( draggableElement ) ; newDiv . appendChild ( createPanelNode ( 'testId-normal' , 'Normal' ) ) ; newDiv . appendChild ( createPanelNode ( 'testId-normalWithSize' , 'Normal with Size' , { width : 100 , height : 50 } ) ) ; newDiv . appendChild ( createPanelNode ( 'testId-topBottom' , 'Top Bottom' ) ) ; newDiv . appendChild ( createPanelNode ( 'testId-centered' , 'Centered' ) ) ; newDiv . appendChild ( createPanelNode ( 'testId-start' , 'Start Node' ) ) ; newDiv . appendChild ( createPanelNode ( 'testId-end' , 'End Node' ) ) ; newDiv . appendChild ( createPanelNode ( 'testId-dead' , 'Dead Node' ) ) ; newDiv . appendChild ( createPanelNode ( 'testId-input' , 'With Input' ) ) ; newDiv . appendChild ( createPanelNode ( 'testId-dropdown' , 'With Dropdown' ) ) ; container . appendChild ( newDiv ) ; return newDiv ; } function createToolButton ( text , eventListener ) { const newDiv = createDivWithText ( text ) ; newDiv . setAttribute ( 'data-type' , 'DiagramMaker.Tools' ) ; newDiv . setAttribute ( 'data-id' , text ) ; newDiv . addEventListener ( 'click' , eventListener ) ; return newDiv ; } function createUpdateContainerButton ( getDiagramMakerObj ) { return createToolButton ( 'UpdateContainer' , ( ) => { getDiagramMakerObj ( ) . updateContainer ( ) ; } ) ; } function createDestroyButton ( getDiagramMakerObj ) { return createToolButton ( 'Destroy' , ( ) => { getDiagramMakerObj ( ) . destroy ( ) ; } ) ; } function createDragToolButton ( getDiagramMakerObj ) { return createToolButton ( 'Drag' , ( ) => { getDiagramMakerObj ( ) . api . setEditorMode ( EditorMode . DRAG ) ; } ) ; } function createSelectToolButton ( getDiagramMakerObj ) { return createToolButton ( 'Select' , ( ) => { getDiagramMakerObj ( ) . api . setEditorMode ( EditorMode . SELECT ) ; } ) ; } function createReadOnlyToolButton ( getDiagramMakerObj ) { return createToolButton ( 'ReadOnly' , ( ) => { getDiagramMakerObj ( ) . api . setEditorMode ( EditorMode . READ_ONLY ) ; } ) ; } function createFocusNodeButton ( getDiagramMakerObj ) { return createToolButton ( 'FocusNode' , ( ) => { getDiagramMakerObj ( ) . api . focusNode ( 'node1' ) ; } ) ; } function createFocusSelectedButton ( getDiagramMakerObj ) { return createToolButton ( 'FocusSelected' , ( ) => { getDiagramMakerObj ( ) . api . focusSelected ( ) ; } ) ; } function createFitButton ( getDiagramMakerObj ) { return createToolButton ( 'Fit' , ( ) => { getDiagramMakerObj ( ) . api . fit ( ) ; } ) ; } function createZoomInButton ( getDiagramMakerObj ) { return createToolButton ( 'ZoomIn' , ( ) => { getDiagramMakerObj ( ) . api . zoomIn ( ) ; } ) ; } function createZoomOutButton ( getDiagramMakerObj ) { return createToolButton ( 'ZoomOut' , ( ) => { getDiagramMakerObj ( ) . api . zoomOut ( ) ; } ) ; } function createResetZoomButton ( getDiagramMakerObj ) { return createToolButton ( 'ResetZoom' , ( ) => { getDiagramMakerObj ( ) . api . resetZoom ( ) ; } ) ; } function createUndoButton ( getDiagramMakerObj ) { return createToolButton ( 'Undo' , ( ) => { getDiagramMakerObj ( ) . api . undo ( ) ; } ) ; } function createRedoButton ( getDiagramMakerObj ) { return createToolButton ( 'Redo' , ( ) => { getDiagramMakerObj ( ) . api . redo ( ) ; } ) ; } function createTestInput ( ) { const div = document . createElement ( 'div' ) ; const input = document . createElement ( 'input' ) ; input . classList . add ( 'testInput' ) ; input . setAttribute ( 'data-type' , 'DiagramMaker.Tools' ) ; input . setAttribute ( 'data-id' , 'TestInput' ) ; input . setAttribute ( 'type' , 'text' ) ; div . appendChild ( input ) ; return div ; } export function createToolsPanel ( container , getDiagramMakerObj ) { if ( container . innerHTML !== '' ) { return ; } const newDiv = document . createElement ( 'div' ) ; newDiv . classList . add ( 'tools' ) ; newDiv . appendChild ( createUpdateContainerButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createDestroyButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createDragToolButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createSelectToolButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createReadOnlyToolButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createFocusNodeButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createFocusSelectedButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createFitButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createZoomInButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createZoomOutButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createResetZoomButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createUndoButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createRedoButton ( getDiagramMakerObj ) ) ; newDiv . appendChild ( createTestInput ( ) ) ; container . appendChild ( newDiv ) ; return ; } const renderMiniNode = ( node , container ) => { if ( node . typeId === 'testId-centered' ) { return createMinimapCircularNode ( node , container ) ; } if ( node . typeId === 'testId-input' ) { return createMinimapNodeWithInput ( node , container ) ; } if ( node . typeId === 'testId-dropdown' ) { return createMinimapNodeWithDropdown ( node , container ) ; } return createMinimapRectangularNode ( node , container ) ; } ; const minimapDestroyCallback = ( ) => undefined ; export function createMinimapPanel ( container , state ) { const newDiv = document . createElement ( 'div' ) ; newDiv . setAttribute ( 'data-event-target' , 'true' ) ; newDiv . setAttribute ( 'data-dropzone' , 'true' ) ; newDiv . classList . add ( 'library' ) ; const draggableElement = document . createElement ( 'div' ) ; draggableElement . innerText = 'drag here' ; draggableElement . classList . add ( 'draggableElement' ) ; draggableElement . setAttribute ( 'data-event-target' , 'true' ) ; draggableElement . setAttribute ( 'data-draggable' , 'true' ) ; draggableElement . setAttribute ( 'data-type' , 'DiagramMaker.PanelDragHandle' ) ; draggableElement . setAttribute ( 'data-id' , 'minimap' ) ; newDiv . appendChild ( draggableElement ) ; newDiv . appendChild ( createMinimap ( state , renderMiniNode , minimapDestroyCallback ) ) ; container . innerHTML = '' ; container . appendChild ( newDiv ) ; return newDiv ; } export function updateActionInLogger ( action ) { const anyAction = action as AnyAction ; const logger = document . getElementById ( 'diagramMakerLogger' ) ; if ( logger ) { const type = createDivWithText ( `Type is ${ action . type }` ) ; type . setAttribute ( 'data-type' , 'DiagramMaker.ActionType' ) ; type . setAttribute ( 'data-id' , action . type ) ; logger . innerHTML = '' ; logger . appendChild ( type ) ; if ( anyAction . payload ) { const payload = createDivWithText ( `Payload is ${ JSON . stringify ( anyAction . payload ) }` ) ; payload . setAttribute ( 'data-type' , 'DiagramMaker.ActionPayload' ) ; payload . setAttribute ( 'data-id' , action . type ) ; logger . appendChild ( payload ) ; } } } export function addDevTools ( ) { if ( process . env . NODE_ENV === 'development' ) { const windowAsAny = window as any ; return windowAsAny . __REDUX_DEVTOOLS_EXTENSION__ && windowAsAny . __REDUX_DEVTOOLS_EXTENSION__ ( ) ; } return undefined ; }