on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
61 lines (60 loc) • 4.1 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
var d = Object.defineProperty;
var l = (o, e, t) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
var i = (o, e, t) => l(o, typeof e != "symbol" ? e + "" : e, t);
class a {
constructor(e, t = {}) {
i(this, "element");
// Элемент, который нужно ресайзить
i(this, "handle", null);
// Точка для ресайза
i(this, "isResizing", !1);
// Флаг, указывающий, что ресайз активен
i(this, "startX", 0);
// Начальная позиция курсора по X
i(this, "startY", 0);
// Начальная позиция курсора по Y
i(this, "startWidth", 0);
// Начальная ширина элемента
i(this, "startHeight", 0);
// Начальная высота элемента
i(this, "options");
// Настройки ресайзера
i(this, "boundMouseMove");
i(this, "boundMouseUp");
this.element = e, this.options = {
handleSize: 10,
handleColor: "blue",
minWidth: 50,
// Минимальная ширина по умолчанию
minHeight: 50,
// Минимальная высота по умолчанию
...t
}, this.createResizeHandle();
}
createResizeHandle() {
const e = this.element.querySelector(".resize-handle");
e && e.remove(), this.handle = document.createElement("div"), this.handle.className = "resize-handle", this.handle.style.position = "absolute", this.handle.style.right = "0", this.handle.style.bottom = "0", this.handle.style.width = `${this.options.handleSize}px`, this.handle.style.height = `${this.options.handleSize}px`, this.handle.style.backgroundColor = this.options.handleColor ?? "blue", this.handle.style.cursor = "se-resize", this.element.style.position = "relative", this.element.appendChild(this.handle), this.handle.addEventListener("mousedown", (t) => this.startResize(t));
}
startResize(e) {
var t, n;
this.isResizing = !0, this.startX = e.clientX, this.startY = e.clientY, this.startWidth = this.element.offsetWidth, this.startHeight = this.element.offsetHeight, (n = (t = this.options).onResizeStart) == null || n.call(t), e.preventDefault(), this.boundMouseMove = (s) => this.resize(s), this.boundMouseUp = () => this.stopResize(), document.addEventListener("mousemove", this.boundMouseMove), document.addEventListener("mouseup", this.boundMouseUp);
}
resize(e) {
var t, n;
if (this.isResizing && this.handle) {
let s = this.startWidth + (e.clientX - this.startX), h = this.startHeight + (e.clientY - this.startY);
this.options.minWidth !== void 0 && s < this.options.minWidth && (s = this.options.minWidth), this.options.maxWidth !== void 0 && s > this.options.maxWidth && (s = this.options.maxWidth), this.options.minHeight !== void 0 && h < this.options.minHeight && (h = this.options.minHeight), this.options.maxHeight !== void 0 && h > this.options.maxHeight && (h = this.options.maxHeight), this.element.style.width = `${s}px`, this.element.style.height = `${h}px`, (n = (t = this.options).onResize) == null || n.call(t, s, h, e);
}
}
stopResize() {
var e, t;
this.isResizing = !1, (t = (e = this.options).onResizeEnd) == null || t.call(e), this.boundMouseMove && (document.removeEventListener("mousemove", this.boundMouseMove), this.boundMouseMove = void 0), this.boundMouseUp && (document.removeEventListener("mouseup", this.boundMouseUp), this.boundMouseUp = void 0);
}
destroy() {
this.handle && this.handle.remove(), this.boundMouseMove && (document.removeEventListener("mousemove", this.boundMouseMove), this.boundMouseMove = void 0), this.boundMouseUp && (document.removeEventListener("mouseup", this.boundMouseUp), this.boundMouseUp = void 0);
}
}
export {
a as Resizer
};