var GraphicViewerStatics = {};
GraphicViewerStatics.ItemHeight = 80;
class GraphicViewerItem extends Engine.Drawable
{
constructor()
{
super();
this.updateTimer = new Engine.SimpleTimer();
this.graphic = new Engine.UniformScaleGraphic(GraphicViewerStatics.ItemHeight - 10, GraphicViewerStatics.ItemHeight - 30, 3);
this.graphic.x = 5; this.graphic.y = 5;
this.name = new Engine.DrawableText();
this.name.x = 5;
this.name.y = GraphicViewerStatics.ItemHeight - 20;
this.addChild(this.graphic);
this.addChild(this.name);
this.mouseEnabled = true;
this.hitArea = new PIXI.Rectangle(0, 0, 200, GraphicViewerStatics.ItemHeight);
this.onClick = null;
this.events.onClick.addListener(this, this.clicked);
}
clicked()
{
if (this.onClick) this.onClick(this.graphicDef);
}
init(graphicDef)
{
this.clear();
this.graphicDef = graphicDef;
this.updateTimer.start(0.3, this.update.bind(this));
this.name.setText((graphicDef.id == -1 ? "" : "(" + graphicDef.id + ") ") + graphicDef.name, "Verdana", 9);
}
update()
{
this.graphic.setGraphicByName(this.graphicDef.name);
}
clear()
{
this.updateTimer.stop();
this.graphic.clear();
}
}
class GraphicViewer extends Engine.Dialog
{
//public delegate void MessageBoxCallback(bool doSomething);
constructor(parentClip /*Drawable*/)
{
super(parentClip);
this.name = "GraphicViewer";
this.boxWidth = 1000;
this.boxHeight = 600;
this.callbackFunction = null;
this.background = new ShardsStyleDialogBackground();
this.background.init(this.boxWidth, this.boxHeight, "Graphics", () => { this.closeClicked();} );
this.addChild(this.background);
this.clickBackgroundToClose = true;
this.dialogWidth = this.boxWidth;
this.dialogHeight = this.boxHeight;
this.scrollPool = new Engine.ObjectPool(GraphicViewerItem);
this.graphicWindow = new Engine.ScrollWindow();
this.graphicWindow.displayItemSource = (data) => this.getGraphicScrollItem(data);
this.graphicWindow.displayItemReturn = (item) => this.returnGraphicScrollItem(item);
this.graphicWindow.x = 25;
this.graphicWindow.y = 40;
this.graphicWindow.layout(200, this.boxHeight - 50, 1);
this.graphicWindow.scrollPane.onScroll.addListener(this, this.paneScrolled);
this.addChild(this.graphicWindow);
this.updateFilterTimer = new Engine.SimpleTimer();
this.filterHolder = document.createElement("div");
this.filterHolder.innerHTML = "<input type=text id=graphicFilter placeholder='Graphic Filter' style='width:100%'>";
this.filterText = getChildById(this.filterHolder, "graphicFilter");
this.filterText.onfocus = () => KeyboardManager.disable();
this.filterText.onblur = () => KeyboardManager.enable();
this.filterHolder.style.position = "absolute";
this.filterHolder.style.padding = "4px 4px 4px 4px";
this.filterHolder.style.backgroundColor = "#000000";
this.filterHolder.style.width = "400px";
this.graphicDefsToShow = [];
this.scrollIndex = 0;
this.scrollContinuePercent = 0.8;
this.initScroll(true);
this.filterText.onchange = () => this.filterChanged();
this.filterText.oninput = () => this.filterChanged();
this.graphic = new Engine.Drawable();
this.addChild(this.graphic);
this.playButton = new Engine.DrawableButton("Button_SimpleGreen", "|>");
this.playButton.setDimensions(30, 30);
this.playButton.onClick = () => this.clickedPlay();
this.nextSequenceButton = new Engine.DrawableButton("Button_SimpleGreen", ">>");
this.nextSequenceButton.setDimensions(30, 30);
this.nextSequenceButton.onClick = () => this.clickedNextSequence();
this.prevSequenceButton = new Engine.DrawableButton("Button_SimpleGreen", "<<");
this.prevSequenceButton.setDimensions(30, 30);
this.prevSequenceButton.onClick = () => this.clickedPrevSequence();
this.addChild(this.playButton);
this.addChild(this.nextSequenceButton);
this.addChild(this.prevSequenceButton);
this.frameText = new Engine.DrawableText();
this.addChild(this.frameText);
this.layout(this.boxWidth, this.boxHeight);
this.showDef(null);
}
clickedPlay(forcePlayStop = undefined)
{
if (this.graphic.playing || forcePlayStop === false)
{
this.graphic.stop();
this.playButton.setButtonText("|>");
this.playButton.setDimensions(30, 30);
this.playButton.enabled = this.graphic.numFrames > 1;
}
else if (!this.graphic.playing || forcePlayStop === true)
{
this.graphic.play();
this.playButton.setButtonText("||");
this.playButton.setDimensions(30, 30);
}
}
clickedPrevSequence()
{
this.graphic.setSequence((this.graphic.sequence - 1 + this.graphics.numSequences) % this.graphic.numSequences);
this.playButton.enabled = this.graphic.numFrames > 1;
}
clickedNextSequence()
{
this.graphic.setSequence((this.graphic.sequence + 1) % this.graphic.numSequences);
this.playButton.enabled = this.graphic.numFrames > 1;
}
paneScrolled()
{
let scrollHeight = this.graphicWindow.scrollPane.getScrollHeight();
if (this.scrollIndex < this.graphicDefsToShow.length && this.graphicWindow.scrollPane.currentScrollAmount >= scrollHeight * this.scrollContinuePercent)
{
this.initScroll(false);
this.graphicWindow.scrollPane.setScrollPercentFromScrollAmount();
this.graphicWindow.scrollBar.updateScrollPos();
this.graphicWindow.scrollBar.beginDragScroll();
this.scrollContinuePercent = 1 - (1 - this.scrollContinuePercent) * 0.9;
}
}
initScroll(resetScroll)
{
if (resetScroll)
{
this.scrollContinuePercent = 0.8;
this.graphicWindow.clear();
this.scrollIndex = 0;
let filter = this.filterText.value.toLowerCase().trim();
let filterNum = 0;
if (filter.length == 0)
{
filter = null;
}
else
{
filterNum = parseInt(filter);
try
{
filter = new RegExp(filter, "gi");
} catch
{
filter = null;
}
}
this.graphicDefsToShow = Object.values(Engine.GraphicFactoryInstance.graphicDataByName).sort((a, b) => a.id - b.id).filter(
g => !filter || filter.test(g.name.toLowerCase()) || filterNum == g.id
);
}
let limit = Math.min(this.scrollIndex + 2500, this.graphicDefsToShow.length);
for (let i = this.scrollIndex; i < limit; i++)
{
this.scrollIndex++;
this.graphicWindow.addItem(this.graphicDefsToShow[i], 200, GraphicViewerStatics.ItemHeight);
}
}
filterChanged()
{
this.updateFilterTimer.start(0.25, () => this.filterUpdated());
}
filterUpdated()
{
this.initScroll(true);
}
positionFilter()
{
let loc = this.localToGlobal(new Vector2(300, 60));
this.filterHolder.style.left = loc.x + "px";
this.filterHolder.style.top = loc.y + "px";
}
getGraphicScrollItem(graphicDef)
{
let item = this.scrollPool.getNextObject();
item.init(graphicDef);
item.onClick = this.clickedItem.bind(this);
return item;
}
clickedItem(graphicDef)
{
this.showDef(graphicDef);
}
showDef(graphicDef)
{
if (graphicDef)
{
this.graphic.loadFromGraphicName(graphicDef.name);
this.graphic.setSequence(0);
this.graphic.gotoAndStop(0);
this.clickedPlay(false);
this.prevSequenceButton.enabled = this.graphic.numSequences > 1;
this.nextSequenceButton.enabled = this.graphic.numSequences > 1;
}
else
{
this.graphic.clearSprite();
this.playButton.setButtonText("|>");
this.playButton.setDimensions(30, 30);
this.prevSequenceButton.enabled = false;
this.nextSequenceButton.enabled = false;
}
}
returnGraphicScrollItem(item)
{
item.clear();
this.scrollPool.returnObject(item);
}
closeClicked()
{
this.hide();
}
show()
{
this.active = true;
this.parentClip.addChild(this);
this.layout(this.boxWidth, this.boxHeight);
this.showDef(null);
this.showDialog();
}
update(timeElapsed)
{
super.update(timeElapsed);
if (this.graphic.graphicData)
{
let id = this.graphic.graphicData.id;
this.frameText.setText((id == -1 ? "" : "(" + id + ") ") + this.graphic.graphicData.name + "\nSeq " + this.graphic.sequence + " / " + this.graphic.numSequences + " Frame: " + this.graphic.frame + " / " + this.graphic.numFrames);
}
else
{
this.frameText.setText("");
}
}
finishSlide()
{
super.finishSlide();
document.body.appendChild(this.filterHolder);
this.positionFilter();
}
layout(width, height)
{
this.boxWidth = width;
this.boxHeight = height;
this.background.layout(this.boxWidth, this.boxHeight);
this.graphic.y = height - 150;
this.graphic.x = (width - 200) * 0.5 + 200;
this.playButton.x = (width - 200) * 0.5 + 185;
this.nextSequenceButton.x = this.playButton.x + 35;
this.prevSequenceButton.x = this.playButton.x - 35;
this.playButton.y = this.nextSequenceButton.y = this.prevSequenceButton.y = height - 50;
this.frameText.x = 240;
this.frameText.y = height - 60;
}
hide(instant /*bool*/)
{
super.hide(instant);
document.body.removeChild(this.filterHolder);
}
}
