Feature/taipy designer react

frontend/taipy-gui/base/src/app.ts

@@ -10,13 +10,15 @@ import { TaipyWsAdapter, WsAdapter } from "./wsAdapter";
 import { WsMessageType } from "../../src/context/wsUtils";
 import { getBase } from "./utils";
 import { CookieHandler } from "./cookieHandler";
+import { CanvasRenderConfig, Element, ElementAction, ElementManager } from "./element/elementManager";
 
 export type OnInitHandler = (taipyApp: TaipyApp) => void;
 export type OnChangeHandler = (taipyApp: TaipyApp, encodedName: string, value: unknown, dataEventKey?: string) => void;
 export type OnNotifyHandler = (taipyApp: TaipyApp, type: string, message: string) => void;
 export type OnReloadHandler = (taipyApp: TaipyApp, removedChanges: ModuleData) => void;
 export type OnWsMessage = (taipyApp: TaipyApp, event: string, payload: unknown) => void;
 export type OnWsStatusUpdate = (taipyApp: TaipyApp, messageQueue: string[]) => void;
+export type OnCanvasReRender = (taipyApp: TaipyApp, isEditMode: boolean, elementAction?: ElementAction) => void;
 export type OnEvent =
     | OnInitHandler
     | OnChangeHandler
@@ -29,15 +31,15 @@ type RequestDataCallback = (taipyApp: TaipyApp, encodedName: string, dataEventKe
 
 export class TaipyApp {
     socket: Socket;
-    _onInit: OnInitHandler | undefined;
-    _onChange: OnChangeHandler | undefined;
-    _onNotify: OnNotifyHandler | undefined;
-    _onReload: OnReloadHandler | undefined;
-    _onWsMessage: OnWsMessage | undefined;
-    _onWsStatusUpdate: OnWsStatusUpdate | undefined;
-    _ackList: string[];
-    _rdc: Record<string, Record<string, RequestDataCallback>>;
-    _cookieHandler: CookieHandler | undefined;
+    #onInit: OnInitHandler | undefined;
+    #onChange: OnChangeHandler | undefined;
+    #onNotify: OnNotifyHandler | undefined;
+    #onReload: OnReloadHandler | undefined;
+    #onWsMessage: OnWsMessage | undefined;
+    #onWsStatusUpdate: OnWsStatusUpdate | undefined;
+    #onCanvasReRender: OnCanvasReRender | undefined;
+    ackList: string[];
+    rdc: Record<string, Record<string, RequestDataCallback>>;
     variableData: DataManager | undefined;
     functionData: DataManager | undefined;
     appId: string;
@@ -47,6 +49,7 @@ export class TaipyApp {
     path: string | undefined;
     routes: Route[] | undefined;
     wsAdapters: WsAdapter[];
+    elementManager: ElementManager;
 
     constructor(
         onInit: OnInitHandler | undefined = undefined,
@@ -68,102 +71,117 @@ export class TaipyApp {
         this.path = path;
         this.socket = socket;
         this.wsAdapters = [new TaipyWsAdapter()];
-        this._ackList = [];
-        this._rdc = {};
-        this._cookieHandler = handleCookie ? new CookieHandler() : undefined;
+        this.elementManager = new ElementManager(this);
+        this.ackList = [];
+        this.rdc = {};
         // Init socket io connection only when cookie is not handled
         // Socket will be initialized by cookie handler when it is used
-        this._cookieHandler ? this._cookieHandler?.init(socket, this) : initSocket(socket, this);
+        handleCookie ? new CookieHandler().init(socket, this) : initSocket(socket, this);
     }
 
     // Getter and setter
     get onInit() {
-        return this._onInit;
+        return this.#onInit;
     }
 
     set onInit(handler: OnInitHandler | undefined) {
         if (handler !== undefined && handler.length !== 1) {
             throw new Error("onInit() requires one parameter");
         }
-        this._onInit = handler;
+        this.#onInit = handler;
     }
 
     onInitEvent() {
         this.onInit && this.onInit(this);
     }
 
     get onChange() {
-        return this._onChange;
+        return this.#onChange;
     }
 
     set onChange(handler: OnChangeHandler | undefined) {
         if (handler !== undefined && handler.length !== 3 && handler.length !== 4) {
             throw new Error("onChange() requires three or four parameters");
         }
-        this._onChange = handler;
+        this.#onChange = handler;
     }
 
     onChangeEvent(encodedName: string, value: unknown, dataEventKey?: string) {
         this.onChange && this.onChange(this, encodedName, value, dataEventKey);
     }
 
     get onNotify() {
-        return this._onNotify;
+        return this.#onNotify;
     }
 
     set onNotify(handler: OnNotifyHandler | undefined) {
         if (handler !== undefined && handler.length !== 3) {
             throw new Error("onNotify() requires three parameters");
         }
-        this._onNotify = handler;
+        this.#onNotify = handler;
     }
 
     onNotifyEvent(type: string, message: string) {
         this.onNotify && this.onNotify(this, type, message);
     }
 
     get onReload() {
-        return this._onReload;
+        return this.#onReload;
     }
     set onReload(handler: OnReloadHandler | undefined) {
         if (handler !== undefined && handler?.length !== 2) {
             throw new Error("onReload() requires two parameters");
         }
-        this._onReload = handler;
+        this.#onReload = handler;
     }
 
     onReloadEvent(removedChanges: ModuleData) {
         this.onReload && this.onReload(this, removedChanges);
     }
 
     get onWsMessage() {
-        return this._onWsMessage;
+        return this.#onWsMessage;
     }
     set onWsMessage(handler: OnWsMessage | undefined) {
         if (handler !== undefined && handler?.length !== 3) {
             throw new Error("onWsMessage() requires three parameters");
         }
-        this._onWsMessage = handler;
+        this.#onWsMessage = handler;
     }
 
     onWsMessageEvent(event: string, payload: unknown) {
         this.onWsMessage && this.onWsMessage(this, event, payload);
     }
 
     get onWsStatusUpdate() {
-        return this._onWsStatusUpdate;
+        return this.#onWsStatusUpdate;
     }
     set onWsStatusUpdate(handler: OnWsStatusUpdate | undefined) {
         if (handler !== undefined && handler?.length !== 2) {
             throw new Error("onWsStatusUpdate() requires two parameters");
         }
-        this._onWsStatusUpdate = handler;
+        this.#onWsStatusUpdate = handler;
     }
 
     onWsStatusUpdateEvent(messageQueue: string[]) {
         this.onWsStatusUpdate && this.onWsStatusUpdate(this, messageQueue);
     }
 
+    get onCanvasReRender() {
+        return this.#onCanvasReRender;
+    }
+
+    set onCanvasReRender(handler: OnCanvasReRender | undefined) {
+        if (handler !== undefined && handler?.length !== 3) {
+            throw new Error("onCanvasReRender() requires three parameter");
+        }
+        this.#onCanvasReRender = handler;
+    }
+
+    onCanvasReRenderEvent(canvasIsEditMode: boolean, elementAction?: ElementAction) {
+        this.onCanvasReRender && this.onCanvasReRender(this, canvasIsEditMode, elementAction);
+    }
+
     // Utility methods
     init() {
         this.clientId = "";
@@ -190,8 +208,8 @@ export class TaipyApp {
         }
         const ackId = sendWsMessage(this.socket, type, id, payload, this.clientId, context);
         if (ackId) {
-            this._ackList.push(ackId);
-            this.onWsStatusUpdateEvent(this._ackList);
+            this.ackList.push(ackId);
+            this.onWsStatusUpdateEvent(this.ackList);
         }
     }
 
@@ -259,7 +277,7 @@ export class TaipyApp {
         // preserve options for this data key so it can be called during refresh
         this.variableData?.addRequestDataOptions(encodedName, dataKey, options);
         // preserve callback so it can be called later
-        this._rdc[encodedName] = { ...this._rdc[encodedName], [dataKey]: cb };
+        this.rdc[encodedName] = { ...this.rdc[encodedName], [dataKey]: cb };
         // call the ws to request data
         this.sendWsMessage("DU", encodedName, options);
     }
@@ -289,12 +307,65 @@ export class TaipyApp {
     }
 
     getWsStatus() {
-        return this._ackList;
+        return this.ackList;
     }
 
     getBaseUrl() {
         return getBase();
     }
+
+    // ElementManager API
+    createCanvas(
+        canvasDomElement: HTMLElement,
+        canvasEditModeCanvas?: HTMLElement,
+        propertyEditorElement?: HTMLElement,
+        styleHandler?: (id: string, styles: Record<string, unknown>) => void,
+    ) {
+        this.elementManager.init(canvasDomElement, canvasEditModeCanvas, propertyEditorElement, styleHandler);
+    }
+
+    addElement2Canvas(
+        type: string,
+        id: string,
+        rootId: string,
+        wrapper: CanvasRenderConfig["wrapper"],
+        properties: Element["properties"] | undefined = undefined,
+        styles: Element["styles"] | undefined = undefined,
+    ) {
+        this.elementManager.addElement(type, id, rootId, wrapper, properties, styles);
+    }
+
+    setCanvasEditMode(bool: boolean) {
+        this.elementManager.setEditMode(bool);
+    }
+
+    modifyElement(id: string, modifiedRecord: Record<string, unknown>) {
+        if ("id" in modifiedRecord) {
+            console.error(`Error modifying element '${id}'. Cannot modify id of an existing element.`);
+            return;
+        }
+        this.elementManager.modifyElement(id, modifiedRecord);
+    }
+
+    modifyElementProperties(id: string, properties: Record<string, unknown>) {
+        this.elementManager.modifyElementProperties(id, properties);
+    }
+
+    deleteElement(id: string) {
+        this.elementManager.deleteElement(id);
+    }
+
+    openPropertyEditor(id: string) {
+        this.elementManager.openPropertyEditor(id);
+    }
+
+    closePropertyEditor() {
+        this.elementManager.closePropertyEditor();
+    }
+
+    refreshThemes() {
+        window.dispatchEvent(new Event("refreshThemes"));
+    }
 }
 
 export const createApp = (

frontend/taipy-gui/base/src/components/Taipy/TaipyElement.tsx

@@ -0,0 +1,111 @@
+import React, { ComponentType, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ErrorBoundary } from "react-error-boundary";
+import JsxParser from "react-jsx-parser";
+
+import { PageContext, TaipyContext } from "../../../../src/context/taipyContext";
+import { Element, ElementActionEnum } from "../../element/elementManager";
+import useStore, { getElementAction } from "../../store";
+import { getJsx, getTaipyElementId } from "./utils";
+import { emptyArray } from "../../../../src/utils";
+import ErrorFallback from "../../../../src/utils/ErrorBoundary";
+import { getRegisteredComponents } from "../../../../src/components/Taipy";
+import { renderError, unregisteredRender } from "../../../../src/components/Taipy/Unregistered";
+
+interface TaipyElementProps {
+    editMode: boolean;
+    element: Element;
+}
+
+const TaipyElement = (props: TaipyElementProps) => {
+    const { state } = useContext(TaipyContext);
+    const [module, setModule] = useState<string>("");
+    const [jsx, setJsx] = useState<string>("");
+    const app = useStore((state) => state.app);
+    const styleHandler = useStore((state) => state.styleHandler);
+    const prevElement = useRef(props.element);
+
+    const renderConfig = useMemo(
+        () => (props.editMode ? props.element.editModeRenderConfig : props.element.renderConfig),
+        [props.element, props.editMode],
+    );
+
+    const pageState = useMemo(() => {
+        return { jsx, module };
+    }, [jsx, module]);
+
+    useEffect(() => {
+        app && setModule(app.getContext());
+    }, [app]);
+
+    useEffect(() => {
+        const setJsxAsync = async () => {
+            if (!app || !renderConfig) {
+                setJsx("");
+                return;
+            }
+            const res = await getJsx(app, props.element, props.editMode);
+            setJsx(`${renderConfig.wrapper[0]}${res}${renderConfig.wrapper[1]}`);
+        };
+        setJsxAsync();
+    }, [app, props.editMode, props.element, renderConfig]);
+
+    useEffect(() => {
+        if (prevElement.current === props.element) {
+            // Initial render
+            const potentialAction = { action: ElementActionEnum.Add, id: props.element.id, editMode: props.editMode };
+            app && app.onCanvasReRenderEvent(props.editMode, getElementAction(potentialAction));
+        } else {
+            // Modify render
+            const potentialAction = {
+                action: ElementActionEnum.Modify,
+                id: props.element.id,
+                editMode: props.editMode,
+            };
+            app && app.onCanvasReRenderEvent(props.editMode, getElementAction(potentialAction));
+        }
+        prevElement.current = props.element;
+        return () => {
+            // ComponenetWillUnmount --> delete element
+            const potentialAction = {
+                action: ElementActionEnum.Delete,
+                id: props.element.id,
+                editMode: props.editMode,
+            };
+            app && app.onCanvasReRenderEvent(props.editMode, getElementAction(potentialAction));
+        };
+    }, [props.element, app, props.editMode]);
+
+    useEffect(() => {
+        const potentialElementId = getTaipyElementId(props.element.id, props.editMode);
+        document.getElementById(potentialElementId) &&
+            styleHandler &&
+            props.element.styles &&
+            styleHandler(potentialElementId, props.element.styles);
+    }, [pageState.jsx, props.element.id, props.editMode, props.element.styles, styleHandler]);
+
+    return renderConfig ? (
+        createPortal(
+            <PageContext.Provider value={pageState}>
+                <ErrorBoundary FallbackComponent={ErrorFallback}>
+                    <JsxParser
+                        disableKeyGeneration={true}
+                        bindings={state.data}
+                        components={getRegisteredComponents() as Record<string, ComponentType>}
+                        jsx={pageState.jsx}
+                        renderUnrecognized={unregisteredRender}
+                        allowUnknownElements={false}
+                        renderError={renderError}
+                        blacklistedAttrs={emptyArray}
+                        renderInWrapper={false}
+                    />
+                </ErrorBoundary>
+            </PageContext.Provider>,
+            renderConfig.root,
+        )
+    ) : (
+        <></>
+    );
+};
+
+export default TaipyElement;