From f678d847e63a5d958f8634650022c417694f8602 Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Fri, 28 Oct 2022 17:14:50 -0400 Subject: [PATCH 01/10] initial work to open file at a specific line using URL Signed-off-by: Adarshdeep Cheema --- webClient/src/app/app.component.ts | 3 +- .../code-editor/monaco/monaco.component.scss | 5 +++ .../code-editor/monaco/monaco.component.ts | 25 +++++++++++++++ .../editor-control/editor-control.service.ts | 31 +++++++++++++++++-- 4 files changed, 61 insertions(+), 3 deletions(-) diff --git a/webClient/src/app/app.component.ts b/webClient/src/app/app.component.ts index b119a688..7470cb21 100644 --- a/webClient/src/app/app.component.ts +++ b/webClient/src/app/app.component.ts @@ -63,6 +63,7 @@ export class AppComponent { //TODO should this or must this also load the directory at the time that the file is let lastSlash = data.name.lastIndexOf("/"); let firstSlash = data.name.indexOf("/"); + let selectedlines = data.lines.split("-"); if (lastSlash == data.name.length-1) { this.log.warn(`Ignoring opening invalid file or dataset name=${data.name}`); return; @@ -87,7 +88,7 @@ export class AppComponent { let fileName = data.name.substring(lastSlash+1); for (let i = 0; i < nodes.length; i++) { if (nodes[i].fileName == fileName) { - this.editorControl.openFile('', nodes[i]).subscribe(x => { + this.editorControl.openFile('', nodes[i], selectedlines).subscribe(x => { this.log.debug(`file loaded through app2app.`); }); this.editorControl.loadDirectory(nodes[i].path ? nodes[i].path : '/'); diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.scss b/webClient/src/app/editor/code-editor/monaco/monaco.component.scss index ead55a68..ab9c870a 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.scss +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.scss @@ -27,6 +27,11 @@ background-color: yellow; color: black; } + ::ng-deep .myLineDecoration { + background: lightblue; + width: 5px !important; + margin-left: 3px; + } } .loading-indicator { position: absolute; diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts index 9c410dac..0debdcdf 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts @@ -23,6 +23,9 @@ import * as monaco from 'monaco-editor'; import { Subscription } from 'rxjs'; import { EditorKeybindingService } from '../../../shared/editor-keybinding.service'; import { KeyCode } from '../../../shared/keycode-enum'; +import { SnackBarService } from '../../../shared/snack-bar.service'; +import { MessageDuration } from "../../../shared/message-duration"; + const ReconnectingWebSocket = require('reconnecting-websocket'); @Component({ @@ -65,7 +68,9 @@ export class MonacoComponent implements OnInit, OnChanges { private editorControl: EditorControlService, private languageService: LanguageServerService, private appKeyboard: EditorKeybindingService, + public snackBar: SnackBarService, @Inject(Angular2InjectionTokens.LOGGER) private log: ZLUX.ComponentLogger, + @Inject(Angular2InjectionTokens.PLUGIN_DEFINITION) private pluginDefinition: ZLUX.ContainerPluginDefinition, @Inject(Angular2InjectionTokens.VIEWPORT_EVENTS) private viewportEvents: Angular2PluginViewportEvents) { this.keyBindingSub.add(this.appKeyboard.keydownEvent.subscribe((event) => { if (event.which === KeyCode.KEY_V) { @@ -116,6 +121,25 @@ export class MonacoComponent implements OnInit, OnChanges { this.editorControl.refreshLayout.subscribe(() =>{ setTimeout(() => this.editor.layout(), 1); }); + + this.editor.onContextMenu(function (e) { + console.log(e.target.position.lineNumber); + /* + * lines = "22-44" -> where 22 is the first line and 44 is last line + * lines = "22" -> where 22 is the first line and 22 is last line + */ + let lines = e.target.position.lineNumber; + // let link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openFile","name":"${encodeURIComponent('path')}","lines": "${lines}","toggleTree":true}`; + let link = `${window.location.origin}${window.location.pathname}?pluginId=org.zowe.editor:data:{"type":"openFile","name":"${encodeURIComponent('path')}","lines": "${lines}","toggleTree":true}`; + console.log(link); + + navigator.clipboard.writeText(link).then(() => { + this.log.debug("Link copied to clipboard"); + this.snackBar.open("Copied link successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); + }).catch(() => { + console.error("Failed to copy link to clipboard"); + }); + }); } focus(e: any) { @@ -143,6 +167,7 @@ export class MonacoComponent implements OnInit, OnChanges { } } + onMonacoInit(editor) { this.editorControl.editor.next(editor); this.keyBinds(editor); diff --git a/webClient/src/app/shared/editor-control/editor-control.service.ts b/webClient/src/app/shared/editor-control/editor-control.service.ts index fd8e9945..d23addb1 100644 --- a/webClient/src/app/shared/editor-control/editor-control.service.ts +++ b/webClient/src/app/shared/editor-control/editor-control.service.ts @@ -1044,7 +1044,7 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff * @param targetBuffer The buffer into which the file should be opened, or null to open a new buffer * @returns An observable that pushes a handle to the buffer into which the file was opened */ - openFile(file: string, targetBuffer: ZLUX.EditorBufferHandle | null): Observable { + openFile(file: string, targetBuffer: ZLUX.EditorBufferHandle | null, selectedlines?: any): Observable { // targetBuffer is a context of project in GCE. let resultOpenObs: Observable; let fileOpenSub: Subscription; @@ -1058,7 +1058,34 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff fileOpenSub = this.fileOpened.subscribe((e: ZLUX.EditorFileOpenedEvent) => { let model = e.buffer.model; lastFile = `${model.fileName}:${model.path}`; - + let firstLine = 1; + let lastLine = 1; + //If we are opening a file with selected line via URL link to file + if(selectedlines.length >0){ + if(selectedlines.length == 1){ + firstLine = Number(selectedlines[0]); + lastLine = firstLine; + } else{ + firstLine = Number(selectedlines[0]); + lastLine = Number(selectedlines[1]); + } + let editor = this.editor.getValue(); + this.editor.subscribe((value)=> { + value.revealRangeAtTop(new monaco.Range(firstLine, 1, lastLine, 1)); + value.deltaDecorations( + [], + [ + { + range: new monaco.Range(firstLine, 1, lastLine, 1), + options: { + isWholeLine: true, + linesDecorationsClassName: 'myLineDecoration' + } + } + ] + ); + }) + } // if have subscriber if (resultObserver) { if (e.buffer != null && e.buffer.id === targetBuffer.id) { From 7fc5eb618028eb98611b51652605dbf5b959eba0 Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Mon, 31 Oct 2022 09:50:17 -0400 Subject: [PATCH 02/10] using the plugin definition to create the URL Signed-off-by: Adarshdeep Cheema --- .../app/editor/code-editor/monaco/monaco.component.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts index 0debdcdf..4da5b274 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts @@ -122,17 +122,15 @@ export class MonacoComponent implements OnInit, OnChanges { setTimeout(() => this.editor.layout(), 1); }); - this.editor.onContextMenu(function (e) { - console.log(e.target.position.lineNumber); + this.editor.onContextMenu( (e: any) => { + const activeFile = this.editorControl.fetchActiveFile(); + const filePath = activeFile.model.path + "/"+ activeFile.model.name; /* * lines = "22-44" -> where 22 is the first line and 44 is last line * lines = "22" -> where 22 is the first line and 22 is last line */ let lines = e.target.position.lineNumber; - // let link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openFile","name":"${encodeURIComponent('path')}","lines": "${lines}","toggleTree":true}`; - let link = `${window.location.origin}${window.location.pathname}?pluginId=org.zowe.editor:data:{"type":"openFile","name":"${encodeURIComponent('path')}","lines": "${lines}","toggleTree":true}`; - console.log(link); - + let link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openFile","name":"${encodeURIComponent(filePath)}","lines":"${lines}","toggleTree":true}`; navigator.clipboard.writeText(link).then(() => { this.log.debug("Link copied to clipboard"); this.snackBar.open("Copied link successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); From f4d742c52c40be735f0e1077ba1b9e447071e414 Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Mon, 31 Oct 2022 12:24:40 -0400 Subject: [PATCH 03/10] adding option to copy the line content Signed-off-by: Adarshdeep Cheema --- .../code-editor/monaco/monaco.component.ts | 61 ++++++++++++++----- 1 file changed, 46 insertions(+), 15 deletions(-) diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts index 4da5b274..58d9c4f6 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts @@ -122,21 +122,19 @@ export class MonacoComponent implements OnInit, OnChanges { setTimeout(() => this.editor.layout(), 1); }); - this.editor.onContextMenu( (e: any) => { - const activeFile = this.editorControl.fetchActiveFile(); - const filePath = activeFile.model.path + "/"+ activeFile.model.name; - /* - * lines = "22-44" -> where 22 is the first line and 44 is last line - * lines = "22" -> where 22 is the first line and 22 is last line - */ - let lines = e.target.position.lineNumber; - let link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openFile","name":"${encodeURIComponent(filePath)}","lines":"${lines}","toggleTree":true}`; - navigator.clipboard.writeText(link).then(() => { - this.log.debug("Link copied to clipboard"); - this.snackBar.open("Copied link successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); - }).catch(() => { - console.error("Failed to copy link to clipboard"); - }); + this.editor.onContextMenu((e: any) => { + if(e.target.type === 3){ //if right click is on top of the line numbers + this.viewportEvents.spawnContextMenu(e.event.browserEvent.clientX, e.event.browserEvent.clientY, [ + { + text: 'Copy permalink', + action: () => this.copyPermalink(e) + }, + { + text: 'Copy line', + action: () => this.copyLine(e) + } + ], true) + } }); } @@ -254,6 +252,39 @@ export class MonacoComponent implements OnInit, OnChanges { }); } + copyPermalink(event: any){ + /* + * lines = "22-44" -> where 22 is the first line and 44 is last line ( TODO: Select multiple lines ) + * lines = "22" -> where 22 is the first line and 22 is last line + */ + const lines = event.target.position.lineNumber; + const activeFile = this.editorControl.fetchActiveFile(); + const filePath = activeFile.model.path + "/"+ activeFile.model.name; + const link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openFile","name":"${encodeURIComponent(filePath)}","lines":"${lines}","toggleTree":true}`; + navigator.clipboard.writeText(link).then(() => { + this.log.debug("Link copied to clipboard"); + this.snackBar.open("Copied link successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); + }).catch((error) => { + console.error("Failed to copy link to clipboard"+ error); + }); + } + + copyLine(event: any){ + /* + * lines = "22-44" -> where 22 is the first line and 44 is last line ( TODO: Select multiple lines ) + * lines = "22" -> where 22 is the first line and 22 is last line + */ + const lines = event.target.position.lineNumber; + const lineContent = this.editor.getModel().getLineContent(lines); + console.log(lineContent); + navigator.clipboard.writeText(lineContent).then(() => { + this.log.debug("Line copied to clipboard"); + this.snackBar.open("Copied line successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); + }).catch((error) => { + console.error("Failed to copy link to clipboard"+ error); + }); + } + saveFile() { let fileContext = this.editorControl.fetchActiveFile(); let directory = fileContext.model.path || this.editorControl.activeDirectory; From de9a422121922bedab19c157356c8cb6dfd7584b Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Mon, 31 Oct 2022 12:36:24 -0400 Subject: [PATCH 04/10] updating change log Signed-off-by: Adarshdeep Cheema --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e80d75da..310027ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## `3.0.1` - Bugfix: Added a few rules for JCL syntax highlighter - Bugfix: Set USS path to correct directory, when opening the directory or file in new browser tab respectively +- Added the feature to copy the line content and copy URL link to open a file at a specific line ## `3.0.0` From bc2b21e3c092066804c84242d4b9367536b8c68d Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Mon, 31 Oct 2022 14:59:27 -0400 Subject: [PATCH 05/10] add the feature to open the Dataset via link and with specific line at top and copy the DataSet line content Signed-off-by: Adarshdeep Cheema --- webClient/src/app/app.component.ts | 15 ++++++++---- .../code-editor/monaco/monaco.component.ts | 22 +++++++---------- .../project-tree/project-tree.component.ts | 8 ++++--- .../editor-control/editor-control.service.ts | 24 +++++++++---------- 4 files changed, 37 insertions(+), 32 deletions(-) diff --git a/webClient/src/app/app.component.ts b/webClient/src/app/app.component.ts index 7470cb21..7cd93359 100644 --- a/webClient/src/app/app.component.ts +++ b/webClient/src/app/app.component.ts @@ -54,6 +54,14 @@ export class AppComponent { } handleLaunchOrMessageObject(data: any) { + /** + * selectedLines=[2] -> selected line is number 2 (in URL the info will look like "lines":"2") + * selectedLines=[2,7] -> selected lines are number 2-7 (TODO: Need to add the option to copy multiple lines and pass the info in the URL like "lines":"2-7") + */ + let selectedLines = []; + if(data.lines){ + selectedLines = data.lines.split("-") + } switch (data.type) { case 'test-language': this.log.info(`Setting language test mode`); @@ -63,7 +71,6 @@ export class AppComponent { //TODO should this or must this also load the directory at the time that the file is let lastSlash = data.name.lastIndexOf("/"); let firstSlash = data.name.indexOf("/"); - let selectedlines = data.lines.split("-"); if (lastSlash == data.name.length-1) { this.log.warn(`Ignoring opening invalid file or dataset name=${data.name}`); return; @@ -88,7 +95,7 @@ export class AppComponent { let fileName = data.name.substring(lastSlash+1); for (let i = 0; i < nodes.length; i++) { if (nodes[i].fileName == fileName) { - this.editorControl.openFile('', nodes[i], selectedlines).subscribe(x => { + this.editorControl.openFile('', nodes[i], selectedLines).subscribe(x => { this.log.debug(`file loaded through app2app.`); }); this.editorControl.loadDirectory(nodes[i].path ? nodes[i].path : '/'); @@ -100,13 +107,13 @@ export class AppComponent { }); } else { this.log.info(`Opening dataset=${data.name}`); - this.editorControl.openDataset.next(data.name); + this.editorControl.openDataset.next({datasetName: data.name, selectedLines: selectedLines}); } break; case 'openDataset': if (data.name) { this.log.info(`Opening dataset=${data.name}`); - this.editorControl.openDataset.next(data.name); + this.editorControl.openDataset.next({datasetName: data.name, selectedLines: selectedLines}); } else { this.log.warn(`Dataset name missing. Skipping operation`); } diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts index 58d9c4f6..097cd88d 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts @@ -25,7 +25,6 @@ import { EditorKeybindingService } from '../../../shared/editor-keybinding.servi import { KeyCode } from '../../../shared/keycode-enum'; import { SnackBarService } from '../../../shared/snack-bar.service'; import { MessageDuration } from "../../../shared/message-duration"; - const ReconnectingWebSocket = require('reconnecting-websocket'); @Component({ @@ -145,7 +144,6 @@ export class MonacoComponent implements OnInit, OnChanges { this.editor.layout(); } - ngOnChanges(changes: SimpleChanges) { for (const input in changes) { if (input === 'editorFile' && changes[input].currentValue != null) { @@ -253,14 +251,17 @@ export class MonacoComponent implements OnInit, OnChanges { } copyPermalink(event: any){ - /* - * lines = "22-44" -> where 22 is the first line and 44 is last line ( TODO: Select multiple lines ) - * lines = "22" -> where 22 is the first line and 22 is last line - */ const lines = event.target.position.lineNumber; const activeFile = this.editorControl.fetchActiveFile(); - const filePath = activeFile.model.path + "/"+ activeFile.model.name; - const link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openFile","name":"${encodeURIComponent(filePath)}","lines":"${lines}","toggleTree":true}`; + let filePath = ''; + let link = ''; + if(activeFile.model.isDataset){ + filePath = activeFile.model.path; + link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openDataset","name":"${encodeURIComponent(filePath)}","lines":"${lines}","toggleTree":true}`; + } else { + filePath = activeFile.model.path + "/" + activeFile.model.name; + link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openFile","name":"${encodeURIComponent(filePath)}","lines":"${lines}","toggleTree":true}`; + } navigator.clipboard.writeText(link).then(() => { this.log.debug("Link copied to clipboard"); this.snackBar.open("Copied link successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); @@ -270,13 +271,8 @@ export class MonacoComponent implements OnInit, OnChanges { } copyLine(event: any){ - /* - * lines = "22-44" -> where 22 is the first line and 44 is last line ( TODO: Select multiple lines ) - * lines = "22" -> where 22 is the first line and 22 is last line - */ const lines = event.target.position.lineNumber; const lineContent = this.editor.getModel().getLineContent(lines); - console.log(lineContent); navigator.clipboard.writeText(lineContent).then(() => { this.log.debug("Line copied to clipboard"); this.snackBar.open("Copied line successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); diff --git a/webClient/src/app/editor/project-tree/project-tree.component.ts b/webClient/src/app/editor/project-tree/project-tree.component.ts index f3a48412..c8fd871c 100644 --- a/webClient/src/app/editor/project-tree/project-tree.component.ts +++ b/webClient/src/app/editor/project-tree/project-tree.component.ts @@ -156,7 +156,9 @@ export class ProjectTreeComponent { } }); - this.editorControl.openDataset.subscribe(dirName => { + this.editorControl.openDataset.subscribe(datasetInfo => { + let dirName= datasetInfo.datasetName; + const selectedLines = datasetInfo.selectedLines; if (dirName != null && dirName !== '') { if (dirName[0] != '/') { dirName = dirName.toUpperCase(); @@ -181,9 +183,9 @@ export class ProjectTreeComponent { this.nodes = isMember ? this.dataAdapter.convertDatasetMemberList(response) : this.dataAdapter.convertDatasetList(response); this.editorControl.setProjectNode(this.nodes); if(isMember){ - this.editorControl.openFile('',this.nodes.find(item => item.name === dsMemberName)).subscribe(x=> {this.log.debug('Dataset Member opened')}); + this.editorControl.openFile('',this.nodes.find(item => item.name === dsMemberName), datasetInfo.selectedLines).subscribe(x=> {this.log.debug('Dataset Member opened')}); } else{ - this.editorControl.openFile('',this.nodes[0]).subscribe(x=> {this.log.debug('Dataset opened')}); + this.editorControl.openFile('',this.nodes[0], datasetInfo.selectedLines).subscribe(x=> {this.log.debug('Dataset opened')}); } }, e => { // TODO diff --git a/webClient/src/app/shared/editor-control/editor-control.service.ts b/webClient/src/app/shared/editor-control/editor-control.service.ts index d23addb1..c5f791ab 100644 --- a/webClient/src/app/shared/editor-control/editor-control.service.ts +++ b/webClient/src/app/shared/editor-control/editor-control.service.ts @@ -53,7 +53,7 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff public createDirectory: EventEmitter = new EventEmitter(); public openProject: EventEmitter = new EventEmitter(); public openDirectory: EventEmitter = new EventEmitter(); - public openDataset: EventEmitter = new EventEmitter(); + public openDataset: EventEmitter = new EventEmitter(); public toggleFileTreeSearch: EventEmitter = new EventEmitter(); public closeAllFiles: EventEmitter = new EventEmitter(); public undoCloseAllFiles: EventEmitter = new EventEmitter(); @@ -1042,9 +1042,10 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff * * @param file The path of the file that should be opened * @param targetBuffer The buffer into which the file should be opened, or null to open a new buffer + * @param selectedLines Array that stores the first and last selected lines * @returns An observable that pushes a handle to the buffer into which the file was opened */ - openFile(file: string, targetBuffer: ZLUX.EditorBufferHandle | null, selectedlines?: any): Observable { + openFile(file: string, targetBuffer: ZLUX.EditorBufferHandle | null, selectedLines?: any): Observable { // targetBuffer is a context of project in GCE. let resultOpenObs: Observable; let fileOpenSub: Subscription; @@ -1054,20 +1055,19 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff resultOpenObs = new Observable((observer) => { resultObserver = observer; }); - fileOpenSub = this.fileOpened.subscribe((e: ZLUX.EditorFileOpenedEvent) => { let model = e.buffer.model; lastFile = `${model.fileName}:${model.path}`; - let firstLine = 1; - let lastLine = 1; - //If we are opening a file with selected line via URL link to file - if(selectedlines.length >0){ - if(selectedlines.length == 1){ - firstLine = Number(selectedlines[0]); + //If we are opening a file with selected line or lines via URL link to file + if(selectedLines.length > 0){ + let firstLine = 1; + let lastLine = 1; + if(selectedLines.length == 1){ + firstLine = Number(selectedLines[0]); lastLine = firstLine; - } else{ - firstLine = Number(selectedlines[0]); - lastLine = Number(selectedlines[1]); + } else if(selectedLines.length == 2){ + firstLine = Number(selectedLines[0]); + lastLine = Number(selectedLines[1]); } let editor = this.editor.getValue(); this.editor.subscribe((value)=> { From 19c727beeffdf65bcbf7ebe47b29a1c3700f55ee Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Tue, 1 Nov 2022 08:56:19 -0400 Subject: [PATCH 06/10] fixing the code Signed-off-by: Adarshdeep Cheema --- .../src/app/shared/editor-control/editor-control.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webClient/src/app/shared/editor-control/editor-control.service.ts b/webClient/src/app/shared/editor-control/editor-control.service.ts index c5f791ab..e4335df8 100644 --- a/webClient/src/app/shared/editor-control/editor-control.service.ts +++ b/webClient/src/app/shared/editor-control/editor-control.service.ts @@ -1059,7 +1059,7 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff let model = e.buffer.model; lastFile = `${model.fileName}:${model.path}`; //If we are opening a file with selected line or lines via URL link to file - if(selectedLines.length > 0){ + if(selectedLines && selectedLines.length > 0){ let firstLine = 1; let lastLine = 1; if(selectedLines.length == 1){ From fba6febb04c4695ea918a0f5ddc884d56bd8dbf0 Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Wed, 9 Nov 2022 09:59:59 -0500 Subject: [PATCH 07/10] changing the decoration of highlighted and fixing the snackbar Signed-off-by: Adarshdeep Cheema --- .../app/editor/code-editor/monaco/monaco.component.scss | 7 ++++--- .../app/editor/code-editor/monaco/monaco.component.ts | 9 +++++---- .../app/shared/editor-control/editor-control.service.ts | 4 ++-- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.scss b/webClient/src/app/editor/code-editor/monaco/monaco.component.scss index ab9c870a..f5bbbc4c 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.scss +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.scss @@ -28,9 +28,10 @@ color: black; } ::ng-deep .myLineDecoration { - background: lightblue; - width: 5px !important; - margin-left: 3px; + // background: lightblue; + // width: 5px !important; + // margin-left: 3px; + background: #e6e1ad; width: 50px !important; } } .loading-indicator { diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts index 097cd88d..dd264ae7 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts @@ -263,10 +263,10 @@ export class MonacoComponent implements OnInit, OnChanges { link = `${window.location.origin}${window.location.pathname}?pluginId=${this.pluginDefinition.getBasePlugin().getIdentifier()}:data:{"type":"openFile","name":"${encodeURIComponent(filePath)}","lines":"${lines}","toggleTree":true}`; } navigator.clipboard.writeText(link).then(() => { - this.log.debug("Link copied to clipboard"); - this.snackBar.open("Copied link successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); + this.log.debug("Permalink copied to clipboard"); }).catch((error) => { - console.error("Failed to copy link to clipboard"+ error); + console.error("Failed to copy permalink Error: " + error); + this.snackBar.open("Failed to copy permalink. Error: " + error, 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); }); } @@ -277,7 +277,8 @@ export class MonacoComponent implements OnInit, OnChanges { this.log.debug("Line copied to clipboard"); this.snackBar.open("Copied line successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); }).catch((error) => { - console.error("Failed to copy link to clipboard"+ error); + console.error("Failed to copy line. Error: " + error); + this.snackBar.open("Failed to copy line. Error: " + error, 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); }); } diff --git a/webClient/src/app/shared/editor-control/editor-control.service.ts b/webClient/src/app/shared/editor-control/editor-control.service.ts index e4335df8..7b563f19 100644 --- a/webClient/src/app/shared/editor-control/editor-control.service.ts +++ b/webClient/src/app/shared/editor-control/editor-control.service.ts @@ -1076,10 +1076,10 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff [], [ { - range: new monaco.Range(firstLine, 1, lastLine, 1), + range: new monaco.Range(firstLine, 1, lastLine, 1000000), options: { isWholeLine: true, - linesDecorationsClassName: 'myLineDecoration' + inlineClassName: 'myLineDecoration' } } ] From 9544e79d0f69b2148f8207512e904daa65f6e42b Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Wed, 9 Nov 2022 11:18:50 -0500 Subject: [PATCH 08/10] changing the decoration of highlighted and fixing the snackbar Signed-off-by: Adarshdeep Cheema --- .../src/app/shared/editor-control/editor-control.service.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/webClient/src/app/shared/editor-control/editor-control.service.ts b/webClient/src/app/shared/editor-control/editor-control.service.ts index 7b563f19..5dd22e3e 100644 --- a/webClient/src/app/shared/editor-control/editor-control.service.ts +++ b/webClient/src/app/shared/editor-control/editor-control.service.ts @@ -1078,7 +1078,6 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff { range: new monaco.Range(firstLine, 1, lastLine, 1000000), options: { - isWholeLine: true, inlineClassName: 'myLineDecoration' } } From 28232ef7240502bf2f11b5aeb0cfa2d2599a6ef5 Mon Sep 17 00:00:00 2001 From: AdarshdeepCheema <57364561+AdarshdeepCheema@users.noreply.github.com> Date: Thu, 10 Nov 2022 13:38:27 -0500 Subject: [PATCH 09/10] Update monaco.component.scss Signed-off-by: AdarshdeepCheema <57364561+AdarshdeepCheema@users.noreply.github.com> --- .../src/app/editor/code-editor/monaco/monaco.component.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.scss b/webClient/src/app/editor/code-editor/monaco/monaco.component.scss index f5bbbc4c..dc7a0479 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.scss +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.scss @@ -28,9 +28,6 @@ color: black; } ::ng-deep .myLineDecoration { - // background: lightblue; - // width: 5px !important; - // margin-left: 3px; background: #e6e1ad; width: 50px !important; } } From bc5e7a8956277151a4e61907a352b6a7455487cb Mon Sep 17 00:00:00 2001 From: Adarshdeep Cheema Date: Thu, 17 Nov 2022 11:13:30 -0500 Subject: [PATCH 10/10] remove the decoration when user edits the file or dataset Signed-off-by: Adarshdeep Cheema --- .../src/app/editor/code-editor/monaco/monaco.component.ts | 1 - .../src/app/editor/code-editor/monaco/monaco.service.ts | 8 +++++++- .../app/shared/editor-control/editor-control.service.ts | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts index dd264ae7..d19a474a 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts +++ b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts @@ -275,7 +275,6 @@ export class MonacoComponent implements OnInit, OnChanges { const lineContent = this.editor.getModel().getLineContent(lines); navigator.clipboard.writeText(lineContent).then(() => { this.log.debug("Line copied to clipboard"); - this.snackBar.open("Copied line successfully", 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); }).catch((error) => { console.error("Failed to copy line. Error: " + error); this.snackBar.open("Failed to copy line. Error: " + error, 'Dismiss', { duration: MessageDuration.Short, panelClass: 'center' }); diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.service.ts b/webClient/src/app/editor/code-editor/monaco/monaco.service.ts index 92fdebaa..6ccaf1a0 100644 --- a/webClient/src/app/editor/code-editor/monaco/monaco.service.ts +++ b/webClient/src/app/editor/code-editor/monaco/monaco.service.ts @@ -561,10 +561,16 @@ export class MonacoService implements OnDestroy { this.editorControl.removeActiveFromAllFiles(); fileNode.changed = true; fileNode.active = true; + this.cleanDecoration(); } cleanDecoration() { - this.editorControl.editor.getValue().deltaDecorations(this.decorations, []); + let editorValue = this.editorControl.editor.getValue(); + let decorationIds=[]; + editorValue.getModel().getAllDecorations().forEach((decoration) => { + decorationIds.push(decoration.id); + }); + editorValue.deltaDecorations(decorationIds, []); } } diff --git a/webClient/src/app/shared/editor-control/editor-control.service.ts b/webClient/src/app/shared/editor-control/editor-control.service.ts index 5dd22e3e..fed5921c 100644 --- a/webClient/src/app/shared/editor-control/editor-control.service.ts +++ b/webClient/src/app/shared/editor-control/editor-control.service.ts @@ -1078,7 +1078,7 @@ export class EditorControlService implements ZLUX.IEditor, ZLUX.IEditorMultiBuff { range: new monaco.Range(firstLine, 1, lastLine, 1000000), options: { - inlineClassName: 'myLineDecoration' + marginClassName: 'myLineDecoration' } } ]