import { Share } from './share' ; import { MagnetManager } from './magnetManager' ; import { UserManager } from './UserManager' ; export class MagnetTextManager { param element returns public static isTextMagnet ( element ) { return element . classList . contains ( "magnetText" ) ; } param element param LaTEXCode description private static setLaTEX ( element , LaTEXCode ) { const divText = < HTMLElement > element . children [ 0 ] ; element . dataset . type = "LaTEX" ; element . dataset . code = LaTEXCode ; divText . contentEditable = "false" ; divText . innerHTML = `\\[${ element . dataset . code }\\]` ; eval ( "MathJax.typeset();" ) ; if ( Share . isShared ( ) ) Share . sendMagnetChanged ( element ) ; } param element returns private static recognizeLaTEXCode ( element ) { function recognizeLaTEXCodeInDiv ( divText ) { const text = divText . innerHTML ; if ( text . startsWith ( "$" ) && text . endsWith ( "$" ) ) { return text . substring ( 1 , text . length - 1 ) ; } else if ( text . startsWith ( "$" ) && text . endsWith ( "$<br>" ) ) { return text . substring ( 1 , text . length - "$<br>" . length ) ; } else if ( text . startsWith ( "\\[" ) && text . endsWith ( "\\]" ) ) { return text . substring ( 2 , text . length - 2 ) ; } else return undefined ; } const divText = < HTMLElement > element . children [ 0 ] ; const laTEXCodeDirect = recognizeLaTEXCodeInDiv ( divText ) ; if ( laTEXCodeDirect ) return laTEXCodeDirect ; else if ( divText . children . length == 1 ) return recognizeLaTEXCodeInDiv ( < HTMLElement > divText . children [ 0 ] ) ; else return undefined ; } param element decription private static maybeRecognizeLaTEX ( element ) { const latexCode = MagnetTextManager . recognizeLaTEXCode ( element ) ; if ( latexCode != undefined ) MagnetTextManager . setLaTEX ( element , latexCode ) ; else eval ( "MathJax.typeset();" ) ; } param element description public static installMagnetText ( element ) { MagnetTextManager . maybeRecognizeLaTEX ( element ) ; const divText = < HTMLElement > element . children [ 0 ] ; element . ondblclick = ( ) => { if ( element . dataset . type == "LaTEX" ) { const answer = prompt ( "Type the LaTEX code:" , element . dataset . code ) ; if ( answer ) MagnetTextManager . setLaTEX ( element , answer ) ; } } ; divText . onpointerdown = ( e ) => { e . stopPropagation ( ) ; } ; divText . onpointermove = ( e ) => { e . stopPropagation ( ) ; } ; divText . onpointerup = ( e ) => { if ( document . activeElement == divText ) e . stopPropagation ( ) ; } ; divText . onkeydown = ( e ) => { const setFontSize = ( size ) => { divText . style . fontSize = size + "px" ; for ( const i in divText . children ) { ( < HTMLElement > divText . children [ i ] ) . style . fontSize = size + "px" ; } } ; if ( e . key == "Escape" ) { divText . blur ( ) ; MagnetTextManager . maybeRecognizeLaTEX ( element ) ; window . getSelection ( ) . removeAllRanges ( ) ; } if ( ( e . ctrlKey && e . key == "=" ) || ( e . ctrlKey && e . key == "+" ) ) { let size = parseInt ( divText . style . fontSize ) ; size ++ ; setFontSize ( size ) ; e . preventDefault ( ) ; } else if ( e . ctrlKey && e . key == "-" ) { let size = parseInt ( divText . style . fontSize ) ; if ( size > 6 ) size -- ; setFontSize ( size ) ; e . preventDefault ( ) ; } e . stopPropagation ( ) ; } ; divText . onkeyup = evt => { Share . execute ( "magnetChange" , [ UserManager . me . userID , element . id , element . outerHTML ] ) ; evt . stopPropagation ( ) ; } ; } param { * } x param { * } y description public static addMagnetText ( x , y ) { const div = document . createElement ( "div" ) ; const divText = document . createElement ( "div" ) ; div . appendChild ( divText ) ; divText . innerHTML = "type text" ; divText . contentEditable = "true" ; divText . style . fontSize = "24px" ; divText . style . color = UserManager . me . color ; div . classList . add ( "magnetText" ) ; div . style . left = x + "px" ; div . style . top = y + "px" ; MagnetManager . addMagnet ( div ) ; divText . focus ( ) ; if ( Share . isShared ( ) ) Share . sendMagnetChanged ( div ) ; document . execCommand ( 'selectAll' , false , null ) ; } }