@sap-ux/preview-middleware 0.6.2 → 0.7.0

package/dist/client/cpe/facade.js

@@ -0,0 +1,95 @@
+"use strict";
+
+sap.ui.define(["sap/ui/core/Component", "sap/ui/dt/OverlayRegistry", "sap/ui/dt/OverlayUtil", "sap/ui/core/IconPool"], function (Component, OverlayRegistry, OverlayUtil, IconPool) {
+  "use strict";
+
+  /**
+   * Gets control by id.
+   *
+   * @param id unique identifier for control
+   * @returns Element | undefined
+   */
+  function getControlById(id) {
+    return sap.ui.getCore().byId(id);
+  }
+
+  /**
+   * Gets Component by id.
+   *
+   * @param id - unique identifier for control
+   * @returns Component | undefined
+   */
+  function getComponent(id) {
+    if (Component?.get) {
+      return Component.get(id);
+    } else {
+      // Older version must be still supported until maintenance period.
+      return sap.ui.getCore().getComponent(id); // NOSONAR
+    }
+  }
+
+  /**
+   * Gets overlay for control.
+   *
+   * @param control ui5 control
+   * @returns ElementOverlay | undefined
+   */
+  function getOverlay(control) {
+    return OverlayRegistry.getOverlay(control);
+  }
+
+  /**
+   * Gets ClosestOverlay for control.
+   *
+   * @param control ui5 control
+   * @returns ElementOverlay | undefined
+   */
+  function getClosestOverlayFor(control) {
+    return OverlayUtil.getClosestOverlayFor(control);
+  }
+
+  /**
+   * Get ui5 icons.
+   *
+   * @returns IconDetails[]
+   */
+  function getIcons() {
+    return IconPool.getIconNames('undefined').map(icon => {
+      const iconInfo = IconPool.getIconInfo(icon);
+      return {
+        name: icon.toLowerCase(),
+        content: iconInfo.content,
+        fontFamily: iconInfo.fontFamily
+      };
+    }).sort((item1, item2) => {
+      if (item1.name < item2.name) {
+        return -1;
+      }
+      if (item1.name > item2.name) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+
+  /**
+   * A facade for UI5 framework methods.
+   *
+   * @returns UI5Facade
+   */
+  function createUi5Facade() {
+    return {
+      getControlById,
+      getIcons,
+      getComponent,
+      getOverlay,
+      getClosestOverlayFor
+    };
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.createUi5Facade = createUi5Facade;
+  return __exports;
+});
+//# sourceMappingURL=facade.js.map

package/dist/client/cpe/facade.ts

@@ -0,0 +1,95 @@
+import type { IconDetails } from '@sap-ux-private/control-property-editor-common';
+import type { UI5Facade } from './types';
+import Component from 'sap/ui/core/Component';
+import type Element from 'sap/ui/core/Element';
+import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
+import type { ID } from 'sap/ui/core/library';
+import OverlayRegistry from 'sap/ui/dt/OverlayRegistry';
+import OverlayUtil from 'sap/ui/dt/OverlayUtil';
+import IconPool from 'sap/ui/core/IconPool';
+
+/**
+ * Gets control by id.
+ *
+ * @param id unique identifier for control
+ * @returns Element | undefined
+ */
+function getControlById<T extends Element>(id: ID): T | undefined {
+    return sap.ui.getCore().byId(id) as T;
+}
+
+/**
+ * Gets Component by id.
+ *
+ * @param id - unique identifier for control
+ * @returns Component | undefined
+ */
+function getComponent<T extends Component>(id: ID): T | undefined {
+    if (Component?.get) {
+        return Component.get(id) as T;
+    } else {
+        // Older version must be still supported until maintenance period.
+        return sap.ui.getCore().getComponent(id) as T; // NOSONAR
+    }
+}
+
+/**
+ * Gets overlay for control.
+ *
+ * @param control ui5 control
+ * @returns ElementOverlay | undefined
+ */
+function getOverlay<T extends ElementOverlay>(control: Element): T | undefined {
+    return OverlayRegistry.getOverlay(control) as T;
+}
+
+/**
+ * Gets ClosestOverlay for control.
+ *
+ * @param control ui5 control
+ * @returns ElementOverlay | undefined
+ */
+function getClosestOverlayFor<T extends ElementOverlay>(control: Element): T | undefined {
+    return OverlayUtil.getClosestOverlayFor(control) as T;
+}
+
+/**
+ * Get ui5 icons.
+ *
+ * @returns IconDetails[]
+ */
+function getIcons(): IconDetails[] {
+    return IconPool.getIconNames('undefined')
+        .map((icon: string) => {
+            const iconInfo = IconPool.getIconInfo(icon) as IconDetails;
+            return {
+                name: icon.toLowerCase(),
+                content: iconInfo.content,
+                fontFamily: iconInfo.fontFamily
+            } as IconDetails;
+        })
+        .sort((item1: IconDetails, item2: IconDetails) => {
+            if (item1.name < item2.name) {
+                return -1;
+            }
+            if (item1.name > item2.name) {
+                return 1;
+            }
+            return 0;
+        });
+}
+
+/**
+ * A facade for UI5 framework methods.
+ *
+ * @returns UI5Facade
+ */
+export function createUi5Facade(): UI5Facade {
+    return {
+        getControlById,
+        getIcons,
+        getComponent,
+        getOverlay,
+        getClosestOverlayFor
+    };
+}

package/dist/client/cpe/init.js

@@ -1,12 +1,62 @@
-"use strict";
-
-sap.ui.define(["sap/base/Log"], function (log) {
-  "use strict";
-
-  var __exports = function (rta) {
-    // custom rta plugin code goes here
-    log.debug(`Editor start with following settings: ${rta.getFlexSettings()}}`);
-  };
-  return __exports;
-});
-//# sourceMappingURL=init.js.map
+'use strict';
+sap.ui.define([
+    'open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common',
+    './outline/index',
+    './facade',
+    './selection',
+    './changes/service',
+    './documentation',
+    'sap/base/Log',
+    './logger'
+], function (___sap_ux_private_control_property_editor_common, ___outline_index, ___facade, ___selection, ___changes_service, ___documentation, Log, ___logger) {
+    'use strict';
+    const startPostMessageCommunication = ___sap_ux_private_control_property_editor_common['startPostMessageCommunication'];
+    const iconsLoaded = ___sap_ux_private_control_property_editor_common['iconsLoaded'];
+    const enableTelemetry = ___sap_ux_private_control_property_editor_common['enableTelemetry'];
+    const initOutline = ___outline_index['initOutline'];
+    const createUi5Facade = ___facade['createUi5Facade'];
+    const SelectionService = ___selection['SelectionService'];
+    const ChangeService = ___changes_service['ChangeService'];
+    const loadDefaultLibraries = ___documentation['loadDefaultLibraries'];
+    const logger = ___logger['logger'];
+    function init(rta) {
+        Log.info('Initializing Control Property Editor');
+        const flexSettings = rta.getFlexSettings();
+        if (flexSettings.telemetry === true) {
+            enableTelemetry();
+        }
+        const ui5 = createUi5Facade();
+        const actionHandlers = [];
+        function subscribe(handler) {
+            actionHandlers.push(handler);
+        }
+        const selectionService = new SelectionService(rta, ui5);
+        const changesService = new ChangeService({ rta }, ui5, selectionService);
+        const services = [
+            selectionService,
+            changesService
+        ];
+        try {
+            loadDefaultLibraries();
+            const {sendAction} = startPostMessageCommunication(window.parent, async function onAction(action) {
+                for (const handler of actionHandlers) {
+                    try {
+                        await handler(action);
+                    } catch (error) {
+                        Log.error('Handler Failed: ', error);
+                    }
+                }
+            }, logger);
+            for (const service of services) {
+                service.init(sendAction, subscribe);
+            }
+            initOutline(rta, ui5, sendAction).catch(error => Log.error('Error during initialization of Control Property Editor', error));
+            const icons = ui5.getIcons();
+            sendAction(iconsLoaded(icons));
+        } catch (error) {
+            Log.error('Error during initialization of Control Property Editor', error);
+        }
+        return Promise.resolve();
+    }
+    return init;
+});

package/dist/client/cpe/init.ts

@@ -1,7 +1,72 @@
-import log from 'sap/base/Log';
+import type { ExternalAction } from '@sap-ux-private/control-property-editor-common';
+import {
+    startPostMessageCommunication,
+    iconsLoaded,
+    enableTelemetry
+} from '@sap-ux-private/control-property-editor-common';
 import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
 
-export default function(rta: RuntimeAuthoring) {
-    // custom rta plugin code goes here
-    log.debug(`Editor start with following settings: ${rta.getFlexSettings()}}`);
-}
+import type { ActionHandler, Service } from './types';
+import { initOutline } from './outline/index';
+import { createUi5Facade } from './facade';
+import { SelectionService } from './selection';
+import { ChangeService } from './changes/service';
+import { loadDefaultLibraries } from './documentation';
+import Log from 'sap/base/Log';
+import { logger } from './logger';
+
+
+export default function init(rta: RuntimeAuthoring): Promise<void> {
+    Log.info('Initializing Control Property Editor');
+
+    // enable telemetry if requested
+    const flexSettings = rta.getFlexSettings();
+    if (flexSettings.telemetry === true) {
+        enableTelemetry();
+    }
+
+    const ui5 = createUi5Facade();
+    const actionHandlers: ActionHandler[] = [];
+    /**
+     *
+     * @param handler action handler
+     */
+    function subscribe(handler: ActionHandler): void {
+        actionHandlers.push(handler);
+    }
+
+    const selectionService = new SelectionService(rta, ui5);
+
+    const changesService = new ChangeService({ rta }, ui5, selectionService);
+    const services: Service[] = [selectionService, changesService];
+    try {
+        loadDefaultLibraries();
+        const { sendAction } = startPostMessageCommunication<ExternalAction>(
+            window.parent,
+            async function onAction(action) {
+                for (const handler of actionHandlers) {
+                    try {
+                        await handler(action);
+                    } catch (error) {
+                        Log.error('Handler Failed: ', error);
+                    }
+                }
+            },
+            logger
+        );
+
+        for (const service of services) {
+            service.init(sendAction, subscribe);
+        }
+        // For initOutline to complete the RTA needs to already running (to access RTA provided services).
+        // That can only happen if the plugin initialization has completed.
+        initOutline(rta, ui5, sendAction).catch((error) =>
+            Log.error('Error during initialization of Control Property Editor', error)
+        );
+        const icons = ui5.getIcons();
+        sendAction(iconsLoaded(icons));
+    } catch (error) {
+        Log.error('Error during initialization of Control Property Editor', error);
+    }
+    return Promise.resolve();
+}

package/dist/client/cpe/logger.js

@@ -0,0 +1,32 @@
+"use strict";
+
+sap.ui.define(["sap/base/Log"], function (Log) {
+  "use strict";
+
+  function getString(message) {
+    if (typeof message === 'object') {
+      return message.toString();
+    }
+    return message;
+  }
+  const logger = {
+    info: message => {
+      Log.info(getString(message));
+    },
+    debug: message => {
+      Log.debug(getString(message));
+    },
+    warn: message => {
+      Log.warning(getString(message));
+    },
+    error: message => {
+      Log.error(getString(message));
+    }
+  };
+  var __exports = {
+    __esModule: true
+  };
+  __exports.logger = logger;
+  return __exports;
+});
+//# sourceMappingURL=logger.js.map

package/dist/client/cpe/logger.ts

@@ -0,0 +1,26 @@
+import Log from 'sap/base/Log';
+import { Logger } from '@sap-ux-private/control-property-editor-common';
+
+
+function getString(message: string | object): string {
+    if (typeof message === 'object') {
+        return message.toString();
+    }
+    return message;
+}
+
+export const logger: Logger = {
+    info: (message: string | object) => {
+        Log.info(getString(message));
+    },
+    debug: (message: string | object) => {
+        Log.debug(getString(message));
+    },
+    warn: (message: string | object) => {
+        Log.warning(getString(message));
+    },
+    error: (message: string | object) => {
+        Log.error(getString(message));
+    }
+};
+

package/dist/client/cpe/outline/index.js

@@ -0,0 +1,26 @@
+'use strict';
+sap.ui.define([
+    'open/ux/preview/client/thirdparty/@sap-ux-private/control-property-editor-common',
+    './nodes',
+    'sap/base/Log'
+], function (___sap_ux_private_control_property_editor_common, ___nodes, Log) {
+    'use strict';
+    const outlineChanged = ___sap_ux_private_control_property_editor_common['outlineChanged'];
+    const transformNodes = ___nodes['transformNodes'];
+    async function initOutline(rta, ui5, sendAction) {
+        const outline = await rta.getService('outline');
+        async function syncOutline() {
+            try {
+                const viewNodes = await outline.get();
+                const outlineNodes = await transformNodes(ui5, viewNodes);
+                sendAction(outlineChanged(outlineNodes));
+            } catch (error) {
+                Log.error('Outline sync failed!', error);
+            }
+        }
+        outline.attachEvent('update', syncOutline);
+    }
+    var __exports = { __esModule: true };
+    __exports.initOutline = initOutline;
+    return __exports;
+});

package/dist/client/cpe/outline/index.ts

@@ -0,0 +1,34 @@
+import type { ExternalAction } from '@sap-ux-private/control-property-editor-common';
+import { outlineChanged } from '@sap-ux-private/control-property-editor-common';
+
+import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+import type OutlineService from 'sap/ui/rta/command/OutlineService';
+
+import type { UI5Facade } from '../types';
+import { transformNodes } from './nodes';
+import Log from 'sap/base/Log';
+
+/**
+ *
+ * @param rta runtimeAuthoring object.
+ * @param ui5 - facade for ui5 framework methods
+ * @param sendAction send action method.
+ */
+export async function initOutline(
+    rta: RuntimeAuthoring,
+    ui5: UI5Facade,
+    sendAction: (action: ExternalAction) => void
+): Promise<void> {
+    const outline = await rta.getService<OutlineService>('outline');
+    async function syncOutline() {
+        try {
+            const viewNodes = await outline.get();
+            const outlineNodes = await transformNodes(ui5, viewNodes);
+
+            sendAction(outlineChanged(outlineNodes));
+        } catch (error) {
+            Log.error('Outline sync failed!', error);
+        }
+    }
+    outline.attachEvent('update', syncOutline);
+}

package/dist/client/cpe/outline/nodes.js

@@ -0,0 +1,58 @@
+"use strict";
+
+sap.ui.define(["./utils"], function (___utils) {
+  "use strict";
+
+  const isEditable = ___utils["isEditable"];
+  function getAdditionalData(ui5, id) {
+    const control = ui5.getControlById(id);
+    if (control?.getMetadata().getProperty('text')) {
+      const text = control.getProperty('text');
+      if (typeof text === 'string' && text.trim() !== '') {
+        return {
+          text
+        };
+      }
+    }
+    return {};
+  }
+
+  /**
+   * Transform node.
+   *
+   * @param ui5 - facade for ui5 framework methods
+   * @param input outline view node
+   * @param getAdditionalData gets additional data for give control id.
+   * @returns Promise<OutlineNode[]>
+   */
+  async function transformNodes(ui5, input) {
+    const stack = [...input];
+    const items = [];
+    while (stack.length) {
+      const current = stack.shift();
+      const editable = await isEditable(ui5, current?.id);
+      if (current?.type === 'element') {
+        const children = (current.elements ?? []).flatMap(element => element.type === 'aggregation' ? element.elements ?? [] : []);
+        const {
+          text
+        } = getAdditionalData(ui5, current.id);
+        const node = {
+          controlId: current.id,
+          controlType: current.technicalName,
+          name: text ?? current.technicalName.split('.').slice(-1)[0],
+          editable,
+          visible: current.visible ?? true,
+          children: await transformNodes(ui5, children)
+        };
+        items.push(node);
+      }
+    }
+    return items;
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.transformNodes = transformNodes;
+  return __exports;
+});
+//# sourceMappingURL=nodes.js.map

package/dist/client/cpe/outline/nodes.ts

@@ -0,0 +1,52 @@
+import type { OutlineNode } from '@sap-ux-private/control-property-editor-common';
+import { isEditable } from './utils';
+import type { OutlineViewNode } from 'sap/ui/rta/command/OutlineService';
+import { UI5Facade } from '../types';
+
+function getAdditionalData(ui5: UI5Facade, id: string): { text?: string } {
+    const control = ui5.getControlById(id);
+    if (control?.getMetadata().getProperty('text')) {
+        const text = control.getProperty('text');
+        if (typeof text === 'string' && text.trim() !== '') {
+            return {
+                text
+            };
+        }
+    }
+    return {};
+}
+
+/**
+ * Transform node.
+ *
+ * @param ui5 - facade for ui5 framework methods
+ * @param input outline view node
+ * @param getAdditionalData gets additional data for give control id.
+ * @returns Promise<OutlineNode[]>
+ */
+export async function transformNodes(ui5: UI5Facade, input: OutlineViewNode[]): Promise<OutlineNode[]> {
+    const stack = [...input];
+    const items: OutlineNode[] = [];
+    while (stack.length) {
+        const current = stack.shift();
+        const editable = await isEditable(ui5, current?.id);
+        if (current?.type === 'element') {
+            const children = (current.elements ?? []).flatMap((element: OutlineViewNode) =>
+                element.type === 'aggregation' ? element.elements ?? [] : []
+            );
+            const { text } = getAdditionalData(ui5, current.id);
+
+            const node: OutlineNode = {
+                controlId: current.id,
+                controlType: current.technicalName,
+                name: text ?? current.technicalName.split('.').slice(-1)[0],
+                editable,
+                visible: current.visible ?? true,
+                children: await transformNodes(ui5, children)
+            };
+
+            items.push(node);
+        }
+    }
+    return items;
+}

package/dist/client/cpe/outline/utils.js

@@ -0,0 +1,38 @@
+"use strict";
+
+sap.ui.define(["../control-data", "../utils", "sap/ui/dt/OverlayUtil", "sap/ui/dt/OverlayRegistry"], function (___control_data, ___utils, OverlayUtil, OverlayRegistry) {
+  "use strict";
+
+  const buildControlData = ___control_data["buildControlData"];
+  const getRuntimeControl = ___utils["getRuntimeControl"];
+  const isEditable = function (ui5) {
+    let id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    let editable = false;
+    const control = ui5.getControlById(id);
+    if (!control) {
+      const component = ui5.getComponent(id);
+      if (component) {
+        return editable;
+      }
+    } else {
+      let controlOverlay = OverlayRegistry.getOverlay(control);
+      if (!controlOverlay?.getDomRef()) {
+        //look for closest control
+        controlOverlay = OverlayUtil.getClosestOverlayFor(control);
+      }
+      if (controlOverlay) {
+        const runtimeControl = getRuntimeControl(controlOverlay);
+        const controlData = buildControlData(runtimeControl, controlOverlay);
+        const prop = controlData.properties.find(item => item.isEnabled === true);
+        editable = prop !== undefined;
+      }
+    }
+    return editable;
+  };
+  var __exports = {
+    __esModule: true
+  };
+  __exports.isEditable = isEditable;
+  return __exports;
+});
+//# sourceMappingURL=utils.js.map

package/dist/client/cpe/outline/utils.ts

@@ -0,0 +1,29 @@
+import { buildControlData } from '../control-data';
+import { getRuntimeControl } from '../utils';
+import OverlayUtil from 'sap/ui/dt/OverlayUtil';
+import OverlayRegistry from 'sap/ui/dt/OverlayRegistry';
+import type { UI5Facade } from '../types';
+
+export const isEditable = (ui5: UI5Facade, id = ''): boolean => {
+    let editable = false;
+    const control = ui5.getControlById(id);
+    if (!control) {
+        const component = ui5.getComponent(id);
+        if (component) {
+            return editable;
+        }
+    } else {
+        let controlOverlay = OverlayRegistry.getOverlay(control);
+        if (!controlOverlay?.getDomRef()) {
+            //look for closest control
+            controlOverlay = OverlayUtil.getClosestOverlayFor(control);
+        }
+        if (controlOverlay) {
+            const runtimeControl = getRuntimeControl(controlOverlay);
+            const controlData = buildControlData(runtimeControl, controlOverlay);
+            const prop = controlData.properties.find((item) => item.isEnabled === true);
+            editable = prop !== undefined;
+        }
+    }
+    return editable;
+};