Merge pull request #16 from adrientremblay/texture-aspect-ratio

Changed default scaling of textures (right panel) to keep aspect ratio

Author: raycastly

index.html

@@ -64,7 +64,7 @@
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-  	<script src="https://cdn.jsdelivr.net/npm/konva@8.4.3/konva.min.js"></script>
+  	<script src="https://cdn.jsdelivr.net/npm/konva@10.0.12/konva.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
 
     <script src="scripts/jquery.min.js"></script>

scripts/polygonManager.js

@@ -8,7 +8,8 @@ const PolygonManager = {
             _id: Utils.generateId()
         });
 
-        if (group && group._id) dirtyPolygons.add(group._id);
+        if (group && group._id)
+            dirtyPolygons.add(group._id);
 
         // Get vertices - either from provided points or create default rectangle
         let vertices;

scripts/rightPanelManager.js

@@ -51,7 +51,8 @@ const RightPanelManager = {
 
         // Transformer for selection
         const tr = new Konva.Transformer({
-            keepRatio: false,
+            keepRatio: true,
+            shiftBehavior: 'inverted',
             rotateEnabled: true,
             rotationSnaps: [0, 90, 180, 270],
             rotationSnapTolerance: 5,

scripts/use-konva-snapping.js

@@ -158,9 +158,9 @@ const useKonvaSnapping = (params) => {
         const { snapRange } = defaultParams;
 
         let { horizontal, vertical } = getSnappingPoints(e);
-        if(!e.currentTarget.keepRatio() || (e.currentTarget.keepRatio() && !!!oppositeAnchors[e.currentTarget._movingAnchorName])){
+        const keepRatio = !e.evt.shiftKey ? e.currentTarget.keepRatio() : ! e.currentTarget.keepRatio();
+        if(!keepRatio || (keepRatio && !!!oppositeAnchors[e.currentTarget._movingAnchorName])){
             e.currentTarget.anchorDragBoundFunc((oldAbsPos, newAbsPos, event) => {
-                //console.log(e.target)
 
                 Layer.find(".guid-line").forEach((line) => line.destroy());
                         let bounds = { x: newAbsPos.x, y: newAbsPos.y };