Files
railwaysystem/RuoYi-Vue/ruoyi-ui/node_modules2/handsontable/plugins/comments/commentEditor.mjs
T
2026-09-10 15:40:10 +08:00

192 lines
4.3 KiB
JavaScript

import { addClass, outerWidth, outerHeight } from "../../helpers/dom/element.mjs";
/**
* Comment editor for the Comments plugin.
*
* @private
* @class CommentEditor
*/
class CommentEditor {
static get CLASS_EDITOR_CONTAINER() {
return 'htCommentsContainer';
}
static get CLASS_EDITOR() {
return 'htComments';
}
static get CLASS_INPUT() {
return 'htCommentTextArea';
}
static get CLASS_CELL() {
return 'htCommentCell';
}
constructor(rootDocument, isRtl) {
this.rootDocument = rootDocument;
this.isRtl = isRtl;
this.container = null;
this.editor = this.createEditor();
this.editorStyle = this.editor.style;
this.hidden = true;
this.hide();
}
/**
* Set position of the comments editor according to the provided x and y coordinates.
*
* @param {number} x X position (in pixels).
* @param {number} y Y position (in pixels).
*/
setPosition(x, y) {
this.editorStyle.left = `${x}px`;
this.editorStyle.top = `${y}px`;
}
/**
* Set the editor size according to the provided arguments.
*
* @param {number} width Width in pixels.
* @param {number} height Height in pixels.
*/
setSize(width, height) {
if (width && height) {
const input = this.getInputElement();
input.style.width = `${width}px`;
input.style.height = `${height}px`;
}
}
/**
* Returns the size of the comments editor.
*
* @returns {{ width: number, height: number }}
*/
getSize() {
return {
width: outerWidth(this.getInputElement()),
height: outerHeight(this.getInputElement())
};
}
/**
* Reset the editor size to its initial state.
*/
resetSize() {
const input = this.getInputElement();
input.style.width = '';
input.style.height = '';
}
/**
* Set the read-only state for the comments editor.
*
* @param {boolean} state The new read only state.
*/
setReadOnlyState(state) {
const input = this.getInputElement();
input.readOnly = state;
}
/**
* Show the comments editor.
*/
show() {
this.editorStyle.display = 'block';
this.hidden = false;
}
/**
* Hide the comments editor.
*/
hide() {
if (!this.hidden) {
this.editorStyle.display = 'none';
}
this.hidden = true;
}
/**
* Checks if the editor is visible.
*
* @returns {boolean}
*/
isVisible() {
return this.editorStyle.display === 'block';
}
/**
* Set the comment value.
*
* @param {string} [value] The value to use.
*/
setValue() {
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
const comment = value || '';
this.getInputElement().value = comment;
}
/**
* Get the comment value.
*
* @returns {string}
*/
getValue() {
return this.getInputElement().value;
}
/**
* Checks if the comment input element is focused.
*
* @returns {boolean}
*/
isFocused() {
return this.rootDocument.activeElement === this.getInputElement();
}
/**
* Focus the comments input element.
*/
focus() {
this.getInputElement().focus();
}
/**
* Create the `textarea` to be used as a comments editor.
*
* @returns {HTMLElement}
*/
createEditor() {
const editor = this.rootDocument.createElement('div');
const textArea = this.rootDocument.createElement('textarea');
editor.style.display = 'none';
this.container = this.rootDocument.createElement('div');
this.container.setAttribute('dir', this.isRtl ? 'rtl' : 'ltr');
addClass(this.container, CommentEditor.CLASS_EDITOR_CONTAINER);
this.rootDocument.body.appendChild(this.container);
addClass(editor, CommentEditor.CLASS_EDITOR);
addClass(textArea, CommentEditor.CLASS_INPUT);
editor.appendChild(textArea);
this.container.appendChild(editor);
return editor;
}
/**
* Get the input element.
*
* @returns {HTMLElement}
*/
getInputElement() {
return this.editor.querySelector(`.${CommentEditor.CLASS_INPUT}`);
}
/**
* Destroy the comments editor.
*/
destroy() {
const containerParentElement = this.container ? this.container.parentNode : null;
this.editor.parentNode.removeChild(this.editor);
this.editor = null;
this.editorStyle = null;
if (containerParentElement) {
containerParentElement.removeChild(this.container);
}
}
}
export default CommentEditor;