Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Message callbacks #4

Merged
merged 4 commits into from
Dec 9, 2022
Merged

Message callbacks #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
467985c
all received messages are posting answer messages
anijanyan Dec 9, 2022
975de1b
messageController is now managing all interactions with webworker eve…
anijanyan Dec 9, 2022
b480c61
formatting is using editor options (instead of storing formatConfig s…
anijanyan Dec 9, 2022
6f24fca
Merge branch 'main' into message-callbacks
anijanyan Dec 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions src/components/description-tooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,7 @@ export class DescriptionTooltip extends Tooltip{
var screenPos = renderer.pixelToScreenCoordinates(this.x, this.y);


this.provider.doHover(screenPos);
var $setHover = (hover) => {
this.provider["off"]("hover", $setHover);

this.provider.doHover(screenPos, (hover) => {
let description = this.provider.getTooltipText(hover);
if (!description || !description.text) {
this.hide();
Expand Down Expand Up @@ -98,9 +95,7 @@ export class DescriptionTooltip extends Tooltip{
this.getElement().style.maxWidth = rect.width - (position.pageX - rect.left) + "px";
this.show(null, position.pageX, position.pageY);
}, 500);
}
//@ts-ignore
this.provider.on("hover", $setHover);
});
};

onMouseMove (e: MouseEvent) {
Expand Down
3 changes: 1 addition & 2 deletions src/demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {htmlContent} from "./docs-example/html-example";
var event = require("ace-code/src/lib/event");
var {HashHandler} = require("ace-code/src/keyboard/hash_handler");
var keyUtil = require("ace-code/src/lib/keys");

import {Mode as HTMLMode} from "ace-code/src/mode/html";
import {Mode as CSSMode} from "ace-code/src/mode/css";
import {Mode as LessMode} from "ace-code/src/mode/less";
Expand Down Expand Up @@ -60,7 +59,7 @@ for (let mode of modes) {
editor.session.setMode(new mode.mode());
let options = mode.options ?? {};
let provider = new LanguageProvider(editor, options);
provider.registerCompleters();
activeProvider ??= provider;
editor.on("focus", () => {
activeProvider = provider;
});
Expand Down
146 changes: 56 additions & 90 deletions src/language-provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,27 @@
import {Ace} from "ace-code";
import {cleanHtml, toCompletions, TooltipType, toRange} from "./type-converters";
import {Range as AceRange} from "ace-code/src/range";
import {TextEdit} from "vscode-languageserver-types";
import {FormattingOptions, TextEdit} from "vscode-languageserver-types";
import {MessageController} from "./message-controller";
import {MessageType} from "./message-types";
import * as oop from "ace-code/src/lib/oop";
import {EventEmitter} from "ace-code/src/lib/event_emitter";
import {ServiceOptions, Tooltip} from "./services/language-service";
import {DescriptionTooltip} from "./components/description-tooltip";

var showdown = require('showdown');
let showdown = require('showdown');

export class LanguageProvider {
editor: Ace.Editor;
private $descriptionTooltip;
markdownConverter: MarkDownConverter;
message: MessageController;
private $markdownConverter: MarkDownConverter;
private $message: MessageController;
options: ServiceOptions;
deltaQueue: Ace.Delta[] = [];

constructor(editor: Ace.Editor, options: ServiceOptions, markdownConverter?: MarkDownConverter) {
this.editor = editor;
this.$descriptionTooltip = new DescriptionTooltip(this);
this.options = options;
this.$adaptOptions();
if (markdownConverter) {
this.markdownConverter = markdownConverter;
} else {
this.markdownConverter = new showdown.Converter();
}
this.$markdownConverter = markdownConverter ?? new showdown.Converter();
this.$init();
this.validate();
this.editor.session.doc.on("change", this.$changeListener.bind(this), true);
}

private $changeListener(delta) {
Expand All @@ -42,122 +32,98 @@ export class LanguageProvider {
}

private $sendDeltaQueue() {
var deltas = this.deltaQueue;
if (!deltas) return;
if (!this.deltaQueue) return;
this.deltaQueue = [];
let changed = () => {
this.validate();
this["off"]("changed", changed);
};
this["on"]("changed", changed);
this.message.change(this.editor.session["id"], deltas, this.editor.session.getValue(), this.editor.session.doc.getLength());
this.$message.change(this.editor.session["id"], this.deltaQueue, this.editor.session.getValue(), this.editor.session.doc.getLength(), this.validate);
};

private $adaptOptions() {
let editorOptions = this.editor.getOptions();
this.options.mode = editorOptions.mode;
this.options.format = {
tabSize: editorOptions.tabSize, insertSpaces: editorOptions.useSoftTabs
};
}

private get $format(): FormattingOptions {
let editorOptions = this.editor.getOptions();
return {
tabSize: editorOptions.tabSize,
insertSpaces: editorOptions.useSoftTabs
}
}

private $init() {
this.message = MessageController.instance;
this.message["on"]("message-" + this.editor.session["id"], (e) => {
let message = e.data;
switch (message.type as MessageType) {
case MessageType.format:
var edits: TextEdit[] = message.edits;
this.$applyFormat(edits);
break;
case MessageType.complete:
this["_signal"]("completions", toCompletions(message.completions, this.markdownConverter));
break;
case MessageType.hover:
var hover: Tooltip = message.hover;
this["_signal"]("hover", hover);
break;
case MessageType.validate:
var annotations: Ace.Annotation[] = message.annotations;
this["_signal"]("validate", annotations);
break;
case MessageType.change:
this["_signal"]("changed", null);
break;
case MessageType.init:
break;
}
});
this.message.init(this.editor.session["id"], this.editor.getValue(), this.options);
// @ts-ignore
this.editor.on("changeMode", () => {
this.$adaptOptions();
this.message.changeMode(this.editor.session["id"], this.options);
//TODO: validate after mode change?
this.$message = MessageController.instance;
this.$message.init(this.editor.session["id"], this.editor.getValue(), this.options, () => {
this.$descriptionTooltip = new DescriptionTooltip(this);

this.editor.session.doc.on("change", this.$changeListener.bind(this), true);

this.validate();
this.registerCompleters();

// @ts-ignore
this.editor.on("changeMode", () => {
this.$adaptOptions();
this.$message.changeMode(this.editor.session["id"], this.options, () => {
this.validate();
this.registerCompleters();
});
});
});
}

validate() {
this.message.doValidation(this.editor.session["id"]);
var $setAnnotations = (annotations: Ace.Annotation[]) => {
this["off"]("validate", $setAnnotations);
validate = () => {
this.$message.doValidation(this.editor.session["id"], (annotations: Ace.Annotation[]) => {
this.editor.session.clearAnnotations();
if (annotations && annotations.length > 0) {
this.editor.session.setAnnotations(annotations);
}
}
this["on"]("validate", $setAnnotations);
});
}

doHover(position: Ace.Point) {
this.message.doHover(this.editor.session["id"], position);
doHover(position: Ace.Point, callback?: (hover: Tooltip) => void) {
this.$message.doHover(this.editor.session["id"], position, callback);
}

getTooltipText(hover: Tooltip) {
if (!hover)
return;
let text = hover.content.type === TooltipType.markdown ? cleanHtml(this.markdownConverter.makeHtml(hover.content.text)) : hover.content.text;
let text = hover.content.type === TooltipType.markdown ? cleanHtml(this.$markdownConverter.makeHtml(hover.content.text)) : hover.content.text;
return {text: text, range: hover.range}
}

format() {
var row = this.editor.session.getLength();
var column = this.editor.session.getLine(row).length - 1;
var selectionRanges = this.editor.getSelection().getAllRanges();
if (selectionRanges.length > 0 && !selectionRanges[0].isEmpty()) {
for (var range of selectionRanges) {
this.message.format(this.editor.session["id"], range);
}
} else {
this.message.format(this.editor.session["id"], new AceRange(0, 0, row, column));
format = () => {
let selectionRanges = this.editor.getSelection().getAllRanges();
let $format = this.$format;
if (!selectionRanges || selectionRanges[0].isEmpty()) {
let row = this.editor.session.getLength();
let column = this.editor.session.getLine(row).length - 1;
selectionRanges = [new AceRange(0, 0, row, column)];
}
for (let range of selectionRanges) {
this.$message.format(this.editor.session["id"], range, $format, this.$applyFormat);
}
}

private $applyFormat(edits: TextEdit[]) {
for (var edit of edits.reverse()) {
private $applyFormat = (edits: TextEdit[]) => {
for (let edit of edits.reverse()) {
this.editor.session.doc.replace(toRange(edit.range), edit.newText);
}
}

doComplete() {
doComplete(callback?: (CompletionList) => void) {
let cursor = this.editor.getCursorPosition();
this.message.doComplete(this.editor.session["id"], cursor);
this.$message.doComplete(this.editor.session["id"], cursor, callback);
}

registerCompleters() {
this.editor.completers = [
{
getCompletions: async (editor, session, pos, prefix, callback) => {
this.doComplete();
var $setCompletions = (completions) => {
this["off"]("completions", $setCompletions);
callback(null, completions);
}
this["on"]("completions", $setCompletions)
this.doComplete((completions) => {
callback(null, toCompletions(completions, this.$markdownConverter));
});
}
}
];
}
}

oop.implement(LanguageProvider.prototype, EventEmitter);
}
85 changes: 60 additions & 25 deletions src/message-controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import {Ace} from "ace-code";
import {
ChangeMessage, ChangeModeMessage,
CompleteMessage, DeltasMessage,
BaseMessage,
ChangeMessage,
ChangeModeMessage,
CompleteMessage,
DeltasMessage,
FormatMessage,
HoverMessage,
InitMessage,
MessageType,
ValidateMessage
} from "./message-types";
import * as oop from "ace-code/src/lib/oop";
import {EventEmitter} from "ace-code/src/lib/event_emitter";
import {ServiceOptions} from "./services/language-service";
import {ServiceOptions, Tooltip} from "./services/language-service";
import {FormattingOptions, TextEdit} from "vscode-languageserver-types";

export class MessageController {
private static _instance: MessageController;
Expand All @@ -21,51 +26,81 @@ export class MessageController {
return MessageController._instance;
}

private worker: Worker;
private $worker: Worker;

constructor() {
//@ts-ignore
this.worker = new Worker(new URL('./webworker.ts', import.meta.url));
this.$worker = new Worker(new URL('./webworker.ts', import.meta.url));

this.worker.onmessage = (e) => {
this["_signal"]("message-" + e.data.sessionId, e);
}
this.$worker.onmessage = (e) => {
let message = e.data;
let data = null;
switch (message.type as MessageType) {
case MessageType.format:
data = message.edits;
break;
case MessageType.complete:
data = message.completions;
break;
case MessageType.hover:
data = message.hover;
break;
case MessageType.validate:
data = message.annotations;
break;
default:
break;
}

this["_signal"](message.type + "-" + message.sessionId, data);
};
}

init(sessionId: string, value: string, options: ServiceOptions) {
this.worker.postMessage(new InitMessage(sessionId, value, options));
init(sessionId: string, value: string, options: ServiceOptions, callback?: () => void) {
this.postMessage(new InitMessage(sessionId, value, options), MessageType.init, callback);
}

doValidation(sessionId: string) {
this.worker.postMessage(new ValidateMessage(sessionId))
doValidation(sessionId: string, callback?: (annotations: Ace.Annotation[]) => void) {
this.postMessage(new ValidateMessage(sessionId), MessageType.validate, callback);
}

doComplete(sessionId: string, position: Ace.Point) {
this.worker.postMessage(new CompleteMessage(sessionId, position))
doComplete(sessionId: string, position: Ace.Point, callback?: (CompletionList) => void) {
this.postMessage(new CompleteMessage(sessionId, position), MessageType.complete, callback);
}

format(sessionId: string, range: Ace.Range) {
this.worker.postMessage(new FormatMessage(sessionId, range));
format(sessionId: string, range: Ace.Range, format: FormattingOptions, callback?: (edits: TextEdit[]) => void) {
this.postMessage(new FormatMessage(sessionId, range, format), MessageType.format, callback);
}

doHover(sessionId: string, position: Ace.Point) {
this.worker.postMessage(new HoverMessage(sessionId, position))
doHover(sessionId: string, position: Ace.Point, callback?: (hover: Tooltip) => void) {
this.postMessage(new HoverMessage(sessionId, position), MessageType.hover, callback)
}

change(sessionId: string, deltas: Ace.Delta[], value: string, docLength: number) {
change(sessionId: string, deltas: Ace.Delta[], value: string, docLength: number, callback?: () => void) {
let message: BaseMessage;
if (deltas.length > 50 && deltas.length > docLength >> 1) {
this.worker.postMessage(new ChangeMessage(sessionId, value));
message = new ChangeMessage(sessionId, value);
} else {
this.worker.postMessage(new DeltasMessage(sessionId, deltas));
message = new DeltasMessage(sessionId, deltas);
}

this.postMessage(message, MessageType.change, callback)
}

changeMode(sessionId: string, options: ServiceOptions) {
this.worker.postMessage(new ChangeModeMessage(sessionId, options));
changeMode(sessionId: string, options: ServiceOptions, callback?: () => void) {
this.postMessage(new ChangeModeMessage(sessionId, options), MessageType.changeMode, callback);
}

postMessage(message: any ) {
this.worker.postMessage(message);
postMessage(message: BaseMessage, event?: MessageType, callback?: (any) => void) {
if (event != undefined && callback) {
let eventName = event.toString() + "-" + message.sessionId;
let callbackFunction = (data) => {
this["off"](eventName, callbackFunction);
callback(data);
}
this["on"](eventName, callbackFunction);
}
this.$worker.postMessage(message);
}
}

Expand Down
Loading