diff --git a/src/plugins/index.js b/src/plugins/index.js index 2c8538ba..b0c54605 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -37,6 +37,16 @@ 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"; + +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, @@ -77,13 +87,15 @@ const AllPlugins = [ viewTextEditor, viewTextProperties, viewDocxBuilderProperties, - viewDocxBuilderEditor + viewDocxBuilderEditor, + viewChartProperties, + viewChartEditor, ]; 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 new file mode 100644 index 00000000..e2045f4d --- /dev/null +++ b/src/plugins/web_view_chart/editors/FNAbviewchartEditor.js @@ -0,0 +1,56 @@ +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, + FABViewContainerEditor, +}) { + const ABViewContainer = FABViewContainerEditor(AB); + const BASE_ID = "interface_editor_viewchart"; + + 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 91% rename from src/rootPages/Designer/properties/views/ABViewChart.js rename to src/plugins/web_view_chart/properties/FNAbviewchart.js index dc6ee6f6..f1280bd1 100644 --- a/src/rootPages/Designer/properties/views/ABViewChart.js +++ b/src/plugins/web_view_chart/properties/FNAbviewchart.js @@ -1,18 +1,28 @@ -/* - * 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, + FABViewContainer, +}) { + 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(); + class ABAbviewchartProperties extends ABViewContainer { + static getPluginKey() { + return "chart"; + } + + static getPluginType() { + return "properties-view"; + } - class ABViewChartProperty extends ABViewContainer { constructor() { super(BASE_ID, { dataviewID: "", @@ -190,10 +200,6 @@ export default function (AB) { updateCharts() { // UPDATE charts when parent properties are changed this.CurrentView.refreshData(); - - // baseView.views().forEach((e) => { - // e.parent.refreshData(); - // }); } populateDataview() { @@ -361,5 +367,11 @@ export default function (AB) { } } - 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 b74f45f4..41af28ac 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"),