Refactor the project to remove code duplication

src/@classes/abstract/IsometricContainer/IsometricContainer.ts

@@ -42,21 +42,17 @@ export class IsometricContainer extends IsometricElement {
         }
     }
 
-    protected updateChildren(): void {
+    public get children(): IsometricElement[] {
+        return this._children;
+    }
+
+    public update(): this {
         if (elementHasSVGParent(this.element)) {
             this._children.forEach((child: IsometricElement): void => {
                 child.data = this.data;
                 child.update();
             });
         }
-    }
-
-    public get children(): IsometricElement[] {
-        return this._children;
-    }
-
-    public update(): this {
-        this.updateChildren();
         return this;
     }
 

src/@classes/abstract/IsometricGraphic/IsometricGraphic.ts

@@ -2,9 +2,12 @@ import {
     Colors,
     LineCap,
     LineJoin,
-    DECIMALS
+    DECIMALS,
+    SVG_NAMESPACE,
+    SVG_ELEMENTS
 } from '@constants';
 import {
+    CommandPoint,
     IsometricPoint,
     IsometricPlaneView,
     StrokeLinecap, 
@@ -13,14 +16,13 @@ import {
     SVGAnimationObject,
     Texture
 } from '@types';
-import {
-    SVG_NAMESPACE,
-    SVG_ELEMENTS
-} from '@constants';
 import {
     addSVGProperties,
     getSVGProperty,
-    getPatternTransform
+    getPatternTransform,
+    getSVGPath,
+    getTextureCorner,
+    elementHasSVGParent
 } from '@utils/svg';
 import { uuid, round, getPointFromIsometricPoint } from '@utils/math';
 import { IsometricElement } from "../IsometricElement";
@@ -122,6 +124,33 @@ export abstract class IsometricGraphic extends IsometricElement {
     protected pattern: SVGPatternElement;
     protected animations: SVGAnimationObject[];
     protected abstract privateUpdateAnimations(): void;
+    protected abstract getCommands(args?: unknown): CommandPoint[];
+
+    protected updateGraphic(planeView?: IsometricPlaneView, autoclose = true) {
+        if (elementHasSVGParent(this.element)) {
+            const commands = this.getCommands();
+            const corner = getTextureCorner(
+                commands,
+                this.data.centerX,
+                this.data.centerY,
+                this.data.scale
+            );
+            addSVGProperties(
+                this.element,
+                {
+                    d: getSVGPath(
+                        commands,
+                        this.data.centerX,
+                        this.data.centerY,
+                        this.data.scale,
+                        autoclose
+                    )
+                }
+            );
+            this.updatePatternTransform(corner, planeView);
+            this.updateAnimations();
+        }
+    }
 
     protected updateAnimations(): void {
 

src/@classes/abstract/IsometricShape/IsometricShape.ts

@@ -1,77 +1,82 @@
 import { IsometricPlaneView } from '@types';
-import { SVG_ELEMENTS } from '@constants';
+import {
+    SVG_ELEMENTS,
+    Typeof
+} from '@constants';
+import { addSVGProperties } from '@utils/svg';
 import { IsometricGraphic } from '@classes/abstract/IsometricGraphic';
 import { IsometricShapeProps } from './types';
 
 export abstract class IsometricShape extends IsometricGraphic {
 
+    // Exclude the next constructor from the coverage reports
+    // Check https://github.com/microsoft/TypeScript/issues/13029
+    /* istanbul ignore next */
     public constructor(props: IsometricShapeProps) {
-        const { planeView, right = 0, left = 0, top = 0, ...rest } = props;
-        // Exclude the next line from the coverage reports
-        // Check https://github.com/microsoft/TypeScript/issues/13029
-        /* istanbul ignore next */
-        super(rest, SVG_ELEMENTS.path);
-        this.shapeView = planeView;
-        this.posRight = right;
-        this.posLeft = left;
-        this.posTop = top;
+        super(props, SVG_ELEMENTS.path);
+        if (typeof this.props.right === Typeof.UNDEFINED) {
+            this.props.right = 0;
+        }
+        if (typeof this.props.left === Typeof.UNDEFINED) {
+            this.props.left = 0;
+        }
+        if (typeof this.props.top === Typeof.UNDEFINED) {
+            this.props.top = 0;
+        }
     }
 
-    protected shapeView: IsometricPlaneView;
-    protected posRight: number;
-    protected posLeft: number;
-    protected posTop: number;
+    protected override props: IsometricShapeProps;
 
-    // position
-    protected setPlaneView(value: IsometricPlaneView): void {
-        this.shapeView = value;
+    public update(): this {
+        this.updateGraphic(this.planeView);
+        return this;
     }
 
+    public clear(): this {
+        addSVGProperties(this.element, {
+            d: ''
+        });
+        return this;
+    }
+
+    // planeView
     public get planeView(): IsometricPlaneView {
-        return this.shapeView;
+        return this.props.planeView;
     }
 
     public set planeView(value: IsometricPlaneView) {
-        this.setPlaneView(value);
+        this.props.planeView = value;
+        this.update();
     }
 
     // right
-    protected setRight(value: number): void {
-        this.posRight = value;
-    }
-
     public get right(): number {
-        return this.posRight;
+        return this.props.right;
     }
 
     public set right(value: number) {
-        this.setRight(value);
+        this.props.right = value;
+        this.update();
     }
 
     // left
-    protected setLeft(value: number): void {
-        this.posLeft = value;
-    }
-
     public get left(): number {
-        return this.posLeft;
+        return this.props.left;
     }
 
     public set left(value: number) {
-        this.setLeft(value);
+        this.props.left = value;
+        this.update();
     }
 
     // top
-    protected setTop(value: number): void {
-        this.posTop = value;
-    }
-
     public get top(): number {
-        return this.posTop;
+        return this.props.top;
     }
 
     public set top(value: number) {
-        this.setTop(value);
+        this.props.top = value;
+        this.update();
     }
 
 }

src/@classes/public/IsometricCanvas/IsometricCanvas.ts

@@ -6,10 +6,10 @@ import {
     DEFAULT_HEIGHT,
     Colors
 } from '@constants';
-import { IsometricContainer } from '@classes/abstract/IsometricContainer';
-import { IsometricCanvasProps } from './types';
 import { addSVGProperties } from '@utils/svg';
 import { Store } from '@store';
+import { IsometricContainer } from '@classes/abstract/IsometricContainer';
+import { IsometricCanvasProps } from './types';
 
 const defaultProps: IsometricCanvasProps = {
     container: 'body',
@@ -84,7 +84,7 @@ export class IsometricCanvas extends IsometricContainer {
 
     public set scale(value: number) {
         this.data.scale = value;
-        this.updateChildren();
+        this.update();
     }
 
     public get height(): number {
@@ -100,7 +100,7 @@ export class IsometricCanvas extends IsometricContainer {
         addSVGProperties(this.background, {
             height: `${this.data.height}px`
         });
-        this.updateChildren();
+        this.update();
     }
 
     public get width(): number {
@@ -116,7 +116,7 @@ export class IsometricCanvas extends IsometricContainer {
         addSVGProperties(this.background, {
             width: `${this.data.width}px`
         });
-        this.updateChildren();
+        this.update();
     }
 
     public get animated(): boolean {

src/@classes/public/IsometricCircle/IsometricCircle.ts

@@ -4,28 +4,21 @@ import {
 } from '@constants';
 import {
     CommandPoint,
-    IsometricPlaneView,
     SVGCircleAnimation,
     SVGShapeProperties,
     SVGCircleProperties,
     SVGAnimationObject
 } from '@types';
-import { IsometricShape } from '@classes/abstract/IsometricShape';
 import {
     addSVGProperties,
     getSVGPath,
-    getTextureCorner,
-    translateCommandPoints,
-    elementHasSVGParent
+    translateCommandPoints
 } from '@utils/svg';
-import { IsometricCircleProps } from './types';
-
-interface GetCirclePathArguments {
-    right: number;
-    left: number;
-    top: number;
-    radius: number;
-}
+import { IsometricShape } from '@classes/abstract/IsometricShape';
+import {
+    IsometricCircleProps,
+    GetCirclePathArguments
+} from './types';
 
 export class IsometricCircle extends IsometricShape {
 
@@ -35,13 +28,16 @@ export class IsometricCircle extends IsometricShape {
         // Check https://github.com/microsoft/TypeScript/issues/13029
         /* istanbul ignore next */
         super(rest);
-        this.circleRadius = radius;
+        this._radius = radius;
     }
 
-    private circleRadius: number;
+    private _radius: number;
 
-    private getCommands(args: GetCirclePathArguments): CommandPoint[] {
-        const { right, left, top, radius } = args;        
+    protected getCommands(args?: GetCirclePathArguments): CommandPoint[] {
+        const right = args?.right || this.right;
+        const left = args?.left || this.left;
+        const top = args?.top || this.top;
+        const radius = args?.radius || this.radius;
         const commands: CommandPoint[] = [];
         switch(this.planeView) {
             case PlaneView.FRONT:
@@ -162,72 +158,13 @@ export class IsometricCircle extends IsometricShape {
         });
 
     }
-
-    public update(): this {
-        if (elementHasSVGParent(this.element)) {
-            const commands = this.getCommands({
-                right: this.right,
-                left: this.left,
-                top: this.top,
-                radius: this.radius
-            });
-            const corner = getTextureCorner(
-                commands,
-                this.data.centerX,
-                this.data.centerY,
-                this.data.scale
-            );
-            addSVGProperties(
-                this.element,
-                {
-                    d: getSVGPath(
-                        commands,
-                        this.data.centerX,
-                        this.data.centerY,
-                        this.data.scale,
-                        true
-                    )
-                }
-            );
-            this.updatePatternTransform(corner, this.planeView);
-            this.updateAnimations();
-        }
-        return this;
-    }
-
-    public clear(): this {
-        addSVGProperties(this.element, {
-            d: ''
-        });
-        return this;
-    }
-
-    protected setPlaneView(value: IsometricPlaneView): void {
-        super.setPlaneView(value);
-        this.update();
-    }
-
-    protected setRight(value: number): void {
-        super.setRight(value);
-        this.update();
-    }
-
-    protected setLeft(value: number): void {
-        super.setLeft(value);
-        this.update();
-    }
-
-    protected setTop(value: number): void {
-        super.setTop(value);
-        this.update();
-    }
-
+
     public get radius(): number {
-        return this.circleRadius;
+        return this._radius;
     }
 
     public set radius(value: number) {
-        this.circleRadius = value;
+        this._radius = value;
         this.update();
     }
 

src/@classes/public/IsometricCircle/types.ts

@@ -2,4 +2,11 @@ import { IsometricShapeProps } from '@classes/abstract/IsometricShape';
 
 export interface IsometricCircleProps extends IsometricShapeProps {
     radius: number;
+}
+
+export interface GetCirclePathArguments {
+    right: number;
+    left: number;
+    top: number;
+    radius: number;
 }