Commit 681bc5e8 authored by Max Bebök's avatar Max Bebök

#54 added draggable dialog to search actors, UI + finder

parent 669dd595
......@@ -190,6 +190,8 @@
<h1 class="title data-footer"></h1>
</footer>
<div class="window-container"></div>
</div>
</body>
</html>
......@@ -167,6 +167,8 @@
<h1 class="title data-footer"></h1>
</footer>
<div class="window-container"></div>
</div>
</body>
</html>
<div id="searchWindow-actor">
<style>
#searchWindow-actor
{
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 500px;
resize: both;
overflow: auto;
background-color: #21252b;
border: 1px solid black;
padding: 5px;
transition: opacity 0.2s ease-in-out;
}
#searchWindow-actor.isMoving
{
opacity: 0.7;
}
#searchWindow-actor > div {
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
#searchWindow-actor .search-header {
flex-shrink: 0;
}
#searchWindow-actor .search-content {
flex-grow: 1;
padding: 5px;
overflow: auto;
}
#searchWindow-actor .search-footer {
flex-shrink: 0;
}
#searchWindow-actor .search-footer > span {
float: right;
}
#searchWindow-actor .drag-bar {
width: 100%;
height: 24px;
_background-color: #ffbb3c;
background-color: #353b45;
border: 1px solid #000000;
cursor: move;
color: #929292;
padding-left: 4px;
margin-bottom: 5px;
}
#searchWindow-actor h5 {
margin-top: 5px;
}
#searchWindow-actor .data-searchValue {
margin-bottom: 5px;
}
#searchWindow-actor .btn-group:last-child {
float: right;
}
#searchWindow-actor .btn-group button {
cursor: pointer;
}
#searchWindow-actor .result-container > div {
border: 1px solid black;
width: 100%;
}
</style>
<div>
<div class="search-header">
<div class="drag-bar">
Actor-Search
</div>
<div>
<input type="text" class="form-control data-searchValue" placeholder="Search for actors..." />
</div>
<div>
<div class="btn-group">
<button class="btn btn-default" data-filter="id">ID</button>
<button class="btn btn-default" data-filter="srt">SRT</button>
<button class="btn btn-default active" data-filter="name">Name</button>
<button class="btn btn-default" data-filter="params">Params</button>
</div>
<div class="btn-group">
<button class="btn btn-default active" data-filter="static">Static</button>
<button class="btn btn-default active" data-filter="dynamic">Dynamic</button>
</div>
</div>
</div>
<div class="search-content">
<table>
<thead>
<tr>
<th>Name</th>
<th>HashId</th>
<th>SRTHash</th>
<th>Type</th>
</tr>
</thead>
<tbody class="data-resultTable">
</tbody>
</table>
</div>
<div class="search-footer">
<button class="btn btn btn-default data-tool-selectAll">Select All</button>
<span>
Actors found: <span class="data-resultCount">0</span>
</span>
</div>
</div>
</div>
\ No newline at end of file
......@@ -23,6 +23,16 @@ module.exports = class Actor
return this.params.UnitConfigName.value;
}
getHashId()
{
return (this.params.HashId && this.params.HashId.value) ? this.params.HashId.value : 0;
}
getSRTHash()
{
return (this.params.SRTHash && this.params.SRTHash.value) ? this.params.SRTHash.value : 0;
}
setHandler(handler)
{
this.handler = handler;
......
/**
* @copyright 2018 - Max Bebök
* @author Max Bebök
* @license GNU-GPLv3 - see the "LICENSE" file in the root directory
*/
module.exports = class Actor_Search_Finder
{
constructor(actorHandler)
{
this.actorHandler = actorHandler;
console.log(this.actorHandler);
}
search(searchValue, filter)
{
console.warn("SEARCH");
console.log(filter);
console.log(searchValue);
const result = [];
for(const actorId in this.actorHandler.actors)
{
const actor = this.actorHandler.actors[actorId];
const params = actor.params;
if(params.UnitConfigName && params.UnitConfigName.value) {
const nameNorm = params.UnitConfigName.value.toLowerCase();
if(nameNorm.includes(searchValue)) {
result.push(actor);
//console.log(actor);
}
}
}
return result;
}
selectAll()
{
console.log("select all");
}
};
\ No newline at end of file
/**
* @copyright 2018 - Max Bebök
* @author Max Bebök
* @license GNU-GPLv3 - see the "LICENSE" file in the root directory
*/
const HTML_Loader = require("./../../../html_loader");
const Draggable = require('draggable');
module.exports = class Actor_Search_GUI
{
constructor(uiNode, actorFinder)
{
this.actorFinder = actorFinder;
this.windowNode = undefined;
this.filter = {};
this.searchValue = "";
this._createView(uiNode);
this._initFilters();
this._initActions();
this.resultNode = uiNode.querySelector(".data-resultTable");
}
/**
* loads and creates the HTML template
* @param {HTMLElement} uiNode target to append to
*/
_createView(uiNode)
{
const actorSearchHtml = new HTML_Loader('html/actor_search.html');
uiNode.appendChild(actorSearchHtml.create());
this.windowNode = uiNode.querySelector("#searchWindow-actor");
this.dragObj = new Draggable(this.windowNode, {
filterTarget: (target) => target.classList.contains("drag-bar"),
onDragStart: () => this.windowNode.classList.add("isMoving"),
onDragEnd: () => this.windowNode.classList.remove("isMoving"),
useGPU: true
});
}
/**
* triggers a search action
*/
_triggerSearch()
{
const result = this.actorFinder.search(this.searchValue, this.filter);
this.resultNode.innerHTML = result.reduce((resultHtml, actor) => {
return resultHtml + `<tr>
<td>${actor.getName()}</td>
<td>${actor.getHashId()}</td>
<td>${actor.getSRTHash()}</td>
<td>${actor.type}</td>
</tr>`;
}, "");
}
/**
* initializes filter callbacks and arrays
*/
_initFilters()
{
const filterNodes = this.windowNode.querySelectorAll("button[data-filter]");
for(let node of filterNodes)
{
const filterName = node.getAttribute("data-filter");
this.filter[filterName] = node.classList.contains("active");
node.onclick = () => {
if(this.filter[filterName] = !this.filter[filterName]) {
node.classList.add("active");
}else{
node.classList.remove("active");
}
this._triggerSearch();
};
}
this.windowNode.querySelector(".data-searchValue").onkeyup = (ev) => {
this.searchValue = ev.target.value;
this._triggerSearch();
};
}
/**
* inits actions-buttons
*/
_initActions()
{
this.windowNode.querySelector(".data-tool-selectAll").onclick = () => this.actorFinder.selectAll();
}
};
\ No newline at end of file
......@@ -7,6 +7,7 @@
const Mubin_Renderer = require("./renderer/renderer");
const Actor_Handler = require("./actor/handler/handler");
const Actor_Editor = require("./actor_editor/editor");
const Actor_Search_Finder = require("./actor/search/finder");
const Renderer_Settings = require("./renderer/settings");
const Actor_Loader = require("./actor/loader");
......@@ -39,9 +40,13 @@ module.exports = class Mubin_Editor
this.actorLoader = new Actor_Loader(this.actorHandler, (actorType) => this.generateMubinPath(actorType));
this.prodLoader = new PROD_Loader( this.actorHandler, (actorType) => this.generateProdPath(actorType));
this.actorFinder = new Actor_Search_Finder(this.actorHandler);
this.loadActorData = true;
this.loadProdData = false;
this.mubinRenderer.init(this.actorFinder);
this.mubinRenderer.renderer.addUpdateCallback(() => this.update());
this.actorHandler.setEditor(this.actorEditor);
......
......@@ -7,6 +7,7 @@
const Renderer = require("./../../3d_renderer/renderer");
const HTML_Loader = require("./../../html_loader");
const Actor_GUI = require("./../actor/gui");
const Actor_Search_GUI = require("./../actor/search/gui");
module.exports = class Mubin_Renderer
{
......@@ -21,14 +22,6 @@ module.exports = class Mubin_Renderer
this.uiNode = uiNode;
this.loader = loader;
this.clear();
}
clear()
{
if(this.renderer != null)
this.renderer.clear();
this.history = undefined;
this.renderer = new Renderer(this.canvasNode);
......@@ -46,6 +39,11 @@ module.exports = class Mubin_Renderer
this.renderer.updateDrawSize();
}
init(actorFinder)
{
this.actorSearchGui = new Actor_Search_GUI(this.uiNode.querySelector(".window-container"), actorFinder);
}
/**
* returns or queries the uiNode
* @param {String?} selector querySelector selector
......
......@@ -562,6 +562,10 @@ dotenv@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.0.0.tgz#24e37c041741c5f4b25324958ebbc34bca965935"
draggable@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/draggable/-/draggable-4.2.0.tgz#149c0ca176df6d8b512048c8e451f499fc047b9a"
duplexer3@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment