Skip to content

Commit

Permalink
fix(gmap-vue): add missing props to all shapes for drawing over the map
Browse files Browse the repository at this point in the history 
Fix #138
  • Loading branch information
@diegoazh
diegoazh committed Feb 19, 2022
1 parent 07ed8cd commit c39c500
Show file tree
Hide file tree
Showing 9 changed files with 422 additions and 42 deletions.
16 changes: 12 additions & 4 deletions packages/documentation/docs/code/components/circle-shape.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,18 @@ title: circle-shape

| Prop name | Description | Type | Values | Default |
| ------------- | ----------- | --------- | ----------- | ----------- |
| center | The center of the circle<br/>`@value` { lat: 41.878, lng: -87.629 }<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple) | object | - | |
| radius | The radious of the circle<br/>`@value` 10<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple) | number | - | 10 |
| draggable | Indicates if the circle is draggable<br/>`@value` true, false<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple) | boolean | - | false |
| editable | Indicates if the circle is editable<br/>`@value` true, false<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple) | boolean | - | false |
| center | The center of the Circle.<br/>`@value` { lat: 41.878, lng: -87.629 }<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.center) | object | - | |
| radius | The radius in meters on the Earth's surface.<br/>`@value` 10<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.radius) | number | - | 10 |
| clickable | Indicates whether this Polygon handles mouse events. Defaults to true.<br/>`@value` true, false<br/>`@see` [Circle draggable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.clickable) | boolean | - | false |
| draggable | If set to true, the user can drag this circle over the map. Defaults to false.<br/>`@value` true, false<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.draggable) | boolean | - | false |
| editable | If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle. Defaults to false.<br/>`@value` true, false<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.editable) | boolean | - | false |
| fillColor | The fill color. All CSS3 colors are supported except for extended named colors.<br/>`@value` '#000'<br/>`@see` [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.fillColor) | string | - | '' |
| fillOpacity | The fill opacity between 0.0 and 1.0<br/>`@value` 1<br/>`@see` [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.fillOpacity) | number | - | 1 |
| strokeColor | The stroke color. All CSS3 colors are supported except for extended named colors.<br/>`@value` '#000'<br/>`@see` [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.strokeColor) | string | - | '' |
| strokeOpacity | The stroke opacity between 0.0 and 1.0.<br/>`@value` 1<br/>`@see` [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.strokeOpacity) | number | - | 1 |
| strokePosition | The stroke position. Defaults to CENTER.<br/>`@value` 1<br/>`@see` [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.strokePosition)<br/>`@see` [StrokePosition constant](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#StrokePosition) | number | - | 0 |
| strokeWeight | The stroke width in pixels.<br/>`@value` 1<br/>`@see` [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.strokeWeight) | number | - | 1 |
| visible | Whether this polyline is visible on the map. Defaults to true.<br/>`@value` 1<br/>`@see` [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.visible) | boolean | - | true |
| options | The Google Maps circle options<br/>`@value` {<br/> strokeColor: "#FF0000",<br/> strokeOpacity: 0.8,<br/> strokeWeight: 2,<br/> fillColor: "#FF0000",<br/> fillOpacity: 0.35,<br/> map,<br/> center: citymap[city].center,<br/> radius: Math.sqrt(citymap[city].population) * 100,<br/> }<br/>`@see` [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple) | object | - | undefined |


Expand Down
14 changes: 11 additions & 3 deletions packages/documentation/docs/code/components/polygon-shape.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,18 @@ title: polygon-shape
| Prop name | Description | Type | Values | Default |
| ------------- | ----------- | --------- | ----------- | ----------- |
| deepWatch | If set true the object will be deep watched<br/>`@value` boolean | boolean | - | false |
| draggable | Indicates if the polygon is draggable<br/>`@value` true, false<br/>`@see` [Polygon dragable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.draggable) | boolean | - | false |
| editable | Indicates if the polygon is editable<br/>`@value` true, false<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.editable) | boolean | - | false |
| clickable | Indicates whether this Polygon handles mouse events. Defaults to true.<br/>`@value` true, false<br/>`@see` [Polygon draggable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.clickable) | boolean | - | false |
| draggable | Indicates if the polygon is draggable<br/>`@value` true, false<br/>`@see` [Polygon dragable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.draggable) | boolean | - | false |
| editable | Indicates if the polygon is editable<br/>`@value` true, false<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.editable) | boolean | - | false |
| fillColor | The fill color. All CSS3 colors are supported except for extended named colors.<br/>`@value` '#000'<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.fillColor) | string | - | '' |
| fillOpacity | The fill opacity between 0.0 and 1.0<br/>`@value` 1<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.fillOpacity) | number | - | 1 |
| strokeColor | The stroke color. All CSS3 colors are supported except for extended named colors.<br/>`@value` '#000'<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.strokeColor) | string | - | '' |
| strokeOpacity | The stroke opacity between 0.0 and 1.0.<br/>`@value` 1<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.strokeOpacity) | number | - | 1 |
| strokePosition | The stroke position. Defaults to CENTER.<br/>`@value` 1<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.strokePosition)<br/>`@see` [StrokePosition constant](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#StrokePosition) | number | - | 0 |
| strokeWeight | The stroke width in pixels.<br/>`@value` 1<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.strokeWeight) | number | - | 1 |
| visible | Whether this polyline is visible on the map. Defaults to true.<br/>`@value` 1<br/>`@see` [Polygon editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.visible) | boolean | - | true |
| options | More options that you can pass to the component<br/>`@value` boolean | object | - | undefined |
| path | Indicates if the polygon is editable<br/>`@value` Array<br/>`@see` [Polygon path](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.path) | array | - | undefined |
| path | Indicates if the polygon is editable<br/>`@value` Array<br/>`@see` [Polygon path](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.path) | array | - | undefined |
| paths | Indicates if the polygon is editable<br/>`@value` Array<br/>`@see` [Polygon paths](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolygonOptions.paths) | array | - | undefined |


Expand Down
5 changes: 5 additions & 0 deletions packages/documentation/docs/code/components/polyline-shape.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,13 @@ title: polyline-shape
| Prop name | Description | Type | Values | Default |
| ------------- | ----------- | --------- | ----------- | ----------- |
| deepWatch | If set true the object will be deep watched<br/>`@value` boolean | boolean | - | false |
| clickable | Indicates whether this Polygon handles mouse events. Defaults to true.<br/>`@value` true, false<br/>`@see` [Polyline draggable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.clickable) | boolean | - | false |
| draggable | Indicates if the polyline is draggable<br/>`@value` true, false<br/>`@see` [Polyline draggable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.draggable) | boolean | - | |
| editable | Indicates if the polygon is editable<br/>`@value` true, false<br/>`@see` [Polyline editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.editable) | boolean | - | |
| strokeColor | The stroke color. All CSS3 colors are supported except for extended named colors.<br/>`@value` '#000'<br/>`@see` [Polyline editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.strokeColor) | string | - | '' |
| strokeOpacity | The stroke opacity between 0.0 and 1.0.<br/>`@value` 1<br/>`@see` [Polyline editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.strokeOpacity) | number | - | 1 |
| strokeWeight | The stroke width in pixels.<br/>`@value` 1<br/>`@see` [Polyline editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.strokeWeight) | number | - | 1 |
| visible | Whether this polyline is visible on the map. Defaults to true.<br/>`@value` 1<br/>`@see` [Polyline editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.visible) | boolean | - | true |
| options | More options that you can pass to the component<br/>`@value` boolean | object | - | undefined |
| path | Indicates if the polygon is editable<br/>`@value` Array<br/>`@see` [Polyline path](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#PolylineOptions.path) | array | - | undefined |

Expand Down
8 changes: 8 additions & 0 deletions packages/documentation/docs/code/components/rectangle-shape.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,16 @@ title: rectangle-shape
| Prop name | Description | Type | Values | Default |
| ------------- | ----------- | --------- | ----------- | ----------- |
| bounds | The bounds.<br/>`@value` object<br/>`@type` LatLngBounds\|LatLngBoundsLiteral<br/>`@see` [Rectangle bounds](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.bounds) | object | - | undefined |
| clickable | Indicates whether this Polygon handles mouse events. Defaults to true.<br/>`@value` true, false<br/>`@see` [Rectangle draggable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.clickable) | boolean | - | false |
| draggable | If set to true, the user can drag this rectangle over the map. Defaults to false.<br/>`@value` boolean<br/>`@see` [Rectangle draggable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.draggable) | boolean | - | false |
| editable | If set to true, the user can edit this rectangle by dragging the control points shown at the corners and on each edge. Defaults to false.<br/>`@value` boolean<br/>`@see` [Rectangle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.editable) | boolean | - | false |
| fillColor | The fill color. All CSS3 colors are supported except for extended named colors.<br/>`@value` '#000'<br/>`@see` [Rectangle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.fillColor) | string | - | '' |
| fillOpacity | The fill opacity between 0.0 and 1.0<br/>`@value` 1<br/>`@see` [Rectangle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.fillOpacity) | number | - | 1 |
| strokeColor | The stroke color. All CSS3 colors are supported except for extended named colors.<br/>`@value` '#000'<br/>`@see` [Rectangle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.strokeColor) | string | - | '' |
| strokeOpacity | The stroke opacity between 0.0 and 1.0.<br/>`@value` 1<br/>`@see` [Rectangle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.strokeOpacity) | number | - | 1 |
| strokePosition | The stroke position. Defaults to CENTER.<br/>`@value` 1<br/>`@see` [Rectangle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.strokePosition)<br/>`@see` [StrokePosition constant](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#StrokePosition) | number | - | 0 |
| strokeWeight | The stroke width in pixels.<br/>`@value` 1<br/>`@see` [Rectangle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.strokeWeight) | number | - | 1 |
| visible | Whether this polyline is visible on the map. Defaults to true.<br/>`@value` 1<br/>`@see` [Rectangle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#RectangleOptions.visible) | boolean | - | true |
| options | More options that you can pass to the component<br/>`@value` boolean | object | - | undefined |


Expand Down
89 changes: 81 additions & 8 deletions packages/gmap-vue/src/components/circle-shape.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,41 +61,114 @@ export default {
},
props: {
/**
* The center of the circle
* The center of the Circle.
* @value { lat: 41.878, lng: -87.629 }
* @see [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
* @see [Circle simple](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.center)
*/
center: {
type: Object,
required: true,
},
/**
* The radious of the circle
* The radius in meters on the Earth's surface.
* @value 10
* @see [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
* @see [Circle simple](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.radius)
*/
radius: {
type: Number,
default: 10,
},
/**
* Indicates if the circle is draggable
* Indicates whether this Polygon handles mouse events. Defaults to true.
* @value true, false
* @see [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
* @see [Circle draggable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.clickable)
*/
clickable: {
type: Boolean,
default: false,
},
/**
* If set to true, the user can drag this circle over the map. Defaults to false.
* @value true, false
* @see [Circle simple](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.draggable)
*/
draggable: {
type: Boolean,
default: false,
},
/**
* Indicates if the circle is editable
* If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle. Defaults to false.
* @value true, false
* @see [Circle simple](https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
* @see [Circle simple](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.editable)
*/
editable: {
type: Boolean,
default: false,
},
/**
* The fill color. All CSS3 colors are supported except for extended named colors.
* @value '#000'
* @see [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.fillColor)
*/
fillColor: {
type: String,
default: '',
},
/**
* The fill opacity between 0.0 and 1.0
* @value 1
* @see [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.fillOpacity)
*/
fillOpacity: {
type: Number,
default: 1,
},
/**
* The stroke color. All CSS3 colors are supported except for extended named colors.
* @value '#000'
* @see [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.strokeColor)
*/
strokeColor: {
type: String,
default: '',
},
/**
* The stroke opacity between 0.0 and 1.0.
* @value 1
* @see [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.strokeOpacity)
*/
strokeOpacity: {
type: Number,
default: 1,
},
/**
* The stroke position. Defaults to CENTER.
* @value 1
* @see [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.strokePosition)
* @see [StrokePosition constant](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#StrokePosition)
*/
strokePosition: {
type: Number,
default: 0,
},
/**
* The stroke width in pixels.
* @value 1
* @see [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.strokeWeight)
*/
strokeWeight: {
type: Number,
default: 1,
},
/**
* Whether this polyline is visible on the map. Defaults to true.
* @value 1
* @see [Circle editable](https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=es#CircleOptions.visible)
*/
visible: {
type: Boolean,
default: true,
},
/**
* The Google Maps circle options
* @value {
Expand Down

0 comments on commit c39c500

Please sign in to comment.