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
170 lines (169 loc) • 6.6 kB
JavaScript
var m = Object.defineProperty;
var C = (o, t, e) => t in o ? m(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var a = (o, t, e) => C(o, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as w } from "../../../core/ui/PopupManager.mjs";
import { ChartRenderer as y } from "../services/ChartRenderer.mjs";
import { MultiSeriesDataEditor as g } from "./MultiSeriesDataEditor.mjs";
import { ChartDataEditor as d } from "./ChartDataEditor.mjs";
import { CHART_TYPE_CONFIGS as p } from "../constants/chartTypes.mjs";
import { createContainer as c, createButton as v, createSpan as l } from "../../../utils/helpers.mjs";
class I {
constructor(t) {
a(this, "editor");
a(this, "popup");
a(this, "renderer");
a(this, "currentEditor");
a(this, "selectedType", "bar");
a(this, "onInsert", null);
a(this, "previewTimeout", null);
a(this, "editingChart", null);
this.editor = t, this.renderer = new y(t), this.popup = new w(t, {
title: t.t("Insert"),
className: "chart-menu",
closeOnClickOutside: !0,
buttons: [
{
label: t.t("Cancel"),
variant: "secondary",
onClick: () => this.popup.hide()
},
{
label: t.t("Insert"),
variant: "primary",
onClick: () => this.handleSubmit()
}
],
items: this.createPopupItems()
// Динамически создаем элементы
}), this.currentEditor = new d(
t,
(e) => this.schedulePreviewUpdate([{ name: "Series 1", data: e }])
);
}
createPopupItems() {
return [
{
type: "custom",
// Используем тип 'custom' для кастомного контента
id: "chart-type-selector",
content: () => this.createChartTypeSelector()
},
{
type: "custom",
// Используем тип 'custom' для кастомного контента
id: "data-editor-container",
content: () => this.createDataEditorContainer()
},
{
type: "custom",
// Используем тип 'custom' для кастомного контента
id: "preview-container",
content: () => this.createPreviewContainer()
}
];
}
createChartTypeSelector() {
const t = c("chart-type-selector mb-6"), e = [];
return Object.entries(p).forEach(([i, n]) => {
const r = v("", () => {
this.selectedType = i, e.forEach((u) => u.classList.remove("selected")), r.classList.add("selected"), this.updateEditor(this.selectedType);
});
r.className = `chart-type-option ${i === "bar" ? "selected" : ""}`, r.dataset.type = i;
const s = l("chart-type-icon");
s.innerHTML = n.icon;
const h = l("chart-type-label");
h.textContent = n.name, r.appendChild(s), r.appendChild(h), t.appendChild(r), e.push(r);
}), t;
}
createDataEditorContainer() {
const t = c("data-editor-container mb-6");
return this.updateEditor("bar", t), t;
}
createPreviewContainer() {
const t = c(
"preview-container h-64 bg-gray-50 rounded-lg flex items-center justify-center"
);
return t.innerHTML = '<div class="text-gray-400">Chart preview will appear here</div>', t;
}
updateEditor(t, e) {
const i = p[t], n = e ?? this.popup.getElement().querySelector(".data-editor-container");
n && (n.innerHTML = "", i.supportsMultipleSeries ? this.currentEditor = new g(
this.editor,
(r) => this.schedulePreviewUpdate(r)
) : this.currentEditor = new d(
this.editor,
(r) => this.schedulePreviewUpdate([
{
name: this.editor.t("Series 1"),
data: r
}
]),
i.requiresXY,
t === "scatter"
), n.appendChild(this.currentEditor.getElement()));
}
schedulePreviewUpdate(t) {
this.previewTimeout && window.clearTimeout(this.previewTimeout), this.previewTimeout = window.setTimeout(() => {
this.updatePreview(t);
}, 100);
}
updatePreview(t) {
var n;
const e = (n = this.popup.getElement()) == null ? void 0 : n.querySelector(".preview-container");
if (!e) return;
const i = this.renderer.createChart(this.selectedType, t, {
width: e.clientWidth || 400,
height: e.clientHeight || 300
});
e.innerHTML = "", e.appendChild(i);
}
handleSubmit() {
const t = this.currentEditor.getData();
if (!(!t || Array.isArray(t) && t.length === 0)) {
if (this.editingChart) {
this.editingChart.setAttribute("data-chart-type", this.selectedType), this.editingChart.setAttribute("data-chart-data", JSON.stringify(t));
const e = this.renderer.createChart(this.selectedType, t, {
width: this.editingChart.clientWidth || 800,
height: this.editingChart.clientHeight || 400
});
this.editingChart.innerHTML = "", this.editingChart.appendChild(e);
} else {
const e = c("chart-container");
e.style.width = "100%", e.style.height = "400px", e.setAttribute("data-chart-type", this.selectedType), e.setAttribute("data-chart-data", JSON.stringify(t));
const i = this.renderer.createChart(this.selectedType, t, {
width: e.clientWidth || 800,
height: e.clientHeight || 400
});
e.appendChild(i), this.onInsert && this.onInsert(e);
}
this.popup.hide();
}
}
show(t) {
this.editingChart = null, this.onInsert = t, this.popup.show();
}
edit(t, e = !1) {
var r;
this.editingChart = t;
const i = t.getAttribute("data-chart-type"), n = t.getAttribute("data-chart-data");
if (i && n)
try {
const s = JSON.parse(n), h = (r = this.popup.getElement()) == null ? void 0 : r.querySelector(`[data-type="${i}"]`);
h && h.classList.add("selected"), this.selectedType = i, this.updateEditor(i), setTimeout(() => {
this.currentEditor.setData(s), this.updatePreview(s);
}, 100), e || this.popup.show();
} catch (s) {
console.error("Failed to parse chart data:", s);
}
}
redrawChart(t, e, i, n) {
const r = this.renderer.createChart(e, i, n);
t.innerHTML = "", t.appendChild(r);
}
destroy() {
this.previewTimeout && (window.clearTimeout(this.previewTimeout), this.previewTimeout = null), this.popup.destroy(), this.currentEditor && this.currentEditor.destroy(), this.editor = null, this.popup = null, this.renderer = null, this.currentEditor = null, this.onInsert = null, this.editingChart = null;
}
}
export {
I as ChartMenu
};