Save is now working.

Run button now sets scale and debug symbol.
Run button now displays preview image.

Progrart.Core/Graphics/Line.cs

@@ -2,20 +2,16 @@
 using Jint.Native;
 using Progrart.Core.JSExecution;
 using SkiaSharp;
+using System.Diagnostics;
 
 namespace Progrart.Core.Graphics
 {
 	public class Line : BaseElement
 	{
 		float Size;
-		float StartX;
-		float StartY;
-		float EndX;
-		float EndY;
-		float ColorR;
-		float ColorG;
-		float ColorB;
-		float ColorA;
+		SKPoint Start;
+		SKPoint End;
+		SKColorF Color;
 		SKShader? shader = null;
 		public override void SetupProperties(Engine engine)
 		{
@@ -48,15 +44,19 @@ namespace Progrart.Core.Graphics
 				{
 					if (__object.Get("Start") is JsObject Start)
 					{
-						StartX = (float)Start.Get("x").AsNumber();
-						StartY = (float)Start.Get("y").AsNumber();
+						this.Start = ProgrartConversion.ObtainSKPointFromJsObject(Start);
 					}
 				}
 				{
 					if (__object.Get("End") is JsObject End)
 					{
-						EndX = (float)End.Get("x").AsNumber();
-						EndY = (float)End.Get("y").AsNumber();
+						this.End = ProgrartConversion.ObtainSKPointFromJsObject(End);
+					}
+				}
+				{
+					if (__object.Get("Color") is JsObject Color)
+					{
+						this.Color = ProgrartConversion.ObtainSKColorFFromJsObject(Color);
 					}
 				}
 
@@ -67,17 +67,20 @@ namespace Progrart.Core.Graphics
 		public override void Render(RenderContext context)
 		{
 			base.Render(context);
+			LoadProperties();
+			SKPoint FinalStartPos = context.TranslatePoint(Start);
+			SKPoint FinalEndPos = context.TranslatePoint(End);
+			Trace.WriteLine($"Draw Line from {FinalStartPos} to {FinalEndPos} using {Color} with size of {Size}.");
 			context.DrawingCore.canvas.DrawLine(
-				context.TranslatePoint((float)StartX, (float)StartY),
-				context.TranslatePoint((float)EndX, (float)EndY),
+				FinalStartPos,
+				FinalEndPos,
 				new SKPaint()
 				{
-					ColorF = new SKColorF(ColorR, ColorG, ColorB, ColorA),
+					ColorF = Color,
 					StrokeWidth = Size,
 					Shader = shader
 				}
 			);
-
 		}
 	}
 }

Progrart.Core/Graphics/Rectangle.cs

@@ -0,0 +1,7 @@
+namespace Progrart.Core.Graphics
+{
+    public class Rectangle : BaseElement
+	{
+
+	}
+}

Progrart.Core/Graphics/VisualRoot.cs

@@ -5,6 +5,14 @@ namespace Progrart.Core.Graphics
 {
 	public class ImageRoot : BaseElement
 	{
+		public override void Render(RenderContext context)
+		{
+			base.Render(context);
+			foreach (var item in Children)
+			{
+				item.Render(context);
+			}
+		}
 	}
 	public class VisualRoot : BaseElement
 	{
@@ -18,11 +26,13 @@ namespace Progrart.Core.Graphics
 		{
 			context.canvas.Translate(tx, ty);
 			context.canvas.RotateDegrees(rotate, context.DrawingCore.Width / 2, context.DrawingCore.Height / 2);
-			context.canvas.Scale(scale, scale, context.DrawingCore.Width / 2, context.DrawingCore.Height / 2);
+			if (scale != 1)
+				context.canvas.Scale(scale, scale, context.DrawingCore.Width / 2, context.DrawingCore.Height / 2);
 		}
 		void Untransform(RenderContext context)
 		{
-			context.canvas.Scale(scale, scale, context.DrawingCore.Width / 2, context.DrawingCore.Height / 2);
+			if (scale != 1)
+				context.canvas.Scale(1 / scale, 1 / scale, context.DrawingCore.Width / 2, context.DrawingCore.Height / 2);
 			context.canvas.RotateDegrees(rotate, context.DrawingCore.Width / 2, context.DrawingCore.Height / 2);
 			context.canvas.Translate(-tx, -ty);
 		}
@@ -41,7 +51,7 @@ namespace Progrart.Core.Graphics
 				scale = (float)__object.Get("scale").AsNumber();
 			}
 			{
-				scale = (float)__object.Get("rotation").AsNumber();
+				rotate = (float)__object.Get("rotation").AsNumber();
 			}
 			w = (float)__object.Get("width").AsNumber();
 			h = (float)__object.Get("height").AsNumber();