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
114 lines (113 loc) • 4.2 kB
JavaScript
var x = Object.defineProperty;
var f = (o, e, t) => e in o ? x(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
var d = (o, e, t) => f(o, typeof e != "symbol" ? e + "" : e, t);
import { DataRow as l } from "./DataRow.mjs";
import { getRandomColor as C } from "../utils/colors.mjs";
import { createContainer as i, createButton as g } from "../../../utils/helpers.mjs";
class D {
constructor(e, t, a = !1, r = !1) {
d(this, "container");
d(this, "editor");
d(this, "data", []);
d(this, "onChange");
d(this, "requiresXY");
d(this, "isScatter");
d(this, "dataRows", null);
d(this, "addButton", null);
this.editor = e, this.container = i("chart-data-editor"), this.onChange = t, this.requiresXY = a, this.isScatter = r, this.initialize();
}
initialize() {
const e = i("space-y-4"), t = i("flex items-center justify-between mb-4"), a = i(
"text-sm font-medium text-gray-700",
this.editor.t("Data Points")
);
this.addButton = g(this.editor.t("Add Point"), () => {
this.addRow();
}), this.addButton.className = "add-row-btn px-2 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600", t.appendChild(a), t.appendChild(this.addButton);
const r = i("data-grid"), s = i(`grid ${this.getHeaderGridCols()} gap-2 pb-2 border-b`), p = i(
"text-sm font-medium text-gray-600",
this.editor.t("Label")
);
if (s.appendChild(p), this.requiresXY) {
const n = i("text-sm font-medium text-gray-600", this.editor.t("X")), h = i("text-sm font-medium text-gray-600", this.editor.t("Y"));
if (s.appendChild(n), s.appendChild(h), !this.isScatter) {
const c = i(
"text-sm font-medium text-gray-600",
this.editor.t("Size")
), m = i(
"text-sm font-medium text-gray-600",
this.editor.t("Color")
);
s.appendChild(c), s.appendChild(m);
}
} else {
const n = i(
"text-sm font-medium text-gray-600",
this.editor.t("Value")
), h = i(
"text-sm font-medium text-gray-600",
this.editor.t("Color")
);
s.appendChild(n), s.appendChild(h);
}
const u = i();
s.appendChild(u), this.dataRows = i("data-rows space-y-2 mt-2"), r.appendChild(s), r.appendChild(this.dataRows), e.appendChild(t), e.appendChild(r), this.container.appendChild(e), this.addInitialRows();
}
getHeaderGridCols() {
return this.requiresXY ? this.isScatter ? "grid-cols-[1fr,80px,80px,40px]" : "grid-cols-[1fr,80px,80px,80px,40px,40px]" : "grid-cols-[1fr,120px,40px,40px]";
}
addInitialRows() {
[
{ label: "Point 1", value: 10 },
{ label: "Point 2", value: 20 },
{ label: "Point 3", value: 15 }
].forEach((t) => {
this.requiresXY && (t.x = t.value, t.y = Math.random() * 30, this.isScatter || (t.r = 5, t.color = C())), this.addRow(t);
});
}
addRow(e = {}) {
var a;
const t = new l(
e,
this.requiresXY,
this.isScatter,
() => this.updateData(),
() => {
t.element.remove(), this.updateData();
}
);
(a = this.dataRows) == null || a.appendChild(t.element), this.updateData();
}
updateData() {
var t;
if (!this.dataRows) return;
const e = Array.from((t = this.dataRows) == null ? void 0 : t.querySelectorAll("div"));
this.data = e.map((a) => {
const r = new l(
{},
this.requiresXY,
this.isScatter,
() => {
},
() => {
}
);
return r.element = a, r.getData();
}).filter((a) => a.label), this.onChange(this.data);
}
getElement() {
return this.container;
}
getData() {
return this.data;
}
setData(e) {
this.dataRows && (this.dataRows.innerHTML = ""), e.forEach((t) => this.addRow(t));
}
destroy() {
this.addButton && (this.addButton.removeEventListener("click", () => this.addRow()), this.addButton = null), this.container.parentElement && this.container.parentElement.removeChild(this.container), this.dataRows = null, this.container = null, this.editor = null, this.data = [], this.onChange = null;
}
}
export {
D as ChartDataEditor
};