From 9b99d15faa0b93c1345d043d170ba0778a600bf1 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Tue, 17 Feb 2026 16:15:45 +0700 Subject: [PATCH 1/2] plugin label update --- src/plugins/index.js | 2 + src/plugins/web_view_label/FNAbviewLabel.js | 206 ++++++++++++++++++ .../web_view_label/FNAbviewLabelEditor.js | 100 +++++++++ .../Designer/editors/EditorManager.js | 2 +- .../Designer/editors/views/ABViewLabel.js | 78 ------- .../Designer/properties/PropertyManager.js | 2 +- 6 files changed, 310 insertions(+), 80 deletions(-) create mode 100644 src/plugins/web_view_label/FNAbviewLabel.js create mode 100644 src/plugins/web_view_label/FNAbviewLabelEditor.js delete mode 100644 src/rootPages/Designer/editors/views/ABViewLabel.js diff --git a/src/plugins/index.js b/src/plugins/index.js index a8b0b552..546b23b1 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,6 +1,8 @@ import viewListProperties from "./web_view_list/FNAbviewlist.js"; import TabProperties from "./web_view_tab/FNAbviewtab.js"; import TabEditor from "./web_view_tab/FNAbviewtabEditor.js"; +import viewLabelProperties from "./web_view_label/FNAbviewLabel.js"; +import LabelEditor from "./web_view_label/FNAbviewLabelEditor.js"; const AllPlugins = [TabProperties, TabEditor, viewListProperties]; diff --git a/src/plugins/web_view_label/FNAbviewLabel.js b/src/plugins/web_view_label/FNAbviewLabel.js new file mode 100644 index 00000000..9d620168 --- /dev/null +++ b/src/plugins/web_view_label/FNAbviewLabel.js @@ -0,0 +1,206 @@ +// FNViewLabel Properties +// A properties side import for an ABView. +// +export default function FNViewLabelProperties({ + AB, + ABViewPropertiesPlugin, +}) { + return class ABViewLabelProperties extends ABViewPropertiesPlugin { + constructor() { + super(ABViewLabelProperties.getPluginKey(), { + text: "", + format: "", + alignment: "", + }); + this.AB = AB; + } + + + static getPluginKey() { + return "label"; + } + + static getPluginType() { + return "properties-view"; + // properties-view : will display in the properties panel of the ABDesigner + } + + defaultValues() { + let values = { + format: 0, + alignment: "left" + }; + return values; + } + + ui() { + const ids = this.ids; + let L = this.AB.Label(); + const defaultValues = this.defaultValues(); + let initial_text = this.view?.settings?.text || ""; + return super.ui([ + // .text : The Text displayed for this label + { + id: ids.text, + view: "text", + name: initial_text || "text", + label: L("Text"), + placeholder: L("Text Placeholder"), + on: { + onChange: (newValue, oldValue) => { + if (newValue !== oldValue) { + const baseView = this.CurrentView; + + baseView.text = newValue; + + baseView.save(); + this.onChange(); + } + }, + }, + }, + { + view: "fieldset", + label: L("Format Options:"), + body: { + type: "clean", + padding: 10, + rows: [ + { + id: ids.format, + view: "radio", + name: "format", + vertical: true, + value: defaultValues.format, + options: [ + { + id: 0, + value: L("normal"), + }, + { + id: 1, + value: L("title"), + }, + { + id: 2, + value: L("description"), + }, + ], + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + ], + }, + }, + { + view: "fieldset", + label: L("Alignment:"), + body: { + type: "clean", + padding: 10, + rows: [ + { + id: ids.alignment, + view: "radio", + name: "alignment", + vertical: true, + value: defaultValues.alignment, + options: [ + { + id: "left", + value: L("Left"), + }, + { + id: "center", + value: L("Center"), + }, + { + id: "right", + value: L("Right"), + }, + ], + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + ], + }, + }, + {}, + ]); + } + + async init(AB) { + this.AB = AB; + await super.init(AB); + } + + /** + * @method populate + * populate the properties with the values from the view. + * @param {obj} view + */ + populate(view) { + super.populate(view); + const ids = this.ids; + + $$(ids.text).setValue(view.text); + $$(ids.format).setValue(view.settings.format); + $$(ids.alignment).setValue(view.settings.alignment); + } + + /** + * @method values + * return the values from the property editor + * @return {obj} + */ + values() { + const values = super.values(); + + const ids = this.ids; + const $component = $$(ids.component); + values.settings = $component.getValues(); + values.text = values.settings.text; + + return values; + } + + /** + * @method fromValues() + * + * initialze this object with the given set of values. + * @param {obj} values + */ + fromValues(values) { + super.fromValues(values); + + this.settings = this.settings || {}; + + // convert from "0" => 0 + this.settings.height = parseInt( + this.settings.height || ABViewTextPropertyComponentDefaults.height + ); + + // if this is being instantiated on a read from the Property UI, + this.text = values.text || ABViewTextPropertyComponentDefaults.text; + + // NOTE: ABView auto translates/untranslates "label" + // add in any additional fields here: + this.translate(this, this, ["text"]); + } + /** + * @method FieldClass() + * A method to return the proper ABViewXXX Definition. + * NOTE: Must be overwritten by the Child Class + */ + ViewClass() { + return super._ViewClass("label"); + } + }; +} + diff --git a/src/plugins/web_view_label/FNAbviewLabelEditor.js b/src/plugins/web_view_label/FNAbviewLabelEditor.js new file mode 100644 index 00000000..efae77bf --- /dev/null +++ b/src/plugins/web_view_label/FNAbviewLabelEditor.js @@ -0,0 +1,100 @@ +// FNViewLabel Editor +// An Editor wrapper for the ABView Component. +// The Editor is displayed in the ABDesigner as a view is worked on. +// The Editor allows a widget to be moved and placed on the canvas. +// +export default function FNViewLabelEditor({ AB, ABViewEditorPlugin }) { + const BASE_ID = "interface_editor_viewlabel"; + + return class ABViewLabelEditor extends ABViewEditorPlugin { + constructor(view, base = BASE_ID, ids = {}) { + // view: {ABView} The ABView instance this editor is for + // BASE_ID: {string} unique base id reference + // ids: {hash} { key => '' } + // this is provided by the Sub Class and has the keys + // unique to the Sub Class' interface elements. + + super(view, base, ids); + } + + /** + * @method getPluginKey + * return the plugin key for this editor. + * @return {string} plugin key + */ + static getPluginKey() { + return "label"; + } + + /** + * @method getPluginType + * return the plugin type for this editor. + * plugin types are how our ClassManager knows how to store + * the plugin. + * @return {string} plugin type + */ + static getPluginType() { + return "editor-view"; + // editor-view : will display in the editor panel of the ABDesigner + } + + /** + * @method ui() + * Return the Webix UI definition for this editor. + * @return {object} Webix UI definition + */ + ui() { + // Default implementation uses the component's UI + // Sub classes can override this to provide custom editor UI + return super.ui(); + } + + /** + * @method init() + * Initialize the editor with the ABFactory instance. + * @param {ABFactory} AB + */ + async init(AB) { + await super.init(AB); + + // + // Add any custom initialization here + // + } + + /** + * @method onShow() + * Called when the editor is shown. + */ + onShow() { + super.onShow(); + // + // Add any custom onShow logic here + // + } + + /** + * @method onHide() + * Called when the editor is hidden. + */ + onHide() { + super.onHide(); + + // + // Add any custom onHide logic here + // + } + + /** + * @method detatch() + * Detach the editor component. + */ + detatch() { + super.detatch(); + + // + // Add any custom cleanup logic here + // + } + }; +} diff --git a/src/rootPages/Designer/editors/EditorManager.js b/src/rootPages/Designer/editors/EditorManager.js index fa036320..ffc44a0f 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -32,7 +32,7 @@ export default function (AB) { require("./views/ABViewGantt"), require("./views/ABViewGrid"), require("./views/ABViewKanban"), - require("./views/ABViewLabel"), + // require("./views/ABViewLabel"), require("./views/ABViewLayout"), require("./views/ABViewMenu"), require("./views/ABViewPage"), diff --git a/src/rootPages/Designer/editors/views/ABViewLabel.js b/src/rootPages/Designer/editors/views/ABViewLabel.js deleted file mode 100644 index 970c56f4..00000000 --- a/src/rootPages/Designer/editors/views/ABViewLabel.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * ABViewLabel - * 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_viewlabel"; - - const UIClass = UI_Class(AB); - - myClass = class ABViewTextEditor extends UIClass { - static get key() { - return "label"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(base); - - this.AB = AB; - this.view = view; - this.component = this.view.component(); - } - - ui() { - const ids = this.ids; - const baseView = this.view; - const component = this.component; - const _ui = { - type: "form", - margin: 10, - padding: 10, - borderless: true, - rows: [ - { - id: ids.component, - view: "label", - label: baseView.text || "", - align: baseView.settings.alignment, - }, - {}, - ], - }; - - return component.uiFormatting(_ui); - } - - async init(AB) { - this.AB = AB; - - webix.codebase = "/js/webix/extras/"; - - 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 3e97a0c2..08aafa69 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -109,7 +109,7 @@ export default function (AB) { require("./views/ABViewGrid"), require("./views/ABViewImage"), require("./views/ABViewKanban"), - require("./views/ABViewLabel"), + // require("./views/ABViewLabel"), require("./views/ABViewLayout"), // require("./views/ABViewList"), require("./views/ABViewMenu"), From 26e933febe44b90c193583250a623a4e1c8d5639 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Wed, 18 Feb 2026 09:49:55 +0700 Subject: [PATCH 2/2] update imports --- src/plugins/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/index.js b/src/plugins/index.js index 546b23b1..e0165a90 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -4,7 +4,7 @@ import TabEditor from "./web_view_tab/FNAbviewtabEditor.js"; import viewLabelProperties from "./web_view_label/FNAbviewLabel.js"; import LabelEditor from "./web_view_label/FNAbviewLabelEditor.js"; -const AllPlugins = [TabProperties, TabEditor, viewListProperties]; +const AllPlugins = [TabProperties, TabEditor, viewListProperties, viewLabelProperties, LabelEditor]; export default { load: (AB) => {