monaco-editor
Version:
A browser based code editor
78 lines (75 loc) • 3.16 kB
JavaScript
import './rulers.css';
import { createFastDomNode } from '../../../../base/browser/fastDomNode.js';
import { ViewPart } from '../../view/viewPart.js';
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
/**
* Rulers are vertical lines that appear at certain columns in the editor. There can be >= 0 rulers
* at a time.
*/
class Rulers extends ViewPart {
constructor(context) {
super(context);
this.domNode = createFastDomNode(document.createElement('div'));
this.domNode.setAttribute('role', 'presentation');
this.domNode.setAttribute('aria-hidden', 'true');
this.domNode.setClassName('view-rulers');
this._renderedRulers = [];
const options = this._context.configuration.options;
this._rulers = options.get(116 /* EditorOption.rulers */);
this._typicalHalfwidthCharacterWidth = options.get(59 /* EditorOption.fontInfo */).typicalHalfwidthCharacterWidth;
}
// --- begin event handlers
onConfigurationChanged(e) {
const options = this._context.configuration.options;
this._rulers = options.get(116 /* EditorOption.rulers */);
this._typicalHalfwidthCharacterWidth = options.get(59 /* EditorOption.fontInfo */).typicalHalfwidthCharacterWidth;
return true;
}
onScrollChanged(e) {
return e.scrollHeightChanged;
}
// --- end event handlers
prepareRender(ctx) {
// Nothing to read
}
_ensureRulersCount() {
const currentCount = this._renderedRulers.length;
const desiredCount = this._rulers.length;
if (currentCount === desiredCount) {
// Nothing to do
return;
}
if (currentCount < desiredCount) {
let addCount = desiredCount - currentCount;
while (addCount > 0) {
const node = createFastDomNode(document.createElement('div'));
node.setClassName('view-ruler');
node.setWidth('1ch');
this.domNode.appendChild(node);
this._renderedRulers.push(node);
addCount--;
}
return;
}
let removeCount = currentCount - desiredCount;
while (removeCount > 0) {
const node = this._renderedRulers.pop();
this.domNode.removeChild(node);
removeCount--;
}
}
render(ctx) {
this._ensureRulersCount();
for (let i = 0, len = this._rulers.length; i < len; i++) {
const node = this._renderedRulers[i];
const ruler = this._rulers[i];
node.setBoxShadow(ruler.color ? `1px 0 0 0 ${ruler.color} inset` : ``);
node.setHeight(Math.min(ctx.scrollHeight, 1000000));
node.setLeft(ruler.column * this._typicalHalfwidthCharacterWidth);
}
}
}
export { Rulers };