Add rotation control point

rexrainbow · Sep 3, 2023 · 9d287cc · 9d287cc
1 parent 2c0d24a
commit 9d287cc
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 27 deletions.
diff --git a/examples/gameobjectshell/transform-controller.js b/examples/gameobjectshell/transform-controller.js
@@ -1,6 +1,5 @@
 import phaser from 'phaser/src/phaser.js';
 import GameObjectShellPlugin from '../../templates/gameobjectshell/gameobjectshell-plugin.js';
-import TransformController from '../../templates/gameobjectshell/transformcontroller/TransformController';
 
 class Demo extends Phaser.Scene {
     constructor() {
@@ -41,9 +40,17 @@ class Demo extends Phaser.Scene {
                 color: 0x555555,
             },
 
-            controlPoint: {
+            originPoint: {
+                color: 0xff0000
+            },
+
+            resizePoint: {
                 color: 0x00ff00
-            }
+            },
+
+            rotationPoint: {
+                color: 0x0000ff
+            },
         });
 
     }

diff --git a/templates/gameobjectshell/transformcontroller/TransformController.js b/templates/gameobjectshell/transformcontroller/TransformController.js
@@ -11,8 +11,8 @@ class TransformController extends ContainerLite {
 
         this.childrenMap = {};
 
-        AddBoundsRectangle(this, GetValue(config, 'boundsRectangle'));
-        AddControlPoints(this, GetValue(config, 'controlPoint'));
+        AddBoundsRectangle(this, config);
+        AddControlPoints(this, config);
 
         this.setVisible(false);
     }

diff --git a/templates/gameobjectshell/transformcontroller/methods/AddDragResizeBehavior.js b/templates/gameobjectshell/transformcontroller/methods/AddDragResizeBehavior.js
@@ -9,7 +9,7 @@ var AddDragResizeBehavior = function (parent, dragPoint, fixedPoint, dragAxis) {
                 fixedY = fixedPoint.y;
 
             if (GlobalDragVector === undefined) {
-                GlobalDragVector = new Phaser.Math.Vector2()
+                GlobalDragVector = new Phaser.Math.Vector2();
             }
             GlobalDragVector
                 .setTo(dragX - fixedX, dragY - fixedY)

diff --git a/templates/gameobjectshell/transformcontroller/methods/AddDragRotationBehavior.js b/templates/gameobjectshell/transformcontroller/methods/AddDragRotationBehavior.js
@@ -0,0 +1,14 @@
+import { RotationPointAngle } from './Const.js';
+
+const AngleBetween = Phaser.Math.Angle.Between;
+const RotationPointRotation = Phaser.Math.DegToRad(RotationPointAngle);
+
+var AddDragRotationBehavior = function (parent, dragPoint, originPoint) {
+    dragPoint
+        .setInteractive({ draggable: true })
+        .on('drag', function (pointer, dragX, dragY) {
+            parent.rotation = AngleBetween(originPoint.x, originPoint.y, dragX, dragY) - RotationPointRotation;
+        })
+}
+
+export default AddDragRotationBehavior;
diff --git a/templates/gameobjectshell/transformcontroller/methods/BoundsRectangleMethods.js b/templates/gameobjectshell/transformcontroller/methods/BoundsRectangleMethods.js
@@ -2,7 +2,7 @@ import IsFunction from '../../../../plugins/utils/object/IsFunction.js';
 
 const GetValue = Phaser.Utils.Objects.GetValue;
 
-var GtDefaultCallback = function (config) {
+var GetDefaultCallback = function (config) {
     var color = GetValue(config, 'color');
     var alpha = GetValue(config, 'alpha', 0.5);
     var strokeColor = GetValue(config, 'strokeColor');
@@ -11,10 +11,13 @@ var GtDefaultCallback = function (config) {
         return scene.add.rectangle(0, 0, 0, 0, color, alpha).setStrokeStyle(strokeColor, strokeWidth);
     }
 }
-var AddBoundsRectangle = function (parent, callback) {
+var AddBoundsRectangle = function (parent, config) {
+    var callback = GetValue(config, 'boundsRectangle');
+
     if (!IsFunction(callback)) {
-        callback = GtDefaultCallback(callback);
+        callback = GetDefaultCallback(callback);
     }
+
     var scene = parent.scene;
     var boundRectangle = callback(scene);
     parent.pin(boundRectangle);

diff --git a/templates/gameobjectshell/transformcontroller/methods/Const.js b/templates/gameobjectshell/transformcontroller/methods/Const.js
@@ -7,4 +7,8 @@ export const TopMiddle = 'topMiddle';
 export const BottomMiddle = 'bottomMiddle';
 export const MiddleRight = 'middleRight';
 export const MiddleLeft = 'middleLeft';
-export const Origin = 'origin';
+export const Origin = 'origin';
+export const Rotation = 'rotation';
+
+// Angle of rotation control point
+export const RotationPointAngle = -90;
diff --git a/templates/gameobjectshell/transformcontroller/methods/ControlPointMethods.js b/templates/gameobjectshell/transformcontroller/methods/ControlPointMethods.js
@@ -1,44 +1,72 @@
 import {
     TopLeft, TopRight, BottomLeft, BottomRight,
     TopMiddle, BottomMiddle, MiddleLeft, MiddleRight,
-    Origin
+    Origin, Rotation,
 } from './Const.js';
 import IsFunction from '../../../../plugins/utils/object/IsFunction.js';
 import AddDragMoveBehavior from './AddDragMoveBehavior.js';
 import AddDragResizeBehavior from './AddDragResizeBehavior.js';
+import AddDragRotationBehavior from './AddDragRotationBehavior.js';
 
+const ControlPointNames = [
+    TopLeft, TopRight, BottomRight, BottomLeft,
+    TopMiddle, BottomMiddle, MiddleLeft, MiddleRight,
+    Origin, Rotation
+];
 
 const GetValue = Phaser.Utils.Objects.GetValue;
 
-var GtDefaultCallback = function (config) {
-    var color = GetValue(config, 'color');
-    var alpha = GetValue(config, 'alpha', 1);
-    var strokeColor = GetValue(config, 'strokeColor');
-    var strokeWidth = GetValue(config, 'strokeWidth', 2);
-    var radius = GetValue(config, 'radius', 10);
-    return function (scene) {
-        return scene.add.circle(0, 0, radius, color, alpha).setStrokeStyle(strokeColor, strokeWidth);
+var GetPointCallback = function (config, key) {
+    var callback = GetValue(config, key);
+
+    if (!IsFunction(callback)) {
+        config = callback;
+        var color = GetValue(config, 'color');
+        var alpha = GetValue(config, 'alpha', 1);
+        var strokeColor = GetValue(config, 'strokeColor');
+        var strokeWidth = GetValue(config, 'strokeWidth', 2);
+        var radius = GetValue(config, 'radius', 10);
+        callback = function (scene) {
+            return scene.add.circle(0, 0, radius, color, alpha).setStrokeStyle(strokeColor, strokeWidth);
+        }
     }
+
+    return callback;
 }
 
-const ControlPointNames = [TopLeft, TopRight, BottomRight, BottomLeft, TopMiddle, BottomMiddle, MiddleLeft, MiddleRight, Origin];
+var AddControlPoints = function (parent, config) {
+    var originPointCallback = GetPointCallback(config, 'originPoint');
+    var resizePointCallback = GetPointCallback(config, 'resizePoint');
+    var rotationPointCallback = GetPointCallback(config, 'rotationPoint');
 
-var AddControlPoints = function (parent, callback) {
-    if (!IsFunction(callback)) {
-        callback = GtDefaultCallback(callback);
-    }
+    var pointsData = [
+        { name: TopLeft, callback: resizePointCallback },
+        { name: TopRight, callback: resizePointCallback },
+        { name: BottomRight, callback: resizePointCallback },
+        { name: BottomLeft, callback: resizePointCallback },
+        { name: TopMiddle, callback: resizePointCallback },
+        { name: BottomMiddle, callback: resizePointCallback },
+        { name: MiddleLeft, callback: resizePointCallback },
+        { name: MiddleRight, callback: resizePointCallback },
+        { name: Origin, callback: originPointCallback },
+        { name: Rotation, callback: rotationPointCallback },
+    ]
 
     var scene = parent.scene;
-    for (var i = 0, cnt = ControlPointNames.length; i < cnt; i++) {
-        var controlPointName = ControlPointNames[i];
-        var controlPoint = callback(scene);
+    for (var i = 0, cnt = pointsData.length; i < cnt; i++) {
+        var pointData = pointsData[i];
+        var controlPointName = pointData.name;
+        var controlPoint = pointData.callback(scene);
+
         controlPoint.pointName = controlPointName;
         parent.pin(controlPoint);
         parent.addChildrenMap(controlPointName, controlPoint);
     }
 
     var childrenMap = parent.childrenMap;
+
     AddDragMoveBehavior(parent, childrenMap.origin);
+
     AddDragResizeBehavior(parent, childrenMap.topLeft, childrenMap.bottomRight, 'xy');
     AddDragResizeBehavior(parent, childrenMap.bottomRight, childrenMap.topLeft, 'xy');
     AddDragResizeBehavior(parent, childrenMap.topRight, childrenMap.bottomLeft, 'xy');
@@ -47,6 +75,8 @@ var AddControlPoints = function (parent, callback) {
     AddDragResizeBehavior(parent, childrenMap.bottomMiddle, childrenMap.topMiddle, 'y');
     AddDragResizeBehavior(parent, childrenMap.middleLeft, childrenMap.middleRight, 'x');
     AddDragResizeBehavior(parent, childrenMap.middleRight, childrenMap.middleLeft, 'x');
+
+    AddDragRotationBehavior(parent, childrenMap.rotation, childrenMap.origin);
 }
 
 var UpdateControlPoint = function (parent, controlPoint, points) {

diff --git a/templates/gameobjectshell/transformcontroller/methods/UpdateChildren.js b/templates/gameobjectshell/transformcontroller/methods/UpdateChildren.js
@@ -4,6 +4,9 @@ import {
 } from '../../../../plugins/utils/bounds/GetBounds.js';
 import { UpdateBoundRectangle } from './BoundsRectangleMethods.js';
 import { UpdateControlPoints } from './ControlPointMethods.js';
+import { RotationPointAngle } from './Const.js';
+
+const DegToRad = Phaser.Math.DegToRad;
 
 var UpdateChildren = function () {
     var points = GetCornerPoints(this);
@@ -25,6 +28,7 @@ var GetCornerPoints = function (parent) {
             middleLeft: {},
             middleRight: {},
             origin: {},
+            rotation: {},
         }
     }
 
@@ -41,6 +45,10 @@ var GetCornerPoints = function (parent) {
     GlobalPoints.origin.x = parent.x;
     GlobalPoints.origin.y = parent.y;
 
+    var rotation = DegToRad(parent.angle + RotationPointAngle);
+    GlobalPoints.rotation.x = parent.x + (30) * Math.cos(rotation);
+    GlobalPoints.rotation.y = parent.y + (30) * Math.sin(rotation);
+
     return GlobalPoints;
 }