@babylonjs/gui-editor 5.40.0 → 5.41.0

package/dist/babylon.guiEditor.max.js

@@ -38210,7 +38210,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
             }
         };
         const fontStyleOptions = [
-            { label: "regular", value: "regular", id: "0" },
+            { label: "normal", value: "normal", id: "0" },
             { label: "italic", value: "italic", id: "1" },
             { label: "oblique", value: "oblique", id: "2" },
         ];
@@ -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/observable");
-/* 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 } })] }));
 }