@jiaminghi/c-render - npm Package Compare versions

Comparing version 0.2.11 to 0.3.0

CHANGELOG.md

@@ -0,1 +1,17 @@
+# 0.3.0-alpha (2019-06-01)
+
+### Bug Fixes
+
+- **Graph:** Fixed an exception for Graph.prototype.`attr`.
+
+### CRender
+
+- **prototype:** Add the CRender.prototype.`clone` to clone the Graph instance.
+
+### Style
+
+- **gradient:** Support `linear` and `radial` gradient.
+- **prototype:** Add the Style.prototype.`getStyle` to get style configuration.
+
+
 # 0.2.11-alpha (2019-05-29)
@@ -2,0 +18,0 @@

class/crender.class.js

@@ -331,1 +331,18 @@ import color from '@jiaminghi/color'
 }
+
+/**
+ * @description         Clone Graph
+ * @param {Graph} graph The target to be cloned
+ * @return {Graph}      Cloned graph
+ */
+CRender.prototype.clone = function (graph) {
+  const style = graph.style.getStyle()
+
+  let clonedGraph = { ...graph, style }
+
+  delete clonedGraph.render
+
+  clonedGraph = deepClone(clonedGraph, true)
+
+  return this.add(clonedGraph)
+}

class/graph.class.js

@@ -201,6 +201,6 @@ import Style from './style.class'
 
-  change = deepClone(change, true)
-
   const isObject = typeof this[attrName] === 'object'
 
+  if (isObject) change = deepClone(change, true)
+
   const { render } = this
@@ -375,2 +375,2 @@
   })
-}
+}

class/style.class.js

 import { getRgbaValue, getColorFromRgbValue } from '@jiaminghi/color'
 
+import { deepClone } from '../lib/util'
+
 /**
@@ -176,3 +178,47 @@ * @description Class Style
        */
-      textBaseline: 'middle'
+      textBaseline: 'middle',
+      /**
+       * @description The color used to create the gradient
+       * @type {Array}
+       * @default gradientColor = null
+       * @example gradientColor = ['#000', '#111', '#222']
+       */
+      gradientColor: null,
+      /**
+       * @description Gradient type
+       * @type {String}
+       * @default gradientType = 'linear'
+       * @example gradientType = 'linear' | 'radial'
+       */
+      gradientType: 'linear',
+      /**
+       * @description Gradient params
+       * @type {Array}
+       * @default gradientParams = null
+       * @example gradientParams = [x0, y0, x1, y1] (Linear Gradient)
+       * @example gradientParams = [x0, y0, r0, x1, y1, r1] (Radial Gradient)
+       */
+      gradientParams: null,
+      /**
+       * @description When to use gradients
+       * @type {String}
+       * @default gradientWith = 'stroke'
+       * @example gradientWith = 'stroke' | 'fill'
+       */
+      gradientWith: 'stroke',
+      /**
+       * @description Gradient color stops
+       * @type {String}
+       * @default gradientStops = 'auto'
+       * @example gradientStops = 'auto' | [0, .2, .3, 1]
+       */
+      gradientStops: 'auto',
+      /**
+       * @description Extended color that supports animation transition
+       * @type {Array|Object}
+       * @default colors = null
+       * @example colors = ['#000', '#111', '#222']
+       * @example colors = { a: '#000', b: '#111' }
+       */
+      colors: null
     }
@@ -184,10 +230,13 @@
 
-const colorProcessorKeys = ['fill', 'stroke', 'shadowColor']
-
 /**
  * @description Set colors to rgba value
  * @param {Object} style style config
+ * @param {Boolean} reverse Whether to perform reverse operation
  * @return {Undefined} Void
  */
-Style.prototype.colorProcessor = function (style) {
+Style.prototype.colorProcessor = function (style, reverse = false) {
+  const processor = reverse ? getColorFromRgbValue : getRgbaValue
+
+  const colorProcessorKeys = ['fill', 'stroke', 'shadowColor']
+
   const allKeys = Object.keys(style)
@@ -197,3 +246,13 @@
 
-  colorKeys.forEach(key => (style[key] = getRgbaValue(style[key])))
+  colorKeys.forEach(key => (style[key] = processor(style[key])))
+
+  const { gradientColor, colors } = style
+
+  if (gradientColor) style.gradientColor = gradientColor.map(c => processor(c))
+
+  if (colors) {
+    const colorsKeys = Object.keys(colors)
+
+    colorsKeys.forEach(key => (colors[key] = processor(colors[key])))
+  }
 }
@@ -210,2 +269,4 @@
   initGraphStyle(ctx, this)
+
+  initGradient(ctx, this)
 }
@@ -284,2 +345,83 @@
 /**
+ * @description Set the gradient color of canvas ctx
+ * @param {Object} ctx  Context of canvas
+ * @param {Style} style Instance of Style
+ * @return {Undefined} Void
+ */
+function initGradient (ctx, style) {
+  if (!gradientValidator(style)) return
+
+  let { gradientColor, gradientParams, gradientType, gradientWith, gradientStops } = style
+
+  gradientColor = gradientColor.map(c => getColorFromRgbValue(c))
+
+  if (gradientStops === 'auto') gradientStops = getAutoColorStops(gradientColor)
+
+  const gradient = ctx[`create${gradientType.slice(0, 1).toUpperCase() + gradientType.slice(1)}Gradient`](...gradientParams)
+
+  gradientStops.forEach((stop, i) => gradient.addColorStop(stop, gradientColor[i]))
+
+  ctx[`${gradientWith}Style`] = gradient
+}
+
+/**
+ * @description Check if the gradient configuration is legal
+ * @param {Style} style Instance of Style
+ * @return {Boolean} Check Result
+ */
+function gradientValidator (style) {
+  const { gradientColor, gradientParams, gradientType, gradientWith, gradientStops } = style
+
+  if (!gradientColor || !gradientParams) return false
+
+  if (gradientColor.length === 1) {
+    console.warn('The gradient needs to provide at least two colors')
+
+    return false
+  }
+
+  if (gradientType !== 'linear' && gradientType !== 'radial') {
+    console.warn('GradientType only supports linear or radial, current value is ' + gradientType)
+
+    return false
+  }
+
+  const gradientParamsLength = gradientParams.length
+
+  if (
+    (gradientType === 'linear' && gradientParamsLength !== 4) ||
+    (gradientType === 'radial' && gradientParamsLength !== 6)
+  ) {
+    console.warn('The expected length of gradientParams is ' + (gradientType === 'linear' ? '4' : '6'))
+
+    return false
+  }
+
+  if (gradientWith !== 'fill' && gradientWith !== 'stroke') {
+    console.warn('GradientWith only supports fill or stroke, current value is ' + gradientWith)
+
+    return false
+  }
+
+  if (gradientStops !== 'auto' && !(gradientStops instanceof Array)) {
+    console.warn(`gradientStops only supports 'auto' or Number Array ([0, .5, 1]), current value is ` + gradientStops)
+
+    return false
+  }
+
+  return true
+}
+
+/**
+ * @description Get a uniform gradient color stop
+ * @param {Array} color Gradient color
+ * @return {Array} Gradient color stop
+ */
+function getAutoColorStops (color) {
+  const stopGap = 1 / (color.length - 1)
+
+  return color.map((foo, i) => stopGap * i)
+}
+
+/**
  * @description Restore canvas ctx transform
@@ -302,2 +444,14 @@ * @param {Object} ctx  Context of canvas
   Object.assign(this, change)
+}
+
+/**
+ * @description Get the current style configuration
+ * @return {Object} Style configuration
+ */
+Style.prototype.getStyle = function () {
+  const clonedStyle = deepClone(this, true)
+
+  this.colorProcessor(clonedStyle, true)
+
+  return clonedStyle
 }

config/graphs.js

@@ -33,3 +33,3 @@ import beziercurve from '@jiaminghi/bezier-curve'
     if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
-      console.error('Shape configuration is abnormal!')
+      console.error('Circle shape configuration is abnormal!')
 
@@ -87,3 +87,3 @@ return false
     if (typeof rx !== 'number' || typeof ry !== 'number' || typeof hr !== 'number' || typeof vr !== 'number') {
-      console.error('Shape configuration is abnormal!')
+      console.error('Ellipse shape configuration is abnormal!')
 
@@ -151,3 +151,3 @@ return false
     if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
-      console.error('Shape configuration is abnormal!')
+      console.error('Rect shape configuration is abnormal!')
 
@@ -204,3 +204,3 @@ return false
     if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
-      console.error('Shape configuration is abnormal!')
+      console.error('Ring shape configuration is abnormal!')
 
@@ -268,3 +268,3 @@ return false
     if (keys.find(key => typeof shape[key] !== 'number')) {
-      console.error('Shape configuration is abnormal!')
+      console.error('Arc shape configuration is abnormal!')
 
@@ -331,3 +331,3 @@ return false
     if (keys.find(key => typeof shape[key] !== 'number')) {
-      console.error('Shape configuration is abnormal!')
+      console.error('Sector shape configuration is abnormal!')
 
@@ -391,3 +391,3 @@ return false
     if (keys.find(key => typeof shape[key] !== 'number')) {
-      console.error('Shape configuration is abnormal!')
+      console.error('RegPolygon shape configuration is abnormal!')
 
@@ -398,3 +398,3 @@ return false
     if (side < 3) {
-      console.error('At least trigon!')
+      console.error('RegPolygon at least trigon!')
 
@@ -465,3 +465,3 @@ return false
     if (!(points instanceof Array)) {
-      console.error('Points should be an array!')
+      console.error('Polyline points should be an array!')
 
@@ -532,3 +532,3 @@ return false
     if (!(points instanceof Array)) {
-      console.error('Points should be an array!')
+      console.error('Smoothline points should be an array!')
 
@@ -624,3 +624,3 @@ return false
     if (!(points instanceof Array)) {
-      console.error('Points should be an array!')
+      console.error('BezierCurve points should be an array!')
 
@@ -710,3 +710,3 @@ return false
     if (typeof content !== 'string') {
-      console.error('Content should be a string!')
+      console.error('Text content should be a string!')
 
@@ -713,0 +713,0 @@ return false

package.json

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

README.md

@@ -133,2 +133,6 @@ <h1 align="center">CRender</h1>
 
+- [clone](#clone)
+
+  Clone Graph.
+
 - [delGraph](#delGraph)
@@ -167,2 +171,14 @@
 
+#### Clone
+
+```javascript
+/**
+ * @description         Clone Graph
+ * @param {Graph} graph The target to be cloned
+ * @return {Graph}      Cloned graph
+ */
+CRender.prototype.clone = function (graph) {
+}
+```
+
 #### delGraph
@@ -534,2 +550,8 @@
 - [textBaseline](#textBaseline)
+- [gradientColor](#gradientColor)
+- [gradientType](#gradientType)
+- [gradientParams](#gradientParams)
+- [gradientWith](#gradientWith)
+- [gradientStops](#gradientStops)
+- [colors](#colors)
 
@@ -540,6 +562,6 @@ #### fill
 /**
-* @description Rgba value of graph fill color 
-* @type {Array}
-* @default fill = [0, 0, 0, 1]
-*/
+ * @description Rgba value of graph fill color 
+ * @type {Array}
+ * @default fill = [0, 0, 0, 1]
+ */
 ```
@@ -551,6 +573,6 @@
 /**
-* @description Rgba value of graph stroke color 
-* @type {Array}
-* @default stroke = [0, 0, 0, 1]
-*/
+ * @description Rgba value of graph stroke color 
+ * @type {Array}
+ * @default stroke = [0, 0, 0, 1]
+ */
 ```
@@ -562,6 +584,6 @@
 /**
-* @description Opacity of graph
-* @type {Number}
-* @default opacity = 1
-*/
+ * @description Opacity of graph
+ * @type {Number}
+ * @default opacity = 1
+ */
 ```
@@ -573,7 +595,7 @@
 /**
-* @description LineCap of Ctx
-* @type {String}
-* @default lineCap = null
-* @example lineCap = 'butt'|'round'|'square'
-*/
+ * @description LineCap of Ctx
+ * @type {String}
+ * @default lineCap = null
+ * @example lineCap = 'butt'|'round'|'square'
+ */
 ```
@@ -585,7 +607,7 @@
 /**
-* @description Linejoin of Ctx
-* @type {String}
-* @default lineJoin = null
-* @example lineJoin = 'round'|'bevel'|'miter'
-*/
+ * @description Linejoin of Ctx
+ * @type {String}
+ * @default lineJoin = null
+ * @example lineJoin = 'round'|'bevel'|'miter'
+ */
 ```
@@ -597,7 +619,7 @@
 /**
-* @description LineDash of Ctx
-* @type {Array}
-* @default lineDash = null
-* @example lineDash = [10, 10]
-*/
+ * @description LineDash of Ctx
+ * @type {Array}
+ * @default lineDash = null
+ * @example lineDash = [10, 10]
+ */
 ```
@@ -609,7 +631,7 @@
 /**
-* @description LineDashOffset of Ctx
-* @type {Number}
-* @default lineDashOffset = null
-* @example lineDashOffset = 10
-*/
+ * @description LineDashOffset of Ctx
+ * @type {Number}
+ * @default lineDashOffset = null
+ * @example lineDashOffset = 10
+ */
 ```
@@ -621,6 +643,6 @@
 /**
-* @description ShadowBlur of Ctx
-* @type {Number}
-* @default shadowBlur = 0
-*/
+ * @description ShadowBlur of Ctx
+ * @type {Number}
+ * @default shadowBlur = 0
+ */
 ```
@@ -632,6 +654,6 @@
 /**
-* @description Rgba value of graph shadow color 
-* @type {Array}
-* @default shadowColor = [0, 0, 0, 0]
-*/
+ * @description Rgba value of graph shadow color 
+ * @type {Array}
+ * @default shadowColor = [0, 0, 0, 0]
+ */
 ```
@@ -643,6 +665,6 @@
 /**
-* @description ShadowOffsetX of Ctx
-* @type {Number}
-* @default shadowOffsetX = 0
-*/
+ * @description ShadowOffsetX of Ctx
+ * @type {Number}
+ * @default shadowOffsetX = 0
+ */
 ```
@@ -654,6 +676,6 @@
 /**
-* @description ShadowOffsetY of Ctx
-* @type {Number}
-* @default shadowOffsetY = 0
-*/
+ * @description ShadowOffsetY of Ctx
+ * @type {Number}
+ * @default shadowOffsetY = 0
+ */
 ```
@@ -665,6 +687,6 @@
 /**
-* @description LineWidth of Ctx
-* @type {Number}
-* @default lineWidth = 0
-*/
+ * @description LineWidth of Ctx
+ * @type {Number}
+ * @default lineWidth = 0
+ */
 ```
@@ -676,6 +698,6 @@
 /**
-* @description Stroke width is not scaled
-* @type {Boolean}
-* @default strokeNoScale = false
-*/
+ * @description Stroke width is not scaled
+ * @type {Boolean}
+ * @default strokeNoScale = false
+ */
 ```
@@ -687,7 +709,7 @@
 /**
-* @description Center point of the graph
-* @type {Array}
-* @default graphCenter = null
-* @example graphCenter = [10, 10]
-*/
+ * @description Center point of the graph
+ * @type {Array}
+ * @default graphCenter = null
+ * @example graphCenter = [10, 10]
+ */
 ```
@@ -699,7 +721,7 @@
 /**
-* @description Graph scale
-* @type {Array}
-* @default scale = null
-* @example scale = [1.5, 1.5]
-*/
+ * @description Graph scale
+ * @type {Array}
+ * @default scale = null
+ * @example scale = [1.5, 1.5]
+ */
 ```
@@ -711,7 +733,7 @@
 /**
-* @description Graph rotation degree
-* @type {Number}
-* @default rotate = null
-* @example rotate = 10
-*/
+ * @description Graph rotation degree
+ * @type {Number}
+ * @default rotate = null
+ * @example rotate = 10
+ */
 ```
@@ -723,7 +745,7 @@
 /**
-* @description Graph translate distance
-* @type {Array}
-* @default translate = null
-* @example translate = [10, 10]
-*/
+ * @description Graph translate distance
+ * @type {Array}
+ * @default translate = null
+ * @example translate = [10, 10]
+ */
 ```
@@ -735,7 +757,7 @@
 /**
-* @description Cursor status when hover
-* @type {String}
-* @default hoverCursor = 'pointer'
-* @example hoverCursor = 'default'|'pointer'|'auto'|'crosshair'|'move'|'wait'|...
-*/
+ * @description Cursor status when hover
+ * @type {String}
+ * @default hoverCursor = 'pointer'
+ * @example hoverCursor = 'default'|'pointer'|'auto'|'crosshair'|'move'|'wait'|...
+ */
 ```
@@ -747,7 +769,7 @@
 /**
-* @description Font style of Ctx
-* @type {String}
-* @default fontStyle = 'normal'
-* @example fontStyle = 'normal'|'italic'|'oblique'
-*/
+ * @description Font style of Ctx
+ * @type {String}
+ * @default fontStyle = 'normal'
+ * @example fontStyle = 'normal'|'italic'|'oblique'
+ */
 ```
@@ -759,7 +781,7 @@
 /**
-* @description Font varient of Ctx
-* @type {String}
-* @default fontVarient = 'normal'
-* @example fontVarient = 'normal'|'small-caps'
-*/
+ * @description Font varient of Ctx
+ * @type {String}
+ * @default fontVarient = 'normal'
+ * @example fontVarient = 'normal'|'small-caps'
+ */
 ```
@@ -771,7 +793,7 @@
 /**
-* @description Font weight of Ctx
-* @type {String|Number}
-* @default fontWeight = 'normal'
-* @example fontWeight = 'normal'|'bold'|'bolder'|'lighter'|Number
-*/
+ * @description Font weight of Ctx
+ * @type {String|Number}
+ * @default fontWeight = 'normal'
+ * @example fontWeight = 'normal'|'bold'|'bolder'|'lighter'|Number
+ */
 ```
@@ -783,6 +805,6 @@
 /**
-* @description Font size of Ctx
-* @type {Number}
-* @default fontSize = 10
-*/
+ * @description Font size of Ctx
+ * @type {Number}
+ * @default fontSize = 10
+ */
 ```
@@ -794,6 +816,6 @@
 /**
-* @description Font family of Ctx
-* @type {String}
-* @default fontFamily = 'Arial'
-*/
+ * @description Font family of Ctx
+ * @type {String}
+ * @default fontFamily = 'Arial'
+ */
 ```
@@ -805,7 +827,7 @@
 /**
-* @description TextAlign of Ctx
-* @type {String}
-* @default textAlign = 'center'
-* @example textAlign = 'start'|'end'|'left'|'right'|'center'
-*/
+ * @description TextAlign of Ctx
+ * @type {String}
+ * @default textAlign = 'center'
+ * @example textAlign = 'start'|'end'|'left'|'right'|'center'
+ */
 ```
@@ -817,9 +839,98 @@
 /**
-* @description TextBaseline of Ctx
-* @type {String}
-* @default textBaseline = 'middle'
-* @example textBaseline = 'top'|'bottom'|'middle'|'alphabetic'|'hanging'
-*/
+ * @description TextBaseline of Ctx
+ * @type {String}
+ * @default textBaseline = 'middle'
+ * @example textBaseline = 'top'|'bottom'|'middle'|'alphabetic'|'hanging'
+ */
 ```
 
+#### gradientColor
+
+```javascript
+/**
+ * @description The color used to create the gradient
+ * @type {Array}
+ * @default gradientColor = null
+ * @example gradientColor = ['#000', '#111', '#222']
+ */
+```
+
+#### gradientType
+
+```javascript
+/**
+ * @description Gradient type
+ * @type {String}
+ * @default gradientType = 'linear'
+ * @example gradientType = 'linear' | 'radial'
+ */
+```
+
+#### gradientParams
+
+```javascript
+/**
+ * @description Gradient params
+ * @type {Array}
+ * @default gradientParams = null
+ * @example gradientParams = [x0, y0, x1, y1] (Linear Gradient)
+ * @example gradientParams = [x0, y0, r0, x1, y1, r1] (Radial Gradient)
+ */
+```
+
+#### gradientWith
+
+```javascript
+/**
+ * @description When to use gradients
+ * @type {String}
+ * @default gradientWith = 'stroke'
+ * @example gradientWith = 'stroke' | 'fill'
+ */
+```
+
+#### gradientStops
+
+```javascript
+/**
+ * @description Gradient color stops
+ * @type {String}
+ * @default gradientStops = 'auto'
+ * @example gradientStops = 'auto' | [0, .2, .3, 1]
+ */
+```
+
+#### colors
+
+```javascript
+/**
+ * @description Extended color that supports animation transition
+ * @type {Array|Object}
+ * @default colors = null
+ * @example colors = ['#000', '#111', '#222']
+ * @example colors = { a: '#000', b: '#111' }
+ */
+```
+
+#### Tip
+
+**Gradient** is automatically enabled when `gradientColor` and `gradientParams` are configured.
+
+### prototype
+
+- [getStyle](#getStyle)
+
+  Get the current style configuration.
+
+#### getStyle
+
+```javascript
+/**
+ * @description Get the current style configuration
+ * @return {Object} Style configuration
+ */
+Style.prototype.getStyle = function () {
+}
+```
+
 <h3 align="center">Examples</h3>
@@ -826,0 +937,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

141630

increased by5.86%

Lines of code

1814

increased by7.91%

Number of lines in readme file

1818

increased by6.5%

No dependency changes