refactor

Tools/Gulp/config.json

@@ -1622,7 +1622,7 @@
                     "../../gui/src/measure.ts",
                     "../../gui/src/math2D.ts",
                     "../../gui/src/valueAndUnit.ts",
-					"../../gui/src/tracker.ts",
+					"../../gui/src/segment.ts",
                     "../../gui/src/controls/control.ts",
                     "../../gui/src/controls/container.ts",
                     "../../gui/src/controls/stackPanel.ts",
@@ -1638,7 +1638,7 @@
                     "../../gui/src/controls/colorpicker.ts",
                     "../../gui/src/controls/inputText.ts",
                     "../../gui/src/controls/virtualKeyboard.ts",
-					"../../gui/src/controls/complexLine.ts"
+					"../../gui/src/controls/multiLine.ts"
                 ],
                 "output": "babylon.gui.js",
                 "buildAsModule": true,

gui/src/controls/complexLine.ts

@@ -1,294 +0,0 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON.GUI {
-
-    export class ComplexLine extends Control {
-
-        private _lineWidth: number = 1;
-        private _dash: number[];
-        private _trackers: Nullable<Tracker>[];
-
-        private _minX: Nullable<number>;
-        private _minY: Nullable<number>;
-        private _maxX: Nullable<number>;
-        private _maxY: Nullable<number>;
-
-        constructor(public name?: string) {
-            super(name);
-
-            this.isHitTestVisible = false;
-            this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-            this._verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-
-            this._dash = [];
-            this._trackers = [];
-        }
-
-        public get dash(): Array<number> {
-            return this._dash;
-        }
-
-        public set dash(value: Array<number>) {
-            if (this._dash === value) {
-                return;
-            }
-
-            this._dash = value;
-            this._markAsDirty();
-        }
-
-        getX(index: number): string | number  {
-            return this.getTracker(index).x.toString(this._host);
-        }
-
-        setX(index: number, value: string | number): void {
-            var point: Tracker = this.getTracker(index);
-
-            if (point.x.toString(this._host) === value) {
-                return;
-            }
-
-            if (point.x.fromString(value)) {
-                this._markAsDirty();
-            }
-        }
-
-        getY(index: number): string | number  {
-            return this.getTracker(index).y.toString(this._host);
-        }
-
-        setY(index: number, value: string | number): void {
-            var tracker: Tracker = this.getTracker(index);
-
-            if (tracker.y.toString(this._host) === value) {
-                return;
-            }
-
-            if (tracker.y.fromString(value)) {
-                this._markAsDirty();
-            }
-        }
-
-        getControl(index: number): Nullable<Control> {
-            return this.getTracker(index).control;
-        }
-
-        setControl(index: number, value: Nullable<Control> = null) {
-            var tracker: Tracker = this.getTracker(index);
-
-            if (tracker.control === value) {
-                return;
-            }
-
-            if (tracker.control) {
-                tracker.control.onDirtyObservable.removeCallback(this.onTrackerUpdate);
-            }
-
-            tracker.control = value;
-
-            if (tracker.control) {
-                tracker.control.onDirtyObservable.add(this.onTrackerUpdate);
-            }
-
-            this._markAsDirty();
-        }
-
-        getMesh(index: number): Nullable<BABYLON.AbstractMesh> {
-            return this.getTracker(index).mesh;
-        }
-
-        setMesh(index: number, value: Nullable<BABYLON.AbstractMesh> = null) {
-            var tracker: Tracker = this.getTracker(index);
-
-            if (tracker.mesh === value) {
-                return;
-            }
-
-            if (tracker.mesh) {
-                tracker.mesh.getScene().onAfterCameraRenderObservable.removeCallback(this.onTrackerUpdate);
-            }
-
-            tracker.mesh = value;
-
-            if (tracker.mesh) {
-                tracker.mesh.getScene().onAfterCameraRenderObservable.add(this.onTrackerUpdate);
-            }
-
-            this._markAsDirty();
-        }
-
-        private getTracker(index: number): Tracker {
-            if (!this._trackers[index]) {
-                this._trackers[index] = new Tracker();
-            }
-
-            return this._trackers[index] as Tracker;
-        }
-        
-        private updateTracker(value: Tracker): void {
-            if (value.mesh != null) {
-                var projection: BABYLON.Vector2 = this._host.getProjectedPosition(value.mesh.getBoundingInfo().boundingSphere.center, value.mesh.getWorldMatrix());
-
-                value._point.x = projection.x;
-                value._point.y = projection.y;
-            }
-            else if (value.control != null) {
-                value._point.x = value.control.centerX;
-                value._point.y = value.control.centerY;
-            }
-            else {
-                value._point.x = value.x.getValue(this._host);
-                value._point.y = value.y.getValue(this._host);
-            }
-        }
-
-        private onTrackerUpdate = (): void => {
-            this._markAsDirty();
-        }
-
-        track(items: (BABYLON.AbstractMesh | Control | BABYLON.Vector2)): void {
-            //TODO: implement
-        }
-
-        addTracker(): number {
-            this.getTracker(this._trackers.length);
-
-            return this._trackers.length - 1;
-        }
-
-        removeTracker(index: number): void {
-            var tracker: Nullable<Tracker> = this._trackers[index];
-
-            if (!tracker) {
-                return;
-            }
-
-            if (tracker.mesh) {
-                tracker.mesh.getScene().onAfterCameraRenderObservable.removeCallback(this.onTrackerUpdate);
-            }
-
-            if (tracker.control) {
-                tracker.control.onDirtyObservable.removeCallback(this.onTrackerUpdate);
-            }
-
-            this._trackers.splice(index, 1);
-        }
-        
-        public get lineWidth(): number {
-            return this._lineWidth;
-        }
-
-        public set lineWidth(value: number) {
-            if (this._lineWidth === value) {
-                return;
-            }
-
-            this._lineWidth = value;
-            this._markAsDirty();
-        }   
-
-        public set horizontalAlignment(value: number) {
-            return;
-        } 
-
-        public set verticalAlignment(value: number) {
-            return;
-        }
-
-        protected _getTypeName(): string {
-            return "ComplexLine";
-        }              
-
-        public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-            context.save();
-
-            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
-                context.shadowColor = this.shadowColor;
-                context.shadowBlur = this.shadowBlur;
-                context.shadowOffsetX = this.shadowOffsetX;
-                context.shadowOffsetY = this.shadowOffsetY;
-            }
-
-            this._applyStates(context);
-
-            if (this._processMeasures(parentMeasure, context)) {
-                context.strokeStyle = this.color;
-                context.lineWidth = this._lineWidth;
-                context.setLineDash(this._dash);
-
-                context.beginPath();
-
-                var first: boolean = true; //first index is not necessarily 0
-
-                this._trackers.forEach(tracker => {
-                    if (!tracker) {
-                        return;
-                    }
-
-                    if (first) {
-                        context.moveTo(tracker._point.x, tracker._point.y);
-
-                        first = false;
-                    }
-                    else {
-                        context.lineTo(tracker._point.x, tracker._point.y);
-                    }
-                });
-
-                context.stroke();
-            }
-
-            context.restore();
-        }
-
-        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-            this._minX = null;
-            this._minY = null;
-            this._maxX = null;
-            this._maxY = null;
-            
-            this._trackers.forEach((tracker, index) => {
-                if (!tracker) {
-                    return;
-                }
-
-                this.updateTracker(tracker);
-
-                if (this._minX == null || tracker._point.x < this._minX) this._minX = tracker._point.x;
-                if (this._minY == null || tracker._point.y < this._minY) this._minY = tracker._point.y;
-                if (this._maxX == null || tracker._point.x > this._maxX) this._maxX = tracker._point.x;
-                if (this._maxY == null || tracker._point.y > this._maxY) this._maxY = tracker._point.y;
-            });
-
-            if (this._minX == null) this._minX = 0;
-            if (this._minY == null) this._minY = 0;
-            if (this._maxX == null) this._maxX = 0;
-            if (this._maxY == null) this._maxY = 0;
-        }
-
-        public _measure(): void {
-            if (this._minX == null || this._maxX == null || this._minY == null || this._maxY == null) {
-                return;
-            }
-
-            this._currentMeasure.width = Math.abs(this._maxX - this._minX) + this._lineWidth;
-            this._currentMeasure.height = Math.abs(this._maxY - this._minY) + this._lineWidth;
-        }
-
-        protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-            if (this._minX == null || this._minY == null) {
-                return;
-            }
-
-            this._currentMeasure.left = this._minX - this._lineWidth / 2;
-            this._currentMeasure.top = this._minY - this._lineWidth / 2;  
-        }
-
-        dispose(): void {
-            while (this._trackers.length > 0) {
-                this.removeTracker(this._trackers.length - 1);
-            }
-        }
-
-    }    
-}

gui/src/controls/multiLine.ts

@@ -0,0 +1,216 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+
+    export class MultiLine extends Control {
+
+        private _lineWidth: number = 1;
+        private _dash: number[];
+        private _segments: Nullable<Segment>[];
+
+        private _minX: Nullable<number>;
+        private _minY: Nullable<number>;
+        private _maxX: Nullable<number>;
+        private _maxY: Nullable<number>;
+
+        constructor(public name?: string) {
+            super(name);
+
+            this.isHitTestVisible = false;
+            this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+            this._verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+
+            this._dash = [];
+            this._segments = [];
+        }
+
+        public get dash(): Array<number> {
+            return this._dash;
+        }
+
+        public set dash(value: Array<number>) {
+            if (this._dash === value) {
+                return;
+            }
+
+            this._dash = value;
+            this._markAsDirty();
+        }
+
+        private _getSegment(index: number): Segment {
+            if (!this._segments[index]) {
+                this._segments[index] = new Segment(this);
+            }
+
+            return this._segments[index] as Segment;
+        }
+
+        onSegmentUpdate = (): void => {
+            this._markAsDirty();
+        }
+
+        add(...items: (AbstractMesh | Control | ValueAndUnitVector2)[]): void {
+            items.forEach(item => {
+                var segment: Segment = this.addSegment();
+
+                if (item instanceof AbstractMesh) {
+                    segment.mesh = item;
+                }
+                else if (item instanceof Control) {
+                    segment.control = item;
+                }
+                else if (item instanceof ValueAndUnitVector2) {
+                    segment.x = item.x;
+                    segment.y = item.y;
+                }
+            });
+        }
+
+        addSegment(): Segment {
+            return this._getSegment(this._segments.length);
+        }
+
+        removeSegment(value: number | Segment): void {
+            var index: number;
+            
+            if (value instanceof Segment) {
+                index = this._segments.indexOf(value);
+
+                if (index === -1) {
+                    return;
+                }
+            }
+            else {
+                index = value;
+            }
+            
+            var segment: Nullable<Segment> = this._segments[index];
+
+            if (!segment) {
+                return;
+            }
+
+            segment.mesh = null;
+            segment.control = null;
+
+            this._segments.splice(index, 1);
+        }
+        
+        public get lineWidth(): number {
+            return this._lineWidth;
+        }
+
+        public set lineWidth(value: number) {
+            if (this._lineWidth === value) {
+                return;
+            }
+
+            this._lineWidth = value;
+            this._markAsDirty();
+        }   
+
+        public set horizontalAlignment(value: number) {
+            return;
+        } 
+
+        public set verticalAlignment(value: number) {
+            return;
+        }
+
+        protected _getTypeName(): string {
+            return "MultiLine";
+        }              
+
+        public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            context.save();
+
+            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+            }
+
+            this._applyStates(context);
+
+            if (this._processMeasures(parentMeasure, context)) {
+                context.strokeStyle = this.color;
+                context.lineWidth = this._lineWidth;
+                context.setLineDash(this._dash);
+
+                context.beginPath();
+
+                var first: boolean = true; //first index is not necessarily 0
+
+                this._segments.forEach(segment => {
+                    if (!segment) {
+                        return;
+                    }
+
+                    if (first) {
+                        context.moveTo(segment._point.x, segment._point.y);
+
+                        first = false;
+                    }
+                    else {
+                        context.lineTo(segment._point.x, segment._point.y);
+                    }
+                });
+
+                context.stroke();
+            }
+
+            context.restore();
+        }
+
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            this._minX = null;
+            this._minY = null;
+            this._maxX = null;
+            this._maxY = null;
+            
+            this._segments.forEach((segment, index) => {
+                if (!segment) {
+                    return;
+                }
+
+                segment.translate();
+
+                if (this._minX == null || segment._point.x < this._minX) this._minX = segment._point.x;
+                if (this._minY == null || segment._point.y < this._minY) this._minY = segment._point.y;
+                if (this._maxX == null || segment._point.x > this._maxX) this._maxX = segment._point.x;
+                if (this._maxY == null || segment._point.y > this._maxY) this._maxY = segment._point.y;
+            });
+
+            if (this._minX == null) this._minX = 0;
+            if (this._minY == null) this._minY = 0;
+            if (this._maxX == null) this._maxX = 0;
+            if (this._maxY == null) this._maxY = 0;
+        }
+
+        public _measure(): void {
+            if (this._minX == null || this._maxX == null || this._minY == null || this._maxY == null) {
+                return;
+            }
+
+            this._currentMeasure.width = Math.abs(this._maxX - this._minX) + this._lineWidth;
+            this._currentMeasure.height = Math.abs(this._maxY - this._minY) + this._lineWidth;
+        }
+
+        protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            if (this._minX == null || this._minY == null) {
+                return;
+            }
+
+            this._currentMeasure.left = this._minX - this._lineWidth / 2;
+            this._currentMeasure.top = this._minY - this._lineWidth / 2;  
+        }
+
+        dispose(): void {
+            while (this._segments.length > 0) {
+                this.removeSegment(this._segments.length - 1);
+            }
+        }
+
+    }    
+}

gui/src/segment.ts

@@ -0,0 +1,135 @@
+/// <reference path="../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+
+    export class Segment {
+
+        private _multiLine: MultiLine;
+
+        private _x: ValueAndUnit;
+        private _y: ValueAndUnit;
+        private _control: Nullable<Control>;
+        private _mesh: Nullable<AbstractMesh>;
+
+        private _controlObserver: Nullable< Observer<Control> >;
+        private _meshObserver: Nullable< Observer<Camera> >;
+
+        _point: Vector2;
+
+        constructor(multiLine: MultiLine) {
+            this._multiLine = multiLine;
+
+            this._x = new ValueAndUnit(0);
+            this._y = new ValueAndUnit(0);
+
+            this._point = new Vector2(0, 0);
+        }
+
+        get x(): string | number {
+            return this._x.toString(this._multiLine._host);
+        }
+
+        set x(value: string | number) {
+            if (this._x.toString(this._multiLine._host) === value) {
+                return;
+            }
+
+            if (this._x.fromString(value)) {
+                this._multiLine._markAsDirty();
+            }
+        }
+
+        get y(): string | number {
+            return this._y.toString(this._multiLine._host);
+        }
+
+        set y(value: string | number) {
+            if (this._y.toString(this._multiLine._host) === value) {
+                return;
+            }
+
+            if (this._y.fromString(value)) {
+                this._multiLine._markAsDirty();
+            }
+        }
+
+        get control(): Nullable<Control> {
+            return this._control;
+        }
+
+        set control(value: Nullable<Control>) {
+            if (this._control === value) {
+                return;
+            }
+
+            if (this._control && this._controlObserver) {
+                this._control.onDirtyObservable.remove(this._controlObserver);
+
+                this._controlObserver = null;
+            }
+
+            this._control = value;
+
+            if (this._control) {
+                this._controlObserver = this._control.onDirtyObservable.add(this._multiLine.onSegmentUpdate);
+            }
+
+            this._multiLine._markAsDirty();
+        }
+
+        get mesh(): Nullable<AbstractMesh> {
+            return this._mesh;
+        }
+
+        set mesh(value: Nullable<AbstractMesh>) {
+            if (this._mesh === value) {
+                return;
+            }
+
+            if (this._mesh && this._meshObserver) {
+                this._mesh.getScene().onAfterCameraRenderObservable.remove(this._meshObserver);
+            }
+
+            this._mesh = value;
+
+            if (this._mesh) {
+                this._meshObserver = this._mesh.getScene().onAfterCameraRenderObservable.add(this._multiLine.onSegmentUpdate);
+            }
+
+            this._multiLine._markAsDirty();
+        }
+
+        translate(): Vector2 {
+            this._point = this._translatePoint();
+
+            return this._point;
+        }
+
+        private _translatePoint(): Vector2 {
+            if (this._mesh != null) {
+                return this._multiLine._host.getProjectedPosition(this._mesh.getBoundingInfo().boundingSphere.center, this._mesh.getWorldMatrix());
+            }
+            else if (this._control != null) {
+                return new Vector2(this._control.centerX, this._control.centerY);
+            }
+            else {
+                //TODO: extract number from px and % - eventually in order to support %
+                return new Vector2(this.x as number, this.y as number); //temp - as number
+            }
+        }
+
+        dispose(): void {
+            this.control = null;
+            this.mesh = null;
+        }
+
+    }
+
+    export class ValueAndUnitVector2 {
+
+        x: string | number;
+        y: string | number;
+
+    }
+
+}

gui/src/tracker.ts

@@ -1,48 +0,0 @@
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON.GUI {
-
-    export class Tracker {
-
-        private _x: ValueAndUnit;
-        private _y: ValueAndUnit;
-        private _control: Nullable<Control>;
-        private _mesh: Nullable<BABYLON.AbstractMesh>;
-
-        _point: BABYLON.Vector2;
-
-        constructor(x: number = 0, y: number = 0, public unit = ValueAndUnit.UNITMODE_PIXEL, public negativeValueAllowed = true, control: Nullable<Control> = null, mesh: Nullable<BABYLON.AbstractMesh> = null) {
-            this._x = new ValueAndUnit(x);
-            this._y = new ValueAndUnit(y);
-            this._control = control;
-            this._mesh = mesh;
-            this._point = new BABYLON.Vector2(0, 0);
-        }
-
-        get x(): ValueAndUnit {
-            return this._x;
-        }
-
-        get y(): ValueAndUnit {
-            return this._y;
-        }
-
-        get control(): Nullable<Control> {
-            return this._control;
-        }
-
-        set control(value: Nullable<Control>) {
-            this._control = value;
-        }
-
-        get mesh(): Nullable<BABYLON.AbstractMesh> {
-            return this._mesh;
-        }
-
-        set mesh(value: Nullable<BABYLON.AbstractMesh>) {
-            this._mesh = value;
-        }
-
-    }
-
-}