Skip to content

Commit

Permalink
added mask element and style property
Browse files Browse the repository at this point in the history
  • Loading branch information
daign committed Dec 2, 2023
1 parent 75af7e4 commit 9d8f474
Show file tree
Hide file tree
Showing 7 changed files with 127 additions and 15 deletions.
1 change: 1 addition & 0 deletions lib/basic-elements/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export { FixedRadiusCircle } from './fixedRadiusCircle';
export { Group } from './group';
export { Line } from './line';
export { Mask } from './mask';
export { Polygon } from './polygon';
export { Polyline } from './polyline';
export { QuadraticCurve } from './quadraticCurve';
Expand Down
35 changes: 35 additions & 0 deletions lib/basic-elements/mask.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Box2 } from '@daign/math';
import { GraphicNode } from '@daign/2d-pipeline';

import { StyledGraphicNode } from '../styledGraphicNode';

/**
* Class for a mask element.
*/
export class Mask extends StyledGraphicNode {
// The id of the mask.
public id: string = '';

/**
* Constructor.
*/
public constructor() {
super();

this.baseClass = 'mask';
}

/**
* Get the bounding box of all child elements of the mask.
* @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;
}
}
15 changes: 15 additions & 0 deletions lib/graphicStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export class GraphicStyle implements IStyleDeclaration {
public visibility: string | null = null;
public opacity: number | null = null;
public paintOrder: string | null = null;
public mask: string | null = null;

// Text.
public fontFamily: string | null = null;
Expand Down Expand Up @@ -62,6 +63,7 @@ export class GraphicStyle implements IStyleDeclaration {
this.visibility === null &&
this.opacity === null &&
this.paintOrder === null &&
this.mask === null &&
this.fontFamily === null &&
this.fontSize === null &&
this.fontStyle === null &&
Expand Down Expand Up @@ -94,6 +96,7 @@ export class GraphicStyle implements IStyleDeclaration {
* @param visibility - Optional.
* @param opacity - Optional.
* @param paintOrder - Optional.
* @param mask - Optional.
* @param fontFamily - Optional.
* @param fontSize - Optional.
* @param fontStyle - Optional.
Expand Down Expand Up @@ -123,6 +126,7 @@ export class GraphicStyle implements IStyleDeclaration {
visibility?: string,
opacity?: number,
paintOrder?: string,
mask?: string,
fontFamily?: string,
fontSize?: string,
fontStyle?: string,
Expand Down Expand Up @@ -183,6 +187,9 @@ export class GraphicStyle implements IStyleDeclaration {
if ( paintOrder ) {
this.paintOrder = paintOrder;
}
if ( mask ) {
this.mask = mask;
}
if ( fontFamily ) {
this.fontFamily = fontFamily;
}
Expand Down Expand Up @@ -256,6 +263,8 @@ export class GraphicStyle implements IStyleDeclaration {
this.opacity = parseFloat( value );
} else if ( name === 'paint-order' ) {
this.paintOrder = value;
} else if ( name === 'mask' ) {
this.mask = value;
} else if ( name === 'font-family' ) {
this.fontFamily = value;
} else if ( name === 'font-size' ) {
Expand Down Expand Up @@ -334,6 +343,9 @@ export class GraphicStyle implements IStyleDeclaration {
if ( this.paintOrder === null ) {
this.paintOrder = declaration.paintOrder;
}
if ( this.mask === null ) {
this.mask = declaration.mask;
}
if ( this.fontFamily === null ) {
this.fontFamily = declaration.fontFamily;
}
Expand Down Expand Up @@ -424,6 +436,9 @@ export class GraphicStyle implements IStyleDeclaration {
if ( this.paintOrder ) {
attributes.push( `paint-order: ${this.paintOrder}` );
}
if ( this.mask ) {
attributes.push( `mask: ${this.mask}` );
}
if ( this.fontFamily ) {
attributes.push( `font-family: ${this.fontFamily}` );
}
Expand Down
1 change: 1 addition & 0 deletions lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export { Viewport } from './application/viewport';
export { FixedRadiusCircle } from './basic-elements/fixedRadiusCircle';
export { Group } from './basic-elements/group';
export { Line } from './basic-elements/line';
export { Mask } from './basic-elements/mask';
export { Polygon } from './basic-elements/polygon';
export { Polyline } from './basic-elements/polyline';
export { QuadraticCurve } from './basic-elements/quadraticCurve';
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@daign/2d-graphics",
"version": "1.1.8",
"version": "1.1.9",
"description": "Two dimensional graphics library that implements the daign-2d-pipeline.",
"keywords": [
"graphics",
Expand Down Expand Up @@ -44,7 +44,7 @@
},
"dependencies": {
"@daign/handle": "^1.1.0",
"@daign/math": "^1.1.1",
"@daign/math": "^1.1.2",
"@daign/observable": "^1.1.3",
"@daign/2d-pipeline": "^1.1.1",
"@daign/style-sheets": "^1.1.1"
Expand Down
56 changes: 56 additions & 0 deletions test/basic-elements/mask.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { expect } from 'chai';

import { Vector2 } from '@daign/math';
import { GraphicNode } from '@daign/2d-pipeline';

import { Mask, Line } from '../../lib';

describe( 'Mask', (): void => {
describe( 'constructor', (): void => {
it( 'should set the base class mask', (): void => {
// Act
const mask = new Mask();

// Assert
expect( ( mask as any ).classNames.getByName( 'baseClass' ).value ).to.equal( 'mask' );
} );
} );

describe( 'getBox', (): void => {
it( 'should get the bounding box of the mask', (): void => {
// Arrange
const mask = new Mask();

const line1 = new Line();
line1.start = new Vector2( 7, 2 );
line1.end = new Vector2( 3, 8 );
mask.appendChild( line1 );

const line2 = new Line();
line2.start = new Vector2( 5, 6 );
line2.end = new Vector2( 1, 0 );
mask.appendChild( line2 );

// Act
const box = mask.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 mask = new Mask();

const graphicNode = new GraphicNode();
mask.appendChild( graphicNode );

// Act
const box = mask.getBox();

// Assert
expect( box.isEmpty ).to.be.true;
} );
} );
} );
30 changes: 17 additions & 13 deletions test/graphicStyle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ describe( 'GraphicStyle', (): void => {
it( 'should set the properties', (): void => {
// Act
const style = new GraphicStyle( 'black', 0.9, 'evenodd', 'blue', 2, 0.8, 'square', 'bevel', 4,
'1,2,3', 10, 'non-scaling-stroke', 'block', 'hidden', 0.7, 'normal', 'sans-serif', '12px',
'italic', 'small-caps', 'bold', 'ultra-condensed', '2px', '3px', 'line-through', 'fill',
'pointer' );
'1,2,3', 10, 'non-scaling-stroke', 'block', 'hidden', 0.7, 'normal', 'url(#mask)',
'sans-serif', '12px', 'italic', 'small-caps', 'bold', 'ultra-condensed', '2px', '3px',
'line-through', 'fill', 'pointer' );

// Assert
expect( style.fill ).to.equal( 'black' );
Expand All @@ -52,6 +52,7 @@ describe( 'GraphicStyle', (): void => {
expect( style.visibility ).to.equal( 'hidden' );
expect( style.opacity ).to.equal( 0.7 );
expect( style.paintOrder ).to.equal( 'normal' );
expect( style.mask ).to.equal( 'url(#mask)' );
expect( style.fontFamily ).to.equal( 'sans-serif' );
expect( style.fontSize ).to.equal( '12px' );
expect( style.fontStyle ).to.equal( 'italic' );
Expand Down Expand Up @@ -90,6 +91,7 @@ describe( 'GraphicStyle', (): void => {
style.parseAttribute( 'display', 'block' );
style.parseAttribute( 'visibility', 'hidden' );
style.parseAttribute( 'paint-order', 'normal' );
style.parseAttribute( 'mask', 'url(#mask)' );
style.parseAttribute( 'font-family', 'sans-serif' );
style.parseAttribute( 'font-size', '12px' );
style.parseAttribute( 'font-style', 'italic' );
Expand All @@ -114,6 +116,7 @@ describe( 'GraphicStyle', (): void => {
expect( style.display ).to.equal( 'block' );
expect( style.visibility ).to.equal( 'hidden' );
expect( style.paintOrder ).to.equal( 'normal' );
expect( style.mask ).to.equal( 'url(#mask)' );
expect( style.fontFamily ).to.equal( 'sans-serif' );
expect( style.fontSize ).to.equal( '12px' );
expect( style.fontStyle ).to.equal( 'italic' );
Expand Down Expand Up @@ -155,8 +158,8 @@ describe( 'GraphicStyle', (): void => {
const style = new GraphicStyle();
const sourceStyle = new GraphicStyle( 'black', 0.9, 'evenodd', 'blue', 2, 0.8, 'square',
'bevel', 4, '1,2,3', 10, 'non-scaling-stroke', 'block', 'hidden', 0.7, 'normal',
'sans-serif', '12px', 'italic', 'small-caps', 'bold', 'ultra-condensed', '2px', '3px',
'line-through', 'fill', 'pointer' );
'url(#mask)', 'sans-serif', '12px', 'italic', 'small-caps', 'bold', 'ultra-condensed',
'2px', '3px', 'line-through', 'fill', 'pointer' );

// Act
style.complementWith( sourceStyle );
Expand All @@ -178,6 +181,7 @@ describe( 'GraphicStyle', (): void => {
expect( style.visibility ).to.equal( 'hidden' );
expect( style.opacity ).to.equal( 0.7 );
expect( style.paintOrder ).to.equal( 'normal' );
expect( style.mask ).to.equal( 'url(#mask)' );
expect( style.fontFamily ).to.equal( 'sans-serif' );
expect( style.fontSize ).to.equal( '12px' );
expect( style.fontStyle ).to.equal( 'italic' );
Expand All @@ -195,8 +199,8 @@ describe( 'GraphicStyle', (): void => {
// Arrange
const targetStyle = new GraphicStyle( 'red', 0.9, 'evenodd', 'yellow', 6, 0.8, 'square',
'bevel', 4, '1,2,3', 10, 'non-scaling-stroke', 'block', 'hidden', 0.7, 'normal',
'sans-serif', '12px', 'italic', 'small-caps', 'bold', 'ultra-condensed', '2px', '3px',
'line-through', 'fill', 'pointer' );
'url(#mask)', 'sans-serif', '12px', 'italic', 'small-caps', 'bold', 'ultra-condensed',
'2px', '3px', 'line-through', 'fill', 'pointer' );
const sourceStyle = new GraphicStyle( 'black', undefined, undefined, 'blue', 2 );

// Act
Expand Down Expand Up @@ -229,8 +233,8 @@ describe( 'GraphicStyle', (): void => {
// Arrange
const style = new GraphicStyle( 'black', 0.9, 'evenodd', 'blue', 2, 0.8, 'square',
'bevel', 4, '1,2,3', 10, 'non-scaling-stroke', 'block', 'hidden', 0.7, 'normal',
'sans-serif', '12px', 'italic', 'small-caps', 'bold', 'ultra-condensed', '2px', '3px',
'line-through', 'fill', 'pointer' );
'url(#mask)', 'sans-serif', '12px', 'italic', 'small-caps', 'bold', 'ultra-condensed',
'2px', '3px', 'line-through', 'fill', 'pointer' );

// Act
const text = style.printStyle();
Expand All @@ -240,10 +244,10 @@ describe( 'GraphicStyle', (): void => {
`fill: black; fill-opacity: 0.9; fill-rule: evenodd; stroke: blue; stroke-width: 2; \
stroke-opacity: 0.8; stroke-linecap: square; stroke-linejoin: bevel; stroke-miterlimit: 4; \
stroke-dasharray: 1,2,3; stroke-dashoffset: 10; vector-effect: non-scaling-stroke; display: block; \
visibility: hidden; opacity: 0.7; paint-order: normal; font-family: sans-serif; font-size: 12px; \
font-style: italic; font-variant: small-caps; font-weight: bold; font-stretch: ultra-condensed; \
letter-spacing: 2px; word-spacing: 3px; text-decoration: line-through; pointer-events: fill; \
cursor: pointer`
visibility: hidden; opacity: 0.7; paint-order: normal; mask: url(#mask); font-family: sans-serif; \
font-size: 12px; font-style: italic; font-variant: small-caps; font-weight: bold; \
font-stretch: ultra-condensed; letter-spacing: 2px; word-spacing: 3px; \
text-decoration: line-through; pointer-events: fill; cursor: pointer`
);
} );

Expand Down

0 comments on commit 9d8f474

Please sign in to comment.