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
100 lines (99 loc) • 4.44 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 o = Object.defineProperty;
var r = (h, t, s) => t in h ? o(h, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : h[t] = s;
var a = (h, t, s) => r(h, typeof t != "symbol" ? t + "" : t, s);
class c {
constructor(t = !0) {
a(this, "element", null);
a(this, "handles", []);
a(this, "isResizing", !1);
a(this, "startX", 0);
a(this, "startY", 0);
a(this, "startWidth", 0);
a(this, "startHeight", 0);
a(this, "aspectRatio", 1);
a(this, "preserveAspectRatio");
a(this, "currentPosition", null);
a(this, "handleResize", (t) => {
if (!this.isResizing || !this.element || !this.currentPosition) return;
const s = t.clientX - this.startX, e = t.clientY - this.startY;
let i = this.startWidth, n = this.startHeight;
switch (this.currentPosition) {
case "nw":
i = this.startWidth - s, n = this.startHeight - e, this.preserveAspectRatio && (n = i / this.aspectRatio);
break;
case "ne":
i = this.startWidth + s, n = this.startHeight - e, this.preserveAspectRatio && (n = i / this.aspectRatio);
break;
case "se":
i = this.startWidth + s, n = this.startHeight + e, this.preserveAspectRatio && (n = i / this.aspectRatio);
break;
case "sw":
i = this.startWidth - s, n = this.startHeight + e, this.preserveAspectRatio && (n = i / this.aspectRatio);
break;
}
i = Math.max(50, i), n = Math.max(50, n), this.element.style.width = `${i}px`, this.element.style.height = `${n}px`, this.updateHandlePositions();
});
a(this, "stopResize", () => {
this.isResizing = !1, this.currentPosition = null, document.removeEventListener("mousemove", this.handleResize), document.removeEventListener("mouseup", this.stopResize);
});
this.preserveAspectRatio = t;
}
attachTo(t) {
this.detach(), this.element = t, this.aspectRatio = t.offsetWidth / t.offsetHeight, this.createHandles();
}
detach() {
this.handles.forEach((t) => t.remove()), this.handles = [], this.element = null;
}
createHandles() {
["nw", "ne", "se", "sw"].forEach((s) => {
var i;
const e = document.createElement("div");
e.className = `resize-handle resize-handle-${s}`, e.addEventListener("mousedown", (n) => this.startResize(n, s)), this.element && ((i = this.element.parentElement) == null || i.appendChild(e), this.positionHandle(e, s)), this.handles.push(e);
});
}
positionHandle(t, s) {
if (!this.element) return;
const e = this.element.getBoundingClientRect(), i = 8;
switch (s) {
case "nw":
t.style.left = `${e.left - i / 2}px`, t.style.top = `${e.top - i / 2}px`;
break;
case "ne":
t.style.left = `${e.right - i / 2}px`, t.style.top = `${e.top - i / 2}px`;
break;
case "se":
t.style.left = `${e.right - i / 2}px`, t.style.top = `${e.bottom - i / 2}px`;
break;
case "sw":
t.style.left = `${e.left - i / 2}px`, t.style.top = `${e.bottom - i / 2}px`;
break;
}
}
updateHandlePositions() {
if (!this.element) return;
const t = this.element.getBoundingClientRect(), s = 8;
this.handles.forEach((e, i) => {
switch (["nw", "ne", "se", "sw"][i]) {
case "nw":
e.style.left = `${t.left - s / 2}px`, e.style.top = `${t.top - s / 2}px`;
break;
case "ne":
e.style.left = `${t.right - s / 2}px`, e.style.top = `${t.top - s / 2}px`;
break;
case "se":
e.style.left = `${t.right - s / 2}px`, e.style.top = `${t.bottom - s / 2}px`;
break;
case "sw":
e.style.left = `${t.left - s / 2}px`, e.style.top = `${t.bottom - s / 2}px`;
break;
}
});
}
startResize(t, s) {
this.element && (t.preventDefault(), this.isResizing = !0, this.currentPosition = s, this.startX = t.clientX, this.startY = t.clientY, this.startWidth = this.element.offsetWidth, this.startHeight = this.element.offsetHeight, document.addEventListener("mousemove", this.handleResize), document.addEventListener("mouseup", this.stopResize));
}
}
export {
c as ResizableElement
};