fix: svg display issues

Author: triniwiz

CanvasNative.podspec

@@ -2,7 +2,7 @@ Pod::Spec.new do |s|
 
     s.name         = "CanvasNative"
 
-    s.version      = "1.0.0-alpha.0"
+    s.version      = "1.0.0-alpha.1"
 
     s.summary      = "A Canvas library"
 

packages/canvas/SVG/SVG.ts

@@ -135,6 +135,7 @@ export class Svg extends View {
 	__redraw() {
 		if (this.__attachedToDom) {
 			const domCopy = this._dom.valueOf();
+			const serialized = this._serializer.serializeToString(domCopy);
 			const width = domCopy.documentElement.getAttribute('width');
 			const height = domCopy.documentElement.getAttribute('height');
 			if (width === 'auto') {
@@ -143,15 +144,23 @@ export class Svg extends View {
 			if (height === 'auto') {
 				domCopy.documentElement.setAttribute('height', `${this.getMeasuredHeight()}px`);
 			}
-			const serialized = this._serializer.serializeToString(domCopy);
 			if (serialized !== initialSVG) {
 				this.src = serialized;
 			}
 		}
 	}
 
-	createNativeView(): Object {
+	onLoaded() {
+		super.onLoaded();
 		this.__attachedToDom = true;
+	}
+
+	onUnloaded() {
+		this.__attachedToDom = false;
+		super.onUnloaded();
+	}
+
+	createNativeView(): Object {
 		return this._svg;
 	}
 

packages/canvas/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/canvas",
-	"version": "1.0.0-alpha.0",
+	"version": "1.0.0-alpha.1",
 	"description": "DOM Canvas API for NativeScript",
 	"main": "index",
 	"typings": "index.d.ts",
@@ -31,5 +31,9 @@
 	"license": "Apache-2.0",
 	"homepage": "https://github.com/NativeScript/canvas",
 	"readmeFilename": "README.md",
-	"bootstrapper": "@nativescript/plugin-seed"
+	"bootstrapper": "@nativescript/plugin-seed",
+	"dependencies": {
+		"xmldom": "~0.6.0",
+		"@nativescript-community/gesturehandler": "0.1.45"
+	}
 }

packages/canvas/platforms/android/include.gradle

@@ -6,5 +6,5 @@ allprojects {
 }
 
 dependencies {
-   implementation 'org.nativescript:canvas:1.0.0-alpha.0'
+   implementation 'org.nativescript:canvas:1.0.0-alpha.1'
 }

packages/canvas/platforms/ios/Podfile

@@ -2,5 +2,5 @@ use_frameworks!
 platform :ios, '11.0'
 #pod 'CanvasNative' , '~> 1.0.0.alpha.0'
 #pod 'CanvasNative', :path => "$(SRCROOT)/../../../../../"
-pod 'CanvasNative', :git => 'https://github.com/NativeScript/canvas.git', :tag => '1.0.0-alpha.0'
+pod 'CanvasNative', :git => 'https://github.com/NativeScript/canvas.git', :tag => '1.0.0-alpha.1'
 

packages/canvas/src-native/canvas-android/.idea/compiler.xml

@@ -34,9 +34,9 @@ class MainActivity : AppCompatActivity() {
 	override fun onCreate(savedInstanceState: Bundle?) {
 		super.onCreate(savedInstanceState)
 		setContentView(R.layout.activity_main)
-		canvas = findViewById(R.id.canvasView)
+		//canvas = findViewById(R.id.canvasView)
 		svg = findViewById(R.id.svgView)
-		svg?.ignorePixelScaling = true
+		svg?.ignorePixelScaling = false
 //		findViewById<androidx.constraintlayout.widget.ConstraintLayout>(R.id.parent)
 //			.addView(canvas)
 

packages/canvas/src-native/canvas-android/.idea/deploymentTargetDropDown.xml

@@ -21,7 +21,7 @@ signing {
 
 group = "org.nativescript"
 archivesBaseName = "canvas"
-version = "1.0.0-alpha.0"
+version = "1.0.0-alpha.1"
 
 uploadArchives {
 	repositories {

packages/canvas/src-native/canvas-android/.idea/gradle.xml

@@ -60,8 +60,10 @@ class TNSSVG : View {
 			}
 		}
 
+	private var currentTask: java.util.concurrent.Future<*>? = null
 	private fun resize(w: Int, h: Int) {
-		executor.execute {
+		currentTask?.cancel(true)
+		currentTask = executor.submit {
 			val metrics = resources.displayMetrics
 			TNSCanvas.nativeResizeCustomSurface(
 				svgCanvas,
@@ -86,6 +88,7 @@ class TNSSVG : View {
 					}
 				}
 			}
+			currentTask = null
 		}
 	}
 
@@ -98,7 +101,8 @@ class TNSSVG : View {
 			bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
 
 			if (svgCanvas == 0L) {
-				executor.execute {
+				currentTask?.cancel(true)
+				currentTask = executor.submit {
 					synchronized(lock) {
 						svgCanvas = TNSCanvas.nativeInitContextWithCustomSurface(
 							w.toFloat(),
@@ -126,6 +130,8 @@ class TNSSVG : View {
 							}
 
 						}
+
+						currentTask = null
 					}
 				}
 			} else {
@@ -144,12 +150,15 @@ class TNSSVG : View {
 		bitmap?.let {
 			synchronized(lock) {
 				if (svgCanvas != 0L) {
-					executor.execute {
+					currentTask?.cancel(true)
+					currentTask = executor.submit {
 						TNSCanvas.nativeCustomWithBitmapFlush(svgCanvas, it)
 						handler!!.post {
 							pendingInvalidate = false
 							invalidate()
 						}
+
+						currentTask = null
 					}
 				}
 			}
@@ -159,34 +168,32 @@ class TNSSVG : View {
 	private fun doDraw() {
 		synchronized(lock) {
 			if (svgCanvas != 0L) {
-				executor.execute {
+				currentTask?.cancel(true)
+				currentTask = executor.submit {
 					if (srcPath.isNotEmpty()) {
 						nativeDrawSVGFromPath(svgCanvas, srcPath)
 						bitmap?.let {
 							if (svgCanvas != 0L) {
-								executor.execute {
-									TNSCanvas.nativeCustomWithBitmapFlush(svgCanvas, it)
-									handler!!.post {
-										pendingInvalidate = false
-										invalidate()
-									}
+								TNSCanvas.nativeCustomWithBitmapFlush(svgCanvas, it)
+								handler!!.post {
+									pendingInvalidate = false
+									invalidate()
 								}
 							}
 						}
 					} else {
 						nativeDrawSVG(svgCanvas, src)
 						bitmap?.let {
 							if (svgCanvas != 0L) {
-								executor.execute {
-									TNSCanvas.nativeCustomWithBitmapFlush(svgCanvas, it)
-									handler!!.post {
-										pendingInvalidate = false
-										invalidate()
-									}
+								TNSCanvas.nativeCustomWithBitmapFlush(svgCanvas, it)
+								handler!!.post {
+									pendingInvalidate = false
+									invalidate()
 								}
 							}
 						}
 					}
+					currentTask = null
 				}
 			}
 		}

packages/canvas/src-native/canvas-android/.idea/misc.xml

@@ -27,7 +27,7 @@ class ViewController: UIViewController, TNSCanvasListener {
         svg = TNSSVG(frame: view.bounds)
         canvas1.addSubview(svg!)
         svg?.bringSubviewToFront(canvas1)
-        svg?.ignorePixelScaling = true
+        svg?.ignorePixelScaling = false
        // svg!.backgroundColor = .white
 //        svg?.src = """
 //<svg width="660" height="220" style="outline: 1px solid red">
@@ -160,7 +160,7 @@ class ViewController: UIViewController, TNSCanvasListener {
                 let start = CACurrentMediaTime()
                 print("Started", start)
                 let svg_file = NSURL(fileURLWithPath: NSTemporaryDirectory() + UUID().uuidString + "_svg_file.svg")
-                let svg_data = try Data(contentsOf: URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/tiger.svg")!)
+                let svg_data = try Data(contentsOf: URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/gallardo.svg")!)
                 try svg_data.write(to: svg_file.absoluteURL!, options: .atomicWrite)
                 let mid = CACurrentMediaTime()
                 print("Finished Downloading", mid , mid - start)

packages/canvas/src-native/canvas-android/.idea/runConfigurations.xml

@@ -6,29 +6,29 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-x86_64-simulator</string>
+			<string>ios-arm64</string>
 			<key>LibraryPath</key>
 			<string>CanvasNative.framework</string>
 			<key>SupportedArchitectures</key>
 			<array>
-				<string>x86_64</string>
+				<string>arm64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64</string>
+			<string>ios-x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>CanvasNative.framework</string>
 			<key>SupportedArchitectures</key>
 			<array>
-				<string>arm64</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>