From 07a2262d28eb798580da22d8f702e55582c23f5f Mon Sep 17 00:00:00 2001 From: Diego Colombo Date: Fri, 19 Apr 2024 22:41:05 +0100 Subject: [PATCH 1/3] listen to iframe resizing and send request --- .../src/EditorAdapter.ts | 2 ++ .../src/monacoAdapterImpl.ts | 4 ++++ .../src/newContract.ts | 9 +++++++++ .../src/tryDotNetEditor.ts | 4 ++++ .../tests/monacoEditorSimulator.ts | 6 ++++++ src/microsoft-trydotnet/src/editor.ts | 1 + .../src/internals/monacoTextEditor.ts | 9 +++++++++ src/microsoft-trydotnet/src/newContract.ts | 9 +++++++++ src/microsoft-trydotnet/src/sessionFactory.ts | 17 +++++++++++++++++ 9 files changed, 61 insertions(+) diff --git a/src/microsoft-trydotnet-editor/src/EditorAdapter.ts b/src/microsoft-trydotnet-editor/src/EditorAdapter.ts index a67b1b352..03f6404ae 100644 --- a/src/microsoft-trydotnet-editor/src/EditorAdapter.ts +++ b/src/microsoft-trydotnet-editor/src/EditorAdapter.ts @@ -34,6 +34,8 @@ export abstract class EditorAdapter { abstract setPosition(position: { line: number, column: number }): void; abstract updateOptions(options: any): void; abstract focus(): void; + abstract layout(size?: { width: number, height: number }): void; + private _diagnostics: polyglotNotebooks.Diagnostic[] = []; abstract setMarkers(markers: IMarkerData[]); diff --git a/src/microsoft-trydotnet-editor/src/monacoAdapterImpl.ts b/src/microsoft-trydotnet-editor/src/monacoAdapterImpl.ts index a7b108a01..9db8bb0b2 100644 --- a/src/microsoft-trydotnet-editor/src/monacoAdapterImpl.ts +++ b/src/microsoft-trydotnet-editor/src/monacoAdapterImpl.ts @@ -37,6 +37,10 @@ export class MonacoEditorAdapter extends editorAdapter.EditorAdapter { this._editor.focus(); } + layout(size: { width: number, height: number }): void { + this._editor.layout(size); + } + private _onDidChangeModelContentEvents: rxjs.Subject = new rxjs.Subject(); constructor(private _editor: monaco.editor.IStandaloneCodeEditor) { diff --git a/src/microsoft-trydotnet-editor/src/newContract.ts b/src/microsoft-trydotnet-editor/src/newContract.ts index 1cfe39c68..03de23ad7 100644 --- a/src/microsoft-trydotnet-editor/src/newContract.ts +++ b/src/microsoft-trydotnet-editor/src/newContract.ts @@ -3,6 +3,7 @@ import * as polyglotNotebooks from '@microsoft/polyglot-notebooks'; export const EditorContentChangedType = "EditorContentChanged"; export const ConfigureMonacoEditorType = "ConfigureMonacoEditor"; +export const SetMonacoEditorSizeType = "SetMonacoEditorSize"; export const DefineMonacoEditorThemesType = "DefineMonacoEditorThemes"; export const SetEditorContentType = "SetEditorContent"; export const EnableLoggingType = "EnableLogging"; @@ -50,6 +51,14 @@ export interface OpenDocument { requestId: string; } +export interface SetMonacoEditorSize { + type: typeof SetMonacoEditorSizeType; + size: { + width: number, + height: number + } +} + export interface CongureMonacoEditor { type: typeof ConfigureMonacoEditorType; editorOptions?: any, diff --git a/src/microsoft-trydotnet-editor/src/tryDotNetEditor.ts b/src/microsoft-trydotnet-editor/src/tryDotNetEditor.ts index b477ed65c..9e41c2ee7 100644 --- a/src/microsoft-trydotnet-editor/src/tryDotNetEditor.ts +++ b/src/microsoft-trydotnet-editor/src/tryDotNetEditor.ts @@ -126,6 +126,10 @@ export class TryDotNetEditor { case newContract.EnableLoggingType: configureLogging({ enableLogging: apiMessage.enableLogging }); break; + case newContract.SetMonacoEditorSizeType: + let size = (apiMessage).size; + this.getEditor().layout(size); + break; case newContract.ConfigureMonacoEditorType: let options = {}; if (apiMessage.editorOptions) { diff --git a/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts b/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts index 10f667345..1b294db8e 100644 --- a/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts +++ b/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts @@ -4,6 +4,7 @@ import * as editorAdapter from "../src/EditorAdapter"; export class MonacoEditorSimulator extends editorAdapter.EditorAdapter { + private _language: string; private _themes: { [x: string]: any; } = {}; private _position: { @@ -13,9 +14,14 @@ export class MonacoEditorSimulator extends editorAdapter.EditorAdapter { private _options = {}; private _code: string; + private _size?: { width: number; height: number; } private _markers: editorAdapter.IMarkerData[]; + layout(size?: { width: number; height: number; } | undefined): void { + this._size = size; + } + setMarkers(markers: editorAdapter.IMarkerData[]) { this._markers = markers; } diff --git a/src/microsoft-trydotnet/src/editor.ts b/src/microsoft-trydotnet/src/editor.ts index ad5dcb6c0..bd9c685aa 100644 --- a/src/microsoft-trydotnet/src/editor.ts +++ b/src/microsoft-trydotnet/src/editor.ts @@ -38,4 +38,5 @@ export interface IMonacoEditor extends ITextEditor { setTheme(theme: Theme): void; setOptions(options: MonacoEditorOptions): void; configure(configuration: MonacoEditorConfiguration): void; + setSize(size: { width: number, height: number }): void; } \ No newline at end of file diff --git a/src/microsoft-trydotnet/src/internals/monacoTextEditor.ts b/src/microsoft-trydotnet/src/internals/monacoTextEditor.ts index 92c489052..44fd9e5e6 100644 --- a/src/microsoft-trydotnet/src/internals/monacoTextEditor.ts +++ b/src/microsoft-trydotnet/src/internals/monacoTextEditor.ts @@ -104,6 +104,15 @@ export class MonacoTextEditor implements ITrydotnetMonacoTextEditor { this.editorApimessageBus.post(request); } + public setSize(size: { width: number, height: number }): void { + const request: newContract.SetMonacoEditorSize = { + type: newContract.SetMonacoEditorSizeType, + size: size + }; + + this.editorApimessageBus.post(request); + } + public configure(configuration: MonacoEditorConfiguration): void { this.setOptions(configuration.options); this.setTheme(configuration.theme); diff --git a/src/microsoft-trydotnet/src/newContract.ts b/src/microsoft-trydotnet/src/newContract.ts index 1cfe39c68..03de23ad7 100644 --- a/src/microsoft-trydotnet/src/newContract.ts +++ b/src/microsoft-trydotnet/src/newContract.ts @@ -3,6 +3,7 @@ import * as polyglotNotebooks from '@microsoft/polyglot-notebooks'; export const EditorContentChangedType = "EditorContentChanged"; export const ConfigureMonacoEditorType = "ConfigureMonacoEditor"; +export const SetMonacoEditorSizeType = "SetMonacoEditorSize"; export const DefineMonacoEditorThemesType = "DefineMonacoEditorThemes"; export const SetEditorContentType = "SetEditorContent"; export const EnableLoggingType = "EnableLogging"; @@ -50,6 +51,14 @@ export interface OpenDocument { requestId: string; } +export interface SetMonacoEditorSize { + type: typeof SetMonacoEditorSizeType; + size: { + width: number, + height: number + } +} + export interface CongureMonacoEditor { type: typeof ConfigureMonacoEditorType; editorOptions?: any, diff --git a/src/microsoft-trydotnet/src/sessionFactory.ts b/src/microsoft-trydotnet/src/sessionFactory.ts index d169dd788..9ce81b765 100644 --- a/src/microsoft-trydotnet/src/sessionFactory.ts +++ b/src/microsoft-trydotnet/src/sessionFactory.ts @@ -9,6 +9,7 @@ import { configureEmbeddableEditorIFrame, configureEmbeddableEditorIFrameWithPac import { Project } from "./project"; import { Logger } from "@microsoft/polyglot-notebooks"; import { configureLogging } from "./log"; +import { IMonacoEditor } from "./editor"; async function _createSession(configuration: Configuration, editorIFrame: HTMLIFrameElement, window: Window, initialState: InitialSessionState, configureEmbeddableEditorIFrameCallBack: (editorIFrame: HTMLIFrameElement, configuration: Configuration) => void): Promise { @@ -18,6 +19,22 @@ async function _createSession(configuration: Configuration, editorIFrame: HTMLIF let messageBus = new IFrameMessageBus(editorIFrame, window); let session = new Session(messageBus); + // listen for size and visibility changes + + const resizeObserver = new ResizeObserver((entries, _observer) => { + for (const entry of entries) { + const { width, height } = entry.contentRect; + let editor = (session.getTextEditor()); + editor.setSize({ width, height }); + } + }); + + resizeObserver.observe(editorIFrame); + + editorIFrame.addEventListener("load", () => { + configureEmbeddableEditorIFrameCallBack(editorIFrame, configuration); + }); + let src = editorIFrame.getAttribute("src"); if (!src) { configureEmbeddableEditorIFrameCallBack(messageBus.targetIframe(), configuration); From ceebb533b31a4cfda65946ac650e3bec824bd793 Mon Sep 17 00:00:00 2001 From: Diego Colombo Date: Fri, 19 Apr 2024 22:52:22 +0100 Subject: [PATCH 2/3] fix missing implementation address inconsistency in api signature again .. --- src/microsoft-trydotnet-editor/src/EditorAdapter.ts | 2 +- src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts | 2 +- src/microsoft-trydotnet/test/fakes/fakeMonacoTextEditor.ts | 3 +++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/microsoft-trydotnet-editor/src/EditorAdapter.ts b/src/microsoft-trydotnet-editor/src/EditorAdapter.ts index 03f6404ae..74e8a1ce9 100644 --- a/src/microsoft-trydotnet-editor/src/EditorAdapter.ts +++ b/src/microsoft-trydotnet-editor/src/EditorAdapter.ts @@ -34,7 +34,7 @@ export abstract class EditorAdapter { abstract setPosition(position: { line: number, column: number }): void; abstract updateOptions(options: any): void; abstract focus(): void; - abstract layout(size?: { width: number, height: number }): void; + abstract layout(size: { width: number, height: number }): void; private _diagnostics: polyglotNotebooks.Diagnostic[] = []; diff --git a/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts b/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts index 1b294db8e..fae2c43c5 100644 --- a/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts +++ b/src/microsoft-trydotnet-editor/tests/monacoEditorSimulator.ts @@ -18,7 +18,7 @@ export class MonacoEditorSimulator extends editorAdapter.EditorAdapter { private _markers: editorAdapter.IMarkerData[]; - layout(size?: { width: number; height: number; } | undefined): void { + layout(size: { width: number; height: number; } | undefined): void { this._size = size; } diff --git a/src/microsoft-trydotnet/test/fakes/fakeMonacoTextEditor.ts b/src/microsoft-trydotnet/test/fakes/fakeMonacoTextEditor.ts index 2cc270a2a..6d8a13f5a 100644 --- a/src/microsoft-trydotnet/test/fakes/fakeMonacoTextEditor.ts +++ b/src/microsoft-trydotnet/test/fakes/fakeMonacoTextEditor.ts @@ -18,6 +18,9 @@ export class FakeMonacoTextEditor implements ITrydotnetMonacoTextEditor { this.editorId = "0"; } } + setSize(size: { width: number; height: number; }): void { + + } public id(): string { return this.editorId; From e3b82c800f69f62fdc833dee9192b6594e6d27ae Mon Sep 17 00:00:00 2001 From: Diego Colombo Date: Fri, 19 Apr 2024 23:23:00 +0100 Subject: [PATCH 3/3] work around for test --- src/microsoft-trydotnet/src/sessionFactory.ts | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/microsoft-trydotnet/src/sessionFactory.ts b/src/microsoft-trydotnet/src/sessionFactory.ts index 9ce81b765..d075a248f 100644 --- a/src/microsoft-trydotnet/src/sessionFactory.ts +++ b/src/microsoft-trydotnet/src/sessionFactory.ts @@ -20,16 +20,19 @@ async function _createSession(configuration: Configuration, editorIFrame: HTMLIF let session = new Session(messageBus); // listen for size and visibility changes + try { + const resizeObserver = new ResizeObserver((entries, _observer) => { + for (const entry of entries) { + const { width, height } = entry.contentRect; + let editor = (session.getTextEditor()); + editor.setSize({ width, height }); + } + }); - const resizeObserver = new ResizeObserver((entries, _observer) => { - for (const entry of entries) { - const { width, height } = entry.contentRect; - let editor = (session.getTextEditor()); - editor.setSize({ width, height }); - } - }); - - resizeObserver.observe(editorIFrame); + resizeObserver.observe(editorIFrame); + } catch (e) { + Logger.default.error("Error creating ResizeObserver"); + } editorIFrame.addEventListener("load", () => { configureEmbeddableEditorIFrameCallBack(editorIFrame, configuration);