added ClipPath, SymbolElement and TwoPointPattern

lib/basic-elements/clipPath.ts

@@ -0,0 +1,32 @@
+import { Box2 } from '@daign/math';
+import { GraphicNode } from '@daign/2d-pipeline';
+
+import { StyledGraphicNode } from '../styledGraphicNode';
+
+/**
+ * Class for a clip path element.
+ */
+export class ClipPath extends StyledGraphicNode {
+  /**
+   * Constructor.
+   */
+  public constructor() {
+    super();
+
+    this.baseClass = 'clip-path';
+  }
+
+  /**
+   * Get the bounding box of all child elements of the clip path.
+   * @returns The bounding box.
+   */
+  public getBox(): Box2 {
+    const box = new Box2();
+    this.children.forEach( ( child: GraphicNode ): void => {
+      if ( child instanceof StyledGraphicNode ) {
+        box.expandByBox( child.getBoxTransformed() );
+      }
+    } );
+    return box;
+  }
+}

lib/basic-elements/index.ts

@@ -1,3 +1,4 @@
+export { ClipPath } from './clipPath';
 export { FixedRadiusCircle } from './fixedRadiusCircle';
 export { Group } from './group';
 export { Line } from './line';
@@ -7,8 +8,10 @@ export { Polyline } from './polyline';
 export { QuadraticCurve } from './quadraticCurve';
 export { ScalableText } from './scalableText';
 export { SinglePointElement } from './singlePointElement';
+export { SymbolElement } from './symbolElement';
 export { Text } from './text';
 export { TwoPointCircle } from './twoPointCircle';
 export { TwoPointImage } from './twoPointImage';
+export { TwoPointPattern } from './twoPointPattern';
 export { TwoPointRectangle } from './twoPointRectangle';
 export { UseElement } from './useElement';

lib/basic-elements/mask.ts

@@ -7,9 +7,6 @@ import { StyledGraphicNode } from '../styledGraphicNode';
  * Class for a mask element.
  */
 export class Mask extends StyledGraphicNode {
-  // The id of the mask.
-  public id: string = '';
-
   /**
    * Constructor.
    */

lib/basic-elements/symbolElement.ts

@@ -0,0 +1,32 @@
+import { Box2 } from '@daign/math';
+import { GraphicNode } from '@daign/2d-pipeline';
+
+import { StyledGraphicNode } from '../styledGraphicNode';
+
+/**
+ * Class for a symbol element.
+ */
+export class SymbolElement extends StyledGraphicNode {
+  /**
+   * Constructor.
+   */
+  public constructor() {
+    super();
+
+    this.baseClass = 'symbol';
+  }
+
+  /**
+   * Get the bounding box of all child elements of the symbol.
+   * @returns The bounding box.
+   */
+  public getBox(): Box2 {
+    const box = new Box2();
+    this.children.forEach( ( child: GraphicNode ): void => {
+      if ( child instanceof StyledGraphicNode ) {
+        box.expandByBox( child.getBoxTransformed() );
+      }
+    } );
+    return box;
+  }
+}

lib/basic-elements/twoPointPattern.ts

@@ -0,0 +1,78 @@
+import { Box2, Matrix3, Vector2 } from '@daign/math';
+
+import { StyledGraphicNode } from '../styledGraphicNode';
+
+/**
+ * Class for a pattern element, whose size is defined by two points.
+ */
+export class TwoPointPattern extends StyledGraphicNode {
+  public get start(): Vector2 {
+    return this.points.getByName( 'start' );
+  }
+
+  public set start( position: Vector2 ) {
+    this.points.getByName( 'start' ).copy( position );
+  }
+
+  public get end(): Vector2 {
+    return this.points.getByName( 'end' );
+  }
+
+  public set end( position: Vector2 ) {
+    this.points.getByName( 'end' ).copy( position );
+  }
+
+  /**
+   * Constructor.
+   */
+  public constructor() {
+    super();
+
+    this.baseClass = 'pattern';
+    this.points.initializeElements( 2 );
+    this.points.assignName( 'start', 0 );
+    this.points.assignName( 'end', 1 );
+  }
+
+  /**
+   * Calculate the start after a given transformation.
+   * @param transformation - The transformation to apply.
+   * @returns The transformed start position.
+   */
+  public getStartTransformed( transformation: Matrix3 ): Vector2 {
+    const area = new Box2();
+    const startPoint = this.start.clone().transform( transformation );
+    area.expandByPoint( startPoint );
+    const endPoint = this.end.clone().transform( transformation );
+    area.expandByPoint( endPoint );
+    return area.min;
+  }
+
+  /**
+   * Calculate the end after a given transformation.
+   * @param transformation - The transformation to apply.
+   * @returns The transformed end position.
+   */
+  public getEndTransformed( transformation: Matrix3 ): Vector2 {
+    const area = new Box2();
+    const startPoint = this.start.clone().transform( transformation );
+    area.expandByPoint( startPoint );
+    const endPoint = this.end.clone().transform( transformation );
+    area.expandByPoint( endPoint );
+    return area.max;
+  }
+
+  /**
+   * Calculate the size after a given transformation.
+   * @param transformation - The transformation to apply.
+   * @returns The transformed size.
+   */
+  public getSizeTransformed( transformation: Matrix3 ): Vector2 {
+    const area = new Box2();
+    const startPoint = this.start.clone().transform( transformation );
+    area.expandByPoint( startPoint );
+    const endPoint = this.end.clone().transform( transformation );
+    area.expandByPoint( endPoint );
+    return area.size;
+  }
+}

lib/index.ts

@@ -10,6 +10,7 @@ export { SelectionManager } from './application/selectionManager';
 export { UpdateManager } from './application/updateManager';
 export { Viewport } from './application/viewport';
 
+export { ClipPath } from './basic-elements/clipPath';
 export { FixedRadiusCircle } from './basic-elements/fixedRadiusCircle';
 export { Group } from './basic-elements/group';
 export { Line } from './basic-elements/line';
@@ -19,9 +20,11 @@ export { Polyline } from './basic-elements/polyline';
 export { QuadraticCurve } from './basic-elements/quadraticCurve';
 export { ScalableText } from './basic-elements/scalableText';
 export { SinglePointElement } from './basic-elements/singlePointElement';
+export { SymbolElement } from './basic-elements/symbolElement';
 export { Text } from './basic-elements/text';
 export { TwoPointCircle } from './basic-elements/twoPointCircle';
 export { TwoPointImage } from './basic-elements/twoPointImage';
+export { TwoPointPattern } from './basic-elements/twoPointPattern';
 export { TwoPointRectangle } from './basic-elements/twoPointRectangle';
 export { UseElement } from './basic-elements/useElement';
 

lib/styledGraphicNode.ts

@@ -20,6 +20,18 @@ export abstract class StyledGraphicNode extends GraphicNode {
   // Style applied directly to the element.
   public elementStyle: GraphicStyle | null = null;
 
+  // Callback to execute when node is clicked.
+  public onclick: ( () => void ) | null = null;
+
+  // ID property.
+  public id: string | null = null;
+
+  // Reference for a mask element to apply to the node.
+  public mask: string | null = null;
+
+  // Reference for a clip path element to apply to the node.
+  public clipPath: string | null = null;
+
   /**
    * Setter for the base class.
    * @param baseClass - The name of the base class.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daign/2d-graphics",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "Two dimensional graphics library that implements the daign-2d-pipeline.",
   "keywords": [
     "graphics",

test/basic-elements/clipPath.spec.ts

@@ -0,0 +1,57 @@
+import { expect } from 'chai';
+
+import { Vector2 } from '@daign/math';
+import { GraphicNode } from '@daign/2d-pipeline';
+
+import { ClipPath, Line } from '../../lib';
+
+describe( 'ClipPath', (): void => {
+  describe( 'constructor', (): void => {
+    it( 'should set the base class clip-path', (): void => {
+      // Act
+      const clipPath = new ClipPath();
+
+      // Assert
+      expect( ( clipPath as any ).classNames.getByName( 'baseClass' ).value )
+        .to.equal( 'clip-path' );
+    } );
+  } );
+
+  describe( 'getBox', (): void => {
+    it( 'should get the bounding box of the clip path', (): void => {
+      // Arrange
+      const clipPath = new ClipPath();
+
+      const line1 = new Line();
+      line1.start = new Vector2( 7, 2 );
+      line1.end = new Vector2( 3, 8 );
+      clipPath.appendChild( line1 );
+
+      const line2 = new Line();
+      line2.start = new Vector2( 5, 6 );
+      line2.end = new Vector2( 1, 0 );
+      clipPath.appendChild( line2 );
+
+      // Act
+      const box = clipPath.getBox();
+
+      // Assert
+      expect( box.min.equals( new Vector2( 1, 0 ) ) ).to.be.true;
+      expect( box.max.equals( new Vector2( 7, 8 ) ) ).to.be.true;
+    } );
+
+    it( 'should ignore children that are not StyledGraphicNodes', (): void => {
+      // Arrange
+      const clipPath = new ClipPath();
+
+      const graphicNode = new GraphicNode();
+      clipPath.appendChild( graphicNode );
+
+      // Act
+      const box = clipPath.getBox();
+
+      // Assert
+      expect( box.isEmpty ).to.be.true;
+    } );
+  } );
+} );

test/basic-elements/symbolElement.spec.ts

@@ -0,0 +1,57 @@
+import { expect } from 'chai';
+
+import { Vector2 } from '@daign/math';
+import { GraphicNode } from '@daign/2d-pipeline';
+
+import { SymbolElement, Line } from '../../lib';
+
+describe( 'SymbolElement', (): void => {
+  describe( 'constructor', (): void => {
+    it( 'should set the base class symbol', (): void => {
+      // Act
+      const symbolElement = new SymbolElement();
+
+      // Assert
+      expect( ( symbolElement as any ).classNames.getByName( 'baseClass' ).value )
+        .to.equal( 'symbol' );
+    } );
+  } );
+
+  describe( 'getBox', (): void => {
+    it( 'should get the bounding box of the symbol element', (): void => {
+      // Arrange
+      const symbolElement = new SymbolElement();
+
+      const line1 = new Line();
+      line1.start = new Vector2( 7, 2 );
+      line1.end = new Vector2( 3, 8 );
+      symbolElement.appendChild( line1 );
+
+      const line2 = new Line();
+      line2.start = new Vector2( 5, 6 );
+      line2.end = new Vector2( 1, 0 );
+      symbolElement.appendChild( line2 );
+
+      // Act
+      const box = symbolElement.getBox();
+
+      // Assert
+      expect( box.min.equals( new Vector2( 1, 0 ) ) ).to.be.true;
+      expect( box.max.equals( new Vector2( 7, 8 ) ) ).to.be.true;
+    } );
+
+    it( 'should ignore children that are not StyledGraphicNodes', (): void => {
+      // Arrange
+      const symbolElement = new SymbolElement();
+
+      const graphicNode = new GraphicNode();
+      symbolElement.appendChild( graphicNode );
+
+      // Act
+      const box = symbolElement.getBox();
+
+      // Assert
+      expect( box.isEmpty ).to.be.true;
+    } );
+  } );
+} );