@jiaminghi/c-render - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

CHANGELOG.md

@@ -0,1 +1,8 @@
+# 0.2.3-alpha (2019-04-29)
+
+### Perfect
+
+- **graph:** Improve graph basic properties.
+- **Documentation:** Perfect documentation.
+
 # 0.2.2-alpha (2019-04-25)
@@ -2,0 +9,0 @@

class/graph.class.js

@@ -81,3 +81,21 @@ import Style from './style.class'
        */
-      hoverRect: null
+      hoverRect: null,
+      /**
+       * @description Mouse enter event handler
+       * @type {Function|Null}
+       * @default mouseEnter = null
+       */
+      mouseEnter: null,
+      /**
+       * @description Mouse outer event handler
+       * @type {Function|Null}
+       * @default mouseOuter = null
+       */
+      mouseOuter: null,
+      /**
+       * @description Mouse click event handler
+       * @type {Function|Null}
+       * @default click = null
+       */
+      click: null
     }
@@ -84,0 +102,0 @@

package.json

 {
   "name": "@jiaminghi/c-render",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "author": "JiaMing <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "Canvas-based vector graphics rendering plugin",

README.md

@@ -232,2 +232,4 @@ <h1 align="center">CRender</h1>
 
+**When adding a graph, you can configure them.**
+
 - [visible](#visible)
@@ -244,2 +246,5 @@ - [shape](#shape)
 - [hoverRect](#hoverRect)
+- [mouseEnter](#mouseEnter)
+- [mouseOuter](#mouseOuter)
+- [click](#click)
 
@@ -361,2 +366,36 @@ #### visible
 
+#### mouseEnter
+
+```javascript
+/**
+* @description Mouse enter event handler
+* @type {Function|Null}
+* @default mouseEnter = null
+*/
+```
+
+#### mouseOuter
+
+```javascript
+/**
+* @description Mouse outer event handler
+* @type {Function|Null}
+* @default mouseOuter = null
+*/
+```
+
+#### click
+
+```javascript
+/**
+* @description Mouse click event handler
+* @type {Function|Null}
+* @default click = null
+*/
+```
+
+#### Tip
+
+Enable **mouseEnter**, **mouseOuter**, **click** event support requires configuring the `hover` property of the graph to `true`. Extended new graph require the **hoverCheck** method to be configured to provide event support.
+
 ### prototype
@@ -782,2 +821,10 @@
 
+##### shape attribute
+
+| Attribute name |   Type   | Default |        Annotation         |
+| :------------: | :------: | :-----: | :-----------------------: |
+|       rx       | `Number` |   `0`   | Center x-axis coordinate. |
+|       ry       | `Number` |   `0`   | Center r-axis coordinate. |
+|       r        | `Number` |   `0`   |      Circle radius.       |
+
 ```javascript
@@ -817,2 +864,11 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type   | Default |        Annotation         |
+| :------------: | :------: | :-----: | :-----------------------: |
+|       rx       | `Number` |   `0`   | Center x-axis coordinate. |
+|       ry       | `Number` |   `0`   | Center y-axis coordinate. |
+|       hr       | `Number` |   `0`   |  Horizontal axis radius.  |
+|       vr       | `Number` |   `0`   |   Vertical axis radius.   |
+
 ```javascript
@@ -852,2 +908,11 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type   | Default |                        Annotation                         |
+| :------------: | :------: | :-----: | :-------------------------------------------------------: |
+|       x        | `Number` |   `0`   | The x coordinate of the top left corner of the rectangle. |
+|       y        | `Number` |   `0`   | The y coordinate of the top left corner of the rectangle. |
+|       w        | `Number` |   `0`   |                     Rectangle width.                      |
+|       h        | `Number` |   `0`   |                     Rectangle height.                     |
+
 ```javascript
@@ -889,2 +954,10 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type   | Default |        Annotation         |
+| :------------: | :------: | :-----: | :-----------------------: |
+|       rx       | `Number` |   `0`   | Center x-axis coordinate. |
+|       ry       | `Number` |   `0`   | Center y-axis coordinate. |
+|       r        | `Number` |   `0`   |       Ring radius.        |
+
 ```javascript
@@ -923,2 +996,13 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type    | Default |        Annotation         |
+| :------------: | :-------: | :-----: | :-----------------------: |
+|       rx       | `Number`  |   `0`   | Center x-axis coordinate. |
+|       ry       | `Number`  |   `0`   | Center y-axis coordinate. |
+|       r        | `Number`  |   `0`   |        Arc radius.        |
+|   startAngle   | `Number`  |   `0`   |     Arc start angle.      |
+|    endAngle    | `Number`  |   `0`   |      Arc end angle.       |
+|   clockWise    | `Boolean` | `true`  |         Clockwise         |
+
 ```javascript
@@ -962,2 +1046,13 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type    | Default |        Annotation         |
+| :------------: | :-------: | :-----: | :-----------------------: |
+|       rx       | `Number`  |   `0`   | Center x-axis coordinate. |
+|       ry       | `Number`  |   `0`   | Center y-axis coordinate. |
+|       r        | `Number`  |   `0`   |      Sector radius.       |
+|   startAngle   | `Number`  |   `0`   |    Sector start angle.    |
+|    endAngle    | `Number`  |   `0`   |     Sector end angle.     |
+|   clockWise    | `Boolean` | `true`  |         Clockwise         |
+
 ```javascript
@@ -1000,2 +1095,11 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type   | Default |        Annotation         |
+| :------------: | :------: | :-----: | :-----------------------: |
+|       rx       | `Number` |   `0`   | Center x-axis coordinate. |
+|       ry       | `Number` |   `0`   | Center y-axis coordinate. |
+|       r        | `Number` |   `0`   |       Circumradius.       |
+|      side      | `Number` |   `0`   |       Edge number.        |
+
 ```javascript
@@ -1037,2 +1141,9 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type    | Default |               Annotation               |
+| :------------: | :-------: | :-----: | :------------------------------------: |
+|     points     |  `Array`  |  `[]`   | The points that makes up the polyline. |
+|     close      | `Boolean` | `false` |     Whether to close the polyline.     |
+
 ```javascript
@@ -1127,2 +1238,9 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type    | Default |                Annotation                |
+| :------------: | :-------: | :-----: | :--------------------------------------: |
+|     points     |  `Array`  |  `[]`   | The points that makes up the smoothline. |
+|     close      | `Boolean` | `false` |     Whether to close the smoothline.     |
+
 ```javascript
@@ -1226,2 +1344,9 @@ const { area: [w, h] } = render
 
+##### shape attribute
+
+| Attribute name |   Type    | Default |                Annotation                 |
+| :------------: | :-------: | :-----: | :---------------------------------------: |
+|     points     |  `Array`  |  `[]`   | The points that makes up the bezierCurve. |
+|     close      | `Boolean` | `false` |     Whether to close the smoothline.      |
+
 ```javascript
@@ -1234,8 +1359,12 @@ const { area: [w, h] } = render
 const points = [
+  // Start point
   [-100 + offsetX, -50 + offsetY],
+  // Multiple sets of bezier curve
   [
+    // controlPoint1,controlPoint2,endPoint
     [0  + offsetX, -50 + offsetY],
     [0  + offsetX, 50 + offsetY],
     [100  + offsetX, 50 + offsetY]
-  ]
+  ],
+  // [...],[...]
 ]
@@ -1340,2 +1469,10 @@
 
+##### shape attribute
+
+| Attribute name |   Type   |   Default   |         Annotation         |
+| :------------: | :------: | :---------: | :------------------------: |
+|    content     | `String` |    `''`     |       Text content.        |
+|    position    | `Array`  |  `[0, 0]`   |    Text start position.    |
+|    maxWidth    | `Number` | `Undefined` | Maximum width of the text. |
+
 ```javascript
@@ -1386,2 +1523,6 @@ const { area: [w, h] } = render
 
+##### Tip
+
+Graph of **text** should be configured with `hoverRect` to support mouse events.
+
 <h3 align="center">Extend New Graph</h3>
@@ -1564,3 +1705,3 @@
 
-- [Transition](#https://github.com/jiaming743/transition)
+- [Transition](https://github.com/jiaming743/transition)
 
@@ -1577,8 +1718,8 @@ Provide animation transition data(animationCurve).
 
-- [BezierCurve](#https://github.com/jiaming743/bezierCurve)
+- [BezierCurve](https://github.com/jiaming743/bezierCurve)
 
   Provides support for bezierCurve, such as curve length calculation, conversion between curve and polyline.
 
-- [Color](#https://github.com/jiaming743/Color)
+- [Color](https://github.com/jiaming743/Color)
 
   Provides calculation of color values.

No alert changes

Improved metrics

Total package byte prevSize

132308

increased by5.22%

Lines of code

1668

increased by1.09%

Number of lines in readme file

1707

increased by9%

No dependency changes