Jira/165

extern/util/CanvasInput.js

@@ -9,7 +9,7 @@
  *
  *  MIT License
  */
-(function() {
+(function () {
     // create a buffer that stores all inputs so that tabbing
     // between them is made possible.
     var inputs = []; // initialize the Canvas Input
@@ -46,15 +46,15 @@
         self._placeHolder = o.placeHolder || '';
         self._value = o.value || self._placeHolder;
 
-        self._onsubmit = o.onsubmit || function() {};
+        self._onsubmit = o.onsubmit || function () {};
 
-        self._onkeydown = o.onkeydown || function() {};
+        self._onkeydown = o.onkeydown || function () {};
 
-        self._onkeyup = o.onkeyup || function() {};
+        self._onkeyup = o.onkeyup || function () {};
 
-        self._onfocus = o.onfocus || function() {};
+        self._onfocus = o.onfocus || function () {};
 
-        self._onblur = o.onblur || function() {};
+        self._onblur = o.onblur || function () {};
 
         self._cursor = false;
         self._cursorPos = 0;
@@ -95,7 +95,7 @@
         if (self._canvas) {
             self._canvas.addEventListener(
                 'mousemove',
-                function(e) {
+                function (e) {
                     e = e || window.event;
                     self.mousemove(e, self);
                 },
@@ -104,7 +104,7 @@
 
             self._canvas.addEventListener(
                 'mousedown',
-                function(e) {
+                function (e) {
                     e = e || window.event;
                     self.mousedown(e, self);
                 },
@@ -113,7 +113,7 @@
 
             self._canvas.addEventListener(
                 'touchstart',
-                function(e) {
+                function (e) {
                     e = e || window.event;
                     self.mousedown(e, self);
                 },
@@ -122,7 +122,7 @@
 
             self._canvas.addEventListener(
                 'mouseup',
-                function(e) {
+                function (e) {
                     e = e || window.event;
                     self.mouseup(e, self);
                 },
@@ -132,7 +132,7 @@
 
         window.addEventListener(
             'mouseup',
-            function(e) {
+            function (e) {
                 //e = e || window.event;
                 //if (self._hasFocus && !self._mouseDown) {
                 //self.blur();
@@ -160,15 +160,15 @@
         document.body.appendChild(self._hiddenInput);
         self._hiddenInput.value = self._value; // setup the keydown listener
 
-        self._hiddenInput.addEventListener('keydown', function(e) {
+        self._hiddenInput.addEventListener('keydown', function (e) {
             e = e || window.event;
 
             if (self._hasFocus) {
                 self.keydown(e, self);
             }
         }); // setup the keyup listener
 
-        self._hiddenInput.addEventListener('keyup', function(e) {
+        self._hiddenInput.addEventListener('keyup', function (e) {
             e = e || window.event; // update the canvas input state information from the hidden input
 
             self._value = self._hiddenInput.value;
@@ -726,8 +726,8 @@
                 clearInterval(self._cursorInterval);
             }
 
-            requestAnimationFrame(function() {
-                self._cursorInterval = setInterval(function() {
+            requestAnimationFrame(function () {
+                self._cursorInterval = setInterval(function () {
                     self._cursor = !self._cursor;
                     self.render();
                 }, 500); // check if this is Chrome for Android (there is a bug with returning incorrect character key codes)
@@ -741,6 +741,8 @@
 
             var isMobile = typeof window.orientation !== 'undefined';
             var hasHiddenFocus = false;
+            var inputParent =
+                document.fullscreenElement || document.webkitFullscreenElement || document.body;
             if (
                 isMobile &&
                 !isChromeMobile &&
@@ -763,11 +765,11 @@
                 input.style.height = 0;
                 const form = document.createElement('form');
                 form.appendChild(input);
-                document.body.appendChild(form);
+                inputParent.appendChild(form);
                 input.focus();
                 input.addEventListener(
                     'blur',
-                    function() {
+                    function () {
                         if (!hasHiddenFocus) {
                             self.blur(self);
                         }
@@ -787,6 +789,9 @@
 
             var hasSelection = self._selection[0] > 0 || self._selection[1] > 0;
             hasHiddenFocus = true;
+            if (self._hiddenInput.parentNode !== inputParent) {
+                inputParent.appendChild(self._hiddenInput);
+            }
             self._hiddenInput.focus();
             hasHiddenFocus = false;
             self._hiddenInput.selectionStart = hasSelection ? self._selection[0] : self._cursorPos;
@@ -869,7 +874,7 @@
                 if (inputs.length > 1) {
                     var next = inputs[self._inputsIndex + 1] ? self._inputsIndex + 1 : 0;
                     self.blur();
-                    setTimeout(function() {
+                    setTimeout(function () {
                         inputs[next].focus();
                     }, 5);
                 }
@@ -1088,7 +1093,7 @@
                 ctx.shadowBlur = 0;
             } // draw the text box background
 
-            self._drawTextBox(function() {
+            self._drawTextBox(function () {
                 // make sure all shadows are reset
                 ctx.shadowOffsetX = 0;
                 ctx.shadowOffsetY = 0;
@@ -1234,7 +1239,7 @@
                 var img = new Image();
                 img.src = self._backgroundImage;
 
-                img.onload = function() {
+                img.onload = function () {
                     ctx.drawImage(
                         img,
                         0,

src/class/pixi/etc/PIXICanvasInput.js

@@ -8,14 +8,14 @@
  *  MIT License
  */
 import * as PIXI from 'pixi.js';
-(function() {
+(function () {
     // create a buffer that stores all inputs so that tabbing
     // between them is made possible.
     const inputs = [];
 
     // initialize the Canvas Input
     // eslint-disable-next-line no-multi-assign
-    const CanvasInput = (window.PIXICanvasInput = function(o) {
+    const CanvasInput = (window.PIXICanvasInput = function (o) {
         const self = this;
 
         o = o ? o : {};
@@ -48,11 +48,11 @@ import * as PIXI from 'pixi.js';
         self._selectionColor = o.selectionColor || 'rgba(179, 212, 253, 0.8)';
         self._placeHolder = o.placeHolder || '';
         self._value = `${o.value || self._placeHolder}`;
-        self._onsubmit = o.onsubmit || function() {};
-        self._onkeydown = o.onkeydown || function() {};
-        self._onkeyup = o.onkeyup || function() {};
-        self._onfocus = o.onfocus || function() {};
-        self._onblur = o.onblur || function() {};
+        self._onsubmit = o.onsubmit || function () {};
+        self._onkeydown = o.onkeydown || function () {};
+        self._onkeyup = o.onkeyup || function () {};
+        self._onfocus = o.onfocus || function () {};
+        self._onblur = o.onblur || function () {};
         self._cursor = false;
         self._cursorPos = 0;
         self._hasFocus = false;
@@ -772,6 +772,8 @@ import * as PIXI from 'pixi.js';
             // add support for mobile
             const isMobile = typeof window.orientation !== 'undefined';
             var hasHiddenFocus = false;
+            const inputParent =
+                document.fullscreenElement || document.webkitFullscreenElement || document.body;
             if (
                 isMobile &&
                 !isChromeMobile &&
@@ -782,17 +784,17 @@ import * as PIXI from 'pixi.js';
                 input.type = 'text';
                 input.style.opacity = 0;
                 input.style.position = 'absolute';
-                input.style.left = `${self._x +
-                    self._extraX +
-                    (self._canvas ? self._canvas.offsetLeft : 0)}px`;
-                input.style.top = `${self._y +
-                    self._extraY +
-                    (self._canvas ? self._canvas.offsetTop : 0)}px`;
+                input.style.left = `${
+                    self._x + self._extraX + (self._canvas ? self._canvas.offsetLeft : 0)
+                }px`;
+                input.style.top = `${
+                    self._y + self._extraY + (self._canvas ? self._canvas.offsetTop : 0)
+                }px`;
                 input.style.width = self._width;
                 input.style.height = 0;
                 const form = document.createElement('form');
                 form.appendChild(input);
-                document.body.appendChild(form);
+                inputParent.appendChild(form);
                 input.focus();
                 input.addEventListener(
                     'blur',
@@ -817,6 +819,9 @@ import * as PIXI from 'pixi.js';
             // move the real focus to the hidden input
             const hasSelection = self._selection[0] > 0 || self._selection[1] > 0;
             hasHiddenFocus = true;
+            if (self._hiddenInput.parentNode !== inputParent) {
+                inputParent.appendChild(self._hiddenInput);
+            }
             self._hiddenInput.focus();
             hasHiddenFocus = false;
             self._hiddenInput.selectionStart = hasSelection ? self._selection[0] : self._cursorPos;
@@ -1284,7 +1289,7 @@ import * as PIXI from 'pixi.js';
             } else {
                 const img = new Image();
                 img.src = self._backgroundImage;
-                img.onload = function() {
+                img.onload = function () {
                     ctx.drawImage(
                         img,
                         0,

src/class/playground.js

@@ -704,9 +704,11 @@ Entry.Playground = class Playground {
 
     updatePictureView() {
         if (this.pictureSortableListWidget) {
-            this.pictureSortableListWidget.setData({ items: [] });
-            this.pictureSortableListWidget.setData({
-                items: this._getSortablePictureList(),
+            Entry.Utils.runWithScrollPreserved(this.pictureListView_, () => {
+                this.pictureSortableListWidget.setData({ items: [] });
+                this.pictureSortableListWidget.setData({
+                    items: this._getSortablePictureList(),
+                });
             });
         }
         this.reloadPlayground();
@@ -1102,8 +1104,10 @@ Entry.Playground = class Playground {
 
     updateSoundsView() {
         if (this.soundSortableListWidget) {
-            this.soundSortableListWidget.setData({
-                items: this._getSortableSoundList(),
+            Entry.Utils.runWithScrollPreserved(this.soundListView_, () => {
+                this.soundSortableListWidget.setData({
+                    items: this._getSortableSoundList(),
+                });
             });
         }
 

src/class/scene.js

@@ -172,7 +172,11 @@ Entry.Scene = class {
     updateSceneView() {
         const items = this._getSortableSceneList();
         if (this.sceneSortableListWidget) {
-            setTimeout(() => this.sceneSortableListWidget.setData({ items }), 0);
+            setTimeout(() => {
+                Entry.Utils.runWithScrollPreserved(this.listView_, () => {
+                    this.sceneSortableListWidget.setData({ items });
+                });
+            }, 0);
         }
     }
 

src/class/stage.js

@@ -580,6 +580,8 @@ Entry.Stage = class Stage {
         this.inputField.show();
         this.canvas.addChild(this.inputSubmitButton);
 
+        this._bindInputFieldFullScreenChange();
+
         Entry.requestUpdateTwice = true;
 
         function _createInputField() {
@@ -664,6 +666,32 @@ Entry.Stage = class Stage {
         Entry.requestUpdate = true;
     }
 
+    _bindInputFieldFullScreenChange() {
+        if (this._inputFieldFullScreenChangeBound) {
+            return;
+        }
+        this._inputFieldFullScreenChangeBound = true;
+
+        const relocate = () => {
+            const inputField = this.inputField;
+            const hiddenInput = inputField && inputField._hiddenInput;
+            if (!hiddenInput) {
+                return;
+            }
+            const inputParent =
+                document.fullscreenElement || document.webkitFullscreenElement || document.body;
+            if (hiddenInput.parentNode !== inputParent) {
+                inputParent.appendChild(hiddenInput);
+                if (inputField._hasFocus) {
+                    hiddenInput.focus();
+                }
+            }
+        };
+
+        document.addEventListener('fullscreenchange', relocate);
+        document.addEventListener('webkitfullscreenchange', relocate);
+    }
+
     /**
      * init object containers
      */

src/util/utils.js

@@ -479,6 +479,27 @@ Entry.Utils.generateId = function () {
     return `0000${((Math.random() * Math.pow(36, 4)) << 0).toString(36)}`.substr(-4);
 };
 
+/**
+ * Sortable 위젯의 setData 등 리렌더 콜백 실행 중에도
+ * 내부 스크롤 컨테이너(.rcs-inner-container)의 스크롤 위치를 유지한다.
+ * @param {HTMLElement} containerEl Sortable이 마운트된 컨테이너
+ * @param {Function} callback 리스트를 갱신하는 동기 콜백
+ */
+Entry.Utils.runWithScrollPreserved = function (containerEl, callback) {
+    const getScrollEl = () => containerEl && containerEl.querySelector('.rcs-inner-container');
+    const before = getScrollEl();
+    const top = before ? before.scrollTop : 0;
+    const left = before ? before.scrollLeft : 0;
+
+    callback();
+
+    const after = getScrollEl();
+    if (after) {
+        after.scrollTop = top;
+        after.scrollLeft = left;
+    }
+};
+
 Entry.Utils.randomColor = function () {
     const letters = '0123456789ABCDEF';
     let color = '#';