Add an id property to all the elements and implement new methods

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [3.10.0] - 2024-10-10
+
+- Add an optional `id` property to all the elements. If the `id` is not specified as a property of an instance, a random `id` is generated.
+- Implement new methods in container classes (as `IsometricCanvas` and `IsometricGroup`):
+    * `getChildByIndex` method to return a child taking into account its index
+    * `getChildById` method to return a child taking into account its id
+    * `removeChildById` method to remove a child taking into account its id
+
 ## [3.9.0] - 2024-10-06
 
 - Create a new class to create star polygons (`IsometricStarPolygon`)

demo/demo7/index.js

@@ -28,19 +28,21 @@ export default ( IsometricModule, container ) => {
     };
 
     planes.forEach((planeView) => {
-        const props = { ...commonProps, fillColor: '#EEE', planeView };
+        const props = { ...commonProps, planeView };
         const coord = planePropsHash[planeView];
-        const starPolygonBack = new IsometricStarPolygon(props);
+        const starPolygonBack = new IsometricStarPolygon({...props, id: `${coord}-back`, fillColor: '#EEE'});
+        const starPolygonFront = new IsometricStarPolygon({...props, id: `${coord}-front`});
         starPolygonBack[coord] = 0;
-        cube.addChild(starPolygonBack);
+        starPolygonFront[coord] = 1;
+        cube.addChildren(starPolygonBack, starPolygonFront);
     });
 
     planes.forEach((planeView) => {
-        const props = { ...commonProps, planeView };
         const coord = planePropsHash[planeView];
-        const starPolygonFront = new IsometricStarPolygon(props);
-        starPolygonFront[coord] = 1;
-        cube.addChild(starPolygonFront);
+        const starPolygonBack = cube.getChildById(`${coord}-back`);
+        const starPolygonFront = cube.getChildById(`${coord}-front`);
+        cube.sendChildToBack(starPolygonBack);
+        cube.bringChildToFront(starPolygonFront);
     });
 
 };

src/@classes/abstract/IsometricContainerAbstract/IsometricContainerAbstract.ts

@@ -8,8 +8,11 @@ export abstract class IsometricContainerAbstract extends IsometricElementAbstrac
     // Exclude the next constructor from the coverage reports
     // Check https://github.com/microsoft/TypeScript/issues/13029
     /* istanbul ignore next */
-    public constructor(svgElement: SVG_ELEMENTS) {
-        super(svgElement);
+    public constructor(id: string, svgElement: SVG_ELEMENTS) {
+        super(
+            id,
+            svgElement
+        );
         this._children = [];
     }
 
@@ -42,6 +45,14 @@ export abstract class IsometricContainerAbstract extends IsometricElementAbstrac
         }
     }
 
+    public get id(): string {
+        return this._id;
+    }
+
+    public set id(value: string) {
+        this.setId(value);
+    }
+
     public get children(): IsometricElementAbstract[] {
         return this._children;
     }
@@ -80,6 +91,15 @@ export abstract class IsometricContainerAbstract extends IsometricElementAbstrac
         return this;
     }
 
+    public getChildByIndex<T extends IsometricElementAbstract = IsometricElementAbstract>(index: number): T | null {
+        return this._children[index] as T || null;
+    }
+
+    public getChildById<T extends IsometricElementAbstract = IsometricElementAbstract>(id: string): T | null {
+        const child = this._children.find<T>((child: IsometricElementAbstract): child is T => child.id === id);
+        return child || null;
+    }
+
     public removeChild(child: IsometricElementAbstract): this {
         const childIndex = this.getChildIndex(child);
         if (childIndex > -1) {
@@ -109,6 +129,13 @@ export abstract class IsometricContainerAbstract extends IsometricElementAbstrac
         return this;
     }
 
+    public removeChildById(id: string): this {
+        const child = this.getChildById(id);
+        if (child) {
+            return this.removeChild(child);
+        }
+    }
+
     public setChildIndex(child: IsometricElementAbstract, index: number): this {
         const childIndex = this.getChildIndex(child);
         if (childIndex > -1) {

src/@classes/abstract/IsometricElementAbstract/IsometricElementAbstract.ts

@@ -8,24 +8,41 @@ import {
 } from '@constants';
 import { IsometricStore } from '@classes/abstract/IsometricStore';
 import {
+    addSVGProperties,
     addEventListenerToElement,
     removeEventListenerFromElement
 } from '@utils/svg';
 
 export abstract class IsometricElementAbstract extends IsometricStore {
 
-    public constructor(svgElement: SVG_ELEMENTS) {
+    public constructor(id: string, svgElement: SVG_ELEMENTS) {
 
         super();
 
+        this._id = id;
         this.listeners = [];
         this.element = document.createElementNS(SVG_NAMESPACE, svgElement);
+        addSVGProperties(this.element, {
+            'id': this._id
+        });
 
     }
 
+    protected _id: string;
     protected element: SVGElement;
     protected listeners: Listener[];
 
+    protected setId(value: string): void {
+        this._id = value;
+        addSVGProperties(this.element, {
+            'id': this._id
+        });
+    }
+
+    // id
+    public abstract get id(): string;
+    public abstract set id(value: string);
+
     public abstract update(): this;
     public abstract clear(): this;
 

src/@classes/abstract/IsometricGraphicAbstract/IsometricGraphicAbstract.ts

@@ -43,9 +43,15 @@ export abstract class IsometricGraphicAbstract extends IsometricElementAbstract
     /* istanbul ignore next */
     public constructor(props: IsometricGraphicProps, svgElement: SVG_ELEMENTS) {
 
-        super(svgElement);
-
-        this.props = {...defaultObjectProps, ...props};
+        super(
+            props.id || uuid(),
+            svgElement
+        );
+
+        this.props = {
+            ...defaultObjectProps,
+            ...props
+        };
         this.animations = [];
 
         if (this.props.texture) {
@@ -69,7 +75,7 @@ export abstract class IsometricGraphicAbstract extends IsometricElementAbstract
 
     private createTexture(texture: Texture) {
 
-        this.patternId = uuid();
+        this.patternId = `${this.id}__texture`;
 
         this.pattern = document.createElementNS(SVG_NAMESPACE, SVG_ELEMENTS.pattern);
 
@@ -224,6 +230,21 @@ export abstract class IsometricGraphicAbstract extends IsometricElementAbstract
         }
     }
 
+    // id
+    public get id(): string {
+        return this._id;
+    }
+
+    public set id(value: string) {
+        this.setId(value);
+        if (this.pattern) {
+            this.patternId = `${this.id}__texture`;
+            addSVGProperties(this.pattern, {
+                'id': this.patternId
+            });
+        }
+    }
+
     // fillColor
     public get fillColor(): string {
         return this.props.fillColor;

src/@classes/abstract/IsometricGraphicAbstract/types.ts

@@ -5,6 +5,7 @@ import {
 } from '@types';
 
 export interface IsometricGraphicProps {
+    id?: string;
     fillColor?: string;
     fillOpacity?: number;
     strokeColor?: string;

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

@@ -7,6 +7,7 @@ import {
     Colors
 } from '@constants';
 import { addSVGProperties } from '@utils/svg';
+import { uuid } from '@utils/math';
 import { Store } from '@store';
 import { IsometricContainerAbstract } from '@classes/abstract/IsometricContainerAbstract';
 import { IsometricCanvasProps } from './types';
@@ -25,7 +26,10 @@ export class IsometricCanvas extends IsometricContainerAbstract {
     // Check https://github.com/microsoft/TypeScript/issues/13029
     /* istanbul ignore next */
     public constructor(props: IsometricCanvasProps = {}) {
-        super(SVG_ELEMENTS.svg);
+        super(
+            props.id || uuid(),
+            SVG_ELEMENTS.svg
+        );
         this.props = { ...defaultProps, ...props };
         this.isAnimated = true;
 
@@ -65,10 +69,6 @@ export class IsometricCanvas extends IsometricContainerAbstract {
     private background: SVGRectElement;
     private isAnimated: boolean;
 
-    public getSVGCode(): string {
-        return this.element.outerHTML;
-    }
-
     public get backgroundColor(): string {
         return this.props.backgroundColor;
     }
@@ -123,6 +123,10 @@ export class IsometricCanvas extends IsometricContainerAbstract {
         return this.isAnimated;
     }
 
+    public getSVGCode(): string {
+        return this.element.outerHTML;
+    }
+
     public pauseAnimations(): IsometricCanvas {
         const svg = this.element as SVGSVGElement;
         /* istanbul ignore next */ /* jsdom doesn't have SVGSVGElement methods */

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

@@ -1,4 +1,5 @@
 export interface IsometricCanvasProps {
+    id?: string;
     container?: HTMLElement | string;
     backgroundColor?: string;
     scale?: number;

src/@classes/public/IsometricGroup/IsometricGroup.ts

@@ -1,5 +1,5 @@
 import { SVG_ELEMENTS } from '@constants';
-import { getPointFromIsometricPoint } from '@utils/math';
+import { uuid, getPointFromIsometricPoint } from '@utils/math';
 import {
     elementHasSVGParent,
     addSVGProperties
@@ -21,7 +21,10 @@ export class IsometricGroup extends IsometricContainerAbstract {
     // Check https://github.com/microsoft/TypeScript/issues/13029
     /* istanbul ignore next */
     constructor(props: IsometricGroupProps = {}) {
-        super(SVG_ELEMENTS.group);
+        super(
+            props.id || uuid(),
+            SVG_ELEMENTS.group
+        );
         this.props = { ...defaultProps, ...props };
     }
 

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

@@ -1,3 +1,5 @@
 import { IsometricDraggableProps } from '@classes/abstract/IsometricDraggableAbstract';
 
-export type IsometricGroupProps = IsometricDraggableProps;
+export interface IsometricGroupProps extends IsometricDraggableProps {
+    id?: string;
+}