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) • 4.97 kB
JavaScript
"use strict";var u=Object.defineProperty;var C=(o,t,e)=>t in o?u(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var n=(o,t,e)=>C(o,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../../../core/ui/PopupManager.cjs"),w=require("../services/ChartRenderer.cjs"),g=require("./MultiSeriesDataEditor.cjs"),d=require("./ChartDataEditor.cjs"),p=require("../constants/chartTypes.cjs"),h=require("../../../utils/helpers.cjs");class m{constructor(t){n(this,"editor");n(this,"popup");n(this,"renderer");n(this,"currentEditor");n(this,"selectedType","bar");n(this,"onInsert",null);n(this,"previewTimeout",null);n(this,"editingChart",null);this.editor=t,this.renderer=new w.ChartRenderer(t),this.popup=new y.PopupManager(t,{title:t.t("Insert"),className:"chart-menu",closeOnClickOutside:!0,buttons:[{label:t.t("Cancel"),variant:"secondary",onClick:()=>this.popup.hide()},{label:t.t("Insert"),variant:"primary",onClick:()=>this.handleSubmit()}],items:this.createPopupItems()}),this.currentEditor=new d.ChartDataEditor(t,e=>this.schedulePreviewUpdate([{name:"Series 1",data:e}]))}createPopupItems(){return[{type:"custom",id:"chart-type-selector",content:()=>this.createChartTypeSelector()},{type:"custom",id:"data-editor-container",content:()=>this.createDataEditorContainer()},{type:"custom",id:"preview-container",content:()=>this.createPreviewContainer()}]}createChartTypeSelector(){const t=h.createContainer("chart-type-selector mb-6"),e=[];return Object.entries(p.CHART_TYPE_CONFIGS).forEach(([r,a])=>{const i=h.createButton("",()=>{this.selectedType=r,e.forEach(l=>l.classList.remove("selected")),i.classList.add("selected"),this.updateEditor(this.selectedType)});i.className=`chart-type-option ${r==="bar"?"selected":""}`,i.dataset.type=r;const s=h.createSpan("chart-type-icon");s.innerHTML=a.icon;const c=h.createSpan("chart-type-label");c.textContent=a.name,i.appendChild(s),i.appendChild(c),t.appendChild(i),e.push(i)}),t}createDataEditorContainer(){const t=h.createContainer("data-editor-container mb-6");return this.updateEditor("bar",t),t}createPreviewContainer(){const t=h.createContainer("preview-container h-64 bg-gray-50 rounded-lg flex items-center justify-center");return t.innerHTML='<div class="text-gray-400">Chart preview will appear here</div>',t}updateEditor(t,e){const r=p.CHART_TYPE_CONFIGS[t],a=e??this.popup.getElement().querySelector(".data-editor-container");a&&(a.innerHTML="",r.supportsMultipleSeries?this.currentEditor=new g.MultiSeriesDataEditor(this.editor,i=>this.schedulePreviewUpdate(i)):this.currentEditor=new d.ChartDataEditor(this.editor,i=>this.schedulePreviewUpdate([{name:this.editor.t("Series 1"),data:i}]),r.requiresXY,t==="scatter"),a.appendChild(this.currentEditor.getElement()))}schedulePreviewUpdate(t){this.previewTimeout&&window.clearTimeout(this.previewTimeout),this.previewTimeout=window.setTimeout(()=>{this.updatePreview(t)},100)}updatePreview(t){var a;const e=(a=this.popup.getElement())==null?void 0:a.querySelector(".preview-container");if(!e)return;const r=this.renderer.createChart(this.selectedType,t,{width:e.clientWidth||400,height:e.clientHeight||300});e.innerHTML="",e.appendChild(r)}handleSubmit(){const t=this.currentEditor.getData();if(!(!t||Array.isArray(t)&&t.length===0)){if(this.editingChart){this.editingChart.setAttribute("data-chart-type",this.selectedType),this.editingChart.setAttribute("data-chart-data",JSON.stringify(t));const e=this.renderer.createChart(this.selectedType,t,{width:this.editingChart.clientWidth||800,height:this.editingChart.clientHeight||400});this.editingChart.innerHTML="",this.editingChart.appendChild(e)}else{const e=h.createContainer("chart-container");e.style.width="100%",e.style.height="400px",e.setAttribute("data-chart-type",this.selectedType),e.setAttribute("data-chart-data",JSON.stringify(t));const r=this.renderer.createChart(this.selectedType,t,{width:e.clientWidth||800,height:e.clientHeight||400});e.appendChild(r),this.onInsert&&this.onInsert(e)}this.popup.hide()}}show(t){this.editingChart=null,this.onInsert=t,this.popup.show()}edit(t,e=!1){var i;this.editingChart=t;const r=t.getAttribute("data-chart-type"),a=t.getAttribute("data-chart-data");if(r&&a)try{const s=JSON.parse(a),c=(i=this.popup.getElement())==null?void 0:i.querySelector(`[data-type="${r}"]`);c&&c.classList.add("selected"),this.selectedType=r,this.updateEditor(r),setTimeout(()=>{this.currentEditor.setData(s),this.updatePreview(s)},100),e||this.popup.show()}catch(s){console.error("Failed to parse chart data:",s)}}redrawChart(t,e,r,a){const i=this.renderer.createChart(e,r,a);t.innerHTML="",t.appendChild(i)}destroy(){this.previewTimeout&&(window.clearTimeout(this.previewTimeout),this.previewTimeout=null),this.popup.destroy(),this.currentEditor&&this.currentEditor.destroy(),this.editor=null,this.popup=null,this.renderer=null,this.currentEditor=null,this.onInsert=null,this.editingChart=null}}exports.ChartMenu=m;