From ccd36b3d57e1c8510c82e9eb8c3ebdb356397980 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 13 Jan 2020 11:43:59 +0100 Subject: [PATCH] Fix floating tools rendering logic (#54505) Co-authored-by: Elastic Machine --- .../editor/legacy/console_editor/editor.tsx | 2 +- .../subscribe_console_resize_checker.ts | 11 ++++++++-- .../legacy_core_editor/legacy_core_editor.ts | 20 +++++++++---------- .../models/legacy_core_editor/smart_resize.ts | 2 +- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/console_editor/editor.tsx b/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/console_editor/editor.tsx index 40b9cc4640eef..761a252b56a87 100644 --- a/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/console_editor/editor.tsx +++ b/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/console_editor/editor.tsx @@ -164,7 +164,7 @@ function EditorUI() { mappings.retrieveAutoCompleteInfo(); - const unsubscribeResizer = subscribeResizeChecker(editorRef.current!, editor.getCoreEditor()); + const unsubscribeResizer = subscribeResizeChecker(editorRef.current!, editor); setupAutosave(); return () => { diff --git a/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/subscribe_console_resize_checker.ts b/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/subscribe_console_resize_checker.ts index 4ecd5d415833c..1adc56d47927b 100644 --- a/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/subscribe_console_resize_checker.ts +++ b/src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/subscribe_console_resize_checker.ts @@ -22,8 +22,15 @@ export function subscribeResizeChecker(el: HTMLElement, ...editors: any[]) { const checker = new ResizeChecker(el); checker.on('resize', () => editors.forEach(e => { - e.resize(); - if (e.updateActionsBar) e.updateActionsBar(); + if (e.getCoreEditor) { + e.getCoreEditor().resize(); + } else { + e.resize(); + } + + if (e.updateActionsBar) { + e.updateActionsBar(); + } }) ); return () => checker.destroy(); diff --git a/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/legacy_core_editor.ts b/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/legacy_core_editor.ts index 608c73335b3e5..6262c304e307b 100644 --- a/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/legacy_core_editor.ts +++ b/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/legacy_core_editor.ts @@ -297,30 +297,30 @@ export class LegacyCoreEditor implements CoreEditor { // pageY is relative to page, so subtract the offset // from pageY to get the new top value const offsetFromPage = $(this.editor.container).offset()!.top; - const startRow = range.start.lineNumber - 1; + const startLine = range.start.lineNumber; const startColumn = range.start.column; - const firstLine = this.getLineValue(startRow); + const firstLine = this.getLineValue(startLine); const maxLineLength = this.getWrapLimit() - 5; const isWrapping = firstLine.length > maxLineLength; - const getScreenCoords = (row: number) => - this.editor.renderer.textToScreenCoordinates(row, startColumn).pageY - offsetFromPage; - const topOfReq = getScreenCoords(startRow); + const getScreenCoords = (line: number) => + this.editor.renderer.textToScreenCoordinates(line - 1, startColumn).pageY - offsetFromPage; + const topOfReq = getScreenCoords(startLine); if (topOfReq >= 0) { let offset = 0; if (isWrapping) { // Try get the line height of the text area in pixels. const textArea = $(this.editor.container.querySelector('textArea')!); - const hasRoomOnNextLine = this.getLineValue(startRow + 1).length < maxLineLength; + const hasRoomOnNextLine = this.getLineValue(startLine).length < maxLineLength; if (textArea && hasRoomOnNextLine) { // Line height + the number of wraps we have on a line. - offset += this.getLineValue(startRow).length * textArea.height()!; + offset += this.getLineValue(startLine).length * textArea.height()!; } else { - if (startRow > 0) { - this.setActionsBar(getScreenCoords(startRow - 1)); + if (startLine > 1) { + this.setActionsBar(getScreenCoords(startLine - 1)); return; } - this.setActionsBar(getScreenCoords(startRow + 1)); + this.setActionsBar(getScreenCoords(startLine + 1)); return; } } diff --git a/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/smart_resize.ts b/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/smart_resize.ts index b88e0e44591d8..7c4d871c4d73e 100644 --- a/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/smart_resize.ts +++ b/src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/smart_resize.ts @@ -24,7 +24,7 @@ export default function(editor: any) { const resize = editor.resize; const throttledResize = throttle(() => { - resize.call(editor); + resize.call(editor, false); // Keep current top line in view when resizing to avoid losing user context const userRow = get(throttledResize, 'topRow', 0);