From b5c6373f189e545be1c15666a45385579cd3c02a Mon Sep 17 00:00:00 2001 From: BenWirachot Date: Wed, 8 Jul 2026 20:31:46 +0700 Subject: [PATCH 1/2] Migrate chart view editors to plugin architecture and remove legacy editor files --- src/plugins/index.js | 6 +- .../editors/FNAbviewchartEditor.js | 54 +++++++++++++++++ .../editors/FNAbviewchartareaEditor.js | 19 ++++++ .../editors/FNAbviewchartbarEditor.js | 19 ++++++ .../editors/FNAbviewchartlineEditor.js | 19 ++++++ .../editors/FNAbviewchartpieEditor.js | 19 ++++++ .../properties/FNAbviewchart.js} | 49 +++++++++------ .../properties/FNAbviewchartarea.js} | 35 +++++------ .../properties/FNAbviewchartbar.js} | 35 +++++------ .../properties/FNAbviewchartline.js} | 35 +++++------ .../properties/FNAbviewchartpie.js} | 35 +++++------ .../Designer/editors/EditorManager.js | 10 ++-- .../Designer/editors/views/ABViewChart.js | 54 ----------------- .../Designer/editors/views/ABViewChartArea.js | 59 ------------------- .../Designer/editors/views/ABViewChartBar.js | 59 ------------------- .../Designer/editors/views/ABViewChartLine.js | 59 ------------------- .../Designer/editors/views/ABViewChartPie.js | 59 ------------------- .../Designer/properties/PropertyManager.js | 10 ++-- 18 files changed, 236 insertions(+), 399 deletions(-) create mode 100644 src/plugins/web_view_chart/editors/FNAbviewchartEditor.js create mode 100644 src/plugins/web_view_chart/editors/FNAbviewchartareaEditor.js create mode 100644 src/plugins/web_view_chart/editors/FNAbviewchartbarEditor.js create mode 100644 src/plugins/web_view_chart/editors/FNAbviewchartlineEditor.js create mode 100644 src/plugins/web_view_chart/editors/FNAbviewchartpieEditor.js rename src/{rootPages/Designer/properties/views/ABViewChart.js => plugins/web_view_chart/properties/FNAbviewchart.js} (90%) rename src/{rootPages/Designer/properties/views/ABViewChartArea.js => plugins/web_view_chart/properties/FNAbviewchartarea.js} (88%) rename src/{rootPages/Designer/properties/views/ABViewChartBar.js => plugins/web_view_chart/properties/FNAbviewchartbar.js} (89%) rename src/{rootPages/Designer/properties/views/ABViewChartLine.js => plugins/web_view_chart/properties/FNAbviewchartline.js} (89%) rename src/{rootPages/Designer/properties/views/ABViewChartPie.js => plugins/web_view_chart/properties/FNAbviewchartpie.js} (87%) delete mode 100644 src/rootPages/Designer/editors/views/ABViewChart.js delete mode 100644 src/rootPages/Designer/editors/views/ABViewChartArea.js delete mode 100644 src/rootPages/Designer/editors/views/ABViewChartBar.js delete mode 100644 src/rootPages/Designer/editors/views/ABViewChartLine.js delete mode 100644 src/rootPages/Designer/editors/views/ABViewChartPie.js diff --git a/src/plugins/index.js b/src/plugins/index.js index 2c8538ba..f7881f74 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -37,6 +37,8 @@ import viewTabEditor from "./web_view_tab/FNAbviewtabEditor.js"; import viewTabProperties from "./web_view_tab/FNAbviewtab.js"; import viewTextEditor from "./web_view_text/FNAbviewtextEditor.js"; import viewTextProperties from "./web_view_text/FNAbviewtext.js"; +import viewChartProperties from "./web_view_chart/properties/FNAbviewchart.js"; +import viewChartEditor from "./web_view_chart/editors/FNAbviewchartEditor.js"; const AllPlugins = [ CsvExporterEditor, @@ -77,7 +79,9 @@ const AllPlugins = [ viewTextEditor, viewTextProperties, viewDocxBuilderProperties, - viewDocxBuilderEditor + viewDocxBuilderEditor, + viewChartProperties, + viewChartEditor, ]; export default { diff --git a/src/plugins/web_view_chart/editors/FNAbviewchartEditor.js b/src/plugins/web_view_chart/editors/FNAbviewchartEditor.js new file mode 100644 index 00000000..90f2c481 --- /dev/null +++ b/src/plugins/web_view_chart/editors/FNAbviewchartEditor.js @@ -0,0 +1,54 @@ +import FNAbviewchartareaEditor from "./FNAbviewchartareaEditor.js"; +import FNAbviewchartbarEditor from "./FNAbviewchartbarEditor.js"; +import FNAbviewchartlineEditor from "./FNAbviewchartlineEditor.js"; +import FNAbviewchartpieEditor from "./FNAbviewchartpieEditor.js"; + +export default function FNAbviewchartEditor({ AB, ABViewEditorPlugin }) { + const FABViewContainer = + require("../../../rootPages/Designer/editors/views/ABViewContainer").default; + const ABViewContainer = FABViewContainer(AB); + const BASE_ID = "interface_editor_viewchart"; + + const ABAbviewchartEditor = class ABAbviewchartEditor extends ABViewContainer { + static getPluginKey() { + return "chart"; + } + + static getPluginType() { + return "editor-view"; + } + + constructor(view, base = BASE_ID) { + super(view, base); + } + + static get key() { + return "chart"; + } + + ui() { + const _ui = super.ui(); + _ui.rows[0].cellHeight = 400; + return _ui; + } + + async init(AB) { + this.AB = AB; + await super.init(AB); + } + + detatch() {} + + onShow() { + super.onShow(); + } + }; + + return [ + ABAbviewchartEditor, + FNAbviewchartareaEditor({ ABViewEditorPlugin }), + FNAbviewchartbarEditor({ ABViewEditorPlugin }), + FNAbviewchartlineEditor({ ABViewEditorPlugin }), + FNAbviewchartpieEditor({ ABViewEditorPlugin }), + ]; +} diff --git a/src/plugins/web_view_chart/editors/FNAbviewchartareaEditor.js b/src/plugins/web_view_chart/editors/FNAbviewchartareaEditor.js new file mode 100644 index 00000000..d06a25e8 --- /dev/null +++ b/src/plugins/web_view_chart/editors/FNAbviewchartareaEditor.js @@ -0,0 +1,19 @@ +export default function FNAbviewchartareaEditor({ ABViewEditorPlugin }) { + return class ABAbviewchartareaEditor extends ABViewEditorPlugin { + static getPluginKey() { + return this.key; + } + + static getPluginType() { + return "editor-view"; + } + + static get key() { + return "area"; + } + + constructor(view, base = "interface_editor_viewchart_area") { + super(view, base); + } + }; +} diff --git a/src/plugins/web_view_chart/editors/FNAbviewchartbarEditor.js b/src/plugins/web_view_chart/editors/FNAbviewchartbarEditor.js new file mode 100644 index 00000000..2b831fc8 --- /dev/null +++ b/src/plugins/web_view_chart/editors/FNAbviewchartbarEditor.js @@ -0,0 +1,19 @@ +export default function FNAbviewchartbarEditor({ ABViewEditorPlugin }) { + return class ABAbviewchartbarEditor extends ABViewEditorPlugin { + static getPluginKey() { + return this.key; + } + + static getPluginType() { + return "editor-view"; + } + + static get key() { + return "bar"; + } + + constructor(view, base = "interface_editor_viewchart_bar") { + super(view, base); + } + }; +} diff --git a/src/plugins/web_view_chart/editors/FNAbviewchartlineEditor.js b/src/plugins/web_view_chart/editors/FNAbviewchartlineEditor.js new file mode 100644 index 00000000..1ae3b8e3 --- /dev/null +++ b/src/plugins/web_view_chart/editors/FNAbviewchartlineEditor.js @@ -0,0 +1,19 @@ +export default function FNAbviewchartlineEditor({ ABViewEditorPlugin }) { + return class ABAbviewchartlineEditor extends ABViewEditorPlugin { + static getPluginKey() { + return this.key; + } + + static getPluginType() { + return "editor-view"; + } + + static get key() { + return "line"; + } + + constructor(view, base = "interface_editor_viewchart_line") { + super(view, base); + } + }; +} diff --git a/src/plugins/web_view_chart/editors/FNAbviewchartpieEditor.js b/src/plugins/web_view_chart/editors/FNAbviewchartpieEditor.js new file mode 100644 index 00000000..21dde1d2 --- /dev/null +++ b/src/plugins/web_view_chart/editors/FNAbviewchartpieEditor.js @@ -0,0 +1,19 @@ +export default function FNAbviewchartpieEditor({ ABViewEditorPlugin }) { + return class ABAbviewchartpieEditor extends ABViewEditorPlugin { + static getPluginKey() { + return this.key; + } + + static getPluginType() { + return "editor-view"; + } + + static get key() { + return "pie"; + } + + constructor(view, base = "interface_editor_viewchart_pie") { + super(view, base); + } + }; +} diff --git a/src/rootPages/Designer/properties/views/ABViewChart.js b/src/plugins/web_view_chart/properties/FNAbviewchart.js similarity index 90% rename from src/rootPages/Designer/properties/views/ABViewChart.js rename to src/plugins/web_view_chart/properties/FNAbviewchart.js index dc6ee6f6..78c675df 100644 --- a/src/rootPages/Designer/properties/views/ABViewChart.js +++ b/src/plugins/web_view_chart/properties/FNAbviewchart.js @@ -1,18 +1,29 @@ -/* - * ABViewChart - * A Property manager for our ABViewChart definitions - */ - -import FABViewContainer from "./ABViewContainer"; +import FNAbviewchartareaProperties from "./FNAbviewchartarea.js"; +import FNAbviewchartbarProperties from "./FNAbviewchartbar.js"; +import FNAbviewchartlineProperties from "./FNAbviewchartline.js"; +import FNAbviewchartpieProperties from "./FNAbviewchartpie.js"; + +export default function FNAbviewchartProperties({ + AB, + ABViewPropertiesPlugin, +}) { + const FABViewContainer = + require("../../../rootPages/Designer/properties/views/ABViewContainer").default; + const ABViewContainer = FABViewContainer(AB); + const uiConfig = AB.Config.uiSettings(); + const L = AB.Label(); -export default function (AB) { const BASE_ID = "properties_abview_chart"; - const ABViewContainer = FABViewContainer(AB); - const uiConfig = AB.Config.uiSettings(); - const L = ABViewContainer.L(); + const ABAbviewchartProperties = class ABAbviewchartProperties extends ABViewContainer { + static getPluginKey() { + return "chart"; + } + + static getPluginType() { + return "properties-view"; + } - class ABViewChartProperty extends ABViewContainer { constructor() { super(BASE_ID, { dataviewID: "", @@ -190,10 +201,6 @@ export default function (AB) { updateCharts() { // UPDATE charts when parent properties are changed this.CurrentView.refreshData(); - - // baseView.views().forEach((e) => { - // e.parent.refreshData(); - // }); } populateDataview() { @@ -359,7 +366,13 @@ export default function (AB) { ViewClass() { return super._ViewClass("chart"); } - } - - return ABViewChartProperty; + }; + + return [ + ABAbviewchartProperties, + FNAbviewchartareaProperties({ AB, ABViewPropertiesPlugin }), + FNAbviewchartbarProperties({ AB, ABViewPropertiesPlugin }), + FNAbviewchartlineProperties({ AB, ABViewPropertiesPlugin }), + FNAbviewchartpieProperties({ AB, ABViewPropertiesPlugin }), + ]; } diff --git a/src/rootPages/Designer/properties/views/ABViewChartArea.js b/src/plugins/web_view_chart/properties/FNAbviewchartarea.js similarity index 88% rename from src/rootPages/Designer/properties/views/ABViewChartArea.js rename to src/plugins/web_view_chart/properties/FNAbviewchartarea.js index e39bfbfc..114a1f3f 100644 --- a/src/rootPages/Designer/properties/views/ABViewChartArea.js +++ b/src/plugins/web_view_chart/properties/FNAbviewchartarea.js @@ -1,18 +1,21 @@ -/* - * ABViewChartArea - * A Property manager for our ABViewChartArea definitions - */ - -import FABView from "./ABView"; +export default function FNAbviewchartareaProperties({ + AB, + ABViewPropertiesPlugin, +}) { + const uiConfig = AB.Config.uiSettings(); + const L = AB.Label(); -export default function (AB) { const BASE_ID = "properties_abview_chart_area"; - const ABView = FABView(AB); - const uiConfig = AB.Config.uiSettings(); - const L = ABView.L(); + return class ABAbviewchartareaProperties extends ABViewPropertiesPlugin { + static getPluginKey() { + return "area"; + } + + static getPluginType() { + return "properties-view"; + } - class ABViewChartAreaProperty extends ABView { constructor() { super(BASE_ID, {}); @@ -46,12 +49,6 @@ export default function (AB) { }, }, }, - // { - // name: 'chartWidth', - // view: 'counter', - // min: 1, - // label: L('ab.component.chart.area.chartWidth', '*Width') - // }, { name: "chartHeight", view: "counter", @@ -166,7 +163,5 @@ export default function (AB) { ViewClass() { return super._ViewClass("area"); } - } - - return ABViewChartAreaProperty; + }; } diff --git a/src/rootPages/Designer/properties/views/ABViewChartBar.js b/src/plugins/web_view_chart/properties/FNAbviewchartbar.js similarity index 89% rename from src/rootPages/Designer/properties/views/ABViewChartBar.js rename to src/plugins/web_view_chart/properties/FNAbviewchartbar.js index 05cbc0cc..250ee8ea 100644 --- a/src/rootPages/Designer/properties/views/ABViewChartBar.js +++ b/src/plugins/web_view_chart/properties/FNAbviewchartbar.js @@ -1,18 +1,21 @@ -/* - * ABViewChartArea - * A Property manager for our ABViewChartArea definitions - */ - -import FABView from "./ABView"; +export default function FNAbviewchartbarProperties({ + AB, + ABViewPropertiesPlugin, +}) { + const uiConfig = AB.Config.uiSettings(); + const L = AB.Label(); -export default function (AB) { const BASE_ID = "properties_abview_chart_bar"; - const ABView = FABView(AB); - const uiConfig = AB.Config.uiSettings(); - const L = ABView.L(); + return class ABAbviewchartbarProperties extends ABViewPropertiesPlugin { + static getPluginKey() { + return "bar"; + } + + static getPluginType() { + return "properties-view"; + } - class ABViewChartBarProperty extends ABView { constructor() { super(BASE_ID, {}); @@ -71,12 +74,6 @@ export default function (AB) { }, }, }, - // { - // name: 'chartWidth', - // view: 'counter', - // min: 1, - // label: L('ab.component.chart.bar.chartWidth', '*Width') - // }, { name: "height", view: "counter", @@ -191,7 +188,5 @@ export default function (AB) { ViewClass() { return super._ViewClass("bar"); } - } - - return ABViewChartBarProperty; + }; } diff --git a/src/rootPages/Designer/properties/views/ABViewChartLine.js b/src/plugins/web_view_chart/properties/FNAbviewchartline.js similarity index 89% rename from src/rootPages/Designer/properties/views/ABViewChartLine.js rename to src/plugins/web_view_chart/properties/FNAbviewchartline.js index 41b3388a..89d34581 100644 --- a/src/rootPages/Designer/properties/views/ABViewChartLine.js +++ b/src/plugins/web_view_chart/properties/FNAbviewchartline.js @@ -1,18 +1,21 @@ -/* - * ABViewChartline - * A Property manager for our ABViewChartLine definitions - */ - -import FABView from "./ABView"; +export default function FNAbviewchartlineProperties({ + AB, + ABViewPropertiesPlugin, +}) { + const uiConfig = AB.Config.uiSettings(); + const L = AB.Label(); -export default function (AB) { const BASE_ID = "properties_abview_chart_line"; - const ABView = FABView(AB); - const uiConfig = AB.Config.uiSettings(); - const L = ABView.L(); + return class ABAbviewchartlineProperties extends ABViewPropertiesPlugin { + static getPluginKey() { + return "line"; + } + + static getPluginType() { + return "properties-view"; + } - class ABViewChartLineProperty extends ABView { constructor() { super(BASE_ID, {}); @@ -71,12 +74,6 @@ export default function (AB) { }, }, }, - // { - // name: 'chartWidth', - // view: 'counter', - // min: 1, - // label: L('ab.component.chart.line.chartWidth', '*Width') - // }, { name: "chartHeight", view: "counter", @@ -191,7 +188,5 @@ export default function (AB) { ViewClass() { return super._ViewClass("line"); } - } - - return ABViewChartLineProperty; + }; } diff --git a/src/rootPages/Designer/properties/views/ABViewChartPie.js b/src/plugins/web_view_chart/properties/FNAbviewchartpie.js similarity index 87% rename from src/rootPages/Designer/properties/views/ABViewChartPie.js rename to src/plugins/web_view_chart/properties/FNAbviewchartpie.js index f71a65af..24b38970 100644 --- a/src/rootPages/Designer/properties/views/ABViewChartPie.js +++ b/src/plugins/web_view_chart/properties/FNAbviewchartpie.js @@ -1,18 +1,21 @@ -/* - * ABViewChartline - * A Property manager for our ABViewChartLine definitions - */ - -import FABView from "./ABView"; +export default function FNAbviewchartpieProperties({ + AB, + ABViewPropertiesPlugin, +}) { + const uiConfig = AB.Config.uiSettings(); + const L = AB.Label(); -export default function (AB) { const BASE_ID = "properties_abview_chart_pie"; - const ABView = FABView(AB); - const uiConfig = AB.Config.uiSettings(); - const L = ABView.L(); + return class ABAbviewchartpieProperties extends ABViewPropertiesPlugin { + static getPluginKey() { + return "pie"; + } + + static getPluginType() { + return "properties-view"; + } - class ABViewChartPieProperty extends ABView { constructor() { super(BASE_ID, {}); @@ -50,12 +53,6 @@ export default function (AB) { }, }, }, - // { - // name: 'chartWidth', - // view: 'counter', - // min: 1, - // label: L('ab.component.chart.pie.chartWidth', '*Width') - // }, { name: "height", view: "counter", @@ -160,7 +157,5 @@ export default function (AB) { ViewClass() { return super._ViewClass("pie"); } - } - - return ABViewChartPieProperty; + }; } diff --git a/src/rootPages/Designer/editors/EditorManager.js b/src/rootPages/Designer/editors/EditorManager.js index d6f74609..55b40c33 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -13,11 +13,11 @@ export default function (AB) { [ require("./views/_ABViewDefault"), // require("./views/ABViewCarousel"), - require("./views/ABViewChart"), - require("./views/ABViewChartArea"), - require("./views/ABViewChartBar"), - require("./views/ABViewChartLine"), - require("./views/ABViewChartPie"), + // require("./views/ABViewChart"), + // require("./views/ABViewChartArea"), + // require("./views/ABViewChartBar"), + // require("./views/ABViewChartLine"), + // require("./views/ABViewChartPie"), // require("./views/ABViewComment"), require("./views/ABViewConditionalContainer"), require("./views/ABViewContainer"), diff --git a/src/rootPages/Designer/editors/views/ABViewChart.js b/src/rootPages/Designer/editors/views/ABViewChart.js deleted file mode 100644 index 13744fc6..00000000 --- a/src/rootPages/Designer/editors/views/ABViewChart.js +++ /dev/null @@ -1,54 +0,0 @@ -/** - * ABViewChart - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import FABViewContainer from "./ABViewContainer"; - -export default function (AB) { - if (!myClass) { - const BASE_ID = "interface_editor_viewchart"; - const ABViewContainer = FABViewContainer(AB); - - myClass = class ABViewChartEditor extends ABViewContainer { - static get key() { - return "chart"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(view, base); - } - - ui() { - const _ui = super.ui(); - - _ui.rows[0].cellHeight = 400; - - return _ui; - } - - async init(AB) { - this.AB = AB; - - await super.init(AB); - - // this.component.onShow(); - // in our editor, we provide accessLv = 2 - } - - detatch() {} - - onShow() { - super.onShow(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/editors/views/ABViewChartArea.js b/src/rootPages/Designer/editors/views/ABViewChartArea.js deleted file mode 100644 index c4c09ee9..00000000 --- a/src/rootPages/Designer/editors/views/ABViewChartArea.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * ABViewChartArea - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import UI_Class from "../../ui_class"; - -export default function (AB) { - if (!myClass) { - const BASE_ID = "interface_editor_viewchart_area"; - - const UIClass = UI_Class(AB); - - myClass = class ABViewChartAreaEditor extends UIClass { - static get key() { - return "area"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(base, { - view: "", - }); - - this.AB = AB; - this.view = view; - this.component = this.view.component(); - } - - ui() { - return this.component.ui(); - } - - async init(AB) { - this.AB = AB; - - await this.component.init(this.AB); - - // this.component.onShow(); - // in our editor, we provide accessLv = 2 - } - - detatch() { - this.component.detatch?.(); - } - - onShow() { - this.component.onShow(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/editors/views/ABViewChartBar.js b/src/rootPages/Designer/editors/views/ABViewChartBar.js deleted file mode 100644 index e5ee850c..00000000 --- a/src/rootPages/Designer/editors/views/ABViewChartBar.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * ABViewChartArea - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import UI_Class from "../../ui_class"; - -export default function (AB) { - if (!myClass) { - const BASE_ID = "interface_editor_viewchart_bar"; - - const UIClass = UI_Class(AB); - - myClass = class ABViewChartBarEditor extends UIClass { - static get key() { - return "bar"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(base, { - view: "", - }); - - this.AB = AB; - this.view = view; - this.component = this.view.component(); - } - - ui() { - return this.component.ui(); - } - - async init(AB) { - this.AB = AB; - - await this.component.init(this.AB); - - // this.component.onShow(); - // in our editor, we provide accessLv = 2 - } - - detatch() { - this.component.detatch?.(); - } - - onShow() { - this.component.onShow(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/editors/views/ABViewChartLine.js b/src/rootPages/Designer/editors/views/ABViewChartLine.js deleted file mode 100644 index 10fc5b25..00000000 --- a/src/rootPages/Designer/editors/views/ABViewChartLine.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * ABViewChartArea - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import UI_Class from "../../ui_class"; - -export default function (AB) { - if (!myClass) { - const BASE_ID = "interface_editor_viewchart_line"; - - const UIClass = UI_Class(AB); - - myClass = class ABViewChartLineEditor extends UIClass { - static get key() { - return "line"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(base, { - view: "", - }); - - this.AB = AB; - this.view = view; - this.component = this.view.component(); - } - - ui() { - return this.component.ui(); - } - - async init(AB) { - this.AB = AB; - - await this.component.init(this.AB); - - // this.component.onShow(); - // in our editor, we provide accessLv = 2 - } - - detatch() { - this.component.detatch?.(); - } - - onShow() { - this.component.onShow(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/editors/views/ABViewChartPie.js b/src/rootPages/Designer/editors/views/ABViewChartPie.js deleted file mode 100644 index 423c440b..00000000 --- a/src/rootPages/Designer/editors/views/ABViewChartPie.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * ABViewChartArea - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import UI_Class from "../../ui_class"; - -export default function (AB) { - if (!myClass) { - const BASE_ID = "interface_editor_viewchart_pie"; - - const UIClass = UI_Class(AB); - - myClass = class ABViewChartPieEditor extends UIClass { - static get key() { - return "pie"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(base, { - view: "", - }); - - this.AB = AB; - this.view = view; - this.component = this.view.component(); - } - - ui() { - return this.component.ui(); - } - - async init(AB) { - this.AB = AB; - - await this.component.init(this.AB); - - // this.component.onShow(); - // in our editor, we provide accessLv = 2 - } - - detatch() { - this.component.detatch?.(); - } - - onShow() { - this.component.onShow(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 27cf0588..e448e350 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -71,11 +71,11 @@ export default function (AB) { // All the ABViewXXX Property Interfaces Available. [ // require("./views/ABViewCarousel"), - require("./views/ABViewChart"), - require("./views/ABViewChartArea"), - require("./views/ABViewChartBar"), - require("./views/ABViewChartLine"), - require("./views/ABViewChartPie"), + // require("./views/ABViewChart"), + // require("./views/ABViewChartArea"), + // require("./views/ABViewChartBar"), + // require("./views/ABViewChartLine"), + // require("./views/ABViewChartPie"), // require("./views/ABViewComment"), require("./views/ABViewConditionalContainer"), require("./views/ABViewContainer"), From 941bf61e32c9093ff5be3431ea6a3a8119380931 Mon Sep 17 00:00:00 2001 From: BenWirachot Date: Thu, 23 Jul 2026 19:57:25 +0700 Subject: [PATCH 2/2] Inject UI container dependencies via plugin registration to improve modularity in chart editors and properties --- src/plugins/index.js | 10 +++++++++- .../web_view_chart/editors/FNAbviewchartEditor.js | 14 ++++++++------ .../web_view_chart/properties/FNAbviewchart.js | 7 +++---- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/plugins/index.js b/src/plugins/index.js index f7881f74..b0c54605 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -40,6 +40,14 @@ import viewTextProperties from "./web_view_text/FNAbviewtext.js"; import viewChartProperties from "./web_view_chart/properties/FNAbviewchart.js"; import viewChartEditor from "./web_view_chart/editors/FNAbviewchartEditor.js"; +import FABViewContainer from "../rootPages/Designer/properties/views/ABViewContainer.js"; +import FABViewContainerEditor from "../rootPages/Designer/editors/views/ABViewContainer.js"; + +const ABDesignResources = { + FABViewContainer, + FABViewContainerEditor, +}; + const AllPlugins = [ CsvExporterEditor, CsvExporterProperties, @@ -87,7 +95,7 @@ const AllPlugins = [ export default { load: (AB) => { AllPlugins.forEach((plugin) => { - AB.pluginRegister(plugin); + AB.pluginRegister((api) => plugin({ ...api, ...ABDesignResources })); }); }, }; diff --git a/src/plugins/web_view_chart/editors/FNAbviewchartEditor.js b/src/plugins/web_view_chart/editors/FNAbviewchartEditor.js index 90f2c481..e2045f4d 100644 --- a/src/plugins/web_view_chart/editors/FNAbviewchartEditor.js +++ b/src/plugins/web_view_chart/editors/FNAbviewchartEditor.js @@ -3,13 +3,15 @@ import FNAbviewchartbarEditor from "./FNAbviewchartbarEditor.js"; import FNAbviewchartlineEditor from "./FNAbviewchartlineEditor.js"; import FNAbviewchartpieEditor from "./FNAbviewchartpieEditor.js"; -export default function FNAbviewchartEditor({ AB, ABViewEditorPlugin }) { - const FABViewContainer = - require("../../../rootPages/Designer/editors/views/ABViewContainer").default; - const ABViewContainer = FABViewContainer(AB); +export default function FNAbviewchartEditor({ + AB, + ABViewEditorPlugin, + FABViewContainerEditor, +}) { + const ABViewContainer = FABViewContainerEditor(AB); const BASE_ID = "interface_editor_viewchart"; - const ABAbviewchartEditor = class ABAbviewchartEditor extends ABViewContainer { + class ABAbviewchartEditor extends ABViewContainer { static getPluginKey() { return "chart"; } @@ -42,7 +44,7 @@ export default function FNAbviewchartEditor({ AB, ABViewEditorPlugin }) { onShow() { super.onShow(); } - }; + } return [ ABAbviewchartEditor, diff --git a/src/plugins/web_view_chart/properties/FNAbviewchart.js b/src/plugins/web_view_chart/properties/FNAbviewchart.js index 78c675df..f1280bd1 100644 --- a/src/plugins/web_view_chart/properties/FNAbviewchart.js +++ b/src/plugins/web_view_chart/properties/FNAbviewchart.js @@ -6,16 +6,15 @@ import FNAbviewchartpieProperties from "./FNAbviewchartpie.js"; export default function FNAbviewchartProperties({ AB, ABViewPropertiesPlugin, + FABViewContainer, }) { - const FABViewContainer = - require("../../../rootPages/Designer/properties/views/ABViewContainer").default; const ABViewContainer = FABViewContainer(AB); const uiConfig = AB.Config.uiSettings(); const L = AB.Label(); const BASE_ID = "properties_abview_chart"; - const ABAbviewchartProperties = class ABAbviewchartProperties extends ABViewContainer { + class ABAbviewchartProperties extends ABViewContainer { static getPluginKey() { return "chart"; } @@ -366,7 +365,7 @@ export default function FNAbviewchartProperties({ ViewClass() { return super._ViewClass("chart"); } - }; + } return [ ABAbviewchartProperties,