games/spacetac
games/spacetac
1
0
Fork 0
Code Releases Activity

Fixed tooltip background not covering the whole content

Browse source
This commit is contained in:
Michaël Lemaire 2017-04-19 23:34:11 +02:00
parent d5b37ff850
commit 1ad7572bda
3 changed files with 122 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/ui/common/Tools.ts
View file

@ -1,24 +1,45 @@
module TS.SpaceTac.UI {
interface IBounded {
x: number;
y: number;
width: number;
height: number;
}
// Common UI tools functions
export class Tools {
/**
* Get the position of an object, adjusted to remain inside a container
*/
static positionInside(obj: IBounded, container: IBounded): [number, number] {
let y = obj.y;
if (y + obj.height > container.height) {
y = container.height - obj.height;
}
if (y < container.y) {
y = container.y;
}
let x = obj.x;
if (x + obj.width > container.width) {
x = container.width - obj.width;
}
if (x < container.x) {
x = container.x;
}
return [x, y];
}
/**
* Reposition an object to remain inside a container
*/
static keepInside(obj: Phaser.Button | Phaser.Sprite | Phaser.Image | Phaser.Group | Phaser.Graphics, rect: { x: number, y: number, width: number, height: number }) {
static keepInside(obj: Phaser.Button | Phaser.Sprite | Phaser.Image | Phaser.Group | Phaser.Graphics, rect: IBounded) {
let objbounds = obj.getBounds();
let [x, y] = Tools.positionInside({ x: obj.x, y: obj.y, width: objbounds.width, height: objbounds.height }, rect);
if (obj.y + objbounds.height > rect.height) {
obj.y = rect.height - objbounds.height;
}
if (obj.y < 0) {
obj.y = 0;
}
if (obj.x + objbounds.width > rect.width) {
obj.x = rect.width - objbounds.width;
}
if (obj.x < 0) {
obj.x = 0;
if (x != obj.x || y != obj.y) {
obj.position.set(x, y);
}
}

32
src/ui/common/Tooltip.spec.ts Normal file
View file

@ -0,0 +1,32 @@
module TS.SpaceTac.UI.Specs {
describe("Tooltip", () => {
let testgame = setupEmptyView();
it("shows near the hovered button", function () {
let button = testgame.baseview.add.button();
spyOn(button, "getBounds").and.returnValue({ x: 100, y: 50, width: 50, height: 25 });
let tooltip = new Tooltip(testgame.baseview);
tooltip.bind(button, container => {
let image = new Phaser.Image(testgame.ui, 22, 12, "fake");
container.add(image);
return true;
});
let container = <Phaser.Group>(<any>tooltip).container;
expect(container.visible).toBe(false);
button.onInputOver.dispatch();
expect(container.visible).toBe(false);
jasmine.clock().tick(1000);
container.update();
expect(container.visible).toBe(true);
expect(container.x).toEqual(154);
expect(container.y).toEqual(79);
button.onInputOut.dispatch();
expect(container.visible).toBe(false);
});
});
}

76
src/ui/common/Tooltip.ts
View file

@ -1,14 +1,65 @@
module TS.SpaceTac.UI {
class TooltipContainer extends Phaser.Group {
view: BaseView
background: Phaser.Graphics
content: Phaser.Group
anchorpoint: [number, number] = [0, 0]
constructor(view: BaseView) {
super(view.game);
this.view = view;
this.visible = false;
this.background = new Phaser.Graphics(this.game);
this.add(this.background);
this.content = new Phaser.Group(this.game);
this.add(this.content);
}
show(x: number, y: number) {
this.anchorpoint = [x, y];
this.visible = true;
}
update() {
if (this.visible) {
let bounds = this.content.getBounds();
let width = bounds.width + 20;
let height = bounds.height + 20;
if (this.background.width != width || this.background.height != height) {
this.background.clear();
this.background.beginFill(0x202225, 0.9);
this.background.drawRect(-10, -10, width, height);
this.background.endFill();
}
let [x, y] = Tools.positionInside({ x: this.anchorpoint[0], y: this.anchorpoint[1], width: width, height: height }, { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() });
if (x != this.x || y != this.y) {
this.position.set(x, y);
}
}
}
hide() {
this.content.removeAll();
this.visible = false;
}
}
/**
* Tooltip system, to display information on hover
*/
export class Tooltip {
private view: BaseView;
private container: Phaser.Group;
private container: TooltipContainer;
constructor(view: BaseView) {
this.view = view;
this.container = new Phaser.Group(view.game);
this.container = new TooltipContainer(view);
}
/**
@ -21,23 +72,9 @@ module TS.SpaceTac.UI {
// enter
() => {
this.hide();
if (func(this.container)) {
// position
if (func(this.container.content)) {
let bounds = obj.getBounds();
this.container.position.set(bounds.x + bounds.width + 4, bounds.y + bounds.height + 4);
// add background
let ttbounds = this.container.getBounds();
let background = new Phaser.Graphics(this.container.game, 0, 0);
this.container.add(background);
background.beginFill(0x202225, 0.9);
background.drawRect(-10, -10, ttbounds.width + 20, ttbounds.height + 20);
background.endFill();
this.container.sendToBack(background);
// display
Tools.keepInside(this.container, { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() });
this.container.visible = true;
this.container.show(bounds.x + bounds.width + 4, bounds.y + bounds.height + 4);
}
},
// leave
@ -69,8 +106,7 @@ module TS.SpaceTac.UI {
* Hide the current tooltip
*/
hide(): void {
this.container.removeAll(true);
this.container.visible = false;
this.container.hide();
}
}
}