fix: shape save/restore canvas to ensure we dont polute other shapes

feat: ignorePadding option

Author: farfromrefug

src/shapes/shape.ts

@@ -230,8 +230,11 @@ export default abstract class Shape extends Observable {
     @percentLengthProperty({ nonPaintProp: true }) translateX: PercentLength = 0;
     @percentLengthProperty({ nonPaintProp: true }) translateY: PercentLength = 0;
     @numberProperty({ nonPaintProp: true }) rotate: number = 0;
+    @numberProperty({ nonPaintProp: true }) originX: number = 0;
+    @numberProperty({ nonPaintProp: true }) originY: number = 0;
     @numberProperty({ nonPaintProp: true }) scaleX: number = 1;
     @numberProperty({ nonPaintProp: true }) scaleY: number = 1;
+    @booleanProperty({ nonPaintProp: true }) ignorePadding: boolean = false;
 
     protected handleAlignment = false;
 
@@ -260,28 +263,33 @@ export default abstract class Shape extends Observable {
             dy += Utils.layout.toDeviceIndependentPixels(PercentLength.toDevicePixels(this.translateY, 0, availableHeight));
         }
         if (!this.handleAlignment) {
-            const paddingLeft = Utils.layout.toDeviceIndependentPixels(
-                parent.effectivePaddingLeft + PercentLength.toDevicePixels(this.paddingLeft, 0, availableWidth) + parent.effectiveBorderLeftWidth
-            );
-            const paddingRight = Utils.layout.toDeviceIndependentPixels(
-                parent.effectivePaddingRight + PercentLength.toDevicePixels(this.paddingRight, 0, availableWidth) + parent.effectiveBorderRightWidth
-            );
-            const paddingTop = Utils.layout.toDeviceIndependentPixels(parent.effectivePaddingTop + PercentLength.toDevicePixels(this.paddingTop, 0, availableHeight) + parent.effectiveBorderTopWidth);
-            const paddingBottom = Utils.layout.toDeviceIndependentPixels(
-                parent.effectivePaddingBottom + PercentLength.toDevicePixels(this.paddingBottom, 0, availableHeight) + parent.effectiveBorderBottomWidth
-            );
-            if (paddingLeft > 0) {
-                dx += paddingLeft;
-            }
-            if (this.horizontalAlignment && this.horizontalAlignment !== 'left' && paddingRight > 0) {
-                dx -= paddingRight;
-            }
-            if (paddingTop > 0) {
-                dy += paddingTop;
-            }
-            if (this.verticalAlignment && this.verticalAlignment !== 'top' && paddingBottom > 0) {
-                dy -= paddingBottom;
+            if (!this.ignorePadding) {
+                const paddingLeft = Utils.layout.toDeviceIndependentPixels(
+                    parent.effectivePaddingLeft + PercentLength.toDevicePixels(this.paddingLeft, 0, availableWidth) + parent.effectiveBorderLeftWidth
+                );
+                const paddingRight = Utils.layout.toDeviceIndependentPixels(
+                    parent.effectivePaddingRight + PercentLength.toDevicePixels(this.paddingRight, 0, availableWidth) + parent.effectiveBorderRightWidth
+                );
+                const paddingTop = Utils.layout.toDeviceIndependentPixels(
+                    parent.effectivePaddingTop + PercentLength.toDevicePixels(this.paddingTop, 0, availableHeight) + parent.effectiveBorderTopWidth
+                );
+                const paddingBottom = Utils.layout.toDeviceIndependentPixels(
+                    parent.effectivePaddingBottom + PercentLength.toDevicePixels(this.paddingBottom, 0, availableHeight) + parent.effectiveBorderBottomWidth
+                );
+                if (paddingLeft > 0) {
+                    dx += paddingLeft;
+                }
+                if (this.horizontalAlignment && this.horizontalAlignment !== 'left' && paddingRight > 0) {
+                    dx -= paddingRight;
+                }
+                if (paddingTop > 0) {
+                    dy += paddingTop;
+                }
+                if (this.verticalAlignment && this.verticalAlignment !== 'top' && paddingBottom > 0) {
+                    dy -= paddingBottom;
+                }
             }
+
             if (this.horizontalAlignment === 'right') {
                 const sWidth = this.getWidth(availableWidth, availableHeight);
                 dx += width - sWidth;
@@ -297,16 +305,13 @@ export default abstract class Shape extends Observable {
                 dy += height / 2 - sHeight / 2;
             }
         }
-        const needsSave = dx !== 0 || dy !== 0 || this.rotate !== 0;
-        if (needsSave) {
-            canvas.save();
+        canvas.save();
+        if (this.rotate !== 0) {
+            canvas.rotate(this.rotate, this.originX, this.originY);
         }
         if (dx !== 0 || dy !== 0) {
             canvas.translate(dx, dy);
         }
-        if (this.rotate !== 0) {
-            canvas.rotate(this.rotate);
-        }
         if (this.scaleX !== 1 || this.scaleY !== 1) {
             canvas.scale(this.scaleX, this.scaleY);
         }
@@ -341,8 +346,6 @@ export default abstract class Shape extends Observable {
         } else {
             this.drawOnCanvas(canvas, parent);
         }
-        if (needsSave) {
-            canvas.restore();
-        }
+        canvas.restore();
     }
 }