Commit f34da786 authored by Roque's avatar Roque

erp5_web_renderjs_ui: update babylonjs libraries (version 6) and more

- babylon gadget msg htm
- babylonjs gadget fullscreen (includes mobile fix)
- bug fix in offscreen canvas
- scroll focus for usability
parent 5f612796
......@@ -232,7 +232,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <unicode>zope</unicode> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -246,7 +246,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1004.640.34797.40738</string> </value>
<value> <string>1007.63203.31532.56029</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -266,7 +266,7 @@
</tuple>
<state>
<tuple>
<float>1671113080.17</float>
<float>1682521291.04</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -232,7 +232,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <unicode>zope</unicode> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -246,7 +246,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1004.640.30927.65416</string> </value>
<value> <string>1007.64745.31008.56490</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -266,7 +266,7 @@
</tuple>
<state>
<tuple>
<float>1671113077.18</float>
<float>1682524412.29</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <unicode>zope</unicode> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -244,7 +244,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1004.65507.47895.35925</string> </value>
<value> <string>1009.15758.14803.6058</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -264,7 +264,7 @@
</tuple>
<state>
<tuple>
<float>1671113070.39</float>
<float>1687363120.08</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -14,7 +14,11 @@
'offsetY', 'pageY', 'relatedTarget', 'returnValue', 'screenX', 'screenY',
'shiftKey', 'timeStamp', 'type', 'which', 'x', 'wheelDelta', 'wheelDeltaX',
'wheelDeltaY', 'y', 'deltaX', 'deltaY', 'deltaZ', 'deltaMode'
]), game_result, canvas, offscreen;
]), game_result, canvas, offscreen, game_manager, container, background,
fullscreen = false, fullscreen_delay,
//TODO. Drop hardcoded values
WIDTH = (window.innerWidth > 680) ? 680 : window.innerWidth * 0.96,
HEIGHT = 340;
//////////////////////////////////////////
// Webworker
......@@ -117,6 +121,15 @@
result: function resultGameManager() {
return game_result;
},
fullscreen: function fullScreenGameManager() {
return new RSVP.Queue()
.push(function () {
fullscreen = !fullscreen;
})
.push(function () {
return RSVP.delay(fullscreen_delay);
});
},
play: function startGameManager(options) {
if (this.hasOwnProperty('loop_promise')) {
throw new Error('Can not start the game if already started');
......@@ -139,7 +152,8 @@
context.loop_promise
.push(function () {
worker.postMessage({
type: 'update'
type: 'update',
fullscreen: fullscreen
});
update_defer = RSVP.defer();
return RSVP.all([
......@@ -208,6 +222,8 @@
var loading =
context._gadget.element.querySelector('#loading');
if (loading) { loading.innerHTML = ""; }
context._gadget.element.querySelector('#maximize')
.style.visibility = 'visible';
}
context.unpause();
return step();
......@@ -254,31 +270,75 @@
};
rJS(window)
/////////////////////////////////////////////////////////////////
// Acquired methods
/////////////////////////////////////////////////////////////////
.declareAcquiredMethod("jio_allDocs", "jio_allDocs")
.declareAcquiredMethod('triggerMaximize', 'triggerMaximize')
.allowPublicAcquisition('triggerMaximize', function (param_list) {
var gadget = this;
return new RSVP.Queue()
.push(function () {
return game_manager.fullscreen();
})
.push(function () {
container.classList.toggle("fullscreen");
background.style.visibility = 'visible';
return gadget.triggerMaximize.apply(gadget, param_list);
})
.push(undefined, function (error) {
if (!(error instanceof RSVP.CancellationError)) {
throw error;
}
return game_manager.fullscreen()
.push(function () {
container.classList.toggle("fullscreen");
background.style.visibility = 'hidden';
container.scrollIntoView();
});
});
})
.declareMethod('render', function render(options) {
var gadget = this,
loading = domsugar('span', ["Loading..."]),
container = domsugar('div');
maximize = domsugar('div');
background = domsugar('div');
container = domsugar('div');
maximize.id = 'maximize';
maximize.style.visibility = 'hidden';
canvas = domsugar('canvas');
loading.id = "loading";
container.className = 'container';
background.id = "background";
background.className = 'fullscreen-background';
background.style.visibility = 'hidden';
container.appendChild(canvas);
domsugar(gadget.element, [loading, container]);
canvas.width = options.width;
canvas.height = options.height;
domsugar(gadget.element, [loading, maximize, background, container]);
canvas.width = WIDTH;
canvas.height = HEIGHT;
// https://doc.babylonjs.com/divingDeeper/scene/offscreenCanvas
offscreen = canvas.transferControlToOffscreen();
fullscreen_delay = 6.5 * options.game_parameters.simulation_speed + 40;
fullscreen_delay = 60; //TODO find a good calculation for this
options.game_parameters.fullscreen = {};
options.game_parameters.fullscreen.width = window.innerWidth;
if (window.innerHeight < window.innerWidth) {
options.game_parameters.fullscreen.height = window.innerHeight;
} else {
options.game_parameters.fullscreen.height = window.innerWidth * 0.6;
}
return gadget.changeState({
logic_file_list: options.logic_file_list,
game_parameters: options.game_parameters
});
})
.onStateChange(function () {
var gadget = this, div_max = gadget.element.querySelector('#maximize');
return gadget.declareGadget("gadget_button_maximize.html", {
scope: 'maximize',
element: div_max,
sandbox: 'public'
});
})
.declareMethod('getContent', function getContent() {
container.scrollIntoView();
var gadget = this;
return gadget.runGame({
logic_file_list: gadget.state.logic_file_list,
......@@ -291,10 +351,11 @@
options.width = canvas.width;
options.height = canvas.height;
options.logic_url_list = options.logic_file_list;
var gadget = this,
game_manager = new DroneGameManager(gadget);
var gadget = this;
game_manager = new DroneGameManager(gadget);
return game_manager.play(options)
.push(function () {
gadget.element.querySelector('#maximize').style.visibility = 'hidden';
return game_manager.result();
});
});
......
......@@ -232,7 +232,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <unicode>zope</unicode> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -246,7 +246,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1005.2863.2128.31624</string> </value>
<value> <string>1009.27442.40137.15394</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -266,7 +266,7 @@
</tuple>
<state>
<tuple>
<float>1671205385.13</float>
<float>1688063552.11</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -48,7 +48,7 @@ function mainToWorker(evt) {
case 'update':
return new RSVP.Queue()
.push(function () {
return updateGame();
return updateGame(evt.data.fullscreen);
})
.push(function () {
return postMessage({'type': 'updated'});
......@@ -111,8 +111,6 @@ function handleEvent(event) {
function prepareCanvas(data) {
var canvas = data.canvas, style;
self.canvas = canvas;
canvas.clientWidth = data.width;
canvas.clientHeight = data.height;
canvas.width = data.width;
canvas.height = data.height;
rect.right = rect.width = data.width;
......
......@@ -232,7 +232,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <unicode>zope</unicode> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -246,7 +246,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1005.41422.8371.11861</string> </value>
<value> <string>1009.7153.55851.46199</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -266,7 +266,7 @@
</tuple>
<state>
<tuple>
<float>1674224630.4</float>
<float>1686845904.97</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>vincent</string> </value>
<value> <unicode>zope</unicode> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -244,7 +244,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>964.19801.1069.24644</string> </value>
<value> <string>1009.17156.6548.44731</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -264,7 +264,7 @@
</tuple>
<state>
<tuple>
<float>1514902384.55</float>
<float>1687447620.32</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -228,7 +228,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <unicode>zope</unicode> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>982.19516.32766.33143</string> </value>
<value> <string>1009.17183.47540.23057</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -262,7 +262,7 @@
</tuple>
<state>
<tuple>
<float>1583323848.61</float>
<float>1687447669.27</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -1829,6 +1829,19 @@ div[data-gadget-scope='maximize'] button:active {
.editor-maximize div[data-gadget-scope='editor'] iframe {
height: 100%;
}
div[data-gadget-scope="babylonjs"] .fullscreen {
position: fixed;
left: 0;
top: 30pt;
}
div[data-gadget-scope="babylonjs"] .fullscreen-background {
position: fixed;
left: 0;
top: 30pt;
background-color: #FFFFFF;
width: 100vw;
height: calc(100vh - 30pt );
}
/**********************************************
* Front page
**********************************************/
......
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <unicode>zope</unicode> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -248,7 +248,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>990.6663.38009.56354</string> </value>
<value> <string>1009.18653.16090.52258</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -268,7 +268,7 @@
</tuple>
<state>
<tuple>
<float>1613660719.23</float>
<float>1687535887.84</float>
<string>UTC</string>
</tuple>
</state>
......
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