Merge pull request #21 from PeterStaev/ios-svg-support

iOS svg support

Author: bradmartin

README.md

@@ -124,7 +124,7 @@ export class DrawingPadExample {
 
 
 ## Attributes
-**penColor - (color string)** - *optional*
+**penColor - (Color)** - *optional*
 
 Attribute to specify the pen (stroke) color to use.
 
@@ -138,8 +138,9 @@ Attribute to specify the pen (stroke) width to use.
 
 **clearDrawing()** - clears the drawing from the DrawingPad view.
 
+**getDrawingSvg()** - Promise (returns a Scalable Vector Graphics document)
+
 #### *Android Only*
 
 - **getTransparentDrawing()** - Promise (returns a bitmap with a transparent background)
-- **getDrawingSvg()** - Promise (returns a Scalable Vector Graphics document)
 

demo/app/app.css

@@ -6,6 +6,8 @@
 
 Button {
     horizontal-align: center;
+    font-size: 18;
+    margin-left: 5
 }
 
 .red {

demo/app/main-page.xml

@@ -6,7 +6,10 @@
         <StackLayout>
             <DrawingPad:DrawingPad backgroundColor="#222" id="drawingPad" margin="10" height="280" penColor="{{ penColor }}" penWidth="{{ penWidth }}" />
             <StackLayout orientation="horizontal">
-                <Button text="Get Drawing" tap="{{ getMyDrawing }}" />
+                <Button text="Get Image" tap="{{ getMyDrawing }}" />
+                <Button text="Get SVG" tap="{{ getMyDrawingSvg }}" />
+            </StackLayout>
+            <StackLayout orientation="horizontal">
                 <Button text="Clear" tap="{{ clearMyDrawing }}" />
                 <Button text="Pick Color" tap="{{ openColorPicker }}" />                
             </StackLayout>

demo/app/main-view-model.ts

@@ -27,6 +27,12 @@ export class HelloWorldModel extends Observable {
       console.log(res);
     });
   }
+  
+  public getMyDrawingSvg() {
+    this._myDrawingPad.getDrawingSvg().then((res) => {
+      console.log(res);
+    });
+  }
 
   public clearMyDrawing() {
     this._myDrawingPad.clearDrawing();

drawingpad-common.ts

@@ -14,9 +14,7 @@ export abstract class DrawingPadBase extends View implements DrawingPadDefinitio
     public getTransparentDrawing(): Promise<any> {
         return new Promise<any>((resolve, reject) => { resolve(); });
     }
-    public getDrawingSvg(): Promise<any> {
-        return new Promise<any>((resolve, reject) => { resolve(); });
-    }
+    public abstract getDrawingSvg(): Promise<string>;
 
 }
 

drawingpad.android.ts

@@ -71,12 +71,15 @@ export class DrawingPad extends DrawingPadBase {
         })
     }
 
-    public getDrawingSvg(): Promise<any> {
+    public getDrawingSvg(): Promise<string> {
         return new Promise((resolve, reject) => {
             try {
                 if (!this.nativeView.isEmpty()) {
-                    let data = this.nativeView.getSignatureSvg();
-                    resolve(data);
+                    let data: string = this.nativeView.getSignatureSvg();
+
+                    // Append viewbox to the svg for correct scaling
+                    const svgHeaderRegEx = /<svg (.*) height="(\d+)" width="(\d+)"(.*)>/i
+                    resolve(data.replace(svgHeaderRegEx, `<svg $1 viewBox="0, 0, $3, $2" height="$2" width="$3"$4>`));
                 } else {
                     reject("DrawingPad is empty.");
                 }

drawingpad.ios.ts

@@ -59,6 +59,22 @@ export class DrawingPad extends DrawingPadBase {
         })
     }
 
+    public getDrawingSvg(): Promise<string> {
+        return new Promise((resolve, reject) => {
+            try {
+                let isSigned = this.nativeView.isSigned();
+                if (isSigned === true) {
+                    let data = this.nativeView.signatureSvg();
+                    resolve(data);
+                } else {
+                    reject("DrawingPad is empty.");
+                }
+            } catch (err) {
+                reject(err);
+            }
+        })
+    }
+
     public clearDrawing(): void {
         try {
             if (this.backgroundColor) {

index.d.ts

@@ -24,9 +24,9 @@ export class DrawingPad extends View {
     getTransparentDrawing(): Promise<any>;
 
     /**
-     * Returns a Scalable Vector Graphics document *** ANDROID ONLY ***
+     * Returns a Scalable Vector Graphics document
      */
-    getDrawingSvg(): Promise<any>;
+    getDrawingSvg(): Promise<string>;
 
     /**
      * Clears the drawing from the DrawingPad.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-drawingpad",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "main": "drawingpad",
   "typings": "index.d.ts",
   "description": "A NativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device screen.",

platforms/ios/Podfile

@@ -1 +1 @@
-pod 'SignatureView', '~> 1.1'
+pod 'SignatureView', :git => 'https://github.com/PeterStaev/SignatureView.git', :branch => 'svg-support'