Update test case

examples/ui-scrollablepanel/drag-item.js

@@ -62,31 +62,6 @@ class Demo extends Phaser.Scene {
             }
         })
             .layout()
-
-        scrollablePanel.setChildrenInteractive({
-            targets: [
-                scrollablePanel.getByName('table', true),
-            ]
-        })
-            .on('child.pressstart', function (child) {
-                var item = child.getData('item');
-                if (!item || !item.textureKey) {
-                    return;
-                }
-
-                var icon = child.getElement('icon');
-                if (this.rexUI.isInTouching(icon)) {
-                    // Create a new game object for dragging
-                    var dragObject = this.add.image(icon.x, icon.y, '');
-                    dragObject.setTexture(item.textureKey).setTint(item.color);
-                    // Force dragging
-                    dragObject.drag = this.plugins.get('rexDrag').add(dragObject).drag()
-
-                    // icon has be removed, set it to invisible
-                    item.textureKey = undefined;
-                    child.setChildVisible(icon, false);
-                }
-            }, this)
     }
 
     update() { }
@@ -107,31 +82,63 @@ var CreateGrid = function (scene, items, col) {
             config.expand = true;
 
             var item = items[(y * col) + x];
-            var cellContainer = CreateCellContainer(scene).setData('item', item);
-            if (item) {
-                cellContainer.getElement('icon').setTexture(item.textureKey).setTint(item.color);
-                cellContainer.getElement('id').setText(item.id);
-            }
-            return cellContainer;
+            return CreateCellContainer(scene, item);
         },
 
         name: 'table'
     })
 }
 
 var CreateCellContainer = function (scene, item) {
-    return scene.rexUI.add.overlapSizer({
+    if (!item) {
+        return;
+    }
+
+    var background = scene.rexUI.add.roundRectangle(0, 0, 20, 20, 0).setStrokeStyle(2, COLOR_DARK);
+    var icon = scene.add.image(0, 0, item.textureKey).setTint(item.color);
+    var text = scene.add.text(0, 0, item.id).setText(item.id)
+    var container = scene.rexUI.add.overlapSizer({
         height: 80
     })
-        .addBackground(scene.rexUI.add.roundRectangle(0, 0, 20, 20, 0).setStrokeStyle(2, COLOR_DARK))
+        .addBackground(background)
         .add(
-            scene.add.image(0, 0, ''),
+            icon,
             { key: 'icon', align: 'center', expand: false }
         )
         .add(
-            scene.add.text(0, 0, ''),
+            text,
             { key: 'id', align: 'left-top', expand: false }
         )
+
+    icon
+        .setInteractive({ draggable: true })
+        .on('dragstart', function (pointer, dragX, dragY) {
+            var isDragging = CanDrag(icon, pointer.worldX, pointer.worldY);
+            icon.setData('isDragging', isDragging);
+            if (!isDragging) {
+                return;
+            }
+
+            var parentSizer = scene.rexUI.getParentSizer(icon);
+            if (parentSizer) {
+                parentSizer.remove(icon);
+                parentSizer.removeChildrenMap('icon');
+            }
+        })
+        .on('drag', function (pointer, dragX, dragY) {
+            if (icon.getData('isDragging')) {
+                icon.setPosition(dragX, dragY);
+            }
+        })
+        .on('dragend', function (pointer, dragX, dragY, dropped) {
+            icon.setData('isDragging', false);
+        });
+
+    return container
+}
+
+var CanDrag = function (gameObject, x, y) {
+    return !gameObject.mask
 }
 
 var CreateItems = function (count) {

plugins/utils/mask/defaultmaskgraphics/DefaultMaskGraphics.js

@@ -1,7 +1,5 @@
-import DrawShape from './DrawShape.js';
+import Methods from './methods/Methods.js';
 import GetBoundsConfig from '../../bounds/GetBoundsConfig.js';
-import IsKeyValueEqual from '../../object/IsKeyValueEqual.js';
-import Clone from '../../object/Clone.js';
 
 const Graphics = Phaser.GameObjects.Graphics;
 
@@ -27,88 +25,16 @@ class DefaultMaskGraphics extends Graphics {
         super.destroy();
         return this;
     }
-
-    setPosition(x, y) {
-        var parent = this.parent;
-        if (x === undefined) {
-            x = parent.x;
-        }
-        if (y === undefined) {
-            y = parent.y;
-        }
-        super.setPosition(x, y);
-        return this;
-    }
-
-    resize(width, height, padding) {
-        var parent = this.parent;
-        if (width === undefined) {
-            width = parent.width;
-        }
-        if (height === undefined) {
-            height = parent.height;
-        }
-
-        if (padding === undefined) {
-            padding = this.padding;
-        } else if (typeof (padding) === 'number') {
-            padding = GetBoundsConfig(padding);
-        }
-
-        var isSizeChanged = (this.width !== width) || (this.height !== height);
-        var isPaddingChanged = (this.padding !== padding) && !IsKeyValueEqual(this.padding, padding);
-        if (!isSizeChanged && !isPaddingChanged) {
-            return this;
-        }
-
-        this.width = width;
-        this.height = height;
-
-        if (isPaddingChanged) {
-            Clone(padding, this.padding);
-        }
-
-        // Graphics does not have originX, originY properties
-        this.originX = parent.originX;
-        this.originY = parent.originY;
-
-        DrawShape.call(this,
-            width, height, padding,
-            parent.originX, parent.originY
-        );
-
-        return this;
-    }
-
-    setOrigin(originX, originY) {
-        if (originY === undefined) {
-            originY = originX;
-        }
-
-        var parent = this.parent;
-        if (originX === undefined) {
-            originX = parent.originX;
-        }
-        if (originY === undefined) {
-            originY = parent.originY;
-        }
-        if ((this.originX === originX) && (this.originY === originY)) {
-            return this;
-        }
-
-        this.originX = originX;
-        this.originY = originY;
-
-        DrawShape.call(this,
-            this.width, this.height, this.padding,
-            originX, originY,
-        );
-        return this;
-    }
 }
 
 const SHAPEMODE = {
     rectangle: 0,
     circle: 1,
 }
+
+Object.assign(
+    DefaultMaskGraphics.prototype,
+    Methods
+)
+
 export default DefaultMaskGraphics;

plugins/utils/mask/defaultmaskgraphics/methods/Contains.js

@@ -0,0 +1,7 @@
+var Contains = function (x, y) {
+    x -= this.x;
+    y -= this.y;
+    return this.geom.contains(x, y);
+}
+
+export default Contains;

plugins/utils/mask/defaultmaskgraphics/methods/DrawShape.js

@@ -0,0 +1,19 @@
+import GetGeom from './GetGeom.js';
+
+var DrawShape = function (width, height, padding, originX, originY) {
+    this.geom = GetGeom(this.shapeType, width, height, padding, originX, originY, this.geom);
+
+    this.clear().fillStyle(0xffffff);
+    switch (this.shapeType) {
+        case 1: // circle
+            // Assume that all padding are the same value in this circle shape
+            this.fillCircleShape(this.geom);
+            break;
+
+        default: // 0|'rectangle'
+            this.fillRectShape(this.geom);
+            break;
+    }
+}
+
+export default DrawShape;

plugins/utils/mask/defaultmaskgraphics/methods/GetGeom.js

@@ -0,0 +1,35 @@
+const RectangleGeom = Phaser.Geom.Rectangle;
+const CircleGemo = Phaser.Geom.Circle;
+
+var GetGeom = function (shapeType, width, height, padding, originX, originY, out) {
+    switch (shapeType) {
+        case 1: // circle
+            // Assume that all padding are the same value in this circle shape
+            padding = padding.left;
+            var centerX = -width * (originX - 0.5);
+            var centerY = -height * (originY - 0.5);
+            var radius = Math.min(width, height) / 2 + padding;
+
+            if ((out === undefined) || !(out instanceof (CircleGemo))) {
+                out = new CircleGemo();
+            }
+            out.setTo(centerX, centerY, radius);
+            break;
+
+        default: // 0|'rectangle'
+            var topLeftX = -(width * originX) - padding.left;
+            var topLeftY = -(height * originY) - padding.top;
+            var rectWidth = width + padding.left + padding.right;
+            var rectHeight = height + padding.top + padding.bottom;
+
+            if ((out === undefined) || !(out instanceof (RectangleGeom))) {
+                out = new RectangleGeom();
+            }
+            out.setTo(topLeftX, topLeftY, rectWidth, rectHeight);
+            break;
+    }
+
+    return out;
+}
+
+export default GetGeom;

plugins/utils/mask/defaultmaskgraphics/methods/Methods.js

@@ -0,0 +1,13 @@
+import SetPosition from './SetPosition.js';
+import Resize from './Resize.js';
+import SetOrigin from './SetOrigin.js';
+import Contains from './Contains.js';
+
+var Methods = {
+    setPosition: SetPosition,
+    resize: Resize,
+    setOrigin: SetOrigin,
+    contains: Contains,
+}
+
+export default Methods;

plugins/utils/mask/defaultmaskgraphics/methods/Resize.js

@@ -0,0 +1,45 @@
+import DrawShape from './DrawShape.js';
+import IsKeyValueEqual from '../../../object/IsKeyValueEqual.js';
+import Clone from '../../../object/Clone.js';
+
+var Resize = function (width, height, padding) {
+    var parent = this.parent;
+    if (width === undefined) {
+        width = parent.width;
+    }
+    if (height === undefined) {
+        height = parent.height;
+    }
+
+    if (padding === undefined) {
+        padding = this.padding;
+    } else if (typeof (padding) === 'number') {
+        padding = GetBoundsConfig(padding);
+    }
+
+    var isSizeChanged = (this.width !== width) || (this.height !== height);
+    var isPaddingChanged = (this.padding !== padding) && !IsKeyValueEqual(this.padding, padding);
+    if (!isSizeChanged && !isPaddingChanged) {
+        return this;
+    }
+
+    this.width = width;
+    this.height = height;
+
+    if (isPaddingChanged) {
+        Clone(padding, this.padding);
+    }
+
+    // Graphics does not have originX, originY properties
+    this.originX = parent.originX;
+    this.originY = parent.originY;
+
+    DrawShape.call(this,
+        width, height, padding,
+        parent.originX, parent.originY
+    );
+
+    return this;
+}
+
+export default Resize;

plugins/utils/mask/defaultmaskgraphics/methods/SetOrigin.js

@@ -0,0 +1,29 @@
+import DrawShape from './DrawShape.js';
+
+var SetOrigin = function (originX, originY) {
+    if (originY === undefined) {
+        originY = originX;
+    }
+
+    var parent = this.parent;
+    if (originX === undefined) {
+        originX = parent.originX;
+    }
+    if (originY === undefined) {
+        originY = parent.originY;
+    }
+    if ((this.originX === originX) && (this.originY === originY)) {
+        return this;
+    }
+
+    this.originX = originX;
+    this.originY = originY;
+
+    DrawShape.call(this,
+        this.width, this.height, this.padding,
+        originX, originY,
+    );
+    return this;
+}
+
+export default SetOrigin;