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
90 lines (89 loc) • 4.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 S = Object.defineProperty;
var v = (a, e, r) => e in a ? S(a, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : a[e] = r;
var u = (a, e, r) => v(a, typeof e != "symbol" ? e + "" : e, r);
import { CHART_COLORS as k, colorWithOpacity as B } from "../utils/colors.mjs";
class I {
constructor(e) {
u(this, "editor");
u(this, "colors", k);
this.editor = e;
}
colorWithOpacity(e, r) {
return B(e, r);
}
getDimensions(e) {
const r = Math.max(40, e.padding || 40), t = Math.max(0, e.width - r * 2), i = Math.max(0, e.height - r * 2);
return { padding: r, width: t, height: i };
}
getCircleDimensions(e) {
const r = e.width / 2, t = e.height / 2, i = Math.min(r, t) - 60;
return { centerX: r, centerY: t, radius: i };
}
drawNoDataMessage(e, r) {
e.save(), e.fillStyle = "#6b7280", e.textAlign = "center", e.textBaseline = "middle", e.font = "14px Inter, system-ui, sans-serif", e.fillText(
this.editor.t("No valid data points to display"),
r.width / 2,
r.height / 2
), e.restore();
}
drawGrid(e, r, t, i = !0, h, s) {
var f, y, w, T, C;
if (r.grid && r.grid.show === !1)
return;
const { padding: l, width: n, height: m } = this.getDimensions(r);
e.save(), e.strokeStyle = ((f = r.grid) == null ? void 0 : f.color) || this.getGridColor(r), e.lineWidth = ((y = r.grid) == null ? void 0 : y.width) || 1, e.setLineDash(
((w = r.grid) == null ? void 0 : w.style) === "dashed" ? [5, 5] : ((T = r.grid) == null ? void 0 : T.style) === "dotted" ? [2, 2] : []
), e.globalAlpha = ((C = r.grid) == null ? void 0 : C.opacity) || 0.3, e.fillStyle = "#6b7280", e.font = "12px Inter, system-ui, sans-serif";
for (let d = 0; d <= 5; d++) {
const g = l + m * d / 5, o = Math.round(t * (1 - d / 5));
e.beginPath(), e.moveTo(l, g), e.lineTo(r.width - l, g), e.stroke(), e.textAlign = "right", e.textBaseline = "middle", e.fillText(o.toString(), l - 10, g);
}
i && (e.beginPath(), e.moveTo(l, r.height - l), e.lineTo(r.width - l, r.height - l), e.stroke(), h && h.length > 0 && (e.textAlign = "center", e.textBaseline = "top", e.fillStyle = this.getTextColor(r), e.font = "11px Inter, system-ui, sans-serif", h.forEach((d, g) => {
let o;
if (s === "line" || s === "area")
o = l + n / Math.max(1, h.length - 1) * g;
else {
const A = n / h.length;
o = l + A * g + A / 2;
}
e.save(), e.translate(o, r.height - l + 8), e.rotate(-Math.PI / 6), e.fillText(d, 0, 0), e.restore();
}))), e.restore();
}
drawLegend(e, r, t) {
if (t.legend && t.legend.show === !1)
return;
const { padding: i } = this.getDimensions(t), h = i / 2;
let s = i;
r.forEach((l, n) => {
const m = l.name || this.editor.t("Series") + ` ${n + 1}`, f = l.color || this.getColors(t)[n % this.getColors(t).length];
e.beginPath(), e.arc(s, h, 6, 0, Math.PI * 2), e.fillStyle = this.colorWithOpacity(f, 0.3), e.fill(), e.strokeStyle = f, e.lineWidth = 2, e.stroke(), e.fillStyle = this.getTextColor(t), e.textAlign = "left", e.fillText(m, s + 15, h + 4), s += e.measureText(m).width + 40;
});
}
getColors(e) {
return e.colors && e.colors.length > 0 ? e.colors : e.theme && e.theme.colors && e.theme.colors.primary ? e.theme.colors.primary : this.colors;
}
getTextColor(e) {
return e.theme && e.theme.colors && e.theme.colors.text ? e.theme.colors.text : "#222";
}
getBackgroundColor(e) {
return e.theme && e.theme.colors && e.theme.colors.background ? e.theme.colors.background : "#fff";
}
getGridColor(e) {
return e.theme && e.theme.colors && e.theme.colors.grid ? e.theme.colors.grid : "#e5e7eb";
}
drawTitle(e, r) {
r.title && (e.save(), e.fillStyle = this.getTextColor(r), e.textAlign = "center", e.textBaseline = "top", e.font = "bold 16px Inter, system-ui, sans-serif", e.fillText(r.title, r.width / 2, 20), e.restore());
}
drawAxisLabels(e, r) {
var i, h;
const { padding: t } = this.getDimensions(r);
e.save(), e.fillStyle = this.getTextColor(r), e.font = "12px Inter, system-ui, sans-serif", (i = r.xAxis) != null && i.title && (e.textAlign = "center", e.textBaseline = "top", e.fillText(r.xAxis.title, r.width / 2, r.height - t + 30)), (h = r.yAxis) != null && h.title && (e.save(), e.translate(t - 30, r.height / 2), e.rotate(-Math.PI / 2), e.textAlign = "center", e.textBaseline = "middle", e.fillText(r.yAxis.title, 0, 0), e.restore()), e.restore();
}
drawBackground(e, r) {
e.save(), e.fillStyle = this.getBackgroundColor(r), e.fillRect(0, 0, r.width, r.height), e.restore();
}
}
export {
I as BaseChartRenderer
};