vislite 1.6.1 → 1.7.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "1.6.1",
+  "version": "1.7.0-alpha.1",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",
@@ -70,6 +70,6 @@
     "webpack-dev-server": "^4.7.4"
   },
   "dependencies": {
-    "oipage": "^1.3.1"
+    "oipage": "^1.5.0"
   }
 }

package/src/common/svg/index.ts

@@ -19,6 +19,10 @@ class SVG {
     private __path: string = ""
     private __currentPosition: number[] = []
 
+    // 变换（和canvas2D的类似，内部维护了用于记录）
+    private __transform_history: Array<string> = []
+    private __transform_current = ""
+
     protected __svg: SVGElement
     constructor(svg: SVGElement) {
         this.__svg = svg
@@ -128,18 +132,27 @@ class SVG {
     // deg表示文字旋转角度，是角度值，不是弧度
     fillText(text: string, x: number, y: number, deg: number = 0) {
         initText(this.__useEl, this.__config, x, y, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         this.__useEl.textContent = text
         fill(this.__useEl, this.__config)
         return this
     }
     strokeText(text: string, x: number, y: number, deg: number = 0) {
         initText(this.__useEl, this.__config, x, y, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         this.__useEl.textContent = text
         stroke(this.__useEl, this.__config)
         return this
     }
     fullText(text: string, x: number, y: number, deg: number = 0) {
         initText(this.__useEl, this.__config, x, y, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         this.__useEl.textContent = text
         full(this.__useEl, this.__config)
         return this
@@ -155,6 +168,9 @@ class SVG {
         deg: number
     ) {
         initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         fill(this.__useEl, this.__config)
         return this
     }
@@ -167,6 +183,9 @@ class SVG {
         deg: number
     ) {
         initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         stroke(this.__useEl, this.__config)
         return this
     }
@@ -179,6 +198,9 @@ class SVG {
         deg: number
     ) {
         initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         full(this.__useEl, this.__config)
         return this
     }
@@ -186,16 +208,25 @@ class SVG {
     // 圆形
     fillCircle(cx: number, cy: number, r: number) {
         initCircle(this.__useEl, cx, cy, r)
+        this.attr({
+            transform: this.__transform_current
+        })
         fill(this.__useEl, this.__config)
         return this
     }
     strokeCircle(cx: number, cy: number, r: number) {
         initCircle(this.__useEl, cx, cy, r)
+        this.attr({
+            transform: this.__transform_current
+        })
         stroke(this.__useEl, this.__config)
         return this
     }
     fullCircle(cx: number, cy: number, r: number) {
         initCircle(this.__useEl, cx, cy, r)
+        this.attr({
+            transform: this.__transform_current
+        })
         full(this.__useEl, this.__config)
         return this
     }
@@ -203,16 +234,25 @@ class SVG {
     // 矩形
     fillRect(x: number, y: number, width: number, height: number) {
         initRect(this.__useEl, this.__config, x, y, width, height)
+        this.attr({
+            transform: this.__transform_current
+        })
         fill(this.__useEl, this.__config)
         return this
     }
     strokeRect(x: number, y: number, width: number, height: number) {
         initRect(this.__useEl, this.__config, x, y, width, height)
+        this.attr({
+            transform: this.__transform_current
+        })
         stroke(this.__useEl, this.__config)
         return this
     }
     fullRect(x: number, y: number, width: number, height: number) {
         initRect(this.__useEl, this.__config, x, y, width, height)
+        this.attr({
+            transform: this.__transform_current
+        })
         full(this.__useEl, this.__config)
         return this
     }
@@ -241,20 +281,38 @@ class SVG {
     }
     fill() {
         initPath(this.__useEl, this.__path)
+        this.attr({
+            transform: this.__transform_current
+        })
         fill(this.__useEl, this.__config)
         return this
     }
     stroke() {
         initPath(this.__useEl, this.__path)
+        this.attr({
+            transform: this.__transform_current
+        })
         stroke(this.__useEl, this.__config)
         return this
     }
     full() {
         initPath(this.__useEl, this.__path)
+        this.attr({
+            transform: this.__transform_current
+        })
         full(this.__useEl, this.__config)
         return this
     }
 
+    save() {
+        this.__transform_history.push(this.__transform_current);
+        return this
+    }
+    restore() {
+        if (this.__transform_history.length > 0) this.__transform_current = this.__transform_history.pop() as string;
+        return this
+    }
+
     arc(x: number, y: number, r: number, beginDeg: number, deg: number) {
         const begPosition = rotate(x, y, (beginDeg / 180) * Math.PI, x + r, y)
         const endPosition = rotate(
@@ -317,7 +375,6 @@ class SVG {
         return this
     }
 
-
     // 线性渐变
     createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
         return linearGradient(this.__svg, x0, y0, x1, y1)
@@ -327,6 +384,36 @@ class SVG {
     createRadialGradient(cx: number, cy: number, r: number) {
         return radialGradient(this.__svg, cx, cy, r)
     }
+
+    // 转换画布
+    translate(dx: number, dy: number) {
+        this.__transform_current += ' translate(' + dx + ',' + dy + ')'
+        return this
+    }
+    rotate(deg: number) {
+        this.__transform_current += ' rotate(' + deg + ')'
+        return this
+    }
+
+    // 扩展绘制方法
+    install(methods: {
+        [key: string]: Function
+    }): any {
+        for (const key in methods) {
+
+            if (key in this) {
+                throw new Error("VISLite SVG:Method already exists and cannot be overwritten.")
+            } else {
+                (this as any)[key] = (...args: any) => {
+                    const value = methods[key].apply(this, args)
+                    if (value != void 0) return value
+                    return this
+                }
+            }
+
+        }
+        return this
+    }
 }
 
 export default SVG

package/types/SVG.d.ts

@@ -199,6 +199,16 @@ export default interface SVGType {
      */
     bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this
 
+    /**
+     * 保存当前的绘图状态
+     */
+    save(): this
+
+    /**
+     * 恢复之前保存的绘图状态
+     */
+    restore(): this
+
     /**
      * 把当前路径包裹的区域填充颜色
      */
@@ -245,4 +255,25 @@ export default interface SVGType {
      * 把画布变成url
      */
     toDataURL(): Promise<string>
+
+    /**
+     * 将画布的坐标原点向左右方向移动dx，向上下方向移动dy
+     * @param dx
+     * @param dy
+     */
+    translate(dx: number, dy: number): this
+
+    /**
+     * 将画布顺时针旋转deg弧度
+     * @param deg
+     */
+    rotate(deg: number): this
+
+    /**
+     * 扩展绘制方法
+     * @param methods
+     */
+    install(methods: {
+        [key: string]: Function
+    }): this
 }