@babylonjs/gui 8.34.0 → 8.34.1

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.
Files changed (30) hide show
  1. package/2D/controls/checkbox.js +2 -2
  2. package/2D/controls/checkbox.js.map +1 -1
  3. package/2D/controls/colorpicker.js +2 -2
  4. package/2D/controls/colorpicker.js.map +1 -1
  5. package/2D/controls/container.js +2 -2
  6. package/2D/controls/container.js.map +1 -1
  7. package/2D/controls/control.d.ts +2 -2
  8. package/2D/controls/control.js +6 -6
  9. package/2D/controls/control.js.map +1 -1
  10. package/2D/controls/ellipse.js +2 -2
  11. package/2D/controls/ellipse.js.map +1 -1
  12. package/2D/controls/image.js +2 -2
  13. package/2D/controls/image.js.map +1 -1
  14. package/2D/controls/inputText.js +2 -2
  15. package/2D/controls/inputText.js.map +1 -1
  16. package/2D/controls/inputTextArea.js +4 -4
  17. package/2D/controls/inputTextArea.js.map +1 -1
  18. package/2D/controls/line.js +2 -2
  19. package/2D/controls/line.js.map +1 -1
  20. package/2D/controls/multiLine.js +2 -2
  21. package/2D/controls/multiLine.js.map +1 -1
  22. package/2D/controls/radioButton.js +2 -2
  23. package/2D/controls/radioButton.js.map +1 -1
  24. package/2D/controls/rectangle.js +2 -2
  25. package/2D/controls/rectangle.js.map +1 -1
  26. package/2D/controls/sliders/slider.js +4 -4
  27. package/2D/controls/sliders/slider.js.map +1 -1
  28. package/2D/controls/textBlock.js +3 -2
  29. package/2D/controls/textBlock.js.map +1 -1
  30. package/package.json +2 -2
package/2D/controls/checkbox.js CHANGED
@@ -86,8 +86,8 @@ export class Checkbox extends Control {
86
86
  if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
87
87
  context.shadowColor = this.shadowColor;
88
88
  context.shadowBlur = this.shadowBlur;
89
- context.shadowOffsetX = this.shadowOffsetX;
90
- context.shadowOffsetY = this.shadowOffsetY;
89
+ context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
90
+ context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
91
91
  }
92
92
  context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
93
93
  context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
package/2D/controls/checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { Observable } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\n\r\nimport { Control } from \"./control\";\r\nimport { StackPanel } from \"./stackPanel\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport type { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Class used to represent a 2D checkbox\r\n */\r\nexport class Checkbox extends Control {\r\n private _isChecked = false;\r\n private _background = \"black\";\r\n private _checkSizeRatio = 0.8;\r\n private _thickness = 1;\r\n\r\n /** Gets or sets border thickness */\r\n @serialize()\r\n public get thickness(): number {\r\n return this._thickness;\r\n }\r\n\r\n public set thickness(value: number) {\r\n if (this._thickness === value) {\r\n return;\r\n }\r\n\r\n this._thickness = value;\r\n this._markAsDirty();\r\n }\r\n\r\n /**\r\n * Observable raised when isChecked property changes\r\n */\r\n public onIsCheckedChangedObservable = new Observable<boolean>();\r\n\r\n /** Gets or sets a value indicating the ratio between overall size and check size */\r\n @serialize()\r\n public get checkSizeRatio(): number {\r\n return this._checkSizeRatio;\r\n }\r\n\r\n public set checkSizeRatio(value: number) {\r\n value = Math.max(Math.min(1, value), 0);\r\n\r\n if (this._checkSizeRatio === value) {\r\n return;\r\n }\r\n\r\n this._checkSizeRatio = value;\r\n this._markAsDirty();\r\n }\r\n\r\n /** Gets or sets background color */\r\n @serialize()\r\n public get background(): string {\r\n return this._background;\r\n }\r\n\r\n public set background(value: string) {\r\n if (this._background === value) {\r\n return;\r\n }\r\n\r\n this._background = value;\r\n this._markAsDirty();\r\n }\r\n\r\n /** Gets or sets a boolean indicating if the checkbox is checked or not */\r\n @serialize()\r\n public get isChecked(): boolean {\r\n return this._isChecked;\r\n }\r\n\r\n public set isChecked(value: boolean) {\r\n if (this._isChecked === value) {\r\n return;\r\n }\r\n\r\n this._isChecked = value;\r\n this._markAsDirty();\r\n\r\n this.onIsCheckedChangedObservable.notifyObservers(value);\r\n }\r\n\r\n /**\r\n * Creates a new CheckBox\r\n * @param name defines the control name\r\n */\r\n constructor(public override name?: string) {\r\n super(name);\r\n this.isPointerBlocker = true;\r\n }\r\n\r\n protected override _getTypeName(): string {\r\n return \"Checkbox\";\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n public override _draw(context: ICanvasRenderingContext): void {\r\n context.save();\r\n\r\n this._applyStates(context);\r\n const actualWidth = this._currentMeasure.width - this._thickness;\r\n const actualHeight = this._currentMeasure.height - this._thickness;\r\n\r\n if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n context.shadowColor = this.shadowColor;\r\n context.shadowBlur = this.shadowBlur;\r\n context.shadowOffsetX = this.shadowOffsetX;\r\n context.shadowOffsetY = this.shadowOffsetY;\r\n }\r\n\r\n context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n context.shadowBlur = 0;\r\n context.shadowOffsetX = 0;\r\n context.shadowOffsetY = 0;\r\n }\r\n\r\n if (this._isChecked) {\r\n // Color is white if not set\r\n context.fillStyle = this._isEnabled ? (this.color ? this.color : \"#ffffff\") : this._disabledColorItem;\r\n const offsetWidth = actualWidth * this._checkSizeRatio;\r\n const offsetHeight = actualHeight * this._checkSizeRatio;\r\n\r\n context.fillRect(\r\n this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2,\r\n this._currentMeasure.top + this._thickness / 2 + (actualHeight - offsetHeight) / 2,\r\n offsetWidth,\r\n offsetHeight\r\n );\r\n }\r\n\r\n context.strokeStyle = this.color;\r\n context.lineWidth = this._thickness;\r\n\r\n context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n context.restore();\r\n }\r\n\r\n // Events\r\n\r\n /**\r\n * @internal\r\n */\r\n public override _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n return false;\r\n }\r\n\r\n if (!this.isReadOnly) {\r\n this.isChecked = !this.isChecked;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n /**\r\n * Utility function to easily create a checkbox with a header\r\n * @param title defines the label to use for the header\r\n * @param onValueChanged defines the callback to call when value changes\r\n * @returns a StackPanel containing the checkbox and a textBlock\r\n */\r\n public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {\r\n const panel = new StackPanel();\r\n panel.isVertical = false;\r\n panel.height = \"30px\";\r\n\r\n const checkbox = new Checkbox();\r\n checkbox.width = \"20px\";\r\n checkbox.height = \"20px\";\r\n checkbox.isChecked = true;\r\n checkbox.color = \"green\";\r\n checkbox.onIsCheckedChangedObservable.add(onValueChanged);\r\n panel.addControl(checkbox);\r\n\r\n const header = new TextBlock();\r\n header.text = title;\r\n header.width = \"180px\";\r\n header.paddingLeft = \"5px\";\r\n header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n header.color = \"white\";\r\n panel.addControl(header);\r\n\r\n return panel;\r\n }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Checkbox\", Checkbox);\r\n"]}
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { Observable } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\n\r\nimport { Control } from \"./control\";\r\nimport { StackPanel } from \"./stackPanel\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport type { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Class used to represent a 2D checkbox\r\n */\r\nexport class Checkbox extends Control {\r\n private _isChecked = false;\r\n private _background = \"black\";\r\n private _checkSizeRatio = 0.8;\r\n private _thickness = 1;\r\n\r\n /** Gets or sets border thickness */\r\n @serialize()\r\n public get thickness(): number {\r\n return this._thickness;\r\n }\r\n\r\n public set thickness(value: number) {\r\n if (this._thickness === value) {\r\n return;\r\n }\r\n\r\n this._thickness = value;\r\n this._markAsDirty();\r\n }\r\n\r\n /**\r\n * Observable raised when isChecked property changes\r\n */\r\n public onIsCheckedChangedObservable = new Observable<boolean>();\r\n\r\n /** Gets or sets a value indicating the ratio between overall size and check size */\r\n @serialize()\r\n public get checkSizeRatio(): number {\r\n return this._checkSizeRatio;\r\n }\r\n\r\n public set checkSizeRatio(value: number) {\r\n value = Math.max(Math.min(1, value), 0);\r\n\r\n if (this._checkSizeRatio === value) {\r\n return;\r\n }\r\n\r\n this._checkSizeRatio = value;\r\n this._markAsDirty();\r\n }\r\n\r\n /** Gets or sets background color */\r\n @serialize()\r\n public get background(): string {\r\n return this._background;\r\n }\r\n\r\n public set background(value: string) {\r\n if (this._background === value) {\r\n return;\r\n }\r\n\r\n this._background = value;\r\n this._markAsDirty();\r\n }\r\n\r\n /** Gets or sets a boolean indicating if the checkbox is checked or not */\r\n @serialize()\r\n public get isChecked(): boolean {\r\n return this._isChecked;\r\n }\r\n\r\n public set isChecked(value: boolean) {\r\n if (this._isChecked === value) {\r\n return;\r\n }\r\n\r\n this._isChecked = value;\r\n this._markAsDirty();\r\n\r\n this.onIsCheckedChangedObservable.notifyObservers(value);\r\n }\r\n\r\n /**\r\n * Creates a new CheckBox\r\n * @param name defines the control name\r\n */\r\n constructor(public override name?: string) {\r\n super(name);\r\n this.isPointerBlocker = true;\r\n }\r\n\r\n protected override _getTypeName(): string {\r\n return \"Checkbox\";\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n public override _draw(context: ICanvasRenderingContext): void {\r\n context.save();\r\n\r\n this._applyStates(context);\r\n const actualWidth = this._currentMeasure.width - this._thickness;\r\n const actualHeight = this._currentMeasure.height - this._thickness;\r\n\r\n if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n context.shadowColor = this.shadowColor;\r\n context.shadowBlur = this.shadowBlur;\r\n context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;\r\n context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;\r\n }\r\n\r\n context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n context.shadowBlur = 0;\r\n context.shadowOffsetX = 0;\r\n context.shadowOffsetY = 0;\r\n }\r\n\r\n if (this._isChecked) {\r\n // Color is white if not set\r\n context.fillStyle = this._isEnabled ? (this.color ? this.color : \"#ffffff\") : this._disabledColorItem;\r\n const offsetWidth = actualWidth * this._checkSizeRatio;\r\n const offsetHeight = actualHeight * this._checkSizeRatio;\r\n\r\n context.fillRect(\r\n this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2,\r\n this._currentMeasure.top + this._thickness / 2 + (actualHeight - offsetHeight) / 2,\r\n offsetWidth,\r\n offsetHeight\r\n );\r\n }\r\n\r\n context.strokeStyle = this.color;\r\n context.lineWidth = this._thickness;\r\n\r\n context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n context.restore();\r\n }\r\n\r\n // Events\r\n\r\n /**\r\n * @internal\r\n */\r\n public override _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n return false;\r\n }\r\n\r\n if (!this.isReadOnly) {\r\n this.isChecked = !this.isChecked;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n /**\r\n * Utility function to easily create a checkbox with a header\r\n * @param title defines the label to use for the header\r\n * @param onValueChanged defines the callback to call when value changes\r\n * @returns a StackPanel containing the checkbox and a textBlock\r\n */\r\n public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {\r\n const panel = new StackPanel();\r\n panel.isVertical = false;\r\n panel.height = \"30px\";\r\n\r\n const checkbox = new Checkbox();\r\n checkbox.width = \"20px\";\r\n checkbox.height = \"20px\";\r\n checkbox.isChecked = true;\r\n checkbox.color = \"green\";\r\n checkbox.onIsCheckedChangedObservable.add(onValueChanged);\r\n panel.addControl(checkbox);\r\n\r\n const header = new TextBlock();\r\n header.text = title;\r\n header.width = \"180px\";\r\n header.paddingLeft = \"5px\";\r\n header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n header.color = \"white\";\r\n panel.addControl(header);\r\n\r\n return panel;\r\n }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Checkbox\", Checkbox);\r\n"]}
package/2D/controls/colorpicker.js CHANGED
@@ -245,8 +245,8 @@ export class ColorPicker extends Control {
245
245
  if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
246
246
  context.shadowColor = this.shadowColor;
247
247
  context.shadowBlur = this.shadowBlur;
248
- context.shadowOffsetX = this.shadowOffsetX;
249
- context.shadowOffsetY = this.shadowOffsetY;
248
+ context.shadowOffsetX = this.shadowOffsetX * this._host.idealRatio;
249
+ context.shadowOffsetY = this.shadowOffsetY * this._host.idealRatio;
250
250
  context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
251
251
  }
252
252
  context.drawImage(this._colorWheelCanvas, left, top);