import * as m from 'mithril' ; import state from '../../state/state' ; import addChildButton from './images/add-child.svg' ; import addSiblingButton from './images/add-sibling.svg' ; import addSiblingButtonDisabled from './images/add-sibling-disabled.svg' ; import deleteNodeButton from './images/delete-node.svg' ; import deleteNodeButtonDisabled from './images/delete-node-disabled.svg' ; import editNodeButton from './images/edit-node.svg' ; import hamburgerMenuButton from './images/hamburger-button.svg' ; import fileSaveButton from './images/file-save.svg' ; import { onSaveButtonClick } from './FileMenu' ; import { MENU_ICONS_HEIGHT , MENU_ICONS_WIDTH } from './constants' ; returns function EditMenu ( ) { return { view : ( ) : m . Vnode => { const rootNodeId = state . doc . getRootNodeId ( ) ; const selectedNodeId = state . doc . getSelectedNodeId ( ) ; return m ( 'div' , { style : { display : 'flex' , justifyContent : 'space-between' , } , } , [ m ( 'div' , m ( 'img' , { onclick : onSaveButtonClick , src : fileSaveButton , width : MENU_ICONS_WIDTH , height : MENU_ICONS_HEIGHT , style : 'margin: 2px;' , } ) ) , ] , [ m ( 'div' , m ( 'img' , { src : selectedNodeId === rootNodeId ? deleteNodeButtonDisabled : deleteNodeButton , height : MENU_ICONS_HEIGHT , width : MENU_ICONS_WIDTH , style : 'margin: 2px;' , onclick : onDeleteNodeButtonClick , } ) , m ( 'img' , { src : editNodeButton , height : MENU_ICONS_HEIGHT , width : MENU_ICONS_WIDTH , style : 'margin: 2px;' , onclick : onReplaceNodeContentsButtonClick , } ) , m ( 'img' , { src : addChildButton , height : MENU_ICONS_HEIGHT , width : MENU_ICONS_WIDTH , style : 'margin: 2px;' , onclick : onAddChildButtonClick , } ) , m ( 'img' , { src : selectedNodeId === rootNodeId ? addSiblingButtonDisabled : addSiblingButton , height : MENU_ICONS_HEIGHT , width : MENU_ICONS_WIDTH , style : 'margin: 2px;' , onclick : onAddSiblingButtonClick , } ) , m ( 'img' , { src : hamburgerMenuButton , width : MENU_ICONS_WIDTH , height : MENU_ICONS_HEIGHT , style : 'margin: 2px;' , onclick : ( ) => state . ui . setSidebarVisibility ( true ) , } ) ) , ] ) ; } , } ; } function onAddChildButtonClick ( ) { state . ui . setCurrentModal ( 'addChild' ) ; } function onAddSiblingButtonClick ( ) { const rootNodeId = state . doc . getRootNodeId ( ) ; const selectedNodeId = state . doc . getSelectedNodeId ( ) ; if ( selectedNodeId !== rootNodeId ) { state . ui . setCurrentModal ( 'addSibling' ) ; } } function onDeleteNodeButtonClick ( ) { const rootNodeId = state . doc . getRootNodeId ( ) ; const selectedNodeId = state . doc . getSelectedNodeId ( ) ; if ( selectedNodeId !== rootNodeId ) { state . doc . deleteNode ( state . doc . getSelectedNodeId ( ) ) ; } } function onReplaceNodeContentsButtonClick ( ) { state . ui . setCurrentModal ( 'editNode' ) ; } export default EditMenu ;