Skip to content

Commit a3ece90

Browse files
lozjacksonlozjackson
committed
Merge branch '0.0.2'
2 parents e3d082c + 729b45a commit a3ece90

37 files changed

+788
-303
lines changed

‎CHANGELOG.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
### v0.0.2 2015-09-23
2+
3+
* [FEATURE] The `size` property of the `svg-rectangle` component can now be used to multiply the `height` and `width` values.
4+
5+
* [FEATURE] Add the `transform` attribute to `svg-circle`, `svg-square` and `svg-rectangle` components.
6+
7+
* [BUGFIX] Set css `overflow` property to `visible`. Fixes issue #1
8+
9+
* [FEATURE] Make the `stroke` property default to 'black'.
10+
11+
* [BUGFIX] Fix `svg-star` component's `points` computed property to bind to the `innerPoints` property.
12+
13+
* [BUGFIX] Update the min and max values of the `svg-star` component's `innerPoints` property.
14+
15+
* Add `rect` mixin.
16+
17+
### v0.0.1 2015-09-20
18+
19+
* initial release

‎README.md‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,59 @@ Ember-svg-shapes provides some basic shapes in the form of svg images, wrapped i
66

77
* svg-circle
88

9-
{{svg-circle size="30"}}
9+
{{svg-circle
10+
size="10"
11+
fill="red"
12+
stroke="black"
13+
strokeWidth="1"
14+
rotate="45" }}
1015

1116
* svg-square
1217

13-
{{svg-square size="30"}}
18+
{{svg-square
19+
size="10"
20+
fill="red"
21+
stroke="black"
22+
strokeWidth="1"
23+
rotate="45"
24+
radiusX="5"
25+
radiusY="10"}}
1426

1527
* svg-rectangle
1628

17-
{{svg-rectangle height="20" width="30"}}
29+
{{svg-rectangle
30+
size="1"
31+
fill="red"
32+
stroke="black"
33+
strokeWidth="2"
34+
rotate="45"
35+
height="20"
36+
width="30"
37+
radiusX="5"
38+
radiusY="10"}}
1839

1940
* svg-triangle
2041

21-
{{svg-triangle direction="right" size="15"}}
42+
{{svg-triangle
43+
size="10"
44+
fill="red"
45+
stroke="black"
46+
strokeWidth="1"
47+
rotate="180"
48+
direction="right"}}
2249

2350
* svg-star
2451

25-
{{svg-star rotate="45" size="50"}}
26-
52+
{{svg-star
53+
size="50"
54+
fill="red"
55+
stroke="black"
56+
strokeWidth="2"
57+
rotate="45"
58+
starPoints="5"
59+
innerPoints="1.4"}}
2760

61+
All the parameters are optional.
2862

2963
## Styling
3064

@@ -41,6 +75,12 @@ Add css class names to the component and style as you would normally do with an
4175
The class name `svg-triangle` is already added to the svg element of an svg-triangle
4276
component.
4377

78+
## Demo
79+
80+
For an interactive demo, clone this repository, `bower install`, `npm install`, then run `ember server` and visit `localhost:4200` in your browser. You will see the available shapes and you can play with the parameters.
81+
82+
Alternatively, visit `http://lozjackson.com/ember-svg-shapes/`.
83+
4484

4585

4686
## Installation

‎addon/components/svg-circle.js‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,51 +7,47 @@ import layout from '../templates/components/svg-circle';
77

88
/**
99
@class SvgCircleComponent
10-
@namespace SvgShapes
11-
@uses SvgShapes.SvgMixin
10+
@namespace SvgShapes.Components
11+
@uses SvgShapes.Mixins.SvgMixin
1212
*/
1313
export default Ember.Component.extend( SvgMixin, {
1414

1515
layout: layout,
1616

1717
/**
18+
This is an array of class names to be added to the svg element.
19+
1820
@property className
1921
@type {Array}
20-
@default ['svg-circle']
22+
@default ['ember-svg-shapes', 'svg-circle']
2123
@private
2224
*/
23-
classNames: ['svg-circle'],
25+
classNames: ['ember-svg-shapes', 'svg-circle'],
2426

2527
/**
26-
This value is used to set the height and width of the svg element. The
27-
value is pixels (`px`). The default is 10.
28+
This is a computed property that sets the radius of the circle.
2829
29-
@property size
30-
@type {Number}
31-
@default 10
32-
*/
33-
size: 10,
34-
35-
/**
36-
@property center
30+
@property radius
3731
@type {Number}
38-
@private
3932
@readonly
33+
@private
4034
*/
41-
center: Ember.computed('size', function() {
42-
var size = this.get('size');
43-
return size / 2;
35+
radius: Ember.computed('size', function() {
36+
var size = this.get('size'),
37+
radius = size / 2;
38+
39+
Ember.assert('`radius` must be a number greater than zero', !isNaN(radius) && radius > 0);
40+
41+
return radius;
4442
}),
4543

4644
/**
47-
@property radius
45+
This is an alias of `radius` and is used to set the center of the svg element.
46+
47+
@property center
4848
@type {Number}
49-
@readonly
5049
@private
50+
@readonly
5151
*/
52-
radius: Ember.computed('size', 'strokeWidth', function() {
53-
var size = this.get('size'),
54-
strokeWidth = this.get('strokeWidth');
55-
return size / 2 - (strokeWidth / 2);
56-
})
52+
center: Ember.computed.alias('radius')
5753
});

‎addon/components/svg-rectangle.js‎

Lines changed: 9 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -3,105 +3,26 @@
33
*/
44
import Ember from 'ember';
55
import SvgMixin from 'ember-svg-shapes/mixins/svg';
6+
import RectMixin from 'ember-svg-shapes/mixins/rect';
67
import layout from '../templates/components/svg-rectangle';
78

89
/**
910
@class SvgRectangleComponent
10-
@namespace SvgShapes
11-
@uses SvgShapes.SvgMixin
11+
@namespace SvgShapes.Components
12+
@uses SvgShapes.Mixins.SvgMixin
13+
@uses SvgShapes.Mixins.RectMixin
1214
*/
13-
export default Ember.Component.extend( SvgMixin, {
15+
export default Ember.Component.extend( SvgMixin, RectMixin, {
1416

1517
layout: layout,
1618

1719
/**
20+
This is an array of class names to be added to the svg element.
21+
1822
@property className
1923
@type {Array}
20-
@default ['svg-rectangle']
21-
@private
22-
*/
23-
classNames: ['svg-rectangle'],
24-
25-
/**
26-
@property radiusX
27-
@type {Number}
28-
@default 0
29-
*/
30-
radiusX: 0,
31-
32-
/**
33-
@property radiusX
34-
@type {Number}
35-
@default 0
36-
*/
37-
radiusY: 0,
38-
39-
/**
40-
@property height
41-
@type {Number}
42-
@default 10
43-
*/
44-
height: 10,
45-
46-
/**
47-
@property width
48-
@type {Number}
49-
@default 10
50-
*/
51-
width: 10,
52-
53-
/**
54-
@property _height
55-
@type {Number}
56-
@readonly
57-
@private
58-
*/
59-
_height: Ember.computed('height', 'strokeWidth', function() {
60-
var height = this.get('height'),
61-
strokeWidth = this.get('strokeWidth');
62-
return height - strokeWidth;
63-
}),
64-
65-
/**
66-
@property _width
67-
@type {Number}
68-
@readonly
69-
@private
70-
*/
71-
_width: Ember.computed('width', 'strokeWidth', function() {
72-
var width = this.get('width'),
73-
strokeWidth = this.get('strokeWidth');
74-
return width - strokeWidth;
75-
}),
76-
77-
/**
78-
@property left
79-
@type {Number}
80-
@readonly
81-
@private
82-
*/
83-
left: Ember.computed('strokeWidth', function() {
84-
var strokeWidth = this.get('strokeWidth');
85-
return strokeWidth / 2;
86-
}),
87-
88-
/**
89-
@property top
90-
@type {Number}
91-
@readonly
92-
@private
93-
*/
94-
top: Ember.computed.alias('left'),
95-
96-
/**
97-
This is a computed property. It sets the height and width of the svg element.
98-
@property style
99-
@type {String}
24+
@default ['ember-svg-shapes', 'svg-rectangle']
10025
@private
10126
*/
102-
style: Ember.computed('height', 'width', function() {
103-
var height = this.get('height'),
104-
width = this.get('width');
105-
return Ember.String.htmlSafe('height:' + height + 'px; width:' + width + 'px;');
106-
})
27+
classNames: ['ember-svg-shapes', 'svg-rectangle']
10728
});

‎addon/components/svg-square.js‎

Lines changed: 17 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,82 +3,51 @@
33
*/
44
import Ember from 'ember';
55
import SvgMixin from 'ember-svg-shapes/mixins/svg';
6+
import RectMixin from 'ember-svg-shapes/mixins/rect';
67
import layout from '../templates/components/svg-square';
78

89
/**
910
@class SvgSquareComponent
10-
@namespace SvgShapes
11-
@uses SvgShapes.SvgMixin
11+
@namespace SvgShapes.Components
12+
@uses SvgShapes.Mixins.SvgMixin
13+
@uses SvgShapes.Mixins.RectMixin
1214
*/
13-
export default Ember.Component.extend( SvgMixin, {
15+
export default Ember.Component.extend( SvgMixin, RectMixin, {
1416

1517
layout: layout,
1618

1719
/**
20+
This is an array of class names to be added to the svg element.
21+
1822
@property className
1923
@type {Array}
20-
@default ['svg-square']
24+
@default ['ember-svg-shapes', 'svg-square']
2125
@private
2226
*/
23-
classNames: ['svg-square'],
27+
classNames: ['ember-svg-shapes', 'svg-square'],
2428

2529
/**
26-
@property radiusX
27-
@type {Number}
28-
@default 0
29-
*/
30-
radiusX: 0,
31-
32-
/**
33-
@property radiusX
34-
@type {Number}
35-
@default 0
36-
*/
37-
radiusY: 0,
30+
This is a computed property. It sets the height of the square shape based
31+
on the size of the svg image element.
3832
39-
/**
40-
@property size
41-
@type {Number}
42-
@default 10
43-
*/
44-
size: 10,
45-
46-
/**
4733
@property _height
4834
@type {Number}
4935
@readonly
5036
@private
5137
*/
52-
_height: Ember.computed('size', 'strokeWidth', function() {
53-
var size= this.get('size'),
54-
strokeWidth = this.get('strokeWidth');
55-
return size - strokeWidth;
56-
}),
38+
_height: Ember.computed('size', function() {
39+
var size = this.get('size');
5740

58-
/**
59-
@property _width
60-
@type {Number}
61-
@readonly
62-
@private
63-
*/
64-
_width: Ember.computed.alias('_height'),
41+
Ember.assert('`size` must be a number greater than zero', !isNaN(size) && size > 0);
6542

66-
/**
67-
@property left
68-
@type {Number}
69-
@readonly
70-
@private
71-
*/
72-
left: Ember.computed('strokeWidth', function() {
73-
var strokeWidth = this.get('strokeWidth');
74-
return strokeWidth / 2;
43+
return size;
7544
}),
7645

7746
/**
78-
@property top
47+
@property _width
7948
@type {Number}
8049
@readonly
8150
@private
8251
*/
83-
top: Ember.computed.alias('left')
52+
_width: Ember.computed.alias('_height')
8453
});

0 commit comments

Comments
 (0)