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
2 lines (1 loc) • 6.25 kB
JavaScript
"use strict";var v=Object.defineProperty;var S=(u,t,e)=>t in u?v(u,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):u[t]=e;var c=(u,t,e)=>S(u,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("../../../icons/delete.svg.cjs"),r=require("../../../utils/helpers.cjs");class I{constructor(t,e){c(this,"editor");c(this,"container");c(this,"series",[]);c(this,"onChange");c(this,"section",[]);c(this,"nameInput",null);this.editor=t,this.container=r.createContainer("chart-data-editor"),this.onChange=e,this.initialize()}initialize(){const t=r.createContainer("space-y-4"),e=r.createContainer("flex justify-between items-center"),i=r.createH("h4","text-sm font-medium text-gray-700",this.editor.t("Series Data")),a=r.createButton(this.editor.t("Add Series"),()=>{this.addSeries({name:`Series ${this.series.length+1}`,color:this.getNextColor(),data:[]})});a.className="add-series-btn px-2 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600",e.appendChild(i),e.appendChild(a);const l=r.createContainer("series-container space-y-6");t.appendChild(e),t.appendChild(l),this.container.appendChild(t),this.addInitialSeries()}addInitialSeries(){const t={name:this.editor.t("Series 1"),color:"#3b82f6",data:[{label:this.editor.t("Jan"),value:10,r:5,x:1,y:1,color:this.getNextColor()},{label:this.editor.t("Feb"),value:20,r:10,x:2,y:2,color:this.getNextColor()},{label:this.editor.t("Mar"),value:15,r:7,x:3,y:3,color:this.getNextColor()}]};this.addSeries(t)}getNextColor(){const t=["#3b82f6","#ef4444","#10b981","#f59e0b","#6366f1","#ec4899","#8b5cf6","#14b8a6","#f97316","#06b6d4"];return t[this.series.length%t.length]}getElement(){return this.container}getData(){return this.series}addSeries(t){const e=this.container.querySelector(".series-container");if(!e)return;const i=this.createSeriesSection(t);e.appendChild(i),this.section.push(i),this.updateData()}createSeriesSection(t){const e=r.createContainer("series-section border rounded-lg p-4"),i=r.createContainer("flex items-center justify-between mb-4"),a=r.createContainer("flex items-center gap-3");this.nameInput=r.createInputField("text",this.editor.t("Series name"),t.name,y=>{t.name=y}),this.nameInput.className="series-name px-2 py-1 border rounded text-sm";const l=r.createInputField("color",this.editor.t("Color"),t.color||"#3b82f6",y=>{t.color=y});l.className="series-color w-8 h-8 rounded cursor-pointer";const d=r.createButton("",()=>{e.remove(),this.updateData()});d.className="delete-series-btn p-1 text-red-500 hover:text-red-700",d.innerHTML=g.default,a.appendChild(this.nameInput),a.appendChild(l),i.appendChild(a),i.appendChild(d);const n=r.createContainer("data-grid"),o=r.createContainer("grid grid-cols-[0.9fr,60px,60px,60px,40px,60px] gap-2 pb-2 border-b"),p=r.createContainer("text-sm font-medium text-gray-600",this.editor.t("Label")),h=r.createContainer("text-sm font-medium text-gray-600",this.editor.t("Value")),m=r.createContainer("text-sm font-medium text-gray-600",this.editor.t("X")),x=r.createContainer("text-sm font-medium text-gray-600",this.editor.t("Y")),C=r.createContainer("text-sm font-medium text-gray-600",this.editor.t("Color")),b=r.createContainer("text-sm font-medium text-gray-600");o.appendChild(p),o.appendChild(h),o.appendChild(m),o.appendChild(x),o.appendChild(C),o.appendChild(b),n.appendChild(o);const s=r.createContainer("data-rows space-y-2 mt-2");n.appendChild(s);const f=r.createButton(this.editor.t("+ Add Data Point"),()=>{this.addDataPoint(e)});return f.className="add-point-btn mt-2 px-2 py-1 text-sm text-blue-600 hover:text-blue-700",e.appendChild(i),e.appendChild(n),e.appendChild(f),this.populateSeriesData(s,t.data),e}addDataPoint(t,e){var m,x,C,b;const i=t.querySelector(".data-rows");if(!i)return;const a=r.createContainer("grid grid-cols-[0.9fr,60px,60px,60px,40px,60px] gap-2 items-center"),l=r.createInputField("text","label",(e==null?void 0:e.label)||"",s=>{e&&(e.label=s)});l.className="label-input px-2 py-1 border rounded text-sm";const d=r.createInputField("number","value",(m=e==null?void 0:e.value)==null?void 0:m.toString(),s=>{e&&(e.value=parseInt(s))});d.className="value-input px-2 py-1 border rounded text-sm";const n=r.createInputField("number","X",((x=e==null?void 0:e.x)==null?void 0:x.toString())||"",s=>{e&&(e.x=parseInt(s))});n.className="x-input px-2 py-1 border rounded text-sm";const o=r.createInputField("number","Y",((C=e==null?void 0:e.y)==null?void 0:C.toString())||"",s=>{e&&(e.y=parseInt(s))});o.className="y-input px-2 py-1 border rounded text-sm";const p=r.createInputField("color","Color",((b=e==null?void 0:e.y)==null?void 0:b.toString())||"",s=>{p.value=s});p.className="color-input px-2 py-1 border rounded text-sm";const h=r.createButton("",()=>{a.remove(),this.updateData()});h.className="delete-point-btn p-1 pl-2 text-red-500 hover:text-red-700",h.innerHTML=g.default,a.appendChild(l),a.appendChild(d),a.appendChild(n),a.appendChild(o),a.appendChild(p),a.appendChild(h),i.appendChild(a),this.updateData()}populateSeriesData(t,e){e.forEach(i=>{var a;this.addDataPoint((a=t.parentElement)==null?void 0:a.parentElement,i)})}updateData(){const t=this.section;t&&(this.series=Array.from(t).map(e=>{const i=e.querySelector(".series-name").value,a=e.querySelector(".series-color").value,l=e.querySelectorAll(".data-rows > div"),d=Array.from(l).map(n=>({label:n.querySelector(".label-input").value+" ("+(parseFloat(n.querySelector(".value-input").value)||0)+")",value:parseFloat(n.querySelector(".value-input").value)||0,r:parseFloat(n.querySelector(".value-input").value)||0,x:parseFloat(n.querySelector(".x-input").value)||0,y:parseFloat(n.querySelector(".y-input").value)||0,color:n.querySelector(".color-input").value||"#3b82f6"})).filter(n=>n.label&&!isNaN(n.value));return{name:i,color:a,data:d}}),this.onChange(this.series))}destroy(){const t=this.container.querySelector(".add-series-btn");t==null||t.removeEventListener("click",()=>{}),this.section.forEach(e=>{e.removeEventListener("input",()=>{}),e.remove()}),this.section=[],this.container.parentElement&&this.container.parentElement.removeChild(this.container),this.container=null,this.editor=null,this.series=[],this.onChange=null}}exports.MultiSeriesDataEditor=I;