From 9d287cc9c7308c0fd585a7543e7ef6ad8c4f0653 Mon Sep 17 00:00:00 2001 From: Rex Date: Sun, 3 Sep 2023 13:49:35 +0800 Subject: [PATCH] Add rotation control point --- .../gameobjectshell/transform-controller.js | 13 +++- .../TransformController.js | 4 +- .../methods/AddDragResizeBehavior.js | 2 +- .../methods/AddDragRotationBehavior.js | 14 ++++ .../methods/BoundsRectangleMethods.js | 9 ++- .../transformcontroller/methods/Const.js | 6 +- .../methods/ControlPointMethods.js | 64 ++++++++++++++----- .../methods/UpdateChildren.js | 8 +++ 8 files changed, 93 insertions(+), 27 deletions(-) create mode 100644 templates/gameobjectshell/transformcontroller/methods/AddDragRotationBehavior.js diff --git a/examples/gameobjectshell/transform-controller.js b/examples/gameobjectshell/transform-controller.js index f85b85c679..e88a19909d 100644 --- 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 index c33052ebc6..06ca8f267a 100644 --- 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 index ea9218ecac..e0b5435b2f 100644 --- 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 new file mode 100644 index 0000000000..e3f3d761f2 --- /dev/null +++ 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; \ No newline at end of file diff --git a/templates/gameobjectshell/transformcontroller/methods/BoundsRectangleMethods.js b/templates/gameobjectshell/transformcontroller/methods/BoundsRectangleMethods.js index 60a16124c0..f583b2f8b7 100644 --- 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 index 0b5b1891ef..d25138209a 100644 --- 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'; \ No newline at end of file +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 index fb1ba4ea2d..900b20d770 100644 --- 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 index 7ed1d89cdc..37189788ee 100644 --- 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; }