feat: add droplet,ellipse,heart,isogon,rose,star shape and tests.

package.json

@@ -1,20 +1,23 @@
 {
   "name": "auto-drawing",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "auto-drawing based zrender",
   "types": "dist/index.d.ts",
   "module": "dist/auto-drawing.esm.js",
   "main": "dist/auto-drawing.js",
   "author": "xiaofei",
   "copyright": "xiaofei",
   "license": "MIT",
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/l-x-f/auto-drawing.git"
   },
   "scripts": {
-    "dev": "rollup -c -w",
-    "build": "rollup -c",
+    "dev": "rollup -c -w --environment NODE_ENV:development",
+    "build": "rollup -c --environment NODE_ENV:production",
     "commit": "git-cz",
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix",
     "release": "node ./scripts/release.js"
@@ -27,13 +30,14 @@
   ],
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "zrender": "5.1.1"
+    "zrender": "^5.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
+    "@rollup/plugin-replace": "^5.0.1",
     "@types/lodash-es": "^4.17.4",
     "@typescript-eslint/eslint-plugin": "^5.33.1",
     "@typescript-eslint/parser": "^5.33.1",
@@ -47,14 +51,14 @@
     "husky": "^3.0.2",
     "lint-staged": "^13.0.3",
     "prettier": "^2.4.1",
-    "rollup": "^2.54.0",
+    "rollup": "2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-banner2": "^1.2.2",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-typescript2": "^0.34.1",
     "semver": "^7.3.7",
     "string": "^3.3.3",
     "typescript": "^4.7.4"

rollup.config.js

@@ -8,6 +8,7 @@ import { DEFAULT_EXTENSIONS } from '@babel/core'
 import { terser } from 'rollup-plugin-terser'
 import banner2 from 'rollup-plugin-banner2'
 import S from 'string'
+import replace from '@rollup/plugin-replace'
 import pkg from './package.json'
 
 // 合并路径
@@ -33,7 +34,6 @@ const rollupConfig = {
       // 输出 esm 规范的代码
       file: join(output, `${pkg.name}.esm.js`),
       format: 'esm',
-      plugins: [terser()],
       name
     },
     // 输出 umd 规范的压缩代码
@@ -85,7 +85,13 @@ const rollupConfig = {
     banner2(
       () =>
         `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * copyright: ${pkg.copyright}\n * license: ${pkg.license}\n  */\n`
-    )
+    ),
+    replace({
+      values: {
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+      },
+      preventAssignment: true
+    })
   ]
 }
 

scripts/release.js

@@ -73,7 +73,7 @@ async function main() {
     choices: versionIncrements.map(i => `${i} (${inc(getInc(i))})`).concat(['custom（自定义版本）'])
   })
 
-  if (release === 'custom') {
+  if (release.includes('custom')) {
     version = (
       await prompt({
         type: 'input',

src/core/arc.ts

@@ -25,7 +25,7 @@ function createArc(options?: IArcOptions): Arc {
     },
     style: {
       fill: 'none',
-      stroke: 'rgba(0,0,255,0.5)',
+      stroke: '#fff',
       ...rest
     }
   })

src/core/droplet.ts

@@ -0,0 +1,32 @@
+import { Droplet, DropletShape } from 'zrender'
+import { BaseShape } from '../index'
+import { getCommonParams } from '../utils/getCommonParams'
+
+export type IDropletOptions = BaseShape<DropletShape>
+
+/**
+ *  创建水滴
+ * @param options
+ * @returns
+ */
+function createDroplet(options?: IDropletOptions): Droplet {
+  const { common, other } = getCommonParams(options)
+  const { cx = 0, cy = 0, width = 0, height = 0, ...rest } = other
+  const shape = new Droplet({
+    ...common,
+    shape: {
+      cx,
+      cy,
+      width,
+      height
+    },
+    style: {
+      fill: 'none',
+      stroke: '#fff',
+      ...rest
+    }
+  })
+  return shape
+}
+
+export default createDroplet

src/core/ellipse.ts

@@ -0,0 +1,32 @@
+import { Ellipse, EllipseShape } from 'zrender'
+import { BaseShape } from '../index'
+import { getCommonParams } from '../utils/getCommonParams'
+
+export type IDropletOptions = BaseShape<EllipseShape>
+
+/**
+ *  创建椭圆
+ * @param options
+ * @returns
+ */
+function createEllipse(options?: IDropletOptions): Ellipse {
+  const { common, other } = getCommonParams(options)
+  const { cx = 0, cy = 0, rx = 0, ry = 0, ...rest } = other
+  const shape = new Ellipse({
+    ...common,
+    shape: {
+      cx,
+      cy,
+      rx,
+      ry
+    },
+    style: {
+      fill: 'none',
+      stroke: '#fff',
+      ...rest
+    }
+  })
+  return shape
+}
+
+export default createEllipse

src/core/heart.ts

@@ -0,0 +1,32 @@
+import { Heart, HeartShape } from 'zrender'
+import { BaseShape } from '../index'
+import { getCommonParams } from '../utils/getCommonParams'
+
+export type IHeartOptions = BaseShape<HeartShape>
+
+/**
+ *  创建心形
+ * @param options
+ * @returns
+ */
+function createHeart(options?: IHeartOptions): Heart {
+  const { common, other } = getCommonParams(options)
+  const { cx = 0, cy = 0, width = 0, height = 0, ...rest } = other
+  const shape = new Heart({
+    ...common,
+    shape: {
+      cx,
+      cy,
+      width,
+      height
+    },
+    style: {
+      fill: 'none',
+      stroke: '#fff',
+      ...rest
+    }
+  })
+  return shape
+}
+
+export default createHeart

src/core/isogon.ts

@@ -0,0 +1,32 @@
+import { Isogon, IsogonShape } from 'zrender'
+import { BaseShape } from '../index'
+import { getCommonParams } from '../utils/getCommonParams'
+
+export type IIsogonOptions = BaseShape<IsogonShape>
+
+/**
+ *  创建正多边形
+ * @param options
+ * @returns
+ */
+function createIsogon(options?: IIsogonOptions): Isogon {
+  const { common, other } = getCommonParams(options)
+  const { x = 0, y = 0, r = 0, n = 0, ...rest } = other
+  const shape = new Isogon({
+    ...common,
+    shape: {
+      x,
+      y,
+      r,
+      n
+    },
+    style: {
+      fill: 'none',
+      stroke: '#fff',
+      ...rest
+    }
+  })
+  return shape
+}
+
+export default createIsogon

src/core/rose.ts

@@ -0,0 +1,33 @@
+import { Rose, RoseShape } from 'zrender'
+import { BaseShape } from '../index'
+import { getCommonParams } from '../utils/getCommonParams'
+
+export type IRoseOptions = BaseShape<RoseShape>
+
+/**
+ *  玫瑰线
+ * @param options
+ * @returns
+ */
+function createRose(options?: IRoseOptions): Rose {
+  const { common, other } = getCommonParams(options)
+  const { cx = 0, cy = 0, r = [], n = 1, k = 0, ...rest } = other
+  const shape = new Rose({
+    ...common,
+    shape: {
+      cx,
+      cy,
+      n,
+      r,
+      k
+    },
+    style: {
+      fill: 'none',
+      stroke: '#fff',
+      ...rest
+    }
+  })
+  return shape
+}
+
+export default createRose

src/core/star.ts

@@ -0,0 +1,33 @@
+import { Star, StarShape } from 'zrender'
+import { BaseShape } from '../index'
+import { getCommonParams } from '../utils/getCommonParams'
+
+export type IStarOptions = BaseShape<StarShape>
+
+/**
+ *  创建星形
+ * @param options
+ * @returns
+ */
+function createStar(options?: IStarOptions): Star {
+  const { common, other } = getCommonParams(options)
+  const { cx = 0, cy = 0, r = 0, n = 3, r0 = 0, ...rest } = other
+  const shape = new Star({
+    ...common,
+    shape: {
+      cx,
+      cy,
+      n,
+      r,
+      r0
+    },
+    style: {
+      fill: 'none',
+      stroke: '#fff',
+      ...rest
+    }
+  })
+  return shape
+}
+
+export default createStar

src/index.ts

@@ -17,6 +17,13 @@ import createText from './core/text'
 import createBezierCurve from './core/bezierCurve'
 import createSector from './core/sector'
 import createImage from './core/image'
+import createDroplet from './core/droplet'
+import createEllipse from './core/ellipse'
+
+import createHeart from './core/heart'
+import createIsogon from './core/isogon'
+import createRose from './core/rose'
+import createStar from './core/star'
 
 import { translateGroup, scaleGroup } from './utils'
 import {
@@ -52,7 +59,9 @@ export {
   createText,
   createBezierCurve,
   createImage,
-  createCompoundPath
+  createCompoundPath,
+  createDroplet,
+  createEllipse
 }
 
 /**
@@ -117,13 +126,17 @@ export function generateShape(item: ShapeCoreType, _index?: number): AllShape {
     cy,
     cpx1,
     cpy1,
+    rx,
+    ry,
     // 下面参数可选
     cpx2,
     cpy2,
     width,
     height,
     r,
     r0,
+    n,
+    k,
     points,
     startAngle,
     endAngle,
@@ -141,7 +154,7 @@ export function generateShape(item: ShapeCoreType, _index?: number): AllShape {
       shape = createLine({ x1, y1, x2, y2, ...options })
       break
     case 'circle':
-      shape = createCircle({ cx, cy, r, ...options })
+      shape = createCircle({ cx, cy, r: r as number, ...options })
       break
     case 'rect':
       shape = createRect({ x, y, width, height, ...options })
@@ -153,17 +166,35 @@ export function generateShape(item: ShapeCoreType, _index?: number): AllShape {
       shape = createPolyline({ points, ...options })
       break
     case 'arc':
-      shape = createArc({ cx, cy, r, startAngle, endAngle, ...options })
+      shape = createArc({ cx, cy, r: r as number, startAngle, endAngle, ...options })
       break
     case 'text':
       shape = createText({ x, y, text, ...options } as any)
       break
     case 'sector':
-      shape = createSector({ cx, cy, r, r0, startAngle, endAngle, ...options } as any)
+      shape = createSector({ cx, cy, r: r as number, r0, startAngle, endAngle, ...options } as any)
       break
     case 'image':
       shape = createImage({ x, y, width, height, image, ...options } as any)
       break
+    case 'droplet':
+      shape = createDroplet({ cx, cy, width, height, ...options } as any)
+      break
+    case 'ellipse':
+      shape = createEllipse({ cx, cy, rx, ry, ...options } as any)
+      break
+    case 'heart':
+      shape = createHeart({ cx, cy, width, height, ...options } as any)
+      break
+    case 'isogon':
+      shape = createIsogon({ x, y, r: r as number, n, ...options } as any)
+      break
+    case 'rose':
+      shape = createRose({ cx, cy, n, r: r as number[], k, ...options } as any)
+      break
+    case 'star':
+      shape = createStar({ cx, cy, n, r: r as number, r0, ...options } as any)
+      break
     case 'compoundPath':
       shape = createCompoundPath({ paths, ...options } as any)
       break