From d49cdcf77da0cee99fb1b01706011f5223f0b55c Mon Sep 17 00:00:00 2001 From: JannisDommer Date: Wed, 3 Jan 2024 18:24:22 +0100 Subject: [PATCH] refactor(playground): created a utility class to hold re-occurring functions --- WebSocketClient/package-lock.json | 13 +++-- WebSocketClient/package.json | 1 + WebSocketClient/src/main.ts | 86 ++---------------------------- WebSocketClient/src/util.ts | 87 +++++++++++++++++++++++++++++++ 4 files changed, 101 insertions(+), 86 deletions(-) create mode 100644 WebSocketClient/src/util.ts diff --git a/WebSocketClient/package-lock.json b/WebSocketClient/package-lock.json index 42def1f..68697cf 100644 --- a/WebSocketClient/package-lock.json +++ b/WebSocketClient/package-lock.json @@ -31,6 +31,7 @@ "vscode-ws-jsonrpc": "~3.0.0" }, "devDependencies": { + "@types/lodash": "^4.14.202", "@types/node": "^20.8.7", "@types/uuid": "^9.0.7", "@types/vscode": "~1.83.0", @@ -489,6 +490,12 @@ "node": ">=12" } }, + "node_modules/@types/lodash": { + "version": "4.14.202", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", + "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==", + "dev": true + }, "node_modules/@types/node": { "version": "20.8.7", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.7.tgz", @@ -505,9 +512,9 @@ "dev": true }, "node_modules/@types/vscode": { - "version": "1.83.0", - "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.83.0.tgz", - "integrity": "sha512-3mUtHqLAVz9hegut9au4xehuBrzRE3UJiQMpoEHkNl6XHliihO7eATx2BMHs0odsmmrwjJrlixx/Pte6M3ygDQ==", + "version": "1.83.3", + "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.83.3.tgz", + "integrity": "sha512-ZPp5+OQNYrCSFoT4jWOZKdcuXijj+JdN2BJNDhWH4pPbVL6PRQycG9NT8C4a94oul1tFMbkVbXXa9HasI7cLUg==", "dev": true }, "node_modules/@viz-js/viz": { diff --git a/WebSocketClient/package.json b/WebSocketClient/package.json index de17250..eda3fb5 100644 --- a/WebSocketClient/package.json +++ b/WebSocketClient/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "devDependencies": { + "@types/lodash": "^4.14.202", "@types/node": "^20.8.7", "@types/uuid": "^9.0.7", "@types/vscode": "~1.83.0", diff --git a/WebSocketClient/src/main.ts b/WebSocketClient/src/main.ts index 8882247..7a68b6b 100644 --- a/WebSocketClient/src/main.ts +++ b/WebSocketClient/src/main.ts @@ -30,10 +30,11 @@ import initUvlTutorial from './uvlTutorial.ts'; import {buildWorkerDefinition} from 'monaco-editor-workers'; import {initIntroJS} from "./intro.ts"; -import {ExecuteCommandSignature} from "./node_modules/vscode-languageclient"; +import {ExecuteCommandSignature} from "vscode-languageclient"; import {downloadFile, uploadFile} from "./ImportExportFiles.ts"; import IIdentifiedSingleEditOperation = editor.IIdentifiedSingleEditOperation; import {initExamples} from "./examples.ts"; +import {aggregateCharacters, displayEditorError, displayEditorErrorAtContent} from "./util.ts"; buildWorkerDefinition('./node_modules/monaco-editor-workers/dist/workers', new URL('', window.location.href).href, false); @@ -312,90 +313,9 @@ let debounceGenGraph = lodash.debounce(() => { }); }, 500); -let globalEditor: editor.IStandaloneCodeEditor | null; -let currentWidget: editor.IOverlayWidget | null; +export let globalEditor: editor.IStandaloneCodeEditor | null; -function displayEditorError(msg: string) { - if (!globalEditor) { - return; - } - const overlayWidget: editor.IOverlayWidget = { - getId(): string { - return 'myCustomWidget'; - }, getPosition(): editor.IOverlayWidgetPosition | null { - return { - preference: monaco.editor.OverlayWidgetPositionPreference.TOP_CENTER - } - }, getDomNode(): HTMLElement { - const node = document.createElement('div'); - const span = document.createElement('span'); - span.textContent = msg; - span.className = "error"; - node.replaceChildren(span); - return node; - } - } - if (currentWidget) { - globalEditor.removeOverlayWidget(currentWidget); - } - currentWidget = overlayWidget; - globalEditor.addOverlayWidget(overlayWidget); -} - -let currentContentWidget: editor.IContentWidget | null; - -function displayEditorErrorAtContent(msg: string) { - if(!globalEditor){ - return; - } - const selection = globalEditor.getSelection(); - const contentWidget: editor.IContentWidget = { - getId(): string { - return 'myCustomWidget'; - }, getPosition(): editor.IContentWidgetPosition | null { - if (selection) { - return { - position: selection.getStartPosition(), - preference: [monaco.editor.ContentWidgetPositionPreference.BELOW] - } - } - return { - position: {lineNumber: 1, column: 1}, preference: [monaco.editor.ContentWidgetPositionPreference.BELOW] - } - }, getDomNode(): HTMLElement { - const node = document.createElement('div'); - const span = document.createElement('span'); - node.className = "uvl-tooltip"; - span.className = "tooltip-text"; - span.textContent = msg; - node.replaceChildren(span); - return node; - } - } - removeWidget(); - currentContentWidget = contentWidget; - globalEditor.addContentWidget(contentWidget); - - debouceRemoveWidget(editor); -} - -const debouceRemoveWidget = lodash.debounce(removeWidget, 2000); - -function removeWidget() { - if (currentContentWidget) { - globalEditor?.removeContentWidget(currentContentWidget); - } - currentContentWidget = null; -} - -function aggregateCharacters(model: editor.ITextModel): number { - let addReducer = (previousValue: number, currentValue: string) => { - return previousValue + currentValue.length - }; - return model?.getLinesContent().reduce(addReducer, 0); -} - function getInitialFm() { let initialFm = "features\n\tfeature1\n\t\tor\n\t\t\tfeature2\n\t\t\tfeature3\n\nconstraints\n\tfeature1"; const storedFm = window.localStorage.getItem("fm"); diff --git a/WebSocketClient/src/util.ts b/WebSocketClient/src/util.ts new file mode 100644 index 0000000..7ba6da8 --- /dev/null +++ b/WebSocketClient/src/util.ts @@ -0,0 +1,87 @@ +import {editor} from "monaco-editor"; +import * as monaco from "monaco-editor"; +import {globalEditor} from "./main.ts"; +import lodash from 'lodash'; + + +let currentWidget: editor.IOverlayWidget | null; + +export function displayEditorError(msg: string) { + if (!globalEditor) { + return; + } + const overlayWidget: editor.IOverlayWidget = { + getId(): string { + return 'myCustomWidget'; + }, getPosition(): editor.IOverlayWidgetPosition | null { + return { + preference: monaco.editor.OverlayWidgetPositionPreference.TOP_CENTER + } + }, getDomNode(): HTMLElement { + const node = document.createElement('div'); + const span = document.createElement('span'); + span.textContent = msg; + span.className = "error"; + node.replaceChildren(span); + return node; + } + } + if (currentWidget) { + globalEditor.removeOverlayWidget(currentWidget); + } + currentWidget = overlayWidget; + globalEditor.addOverlayWidget(overlayWidget); +} + +let currentContentWidget: editor.IContentWidget | null; + +export function displayEditorErrorAtContent(msg: string) { + if(!globalEditor){ + return; + } + const selection = globalEditor.getSelection(); + const contentWidget: editor.IContentWidget = { + getId(): string { + return 'myCustomWidget'; + }, getPosition(): editor.IContentWidgetPosition | null { + if (selection) { + return { + position: selection.getStartPosition(), + preference: [monaco.editor.ContentWidgetPositionPreference.BELOW] + } + } + return { + position: {lineNumber: 1, column: 1}, preference: [monaco.editor.ContentWidgetPositionPreference.BELOW] + } + }, getDomNode(): HTMLElement { + const node = document.createElement('div'); + const span = document.createElement('span'); + node.className = "uvl-tooltip"; + span.className = "tooltip-text"; + span.textContent = msg; + node.replaceChildren(span); + return node; + } + } + removeWidget(); + currentContentWidget = contentWidget; + globalEditor.addContentWidget(contentWidget); + + debounceRemoveWidget(); +} + +const debounceRemoveWidget = lodash.debounce(removeWidget, 2000); + +function removeWidget() { + if (currentContentWidget) { + globalEditor?.removeContentWidget(currentContentWidget); + } + currentContentWidget = null; +} + +export function aggregateCharacters(model: editor.ITextModel): number { + let addReducer = (previousValue: number, currentValue: string) => { + return previousValue + currentValue.length + }; + return model?.getLinesContent().reduce(addReducer, 0); +} \ No newline at end of file