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
3 lines (2 loc) • 3.79 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 */
"use strict";var C=Object.defineProperty;var x=(s,e,t)=>e in s?C(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var n=(s,e,t)=>x(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./DataRow.cjs"),f=require("../utils/colors.cjs"),a=require("../../../utils/helpers.cjs");class g{constructor(e,t,i=!1,o=!1){n(this,"container");n(this,"editor");n(this,"data",[]);n(this,"onChange");n(this,"requiresXY");n(this,"isScatter");n(this,"dataRows",null);n(this,"addButton",null);this.editor=e,this.container=a.createContainer("chart-data-editor"),this.onChange=t,this.requiresXY=i,this.isScatter=o,this.initialize()}initialize(){const e=a.createContainer("space-y-4"),t=a.createContainer("flex items-center justify-between mb-4"),i=a.createContainer("text-sm font-medium text-gray-700",this.editor.t("Data Points"));this.addButton=a.createButton(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(i),t.appendChild(this.addButton);const o=a.createContainer("data-grid"),r=a.createContainer(`grid ${this.getHeaderGridCols()} gap-2 pb-2 border-b`),c=a.createContainer("text-sm font-medium text-gray-600",this.editor.t("Label"));if(r.appendChild(c),this.requiresXY){const d=a.createContainer("text-sm font-medium text-gray-600",this.editor.t("X")),h=a.createContainer("text-sm font-medium text-gray-600",this.editor.t("Y"));if(r.appendChild(d),r.appendChild(h),!this.isScatter){const p=a.createContainer("text-sm font-medium text-gray-600",this.editor.t("Size")),m=a.createContainer("text-sm font-medium text-gray-600",this.editor.t("Color"));r.appendChild(p),r.appendChild(m)}}else{const d=a.createContainer("text-sm font-medium text-gray-600",this.editor.t("Value")),h=a.createContainer("text-sm font-medium text-gray-600",this.editor.t("Color"));r.appendChild(d),r.appendChild(h)}const u=a.createContainer();r.appendChild(u),this.dataRows=a.createContainer("data-rows space-y-2 mt-2"),o.appendChild(r),o.appendChild(this.dataRows),e.appendChild(t),e.appendChild(o),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=f.getRandomColor())),this.addRow(t)})}addRow(e={}){var i;const t=new l.DataRow(e,this.requiresXY,this.isScatter,()=>this.updateData(),()=>{t.element.remove(),this.updateData()});(i=this.dataRows)==null||i.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(i=>{const o=new l.DataRow({},this.requiresXY,this.isScatter,()=>{},()=>{});return o.element=i,o.getData()}).filter(i=>i.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}}exports.ChartDataEditor=g;