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
58 lines (57 loc) • 3.4 kB
JavaScript
var l = Object.defineProperty;
var a = (s, t, e) => t in s ? l(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var i = (s, t, e) => a(s, typeof t != "symbol" ? t + "" : t, e);
class r {
// Настройки ресайзера
constructor(t, e = {}) {
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");
this.element = t, this.options = {
handleSize: 10,
handleColor: "blue",
minWidth: 50,
// Минимальная ширина по умолчанию
minHeight: 50,
// Минимальная высота по умолчанию
...e
}, this.createResizeHandle();
}
createResizeHandle() {
const t = this.element.querySelector(".resize-handle");
t && t.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", (e) => this.startResize(e)), document.addEventListener("mousemove", (e) => this.resize(e)), document.addEventListener("mouseup", () => this.stopResize());
}
startResize(t) {
var e, o;
this.isResizing = !0, this.startX = t.clientX, this.startY = t.clientY, this.startWidth = this.element.offsetWidth, this.startHeight = this.element.offsetHeight, (o = (e = this.options).onResizeStart) == null || o.call(e), t.preventDefault();
}
resize(t) {
var e, o;
if (this.isResizing && this.handle) {
let h = this.startWidth + (t.clientX - this.startX), n = this.startHeight + (t.clientY - this.startY);
this.options.minWidth !== void 0 && h < this.options.minWidth && (h = this.options.minWidth), this.options.maxWidth !== void 0 && h > this.options.maxWidth && (h = this.options.maxWidth), this.options.minHeight !== void 0 && n < this.options.minHeight && (n = this.options.minHeight), this.options.maxHeight !== void 0 && n > this.options.maxHeight && (n = this.options.maxHeight), this.element.style.width = `${h}px`, this.element.style.height = `${n}px`, (o = (e = this.options).onResize) == null || o.call(e, h, n, t);
}
}
stopResize() {
var t, e;
this.isResizing = !1, (e = (t = this.options).onResizeEnd) == null || e.call(t);
}
destroy() {
this.handle && this.handle.remove(), document.removeEventListener("mousemove", (t) => this.resize(t)), document.removeEventListener("mouseup", () => this.stopResize());
}
}
export {
r as Resizer
};