From 10645b3fb0c0a57bfb938c7c6a96ec865415caa4 Mon Sep 17 00:00:00 2001
From: Samuele Locatelli <samuele@steamware.net>
Date: Wed, 3 May 2023 09:50:03 +0200
Subject: [PATCH 1/2] Bozza componente StepArrow + TestPage

---
 .../Components/SvgComp/StepArrow.razor        |  7 +++
 .../Components/SvgComp/StepArrow.razor.cs     | 49 +++++++++++++++++++
 WebDoorCreator.UI/Pages/TestPage.razor        | 40 +++++++++++++++
 3 files changed, 96 insertions(+)
 create mode 100644 WebDoorCreator.UI/Components/SvgComp/StepArrow.razor
 create mode 100644 WebDoorCreator.UI/Components/SvgComp/StepArrow.razor.cs
 create mode 100644 WebDoorCreator.UI/Pages/TestPage.razor

diff --git a/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor
new file mode 100644
index 0000000..df6f21a
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor
@@ -0,0 +1,7 @@
+<svg width="@ObjW" height="@ObjH">
+    <rect width="@rectW" height="@rectH" style="@BlockStyle" transform="skewX(@step)" />
+    <g transform="translate(@step,@rectH)">
+        <rect width="@rectW" height="@rectH" style="@BlockStyle" transform="skewX(@(-step))" />
+    </g>
+    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="@TextStyle">@StepText</text>
+</svg>
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor.cs b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor.cs
new file mode 100644
index 0000000..aba9c11
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor.cs
@@ -0,0 +1,49 @@
+using Microsoft.AspNetCore.Components;
+
+namespace WebDoorCreator.UI.Components.SvgComp
+{
+    public partial class StepArrow
+    {
+        #region Public Properties
+
+        [Parameter]
+        public int ObjH { get; set; } = 100;
+
+        [Parameter]
+        public int ObjId { get; set; } = 0;
+
+        [Parameter]
+        public int ObjW { get; set; } = 500;
+
+        [Parameter]
+        public string StepText { get; set; } = "Arrow Stepped";
+
+        [Parameter]
+        public string TextStyle { get; set; } = "font-size: 2.5em; font-weight:bold; fill: white;";
+
+
+        [Parameter]
+        public string BlockStyle { get; set; } = "fill:rgb(0,0,255);stroke-width:0;stroke:rgb(0,0,0);";
+
+        #endregion Public Properties
+
+        #region Protected Properties
+
+        protected int rectH
+        {
+            get => ObjH / 2;
+        }
+
+        protected int rectW
+        {
+            get => ObjW - ObjH / 2;
+        }
+
+        protected int step
+        {
+            get => ObjH / 3;
+        }
+
+        #endregion Protected Properties
+    }
+}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Pages/TestPage.razor b/WebDoorCreator.UI/Pages/TestPage.razor
new file mode 100644
index 0000000..50570f8
--- /dev/null
+++ b/WebDoorCreator.UI/Pages/TestPage.razor
@@ -0,0 +1,40 @@
+@using WebDoorCreator.UI.Components.SvgComp
+@page "/TestPage"
+
+<h3>TestPage</h3>
+
+
+<div class="row">
+    @for (int i = 0; i < 6; i++)
+    {
+        stepText = $"Block_{idxObj:00}";
+        <div class="col-2">
+            <StepArrow ObjId="@idxObj" StepText="@stepText" BlockStyle="@blockStyle(idxObj)"></StepArrow>
+        </div>
+        idxObj++;
+    }
+</div>
+
+@code {
+    protected int idxObj { get; set; } = 1;
+    protected string stepText { get; set; } = "---";
+    protected string blockStyle(int idx)
+    {
+        string answ = "";
+        int resto = idx % 3;
+        switch (resto)
+        {
+            case 1:
+                answ = "fill:rgb(0,255,0);stroke-width:0;stroke:rgb(0,0,0);";
+                break;
+            case 2:
+                answ = "fill:rgb(0,0,255);stroke-width:0;stroke:rgb(0,0,0);";
+                break;
+            case 0:
+            default:
+                answ = "fill:rgb(255,0,0);stroke-width:0;stroke:rgb(0,0,0);";
+                break;
+        }
+        return answ;
+    }
+}

From 81dfe6be4ab6785f05e48121c9847e6af047ba20 Mon Sep 17 00:00:00 2001
From: Samuele Locatelli <samuele@steamware.net>
Date: Wed, 3 May 2023 09:57:00 +0200
Subject: [PATCH 2/2] Componente ArrowStep usabile

---
 .../Components/DoorMan/DoorSvgObj.razor            |  3 +--
 .../Components/SvgComp/StepArrow.razor             |  2 +-
 WebDoorCreator.UI/Pages/TestPage.razor             | 14 +++++++-------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/WebDoorCreator.UI/Components/DoorMan/DoorSvgObj.razor b/WebDoorCreator.UI/Components/DoorMan/DoorSvgObj.razor
index 69e22cb..028c110 100644
--- a/WebDoorCreator.UI/Components/DoorMan/DoorSvgObj.razor
+++ b/WebDoorCreator.UI/Components/DoorMan/DoorSvgObj.razor
@@ -1,5 +1,4 @@
-
-<svg viewBox="0 0 @ObjW @ObjH" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 @ObjW @ObjH" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
     <g transform="translate(0,@LineDist)">
         <text id="TitleElem" style="@TextStyle" x="0" y="0">@Text01</text>
         <text id="TitleElem" style="@TextStyle" x="0" y="@(1*LineDist)">@Text02</text>
diff --git a/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor
index df6f21a..8359332 100644
--- a/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor
+++ b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor
@@ -1,4 +1,4 @@
-<svg width="@ObjW" height="@ObjH">
+<svg viewBox="0 0 @ObjW @ObjH" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
     <rect width="@rectW" height="@rectH" style="@BlockStyle" transform="skewX(@step)" />
     <g transform="translate(@step,@rectH)">
         <rect width="@rectW" height="@rectH" style="@BlockStyle" transform="skewX(@(-step))" />
diff --git a/WebDoorCreator.UI/Pages/TestPage.razor b/WebDoorCreator.UI/Pages/TestPage.razor
index 50570f8..c37fffb 100644
--- a/WebDoorCreator.UI/Pages/TestPage.razor
+++ b/WebDoorCreator.UI/Pages/TestPage.razor
@@ -4,12 +4,12 @@
 <h3>TestPage</h3>
 
 
-<div class="row">
-    @for (int i = 0; i < 6; i++)
+<div class="row mx-2">
+    @for (int i = 0; i < 8; i++)
     {
         stepText = $"Block_{idxObj:00}";
-        <div class="col-2">
-            <StepArrow ObjId="@idxObj" StepText="@stepText" BlockStyle="@blockStyle(idxObj)"></StepArrow>
+        <div class="col px-0">
+            <StepArrow ObjId="@idxObj" StepText="@stepText" BlockStyle="@blockStyle(idxObj)" ObjW="500" ObjH="100"></StepArrow>
         </div>
         idxObj++;
     }
@@ -25,14 +25,14 @@
         switch (resto)
         {
             case 1:
-                answ = "fill:rgb(0,255,0);stroke-width:0;stroke:rgb(0,0,0);";
+                answ = "fill:rgb(0,255,0);";
                 break;
             case 2:
-                answ = "fill:rgb(0,0,255);stroke-width:0;stroke:rgb(0,0,0);";
+                answ = "fill:rgb(0,0,255);";
                 break;
             case 0:
             default:
-                answ = "fill:rgb(255,0,0);stroke-width:0;stroke:rgb(0,0,0);";
+                answ = "fill:rgb(255,0,0)";
                 break;
         }
         return answ;