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
96 lines (95 loc) • 4.41 kB
JavaScript
var u = Object.defineProperty;
var d = (a, r, t) => r in a ? u(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
var s = (a, r, t) => d(a, typeof r != "symbol" ? r + "" : r, t);
/* empty css */
/* empty css */
import { ChartMenu as m } from "./components/ChartMenu.mjs";
import { ChartContextMenu as p } from "./components/ChartContextMenu.mjs";
import { createToolbarButton as f } from "../ToolbarPlugin/utils.mjs";
import { CHART_TYPE_CONFIGS as C } from "./constants/chartTypes.mjs";
import { Resizer as b } from "../../utils/Resizer.mjs";
import { createContainer as g, createLineBreak as R } from "../../utils/helpers.mjs";
class S {
// Сохраняем ссылку на кнопку тулбара
constructor() {
s(this, "name", "charts");
s(this, "hotkeys", [{ keys: "Ctrl+Alt+G", description: "Insert chart", command: "charts", icon: "📊" }]);
s(this, "editor", null);
s(this, "menu", null);
s(this, "contextMenu", null);
s(this, "currentResizer", null);
s(this, "toolbarButton", null);
}
initialize(r) {
this.editor = r, this.menu = new m(r), this.contextMenu = new p(r, this.menu), this.addToolbarButton(), this.setupChartEvents(), this.editor.on("charts", () => {
this.insertChart();
});
}
addToolbarButton() {
var t;
const r = document.querySelector(".editor-toolbar");
r && (this.toolbarButton = f({
icon: C.bar.icon,
title: (t = this.editor) == null ? void 0 : t.t("Insert Chart"),
onClick: () => this.insertChart()
}), r.appendChild(this.toolbarButton));
}
setupChartEvents() {
if (!this.editor) return;
const r = this.editor.getContainer();
r.addEventListener("click", (t) => {
const e = t.target.closest(".chart-container");
e instanceof HTMLElement && (this.currentResizer && (this.currentResizer.destroy(), this.currentResizer = null), this.currentResizer = new b(e, {
handleSize: 10,
handleColor: "blue",
onResizeStart: () => {
var n;
return (n = this.editor) == null ? void 0 : n.disableObserver();
},
onResize: (n, o) => {
var h;
console.log(`Resized to ${n}x${o}`);
const i = e.getAttribute("data-chart-type"), l = e.getAttribute("data-chart-data") ?? "", c = JSON.parse(l);
(h = this.menu) == null || h.redrawChart(e, i, c, { width: n, height: o });
},
onResizeEnd: () => {
var n;
return (n = this.editor) == null ? void 0 : n.enableObserver();
}
}));
}), r.addEventListener("contextmenu", (t) => {
var n;
const e = t.target.closest(".chart-container");
if (e instanceof HTMLElement) {
t.preventDefault();
const o = t.clientX + window.scrollX, i = t.clientY + window.scrollY;
console.log("Mouse coordinates with scroll:", o, i), (n = this.contextMenu) == null || n.show(e, o, i);
}
}), r.addEventListener("chartresize", (t) => {
var o;
const e = t.detail, n = t.target.closest(".chart-container");
n instanceof HTMLElement && ((o = this.menu) == null || o.redrawChart(n, e.type, e.data, {
width: e.width,
height: e.height
}));
});
}
insertChart() {
var n;
if (!this.editor) return;
const r = this.editor.getContainer(), t = window.getSelection();
let e;
t && t.rangeCount > 0 ? e = t.getRangeAt(0) : (e = document.createRange(), e.selectNodeContents(r), e.collapse(!1), t == null || t.removeAllRanges(), t == null || t.addRange(e)), (n = this.menu) == null || n.show((o) => {
if (!this.editor) return;
const i = g("chart-wrapper my-4");
i.appendChild(o), i.appendChild(R()), e.deleteContents(), e.insertNode(i), e.setStartAfter(i), e.setEndAfter(i), t == null || t.removeAllRanges(), t == null || t.addRange(e);
});
}
destroy() {
var r;
this.menu && (this.menu.destroy(), this.menu = null), this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), this.currentResizer && (this.currentResizer.destroy(), this.currentResizer = null), this.toolbarButton && this.toolbarButton.parentElement && (this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.toolbarButton = null), (r = this.editor) == null || r.off("charts"), this.editor = null;
}
}
export {
S as ChartsPlugin
};