@babylonjs/gui-editor 5.40.1 → 5.42.0

package/dist/babylon.guiEditor.max.js

@@ -7,7 +7,7 @@
 		exports["@babylonjs/gui-editor"] = factory(require("@babylonjs/core"), require("@babylonjs/gui"));
 	else
 		root["GUIEDITOR"] = factory(root["BABYLON"], root["BABYLON"]["GUI"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), (__WEBPACK_EXTERNAL_MODULE_core_Misc_dataStorage__, __WEBPACK_EXTERNAL_MODULE_gui_2D_controls_container__) => {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), (__WEBPACK_EXTERNAL_MODULE_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE_gui_2D_controls_container__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -35350,7 +35350,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-/* harmony import */ var core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.color */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.color */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./colorComponentEntry */ "../../../dev/sharedUiComponents/dist/colorPicker/colorComponentEntry.js");
 /* harmony import */ var _hexColor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hexColor */ "../../../dev/sharedUiComponents/dist/colorPicker/hexColor.js");
@@ -35909,7 +35909,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-/* harmony import */ var core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.color */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.color */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _numericInputComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./numericInputComponent */ "../../../dev/sharedUiComponents/dist/lines/numericInputComponent.js");
 /* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
@@ -36193,7 +36193,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var _sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./sliderLineComponent */ "../../../dev/sharedUiComponents/dist/lines/sliderLineComponent.js");
-/* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core/Misc/tools */ "core/Misc/dataStorage");
+/* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core/Misc/tools */ "core/Misc/observable");
 /* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./targetsProxy */ "../../../dev/sharedUiComponents/dist/lines/targetsProxy.js");
 /* harmony import */ var _inputArrowsComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./inputArrowsComponent */ "../../../dev/sharedUiComponents/dist/lines/inputArrowsComponent.js");
@@ -36737,7 +36737,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-/* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Misc/tools */ "core/Misc/dataStorage");
+/* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Misc/tools */ "core/Misc/observable");
 /* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./floatLineComponent */ "../../../dev/sharedUiComponents/dist/lines/floatLineComponent.js");
 
@@ -37285,7 +37285,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "CommandBarComponent": () => (/* binding */ CommandBarComponent)
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
-/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/dataStorage");
+/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
 /* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../globalState */ "../../../tools/guiEditor/dist/globalState.js");
@@ -37689,7 +37689,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! shared-ui-components/lines/textLineComponent */ "../../../dev/sharedUiComponents/dist/lines/textLineComponent.js");
 /* harmony import */ var shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! shared-ui-components/lines/floatLineComponent */ "../../../dev/sharedUiComponents/dist/lines/floatLineComponent.js");
 /* harmony import */ var _tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../tools */ "../../../tools/guiEditor/dist/tools.js");
-/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_5__);
 
 
@@ -37898,7 +37898,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared-ui-components/lines/colorLineComponent */ "../../../dev/sharedUiComponents/dist/lines/colorLineComponent.js");
 /* harmony import */ var shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared-ui-components/lines/targetsProxy */ "../../../dev/sharedUiComponents/dist/lines/targetsProxy.js");
 /* harmony import */ var _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../diagram/coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
-/* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! core/Maths/math */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! core/Maths/math */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math__WEBPACK_IMPORTED_MODULE_11__);
 /* harmony import */ var shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! shared-ui-components/lines/iconComponent */ "../../../dev/sharedUiComponents/dist/lines/iconComponent.js");
 /* harmony import */ var shared_ui_components_components_lines_OptionsLineComponent__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! shared-ui-components/components/lines/OptionsLineComponent */ "../../../dev/sharedUiComponents/dist/components/lines/OptionsLineComponent.js");
@@ -39576,7 +39576,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-/* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Misc/stringTools */ "core/Misc/dataStorage");
+/* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Misc/stringTools */ "core/Misc/observable");
 /* harmony import */ var core_Misc_tools__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! shared-ui-components/stringTools */ "../../../dev/sharedUiComponents/dist/stringTools.js");
 /* harmony import */ var shared_ui_components_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared-ui-components/tabs/propertyGrids/lockObject */ "../../../dev/sharedUiComponents/dist/tabs/propertyGrids/lockObject.js");
@@ -40852,7 +40852,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gui/2D/math2D */ "gui/2D/controls/container");
 /* harmony import */ var gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -41120,7 +41120,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gui/2D/math2D */ "gui/2D/controls/container");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
@@ -41503,20 +41503,70 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./gizmoScalePoint */ "../../../tools/guiEditor/dist/diagram/gizmoScalePoint.js");
-/* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
-/* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Maths/math */ "core/Misc/dataStorage");
-/* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core/Maths/math */ "core/Misc/observable");
+/* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
+/* harmony import */ var gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! gui/2D/math2D */ "gui/2D/controls/container");
+/* harmony import */ var gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__);
+
 
 
 
 
 
+function getPivotToRef(x1, y1, x2, y2, centerX, centerY, ref) {
+    const minX = Math.min(x1, x2);
+    const minY = Math.min(y1, y2);
+    const maxX = Math.max(x1, x2);
+    const maxY = Math.max(y1, y2);
+    const width = maxX - minX;
+    const height = maxY - minY;
+    // Get pivot
+    const xm = minX + width * centerX;
+    const ym = minY + height * centerY;
+    ref.x = xm;
+    ref.y = ym;
+}
+const TmpVectors = [new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2(), new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2(), new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2()];
+/**
+ * This class represents the gizmo drawn on a line Control.
+ */
 function GizmoLine(props) {
     const { control, globalState } = props;
+    const isPivotMoving = react__WEBPACK_IMPORTED_MODULE_1__.useRef(false);
+    const isDragging = react__WEBPACK_IMPORTED_MODULE_1__.useRef(false);
+    const isRotating = react__WEBPACK_IMPORTED_MODULE_1__.useRef(false);
+    const movedScalePoint = react__WEBPACK_IMPORTED_MODULE_1__.useRef();
+    const lastCursor = react__WEBPACK_IMPORTED_MODULE_1__.useRef(new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2());
+    const pivot = react__WEBPACK_IMPORTED_MODULE_1__.useRef(new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2());
     const [scalePoints, setScalePoints] = react__WEBPACK_IMPORTED_MODULE_1__.useState([
-        { position: new core_Maths_math__WEBPACK_IMPORTED_MODULE_4__.Vector2(), horizontalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Left, verticalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Center, rotation: 0, isPivot: false, defaultRotation: 0 },
-        { position: new core_Maths_math__WEBPACK_IMPORTED_MODULE_4__.Vector2(), horizontalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Center, verticalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Center, rotation: 0, isPivot: true, defaultRotation: 0 },
-        { position: new core_Maths_math__WEBPACK_IMPORTED_MODULE_4__.Vector2(), horizontalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Right, verticalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Center, rotation: 0, isPivot: false, defaultRotation: 0 },
+        {
+            position: new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2(),
+            horizontalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Left,
+            verticalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Top,
+            rotation: 0,
+            isPivot: false,
+            defaultRotation: 0,
+            id: 0,
+        },
+        {
+            position: new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2(),
+            horizontalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Center,
+            verticalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Center,
+            rotation: 0,
+            isPivot: true,
+            defaultRotation: 0,
+            id: 1,
+        },
+        {
+            position: new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2(),
+            horizontalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Right,
+            verticalPosition: _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.ScalePointPosition.Bottom,
+            rotation: 0,
+            isPivot: false,
+            defaultRotation: 0,
+            id: 2,
+        },
     ]);
     react__WEBPACK_IMPORTED_MODULE_1__.useEffect(() => {
         // setup
@@ -41530,29 +41580,160 @@ function GizmoLine(props) {
     }, []);
     const update = () => {
         const line = control;
-        const offsetX = line._cachedParentMeasure.width * 0.5;
-        const offsetY = line._cachedParentMeasure.height * 0.5;
-        const x1 = line._x1.getValue(control.host) - offsetX;
-        const y1 = line._y1.getValue(control.host) - offsetY;
-        const x2 = line._effectiveX2 - offsetX;
-        const y2 = line._effectiveY2 - offsetY;
-        const positions = [
-            new core_Maths_math__WEBPACK_IMPORTED_MODULE_4__.Vector2(x1, y1),
-            new core_Maths_math__WEBPACK_IMPORTED_MODULE_4__.Vector2((control.transformCenterX - 0.5) * control.widthInPixels, (control.transformCenterY - 0.5) * control.heightInPixels),
-            new core_Maths_math__WEBPACK_IMPORTED_MODULE_4__.Vector2(x2, y2),
-        ];
+        const x1 = line._cachedParentMeasure.left + line._x1.getValue(line._host);
+        const y1 = line._cachedParentMeasure.top + line._y1.getValue(line._host);
+        const x2 = line._cachedParentMeasure.left + line._effectiveX2;
+        const y2 = line._cachedParentMeasure.top + line._effectiveY2;
+        const v1 = TmpVectors[0].set(x1, y1);
+        const v2 = TmpVectors[1].set(x2, y2);
+        const vm = TmpVectors[2];
+        getPivotToRef(x1, y1, x2, y2, line.transformCenterX, line.transformCenterY, vm);
+        const matrix = line._transformMatrix;
+        matrix.transformCoordinates(v1.x, v1.y, v1);
+        matrix.transformCoordinates(v2.x, v2.y, v2);
+        matrix.transformCoordinates(vm.x, vm.y, vm);
+        pivot.current = vm;
+        const positions = [v1, vm, v2];
         setScalePoints(scalePoints.map((point, index) => {
             const position = positions[index];
-            const rtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_3__.CoordinateHelper.NodeToRTTSpace(control, position.x, position.y);
-            const canvas = _coordinateHelper__WEBPACK_IMPORTED_MODULE_3__.CoordinateHelper.RttToCanvasSpace(rtt.x, rtt.y);
             return {
                 ...point,
-                position: canvas,
-                rotation: control.rotation,
+                position,
+                rotation: line.rotation,
             };
         }));
     };
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "gizmo", children: scalePoints.map((point, index) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.GizmoScalePoint, { scalePoint: point, clickable: true, onDrag: () => { }, onRotate: () => { }, onUp: () => { }, overrideCursor: "not-allowed", canRotate: false }, index))) }));
+    const _getAddAndRound = (value, host, delta) => {
+        return gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.MathTools.Round(value.getValue(host) + delta);
+    };
+    const _getDeltasToRef = (currentPointer, ref) => {
+        // We have to compute the difference in movement in the local node
+        // coordintes, so that it accounts for zoom
+        const rttClientCoords = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.MousePointerToRTTSpace(control, currentPointer.x, currentPointer.y);
+        const localClientCoords = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.RttToLocalNodeSpace(control, rttClientCoords.x, rttClientCoords.y);
+        const rttLastCoordinates = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.MousePointerToRTTSpace(control, lastCursor.current.x, lastCursor.current.y);
+        const localLastCoordinates = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.RttToLocalNodeSpace(control, rttLastCoordinates.x, rttLastCoordinates.y);
+        const delta = TmpVectors[0];
+        localClientCoords.subtractToRef(localLastCoordinates, delta);
+        const rotatedDelta = TmpVectors[1];
+        delta.rotateToRef(control.rotation, rotatedDelta);
+        ref.x = rotatedDelta.x;
+        ref.y = rotatedDelta.y;
+    };
+    const _dragPivot = (currentPointer) => {
+        const deltas = TmpVectors[0];
+        _getDeltasToRef(currentPointer, deltas);
+        control.x1 = _getAddAndRound(control._x1, control._host, deltas.x);
+        control.y1 = _getAddAndRound(control._y1, control._host, deltas.y);
+        control.x2 = _getAddAndRound(control._x2, control._host, deltas.x);
+        control.y2 = _getAddAndRound(control._y2, control._host, deltas.y);
+        globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
+    };
+    const _dragEndpoint = (currentPointer) => {
+        const deltas = TmpVectors[0];
+        _getDeltasToRef(currentPointer, deltas);
+        // Move only the scale point that was touched
+        const movedPointIndex = movedScalePoint.current;
+        if (movedPointIndex === 0) {
+            // Moved first point, (x1, y1)
+            control.x1 = _getAddAndRound(control._x1, control._host, deltas.x);
+            control.y1 = _getAddAndRound(control._y1, control._host, deltas.y);
+        }
+        else if (movedPointIndex === 2) {
+            // Moved second point, (x2, y2)
+            control.x2 = _getAddAndRound(control._x2, control._host, deltas.x);
+            control.y2 = _getAddAndRound(control._y2, control._host, deltas.y);
+        }
+        globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
+    };
+    const _rotateEndpoint = (currentPointer) => {
+        const currentToPivot = currentPointer.subtract(pivot.current);
+        currentToPivot.normalize();
+        const lastToPivot = lastCursor.current.subtract(pivot.current);
+        lastToPivot.normalize();
+        const dotProd = core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2.Dot(currentToPivot, lastToPivot);
+        const angle = Math.acos(dotProd);
+        const direction = -Math.sign(currentToPivot.x * lastToPivot.y - currentToPivot.y * lastToPivot.x);
+        if (!isNaN(angle)) {
+            control.rotation += direction * angle;
+            control.rotation = gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.MathTools.Round(control.rotation);
+            globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
+        }
+    };
+    const onMove = () => {
+        const scene = globalState.workbench._scene;
+        const currentPointer = new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2(scene.pointerX, scene.pointerY);
+        if (isDragging.current && isPivotMoving.current) {
+            _dragPivot(currentPointer);
+        }
+        else if (isDragging.current) {
+            _dragEndpoint(currentPointer);
+        }
+        else if (isRotating.current) {
+            _rotateEndpoint(currentPointer);
+        }
+        lastCursor.current = currentPointer;
+    };
+    const onUp = () => {
+        isDragging.current = false;
+        isRotating.current = false;
+    };
+    react__WEBPACK_IMPORTED_MODULE_1__.useEffect(() => {
+        const pointerMoveObserver = props.globalState.onPointerMoveObservable.add(onMove);
+        const pointerUpObserver = props.globalState.onPointerUpObservable.add(onUp);
+        return () => {
+            props.globalState.onPointerMoveObservable.remove(pointerMoveObserver);
+            props.globalState.onPointerUpObservable.remove(pointerUpObserver);
+        };
+    }, []);
+    const onDrag = (event, scalePoint) => {
+        if (event && scalePoint) {
+            const scene = globalState.workbench._scene;
+            lastCursor.current = new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2(scene.pointerX, scene.pointerY);
+            isPivotMoving.current = scalePoint.isPivot;
+            // If the control has any rotation, reset the
+            // rotation, modifying the so the scale behave as expected
+            if (!scalePoint.isPivot && control.rotation) {
+                const line = control;
+                const x1 = line._x1.getValue(line._host);
+                const y1 = line._y1.getValue(line._host);
+                const x2 = line._x2.getValue(line._host);
+                const y2 = line._y2.getValue(line._host);
+                const v1 = TmpVectors[0].set(x1, y1);
+                const v2 = TmpVectors[1].set(x2, y2);
+                const vm = TmpVectors[2];
+                getPivotToRef(x1, y1, x2, y2, line.transformCenterX, line.transformCenterY, vm);
+                const finalTransform = gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.Matrix2D.Identity();
+                const currentTransform = gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.Matrix2D.Identity();
+                gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.Matrix2D.TranslationToRef(-vm.x, -vm.y, currentTransform);
+                finalTransform.multiplyToRef(currentTransform, finalTransform);
+                gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.Matrix2D.RotationToRef(control.rotation, currentTransform);
+                finalTransform.multiplyToRef(currentTransform, finalTransform);
+                gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.Matrix2D.TranslationToRef(vm.x, vm.y, currentTransform);
+                finalTransform.multiplyToRef(currentTransform, finalTransform);
+                finalTransform.transformCoordinates(v1.x, v1.y, v1);
+                finalTransform.transformCoordinates(v2.x, v2.y, v2);
+                control.rotation = 0;
+                control.x1 = gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.MathTools.Round(v1.x);
+                control.y1 = gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.MathTools.Round(v1.y);
+                control.x2 = gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.MathTools.Round(v2.x);
+                control.y2 = gui_2D_math2D__WEBPACK_IMPORTED_MODULE_5__.MathTools.Round(v2.y);
+                globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
+            }
+            isDragging.current = true;
+            isRotating.current = false;
+            movedScalePoint.current = scalePoint.id;
+        }
+    };
+    const onRotate = (event) => {
+        if (event) {
+            isRotating.current = true;
+            isDragging.current = false;
+            const scene = globalState.workbench._scene;
+            lastCursor.current = new core_Maths_math__WEBPACK_IMPORTED_MODULE_3__.Vector2(scene.pointerX, scene.pointerY);
+        }
+    };
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "gizmo", children: scalePoints.map((point, index) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.GizmoScalePoint, { scalePoint: point, allowClickOnPivot: true, clickable: true, onDrag: onDrag, onRotate: onRotate, onUp: onUp, canRotate: true }, index))) }));
 }
 
 
@@ -41626,7 +41807,7 @@ const scalePointCursors = [
 const rotateCursors = [_imgs_cursor_rotate0_svg__WEBPACK_IMPORTED_MODULE_6__, _imgs_cursor_rotate1_svg__WEBPACK_IMPORTED_MODULE_7__, _imgs_cursor_rotate2_svg__WEBPACK_IMPORTED_MODULE_8__, _imgs_cursor_rotate3_svg__WEBPACK_IMPORTED_MODULE_9__, _imgs_cursor_rotate4_svg__WEBPACK_IMPORTED_MODULE_10__, _imgs_cursor_rotate5_svg__WEBPACK_IMPORTED_MODULE_11__, _imgs_cursor_rotate6_svg__WEBPACK_IMPORTED_MODULE_12__, _imgs_cursor_rotate7_svg__WEBPACK_IMPORTED_MODULE_13__].map((cursor) => `url("${cursor}") 12 12, pointer`);
 const modulo = (dividend, divisor) => ((dividend % divisor) + divisor) % divisor;
 function GizmoScalePoint(props) {
-    const { scalePoint, clickable, onDrag, onRotate, onUp, overrideCursor, canRotate } = props;
+    const { scalePoint, clickable, onDrag, onRotate, onUp, overrideCursor, canRotate, allowClickOnPivot } = props;
     const style = {
         left: `${scalePoint.position.x}px`,
         top: `${scalePoint.position.y}px`,
@@ -41634,7 +41815,15 @@ function GizmoScalePoint(props) {
         pointerEvents: clickable ? "auto" : "none",
     };
     if (scalePoint.isPivot) {
-        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "pivot-point", src: _imgs_gizmoPivotIcon_svg__WEBPACK_IMPORTED_MODULE_1__, style: style, onDragStart: (evt) => evt.preventDefault() });
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "pivot-point", src: _imgs_gizmoPivotIcon_svg__WEBPACK_IMPORTED_MODULE_1__, style: style, onDragStart: (evt) => evt.preventDefault(), onPointerDown: (event) => {
+                if (allowClickOnPivot) {
+                    onDrag(event, scalePoint);
+                }
+            }, onPointerUp: () => {
+                if (allowClickOnPivot) {
+                    onUp();
+                }
+            } }));
     }
     // compute which cursor icon to use on hover
     const angleOfCursor = scalePoint.defaultRotation + scalePoint.rotation;
@@ -41657,14 +41846,16 @@ function GizmoScalePoint(props) {
         left: (scalePointContainerSize - scaleClickAreaSize) / 2 - scaleClickAreaOffset * scalePoint.horizontalPosition,
         cursor,
     };
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { style: style, className: "scale-point-container", children: [canRotate && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "rotate-click-area", onPointerDown: onRotate, style: rotateClickAreaStyle }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "scale-click-area", draggable: true, onDragStart: (evt) => evt.preventDefault(), onPointerDown: (event) => {
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { style: style, className: "scale-point-container", children: [canRotate && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "rotate-click-area", onPointerDown: (event) => {
+                    onRotate(event, scalePoint);
+                }, style: rotateClickAreaStyle })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "scale-click-area", draggable: true, onDragStart: (evt) => evt.preventDefault(), onPointerDown: (event) => {
                     // if left mouse button down
                     if (event.buttons & 1) {
-                        onDrag();
+                        onDrag(event, scalePoint);
                     }
                 }, onPointerUp: onUp, style: scaleClickAreaStyle }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "scale-point", draggable: true, onDragStart: (evt) => evt.preventDefault(), onPointerDown: (event) => {
                     if (event.buttons & 1) {
-                        onDrag();
+                        onDrag(event, scalePoint);
                     }
                 }, onPointerUp: onUp, style: { cursor } })] }));
 }
@@ -41724,7 +41915,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../globalState */ "../../../tools/guiEditor/dist/globalState.js");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _tools__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tools */ "../../../tools/guiEditor/dist/tools.js");
 /* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
@@ -42710,7 +42901,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "GUIEditorTool": () => (/* binding */ GUIEditorTool),
 /* harmony export */   "GlobalState": () => (/* binding */ GlobalState)
 /* harmony export */ });
-/* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core/Maths/math.color */ "core/Misc/dataStorage");
+/* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core/Maths/math.color */ "core/Misc/observable");
 /* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var shared_ui_components_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! shared-ui-components/tabs/propertyGrids/lockObject */ "../../../dev/sharedUiComponents/dist/tabs/propertyGrids/lockObject.js");
 /* harmony import */ var _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./diagram/coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
@@ -43267,7 +43458,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "KeyboardManager": () => (/* binding */ KeyboardManager)
 /* harmony export */ });
-/* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core/Misc/observable */ "core/Misc/dataStorage");
+/* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core/Misc/observable */ "core/Misc/observable");
 /* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 
 class KeyboardManager {
@@ -43394,7 +43585,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "Tools": () => (/* binding */ Tools)
 /* harmony export */ });
-/* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core/Maths/math */ "core/Misc/dataStorage");
+/* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core/Maths/math */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 class Tools {
@@ -43489,7 +43680,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyTabComponent.js");
 /* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./portal */ "../../../tools/guiEditor/dist/portal.js");
 /* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/guiEditor/dist/components/log/logComponent.js");
-/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/dataStorage");
+/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
 /* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
 /* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
@@ -46019,14 +46210,14 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v
 
 /***/ }),
 
-/***/ "core/Misc/dataStorage":
+/***/ "core/Misc/observable":
 /*!**********************************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"@babylonjs/core","commonjs2":"@babylonjs/core","amd":"@babylonjs/core"} ***!
   \**********************************************************************************************************************/
 /***/ ((module) => {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE_core_Misc_dataStorage__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_core_Misc_observable__;
 
 /***/ }),