plugin label update

src/plugins/index.js

@@ -1,8 +1,10 @@
 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];
+const AllPlugins = [TabProperties, TabEditor, viewListProperties, viewLabelProperties, LabelEditor];
 
 export default {
    load: (AB) => {

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");
+      }
+   };
+}
+

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
+         //
+      }
+   };
+}

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"),