123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432 |
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
- var BABYLON;
- (function (BABYLON) {
- var GUI;
- (function (GUI) {
- var Control = (function () {
- // Functions
- function Control(name) {
- this.name = name;
- this._zIndex = 0;
- this._currentMeasure = GUI.Measure.Empty();
- this._fontSize = 18;
- this._width = 1;
- this._height = 1;
- this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
- this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
- this._isDirty = true;
- this._cachedParentMeasure = GUI.Measure.Empty();
- this._marginLeft = 0;
- this._marginRight = 0;
- this._marginTop = 0;
- this._marginBottom = 0;
- this._unitMode = Control.UNITMODE_PERCENTAGE;
- this.fontFamily = "Arial";
- }
- Object.defineProperty(Control.prototype, "unitMode", {
- // Properties
- get: function () {
- return this._unitMode;
- },
- set: function (value) {
- if (this._unitMode === value) {
- return;
- }
- this._unitMode = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "horizontalAlignment", {
- get: function () {
- return this._horizontalAlignment;
- },
- set: function (value) {
- if (this._horizontalAlignment === value) {
- return;
- }
- this._horizontalAlignment = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "verticalAlignment", {
- get: function () {
- return this._verticalAlignment;
- },
- set: function (value) {
- if (this._verticalAlignment === value) {
- return;
- }
- this._verticalAlignment = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "width", {
- get: function () {
- return this._width;
- },
- set: function (value) {
- if (value < 0) {
- value = 0;
- }
- if (this._width === value) {
- return;
- }
- this._width = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "height", {
- get: function () {
- return this._height;
- },
- set: function (value) {
- if (value < 0) {
- value = 0;
- }
- if (this._height === value) {
- return;
- }
- this._height = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "fontFamily", {
- get: function () {
- return this._fontFamily;
- },
- set: function (value) {
- if (this._fontFamily === value) {
- return;
- }
- this._fontFamily = value;
- this._prepareFont();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "fontSize", {
- get: function () {
- return this._fontSize;
- },
- set: function (value) {
- if (this._fontSize === value) {
- return;
- }
- this._fontSize = value;
- this._prepareFont();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "color", {
- get: function () {
- return this._color;
- },
- set: function (value) {
- if (this._color === value) {
- return;
- }
- this._color = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "zIndex", {
- get: function () {
- return this._zIndex;
- },
- set: function (value) {
- if (this.zIndex === value) {
- return;
- }
- this._zIndex = value;
- this._root._reOrderControl(this);
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "isDirty", {
- get: function () {
- return this._isDirty;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "marginLeft", {
- get: function () {
- return this._marginLeft;
- },
- set: function (value) {
- if (this._marginLeft === value) {
- return;
- }
- this._marginLeft = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "marginRight", {
- get: function () {
- return this._marginRight;
- },
- set: function (value) {
- if (this._marginRight === value) {
- return;
- }
- this._marginRight = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "marginTop", {
- get: function () {
- return this._marginTop;
- },
- set: function (value) {
- if (this._marginTop === value) {
- return;
- }
- this._marginTop = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control.prototype, "marginBottom", {
- get: function () {
- return this._marginBottom;
- },
- set: function (value) {
- if (this._marginBottom === value) {
- return;
- }
- this._marginBottom = value;
- this._markAsDirty();
- },
- enumerable: true,
- configurable: true
- });
- Control.prototype._markAsDirty = function () {
- this._isDirty = true;
- if (!this._root) {
- return; // Not yet connected
- }
- this._root._markAsDirty();
- };
- Control.prototype._link = function (root, host) {
- this._root = root;
- this._host = host;
- };
- Control.prototype.applyStates = function (context) {
- if (this._font) {
- context.font = this._font;
- }
- if (this._color) {
- context.fillStyle = this._color;
- }
- };
- Control.prototype._processMeasures = function (parentMeasure, context) {
- if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
- this._currentMeasure.copyFrom(parentMeasure);
- this._measure(parentMeasure, context);
- this._computeAlignment(parentMeasure, context);
- this._additionalProcessing(parentMeasure, context);
- }
- // Clip
- context.beginPath();
- context.rect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
- context.clip();
- this._isDirty = false;
- this._cachedParentMeasure.copyFrom(parentMeasure);
- };
- Control.prototype._measure = function (parentMeasure, context) {
- // Width / Height
- if (this._unitMode === Control.UNITMODE_PIXEL) {
- this._currentMeasure.width = this._width;
- }
- else {
- this._currentMeasure.width *= this._width;
- }
- if (this._unitMode === Control.UNITMODE_PIXEL) {
- this._currentMeasure.height = this._height;
- }
- else {
- this._currentMeasure.height *= this._height;
- }
- };
- Control.prototype._computeAlignment = function (parentMeasure, context) {
- var width = this._currentMeasure.width;
- var height = this._currentMeasure.height;
- var parentWidth = parentMeasure.width;
- var parentHeight = parentMeasure.height;
- // Left / top
- var x = 0;
- var y = 0;
- switch (this.horizontalAlignment) {
- case Control.HORIZONTAL_ALIGNMENT_LEFT:
- x = 0;
- break;
- case Control.HORIZONTAL_ALIGNMENT_RIGHT:
- x = parentWidth - width;
- break;
- case Control.HORIZONTAL_ALIGNMENT_CENTER:
- x = (parentWidth - width) / 2;
- break;
- }
- switch (this.verticalAlignment) {
- case Control.VERTICAL_ALIGNMENT_TOP:
- y = 0;
- break;
- case Control.VERTICAL_ALIGNMENT_BOTTOM:
- y = parentHeight - height;
- break;
- case Control.VERTICAL_ALIGNMENT_CENTER:
- y = (parentHeight - height) / 2;
- break;
- }
- if (this._unitMode === Control.UNITMODE_PIXEL) {
- this._currentMeasure.left += this._marginLeft;
- this._currentMeasure.left -= this._marginRight;
- this._currentMeasure.top += this._marginTop;
- this._currentMeasure.top -= this._marginBottom;
- }
- else {
- this._currentMeasure.left += parentWidth * this._marginLeft;
- this._currentMeasure.left -= parentWidth * this._marginRight;
- this._currentMeasure.top += parentHeight * this._marginTop;
- this._currentMeasure.top -= parentHeight * this._marginBottom;
- }
- this._currentMeasure.left += x;
- this._currentMeasure.top += y;
- };
- Control.prototype._additionalProcessing = function (parentMeasure, context) {
- // Do nothing
- };
- Control.prototype._draw = function (parentMeasure, context) {
- // Do nothing
- };
- Control.prototype._prepareFont = function () {
- if (!this._fontFamily) {
- return;
- }
- this._font = this._fontSize + "px " + this._fontFamily;
- this._fontOffset = Control._GetFontOffset(this._font);
- this._markAsDirty();
- };
- Object.defineProperty(Control, "UNITMODE_PERCENTAGE", {
- get: function () {
- return Control._UNITMODE_PERCENTAGE;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control, "UNITMODE_PIXEL", {
- get: function () {
- return Control._UNITMODE_PIXEL;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
- get: function () {
- return Control._HORIZONTAL_ALIGNMENT_LEFT;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
- get: function () {
- return Control._HORIZONTAL_ALIGNMENT_RIGHT;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
- get: function () {
- return Control._HORIZONTAL_ALIGNMENT_CENTER;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
- get: function () {
- return Control._VERTICAL_ALIGNMENT_TOP;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
- get: function () {
- return Control._VERTICAL_ALIGNMENT_BOTTOM;
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
- get: function () {
- return Control._VERTICAL_ALIGNMENT_CENTER;
- },
- enumerable: true,
- configurable: true
- });
- Control._GetFontOffset = function (font) {
- if (Control._FontHeightSizes[font]) {
- return Control._FontHeightSizes[font];
- }
- var text = document.createElement("span");
- text.innerHTML = "Hg";
- text.style.font = font;
- var block = document.createElement("div");
- block.style.display = "inline-block";
- block.style.width = "1px";
- block.style.height = "0px";
- block.style.verticalAlign = "bottom";
- var div = document.createElement("div");
- div.appendChild(text);
- div.appendChild(block);
- document.body.appendChild(div);
- var fontAscent = 0;
- var fontHeight = 0;
- try {
- fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
- block.style.verticalAlign = "baseline";
- fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
- }
- finally {
- div.remove();
- }
- var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
- Control._FontHeightSizes[font] = result;
- return result;
- };
- ;
- return Control;
- }());
- // Statics
- Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
- Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
- Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
- Control._VERTICAL_ALIGNMENT_TOP = 0;
- Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
- Control._VERTICAL_ALIGNMENT_CENTER = 2;
- Control._UNITMODE_PERCENTAGE = 0;
- Control._UNITMODE_PIXEL = 1;
- Control._FontHeightSizes = {};
- GUI.Control = Control;
- })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
- })(BABYLON || (BABYLON = {}));
- //# sourceMappingURL=control.js.map
|