@babylonjs/addons 7.33.0 → 7.34.1

package/htmlMesh/fitStrategy.d.ts

@@ -0,0 +1,10 @@
+export type FitStrategyType = {
+    wrapElement(element: HTMLElement): HTMLElement;
+    updateSize(sizingElement: HTMLElement, width: number, height: number): void;
+};
+export declare const FitStrategy: {
+    CONTAIN: FitStrategyType;
+    COVER: FitStrategyType;
+    STRETCH: FitStrategyType;
+    NONE: FitStrategyType;
+};

package/htmlMesh/fitStrategy.js

@@ -0,0 +1,84 @@
+const FitStrategyContain = {
+    wrapElement(element) {
+        const sizingElement = document.createElement("div");
+        sizingElement.style.display = "flex";
+        sizingElement.style.justifyContent = "center";
+        sizingElement.style.alignItems = "center";
+        const scalingElement = document.createElement("div");
+        scalingElement.style.visibility = "hidden";
+        scalingElement.appendChild(element);
+        sizingElement.appendChild(scalingElement);
+        return sizingElement;
+    },
+    updateSize(sizingElement, width, height) {
+        const scalingElement = sizingElement.firstElementChild;
+        sizingElement.style.width = `${width}px`;
+        sizingElement.style.height = `${height}px`;
+        const [childWidth, childHeight] = [scalingElement.offsetWidth, scalingElement.offsetHeight];
+        const scale = Math.min(width / childWidth, height / childHeight);
+        scalingElement.style.transform = `scale(${scale})`;
+        scalingElement.style.visibility = "visible";
+    },
+};
+const FitStrategyCover = {
+    wrapElement(element) {
+        const sizingElement = document.createElement("div");
+        sizingElement.style.display = "flex";
+        sizingElement.style.justifyContent = "center";
+        sizingElement.style.alignItems = "center";
+        sizingElement.style.overflow = "hidden";
+        const scalingElement = document.createElement("div");
+        scalingElement.style.visibility = "hidden";
+        scalingElement.appendChild(element);
+        sizingElement.appendChild(scalingElement);
+        return sizingElement;
+    },
+    updateSize(sizingElement, width, height) {
+        const scalingElement = sizingElement.firstElementChild;
+        sizingElement.style.width = `${width}px`;
+        sizingElement.style.height = `${height}px`;
+        const [childWidth, childHeight] = [scalingElement.offsetWidth, scalingElement.offsetHeight];
+        const scale = Math.max(width / childWidth, height / childHeight);
+        scalingElement.style.transform = `scale(${scale})`;
+        scalingElement.style.visibility = "visible";
+    },
+};
+const FitStrategyStretch = {
+    wrapElement(element) {
+        const sizingElement = document.createElement("div");
+        sizingElement.style.display = "flex";
+        sizingElement.style.justifyContent = "center";
+        sizingElement.style.alignItems = "center";
+        const scalingElement = document.createElement("div");
+        scalingElement.style.visibility = "hidden";
+        scalingElement.appendChild(element);
+        sizingElement.appendChild(scalingElement);
+        return sizingElement;
+    },
+    updateSize(sizingElement, width, height) {
+        const scalingElement = sizingElement.firstElementChild;
+        sizingElement.style.width = `${width}px`;
+        sizingElement.style.height = `${height}px`;
+        const [childWidth, childHeight] = [scalingElement.offsetWidth, scalingElement.offsetHeight];
+        scalingElement.style.transform = `scale(${width / childWidth}, ${height / childHeight})`;
+        scalingElement.style.visibility = "visible";
+    },
+};
+const FitStrategyNone = {
+    wrapElement(element) {
+        return element;
+    },
+    updateSize(sizingElement, width, height) {
+        if (sizingElement) {
+            sizingElement.style.width = `${width}px`;
+            sizingElement.style.height = `${height}px`;
+        }
+    },
+};
+export const FitStrategy = {
+    CONTAIN: FitStrategyContain,
+    COVER: FitStrategyCover,
+    STRETCH: FitStrategyStretch,
+    NONE: FitStrategyNone,
+};
+//# sourceMappingURL=fitStrategy.js.map

package/htmlMesh/fitStrategy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitStrategy.js","sourceRoot":"","sources":["../../../../dev/addons/src/htmlMesh/fitStrategy.ts"],"names":[],"mappings":"AAKA,MAAM,kBAAkB,GAAoB;IACxC,WAAW,CAAC,OAAoB;QAC5B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACrC,aAAa,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC9C,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC1C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC3C,cAAc,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACpC,aAAa,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAC1C,OAAO,aAAa,CAAC;IACzB,CAAC;IACD,UAAU,CAAC,aAA0B,EAAE,KAAa,EAAE,MAAc;QAChE,MAAM,cAAc,GAAG,aAAa,CAAC,iBAAiC,CAAC;QACvE,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;QACzC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;QAE3C,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,cAAe,CAAC,WAAW,EAAE,cAAe,CAAC,YAAY,CAAC,CAAC;QAC9F,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,UAAU,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;QACjE,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,KAAK,GAAG,CAAC;QACnD,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;IAChD,CAAC;CACJ,CAAC;AAEF,MAAM,gBAAgB,GAAoB;IACtC,WAAW,CAAC,OAAoB;QAC5B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACrC,aAAa,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC9C,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC1C,aAAa,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACxC,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC3C,cAAc,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACpC,aAAa,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAC1C,OAAO,aAAa,CAAC;IACzB,CAAC;IACD,UAAU,CAAC,aAA0B,EAAE,KAAa,EAAE,MAAc;QAChE,MAAM,cAAc,GAAG,aAAa,CAAC,iBAAiC,CAAC;QACvE,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;QACzC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;QAE3C,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,cAAe,CAAC,WAAW,EAAE,cAAe,CAAC,YAAY,CAAC,CAAC;QAC9F,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,UAAU,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;QACjE,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,KAAK,GAAG,CAAC;QACnD,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;IAChD,CAAC;CACJ,CAAC;AAEF,MAAM,kBAAkB,GAAoB;IACxC,WAAW,CAAC,OAAoB;QAC5B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACrC,aAAa,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC9C,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC1C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC3C,cAAc,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACpC,aAAa,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAC1C,OAAO,aAAa,CAAC;IACzB,CAAC;IACD,UAAU,CAAC,aAA0B,EAAE,KAAa,EAAE,MAAc;QAChE,MAAM,cAAc,GAAG,aAAa,CAAC,iBAAiC,CAAC;QACvE,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;QACzC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;QAE3C,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,cAAe,CAAC,WAAW,EAAE,cAAe,CAAC,YAAY,CAAC,CAAC;QAC9F,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,KAAK,GAAG,UAAU,KAAK,MAAM,GAAG,WAAW,GAAG,CAAC;QACzF,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;IAChD,CAAC;CACJ,CAAC;AAEF,MAAM,eAAe,GAAoB;IACrC,WAAW,CAAC,OAAoB;QAC5B,OAAO,OAAO,CAAC;IACnB,CAAC;IACD,UAAU,CAAC,aAA0B,EAAE,KAAa,EAAE,MAAc;QAChE,IAAI,aAAa,EAAE;YACf,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;YACzC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;SAC9C;IACL,CAAC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,gBAAgB;IACvB,OAAO,EAAE,kBAAkB;IAC3B,IAAI,EAAE,eAAe;CACxB,CAAC","sourcesContent":["export type FitStrategyType = {\r\n    wrapElement(element: HTMLElement): HTMLElement;\r\n    updateSize(sizingElement: HTMLElement, width: number, height: number): void;\r\n};\r\n\r\nconst FitStrategyContain: FitStrategyType = {\r\n    wrapElement(element: HTMLElement): HTMLElement {\r\n        const sizingElement = document.createElement(\"div\");\r\n        sizingElement.style.display = \"flex\";\r\n        sizingElement.style.justifyContent = \"center\";\r\n        sizingElement.style.alignItems = \"center\";\r\n        const scalingElement = document.createElement(\"div\");\r\n        scalingElement.style.visibility = \"hidden\";\r\n        scalingElement.appendChild(element);\r\n        sizingElement.appendChild(scalingElement);\r\n        return sizingElement;\r\n    },\r\n    updateSize(sizingElement: HTMLElement, width: number, height: number) {\r\n        const scalingElement = sizingElement.firstElementChild! as HTMLElement;\r\n        sizingElement.style.width = `${width}px`;\r\n        sizingElement.style.height = `${height}px`;\r\n\r\n        const [childWidth, childHeight] = [scalingElement!.offsetWidth, scalingElement!.offsetHeight];\r\n        const scale = Math.min(width / childWidth, height / childHeight);\r\n        scalingElement.style.transform = `scale(${scale})`;\r\n        scalingElement.style.visibility = \"visible\";\r\n    },\r\n};\r\n\r\nconst FitStrategyCover: FitStrategyType = {\r\n    wrapElement(element: HTMLElement): HTMLElement {\r\n        const sizingElement = document.createElement(\"div\");\r\n        sizingElement.style.display = \"flex\";\r\n        sizingElement.style.justifyContent = \"center\";\r\n        sizingElement.style.alignItems = \"center\";\r\n        sizingElement.style.overflow = \"hidden\";\r\n        const scalingElement = document.createElement(\"div\");\r\n        scalingElement.style.visibility = \"hidden\";\r\n        scalingElement.appendChild(element);\r\n        sizingElement.appendChild(scalingElement);\r\n        return sizingElement;\r\n    },\r\n    updateSize(sizingElement: HTMLElement, width: number, height: number) {\r\n        const scalingElement = sizingElement.firstElementChild! as HTMLElement;\r\n        sizingElement.style.width = `${width}px`;\r\n        sizingElement.style.height = `${height}px`;\r\n\r\n        const [childWidth, childHeight] = [scalingElement!.offsetWidth, scalingElement!.offsetHeight];\r\n        const scale = Math.max(width / childWidth, height / childHeight);\r\n        scalingElement.style.transform = `scale(${scale})`;\r\n        scalingElement.style.visibility = \"visible\";\r\n    },\r\n};\r\n\r\nconst FitStrategyStretch: FitStrategyType = {\r\n    wrapElement(element: HTMLElement): HTMLElement {\r\n        const sizingElement = document.createElement(\"div\");\r\n        sizingElement.style.display = \"flex\";\r\n        sizingElement.style.justifyContent = \"center\";\r\n        sizingElement.style.alignItems = \"center\";\r\n        const scalingElement = document.createElement(\"div\");\r\n        scalingElement.style.visibility = \"hidden\";\r\n        scalingElement.appendChild(element);\r\n        sizingElement.appendChild(scalingElement);\r\n        return sizingElement;\r\n    },\r\n    updateSize(sizingElement: HTMLElement, width: number, height: number) {\r\n        const scalingElement = sizingElement.firstElementChild! as HTMLElement;\r\n        sizingElement.style.width = `${width}px`;\r\n        sizingElement.style.height = `${height}px`;\r\n\r\n        const [childWidth, childHeight] = [scalingElement!.offsetWidth, scalingElement!.offsetHeight];\r\n        scalingElement.style.transform = `scale(${width / childWidth}, ${height / childHeight})`;\r\n        scalingElement.style.visibility = \"visible\";\r\n    },\r\n};\r\n\r\nconst FitStrategyNone: FitStrategyType = {\r\n    wrapElement(element: HTMLElement): HTMLElement {\r\n        return element;\r\n    },\r\n    updateSize(sizingElement: HTMLElement, width: number, height: number) {\r\n        if (sizingElement) {\r\n            sizingElement.style.width = `${width}px`;\r\n            sizingElement.style.height = `${height}px`;\r\n        }\r\n    },\r\n};\r\n\r\nexport const FitStrategy = {\r\n    CONTAIN: FitStrategyContain,\r\n    COVER: FitStrategyCover,\r\n    STRETCH: FitStrategyStretch,\r\n    NONE: FitStrategyNone,\r\n};\r\n"]}

package/htmlMesh/htmlMesh.d.ts

@@ -0,0 +1,114 @@
+import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import type { Scene } from "@babylonjs/core/scene.js";
+import type { FitStrategyType } from "./fitStrategy";
+/**
+ * This class represents HTML content that we want to render as though it is part of the scene.  The HTML content is actually
+ * rendered below the canvas, but a depth mask is created by this class that writes to the depth buffer but does not
+ * write to the color buffer, effectively punching a hole in the canvas.  CSS transforms are used to scale, translate, and rotate
+ * the HTML content so that it matches the camera and mesh orientation.  The class supports interactions in editable and non-editable mode.
+ * In non-editable mode (the default), events are passed to the HTML content when the pointer is over the mask (and not occluded by other meshes
+ * in the scene).
+ * #HVHYJC#5
+ * #B17TC7#112
+ */
+export declare class HtmlMesh extends Mesh {
+    /**
+     * Helps identifying a html mesh from a regular mesh
+     */
+    get isHtmlMesh(): boolean;
+    private _enabled;
+    private _ready;
+    /**
+     * @internal
+     */
+    _isCanvasOverlay: boolean;
+    private _requiresUpdate;
+    private _element?;
+    private _width?;
+    private _height?;
+    private _inverseScaleMatrix;
+    private _captureOnPointerEnter;
+    private _pointerEventCaptureBehavior;
+    private _sourceWidth;
+    private _sourceHeight;
+    /**
+     * Return the source width of the content in pixels
+     */
+    get sourceWidth(): number | null;
+    /**
+     * Return the source height of the content in pixels
+     */
+    get sourceHeight(): number | null;
+    private _worldMatrixUpdateObserver;
+    private _fitStrategy;
+    /**
+     * Contruct an instance of HtmlMesh
+     * @param scene
+     * @param id The id of the mesh.  Will be used as the id of the HTML element as well.
+     * @param options object with optional parameters
+     */
+    constructor(scene: Scene, id: string, { captureOnPointerEnter, isCanvasOverlay, fitStrategy }?: {
+        captureOnPointerEnter?: boolean | undefined;
+        isCanvasOverlay?: boolean | undefined;
+        fitStrategy?: FitStrategyType | undefined;
+    });
+    /**
+     * The width of the content in pixels
+     */
+    get width(): number | undefined;
+    /**
+     * The height of the content in pixels
+     */
+    get height(): number | undefined;
+    /**
+     * The HTML element that is being rendered as a mesh
+     */
+    get element(): HTMLElement | undefined;
+    /**
+     * True if the mesh has been moved, rotated, or scaled since the last time this
+     * property was read.  This property is reset to false after reading.
+     */
+    get requiresUpdate(): boolean;
+    /**
+     * Enable capture for the pointer when entering the mesh area
+     */
+    set captureOnPointerEnter(captureOnPointerEnter: boolean);
+    /**
+     * Disposes of the mesh and the HTML element
+     */
+    dispose(): void;
+    /**
+     * @internal
+     */
+    _markAsUpdated(): void;
+    /**
+     * Sets the content of the element to the specified content adjusting the mesh scale to match and making it visible.
+     * If the the specified content is undefined, then it will make the mesh invisible.  In either case it will clear the
+     * element content first.
+     * @param element The element to render as a mesh
+     * @param width The width of the mesh in Babylon units
+     * @param height The height of the mesh in Babylon units
+     */
+    setContent(element: HTMLElement, width: number, height: number): void;
+    setEnabled(enabled: boolean): void;
+    /**
+     * Sets the content size in pixels
+     * @param width width of the source
+     * @param height height of the source
+     */
+    setContentSizePx(width: number, height: number): void;
+    protected _setAsReady(ready: boolean): void;
+    protected _doSetEnabled(enabled: boolean): void;
+    protected _updateScaleIfNecessary(): void;
+    protected _createMask(): void;
+    protected _setElementZIndex(zIndex: number): void;
+    /**
+     * Callback used by the PointerEventsCaptureBehavior to capture pointer events
+     */
+    capturePointerEvents(): void;
+    /**
+     * Callback used by the PointerEventsCaptureBehavior to release pointer events
+     */
+    releasePointerEvents(): void;
+    protected _createElement(): HTMLDivElement | undefined;
+}

package/htmlMesh/htmlMesh.js

@@ -0,0 +1,301 @@
+import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import { CreatePlaneVertexData } from "@babylonjs/core/Meshes/Builders/planeBuilder.js";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
+import { Matrix } from "@babylonjs/core/Maths/math.js";
+import { PointerEventsCaptureBehavior } from "./pointerEventsCaptureBehavior.js";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+import { FitStrategy } from "./fitStrategy.js";
+/**
+ * This class represents HTML content that we want to render as though it is part of the scene.  The HTML content is actually
+ * rendered below the canvas, but a depth mask is created by this class that writes to the depth buffer but does not
+ * write to the color buffer, effectively punching a hole in the canvas.  CSS transforms are used to scale, translate, and rotate
+ * the HTML content so that it matches the camera and mesh orientation.  The class supports interactions in editable and non-editable mode.
+ * In non-editable mode (the default), events are passed to the HTML content when the pointer is over the mask (and not occluded by other meshes
+ * in the scene).
+ * #HVHYJC#5
+ * #B17TC7#112
+ */
+export class HtmlMesh extends Mesh {
+    /**
+     * Helps identifying a html mesh from a regular mesh
+     */
+    get isHtmlMesh() {
+        return true;
+    }
+    /**
+     * Return the source width of the content in pixels
+     */
+    get sourceWidth() {
+        return this._sourceWidth;
+    }
+    /**
+     * Return the source height of the content in pixels
+     */
+    get sourceHeight() {
+        return this._sourceHeight;
+    }
+    /**
+     * Contruct an instance of HtmlMesh
+     * @param scene
+     * @param id The id of the mesh.  Will be used as the id of the HTML element as well.
+     * @param options object with optional parameters
+     */
+    constructor(scene, id, { captureOnPointerEnter = true, isCanvasOverlay = false, fitStrategy = FitStrategy.NONE } = {}) {
+        super(id, scene);
+        // Override the super class's _isEnabled property so we can control when the mesh
+        // is enabled.  I.e., we don't want to render the mesh until there is content to show.
+        this._enabled = false;
+        // The mesh is ready when content has been set and the content size has been set
+        // The former is done by the user, the latter is done by the renderer.
+        this._ready = false;
+        /**
+         * @internal
+         */
+        this._isCanvasOverlay = false;
+        this._requiresUpdate = true;
+        this._inverseScaleMatrix = null;
+        this._captureOnPointerEnter = true;
+        this._pointerEventCaptureBehavior = null;
+        this._sourceWidth = null;
+        this._sourceHeight = null;
+        this._fitStrategy = FitStrategy.NONE;
+        // Requires a browser to work.  Bail if we aren't running in a browser
+        if (typeof document === "undefined") {
+            Logger.Warn(`Creating an instance of an HtmlMesh with id ${id} outside of a browser.  The mesh will not be visible.`);
+            return;
+        }
+        this._fitStrategy = fitStrategy;
+        this._isCanvasOverlay = isCanvasOverlay;
+        this._createMask();
+        this._element = this._createElement();
+        // Set enabled by default, so this will show as soon as it's ready
+        this.setEnabled(true);
+        this._captureOnPointerEnter = captureOnPointerEnter;
+        // Create a behavior to capture pointer events
+        this._pointerEventCaptureBehavior = new PointerEventsCaptureBehavior(this.capturePointerEvents.bind(this), this.releasePointerEvents.bind(this), {
+            captureOnPointerEnter: this._captureOnPointerEnter,
+        });
+        this.addBehavior(this._pointerEventCaptureBehavior);
+    }
+    /**
+     * The width of the content in pixels
+     */
+    get width() {
+        return this._width;
+    }
+    /**
+     * The height of the content in pixels
+     */
+    get height() {
+        return this._height;
+    }
+    /**
+     * The HTML element that is being rendered as a mesh
+     */
+    get element() {
+        return this._element;
+    }
+    /**
+     * True if the mesh has been moved, rotated, or scaled since the last time this
+     * property was read.  This property is reset to false after reading.
+     */
+    get requiresUpdate() {
+        return this._requiresUpdate;
+    }
+    /**
+     * Enable capture for the pointer when entering the mesh area
+     */
+    set captureOnPointerEnter(captureOnPointerEnter) {
+        this._captureOnPointerEnter = captureOnPointerEnter;
+        if (this._pointerEventCaptureBehavior) {
+            this._pointerEventCaptureBehavior.captureOnPointerEnter = captureOnPointerEnter;
+        }
+    }
+    /**
+     * Disposes of the mesh and the HTML element
+     */
+    dispose() {
+        super.dispose();
+        this._element?.remove();
+        this._element = undefined;
+        if (this._pointerEventCaptureBehavior) {
+            this._pointerEventCaptureBehavior.dispose();
+            this._pointerEventCaptureBehavior = null;
+        }
+    }
+    /**
+     * @internal
+     */
+    _markAsUpdated() {
+        this._requiresUpdate = false;
+    }
+    /**
+     * Sets the content of the element to the specified content adjusting the mesh scale to match and making it visible.
+     * If the the specified content is undefined, then it will make the mesh invisible.  In either case it will clear the
+     * element content first.
+     * @param element The element to render as a mesh
+     * @param width The width of the mesh in Babylon units
+     * @param height The height of the mesh in Babylon units
+     */
+    setContent(element, width, height) {
+        // If content is changed, we are no longer ready
+        this._setAsReady(false);
+        // Also invalidate the source width and height
+        this._sourceWidth = null;
+        this._sourceHeight = null;
+        if (!this._element) {
+            return;
+        }
+        this._width = width;
+        this._height = height;
+        this._requiresUpdate = true;
+        this.scaling.setAll(1);
+        if (element) {
+            this._element.appendChild(this._fitStrategy.wrapElement(element));
+            this._updateScaleIfNecessary();
+        }
+        if (this.sourceWidth && this.sourceHeight) {
+            this._setAsReady(true);
+        }
+    }
+    // Overides BABYLON.Mesh.setEnabled
+    setEnabled(enabled) {
+        // Capture requested enabled state
+        this._enabled = enabled;
+        // If disabling or enabling and we are ready
+        if (!enabled || this._ready) {
+            this._doSetEnabled(enabled);
+        }
+    }
+    /**
+     * Sets the content size in pixels
+     * @param width width of the source
+     * @param height height of the source
+     */
+    setContentSizePx(width, height) {
+        this._sourceWidth = width;
+        this._sourceHeight = height;
+        if (!this._element || !this._element.firstElementChild) {
+            return;
+        }
+        this._fitStrategy.updateSize(this._element.firstElementChild, width, height);
+        this._updateScaleIfNecessary();
+        if (this.width && this.height) {
+            this._setAsReady(true);
+        }
+    }
+    _setAsReady(ready) {
+        this._ready = ready;
+        if (ready) {
+            this._doSetEnabled(this._enabled);
+        }
+        else {
+            this._doSetEnabled(false);
+        }
+    }
+    _doSetEnabled(enabled) {
+        if (!this._element) {
+            return;
+        }
+        //if enabled, then start listening for changes to the
+        // scaling, rotation, and position.  otherwise stop listening
+        if (enabled && !this._worldMatrixUpdateObserver) {
+            this._worldMatrixUpdateObserver = this.onAfterWorldMatrixUpdateObservable.add(() => {
+                this._requiresUpdate = true;
+            });
+        }
+        else if (!enabled) {
+            this._worldMatrixUpdateObserver?.remove();
+            this._worldMatrixUpdateObserver = null;
+        }
+        // If enabled, then revert the content element display
+        // otherwise hide it
+        this._element.style.display = enabled ? "" : "none";
+        // Capture the content z index
+        this._setElementZIndex(this.position.z * -10000);
+        super.setEnabled(enabled);
+    }
+    _updateScaleIfNecessary() {
+        // If we have setContent before, the content scale is baked into the mesh.  If we don't reset the vertices to
+        // the original size, then we will multiply the scale when we bake the scale below.  By applying the inverse, we back out
+        // the scaling that has been done so we are starting from the same point.
+        // First reset the scale to 1
+        this.scaling.setAll(1);
+        // Then back out the original vertices changes to match the content scale
+        if (this._inverseScaleMatrix) {
+            this.bakeTransformIntoVertices(this._inverseScaleMatrix);
+            // Clear out the matrix so it doesn't get applied again unless we scale
+            this._inverseScaleMatrix = null;
+        }
+        // Set scale to match content.  Note we can't just scale the mesh, because that will scale the content as well
+        // What we need to do is compute a scale matrix and then bake that into the mesh vertices.  This will leave the
+        // mesh scale at 1, so our content will stay it's original width and height until we scale the mesh.
+        const scaleX = this._width || 1;
+        const scaleY = this._height || 1;
+        const scaleMatrix = Matrix.Scaling(scaleX, scaleY, 1);
+        this.bakeTransformIntoVertices(scaleMatrix);
+        // Get an inverse of the scale matrix that we can use to back out the scale changes we have made so
+        // we don't multiply the scale.
+        this._inverseScaleMatrix = new Matrix();
+        scaleMatrix.invertToRef(this._inverseScaleMatrix);
+    }
+    _createMask() {
+        const vertexData = CreatePlaneVertexData({ width: 1, height: 1 });
+        vertexData.applyToMesh(this);
+        const scene = this.getScene();
+        this.checkCollisions = true;
+        const depthMask = new StandardMaterial(`${this.id}-mat`, scene);
+        if (!this._isCanvasOverlay) {
+            depthMask.backFaceCulling = false;
+            depthMask.disableColorWrite = true;
+            depthMask.disableLighting = true;
+        }
+        this.material = depthMask;
+        // Optimization - Freeze material since it never needs to change
+        this.material.freeze();
+    }
+    _setElementZIndex(zIndex) {
+        if (this._element) {
+            this._element.style.zIndex = `${zIndex}`;
+        }
+    }
+    /**
+     * Callback used by the PointerEventsCaptureBehavior to capture pointer events
+     */
+    capturePointerEvents() {
+        if (!this._element) {
+            return;
+        }
+        // Enable dom content to capture pointer events
+        this._element.style.pointerEvents = "auto";
+        // Supress events outside of the dom content
+        document.getElementsByTagName("body")[0].style.pointerEvents = "none";
+    }
+    /**
+     * Callback used by the PointerEventsCaptureBehavior to release pointer events
+     */
+    releasePointerEvents() {
+        if (!this._element) {
+            return;
+        }
+        // Enable pointer events on canvas
+        document.getElementsByTagName("body")[0].style.pointerEvents = "auto";
+        // Disable pointer events on dom content
+        this._element.style.pointerEvents = "none";
+    }
+    _createElement() {
+        // Requires a browser to work.  Bail if we aren't running in a browser
+        if (typeof document === "undefined") {
+            return;
+        }
+        const div = document.createElement("div");
+        div.id = this.id;
+        div.style.backgroundColor = this._isCanvasOverlay ? "transparent" : "#000";
+        div.style.zIndex = "1";
+        div.style.position = "absolute";
+        div.style.pointerEvents = "none";
+        div.style.backfaceVisibility = "hidden";
+        return div;
+    }
+}
+//# sourceMappingURL=htmlMesh.js.map

package/htmlMesh/htmlMesh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlMesh.js","sourceRoot":"","sources":["../../../../dev/addons/src/htmlMesh/htmlMesh.ts"],"names":[],"mappings":"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","sourcesContent":["import { Mesh } from \"core/Meshes/mesh\";\r\nimport { CreatePlaneVertexData } from \"core/Meshes/Builders/planeBuilder\";\r\nimport { StandardMaterial } from \"core/Materials/standardMaterial\";\r\nimport { Matrix } from \"core/Maths/math\";\r\nimport { PointerEventsCaptureBehavior } from \"./pointerEventsCaptureBehavior\";\r\nimport type { Scene } from \"core/scene\";\r\nimport { Logger } from \"core/Misc/logger\";\r\nimport type { FitStrategyType } from \"./fitStrategy\";\r\nimport { FitStrategy } from \"./fitStrategy\";\r\n\r\n/**\r\n * This class represents HTML content that we want to render as though it is part of the scene.  The HTML content is actually\r\n * rendered below the canvas, but a depth mask is created by this class that writes to the depth buffer but does not\r\n * write to the color buffer, effectively punching a hole in the canvas.  CSS transforms are used to scale, translate, and rotate\r\n * the HTML content so that it matches the camera and mesh orientation.  The class supports interactions in editable and non-editable mode.\r\n * In non-editable mode (the default), events are passed to the HTML content when the pointer is over the mask (and not occluded by other meshes\r\n * in the scene).\r\n * #HVHYJC#5\r\n * #B17TC7#112\r\n */\r\nexport class HtmlMesh extends Mesh {\r\n    /**\r\n     * Helps identifying a html mesh from a regular mesh\r\n     */\r\n    public get isHtmlMesh() {\r\n        return true;\r\n    }\r\n\r\n    // Override the super class's _isEnabled property so we can control when the mesh\r\n    // is enabled.  I.e., we don't want to render the mesh until there is content to show.\r\n    private _enabled = false;\r\n\r\n    // The mesh is ready when content has been set and the content size has been set\r\n    // The former is done by the user, the latter is done by the renderer.\r\n    private _ready = false;\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public _isCanvasOverlay = false;\r\n\r\n    private _requiresUpdate = true;\r\n\r\n    private _element?: HTMLElement;\r\n    private _width?: number;\r\n    private _height?: number;\r\n\r\n    private _inverseScaleMatrix: Matrix | null = null;\r\n\r\n    private _captureOnPointerEnter: boolean = true;\r\n    private _pointerEventCaptureBehavior: PointerEventsCaptureBehavior | null = null;\r\n\r\n    private _sourceWidth: number | null = null;\r\n    private _sourceHeight: number | null = null;\r\n\r\n    /**\r\n     * Return the source width of the content in pixels\r\n     */\r\n    public get sourceWidth() {\r\n        return this._sourceWidth;\r\n    }\r\n\r\n    /**\r\n     * Return the source height of the content in pixels\r\n     */\r\n    public get sourceHeight() {\r\n        return this._sourceHeight;\r\n    }\r\n\r\n    private _worldMatrixUpdateObserver: any;\r\n\r\n    private _fitStrategy: FitStrategyType = FitStrategy.NONE;\r\n\r\n    /**\r\n     * Contruct an instance of HtmlMesh\r\n     * @param scene\r\n     * @param id The id of the mesh.  Will be used as the id of the HTML element as well.\r\n     * @param options object with optional parameters\r\n     */\r\n    constructor(scene: Scene, id: string, { captureOnPointerEnter = true, isCanvasOverlay = false, fitStrategy = FitStrategy.NONE } = {}) {\r\n        super(id, scene);\r\n\r\n        // Requires a browser to work.  Bail if we aren't running in a browser\r\n        if (typeof document === \"undefined\") {\r\n            Logger.Warn(`Creating an instance of an HtmlMesh with id ${id} outside of a browser.  The mesh will not be visible.`);\r\n            return;\r\n        }\r\n\r\n        this._fitStrategy = fitStrategy;\r\n        this._isCanvasOverlay = isCanvasOverlay;\r\n        this._createMask();\r\n        this._element = this._createElement();\r\n\r\n        // Set enabled by default, so this will show as soon as it's ready\r\n        this.setEnabled(true);\r\n\r\n        this._captureOnPointerEnter = captureOnPointerEnter;\r\n\r\n        // Create a behavior to capture pointer events\r\n        this._pointerEventCaptureBehavior = new PointerEventsCaptureBehavior(this.capturePointerEvents.bind(this), this.releasePointerEvents.bind(this), {\r\n            captureOnPointerEnter: this._captureOnPointerEnter,\r\n        });\r\n        this.addBehavior(this._pointerEventCaptureBehavior);\r\n    }\r\n\r\n    /**\r\n     * The width of the content in pixels\r\n     */\r\n    public get width() {\r\n        return this._width;\r\n    }\r\n\r\n    /**\r\n     * The height of the content in pixels\r\n     */\r\n    public get height() {\r\n        return this._height;\r\n    }\r\n\r\n    /**\r\n     * The HTML element that is being rendered as a mesh\r\n     */\r\n    public get element() {\r\n        return this._element;\r\n    }\r\n\r\n    /**\r\n     * True if the mesh has been moved, rotated, or scaled since the last time this\r\n     * property was read.  This property is reset to false after reading.\r\n     */\r\n    public get requiresUpdate() {\r\n        return this._requiresUpdate;\r\n    }\r\n\r\n    /**\r\n     * Enable capture for the pointer when entering the mesh area\r\n     */\r\n    public set captureOnPointerEnter(captureOnPointerEnter: boolean) {\r\n        this._captureOnPointerEnter = captureOnPointerEnter;\r\n        if (this._pointerEventCaptureBehavior) {\r\n            this._pointerEventCaptureBehavior.captureOnPointerEnter = captureOnPointerEnter;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Disposes of the mesh and the HTML element\r\n     */\r\n    public override dispose() {\r\n        super.dispose();\r\n        this._element?.remove();\r\n        this._element = undefined;\r\n        if (this._pointerEventCaptureBehavior) {\r\n            this._pointerEventCaptureBehavior.dispose();\r\n            this._pointerEventCaptureBehavior = null;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public _markAsUpdated() {\r\n        this._requiresUpdate = false;\r\n    }\r\n\r\n    /**\r\n     * Sets the content of the element to the specified content adjusting the mesh scale to match and making it visible.\r\n     * If the the specified content is undefined, then it will make the mesh invisible.  In either case it will clear the\r\n     * element content first.\r\n     * @param element The element to render as a mesh\r\n     * @param width The width of the mesh in Babylon units\r\n     * @param height The height of the mesh in Babylon units\r\n     */\r\n    setContent(element: HTMLElement, width: number, height: number) {\r\n        // If content is changed, we are no longer ready\r\n        this._setAsReady(false);\r\n\r\n        // Also invalidate the source width and height\r\n        this._sourceWidth = null;\r\n        this._sourceHeight = null;\r\n\r\n        if (!this._element) {\r\n            return;\r\n        }\r\n\r\n        this._width = width;\r\n        this._height = height;\r\n        this._requiresUpdate = true;\r\n\r\n        this.scaling.setAll(1);\r\n\r\n        if (element) {\r\n            this._element!.appendChild(this._fitStrategy.wrapElement(element));\r\n\r\n            this._updateScaleIfNecessary();\r\n        }\r\n\r\n        if (this.sourceWidth && this.sourceHeight) {\r\n            this._setAsReady(true);\r\n        }\r\n    }\r\n\r\n    // Overides BABYLON.Mesh.setEnabled\r\n    public override setEnabled(enabled: boolean) {\r\n        // Capture requested enabled state\r\n        this._enabled = enabled;\r\n\r\n        // If disabling or enabling and we are ready\r\n        if (!enabled || this._ready) {\r\n            this._doSetEnabled(enabled);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Sets the content size in pixels\r\n     * @param width width of the source\r\n     * @param height height of the source\r\n     */\r\n    public setContentSizePx(width: number, height: number) {\r\n        this._sourceWidth = width;\r\n        this._sourceHeight = height;\r\n\r\n        if (!this._element || !this._element.firstElementChild) {\r\n            return;\r\n        }\r\n\r\n        this._fitStrategy.updateSize(this._element.firstElementChild! as HTMLElement, width, height);\r\n\r\n        this._updateScaleIfNecessary();\r\n\r\n        if (this.width && this.height) {\r\n            this._setAsReady(true);\r\n        }\r\n    }\r\n\r\n    protected _setAsReady(ready: boolean) {\r\n        this._ready = ready;\r\n        if (ready) {\r\n            this._doSetEnabled(this._enabled);\r\n        } else {\r\n            this._doSetEnabled(false);\r\n        }\r\n    }\r\n\r\n    protected _doSetEnabled(enabled: boolean) {\r\n        if (!this._element) {\r\n            return;\r\n        }\r\n\r\n        //if enabled, then start listening for changes to the\r\n        // scaling, rotation, and position.  otherwise stop listening\r\n        if (enabled && !this._worldMatrixUpdateObserver) {\r\n            this._worldMatrixUpdateObserver = this.onAfterWorldMatrixUpdateObservable.add(() => {\r\n                this._requiresUpdate = true;\r\n            });\r\n        } else if (!enabled) {\r\n            this._worldMatrixUpdateObserver?.remove();\r\n            this._worldMatrixUpdateObserver = null;\r\n        }\r\n\r\n        // If enabled, then revert the content element display\r\n        // otherwise hide it\r\n        this._element!.style.display = enabled ? \"\" : \"none\";\r\n        // Capture the content z index\r\n        this._setElementZIndex(this.position.z * -10000);\r\n        super.setEnabled(enabled);\r\n    }\r\n\r\n    protected _updateScaleIfNecessary() {\r\n        // If we have setContent before, the content scale is baked into the mesh.  If we don't reset the vertices to\r\n        // the original size, then we will multiply the scale when we bake the scale below.  By applying the inverse, we back out\r\n        // the scaling that has been done so we are starting from the same point.\r\n        // First reset the scale to 1\r\n        this.scaling.setAll(1);\r\n        // Then back out the original vertices changes to match the content scale\r\n        if (this._inverseScaleMatrix) {\r\n            this.bakeTransformIntoVertices(this._inverseScaleMatrix);\r\n            // Clear out the matrix so it doesn't get applied again unless we scale\r\n            this._inverseScaleMatrix = null;\r\n        }\r\n\r\n        // Set scale to match content.  Note we can't just scale the mesh, because that will scale the content as well\r\n        // What we need to do is compute a scale matrix and then bake that into the mesh vertices.  This will leave the\r\n        // mesh scale at 1, so our content will stay it's original width and height until we scale the mesh.\r\n        const scaleX = this._width || 1;\r\n        const scaleY = this._height || 1;\r\n        const scaleMatrix = Matrix.Scaling(scaleX, scaleY, 1);\r\n        this.bakeTransformIntoVertices(scaleMatrix);\r\n\r\n        // Get an inverse of the scale matrix that we can use to back out the scale changes we have made so\r\n        // we don't multiply the scale.\r\n        this._inverseScaleMatrix = new Matrix();\r\n        scaleMatrix.invertToRef(this._inverseScaleMatrix);\r\n    }\r\n\r\n    protected _createMask() {\r\n        const vertexData = CreatePlaneVertexData({ width: 1, height: 1 });\r\n        vertexData.applyToMesh(this);\r\n\r\n        const scene = this.getScene();\r\n        this.checkCollisions = true;\r\n\r\n        const depthMask = new StandardMaterial(`${this.id}-mat`, scene);\r\n        if (!this._isCanvasOverlay) {\r\n            depthMask.backFaceCulling = false;\r\n            depthMask.disableColorWrite = true;\r\n            depthMask.disableLighting = true;\r\n        }\r\n\r\n        this.material = depthMask;\r\n\r\n        // Optimization - Freeze material since it never needs to change\r\n        this.material.freeze();\r\n    }\r\n\r\n    protected _setElementZIndex(zIndex: number) {\r\n        if (this._element) {\r\n            this._element!.style.zIndex = `${zIndex}`;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Callback used by the PointerEventsCaptureBehavior to capture pointer events\r\n     */\r\n    capturePointerEvents() {\r\n        if (!this._element) {\r\n            return;\r\n        }\r\n\r\n        // Enable dom content to capture pointer events\r\n        this._element.style.pointerEvents = \"auto\";\r\n\r\n        // Supress events outside of the dom content\r\n        document.getElementsByTagName(\"body\")[0].style.pointerEvents = \"none\";\r\n    }\r\n\r\n    /**\r\n     * Callback used by the PointerEventsCaptureBehavior to release pointer events\r\n     */\r\n    releasePointerEvents() {\r\n        if (!this._element) {\r\n            return;\r\n        }\r\n\r\n        // Enable pointer events on canvas\r\n        document.getElementsByTagName(\"body\")[0].style.pointerEvents = \"auto\";\r\n\r\n        // Disable pointer events on dom content\r\n        this._element.style.pointerEvents = \"none\";\r\n    }\r\n\r\n    protected _createElement() {\r\n        // Requires a browser to work.  Bail if we aren't running in a browser\r\n        if (typeof document === \"undefined\") {\r\n            return;\r\n        }\r\n        const div = document.createElement(\"div\");\r\n        div.id = this.id;\r\n        div.style.backgroundColor = this._isCanvasOverlay ? \"transparent\" : \"#000\";\r\n        div.style.zIndex = \"1\";\r\n        div.style.position = \"absolute\";\r\n        div.style.pointerEvents = \"none\";\r\n        div.style.backfaceVisibility = \"hidden\";\r\n\r\n        return div;\r\n    }\r\n}\r\n"]}

package/htmlMesh/htmlMeshRenderer.d.ts

@@ -0,0 +1,72 @@
+import type { Scene } from "@babylonjs/core/scene.js";
+import { Matrix } from "@babylonjs/core/Maths/math.js";
+import type { HtmlMesh } from "./htmlMesh";
+import { Camera } from "@babylonjs/core/Cameras/camera.js";
+import type { SubMesh } from "@babylonjs/core/Meshes/subMesh.js";
+/**
+ * A function that compares two submeshes and returns a number indicating which
+ * should be rendered first.
+ */
+type RenderOrderFunction = (subMeshA: SubMesh, subMeshB: SubMesh) => number;
+/**
+ * An instance of this is required to render HtmlMeshes in the scene.
+ * if using HtmlMeshes, you must not set render order for group 0 using
+ * scene.setRenderingOrder.  You must instead pass the compare functions
+ * to the HtmlMeshRenderer constructor.  If you do not, then your render
+ * order will be overwritten if the HtmlMeshRenderer is created after and
+ * the HtmlMeshes will not render correctly (they will appear in front of
+ * meshes that are actually in front of them) if the HtmlMeshRenderer is
+ * created before.
+ */
+export declare class HtmlMeshRenderer {
+    private _containerId?;
+    private _inSceneElements?;
+    private _overlayElements?;
+    private _engine;
+    private _cache;
+    private _width;
+    private _height;
+    private _heightHalf;
+    private _cameraWorldMatrix?;
+    private _temp;
+    private _lastDevicePixelRatio;
+    private _cameraMatrixUpdated;
+    private _previousCanvasDocumentPosition;
+    private _renderObserver;
+    /**
+     * Contruct an instance of HtmlMeshRenderer
+     * @param scene
+     * @param options object containing the following optional properties:
+     * @returns
+     */
+    constructor(scene: Scene, { parentContainerId, _containerId, enableOverlayRender, defaultOpaqueRenderOrder, defaultAlphaTestRenderOrder, defaultTransparentRenderOrder, }?: {
+        parentContainerId?: string | null;
+        _containerId?: string;
+        defaultOpaqueRenderOrder?: RenderOrderFunction;
+        defaultAlphaTestRenderOrder?: RenderOrderFunction;
+        defaultTransparentRenderOrder?: RenderOrderFunction;
+        enableOverlayRender?: boolean;
+    });
+    /**
+     * Dispose of the HtmlMeshRenderer
+     */
+    dispose(): void;
+    protected _init(scene: Scene, parentContainerId: string | null, enableOverlayRender: boolean, defaultOpaqueRenderOrder: RenderOrderFunction, defaultAlphaTestRenderOrder: RenderOrderFunction, defaultTransparentRenderOrder: RenderOrderFunction): void;
+    private _createRenderLayerElements;
+    protected _getSize(): {
+        width: number;
+        height: number;
+    };
+    protected _setSize(width: number, height: number): void;
+    protected _getCameraCSSMatrix(matrix: Matrix): string;
+    protected _getHtmlContentCSSMatrix(matrix: Matrix, useRightHandedSystem: boolean): string;
+    protected _getTransformationMatrix(htmlMesh: HtmlMesh, useRightHandedSystem: boolean): Matrix;
+    protected _renderHtmlMesh(htmlMesh: HtmlMesh, useRightHandedSystem: boolean): void;
+    protected _render(scene: Scene, camera: Camera): void;
+    protected _updateBaseScaleFactor(htmlMesh: HtmlMesh): void;
+    protected _updateContainerPositionIfNeeded(): void;
+    protected _onCameraMatrixChanged: (camera: Camera) => void;
+    private _epsilon;
+    private _getAncestorMarginsAndPadding;
+}
+export {};