cybafelo
/
r3-editor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

darcula

beta.r3js.org
cybafelo 2019-10-24 09:28:05 +02:00
parent 439f8784b2
commit cbe65e35bb
2 changed files with 311 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

276
src/Template/Layout/default.ctp
View File

@ -25,8 +25,12 @@ use Cake\Utility\Inflector;
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<?= $this->Html->css('style.css') ?>
<?= $this->Html->css('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') ?>
<link rel="stylesheet" href="https://api.r3js.org/codemirror.css">
<link rel="stylesheet" href="https://api.r3js.org/simplescrollbars.css">
<link rel="stylesheet" href="https://api.r3js.org/darcula.css">
<?= $this->Html->css('style.css') ?>
</head>
<body>
@ -36,8 +40,24 @@ use Cake\Utility\Inflector;
<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>
<script src="https://api.r3js.org/dat.gui.js"></script>
<script src="https://api.r3js.org/controlKit.js"></script>
<script src="https://api.r3js.org/EffectComposer.js"></script>
<script src="https://api.r3js.org/ShaderPass.js"></script>
<script src="https://api.r3js.org/CopyShader.js"></script>
<script src="https://api.r3js.org/RenderPass.js"></script>
<script src="https://api.r3js.org/FXAAShader.js"></script>
<script src="https://api.r3js.org/ConvolutionShader.js"></script>
<script src="https://api.r3js.org/UnrealBloomPass.js"></script>
<script src="https://api.r3js.org/LuminosityHighPassShader.js"></script>
<script src="https://api.r3js.org/codemirror.js"></script>
<script src="https://api.r3js.org/simplescrollbars.js"></script>
<script src="https://api.r3js.org/comment.js"></script>
<script src="https://api.r3js.org/clike.js"></script>
<script src="https://api.r3js.org/javascript.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1">
<div class="div-header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-control" 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>
@ -59,6 +79,9 @@ use Cake\Utility\Inflector;
<li class="nav-item">
<select id="selectComponent" class="nav-link"><option><?=__('Select Component') ?></option></select>
</li>
<li class="nav-item">
<button id="buttonEdit" class="button-menu"><?=__('Edit')?></button>
</li>
<li class="nav-item">
<select id="selectCreateComponent" class="nav-link"><option value="0"><?=__('Create Something') ?></option></select>
</li>
@ -66,7 +89,7 @@ use Cake\Utility\Inflector;
<button id="buttonCreate" class="button-menu"><?=__('Create')?></button>
</li>
<li class="nav-item">
<select id="selectCode" class="nav-link"><option><?=__('New Code') ?></option></select>
<select id="selectCode" class="nav-link"><option>None</option></select>
</li>
<li class="nav-item">
<button id="buttonCode" class="button-menu"><?=__('Code')?></button>
@ -88,14 +111,11 @@ use Cake\Utility\Inflector;
<li class="nav-item">
<button id="buttonSave" class="button-menu" disabled="disabled"><?=__('Save')?></button>
</li>
<li class="nav-item">
<button id="buttonSaveAll" class="button-menu" disabled="disabled"><?=__('Save All')?></button>
</li>
<li class="nav-item">
<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>
<button id="buttonSignOut" class="button-menu" disabled="disabled"><?=__('Sign Out')?></button>
</li>
<li class="nav-item">
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
@ -103,6 +123,8 @@ use Cake\Utility\Inflector;
</ul>
</div>
</nav>
<div id="divGUI" class="div-gui"></div>
</div>
<div id="divMenu" class="div-menu">
<div><h4><?=__('Entity Component System based Engine for the Web - based on Three.js and Pixi.js')?></h4></div>
<div><?=__('Design - Create - Experience')?></div>
@ -112,7 +134,9 @@ use Cake\Utility\Inflector;
<div><button class="button" onclick="R3.New2DProject()"><?=__('Create a new 2D Project')?></button></div>
<div><button class="button" onclick="R3.New3DProject('mobile')"><?=__('Create a new 3D Mobile Project')?></button></div>
<div><button class="button" onclick="R3.New2DProject('mobile')"><?=__('Create a new 2D Mobile Project')?></button></div>
<div><button class="button" onclick="R3.New3DProject('mobile-vr')"><?=__('Create a new Mobile VR Project')?></button></div>
</div>
<div id="div-workarea" class="div-workarea">
<?= $this->fetch('content') ?>
</div>
@ -130,10 +154,9 @@ use Cake\Utility\Inflector;
},
function(data) {
console.log('signed in');
R3.save.removeAttribute('disabled');
R3.saveAll.removeAttribute('disabled');
R3.delete.removeAttribute('disabled');
R3.signOut.removeAttribute('disabled');
R3.buttonSave.removeAttribute('disabled');
R3.buttonDelete.removeAttribute('disabled');
R3.buttonSignOut.removeAttribute('disabled');
},
function(error) {
console.log('An error occured during Sign-In: ' + error);
@ -149,10 +172,9 @@ use Cake\Utility\Inflector;
null,
function(data) {
console.log('User signed out.');
R3.save.setAttribute('disabled', 'disabled');
R3.saveAll.setAttribute('disabled', 'disabled');
R3.delete.setAttribute('disabled', 'disabled');
R3.signOut.setAttribute('disabled', 'disabled');
R3.buttonSave.setAttribute('disabled', 'disabled');
R3.buttonDelete.setAttribute('disabled', 'disabled');
R3.buttonSignOut.setAttribute('disabled', 'disabled');
},
function(error) {
console.log('An error occured during Sign-Out: ' + error);
@ -163,19 +185,27 @@ use Cake\Utility\Inflector;
R3.projectInfo = {};
R3.editorOpen = false;
R3.lastCode = null;
R3.New3DProject = function(type) {
var projectName;
var project;
var canvas;
if (type === 'mobile') {
var projectName = '3D Mobile Project - ' + R3.selectProject.options.length;
projectName = '3D Mobile Project - ' + R3.selectProject.options.length;
var project = new R3.Project.D3(
project = new R3.Project.D3(
{
name : projectName
}
);
var canvas = project.renderers[0].canvas;
canvas = project.renderers[0].canvas;
canvas.width = 375;
canvas.height = 667;
@ -185,6 +215,46 @@ use Cake\Utility\Inflector;
canvas.updateInstance('width');
canvas.updateInstance('height');
} else if (type === 'mobile-vr') {
projectName = 'Mobile VR Project - ' + R3.selectProject.options.length;
project = new R3.Project.D3.VR(
{
name : projectName
}
);
canvas = project.renderers[0].canvas;
// var renderer = project.renderers[0];
//
// var viewportL = renderer.viewports[0];
//
// renderer.viewports.push(
// new R3.D3.Viewport.FixedAspect(
// {
// parent : renderer,
// x : 0.5,
// y : 0,
// width : 0.5,
// height : 1,
// scenes : viewportL.scenes
// }
// )
// );
//
// viewportL.width = 0.5;
// viewportL.updateInstance('width');
canvas.width = 667;
canvas.height = 375;
canvas.instance.parentElement.setAttribute('class', 'div-mobile-vr');
canvas.updateInstance('width');
canvas.updateInstance('height');
} else {
new R3.Project.D3({
name : '3D Project - ' + R3.selectProject.options.length
@ -229,6 +299,13 @@ use Cake\Utility\Inflector;
var project = R3.GetCurrentProject();
if (project) {
if (R3.editorOpen) {
R3.lastCode.closeEditor();
R3.lastCode = null;
R3.editorOpen = false;
R3.buttonCode.innerText = 'Code';
}
var parentDiv = project.renderers[0].canvas.instance.parentElement;
project.remove();
@ -237,6 +314,22 @@ use Cake\Utility\Inflector;
}
};
R3.Save = function() {
var project = R3.GetCurrentProject();
R3.Event.Emit(
R3.Event.SAVE_COMPONENT,
{
component : project
},
function onSuccess() {
console.log('saved');
},
function onError(data) {
console.log('save error', data);
}
)
};
R3.ConstructComponent = function(componentType) {
if (R3.Utils.UndefinedOrNull(componentType)) {
@ -324,9 +417,30 @@ use Cake\Utility\Inflector;
var code = R3.GetCurrentCode();
if (code) {
alert('open custom code window');
if (!R3.editorOpen) {
code.launchEditor();
R3.lastCode = code;
} else {
code.closeEditor();
}
R3.editorOpen = !R3.editorOpen;
if (R3.editorOpen) {
R3.buttonCode.innerText = 'Close';
} else {
R3.buttonCode.innerText = 'Code';
}
} else {
R3.ConstructComponent(R3.COMPONENT_CUSTOMCODE);
alert('Please create a code component first');
// if (R3.lastCode) {
// R3.lastCode.closeEditor();
// R3.lastCode = null;
// }
// R3.ConstructComponent(R3.COMPONENT_CUSTOMCODE);
}
};
@ -366,7 +480,7 @@ use Cake\Utility\Inflector;
}
);
R3.Utils.SortSelect(R3.selectEntity);
R3.Utils.SortSelect(R3.selectEntity, true);
var entity = R3.projectInfo[project.id].entity;
@ -402,7 +516,7 @@ use Cake\Utility\Inflector;
function(id) {
if (entity) {
var component = R3.EntityManager.Instance.findComponentById(id);
if (component.parent === entity) {
if (component.parent === entity || component === entity) {
R3.AddComponentToSelect(R3.selectComponent, id);
}
} else {
@ -411,20 +525,24 @@ use Cake\Utility\Inflector;
}
);
R3.Utils.SortSelect(R3.selectComponent);
R3.Utils.SortSelect(R3.selectComponent, true);
if (R3.projectInfo[project.id].component) {
R3.Utils.SetSelectIndex(R3.selectComponent, R3.projectInfo[project.id].component.id);
// R3.Event.Emit(
// R3.Event.BUILD_GUI,
// R3.projectInfo[project.id].component
// )
} else {
R3.Event.Emit(
R3.Event.CLEAR_GUI
)
}
};
R3.ClearCodeList = function() {
R3.selectCode.innerHTML = '';
var option = document.createElement('option');
option.appendChild(document.createTextNode('New Code'));
R3.selectCode.appendChild(option);
};
R3.BuildCodeList = function(project, entity) {
@ -460,6 +578,8 @@ use Cake\Utility\Inflector;
R3.Utils.SetSelectIndex(R3.selectCode, R3.projectInfo[project.id].code.id);
}
R3.CodeChange();
};
R3.SetCurrentProject = function(project) {
@ -531,6 +651,18 @@ use Cake\Utility\Inflector;
};
R3.EditComponent = function() {
var component = R3.GetCurrentComponent();
if (component) {
R3.Event.Emit(
R3.Event.BUILD_GUI,
component
)
}
};
R3.ComponentChange = function() {
var project = R3.GetCurrentProject();
@ -540,6 +672,17 @@ use Cake\Utility\Inflector;
throw new Error('todo - no project');
}
if (component) {
R3.Event.Emit(
R3.Event.BUILD_GUI,
component
)
} else {
R3.Event.Emit(
R3.Event.CLEAR_GUI
)
}
R3.projectInfo[project.id].component = component;
};
@ -553,6 +696,14 @@ use Cake\Utility\Inflector;
throw new Error('todo - no project');
}
if (R3.editorOpen) {
R3.lastCode.closeEditor();
R3.lastCode = code;
code.launchEditor();
}
console.log('todo: code change');
R3.projectInfo[project.id].code = code;
};
@ -644,6 +795,10 @@ use Cake\Utility\Inflector;
new R3.Runtime.Graphics.Pixi()
];
R3.guiRuntime = new R3.Runtime.GUI.ControlKit();
R3.coderRuntime = new R3.Runtime.Coder.CodeMirror();
R3.Event.Subscribe(
R3.Event.GET_RUNTIME,
function(component) {
@ -655,7 +810,9 @@ use Cake\Utility\Inflector;
}
return {
graphics : graphics
graphics : graphics,
gui : R3.guiRuntime,
coder : R3.coderRuntime
}
}
@ -675,6 +832,13 @@ use Cake\Utility\Inflector;
}
);
R3.Event.Subscribe(
R3.Event.GET_PROJECT,
function() {
return R3.GetCurrentProject();
}
);
R3.Event.Subscribe(
R3.Event.REMOVE_COMPONENT,
function(data) {
@ -693,18 +857,31 @@ use Cake\Utility\Inflector;
}
R3.Utils.RemoveFromSelect(R3.selectComponent, data.component.id);
R3.Utils.RemoveFromSelect(R3.selectEntity, data.component.id);
R3.Utils.RemoveFromSelect(R3.selectCode, data.component.id);
if (R3.selectCode.options.length === 0) {
var option = document.createElement('option');
option.innerText = 'None';
R3.selectCode.appendChild(option);
}
}
);
R3.Event.Subscribe(
R3.Event.INSTANCE_CREATED,
R3.Event.INSTANCE_LOADED,
function(data) {
if (data.component instanceof R3.Canvas) {
var workarea = document.getElementById('div-workarea');
var divProject = document.createElement('div');
workarea.appendChild(divProject);
divProject.appendChild(data.component.instance);
data.component.instance.addEventListener('click', R3.CanvasSelect(data.component));
if (data.component.parent instanceof R3.Renderer) {
var workarea = document.getElementById('div-workarea');
var divProject = document.createElement('div');
workarea.appendChild(divProject);
divProject.appendChild(data.component.instance);
data.component.instance.addEventListener('click', R3.CanvasSelect(data.component));
data.component.instance.setAttribute('class', 'project');
}
}
}
);
@ -764,7 +941,13 @@ use Cake\Utility\Inflector;
option.appendChild(document.createTextNode(R3.Component.GetComponentFriendlyName(i)));
R3.selectCreateComponent.appendChild(option);
}
R3.Utils.SortSelect(R3.selectCreateComponent);
R3.Utils.SortSelect(R3.selectCreateComponent, true);
R3.gui = new R3.GUI(
{
id : 'divGUI'
}
);
R3.menuVisible = true;
R3.divMenu = document.getElementById('divMenu');
@ -786,6 +969,9 @@ use Cake\Utility\Inflector;
R3.selectCode = document.getElementById('selectCode');
R3.selectCode.addEventListener("change", R3.CodeChange);
R3.buttonEdit = document.getElementById('buttonEdit');
R3.buttonEdit.addEventListener('click', R3.EditComponent);
R3.buttonCode = document.getElementById('buttonCode');
R3.buttonCode.addEventListener('click', R3.CreateCode);
@ -798,6 +984,15 @@ use Cake\Utility\Inflector;
R3.buttonRestart = document.getElementById('buttonRestart');
R3.buttonRestart.addEventListener('click', R3.Restart);
R3.buttonSave = document.getElementById('buttonSave');
R3.buttonSave.addEventListener('click', R3.Save);
R3.buttonDelete = document.getElementById('buttonDelete');
R3.buttonSave.addEventListener('click', R3.Save);
R3.buttonSignOut = document.getElementById('buttonSignOut');
R3.buttonSignOut.addEventListener('click', signOut);
R3.storageSystem = new R3.System.Storage();
R3.storageSystem.start();
@ -807,10 +1002,13 @@ use Cake\Utility\Inflector;
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');
R3.guiSystem = new R3.System.GUI(
{
guis : [R3.gui]
}
);
R3.guiSystem.start();
</script>

87
webroot/css/style.css
View File

@ -14,23 +14,46 @@ body {
background-color: #343a40ad;
}
select {
background-color: #ffffff6b;
.bg-dark-control {
background-color: #404040;
}
canvas {
.navbar-dark .navbar-nav .nav-link {
color: rgba(197, 197, 197, 0.98);
}
select {
background-color: #272727;
border-color: #1f1f1f;
}
canvas.project {
box-shadow: 0px 0 20px 0px #7dff9987;
border: 2px transparent solid;
margin: 8px;
}
canvas:focus,
canvas:active
canvas.project:focus,
canvas.project:active
{
outline: unset;
border: 2px #b2dab2 solid;
}
.dg {
width:400px;
}
.div-header {
display:flex;
flex-direction: column;
width: 100%;
}
.div-gui {
z-index:1;
}
.div-mobile {
background-image: url(https://api.r3js.org/iphone-template.png);
background-repeat: no-repeat;
@ -43,6 +66,18 @@ canvas:active
width: 451px;
}
.div-mobile-vr {
background-image: url(https://api.r3js.org/iphone-template-landscape.png);
background-repeat: no-repeat;
background-position: center;
height: 451px;
display: flex;
justify-content: center;
align-items: center;
background-size: contain;
width: 883px;
}
.div-menu {
position: fixed;
display: flex;
@ -79,7 +114,6 @@ canvas:active
padding: 5px 10px 5px 10px;
}
.button-menu:focus {
outline:unset;
border: 2px #b2dab2 solid;
@ -95,7 +129,7 @@ canvas:active
box-shadow: 0 0 10px 0px #840000c9;
}
.button-menu {
.button-menu-bak {
border: 2px #ffffff00 solid;
transition: box-shadow 0.5s, border 0.5s, color 0.5s;
height: 35px;
@ -107,6 +141,18 @@ canvas:active
border-radius: 15px;
}
.button-menu {
border: 2px #ffffff00 solid;
transition: box-shadow 0.5s, border 0.5s, color 0.5s;
height: 35px;
background-color: transparent;
color: #96b795;
box-shadow: 0 0 6px 2px #6dff8b73;
margin-left: 7px;
margin-right: 7px;
border-radius: 0px;
}
.button-menu-light {
border: 2px transparent solid;
transition: box-shadow 0.5s, border 0.5s;
@ -142,10 +188,25 @@ canvas:active
width: 100%;
}
/*label {*/
/* margin-right:10px;*/
/*}*/
/* Code Mirror Style */
.CodeMirror {
z-index: 10000;
background-color: rgba(210, 210, 210, 0.5);
top: 100px;
border-radius: 10px;
height: max-content;
width: 90%;
left: 5%;
}
/*button.round {*/
/* border-radius:5px;*/
/*}*/
.CodeMirror-scroll {
max-height: 680px;
}
.CodeMirror-overlayscroll-vertical div {
background: #1DC116;
}
.cm-s-darcula.CodeMirror {
background: #2b2b2b91;
}