diff --git a/static/event-map.ts b/static/event-map.ts index a1f8b5a6e95..d56cf92b863 100644 --- a/static/event-map.ts +++ b/static/event-map.ts @@ -136,6 +136,7 @@ export type EventMap = { ppViewClosed: (compilerId: number) => void; ppViewOpened: (compilerId: number) => void; ppViewOptionsUpdated: (compilerId: number, options: PPOptions, recompile: boolean) => void; + renamePane: () => void; requestCompilation: (editorId: number | boolean, treeId: boolean | number) => void; requestMotd: () => void; requestSettings: () => void; diff --git a/static/panes/ast-view.ts b/static/panes/ast-view.ts index 884c656e14e..44ba9b29b68 100644 --- a/static/panes/ast-view.ts +++ b/static/panes/ast-view.ts @@ -89,7 +89,7 @@ export class Ast extends MonacoPane mouseMoveThrottledFunction(e)); this.fontScale.on('change', this.updateState.bind(this)); - this.paneRenaming.on('renamePane', this.updateState.bind(this)); + this.eventHub.on('renamePane', this.updateState.bind(this)); this.container.on('destroy', this.close, this); diff --git a/static/panes/conformance-view.ts b/static/panes/conformance-view.ts index 33d3f01e96b..9f7e85ba94c 100644 --- a/static/panes/conformance-view.ts +++ b/static/panes/conformance-view.ts @@ -93,7 +93,7 @@ export class Conformance extends Pane { this.stateByLang = {}; - this.paneRenaming = new PaneRenaming(this, state); + this.paneRenaming = new PaneRenaming(this, state, hub); this.initButtons(); this.initCallbacks(); @@ -174,7 +174,7 @@ export class Conformance extends Pane { if (this.compilerInfo.editorId) this.eventHub.emit('conformanceViewClose', this.compilerInfo.editorId); }); - this.paneRenaming.on('renamePane', this.saveState.bind(this)); + this.eventHub.on('renamePane', this.saveState.bind(this)); this.container.on('destroy', this.close, this); this.container.on('open', () => { diff --git a/static/panes/executor.ts b/static/panes/executor.ts index 86316251018..ca14b1def61 100644 --- a/static/panes/executor.ts +++ b/static/panes/executor.ts @@ -207,7 +207,7 @@ export class Executor extends Pane { this.options = state.options || options.compileOptions[this.currentLangId]; this.executionArguments = state.execArgs || ''; this.executionStdin = state.execStdin || ''; - this.paneRenaming = new PaneRenaming(this, state); + this.paneRenaming = new PaneRenaming(this, state, this.hub); } override getInitialHTML(): string { @@ -909,7 +909,7 @@ export class Executor extends Pane { initListeners(): void { // this.filters.on('change', this.onFilterChange.bind(this)); this.fontScale.on('change', this.onFontScale.bind(this)); - this.paneRenaming.on('renamePane', this.updateState.bind(this)); + this.eventHub.on('renamePane', this.updateState.bind(this)); this.toggleWrapButton.on('change', this.onToggleWrapChange.bind(this)); this.container.on('destroy', this.close, this); diff --git a/static/panes/ir-view.ts b/static/panes/ir-view.ts index 64a6402b7c6..0eda4c4110c 100644 --- a/static/panes/ir-view.ts +++ b/static/panes/ir-view.ts @@ -199,7 +199,7 @@ export class Ir extends MonacoPane const onMouseMove = _.throttle(this.onMouseMove.bind(this), 50); const onDidChangeCursorSelection = _.throttle(this.onDidChangeCursorSelection.bind(this), 500); - this.paneRenaming.on('renamePane', this.updateState.bind(this)); + this.eventHub.on('renamePane', this.updateState.bind(this)); this.eventHub.on('compileResult', this.onCompileResult.bind(this)); this.eventHub.on('colours', this.onColours.bind(this)); diff --git a/static/panes/pane.ts b/static/panes/pane.ts index 3032701ffbd..34d4268638f 100644 --- a/static/panes/pane.ts +++ b/static/panes/pane.ts @@ -76,7 +76,7 @@ export abstract class Pane { this.initializeCompilerInfo(state); this.topBar = this.domRoot.find('.top-bar'); - this.paneRenaming = new PaneRenaming(this, state); + this.paneRenaming = new PaneRenaming(this, state, hub); this.initializeDefaults(); this.initializeGlobalDependentProperties(); @@ -200,7 +200,7 @@ export abstract class Pane { /** Initialize standard lifecycle hooks */ protected registerStandardCallbacks(): void { - this.paneRenaming.on('renamePane', this.updateState.bind(this)); + this.eventHub.on('renamePane', this.updateState.bind(this)); this.container.on('destroy', this.close.bind(this)); this.container.on('resize', this.resize.bind(this)); this.eventHub.on('compileResult', this.onCompileResult.bind(this)); diff --git a/static/widgets/pane-renaming.ts b/static/widgets/pane-renaming.ts index bf2b502ed1b..f7ea3731017 100644 --- a/static/widgets/pane-renaming.ts +++ b/static/widgets/pane-renaming.ts @@ -24,19 +24,20 @@ import $ from 'jquery'; import {Tab} from 'golden-layout'; -import {EventEmitter} from 'events'; import {Alert} from './alert.js'; +import {Hub} from '../hub.js'; -export class PaneRenaming extends EventEmitter.EventEmitter { +export class PaneRenaming { private pane: any; private alertSystem: any; private state: any; + private hub: Hub; - constructor(pane: any, state: any) { - super(); + constructor(pane: any, state: any, hub: Hub) { this.pane = pane; this.alertSystem = this.pane.alertSystem ?? new Alert(); this.state = state; + this.hub = hub; this.loadSavedPaneName(); this.registerCallbacks(); @@ -69,7 +70,7 @@ export class PaneRenaming extends EventEmitter.EventEmitter { // Update title and emit event to save it into the state this.pane.paneName = value; this.pane.updateTitle(); - this.emit('renamePane'); + this.hub.layout.eventHub.emit('renamePane'); }, yesClass: 'btn btn-primary', yesHtml: 'Rename',