in webapp/src/app.tsx [4407:4570]
renderCore() {
setEditor(this);
// ${targetTheme.accentColor ? "inverted accent " : ''}
const targetTheme = pxt.appTarget.appTheme;
const simOpts = pxt.appTarget.simulator;
const sharingEnabled = pxt.appTarget.cloud && pxt.appTarget.cloud.sharing && !pxt.shell.isControllerMode();
const sandbox = pxt.shell.isSandboxMode();
const isBlocks = !this.editor.isVisible || this.getPreferredEditor() === pxt.BLOCKS_PROJECT_NAME;
const sideDocs = !(sandbox || targetTheme.hideSideDocs);
const tutorialOptions = this.state.tutorialOptions;
const inTutorial = !!tutorialOptions && !!tutorialOptions.tutorial;
const isSidebarTutorial = pxt.appTarget.appTheme.sidebarTutorial;
const isTabTutorial = inTutorial && !pxt.BrowserUtils.useOldTutorialLayout();
const inTutorialExpanded = inTutorial && tutorialOptions.tutorialStepExpanded;
const hideTutorialIteration = inTutorial && tutorialOptions.metadata && tutorialOptions.metadata.hideIteration;
const inDebugMode = this.state.debugging;
const inHome = this.state.home && !sandbox;
const inEditor = !!this.state.header && !inHome;
const { lightbox, greenScreen, accessibleBlocks } = this.state;
const flyoutOnly = this.state.editorState && this.state.editorState.hasCategories === false;
const { hideEditorToolbar, transparentEditorToolbar } = targetTheme;
const hideMenuBar = targetTheme.hideMenuBar || hideTutorialIteration || (isTabTutorial && pxt.appTarget.appTheme.embeddedTutorial);
const isHeadless = simOpts && simOpts.headless;
const selectLanguage = targetTheme.selectLanguage;
const showEditorToolbar = inEditor && !hideEditorToolbar && this.editor.hasEditorToolbar();
const useSerialEditor = pxt.appTarget.serial && !!pxt.appTarget.serial.useEditor;
const showSideDoc = sideDocs && this.state.sideDocsLoadUrl && !this.state.sideDocsCollapsed;
const showCollapseButton = showEditorToolbar && !inHome && !sandbox && !targetTheme.simCollapseInMenu && (!isHeadless || inDebugMode) && !isTabTutorial;
const shouldHideEditorFloats = this.state.hideEditorFloats || this.state.collapseEditorTools;
const logoWide = !!targetTheme.logoWide;
const hwDialog = !sandbox && pxt.hasHwVariants();
const editorOffset = ((inTutorialExpanded || isTabTutorial) && this.state.editorOffset) ? { top: this.state.editorOffset } : undefined;
const invertedTheme = targetTheme.invertedMenu && targetTheme.invertedMonaco;
const collapseIconTooltip = this.state.collapseEditorTools ? lf("Show the simulator") : lf("Hide the simulator");
const isApp = cmds.isNativeHost() || pxt.winrt.isWinRT() || pxt.BrowserUtils.isElectron();
const hc = this.getData<boolean>(auth.HIGHCONTRAST)
let rootClassList = [
"ui",
lightbox ? 'dimmable dimmed' : 'dimmable',
shouldHideEditorFloats ? "hideEditorFloats" : '',
this.state.collapseEditorTools ? "collapsedEditorTools" : '',
transparentEditorToolbar ? "transparentEditorTools" : '',
invertedTheme ? 'inverted-theme' : '',
this.state.fullscreen ? 'fullscreensim' : '',
this.state.showMiniSim ? 'miniSim' : '',
hc ? 'hc' : '',
showSideDoc ? 'sideDocs' : '',
pxt.shell.layoutTypeClass(),
inHome ? 'inHome' : '',
inTutorial && !isTabTutorial ? 'tutorial' : '',
inTutorialExpanded && !isTabTutorial ? 'tutorialExpanded' : '',
isTabTutorial ? 'tabTutorial' : '',
isSidebarTutorial ? 'sidebarTutorial' : '',
inDebugMode ? 'debugger' : '',
pxt.options.light ? 'light' : '',
pxt.BrowserUtils.isTouchEnabled() ? 'has-touch' : '',
hideMenuBar ? 'hideMenuBar' : '',
!showEditorToolbar || transparentEditorToolbar ? 'hideEditorToolbar' : '',
this.state.bannerVisible && !inHome ? "notificationBannerVisible" : "",
this.state.debugging ? "debugging" : "",
sandbox && this.isEmbedSimActive() ? 'simView' : '',
isApp ? "app" : "",
greenScreen ? "greenscreen" : "",
logoWide ? "logo-wide" : "",
isHeadless ? "headless" : "",
flyoutOnly ? "flyoutOnly" : "",
hideTutorialIteration ? "hideIteration" : "",
this.editor != this.blocksEditor ? "editorlang-text" : "",
this.editor == this.textEditor && this.state.errorListState,
'full-abs',
pxt.appTarget.appTheme.embeddedTutorial ? "tutorial-embed" : ""
];
this.rootClasses = rootClassList;
const rootClasses = sui.cx(rootClassList);
if (this.state.hasError) {
return <div id="root" className="ui middle aligned center aligned grid" style={{ height: '100%', alignItems: 'center' }}>
<div className="ui raised segment inverted purple">
<h2>{lf("Oops")}</h2>
{lf("We detected a problem and we will reload the editor in a few seconds..")}
</div>
</div>
}
const isRTL = pxt.Util.isUserLanguageRtl();
const showRightChevron = (this.state.collapseEditorTools || isRTL) && !(this.state.collapseEditorTools && isRTL); // Collapsed XOR RTL
// don't show in sandbox or is blocks editor or previous editor is blocks or assets editor
const showFileList = !sandbox && !inTutorial && !this.isAssetsActive()
&& !(isBlocks
|| (pkg.mainPkg && pkg.mainPkg.config && (pkg.mainPkg.config.preferredEditor == pxt.BLOCKS_PROJECT_NAME)));
const hasIdentity = pxt.auth.hasIdentity();
return (
<div id='root' className={rootClasses}>
{greenScreen ? <greenscreen.WebCam close={this.toggleGreenScreen} /> : undefined}
{accessibleBlocks && <accessibleblocks.AccessibleBlocksInfo />}
{hideMenuBar || inHome ? undefined :
<header className="menubar" role="banner">
{inEditor ? <accessibility.EditorAccessibilityMenu parent={this} highContrast={hc} /> : undefined}
<notification.NotificationBanner parent={this} />
<headerbar.HeaderBar parent={this} />
</header>}
{isSidebarTutorial && flyoutOnly && inTutorial && <sidebarTutorial.SidebarTutorialCard ref={ProjectView.tutorialCardId} parent={this} pokeUser={this.state.pokeUserComponent == ProjectView.tutorialCardId} />}
{inTutorial && !isTabTutorial && <div id="maineditor" className={sandbox ? "sandbox" : ""} role="main">
{!(isSidebarTutorial && flyoutOnly) && inTutorial && <tutorial.TutorialCard ref={ProjectView.tutorialCardId} parent={this} pokeUser={this.state.pokeUserComponent == ProjectView.tutorialCardId} />}
{flyoutOnly && <tutorial.WorkspaceHeader parent={this} />}
</div>}
<sidepanel.Sidepanel parent={this} inHome={inHome}
showKeymap={this.state.keymap && simOpts.keymap}
showSerialButtons={useSerialEditor}
showFileList={showFileList}
showFullscreenButton={!isHeadless}
collapseEditorTools={this.state.collapseEditorTools}
simSerialActive={this.state.simSerialActive}
devSerialActive={this.state.deviceSerialActive}
showMiniSim={this.showMiniSim}
openSerial={this.openSerial}
handleHardwareDebugClick={this.hwDebug}
handleFullscreenButtonClick={this.toggleSimulatorFullscreen}
tutorialOptions={isTabTutorial ? tutorialOptions : undefined}
onTutorialStepChange={this.setTutorialStep}
onTutorialComplete={this.completeTutorialAsync}
setEditorOffset={this.setEditorOffset} />
<div id="maineditor" className={(sandbox ? "sandbox" : "") + (inDebugMode ? "debugging" : "")} role="main" aria-hidden={inHome}>
{showCollapseButton && <sui.Button id='computertogglesim' className={`computer only collapse-button large`} icon={`inverted chevron ${showRightChevron ? 'right' : 'left'}`} title={collapseIconTooltip} onClick={this.toggleSimulatorCollapse} />}
{this.allEditors.map(e => e.displayOuter(editorOffset))}
</div>
{inHome ? <div id="homescreen" className="full-abs">
<div className="ui home projectsdialog">
<header className="menubar" role="banner">
<accessibility.HomeAccessibilityMenu parent={this} highContrast={hc} />
<headerbar.HeaderBar parent={this} />
</header>
<projects.Projects parent={this} ref={this.handleHomeRef} />
</div>
</div> : undefined}
{showEditorToolbar && <editortoolbar.EditorToolbar ref="editortools" parent={this} />}
{sideDocs ? <container.SideDocs ref="sidedoc" parent={this} sideDocsCollapsed={this.state.sideDocsCollapsed} docsUrl={this.state.sideDocsLoadUrl} /> : undefined}
{sandbox ? undefined : <scriptsearch.ScriptSearch parent={this} ref={this.handleScriptSearchRef} />}
{sandbox ? undefined : <extensions.Extensions parent={this} ref={this.handleExtensionRef} />}
{inHome ? <projects.ImportDialog parent={this} ref={this.handleImportDialogRef} /> : undefined}
{hasIdentity ? <identity.LoginDialog parent={this} ref={this.handleLoginDialogRef} /> : undefined}
{hasIdentity ? <user.ProfileDialog parent={this} ref={this.handleProfileDialogRef} /> : undefined}
{inHome && targetTheme.scriptManager ? <scriptmanager.ScriptManagerDialog parent={this} ref={this.handleScriptManagerDialogRef} onClose={this.handleScriptManagerDialogClose} /> : undefined}
{sandbox ? undefined : <projects.ExitAndSaveDialog parent={this} ref={this.handleExitAndSaveDialogRef} />}
{sandbox ? undefined : <projects.NewProjectDialog parent={this} ref={this.handleNewProjectDialogRef} />}
{hwDialog ? <projects.ChooseHwDialog parent={this} ref={this.handleChooseHwDialogRef} /> : undefined}
{sandbox || !sharingEnabled ? undefined : <share.ShareEditor parent={this} ref={this.handleShareEditorRef} loading={this.state.publishing} />}
{selectLanguage ? <lang.LanguagePicker parent={this} ref={this.handleLanguagePickerRef} /> : undefined}
{sandbox ? <container.SandboxFooter parent={this} /> : undefined}
{hideMenuBar ? <div id="editorlogo"><a className="poweredbylogo"></a></div> : undefined}
{lightbox ? <sui.Dimmer isOpen={true} active={lightbox} portalClassName={'tutorial'} className={'ui modal'}
shouldFocusAfterRender={false} closable={true} onClose={this.hideLightbox} /> : undefined}
</div>
);
}