Skip to content

erp5
erp5
Commit f34da786 authored by Roque's avatar Roque
Browse files
Options

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
Expand all Show whitespace changes
Inline Side-by-side
Showing with 9770 additions and 87345 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_babylonjs_babylon_gui_js.xml
View file @ f34da786
...@@ -232,7 +232,7 @@ ...@@ -232,7 +232,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <unicode>zope</unicode> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>1004.640.34797.40738</string> </value> <value> <string>1007.63203.31532.56029</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1671113080.17</float> <float>1682521291.04</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_babylonjs_babylon_js.xml
View file @ f34da786
...@@ -232,7 +232,7 @@ ...@@ -232,7 +232,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <unicode>zope</unicode> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>1004.640.30927.65416</string> </value> <value> <string>1007.64745.31008.56490</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1671113077.18</float> <float>1682524412.29</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_babylonjs_gadget_html.xml
View file @ f34da786
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <unicode>zope</unicode> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>1004.65507.47895.35925</string> </value> <value> <string>1009.15758.14803.6058</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -264,7 +264,7 @@ ...@@ -264,7 +264,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1671113070.39</float> <float>1687363120.08</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_babylonjs_gadget_js.js
View file @ f34da786
...@@ -14,7 +14,11 @@ ...@@ -14,7 +14,11 @@
'offsetY', 'pageY', 'relatedTarget', 'returnValue', 'screenX', 'screenY', 'offsetY', 'pageY', 'relatedTarget', 'returnValue', 'screenX', 'screenY',
'shiftKey', 'timeStamp', 'type', 'which', 'x', 'wheelDelta', 'wheelDeltaX', 'shiftKey', 'timeStamp', 'type', 'which', 'x', 'wheelDelta', 'wheelDeltaX',
'wheelDeltaY', 'y', 'deltaX', 'deltaY', 'deltaZ', 'deltaMode' '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 // Webworker
...@@ -117,6 +121,15 @@ ...@@ -117,6 +121,15 @@
result: function resultGameManager() { result: function resultGameManager() {
return game_result; 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) { play: function startGameManager(options) {
if (this.hasOwnProperty('loop_promise')) { if (this.hasOwnProperty('loop_promise')) {
throw new Error('Can not start the game if already started'); throw new Error('Can not start the game if already started');
...@@ -139,7 +152,8 @@ ...@@ -139,7 +152,8 @@
context.loop_promise context.loop_promise
.push(function () { .push(function () {
worker.postMessage({ worker.postMessage({
type: 'update' type: 'update',
fullscreen: fullscreen
}); });
update_defer = RSVP.defer(); update_defer = RSVP.defer();
return RSVP.all([ return RSVP.all([
...@@ -208,6 +222,8 @@ ...@@ -208,6 +222,8 @@
var loading = var loading =
context._gadget.element.querySelector('#loading'); context._gadget.element.querySelector('#loading');
if (loading) { loading.innerHTML = ""; } if (loading) { loading.innerHTML = ""; }
context._gadget.element.querySelector('#maximize')
.style.visibility = 'visible';
} }
context.unpause(); context.unpause();
return step(); return step();
...@@ -254,31 +270,75 @@ ...@@ -254,31 +270,75 @@
}; };
rJS(window) 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) { .declareMethod('render', function render(options) {
var gadget = this, var gadget = this,
loading = domsugar('span', ["Loading..."]), loading = domsugar('span', ["Loading..."]),
maximize = domsugar('div');
background = domsugar('div');
container = domsugar('div'); container = domsugar('div');
maximize.id = 'maximize';
maximize.style.visibility = 'hidden';
canvas = domsugar('canvas'); canvas = domsugar('canvas');
loading.id = "loading"; loading.id = "loading";
container.className = 'container'; container.className = 'container';
background.id = "background";
background.className = 'fullscreen-background';
background.style.visibility = 'hidden';
container.appendChild(canvas); container.appendChild(canvas);
domsugar(gadget.element, [loading, container]); domsugar(gadget.element, [loading, maximize, background, container]);
canvas.width = options.width; canvas.width = WIDTH;
canvas.height = options.height; canvas.height = HEIGHT;
// https://doc.babylonjs.com/divingDeeper/scene/offscreenCanvas // https://doc.babylonjs.com/divingDeeper/scene/offscreenCanvas
offscreen = canvas.transferControlToOffscreen(); 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({ return gadget.changeState({
logic_file_list: options.logic_file_list, logic_file_list: options.logic_file_list,
game_parameters: options.game_parameters 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() { .declareMethod('getContent', function getContent() {
container.scrollIntoView();
var gadget = this; var gadget = this;
return gadget.runGame({ return gadget.runGame({
logic_file_list: gadget.state.logic_file_list, logic_file_list: gadget.state.logic_file_list,
...@@ -291,10 +351,11 @@ ...@@ -291,10 +351,11 @@
options.width = canvas.width; options.width = canvas.width;
options.height = canvas.height; options.height = canvas.height;
options.logic_url_list = options.logic_file_list; options.logic_url_list = options.logic_file_list;
var gadget = this, var gadget = this;
game_manager = new DroneGameManager(gadget); game_manager = new DroneGameManager(gadget);
return game_manager.play(options) return game_manager.play(options)
.push(function () { .push(function () {
gadget.element.querySelector('#maximize').style.visibility = 'hidden';
return game_manager.result(); return game_manager.result();
}); });
}); });
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_babylonjs_gadget_js.xml
View file @ f34da786
...@@ -232,7 +232,7 @@ ...@@ -232,7 +232,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <unicode>zope</unicode> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>1005.2863.2128.31624</string> </value> <value> <string>1009.27442.40137.15394</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1671205385.13</float> <float>1688063552.11</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_babylonjs_web_worker_js.js
View file @ f34da786
...@@ -48,7 +48,7 @@ function mainToWorker(evt) { ...@@ -48,7 +48,7 @@ function mainToWorker(evt) {
case 'update': case 'update':
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
return updateGame(); return updateGame(evt.data.fullscreen);
}) })
.push(function () { .push(function () {
return postMessage({'type': 'updated'}); return postMessage({'type': 'updated'});
...@@ -111,8 +111,6 @@ function handleEvent(event) { ...@@ -111,8 +111,6 @@ function handleEvent(event) {
function prepareCanvas(data) { function prepareCanvas(data) {
var canvas = data.canvas, style; var canvas = data.canvas, style;
self.canvas = canvas; self.canvas = canvas;
canvas.clientWidth = data.width;
canvas.clientHeight = data.height;
canvas.width = data.width; canvas.width = data.width;
canvas.height = data.height; canvas.height = data.height;
rect.right = rect.width = data.width; rect.right = rect.width = data.width;
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_babylonjs_web_worker_js.xml
View file @ f34da786
...@@ -232,7 +232,7 @@ ...@@ -232,7 +232,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <unicode>zope</unicode> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>1005.41422.8371.11861</string> </value> <value> <string>1009.7153.55851.46199</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1674224630.4</float> <float>1686845904.97</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_button_maximize_js.xml
View file @ f34da786
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>vincent</string> </value> <value> <unicode>zope</unicode> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>964.19801.1069.24644</string> </value> <value> <string>1009.17156.6548.44731</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -264,7 +264,7 @@ ...@@ -264,7 +264,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1514902384.55</float> <float>1687447620.32</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_header_js.xml
View file @ f34da786
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <unicode>zope</unicode> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>982.19516.32766.33143</string> </value> <value> <string>1009.17183.47540.23057</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -262,7 +262,7 @@ ...@@ -262,7 +262,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1583323848.61</float> <float>1687447669.27</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @ f34da786
...@@ -1829,6 +1829,19 @@ div[data-gadget-scope='maximize'] button:active { ...@@ -1829,6 +1829,19 @@ div[data-gadget-scope='maximize'] button:active {
.editor-maximize div[data-gadget-scope='editor'] iframe { .editor-maximize div[data-gadget-scope='editor'] iframe {
height: 100%; 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 * Front page
**********************************************/ **********************************************/
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @ f34da786
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <unicode>zope</unicode> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>990.6663.38009.56354</string> </value> <value> <string>1009.18653.16090.52258</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -268,7 +268,7 @@ ...@@ -268,7 +268,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1613660719.23</float> <float>1687535887.84</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7