1c/bsl_console
1
0
Fork 0
mirror of https://github.com/salexdv/bsl_console.git synced 2025-09-16 09:06:17 +02:00
Code Issues Releases Activity

Встраивание в разные редакторы и кнопки управления

Browse Source
This commit is contained in:
salexdv
2023-12-13 10:10:56 +03:00
parent 47f27d363b
commit 659dbb2788
4 changed files with 269 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/decorations.css
View File

@@ -97,7 +97,7 @@ div:has(> .add-review) {
border-radius: 5px;
transition: transform .1s ease-in-out;
transform: scale(0.8, 0.8);
z-index: 1;
z-index: 2;
cursor: pointer;
}
@@ -124,21 +124,44 @@ div:has(> .add-review) {
}
.review-body {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border: 1px solid #ddd;
padding: 10px;
box-sizing: border-box;
background-color: #f6f8fa;
}
/*
.review-margin-zone {
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
*/
.review-body > textarea {
.review-buttons {
float: right;
}
.review-buttons > div {
height: 16px;
width: 16px;
background-size: contain;
background-repeat: no-repeat;
float: right;
margin: 5px 5px 10px 5px;
cursor: pointer;
opacity: 0.5;
}
.review-buttons > div:hover {
opacity: 1;
}
.review-modify {
background: url("media/pencil.svg");
}
.review-delete {
background: url("media/trash.svg");
}
.review-body textarea.required {
border: 1px solid #990000;
}
.review-body textarea {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
@@ -146,6 +169,11 @@ div:has(> .add-review) {
box-sizing: border-box;
}
.review-body textarea:focus {
outline: none !important;
border-color: #007acc;
}
.diff-navi {
border-left: 3px solid;
width: 3px !important;

202
src/editor.js
View File

@@ -40,7 +40,7 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
lineNumbersDedocrations = [];
selectedQueryDelimiters = new Map();
reviewMode = false;
reviewWidgets = [];
reviewWidgets = new Map();
// #endregion
// #region public API
@@ -702,6 +702,13 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
editor.getOriginalEditor().onDidChangeCursorPosition(e => diffEditorOnDidChangeCursorPosition(e));
editor.getModifiedEditor().onDidLayoutChange(e => diffEditorOnDidLayoutChange(e));
editor.getOriginalEditor().onDidLayoutChange(e => diffEditorOnDidLayoutChange(e));
editor.getModifiedEditor().onMouseMove(e => {
newReviewDecoration(e);
});
editor.getModifiedEditor().onMouseDown(e => {
if (e.target.element.classList.contains('add-review'))
createReviewWidget(e);
});
setDefaultStyle();
}
else
@@ -1790,23 +1797,7 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
editor.onMouseMove(e => {
if (reviewMode && e.target.position) {
editor.diff_decorations = [];
let range = new monaco.Range(e.target.position.lineNumber, 1, e.target.position.lineNumber, 1);
editor.diff_decorations.push({
range: range,
options: {
isWholeLine: true,
linesDecorationsClassName: 'add-review',
}
});
editor.updateDecorations([]);
}
newReviewDecoration(e);
});
@@ -2525,6 +2516,9 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
if (diffDecor.position)
decorations.push({ range: new monaco.Range(diffDecor.position, 1, diffDecor.position), options: { isWholeLine: true, linesDecorationsClassName: 'diff-editor-position' } });
if (standalone_editor.reviewDecorations)
decorations = decorations.concat(standalone_editor.reviewDecorations);
standalone_editor.diffDecor.decor = standalone_editor.deltaDecorations(standalone_editor.diffDecor.decor, decorations);
@@ -2537,6 +2531,36 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
}
function newReviewDecoration(e) {
if (reviewMode && e.target.position) {
let standaloneEditor = editor;
if (editor.navi)
standaloneEditor = editor.getModifiedEditor();
standaloneEditor.reviewDecorations = [];
let range = new monaco.Range(e.target.position.lineNumber, 1, e.target.position.lineNumber, 1);
standaloneEditor.reviewDecorations.push({
range: range,
options: {
isWholeLine: true,
linesDecorationsClassName: 'add-review',
}
});
if (editor.navi)
editor.diffEditorUpdateDecorations();
else
editor.updateDecorations(standaloneEditor.reviewDecorations);
}
}
function diffEditorOnDidChangeCursorPosition(e) {
if (e.source != 'api') {
@@ -3334,21 +3358,127 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
function createReviewWidget(e) {
let line_number = e.target.position.lineNumber;
let lineNumber = e.target.position.lineNumber;
let widgetId = 'bsl.review.widget.' + lineNumber;
if (reviewWidgets.get(widgetId))
return;
let reviewWidget = {
widgetId: widgetId,
domNode: null,
getId: function () {
return 'bsl.review.widget';
return widgetId;
},
close: function () {
let height = editor.getOption(monaco.editor.EditorOption.lineHeight) * 4 + 'px'
let widget = reviewWidgets.get(this.widgetId);
this.domNode.getElementsByClassName("review-buttons")[0].style.display = 'block';
this.domNode.getElementsByClassName("review-text")[0].style.display = 'block';
this.domNode.getElementsByClassName("review-edit")[0].style.display = 'none'
this.domNode.style.height = height;
document.querySelector('[monaco-view-zone="' + widget.zone + '"]').style.height = height;
getActiveEditor().changeViewZones(function (changeAccessor) {
changeAccessor.layoutZone(widget.zone);
});
},
save: function () {
let widget = reviewWidgets.get(this.widgetId);
let textarea = this.domNode.getElementsByTagName('textarea')[0];
let reviewText = this.domNode.getElementsByClassName("review-text")[0];
if (textarea.value) {
widget.message = textarea.value;
reviewText.innerHTML = textarea.value;
this.close();
}
else {
textarea.classList.add('required');
}
},
delete: function () {
let widget = reviewWidgets.get(this.widgetId);
getActiveEditor().removeOverlayWidget(widget.widget);
getActiveEditor().changeViewZones(function (changeAccessor) {
changeAccessor.removeZone(widget.zone);
});
reviewWidgets.delete(this.widgetId);
},
cancel: function () {
let widget = reviewWidgets.get(this.widgetId);
if (widget.message)
this.close();
else
this.delete();
},
edit: function () {
let height = editor.getOption(monaco.editor.EditorOption.lineHeight) * 8 + 'px'
this.domNode.getElementsByClassName("review-buttons")[0].style.display = 'none';
this.domNode.getElementsByClassName("review-text")[0].style.display = 'none';
this.domNode.getElementsByClassName("review-edit")[0].style.display = 'block';
this.domNode.style.height = height;
},
getDomNode: function () {
if (!this.domNode) {
this.domNode = document.createElement('div');
this.domNode.classList.add('review-body');
let buttons = document.createElement('div');
buttons.classList.add('review-buttons');
buttons.style.display = 'none';
let button = document.createElement('div');
button.classList.add('review-delete');
button.setAttribute('widgetid', widgetId);
button.onclick = function() {
if (confirm("Удалить замечание?"))
reviewWidgets.get(this.getAttribute("widgetid")).widget.delete();
}
buttons.appendChild(button);
button = document.createElement('div');
button.setAttribute('widgetid', widgetId);
button.classList.add('review-modify');
button.onclick = function() {
reviewWidgets.get(this.getAttribute("widgetid")).widget.edit();
}
buttons.appendChild(button);
this.domNode.appendChild(buttons);
let text = document.createElement('div');
text.classList.add('review-text');
this.domNode.appendChild(text);
text.style.display = 'none';
let editGroup = document.createElement('div');
editGroup.classList.add('review-edit');
let textarea = document.createElement('textarea');
this.domNode.appendChild(textarea);
textarea.oninput = function() {
this.classList.remove('required');
}
textarea.classList.add('review-message');
editGroup.appendChild(textarea);
button = document.createElement('button');
button.setAttribute('widgetid', widgetId);
button.classList.add('review-add');
button.innerHTML = "Сохранить"
button.onclick = function() {
reviewWidgets.get(this.getAttribute("widgetid")).widget.save();
}
editGroup.appendChild(button);
button = document.createElement('button');
button.setAttribute('widgetid', widgetId);
button.classList.add('review-cancel');
button.innerHTML = "Отмена"
button.onclick = function() {
reviewWidgets.get(this.getAttribute("widgetid")).widget.cancel();
}
editGroup.appendChild(button);
this.domNode.appendChild(editGroup);
}
return this.domNode;
@@ -3358,38 +3488,44 @@ define(['bslGlobals', 'bslMetadata', 'snippets', 'bsl_language', 'vs/editor/edit
}
};
editor.changeViewZones(function (changeAccessor) {
getActiveEditor().changeViewZones(function (changeAccessor) {
let domNode = document.createElement("div");
editor.domNode = domNode;
domNode.classList.add('review-zone');
let marginDomNode = document.createElement("div");
marginDomNode.classList.add('review-margin-zone');
zone_id = changeAccessor.addZone({
afterLineNumber: line_number,
afterLineNumber: lineNumber,
afterColumn: 1,
heightInLines: 8,
domNode: domNode,
widget: reviewWidget,
marginDomNode: marginDomNode,
onDomNodeTop: function (top) {
onDomNodeTop: function (top) {
if (this.widget.domNode) {
let layout = editor.getLayoutInfo();
let layout = getActiveEditor().getLayoutInfo();
let width = layout.width - layout.verticalScrollbarWidth - layout.minimapWidth;
this.widget.domNode.style.top = top + 'px';
this.widget.domNode.style.width = width + 'px';
this.widget.domNode.style.height = this.domNode.getBoundingClientRect().height + 'px';
}
}
},
get heightInPx() {
if (this.widget.domNode)
return this.widget.domNode.offsetHeight;
}
});
editor.layout();
reviewWidgets.set(widgetId, {
zone: zone_id,
lineNumber: lineNumber,
widget: reviewWidget
});
getActiveEditor().layout();
});
editor.addOverlayWidget(reviewWidget);
getActiveEditor().addOverlayWidget(reviewWidget);
}

43
src/media/pencil.svg Normal file
View File

@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 306.637 306.637" xml:space="preserve">
<g>
<g>
<path d="M12.809,238.52L0,306.637l68.118-12.809l184.277-184.277l-55.309-55.309L12.809,238.52z M60.79,279.943l-41.992,7.896
l7.896-41.992L197.086,75.455l34.096,34.096L60.79,279.943z"/>
<path d="M251.329,0l-41.507,41.507l55.308,55.308l41.507-41.507L251.329,0z M231.035,41.507l20.294-20.294l34.095,34.095
L265.13,75.602L231.035,41.507z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

17
src/media/trash.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="-3 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>trash</title>
<desc>Created with Sketch Beta.</desc>
<defs>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-259.000000, -203.000000)" fill="#000000">
<path d="M282,211 L262,211 C261.448,211 261,210.553 261,210 C261,209.448 261.448,209 262,209 L282,209 C282.552,209 283,209.448 283,210 C283,210.553 282.552,211 282,211 L282,211 Z M281,231 C281,232.104 280.104,233 279,233 L265,233 C263.896,233 263,232.104 263,231 L263,213 L281,213 L281,231 L281,231 Z M269,206 C269,205.447 269.448,205 270,205 L274,205 C274.552,205 275,205.447 275,206 L275,207 L269,207 L269,206 L269,206 Z M283,207 L277,207 L277,205 C277,203.896 276.104,203 275,203 L269,203 C267.896,203 267,203.896 267,205 L267,207 L261,207 C259.896,207 259,207.896 259,209 L259,211 C259,212.104 259.896,213 261,213 L261,231 C261,233.209 262.791,235 265,235 L279,235 C281.209,235 283,233.209 283,231 L283,213 C284.104,213 285,212.104 285,211 L285,209 C285,207.896 284.104,207 283,207 L283,207 Z M272,231 C272.552,231 273,230.553 273,230 L273,218 C273,217.448 272.552,217 272,217 C271.448,217 271,217.448 271,218 L271,230 C271,230.553 271.448,231 272,231 L272,231 Z M267,231 C267.552,231 268,230.553 268,230 L268,218 C268,217.448 267.552,217 267,217 C266.448,217 266,217.448 266,218 L266,230 C266,230.553 266.448,231 267,231 L267,231 Z M277,231 C277.552,231 278,230.553 278,230 L278,218 C278,217.448 277.552,217 277,217 C276.448,217 276,217.448 276,218 L276,230 C276,230.553 276.448,231 277,231 L277,231 Z" id="trash" sketch:type="MSShapeGroup">
</path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB