Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-25 14:33:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added drag actions

Browse source
This commit is contained in:
Seiji Emery 2015-08-12 00:19:11 -07:00
parent 986a821c91
commit f45afe050b
2 changed files with 219 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
examples/games/solarsystem.js
View file

@ -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 () {
systemViewPanel.setVisible(false);
zoomPanel.setVisible(false);
var subpanels = [ systemViewPanel, zoomPanel ];
function hideSubpanelsExcept (panel) {
subpanels.forEach(function (x) {
if (x != panel) {
x.setVisible(false);
}
});
}
function attachPanel (panel, button) {
button.addAction('onClick', function () {
var visible = !panel.isVisible();
hideSubpanels();
panel.setVisible(visible);
hideSubpanelsExcept(panel);
panel.setVisible(!panel.isVisible());
UI.updateLayout();
})
@ -736,19 +762,37 @@ function makeDraggable (panel, target) {
if (!target)
target = panel;
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 dragStart = null;
var initialPos = null;
panel.addAction('onDragBegin', 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;

167
examples/libraries/uiwidgets.js
View file

@ -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,23 +757,29 @@ UI.handleMouseMove = function (event) {
UI.handleMousePress = function (event) {
print("Mouse clicked");
UI.handleMouseMove(event);
ui.clickedWidget = ui.focusedWidget;
if (ui.focusedWidget) {
ui.clickedWidget = ui.focusedWidget;
dispatchEvent('onMouseDown', event, ui.focusedWidget);
}
}
UI.handleMouseRelease = function (event) {
print("Mouse released");
UI.handleMouseMove(event);
if (ui.focusedWidget) {
dispatchEvent('onMouseUp', event, ui.focusedWidget);
if (ui.clickedWidget == ui.focusedWidget) {
dispatchEvent('onClick', event, ui.focusedWidget);
if (ui.draggedWidget) {
dispatchEvent('onDragEnd', event, ui.draggedWidget);
} else {
UI.handleMouseMove(event);
if (ui.focusedWidget) {
dispatchEvent('onMouseUp', event, ui.focusedWidget);
if (ui.clickedWidget == ui.focusedWidget) {
dispatchEvent('onClick', event, ui.focusedWidget);
}
}
ui.clickedWidget = null;;
}
ui.clickedWidget = null;
ui.draggedWidget = null;
}
UI.teardown = function () {