stable
parent
59c0f68dec
commit
540700deb5
|
|
@ -1,17 +0,0 @@
|
|||
<script>
|
||||
function new3DProject() {
|
||||
new R3.Project.D3({
|
||||
name : 'New Project'
|
||||
});
|
||||
}
|
||||
function new2DProject() {
|
||||
new R3.Project.D2();
|
||||
}
|
||||
|
||||
</script>
|
||||
<div><h4><?=__('3D Entity Component System based Engine for the Web - based on Three.js')?></h4></div>
|
||||
<div><?=__('Design - Create - Experience')?></div>
|
||||
<div>-</div>
|
||||
<div><?=__('Choose a project from your list above or create a new one')?></div>
|
||||
<div><button class="button" onclick="new3DProject()"><?=__('Create a new 3D Project')?></button></div>
|
||||
<div><button class="button" onclick="new2DProject()"><?=__('Create a new 2D Project')?></button></div>
|
||||
|
|
@ -37,10 +37,11 @@ use Cake\Utility\Inflector;
|
|||
<script src="https://api.r3js.org/r3.js"></script>
|
||||
<script src="https://api.r3js.org/config.js"></script>
|
||||
<script src="https://api.r3js.org/three.js"></script>
|
||||
<script src="https://api.r3js.org/pixi.js"></script>
|
||||
<script src="https://api.r3js.org/OrbitControls.js"></script>
|
||||
|
||||
<div class="div-main">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-trans" style="z-index: 1">
|
||||
<a class="navbar-brand" href="/" onclick="alert('You shouldn\'t navigate away from this page - unless you want to lose all your changes'); return false;">r3.js - editor</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -48,11 +49,14 @@ use Cake\Utility\Inflector;
|
|||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<button id="button-menu" class="button-menu"><?=__('Menu') ?></button>
|
||||
<button id="buttonMenu" class="button-menu"><?=__('Menu') ?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<select id="selectProject" class="nav-link"><option><?=__('Select Project') ?></option></select>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="buttonClose" class="button-menu"><?=__('Close')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<select id="selectEntity" class="nav-link"><option><?=__('Select Entity') ?></option></select>
|
||||
</li>
|
||||
|
|
@ -60,39 +64,42 @@ use Cake\Utility\Inflector;
|
|||
<select id="selectComponent" class="nav-link"><option><?=__('Select Component') ?></option></select>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<select id="selectCreateComponent" class="nav-link"><option><?=__('Create Component') ?></option></select>
|
||||
<select id="selectCreateComponent" class="nav-link"><option value="0"><?=__('Create Something') ?></option></select>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="button-create" class="button-menu"><?=__('Create')?></button>
|
||||
<button id="buttonCreate" class="button-menu"><?=__('Create')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<select id="selectCustomCodeComponent" class="nav-link"><option><?=__('Select Code') ?></option></select>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="button-code-editor" class="button-menu"><?=__('Code Editor')?></button>
|
||||
<button id="buttonCodeEditor" class="button-menu"><?=__('Code')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<select id="selectMode" class="nav-link"><option><?=__('Edit Mode')?></option><option><?=__('Run Mode')?></option></select>
|
||||
<select id="selectMode" class="nav-link"><option value="0"><?=__('Edit Mode')?></option><option value="1"><?=__('Run Mode')?></option></select>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="button-start" class="button-menu"><?=__('Start')?></button>
|
||||
<button id="buttonStart" class="button-menu"><?=__('Start')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="button-pause" class="button-menu"><?=__('Pause')?></button>
|
||||
<button id="buttonPause" class="button-menu"><?=__('Pause')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="button-restart" class="button-menu"><?=__('Restart')?></button>
|
||||
<button id="buttonRestart" class="button-menu"><?=__('Restart')?></button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<button id="button-save" class="button-menu" disabled="disabled"><?=__('Save')?></button>
|
||||
<button id="buttonSave" class="button-menu" disabled="disabled"><?=__('Save')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="button-delete" class="button-menu" disabled="disabled"><?=__('Delete')?></button>
|
||||
<button id="buttonSaveAll" class="button-menu" disabled="disabled"><?=__('Save All')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="button-sign-out" class="button-menu" disabled="disabled" onclick="signOut()"><?=__('Sign Out')?></button>
|
||||
<button id="buttonDelete" class="button-menu" disabled="disabled"><?=__('Delete')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button id="buttonSignOut" class="button-menu" disabled="disabled" onclick="signOut()"><?=__('Sign Out')?></button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
|
||||
|
|
@ -101,7 +108,15 @@ use Cake\Utility\Inflector;
|
|||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="div-workarea" class="div-home">
|
||||
<div id="divMenu" class="div-menu">
|
||||
<div><h4><?=__('3D Entity Component System based Engine for the Web - based on Three.js')?></h4></div>
|
||||
<div><?=__('Design - Create - Experience')?></div>
|
||||
<div>-</div>
|
||||
<div><?=__('Choose a project from your list above or create a new one')?></div>
|
||||
<div><button class="button" onclick="R3.New3DProject()"><?=__('Create a new 3D Project')?></button></div>
|
||||
<div><button class="button" onclick="R3.New2DProject()"><?=__('Create a new 2D Project')?></button></div>
|
||||
</div>
|
||||
<div id="div-workarea" class="div-workarea">
|
||||
<?= $this->fetch('content') ?>
|
||||
</div>
|
||||
<footer>
|
||||
|
|
@ -109,82 +124,6 @@ use Cake\Utility\Inflector;
|
|||
</footer>
|
||||
<script>
|
||||
|
||||
R3.GraphicsRuntimes = [
|
||||
new R3.Runtime.Graphics.Three()
|
||||
];
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.GET_RUNTIME,
|
||||
function(component) {
|
||||
|
||||
var graphics = R3.GraphicsRuntimes[0];
|
||||
|
||||
return {
|
||||
graphics : graphics
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.COMPONENT_REGISTER,
|
||||
function(data) {
|
||||
|
||||
var select = null;
|
||||
|
||||
var option = null;
|
||||
|
||||
if (data.component instanceof R3.Project) {
|
||||
|
||||
select = document.getElementById('selectProject');
|
||||
|
||||
option = document.createElement('option');
|
||||
|
||||
option.appendChild( document.createTextNode(data.component.name) );
|
||||
|
||||
option.value = data.component.id;
|
||||
|
||||
select.appendChild(option);
|
||||
|
||||
select.selectedIndex = select.options.length - 1;
|
||||
|
||||
}
|
||||
|
||||
select = document.getElementById('selectComponent');
|
||||
|
||||
option = document.createElement('option');
|
||||
|
||||
option.appendChild(document.createTextNode(data.component.name));
|
||||
|
||||
option.value = data.component.id;
|
||||
|
||||
select.appendChild(option);
|
||||
|
||||
select.selectedIndex = select.options.length - 1;
|
||||
|
||||
if (data.component instanceof R3.Canvas) {
|
||||
var workarea = document.getElementById('div-workarea');
|
||||
workarea.innerHTML = '';
|
||||
workarea.appendChild(data.component.instance);
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.GET_API_URL,
|
||||
function() {
|
||||
return {
|
||||
apiUrl : R3.Config.api.url,
|
||||
queryApiUrl : R3.Config.queryApi.url,
|
||||
apiAuthorization : R3.Config.api.clientPassword
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
R3.storageSystem = new R3.System.Storage();
|
||||
R3.storageSystem.start();
|
||||
|
||||
onSignIn = function(googleUser) {
|
||||
|
||||
R3.Event.Async(
|
||||
|
|
@ -194,9 +133,10 @@ use Cake\Utility\Inflector;
|
|||
},
|
||||
function(data) {
|
||||
console.log('signed in');
|
||||
document.getElementById('button-sign-out').removeAttribute('disabled');
|
||||
document.getElementById('button-save').removeAttribute('disabled');
|
||||
document.getElementById('button-delete').removeAttribute('disabled');
|
||||
R3.save.removeAttribute('disabled');
|
||||
R3.saveAll.removeAttribute('disabled');
|
||||
R3.delete.removeAttribute('disabled');
|
||||
R3.signOut.removeAttribute('disabled');
|
||||
},
|
||||
function(error) {
|
||||
console.log('An error occured during Sign-In: ' + error);
|
||||
|
|
@ -212,18 +152,450 @@ use Cake\Utility\Inflector;
|
|||
null,
|
||||
function(data) {
|
||||
console.log('User signed out.');
|
||||
document.getElementById('button-sign-out').setAttribute('disabled', 'disabled');
|
||||
document.getElementById('button-save').setAttribute('disabled', 'disabled');
|
||||
document.getElementById('button-delete').setAttribute('disabled', 'disabled');
|
||||
R3.save.setAttribute('disabled', 'disabled');
|
||||
R3.saveAll.setAttribute('disabled', 'disabled');
|
||||
R3.delete.setAttribute('disabled', 'disabled');
|
||||
R3.signOut.setAttribute('disabled', 'disabled');
|
||||
},
|
||||
function(error) {
|
||||
console.log('An error occured during Sign-Out: ' + error);
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
R3.projectInfo = {};
|
||||
|
||||
R3.New3DProject = function() {
|
||||
new R3.Project.D3({
|
||||
name : '3D Project - ' + R3.selectProject.options.length
|
||||
});
|
||||
R3.ToggleMenu();
|
||||
};
|
||||
|
||||
R3.New2DProject = function() {
|
||||
new R3.Project.D2({
|
||||
name: '2D Project - ' + R3.selectProject.options.length
|
||||
});
|
||||
R3.ToggleMenu();
|
||||
};
|
||||
|
||||
R3.CloseProject = function() {
|
||||
var project = R3.GetCurrentProject();
|
||||
if (project) {
|
||||
project.remove();
|
||||
}
|
||||
};
|
||||
|
||||
R3.CreateComponent = function() {
|
||||
|
||||
var componentType = Number(R3.selectCreateComponent.options[R3.selectCreateComponent.selectedIndex].value);
|
||||
|
||||
if (componentType === 0) {
|
||||
alert('Please select something to create first');
|
||||
return;
|
||||
}
|
||||
|
||||
var project = R3.GetCurrentProject();
|
||||
if (R3.Utils.UndefinedOrNull(project)) {
|
||||
alert('Please create a project first (by going to the menu), or select one from the list');
|
||||
return;
|
||||
}
|
||||
|
||||
R3.tempSubscription = R3.Event.Subscribe(
|
||||
R3.Event.INSTANCE_LOADED,
|
||||
function(data) {
|
||||
|
||||
/**
|
||||
* todo : ensure this listener doesn't react on other INSTANCE_LOADED events except the one below
|
||||
*/
|
||||
|
||||
var project = R3.GetCurrentProject();
|
||||
|
||||
if (data.component instanceof R3.Entity) {
|
||||
|
||||
R3.projectInfo[project.id].entity = data.component;
|
||||
|
||||
R3.BuildEntityList(project);
|
||||
R3.BuildComponentList(project, data.component);
|
||||
|
||||
} else {
|
||||
|
||||
R3.BuildComponentList(project, R3.projectInfo[project.id].entity);
|
||||
|
||||
}
|
||||
|
||||
R3.tempSubscription.remove();
|
||||
}
|
||||
);
|
||||
|
||||
var info = R3.GetComponentInfo(componentType);
|
||||
|
||||
if (info) {
|
||||
|
||||
var totalComponents = project.findComponentsByConstructor(info.constructor).length;
|
||||
|
||||
var entity = R3.projectInfo[project.id].entity;
|
||||
|
||||
var parent = project;
|
||||
|
||||
/**
|
||||
* Entities by default should not belong to other Entities - This should be a manual task
|
||||
*/
|
||||
if (entity && info.constructor !== R3.Entity) {
|
||||
parent = entity;
|
||||
}
|
||||
|
||||
new info.constructor({
|
||||
parent : parent,
|
||||
name : project.name + ' - ' + R3.Component.GetComponentFriendlyName(componentType) + ' - ' + Number(Number(totalComponents) + 1)
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
R3.ApplicationModeChange = function() {
|
||||
|
||||
var project = R3.GetCurrentProject();
|
||||
|
||||
project.applicationMode = Number(R3.selectMode.options[R3.selectMode.selectedIndex].value);
|
||||
project.updateInstance('applicationMode');
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Builds entity list for the project
|
||||
* @param project
|
||||
* @constructor
|
||||
*/
|
||||
R3.BuildEntityList = function(project) {
|
||||
|
||||
R3.selectEntity.innerHTML = '';
|
||||
|
||||
option = document.createElement('option');
|
||||
option.appendChild(document.createTextNode('Select Entity'));
|
||||
R3.selectEntity.appendChild(option);
|
||||
|
||||
Object.keys(project.idToObject).map(
|
||||
function(id) {
|
||||
var component = R3.EntityManager.Instance.findComponentById(id);
|
||||
if (component instanceof R3.Entity) {
|
||||
R3.AddComponentToSelect(R3.selectEntity, id);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
R3.Utils.SortSelect(R3.selectEntity);
|
||||
|
||||
var entity = R3.projectInfo[project.id].entity;
|
||||
|
||||
if (entity) {
|
||||
R3.Utils.SetSelectIndex(R3.selectEntity, entity.id);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Builds component list, and if entity specified, only components for this entity
|
||||
* @param project
|
||||
* @param entity
|
||||
* @constructor
|
||||
*/
|
||||
R3.BuildComponentList = function(project, entity) {
|
||||
|
||||
if (R3.Utils.UndefinedOrNull(entity)) {
|
||||
entity = null;
|
||||
}
|
||||
|
||||
R3.selectComponent.innerHTML = '';
|
||||
|
||||
var option = document.createElement('option');
|
||||
option.appendChild(document.createTextNode('Select Component'));
|
||||
R3.selectComponent.appendChild(option);
|
||||
|
||||
Object.keys(project.idToObject).map(
|
||||
function(id) {
|
||||
if (entity) {
|
||||
var component = R3.EntityManager.Instance.findComponentById(id);
|
||||
if (component.parent === entity) {
|
||||
R3.AddComponentToSelect(R3.selectComponent, id);
|
||||
}
|
||||
} else {
|
||||
R3.AddComponentToSelect(R3.selectComponent, id);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
R3.Utils.SortSelect(R3.selectComponent);
|
||||
|
||||
};
|
||||
|
||||
R3.SetCurrentProject = function(project) {
|
||||
|
||||
R3.Utils.SetSelectIndex(R3.selectProject, project.id);
|
||||
|
||||
R3.BuildEntityList(project);
|
||||
|
||||
R3.BuildComponentList(project, R3.projectInfo[project.id].entity);
|
||||
|
||||
R3.selectMode.selectedIndex = project.applicationMode;
|
||||
|
||||
};
|
||||
|
||||
R3.SetCurrentEntity = function(project, entity) {
|
||||
|
||||
R3.Utils.SetSelectIndex(R3.selectEntity, entity.id);
|
||||
|
||||
R3.projectInfo[project.id].entity = entity;
|
||||
|
||||
R3.BuildEntityList(project);
|
||||
|
||||
R3.BuildComponentList(project, R3.projectInfo[project.id].entity);
|
||||
|
||||
};
|
||||
|
||||
R3.ProjectChange = function() {
|
||||
|
||||
var project = R3.GetCurrentProject();
|
||||
|
||||
R3.SetCurrentProject(project);
|
||||
|
||||
};
|
||||
|
||||
R3.EntityChange = function() {
|
||||
|
||||
var entity = R3.GetCurrentEntity();
|
||||
var project = R3.GetCurrentProject();
|
||||
|
||||
if (!project) {
|
||||
throw new Error('todo - no project');
|
||||
}
|
||||
|
||||
if (entity) {
|
||||
|
||||
R3.projectInfo[project.id].entity = entity;
|
||||
R3.SetCurrentEntity(project, entity);
|
||||
|
||||
} else {
|
||||
|
||||
R3.projectInfo[project.id].entity = null;
|
||||
R3.SetCurrentProject(project);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
R3.GetCurrentProject = function() {
|
||||
return R3.EntityManager.Instance.findComponentById(R3.selectProject.options[R3.selectProject.selectedIndex].value);
|
||||
};
|
||||
|
||||
R3.GetCurrentEntity = function() {
|
||||
return R3.EntityManager.Instance.findComponentById(R3.selectEntity.options[R3.selectEntity.selectedIndex].value);
|
||||
};
|
||||
|
||||
R3.AddComponentToSelect = function(select, id) {
|
||||
|
||||
var component = R3.EntityManager.Instance.findComponentById(id);
|
||||
|
||||
if (R3.Utils.UndefinedOrNull(component)) {
|
||||
console.warn('Component not found : ' + id);
|
||||
}
|
||||
|
||||
if (
|
||||
component instanceof R3.Color ||
|
||||
component instanceof R3.Vector2 ||
|
||||
component instanceof R3.Vector3 ||
|
||||
component instanceof R3.Vector4 ||
|
||||
component instanceof R3.Matrix4 ||
|
||||
component instanceof R3.Quaternion
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
var option = document.createElement('option');
|
||||
option.value = id;
|
||||
// option.appendChild(document.createTextNode(component.name.replace(R3.GetCurrentProject().name + ' - ','')));
|
||||
option.appendChild(document.createTextNode(component.name));
|
||||
select.appendChild(option);
|
||||
};
|
||||
|
||||
R3.ToggleMenu = function() {
|
||||
R3.menuVisible = !R3.menuVisible;
|
||||
if (R3.menuVisible) {
|
||||
R3.divMenu.style.display = 'flex';
|
||||
} else {
|
||||
R3.divMenu.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
R3.CanvasSelect = function(canvas) {
|
||||
return function() {
|
||||
|
||||
var project = R3.Utils.GetParentProject(canvas);
|
||||
|
||||
if (!project) {
|
||||
throw new Error('todo : could not find project');
|
||||
}
|
||||
|
||||
R3.SetCurrentProject(project);
|
||||
}
|
||||
};
|
||||
|
||||
R3.GraphicsRuntimes = [
|
||||
new R3.Runtime.Graphics.Three(),
|
||||
new R3.Runtime.Graphics.Pixi()
|
||||
];
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.GET_RUNTIME,
|
||||
function(component) {
|
||||
|
||||
var graphics = R3.GraphicsRuntimes[0];
|
||||
|
||||
if (component.parent instanceof R3.API.Renderer.D2) {
|
||||
graphics = R3.GraphicsRuntimes[1];
|
||||
}
|
||||
|
||||
return {
|
||||
graphics : graphics
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.MAXIMUM_PROJECTS,
|
||||
function() {
|
||||
alert('Maximum Projects per Session Reached');
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.GET_APPLICATION_MODE,
|
||||
function() {
|
||||
return Number(R3.selectMode.options[R3.selectMode.selectedIndex].value);
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.REMOVE_COMPONENT,
|
||||
function(data) {
|
||||
|
||||
if (data.component instanceof R3.Project) {
|
||||
|
||||
delete R3.projectInfo[data.component.id];
|
||||
|
||||
R3.Utils.RemoveFromSelect(R3.selectProject, data.component.id);
|
||||
R3.selectProject.selectedIndex = R3.selectProject.options.length - 1;
|
||||
|
||||
var project = R3.GetCurrentProject();
|
||||
if (project) {
|
||||
R3.SetCurrentProject(project);
|
||||
}
|
||||
}
|
||||
|
||||
R3.Utils.RemoveFromSelect(R3.selectComponent, data.component.id);
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.INSTANCE_CREATED,
|
||||
function(data) {
|
||||
if (data.component instanceof R3.Canvas) {
|
||||
var workarea = document.getElementById('div-workarea');
|
||||
workarea.appendChild(data.component.instance);
|
||||
data.component.instance.addEventListener('click', R3.CanvasSelect(data.component));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.PROJECT_LOADED,
|
||||
function(data) {
|
||||
|
||||
var option = null;
|
||||
|
||||
if (data.component instanceof R3.Project) {
|
||||
|
||||
option = document.createElement('option');
|
||||
|
||||
option.appendChild(document.createTextNode(data.component.name));
|
||||
|
||||
option.value = data.component.id;
|
||||
|
||||
R3.selectProject.appendChild(option);
|
||||
|
||||
R3.selectProject.selectedIndex = R3.selectProject.options.length - 1;
|
||||
|
||||
var project = R3.GetCurrentProject();
|
||||
|
||||
R3.projectInfo[project.id] = {
|
||||
entity : null
|
||||
};
|
||||
|
||||
R3.SetCurrentProject(project);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
R3.Event.Subscribe(
|
||||
R3.Event.GET_API_URL,
|
||||
function() {
|
||||
return {
|
||||
apiUrl : R3.Config.api.url,
|
||||
queryApiUrl : R3.Config.queryApi.url,
|
||||
apiAuthorization : R3.Config.api.clientPassword
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
R3.buttonClose = document.getElementById('buttonClose');
|
||||
R3.buttonClose.addEventListener('click', R3.CloseProject);
|
||||
|
||||
R3.buttonCreate = document.getElementById('buttonCreate');
|
||||
R3.buttonCreate.addEventListener('click', R3.CreateComponent);
|
||||
|
||||
R3.selectCreateComponent = document.getElementById('selectCreateComponent');
|
||||
for (var i = 1; i < R3.MAX_COMPONENTS; i++) {
|
||||
var option = document.createElement('option');
|
||||
option.value = String(i);
|
||||
option.appendChild(document.createTextNode(R3.Component.GetComponentFriendlyName(i)));
|
||||
R3.selectCreateComponent.appendChild(option);
|
||||
}
|
||||
R3.Utils.SortSelect(R3.selectCreateComponent);
|
||||
|
||||
R3.menuVisible = true;
|
||||
R3.divMenu = document.getElementById('divMenu');
|
||||
R3.buttonMenu = document.getElementById('buttonMenu');
|
||||
R3.buttonMenu.addEventListener('click', R3.ToggleMenu);
|
||||
|
||||
R3.selectProject = document.getElementById('selectProject');
|
||||
R3.selectProject.addEventListener('change', R3.ProjectChange);
|
||||
|
||||
R3.selectEntity = document.getElementById('selectEntity');
|
||||
R3.selectEntity.addEventListener('change', R3.EntityChange);
|
||||
|
||||
|
||||
R3.selectComponent = document.getElementById('selectComponent');
|
||||
|
||||
R3.selectMode = document.getElementById('selectMode');
|
||||
R3.selectMode.addEventListener("change", R3.ApplicationModeChange);
|
||||
|
||||
R3.storageSystem = new R3.System.Storage();
|
||||
R3.storageSystem.start();
|
||||
|
||||
R3.renderSystem = new R3.System.Render();
|
||||
R3.renderSystem.start();
|
||||
|
||||
R3.inputSystem = new R3.System.Input();
|
||||
R3.inputSystem.start();
|
||||
|
||||
R3.save = document.getElementById('buttonSave');
|
||||
R3.saveAll = document.getElementById('buttonSaveAll');
|
||||
R3.delete = document.getElementById('buttonDelete');
|
||||
R3.signOut = document.getElementById('buttonSignOut');
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -10,29 +10,50 @@ body {
|
|||
padding:0;
|
||||
}
|
||||
|
||||
/*div.sticky {*/
|
||||
/* position:fixed;*/
|
||||
/* height: 100%;*/
|
||||
/* width:100%;*/
|
||||
/* background-color:#111111;*/
|
||||
/*}*/
|
||||
.bg-dark-trans {
|
||||
background-color: #343a40ad;
|
||||
}
|
||||
|
||||
/*div.centered {*/
|
||||
/* text-align: center;*/
|
||||
/*}*/
|
||||
select {
|
||||
background-color: #343a40ad;
|
||||
}
|
||||
|
||||
canvas {
|
||||
box-shadow: 0px 0 8px 8px #7dff9987;
|
||||
border: 2px transparent solid;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
canvas:focus,
|
||||
canvas:active
|
||||
{
|
||||
outline: unset;
|
||||
border: 2px #b2dab2 solid;
|
||||
}
|
||||
|
||||
.div-menu {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
z-index: 2;
|
||||
box-shadow: 0px 0 8px 8px #7dff9987;
|
||||
background-color: #1a1a1acc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*canvas {*/
|
||||
/* bottom:0;*/
|
||||
/* width:100%;*/
|
||||
/* height:100%;*/
|
||||
/*}*/
|
||||
.button:hover {
|
||||
box-shadow: 0 0 10px 10px #00cc2b;
|
||||
box-shadow: 0px 0px 10px 10px #7dff99;
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
outline:unset;
|
||||
border: 2px #2ca02c solid;
|
||||
border: 2px #b2dab2 solid;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
@ -40,7 +61,7 @@ body {
|
|||
border: 2px transparent solid;
|
||||
margin-top: 20px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 0 10px 0px #00cc2b;
|
||||
box-shadow: 0 0 10px 0px #7dff99;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
padding: 5px 10px 5px 10px;
|
||||
|
|
@ -49,20 +70,32 @@ body {
|
|||
|
||||
.button-menu:focus {
|
||||
outline:unset;
|
||||
border:2px #2ca02c solid;
|
||||
border: 2px #b2dab2 solid;
|
||||
}
|
||||
|
||||
.button-menu:hover {
|
||||
box-shadow: 2px 3px 20px 0px #00cc2b;
|
||||
box-shadow: 0px 0px 8px 8px #7dff99f7;
|
||||
color: #1fe449c2;
|
||||
}
|
||||
|
||||
.button-menu:disabled {
|
||||
box-shadow: 2px 3px 7px 0px #ff898599;
|
||||
color: #ec6c6c78;
|
||||
color: #ef8181a1;
|
||||
box-shadow: 0 0 10px 0px #ff3434c9;
|
||||
}
|
||||
|
||||
|
||||
.button-menu {
|
||||
border: 2px #ffffff00 solid;
|
||||
transition: box-shadow 0.5s, border 0.5s, color 0.5s;
|
||||
height: 35px;
|
||||
background-color: transparent;
|
||||
color: #a9a6a6;
|
||||
box-shadow: 0 0 6px 6px #7dff9973;
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.button-menu-light {
|
||||
border: 2px transparent solid;
|
||||
transition: box-shadow 0.5s, border 0.5s;
|
||||
height: 35px;
|
||||
|
|
@ -80,13 +113,15 @@ body {
|
|||
background-color: #000000ad;
|
||||
}
|
||||
|
||||
.div-home {
|
||||
.div-workarea {
|
||||
padding-top: 2.5%;
|
||||
overflow-y: auto;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #000000ad;
|
||||
flex-direction: column;
|
||||
flex-wrap:wrap;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue