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
82 lines (81 loc) • 2.92 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 c = Object.defineProperty;
var h = (n, t, e) => t in n ? c(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var r = (n, t, e) => h(n, typeof t != "symbol" ? t + "" : t, e);
import s from "../../../icons/delete.svg.mjs";
import l from "../../../icons/edit.svg.mjs";
import d from "../../../icons/export.svg.mjs";
import { ContextMenu as u } from "../../../core/ui/ContextMenu.mjs";
class f {
constructor(t, e) {
r(this, "contextMenu");
r(this, "activeChart", null);
r(this, "editor");
this.chartMenu = e, this.editor = t, this.contextMenu = new u(
t,
[
{
label: t.t("Edit"),
icon: l,
action: "edit",
onClick: () => this.handleEdit()
},
{
label: t.t("Export PNG"),
icon: d,
action: "export",
onClick: () => this.handleExport()
},
{
label: t.t("Delete"),
icon: s,
action: "delete",
className: "text-red-600",
onClick: () => this.handleDelete()
}
],
{ orientation: "vertical" }
// Ориентация меню (вертикальная)
);
}
handleEdit() {
if (!this.activeChart) return;
const t = this.activeChart.getAttribute("data-chart-type"), e = this.activeChart.getAttribute("data-chart-data");
if (t && e)
try {
this.chartMenu.edit(this.activeChart);
} catch (a) {
console.error("Failed to parse chart data:", a);
}
}
handleDelete() {
this.activeChart && this.activeChart.remove();
}
handleExport() {
var e, a;
if (!this.activeChart) return;
const t = this.activeChart.querySelector("img.svg-chart");
if (t && t.src) {
const i = document.createElement("a");
i.href = t.src, i.download = "chart.png", (this.editor.getInnerContainer() || document.body).appendChild(i), i.click(), (e = i.parentNode) == null || e.removeChild(i);
} else {
const i = this.activeChart.querySelector("canvas");
if (i) {
const o = document.createElement("a");
o.href = i.toDataURL("image/png"), o.download = "chart.png", (this.editor.getInnerContainer() || document.body).appendChild(o), o.click(), (a = o.parentNode) == null || a.removeChild(o);
}
}
}
show(t, e, a) {
this.activeChart = t, this.contextMenu.show(t, e, a);
}
hide() {
this.contextMenu.hide(), this.activeChart = null;
}
destroy() {
typeof this.contextMenu.destroy == "function" && this.contextMenu.destroy(), this.contextMenu = null, this.activeChart = null, this.chartMenu = null;
}
}
export {
f as ChartContextMenu
};