mirror of
https://github.com/overte-org/overte.git
synced 2025-04-24 12:13:36 +02:00
added debug ui, fixed non-targetable ui boxes/labels
This commit is contained in:
Seiji Emery
parent
f45afe050b
commit
293f146cfc
2 changed files with 306 additions and 78 deletions
|
|
@ -629,10 +629,135 @@ function addPanel (properties) {
|
|||
return panel;
|
||||
}
|
||||
|
||||
function makeDraggable (panel, target) {
|
||||
if (!target)
|
||||
target = panel;
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
// var panelContainer = new UI.WidgetContainer();
|
||||
// panelContainer.setPosition(500, 250);
|
||||
// panelContainer.setVisible(true);
|
||||
|
||||
var demoPane = addPanel({ dir: '+y' });
|
||||
var demoLabel = demoPane.add(new UI.Label({
|
||||
text: "< no events >",
|
||||
width: 400, height: 20
|
||||
}));
|
||||
var demoButton = demoPane.add(new UI.Box({
|
||||
width: 200, height: 80,
|
||||
text: "Button"
|
||||
}));
|
||||
function setText(text) {
|
||||
return function () {
|
||||
demoLabel.setText(text);
|
||||
UI.updateLayout();
|
||||
};
|
||||
}
|
||||
function addDebugActions(widget, msg, actions) {
|
||||
actions.forEach(function(action) {
|
||||
widget.addAction(action, setText(action + " " + msg + widget));
|
||||
});
|
||||
}
|
||||
|
||||
var debugEvents = [
|
||||
'onMouseOver',
|
||||
'onMouseExit',
|
||||
'onMouseDown',
|
||||
'onMouseUp',
|
||||
'onDragBegin',
|
||||
'onDragEnd',
|
||||
'onDragUpdate'
|
||||
];
|
||||
addDebugActions(demoPane, "(container) ", debugEvents);
|
||||
addDebugActions(demoButton, "(button) ", debugEvents);
|
||||
addDebugActions(demoLabel, "(label) ", debugEvents);
|
||||
|
||||
// demoPane.addAction('onMouseOver', setText("onMouseOver " + demoPane));
|
||||
// demoPane.addAction('onMouseExit', setText("onMouseExit " + demoPane));
|
||||
// demoPane.addAction('onMouseDown', setText("onMouseDown " + demoPane));
|
||||
// demoPane.addAction('onMouseUp', setText("onMouseUp " + demoPane));
|
||||
makeDraggable(demoPane, demoPane);
|
||||
demoPane.setPosition(600, 200);
|
||||
|
||||
// demoButton.addAction('onMouseOver', setText("onMouseOver " + demoButton));
|
||||
// demoButton.addAction('onMouseExit', setText("onMouseExit " + demoButton));
|
||||
// demoButton.addAction()
|
||||
|
||||
|
||||
var resizablePanel = new UI.Label({
|
||||
text: "Resizable panel",
|
||||
width: 200, height: 200,
|
||||
backgroundAlpha: 0.5
|
||||
});
|
||||
resizablePanel.setPosition(1100, 200);
|
||||
|
||||
|
||||
debugEvents.forEach(function (action) {
|
||||
resizablePanel.addAction(action, function (event, widget) {
|
||||
widget.setText(action + " " + widget);
|
||||
});
|
||||
})
|
||||
|
||||
addDebugActions(resizablePanel, "", debugEvents);
|
||||
|
||||
function join(obj) {
|
||||
var s = "{";
|
||||
var sep = "\n";
|
||||
for (var k in obj) {
|
||||
s += sep + k + ": " + (""+obj[k]).replace("\n", "\n");
|
||||
sep = ",\n";
|
||||
}
|
||||
if (s.length > 1)
|
||||
return s + " }";
|
||||
return s + "}";
|
||||
}
|
||||
|
||||
// resizablePanel.getOverlay().update({
|
||||
// text: "" + join(resizablePanel.actions)
|
||||
// });
|
||||
|
||||
|
||||
setText = addDebugActions = undefined;
|
||||
|
||||
|
||||
var tooltipWidget = new UI.Label({
|
||||
text: "<tooltip>",
|
||||
width: 500, height: 20,
|
||||
visible: false
|
||||
});
|
||||
|
||||
function addTooltip (widget, text) {
|
||||
widget.addAction('onMouseOver', function (event, widget) {
|
||||
tooltipWidget.setVisible(true);
|
||||
tooltipWidget.setPosition(widget.position.x + widget.getWidth() + 20, widget.position.y);
|
||||
tooltipWidget.setText(text);
|
||||
UI.updateLayout();
|
||||
});
|
||||
widget.addAction('onMouseExit', function () {
|
||||
tooltipWidget.setVisible(false);
|
||||
UI.updateLayout();
|
||||
});
|
||||
}
|
||||
UI.showWidgetList();
|
||||
|
||||
var mainPanel = addPanel({ dir: '+y' });
|
||||
mainPanel.setPosition(500, 250);
|
||||
mainPanel.setVisible(true);
|
||||
|
|
@ -644,30 +769,56 @@ var settingsButton = addIcon(mainPanel, 'settings');
|
|||
var stopButton = addIcon(mainPanel, 'close');
|
||||
|
||||
|
||||
addTooltip(systemViewButton, "system view");
|
||||
addTooltip(zoomButton, "zoom");
|
||||
addTooltip(satelliteButton, "satelite view");
|
||||
addTooltip(settingsButton, "settings");
|
||||
addTooltip(stopButton, "exit");
|
||||
|
||||
|
||||
var systemViewPanel = addPanel({ dir: '+x', visible: false });
|
||||
var reverseButton = addIcon(systemViewPanel, 'reverse');
|
||||
var pauseButton = addIcon(systemViewPanel, 'playpause');
|
||||
var forwardButton = addIcon(systemViewPanel, 'forward');
|
||||
|
||||
var zoomPanel = addPanel({ dir: '+y', visible: true });
|
||||
zoomPanel.add(new UI.Label({
|
||||
var label = new UI.Label({
|
||||
text: "Foo",
|
||||
width: 120,
|
||||
height: 15,
|
||||
color: UI.rgb(245, 190, 20),
|
||||
color: UI.rgb(245, 290, 20),
|
||||
alpha: 1.0,
|
||||
backgroundColor: UI.rgb(10, 10, 10),
|
||||
backgroundAlpha: 0.0
|
||||
}));
|
||||
});
|
||||
zoomPanel.add(label);
|
||||
label.addAction('onMouseOver', function () {
|
||||
label.setText("Bar");
|
||||
UI.updateLayout();
|
||||
});
|
||||
label.addAction('onMouseExit', function () {
|
||||
label.setText("Foo");
|
||||
UI.updateLayout();
|
||||
});
|
||||
label.setText("Label id: " + label.id + ", parent id " + label.parent.id);
|
||||
label.parent.addAction('onMouseOver', function () {
|
||||
label.setText("on parent");
|
||||
UI.updateLayout();
|
||||
});
|
||||
label.parent.addAction('onMouseExit', function () {
|
||||
label.setText('exited parent');
|
||||
UI.updateLayout();
|
||||
});
|
||||
|
||||
zoomPanel.add(new UI.Label());
|
||||
zoomPanel.add(new UI.Slider({
|
||||
width: 120,
|
||||
height: 15,
|
||||
height: 25,
|
||||
backgroundColor: UI.rgb(10, 10, 10),
|
||||
backgroundAlpha: 0.5,
|
||||
slider: {
|
||||
width: 20,
|
||||
height: 8,
|
||||
width: 30,
|
||||
height: 15,
|
||||
backgroundColor: UI.rgb(120, 120, 120),
|
||||
backgroundAlpha: 1.0
|
||||
}
|
||||
|
|
@ -675,6 +826,8 @@ zoomPanel.add(new UI.Slider({
|
|||
addIcon(zoomPanel, 'reverse');
|
||||
|
||||
UI.updateLayout();
|
||||
UI.showWidgetList();
|
||||
|
||||
|
||||
var subpanels = [ systemViewPanel, zoomPanel ];
|
||||
function hideSubpanelsExcept (panel) {
|
||||
|
|
@ -714,10 +867,13 @@ var addColorToggle = function (widget) {
|
|||
reverseButton.addAction('onClick', function() {
|
||||
|
||||
});
|
||||
pauseButton.addAction('onClick', function() {
|
||||
systemViewPanel.addAction('onMouseOver', function() {
|
||||
hideSubpanels();
|
||||
UI.updateLayout();
|
||||
// paused ? resume() : pause();
|
||||
});
|
||||
|
||||
|
||||
zoomButton.addAction('onClick', function() {
|
||||
hideSubpanels();
|
||||
UI.updateLayout();
|
||||
|
|
@ -731,7 +887,7 @@ zoomButton.addAction('onClick', function() {
|
|||
}
|
||||
});
|
||||
UI.updateLayout();
|
||||
|
||||
UI.showWidgetList();
|
||||
|
||||
stopButton.addAction('onClick', function() {
|
||||
// Script.stop();
|
||||
|
|
@ -758,42 +914,7 @@ stopButton.addAction('onClick', function() {
|
|||
}
|
||||
})();
|
||||
|
||||
function makeDraggable (panel, target) {
|
||||
if (!target)
|
||||
target = panel;
|
||||
|
||||
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;
|
||||
|
||||
|
|
@ -968,7 +1089,7 @@ panels.map(function (panel) { makeDraggable(panel, mainPanel); });
|
|||
// }
|
||||
// }
|
||||
|
||||
UI.printWidgets();
|
||||
// UI.printWidgets();
|
||||
|
||||
// Clean up models, UI panels, lines, and button overlays
|
||||
function teardown() {
|
||||
|
|
|
|||
|
|
@ -120,12 +120,12 @@ var rgb = UI.rgb = function (r, g, b) {
|
|||
ui.err("Invalid args to UI.rgb (" + r + ", " + g + ", " + b + ")");
|
||||
return null;
|
||||
}
|
||||
return { 'r': r, 'g': g, 'b': b };
|
||||
return { 'red': r, 'green': g, 'blue': b };
|
||||
}
|
||||
var rgba = UI.rgba = function (r, g, b, a) {
|
||||
if (typeof(r) == 'string')
|
||||
return rgb(r);
|
||||
return { 'r': r || 0, 'g': g || 0, 'b': b || 0, 'a': a };
|
||||
return { 'red': r || 0, 'green': g || 0, 'blue': b || 0, 'a': a };
|
||||
}
|
||||
|
||||
/// Protected UI state
|
||||
|
|
@ -254,6 +254,8 @@ Widget.prototype.getHeight = function () {
|
|||
Widget.prototype.hasOverlay = function () {
|
||||
return false;
|
||||
}
|
||||
Widget.prototype.applyLayout = function () {};
|
||||
Widget.prototype.updateOverlays = function () {};
|
||||
|
||||
/// Implements a simple auto-layouted container of methods.
|
||||
/// @param properties
|
||||
|
|
@ -435,7 +437,7 @@ Box.prototype.destroy = function () {
|
|||
}
|
||||
}
|
||||
Box.prototype.hasOverlay = function (overlayId) {
|
||||
return this.overlay && this.overlay.id === overlayId;
|
||||
return this.overlay && this.overlay.getId() === overlayId;
|
||||
}
|
||||
Box.prototype.getOverlay = function () {
|
||||
return this.overlay;
|
||||
|
|
@ -465,6 +467,8 @@ var Label = UI.Label = function (properties) {
|
|||
properties.height = 20;
|
||||
}
|
||||
properties.color = properties.color || COLOR_WHITE;
|
||||
properties.alpha = properties.alpha || properties.color.a || 1.0;
|
||||
properties.backgroundAlpha = properties.backgroundAlpha || 0.0;
|
||||
|
||||
Box.prototype.constructor.call(this, properties);
|
||||
};
|
||||
|
|
@ -493,19 +497,43 @@ var Slider = UI.Slider = function (properties) {
|
|||
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);
|
||||
this.statusLabel = new Label({
|
||||
text: "< UI.Slider Status log > ",
|
||||
width: 300,
|
||||
height: 30,
|
||||
color: UI.rgb(255, 255, 255),
|
||||
alpha: 0.9
|
||||
});
|
||||
// this.statusLabel.parent = this;
|
||||
|
||||
// var x0;
|
||||
var i = 0;
|
||||
this.addAction('onDragBegin', function (event) {
|
||||
statusLabel.setText("Drag begin");
|
||||
UI.updateLayout();
|
||||
i = 0;
|
||||
// x0 = event.x;
|
||||
});
|
||||
this.addAction('onDragUpdate', function (event, widget) {
|
||||
statusLabel.setText("Drag Update " + i++);
|
||||
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.addAction('onDragEnd', function () {
|
||||
statusLabel.setText("Drag end");
|
||||
UI.updateLayout();
|
||||
});
|
||||
this.addAction('onMouseOver', function () {
|
||||
print("Slider MOUSEOVER");
|
||||
statusLabel.setText("mouseover");
|
||||
UI.updateLayout();
|
||||
});
|
||||
this.addAction('onMouseExit', function () {
|
||||
statusLabel.setText("mousexit");
|
||||
UI.updateLayout();
|
||||
});
|
||||
};
|
||||
Slider.prototype = new Box();
|
||||
Slider.prototype.constructor = Slider;
|
||||
|
|
@ -524,10 +552,6 @@ Slider.prototype.applyLayout = function () {
|
|||
this.slider.position.y = this.position.y + (this.height - this.slider.height) * 0.5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var Checkbox = UI.Checkbox = function (properties) {
|
||||
|
||||
};
|
||||
|
|
@ -539,8 +563,7 @@ var Checkbox = UI.Checkbox = function (properties) {
|
|||
|
||||
|
||||
// New layout functions
|
||||
Widget.prototype.applyLayout = function () {};
|
||||
Widget.prototype.updateOverlays = function () {};
|
||||
|
||||
|
||||
|
||||
Icon.prototype.getWidth = function () {
|
||||
|
|
@ -593,13 +616,11 @@ WidgetStack.prototype.getHeight = function () {
|
|||
return this.dimensions.y;
|
||||
}
|
||||
WidgetStack.prototype.applyLayout = function () {
|
||||
print("Applying layout " + this);
|
||||
var x = this.position.x + this.border.x;
|
||||
var y = this.position.y + this.border.y;
|
||||
|
||||
this.widgets.forEach(function (widget) {
|
||||
widget.setPosition(x, y);
|
||||
print("setting position for " + widget + ": " + x + ", " + y)
|
||||
x += (widget.getWidth() + this.padding.x) * this.layoutDir.x;
|
||||
y += (widget.getHeight() + this.padding.y) * this.layoutDir.y;
|
||||
widget._parentVisible = this.isVisible();
|
||||
|
|
@ -688,23 +709,109 @@ function dispatchEvent(actions, widget, event) {
|
|||
_TRACE.exit();
|
||||
}
|
||||
|
||||
// Focus state
|
||||
ui.focusedWidget = null;
|
||||
ui.clickedWidget = null;
|
||||
ui.draggedWidget = null;
|
||||
|
||||
var getWidgetWithOverlay = function (overlay) {
|
||||
// print("trying to find overlay: " + overlay);
|
||||
// Debugging ui
|
||||
var statusPos = new Vec2(15, 20);
|
||||
var statusDim = new Vec2(500, 20);
|
||||
function makeStatusWidget(defaultText, alpha) {
|
||||
var label = new Box({
|
||||
text: defaultText,
|
||||
width: statusDim.x,
|
||||
height: statusDim.y,
|
||||
color: COLOR_WHITE,
|
||||
alpha: alpha || 0.98,
|
||||
backgroundAlpha: 0.0
|
||||
});
|
||||
label.updateText = function (text) {
|
||||
label.getOverlay().update({
|
||||
text: text
|
||||
});
|
||||
}
|
||||
label.setPosition(statusPos.x, statusPos.y);
|
||||
statusPos.y += statusDim.y;
|
||||
return label;
|
||||
}
|
||||
ui.focusStatus = makeStatusWidget("<UI focus>");
|
||||
ui.eventStatus = makeStatusWidget("<UI events>", 0.85);
|
||||
(function () {
|
||||
var eventList = [];
|
||||
var maxEvents = 8;
|
||||
|
||||
ui.logEvent = function (event) {
|
||||
eventList.push(event);
|
||||
if (eventList.length >= maxEvents)
|
||||
eventList.shift();
|
||||
ui.eventStatus.updateText(eventList.join('\n'));
|
||||
}
|
||||
})();
|
||||
|
||||
// Add debug list of all widgets + attachments
|
||||
(function () {
|
||||
var widgetListHeader = makeStatusWidget("Widgets: ", 0.98);
|
||||
var widgetList = makeStatusWidget("<widget list>", 0.85);
|
||||
var attachmentListHeader = makeStatusWidget("Attachments: ", 0.98);
|
||||
var attachmentList = makeStatusWidget("<attachment list>", 0.85);
|
||||
var lineHeight = 20;
|
||||
|
||||
// widgetListHeader.getOverlay().update({
|
||||
// // color: { red: 0.1, green: 0.5, blue: 0.9 },
|
||||
// backgroundColor: { red: 120, green: 250, blue: 12 },
|
||||
// backgroundAlpha: 0.9
|
||||
// });
|
||||
|
||||
function relayout (x, y) {
|
||||
widgetListHeader.setPosition(x, y); y += lineHeight;
|
||||
widgetList.updateText(ui.widgetList.map(function (widget) {
|
||||
return "" + widget + " actions: " + (Object.keys(widget.actions).join(", ") || "none");
|
||||
}).join("\n") || "no widgets");
|
||||
widgetList.setPosition(x, y);
|
||||
y += lineHeight * (ui.widgetList.length || 1);
|
||||
|
||||
attachmentListHeader.setPosition(x, y); y += lineHeight;
|
||||
attachmentList.updateText(ui.attachmentList.map(function (attachment) {
|
||||
return "[attachment target: " + attachment.target + ", to: " + attachment.rel + "]";
|
||||
}).join('\n') || "no attachments");
|
||||
attachmentList.setPosition(x, y);
|
||||
y += lineHeight * (ui.widgetList.length || 1);
|
||||
|
||||
UI.updateLayout();
|
||||
}
|
||||
|
||||
var defaultX = 500;
|
||||
var defaultY = 20;
|
||||
UI.showWidgetList = function (x, y) {
|
||||
widgetListHeader.setVisible(true);
|
||||
widgetList.setVisible(true);
|
||||
attachmentListHeader.setVisible(true);
|
||||
attachmentList.setVisible(true);
|
||||
relayout(x || defaultX, y || defaultY);
|
||||
}
|
||||
UI.hideWidgetList = function () {
|
||||
widgetListHeader.setVisible(false);
|
||||
widgetList.setVisible(false);
|
||||
attachmentListHeader.setVisible(false);
|
||||
attachmentList.setVisible(true);
|
||||
}
|
||||
})();
|
||||
|
||||
UI.showWidgetList();
|
||||
|
||||
// Tries to find a widget with an overlay matching overlay.
|
||||
// Used by getFocusedWidget(), dispatchEvent(), etc
|
||||
var getWidgetWithOverlay = function (overlay) {
|
||||
var foundWidget = null;
|
||||
ui.widgetList.forEach(function(widget) {
|
||||
if (widget.hasOverlay(overlay)) {
|
||||
// print("found overlay in " + widget);
|
||||
foundWidget = widget;
|
||||
return;
|
||||
}
|
||||
});
|
||||
// if (!foundWidget)
|
||||
// print("could not find overlay");
|
||||
|
||||
ui.focusStatus.updateText("Widget focus: " + foundWidget);
|
||||
return foundWidget;
|
||||
}
|
||||
|
||||
|
|
@ -720,17 +827,17 @@ var dispatchEvent = function (action, event, widget) {
|
|||
}
|
||||
|
||||
if (widget.actions[action]) {
|
||||
print("Dispatching action '" + action + "'' to " + widget);
|
||||
ui.logEvent("Dispatching action '" + action + "'' to " + widget)
|
||||
dispatchActions(widget.actions[action]);
|
||||
} else {
|
||||
for (var parent = widget.parent; parent != null; parent = parent.parent) {
|
||||
if (parent.actions[action]) {
|
||||
print("Dispatching action '" + action + "'' to parent widget " + widget);
|
||||
ui.logEvent("Dispatching action '" + action + "'' to parent widget " + widget);
|
||||
dispatchActions(parent.actions[action]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
print("No action '" + action + "' in " + widget);
|
||||
ui.logEvent("No action '" + action + "' in " + widget);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -746,10 +853,10 @@ UI.handleMouseMove = function (event) {
|
|||
} else if (ui.draggedWidget) {
|
||||
dispatchEvent('onDragUpdate', event, ui.draggedWidget);
|
||||
} else if (focused != ui.focusedWidget) {
|
||||
if (focused)
|
||||
dispatchEvent('onMouseOver', event, focused);
|
||||
if (ui.focusedWidget)
|
||||
dispatchEvent('onMouseExit', event, ui.focusedWidget);
|
||||
if (focused)
|
||||
dispatchEvent('onMouseOver', event, focused);
|
||||
ui.focusedWidget = focused;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue