@babylonjs/addons 7.53.2 → 7.54.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,8 +8,8 @@ import type { FitStrategyType } from "./fitStrategy";
8
8
  * the HTML content so that it matches the camera and mesh orientation. The class supports interactions in editable and non-editable mode.
9
9
  * 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
10
10
  * in the scene).
11
- * #HVHYJC#5
12
- * #B17TC7#112
11
+ * @see https://playground.babylonjs.com/#HVHYJC#5
12
+ * @see https://playground.babylonjs.com/#B17TC7#112
13
13
  */
14
14
  export declare class HtmlMesh extends Mesh {
15
15
  /**
@@ -12,8 +12,8 @@ import { FitStrategy } from "./fitStrategy.js";
12
12
  * the HTML content so that it matches the camera and mesh orientation. The class supports interactions in editable and non-editable mode.
13
13
  * 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
14
14
  * in the scene).
15
- * #HVHYJC#5
16
- * #B17TC7#112
15
+ * @see https://playground.babylonjs.com/#HVHYJC#5
16
+ * @see https://playground.babylonjs.com/#B17TC7#112
17
17
  */
18
18
  export class HtmlMesh extends Mesh {
19
19
  /**
@@ -1 +1 @@
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"]}
1
+ {"version":3,"file":"htmlMesh.js","sourceRoot":"","sources":["../../../../dev/addons/src/htmlMesh/htmlMesh.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uCAAyB;AACxC,OAAO,EAAE,qBAAqB,EAAE,wDAA0C;AAC1E,OAAO,EAAE,gBAAgB,EAAE,sDAAwC;AACnE,OAAO,EAAE,MAAM,EAAE,sCAAwB;AACzC,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,uCAAyB;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAC9B;;OAEG;IACH,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC;IAChB,CAAC;IA6BD;;OAEG;IACH,IAAW,WAAW;QAClB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC9B,CAAC;IAMD;;;;;OAKG;IACH,YAAY,KAAY,EAAE,EAAU,EAAE,EAAE,qBAAqB,GAAG,IAAI,EAAE,eAAe,GAAG,KAAK,EAAE,WAAW,GAAG,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE;QAChI,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QApDrB,iFAAiF;QACjF,sFAAsF;QAC9E,aAAQ,GAAG,KAAK,CAAC;QAEzB,gFAAgF;QAChF,sEAAsE;QAC9D,WAAM,GAAG,KAAK,CAAC;QAEvB;;WAEG;QACI,qBAAgB,GAAG,KAAK,CAAC;QAExB,oBAAe,GAAG,IAAI,CAAC;QAMvB,wBAAmB,GAAkB,IAAI,CAAC;QAE1C,2BAAsB,GAAY,IAAI,CAAC;QACvC,iCAA4B,GAAwC,IAAI,CAAC;QAEzE,iBAAY,GAAkB,IAAI,CAAC;QACnC,kBAAa,GAAkB,IAAI,CAAC;QAkBpC,iBAAY,GAAoB,WAAW,CAAC,IAAI,CAAC;QAWrD,sEAAsE;QACtE,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,CAAC,IAAI,CAAC,+CAA+C,EAAE,uDAAuD,CAAC,CAAC;YACtH,OAAO;QACX,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;QAChC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtC,kEAAkE;QAClE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAEtB,IAAI,CAAC,sBAAsB,GAAG,qBAAqB,CAAC;QAEpD,8CAA8C;QAC9C,IAAI,CAAC,4BAA4B,GAAG,IAAI,4BAA4B,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAC7I,qBAAqB,EAAE,IAAI,CAAC,sBAAsB;SACrD,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;IACxD,CAAC;IAED;;OAEG;IACH,IAAW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAED;;OAEG;IACH,IAAW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED;;OAEG;IACH,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED;;OAEG;IACH,IAAW,qBAAqB,CAAC,qBAA8B;QAC3D,IAAI,CAAC,sBAAsB,GAAG,qBAAqB,CAAC;QACpD,IAAI,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,4BAA4B,CAAC,qBAAqB,GAAG,qBAAqB,CAAC;QACpF,CAAC;IACL,CAAC;IAED;;OAEG;IACa,OAAO;QACnB,KAAK,CAAC,OAAO,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC;QACxB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,4BAA4B,CAAC,OAAO,EAAE,CAAC;YAC5C,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC;QAC7C,CAAC;IACL,CAAC;IAED;;OAEG;IACI,cAAc;QACjB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC;IAED;;;;;;;OAOG;IACH,UAAU,CAAC,OAAoB,EAAE,KAAa,EAAE,MAAc;QAC1D,gDAAgD;QAChD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAExB,8CAA8C;QAC9C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAE5B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAEvB,IAAI,OAAO,EAAE,CAAC;YACV,IAAI,CAAC,QAAS,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;YAEnE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC;IAED,mCAAmC;IACnB,UAAU,CAAC,OAAgB;QACvC,kCAAkC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QAExB,4CAA4C;QAC5C,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACI,gBAAgB,CAAC,KAAa,EAAE,MAAc;QACjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAE5B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC;YACrD,OAAO;QACX,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAE7F,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC;IAES,WAAW,CAAC,KAAc;QAChC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,KAAK,EAAE,CAAC;YACR,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACL,CAAC;IAES,aAAa,CAAC,OAAgB;QACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjB,OAAO;QACX,CAAC;QAED,qDAAqD;QACrD,6DAA6D;QAC7D,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAC9C,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,kCAAkC,CAAC,GAAG,CAAC,GAAG,EAAE;gBAC/E,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAChC,CAAC,CAAC,CAAC;QACP,CAAC;aAAM,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,0BAA0B,EAAE,MAAM,EAAE,CAAC;YAC1C,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;QAC3C,CAAC;QAED,sDAAsD;QACtD,oBAAoB;QACpB,IAAI,CAAC,QAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QACrD,8BAA8B;QAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACjD,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAES,uBAAuB;QAC7B,6GAA6G;QAC7G,yHAAyH;QACzH,yEAAyE;QACzE,6BAA6B;QAC7B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACvB,yEAAyE;QACzE,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;YACzD,uEAAuE;YACvE,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QACpC,CAAC;QAED,8GAA8G;QAC9G,+GAA+G;QAC/G,oGAAoG;QACpG,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;QACjC,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QACtD,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC;QAE5C,mGAAmG;QACnG,+BAA+B;QAC/B,IAAI,CAAC,mBAAmB,GAAG,IAAI,MAAM,EAAE,CAAC;QACxC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACtD,CAAC;IAES,WAAW;QACjB,MAAM,UAAU,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;QAClE,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAE7B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAE5B,MAAM,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAChE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACzB,SAAS,CAAC,eAAe,GAAG,KAAK,CAAC;YAClC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC;YACnC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAE1B,gEAAgE;QAChE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC3B,CAAC;IAES,iBAAiB,CAAC,MAAc;QACtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,QAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;QAC9C,CAAC;IACL,CAAC;IAED;;OAEG;IACH,oBAAoB;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjB,OAAO;QACX,CAAC;QAED,+CAA+C;QAC/C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;QAE3C,4CAA4C;QAC5C,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;IAC1E,CAAC;IAED;;OAEG;IACH,oBAAoB;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjB,OAAO;QACX,CAAC;QAED,kCAAkC;QAClC,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;QAEtE,wCAAwC;QACxC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;IAC/C,CAAC;IAES,cAAc;QACpB,sEAAsE;QACtE,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO;QACX,CAAC;QACD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACjB,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;QAC3E,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;QACvB,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAChC,GAAG,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;QACjC,GAAG,CAAC,KAAK,CAAC,kBAAkB,GAAG,QAAQ,CAAC;QAExC,OAAO,GAAG,CAAC;IACf,CAAC;CACJ","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 * @see https://playground.babylonjs.com/#HVHYJC#5\r\n * @see https://playground.babylonjs.com/#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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@babylonjs/addons",
3
- "version": "7.53.2",
3
+ "version": "7.54.0",
4
4
  "main": "index.js",
5
5
  "module": "index.js",
6
6
  "types": "index.d.ts",
@@ -18,7 +18,7 @@
18
18
  "postcompile": "build-tools -c add-js-to-es6"
19
19
  },
20
20
  "devDependencies": {
21
- "@babylonjs/core": "^7.53.2",
21
+ "@babylonjs/core": "^7.54.0",
22
22
  "@dev/addons": "^1.0.0",
23
23
  "@dev/build-tools": "^1.0.0"
24
24
  },