interface Plot { id : string ; svg : string ; height ? : number ; width ? : number ; } declare function acquireVsCodeApi ( ) ; const vscode = acquireVsCodeApi ( ) ; let oldHeight = - 1 ; let oldWidth = - 1 ; const handler = document . querySelector ( '#handler' ) as HTMLDivElement ; const largePlotDiv = document . querySelector ( '#largePlot' ) as HTMLDivElement ; const largeSvg = largePlotDiv . querySelector ( 'svg' ) as SVGElement ; const cssLink = document . querySelector ( 'link.overwrites' ) as HTMLLinkElement ; const smallPlotDiv = document . querySelector ( '#smallPlots' ) as HTMLDivElement ; const placeholderDiv = document . querySelector ( '#placeholder' ) as HTMLDivElement ; function getSmallPlots ( ) { const smallPlots = [ ] ; document . querySelectorAll ( 'a.focusPlot' ) . forEach ( elm => { smallPlots . push ( elm as HTMLAnchorElement ) ; } ) ; return smallPlots ; } let isHandlerDragging = false ; let isFullWindow = false ; function postResizeMessage ( userTriggered = false ) { let newHeight = largePlotDiv . clientHeight ; let newWidth = largePlotDiv . clientWidth ; if ( isFullWindow ) { newHeight = window . innerHeight ; newWidth = window . innerWidth ; } if ( userTriggered || newHeight !== oldHeight || newWidth !== oldWidth ) { const msg = { message : 'resize' , height : newHeight , width : newWidth , userTriggered : userTriggered } ; vscode . postMessage ( msg ) ; oldHeight = newHeight ; oldWidth = newWidth ; } } function postLogMessage ( content ) { console . log ( content ) ; vscode . postMessage ( { message : 'log' , body : content } ) ; } window . addEventListener ( 'message' , ( ev ) => { const msg = ev . data ; if ( msg . message === 'updatePlot' ) { updatePlot ( { id : String ( msg . plotId ) , svg : msg . svg } ) ; } else if ( msg . message === 'focusPlot' ) { focusPlot ( String ( msg . plotId ) ) ; } else if ( msg . message === 'toggleStyle' ) { toggleStyle ( msg . useOverwrites ) ; } else if ( msg . message === 'hidePlot' ) { hidePlot ( msg . plotId ) ; } else if ( msg . message === 'addPlot' ) { addPlot ( msg . html ) ; } else if ( msg . message === 'togglePreviewPlotLayout' ) { togglePreviewPlotLayout ( msg . style ) ; } else if ( msg . message === 'toggleFullWindow' ) { toggleFullWindowMode ( msg . useFullWindow ) ; } } ) ; function addPlot ( html ) { const wrapper = document . createElement ( 'div' ) ; wrapper . classList . add ( 'wrapper' ) ; wrapper . innerHTML = html ; smallPlotDiv . appendChild ( wrapper ) ; } function focusPlot ( plotId ) { const smallPlots = getSmallPlots ( ) ; const ind = findIndex ( plotId , smallPlots ) ; if ( ind < 0 ) { return ; } for ( const elm of smallPlots ) { elm . classList . remove ( 'active' ) ; } const smallPlot = smallPlots [ ind ] ; smallPlot . classList . add ( 'active' ) ; largePlotDiv . innerHTML = smallPlot . innerHTML ; } function updatePlot ( plt ) { const smallPlots = getSmallPlots ( ) ; const ind = findIndex ( plt . id , smallPlots ) ; if ( ind < 0 ) { return ; } smallPlots [ ind ] . innerHTML = plt . svg ; if ( smallPlots [ ind ] . classList . contains ( 'active' ) ) { largePlotDiv . innerHTML = plt . svg ; } } function hidePlot ( plotId ) { const smallPlots = getSmallPlots ( ) ; const ind = findIndex ( plotId , smallPlots ) ; if ( ind < 0 ) { return ; } if ( smallPlots [ ind ] . classList . contains ( 'active' ) ) { largePlotDiv . innerHTML = '' ; } smallPlots [ ind ] . parentElement ?. remove ( ) ; } function findIndex ( plotId , smallPlots ? ) { smallPlots ||= getSmallPlots ( ) ; const ind = smallPlots . findIndex ( elm => elm . getAttribute ( 'plotId' ) === String ( plotId ) ) ; if ( ind < 0 ) { console . warn ( `plotId not found: ${ plotId }` ) ; } return ind ; } function toggleStyle ( useOverwrites ) { cssLink . disabled = ! useOverwrites ; } function togglePreviewPlotLayout ( newStyle ) { smallPlotDiv . classList . remove ( 'multirow' , 'scroll' , 'hidden' ) ; smallPlotDiv . classList . add ( newStyle ) ; } function toggleFullWindowMode ( useFullWindow ) { isFullWindow = useFullWindow ; if ( useFullWindow ) { document . body . classList . add ( 'fullWindow' ) ; window . scrollTo ( 0 , 0 ) ; } else { document . body . classList . remove ( 'fullWindow' ) ; } postResizeMessage ( true ) ; } window . onload = ( ) => { largePlotDiv . style . height = `${ largeSvg . clientHeight }px` ; postResizeMessage ( true ) ; } ; document . addEventListener ( 'mousedown' , ( e ) => { if ( ! isFullWindow && e . target === handler ) { isHandlerDragging = true ; handler . classList . add ( 'dragging' ) ; document . body . style . cursor = 'ns-resize' ; } } ) ; document . addEventListener ( 'mousemove' , ( e ) => { if ( isFullWindow || ! isHandlerDragging ) { return false ; } const containerOffsetTop = document . body . offsetTop ; const pointerRelativeYpos = e . clientY - containerOffsetTop + window . scrollY ; const largePlotMinHeight = 60 ; const newHeight = Math . max ( largePlotMinHeight , pointerRelativeYpos - 5 ) ; const newHeightString = `${ newHeight }px` ; if ( largePlotDiv . style . height !== newHeightString ) { largePlotDiv . style . height = newHeightString ; postResizeMessage ( ) ; } } ) ; window . onresize = ( ) => postResizeMessage ( ) ; document . addEventListener ( 'mouseup' , ( ) => { if ( isHandlerDragging ) { postResizeMessage ( true ) ; document . body . style . cursor = '' ; } handler . classList . remove ( 'dragging' ) ; isHandlerDragging = false ; } ) ;