Added drag actions

examples/games/solarsystem.js

@@ -650,19 +650,45 @@ var pauseButton     = addIcon(systemViewPanel, 'playpause');
 var forwardButton   = addIcon(systemViewPanel, 'forward');
 
 var zoomPanel = addPanel({ dir: '+y', visible: true });
+zoomPanel.add(new UI.Label({
+    text: "Foo",
+    width: 120,
+    height: 15,
+    color: UI.rgb(245, 190, 20),
+    alpha: 1.0,
+    backgroundColor: UI.rgb(10, 10, 10),
+    backgroundAlpha: 0.0
+}));
+zoomPanel.add(new UI.Label());
+zoomPanel.add(new UI.Slider({
+    width: 120,
+    height: 15,
+    backgroundColor: UI.rgb(10, 10, 10),
+    backgroundAlpha: 0.5,
+    slider: {
+        width: 20,
+        height: 8,
+        backgroundColor: UI.rgb(120, 120, 120),
+        backgroundAlpha: 1.0
+    }
+}));
+addIcon(zoomPanel, 'reverse');
 
 UI.updateLayout();
 
-function hideSubpanels () {
+var subpanels = [ systemViewPanel, zoomPanel ];
-    systemViewPanel.setVisible(false);
+function hideSubpanelsExcept (panel) {
-    zoomPanel.setVisible(false);
+    subpanels.forEach(function (x) {
+        if (x != panel) {
+            x.setVisible(false);
+        }
+    });
 }
 
 function attachPanel (panel, button) {
     button.addAction('onClick', function () {
-        var visible = !panel.isVisible();
+        hideSubpanelsExcept(panel);
-        hideSubpanels();
+        panel.setVisible(!panel.isVisible());
-        panel.setVisible(visible);
         UI.updateLayout();
     })
 
@@ -736,19 +762,37 @@ function makeDraggable (panel, target) {
     if (!target)
         target = panel;
 
-    panel.addAction('onMouseDown', function (event) {
+    var dragStart = null;
-        var dragStart  = { x: event.x, y: event.y };
+    var initialPos = null;
-        var initialPos = { x: target.position.x, y: target.position.y };
+
-        startDrag({
+    panel.addAction('onDragBegin', function (event) {
-            updateDrag: function (event) {
+        dragStart = { x: event.x, y: event.y };
+        initialPos = { x: target.position.x, y: target.position.y };
+    });
+    panel.addAction('onDragUpdate', function (event) {
         target.setPosition(
             initialPos.x + event.x - dragStart.x,
             initialPos.y + event.y - dragStart.y
         );
         UI.updateLayout();
-            }
     });
+    panel.addAction('onDragEnd', function () {
+        dragStart = dragEnd = null;
     });
+
+    // panel.addAction('onMouseDown', function (event) {
+    //     var dragStart  = { x: event.x, y: event.y };
+    //     var initialPos = { x: target.position.x, y: target.position.y };
+    //     startDrag({
+    //         updateDrag: function (event) {
+    //             target.setPosition(
+    //                 initialPos.x + event.x - dragStart.x,
+    //                 initialPos.y + event.y - dragStart.y
+    //             );
+    //             UI.updateLayout();
+    //         }
+    //     });
+    // });
 }
 
 var buttons = icons;

examples/libraries/uiwidgets.js

@@ -349,7 +349,6 @@ WidgetStack.prototype.setColor = function (color) {
 }
 
 var Icon = UI.Icon = function (properties) {
-	var _TRACE = traceEnter.call(this, "Icon.constructor()");
 	Widget.prototype.constructor.call(this);
 
 	this.visible = properties.visible != undefined ? properties.visible : this.visible;
@@ -367,7 +366,6 @@ var Icon = UI.Icon = function (properties) {
 		'visible': this.visible
 	}
 	this.iconOverlay = makeOverlay("image", iconProperties);
-	_TRACE.exit()
 }
 Icon.prototype = new Widget();
 Icon.prototype.constructor = Icon;
@@ -403,6 +401,143 @@ Icon.prototype.setColor = function (color) {
 	});
 }
 
+var Box = UI.Box = function (properties) {
+	Widget.prototype.constructor.call(this);
+
+	properties = properties || {};
+	properties.width = properties.width || 10;
+	properties.height = properties.height || 10;
+	properties.visible = properties.visible !== undefined ? properties.visible : this.visible;
+	properties.x = this.position.x;
+	properties.y = this.position.y;
+
+	this.width = properties.width;
+	this.height = properties.height;
+	this.visible = properties.visible;
+
+	this.overlay = makeOverlay("text", properties);
+};
+Box.prototype = new Widget();
+Box.prototype.constructor = Box;
+Box.prototype.toString = function () {
+	return "[UI.Box " + this.id + " ]";
+}
+Box.prototype.getWidth = function () {
+	return this.width;
+}
+Box.prototype.getHeight = function () {
+	return this.height;
+}
+Box.prototype.destroy = function () {
+	if (this.overlay) { 
+		this.overlay.destroy();
+		this.overlay = null;
+	}
+}
+Box.prototype.hasOverlay = function (overlayId) {
+	return this.overlay && this.overlay.id === overlayId;
+}
+Box.prototype.getOverlay = function () {
+	return this.overlay;
+}
+Box.prototype.updateOverlays = function () {
+	this.overlay.update({
+		x: this.position.x,
+		y: this.position.y,
+		width: this.width,
+		height: this.height,
+		visible: this.isVisible()
+	});
+}
+
+var Label = UI.Label = function (properties) {
+	properties = properties || {};
+	properties.text = properties.text || "< bad UI.Label call (text) >";
+
+	if (!properties.width) {
+		ui.complain("UI.Label constructor expected width property, not " + properties.width);
+		this.text = "< bad UI.Label call (width) >";
+		properties.width = 220;
+	}
+	if (!properties.height) {
+		ui.complain("UI.Label constructor expected height property, not " + properties.height);
+		this.text = "< bad UI.Label call (height) >";
+		properties.height = 20;
+	}
+	properties.color = properties.color || COLOR_WHITE;
+
+	Box.prototype.constructor.call(this, properties);
+};
+Label.prototype = new Box();
+Label.prototype.constructor = Label;
+Label.prototype.toString = function () {
+	return "[UI.Label " + this.id + " ]";
+}
+Label.prototype.setText = function (text) {
+	this.text = text;
+	this.overlay.update({
+		text: text
+	});
+}
+
+/// Slider element.
+/// @param properties:
+///		onValueChanged
+var Slider = UI.Slider = function (properties) {
+	Box.prototype.constructor.call(this, properties);
+	// print("CONSTRUCTING SLIDER")
+	this.value = properties.value || 0.0;
+	this.maxValue = properties.maxValue || 1.0;
+	this.minValue = properties.minValue || 0.0;
+
+	this.slider = new Box(properties.slider);
+	this.slider.parent = this;
+
+	(function() {
+		// var x0;
+		this.slider.addAction('onDragBegin', function (event) {
+			// x0 = event.x;
+		});
+		this.slider.addAction('onDragUpdate', function (event, widget) {
+			var rx = Math.max(event.x - widget.position.x, 0.0);
+			var v  = Math.min(rx, widget.width) / widget.width;
+			widget.value = widget.minValue + (widget.maxValue - widget.minValue) * v;
+			UI.updateLayout();
+		});
+		this.slider.addAction('onDragEnd', function () {});
+	}).apply(this);
+};
+Slider.prototype = new Box();
+Slider.prototype.constructor = Slider;
+
+Slider.prototype.toString = function () {
+	return "[UI.Slider " + this.id + " ]";
+}
+
+Slider.prototype.applyLayout = function () {
+	if (!this.slider) {
+		ui.complain("Slider.applyLayout on " + this + " failed");
+		return;
+	}
+	var val = (this.value - this.minValue) / (this.maxValue - this.minValue);
+	this.slider.position.x = this.position.x + this.width * val;
+	this.slider.position.y = this.position.y + (this.height - this.slider.height) * 0.5;
+}
+
+
+
+
+
+var Checkbox = UI.Checkbox = function (properties) {
+
+};
+
+
+
+
+
+
+
 // New layout functions
 Widget.prototype.applyLayout = function () {};
 Widget.prototype.updateOverlays = function () {};
@@ -555,6 +690,7 @@ function dispatchEvent(actions, widget, event) {
 
 ui.focusedWidget = null;
 ui.clickedWidget = null;
+ui.draggedWidget = null;
 
 var getWidgetWithOverlay = function (overlay) {
 	// print("trying to find overlay: " + overlay);
@@ -604,7 +740,12 @@ UI.handleMouseMove = function (event) {
 
 	print("got focus: " + focused);
 
-	if (focused != ui.focusedWidget) {
+	if (ui.clickedWidget && !ui.draggedWidget && ui.clickedWidget.actions['onDragBegin']) {
+		ui.draggedWidget = ui.clickedWidget;
+		dispatchEvent('onDragBegin', event, ui.draggedWidget);
+	} else if (ui.draggedWidget) {
+		dispatchEvent('onDragUpdate', event, ui.draggedWidget);
+	} else if (focused != ui.focusedWidget) {
 		if (focused)
 			dispatchEvent('onMouseOver', event, focused);
 		if (ui.focusedWidget)
@@ -616,14 +757,18 @@ UI.handleMouseMove = function (event) {
 UI.handleMousePress = function (event) {
 	print("Mouse clicked");
 	UI.handleMouseMove(event);
-	if (ui.focusedWidget) {
 	ui.clickedWidget = ui.focusedWidget;
+	if (ui.focusedWidget) {
 		dispatchEvent('onMouseDown', event, ui.focusedWidget);
 	}
 }
 
 UI.handleMouseRelease = function (event) {
 	print("Mouse released");
+
+	if (ui.draggedWidget) {
+		dispatchEvent('onDragEnd', event, ui.draggedWidget);
+	} else {
 		UI.handleMouseMove(event);
 		if (ui.focusedWidget) {
 			dispatchEvent('onMouseUp', event, ui.focusedWidget);
@@ -631,8 +776,10 @@ UI.handleMouseRelease = function (event) {
 			if (ui.clickedWidget == ui.focusedWidget) {
 				dispatchEvent('onClick', event, ui.focusedWidget);
 			}
-		ui.clickedWidget = null;;
 		}
+	}
+	ui.clickedWidget = null;
+	ui.draggedWidget = null;
 }
 
 UI.teardown = function () {