Add support for classes to isometric objects.

README.md

@@ -645,6 +645,7 @@ const path = new IsometricRectangle(properties);
 | strokeLinejoin  | string               | "round"       | Sets the [SVG stroke linejoin][3] of the isometric rectangle         |
 | strokeWidth     | number               | 1             | Sets the stroke width of the isometric rectangle                     |
 | texture         | Texture (`object`)   | -             | Sets the texture of the isometric rectangle                          |
+| className       | string               | -             | Sets the CSS class of the isometric rectangle                                         |
 
 `planeView values`
 >"TOP" | "FRONT" | "SIDE"
@@ -833,7 +834,8 @@ removeEventListener(type, listener, [useCapture])
 | strokeWidth     | number             | Gets and sets the stroke width of the isometric rectangle                |
 | texture         | Texture (`object`) | Gets and sets the texture of the isometric rectangle                     |
 | drag \*         | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric rectangle     |
-| bounds          | object / false | Gets an sets the boundaries of the isometric rectangle position              |
+| bounds          | object / false | Gets and sets the boundaries of the isometric rectangle position              |
+| className       | string             | Gets and sets the CSS class of the isometric rectangle
 
 >\* When dragging an isometric rectangle, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric rectangle will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric rectangle will not change its position when it is dragged.
 
@@ -885,6 +887,7 @@ const path = new IsometricCircle(properties);
 | strokeLinejoin  | string               | "round"              | Sets the [SVG stroke linejoin][3] of the isometric circle         |
 | strokeWidth     | number               | 1                    | Sets the stroke width of the isometric circle                     |
 | texture         | Texture (`object`)   | -                    | Sets the texture of the isometric circle                          |
+| className       | string             | Sets the CSS class of the isometric circle
 
 `planeView values`
 >"TOP" | "FRONT" | "SIDE"
@@ -1072,6 +1075,7 @@ removeEventListener(type, listener, [useCapture])
 | texture         | Texture (`object`) | Gets and sets the texture of the isometric circle                     |
 | drag \*         | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric circle     |
 | bounds          | object / false | Gets an sets the boundaries of the isometric circle position              |
+| className       | string             | Gets and sets the CSS class of the isometric circle
 
 >\* When dragging an isometric circle, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric circle will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric circle will not change its position when it is dragged.
 
@@ -1126,6 +1130,7 @@ const path = new IsometricStarPolygon(properties);
 | strokeLinejoin  | string               | "round"              | Sets the [SVG stroke linejoin][3] of the isometric star polygon         |
 | strokeWidth     | number               | 1                    | Sets the stroke width of the isometric star polygon                     |
 | texture         | Texture (`object`)   | -                    | Sets the texture of the isometric star polygon                          |
+| className       | string             | Sets the CSS class of the isometric star polygon
 
 `planeView values`
 >"TOP" | "FRONT" | "SIDE"
@@ -1317,7 +1322,8 @@ removeEventListener(type, listener, [useCapture])
 | strokeWidth     | number             | Gets and sets the stroke width of the isometric star polygon                |
 | texture         | Texture (`object`) | Gets and sets the texture of the isometric star polygon                     |
 | drag \*          | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric star polygon    |
-| bounds          | object / false | Gets an sets the boundaries of the isometric star polygon position              |
+| bounds          | object / false | Gets and sets the boundaries of the isometric star polygon position              |
+| className       | string             | Gets and sets the CSS class of the isometric star polygon
 
 >\* When dragging an isometric star polygon, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric star polygon will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric star polygon will not change its position when it is dragged.
 
@@ -1370,6 +1376,7 @@ const path = new IsometricPentagram(properties);
 | strokeLinejoin  | string               | "round"              | Sets the [SVG stroke linejoin][3] of the isometric pentagram         |
 | strokeWidth     | number               | 1                    | Sets the stroke width of the isometric pentagram                     |
 | texture         | Texture (`object`)   | -                    | Sets the texture of the isometric pentagram                          |
+| className       | string             | Sets the CSS class of the isometric pentagram
 
 `planeView values`
 >"TOP" | "FRONT" | "SIDE"
@@ -1558,7 +1565,8 @@ removeEventListener(type, listener, [useCapture])
 | strokeWidth     | number             | Gets and sets the stroke width of the isometric pentagram                |
 | texture         | Texture (`object`) | Gets and sets the texture of the isometric pentagram                     |
 | drag \*          | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric pentagram     |
-| bounds          | object / false | Gets an sets the boundaries of the isometric pentagram position              |
+| bounds          | object / false | Gets and sets the boundaries of the isometric pentagram position              |
+| className       | string             | Gets and sets the CSS class of the isometric pentagram
 
 >\* When dragging an isometric pentagram, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric pentagram will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric pentagram will not change its position when it is dragged.
 
@@ -1606,6 +1614,7 @@ const path = new IsometricPath([properties]);
 | strokeWidth     | number             | 1              | Sets the stroke width of the isometric path              |
 | texture         | Texture (`object`) | -              | Sets the texture of the isometric path                   |
 | autoclose       | boolean            | true           | Sets if the path should close automatically or not       |
+| className       | string             | Sets the CSS class of the isometric path
 
 `texture properties`
 >Object to set the texture of the isometric path
@@ -1839,6 +1848,7 @@ removeEventListener(type, listener, [useCapture])
 | strokeWidth     | number             | Gets and sets the stroke width of the isometric path              |
 | texture         | Texture (`object`) | Gets and sets the texture of the isometric path                   |
 | autoclose       | boolean            | Gets and sets the autoclose property of the isometric path        |
+| className       | string             | Gets and sets the CSS class of the isometric path
 
 </p>
 </details>
@@ -1883,6 +1893,7 @@ const path = new IsometricText(properties);
 | strokeLinejoin  | string               | "round"              | Sets the [SVG stroke linejoin][3] of the isometric text           |
 | strokeWidth     | number               | 1                    | Sets the stroke width of the isometric text                       |
 | texture         | Texture (`object`)   | -                    | Sets the texture of the isometric text                            |
+| className       | string             | Sets the CSS class of the isometric text
 
 `planeView values`
 >"TOP" | "FRONT" | "SIDE"
@@ -2083,6 +2094,7 @@ removeEventListener(type, listener, [useCapture])
 | strokeLinejoin  | string             | Gets and sets the [SVG stroke linejoin][3] of the isometric text      |
 | strokeWidth     | number             | Gets and sets the stroke width of the isometric text                  |
 | texture         | Texture (`object`) | Gets and sets the texture of the isometric text                       |
+| className       | string             | Gets and sets the CSS class of the isometric text
 
 `planeView values`
 >"TOP" | "FRONT" | "SIDE"

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

@@ -13,7 +13,8 @@ import {
     StrokeLinejoin,
     SVGAnimation,
     SVGAnimationObject,
-    Texture
+    Texture,
+    SVGProps
 } from '@types';
 import {
     addSVGProperties,
@@ -58,7 +59,7 @@ export abstract class IsometricGraphicAbstract extends IsometricElementAbstract
             this.createTexture(this.props.texture);
         }
 
-        addSVGProperties(this.element, {
+        const propsToSet: SVGProps = {
             'fill': this.props.texture
                 ? `url(#${this.patternId}) ${this.fillColor}`
                 : this.fillColor,
@@ -68,8 +69,14 @@ export abstract class IsometricGraphicAbstract extends IsometricElementAbstract
             'stroke-linecap': this.strokeLinecap,
             'stroke-linejoin': this.strokeLinejoin,
             'stroke-opacity': `${this.strokeOpacity}`,
-            'stroke-width': `${this.strokeWidth}`
-        });
+            'stroke-width': `${this.strokeWidth}`,
+        };
+
+        if (this.props.className) {
+            propsToSet['class'] = this.props.className;
+        }
+
+        addSVGProperties(this.element, propsToSet);
 
     }
 
@@ -345,6 +352,18 @@ export abstract class IsometricGraphicAbstract extends IsometricElementAbstract
         addSVGProperties(this.element, { 'stroke-width': `${this.strokeWidth}` });
     }
 
+    // className
+    public get className(): string {
+        return this.props.className;
+    }
+
+    public set className(value: string) {
+        this.props.className = value;
+        addSVGProperties(this.element, {
+            'class': this.props.className
+        });
+    }
+
     public getPattern(): SVGPatternElement | undefined {
         return this.pattern;
     }

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

@@ -15,4 +15,5 @@ export interface IsometricGraphicProps {
     strokeOpacity?: number;
     strokeWidth?: number;
     texture?: Texture;
+    className?: string;
 }

tests/__snapshots__/snapshots.test.ts.snap

@@ -22,6 +22,90 @@ exports[`Snapshot tests Default options 1`] = `
 
 exports[`Snapshot tests Default options 2`] = `"<svg id="svg" viewBox="0 0 640 480" width="640px" height="480px"><rect fill="white" x="0" y="0" width="640px" height="480px"></rect></svg>"`;
 
+exports[`Snapshot tests Draw a rectangle with a class 1`] = `
+<div>
+  <svg
+    height="320px"
+    id="svg"
+    viewBox="0 0 500 320"
+    width="500px"
+  >
+    <rect
+      fill="#CCC"
+      height="320px"
+      width="500px"
+      x="0"
+      y="0"
+    />
+    <path
+      class="rect"
+      d="M250 160 L353.923 220 L250 280 L146.077 220z"
+      fill="white"
+      fill-opacity="1"
+      id="top"
+      stroke="black"
+      stroke-dasharray=""
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+      stroke-opacity="1"
+      stroke-width="1"
+    />
+    <path
+      class="circle"
+      d="M198.0385 190 A 73.484658 42.426407 0 0 0 301.9615 130 A 73.484658 42.426407 180 0 0 198.0385 190z"
+      fill="white"
+      fill-opacity="1"
+      id="circle"
+      stroke="black"
+      stroke-dasharray=""
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+      stroke-opacity="1"
+      stroke-width="1"
+    />
+    <path
+      class="polygon"
+      d="M301.9615 130 L254.390903 143.994071 L216.638663 122.197795 L224.990657 152.642882 L177.42006 166.636952 L230.152473 171.45898 L238.504467 201.904067 L262.742897 174.439158 L315.47531 179.261186 L277.72307 157.46491z"
+      fill="white"
+      fill-opacity="1"
+      id="star"
+      stroke="black"
+      stroke-dasharray=""
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+      stroke-opacity="1"
+      stroke-width="1"
+    />
+    <path
+      class="pentagram"
+      d="M275.98075 145 L252.195451 151.997035 L233.319332 141.098897 L237.495329 156.321441 L213.71003 163.318476 L240.076237 165.72949 L244.252233 180.952034 L256.371448 167.219579 L282.737655 169.630593 L263.861535 158.732455z"
+      fill="white"
+      fill-opacity="1"
+      id="star"
+      stroke="black"
+      stroke-dasharray=""
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+      stroke-opacity="1"
+      stroke-width="1"
+    />
+    <path
+      class="path"
+      d=""
+      fill="white"
+      fill-opacity="1"
+      id="path"
+      stroke="black"
+      stroke-dasharray=""
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+      stroke-opacity="1"
+      stroke-width="1"
+    />
+  </svg>
+</div>
+`;
+
 exports[`Snapshot tests Draw animations with a single value 1`] = `
 <div>
   <svg

tests/properties.test.ts

@@ -49,7 +49,8 @@ describe('Test properties', (): void => {
             strokeLinecap: 'round',
             strokeLinejoin: 'miter',
             strokeOpacity: 0.25,
-            strokeWidth: 2
+            strokeWidth: 2,
+            className: 'test-class'
         };
 
         cube = new IsometricCanvas({
@@ -376,6 +377,7 @@ describe('Test properties', (): void => {
         expect(path.strokeOpacity).toBe(0.25);
         expect(path.strokeWidth).toBe(2);
         expect(path.autoclose).toBeTruthy();
+        expect(path.className).toBe('test-class');
 
         expect(pathElement.getAttribute('id')).toBe(path.id);
         expect(pathElement.getAttribute('fill')).toBe('#FFF');
@@ -387,6 +389,7 @@ describe('Test properties', (): void => {
         expect(pathElement.getAttribute('stroke-opacity')).toBe('0.25');
         expect(pathElement.getAttribute('stroke-width')).toBe('2');
         expect(pathElement.getAttribute('d')?.endsWith('z')).toBeTruthy();
+        expect(pathElement.getAttribute('class')).toBe('test-class');
 
         path.id = 'path';
         path.fillColor = '#000';
@@ -398,6 +401,7 @@ describe('Test properties', (): void => {
         path.strokeOpacity = 0.75;
         path.strokeWidth = 1;
         path.autoclose = false;
+        path.className = 'new-class';
 
         expect(path.id).toBe('path');
         expect(path.fillColor).toBe('#000');
@@ -409,6 +413,7 @@ describe('Test properties', (): void => {
         expect(path.strokeOpacity).toBe(0.75);
         expect(path.strokeWidth).toBe(1);
         expect(path.autoclose).toBeFalsy();
+        expect(path.className).toBe('new-class');
 
         expect(pathElement.getAttribute('id')).toBe('path');
         expect(pathElement.getAttribute('fill')).toBe('#000');
@@ -420,6 +425,7 @@ describe('Test properties', (): void => {
         expect(pathElement.getAttribute('stroke-opacity')).toBe('0.75');
         expect(pathElement.getAttribute('stroke-width')).toBe('1');
         expect(pathElement.getAttribute('d')?.endsWith('z')).toBeFalsy();
+        expect(pathElement.getAttribute('class')).toBe('new-class');
 
     });
 
@@ -434,6 +440,7 @@ describe('Test properties', (): void => {
         expect(rectangle.strokeLinejoin).toBe('miter');
         expect(rectangle.strokeOpacity).toBe(0.25);
         expect(rectangle.strokeWidth).toBe(2);
+        expect(rectangle.className).toBe('test-class');
 
         expect(rectangleElement.getAttribute('id')).toBe(rectangle.id);
         expect(rectangleElement.getAttribute('fill')).toBe('#FFF');
@@ -444,6 +451,7 @@ describe('Test properties', (): void => {
         expect(rectangleElement.getAttribute('stroke-linejoin')).toBe('miter');
         expect(rectangleElement.getAttribute('stroke-opacity')).toBe('0.25');
         expect(rectangleElement.getAttribute('stroke-width')).toBe('2');
+        expect(rectangleElement.getAttribute('class')).toBe('test-class');
 
         rectangle.id = 'rectangle';
         rectangle.fillColor = '#000';
@@ -454,6 +462,7 @@ describe('Test properties', (): void => {
         rectangle.strokeLinejoin = 'bevel';
         rectangle.strokeOpacity = 0.75;
         rectangle.strokeWidth = 1;
+        rectangle.className = 'new-class';
 
         expect(rectangle.id).toBe('rectangle');
         expect(rectangle.fillColor).toBe('#000');
@@ -464,6 +473,7 @@ describe('Test properties', (): void => {
         expect(rectangle.strokeLinejoin).toBe('bevel');
         expect(rectangle.strokeOpacity).toBe(0.75);
         expect(rectangle.strokeWidth).toBe(1);
+        expect(rectangle.className).toBe('new-class');
 
         expect(rectangleElement.getAttribute('id')).toBe('rectangle');
         expect(rectangleElement.getAttribute('fill')).toBe('#000');
@@ -474,6 +484,7 @@ describe('Test properties', (): void => {
         expect(rectangleElement.getAttribute('stroke-linejoin')).toBe('bevel');
         expect(rectangleElement.getAttribute('stroke-opacity')).toBe('0.75');
         expect(rectangleElement.getAttribute('stroke-width')).toBe('1');
+        expect(rectangleElement.getAttribute('class')).toBe('new-class');
 
     });
 
@@ -500,6 +511,7 @@ describe('Test properties', (): void => {
         expect(text.rotation).toBe(45);
         expect(text.origin).toStrictEqual(['left', 'bottom']);
         expect(text.selectable).toBe(false);
+        expect(text.className).toBe('test-class');
 
         expect(textGroupElement.getAttribute('id')).toBe(text.id);
         expect(textGroupElement.getAttribute('fill')).toBe('#FFF');
@@ -510,6 +522,7 @@ describe('Test properties', (): void => {
         expect(textGroupElement.getAttribute('stroke-linejoin')).toBe('miter');
         expect(textGroupElement.getAttribute('stroke-opacity')).toBe('0.25');
         expect(textGroupElement.getAttribute('stroke-width')).toBe('2');
+        expect(textGroupElement.getAttribute('class')).toBe('test-class');
 
         expect(textElement.style.userSelect).toBe('none');
         expect(textElement.style.pointerEvents).toBe('none');
@@ -543,6 +556,7 @@ describe('Test properties', (): void => {
         text.rotation = 90;
         text.origin = ['right', 'top'];
         text.selectable = true;
+        text.className = 'new-class';
 
         expect(text.id).toBe('text');
         expect(text.fillColor).toBe('#000');
@@ -565,6 +579,7 @@ describe('Test properties', (): void => {
         expect(text.rotation).toBe(90);
         expect(text.origin).toStrictEqual(['right', 'top']);
         expect(text.selectable).toBe(true);
+        expect(text.className).toBe('new-class');
 
         expect(textGroupElement.getAttribute('id')).toBe('text');
         expect(textGroupElement.getAttribute('fill')).toBe('#000');
@@ -575,6 +590,7 @@ describe('Test properties', (): void => {
         expect(textGroupElement.getAttribute('stroke-linejoin')).toBe('bevel');
         expect(textGroupElement.getAttribute('stroke-opacity')).toBe('0.75');
         expect(textGroupElement.getAttribute('stroke-width')).toBe('1');
+        expect(textGroupElement.getAttribute('class')).toBe('new-class');
 
         expect(textElement.style.userSelect).toBe('');
         expect(textElement.style.pointerEvents).toBe('');