ui: remake demux component as a trapezium

src/ViewModels/Main/Canvas/CircuitObjects/Components/DemultiplexerViewModel.cs

@@ -5,7 +5,6 @@
 using CommunityToolkit.Mvvm.ComponentModel;
 using IRis.Models.CircuitObjects.Components;
 using IRis.Models.Core;
-using IRis.Services;
 using IRis.ViewModels.Main.Canvas.Core;
 
 namespace IRis.ViewModels.Main.Canvas.CircuitObjects.Components;
@@ -131,12 +130,15 @@ public override void UpdateTerminals()
 
         for (int i = 0; i < Selects.Count; i++)
         {
-            double unrotatedX = X + ((i + 0.5) * (Width / Selects.Count));
-            double unrotatedY = Y + Height + 10;
+            // DISCLAIMER: this calculation for placing the select lines on the
+            // bottom of the trapezium was done by Cursor Grok 4.5
+            // it works, so we keep it.
+
+            double u = (i + 0.5) / Selects.Count;
 
             Point selectPos = _simulationService.RotateTerminalPosition(
-                unrotatedX,
-                unrotatedY,
+                X + (u * Width),
+                Y + (Height * (0.8 + (0.2 * u))),
                 Rotation,
                 Width,
                 Height,

src/Views/Main/Canvas/CircuitObjects/Components/DemultiplexerView.axaml

@@ -5,25 +5,22 @@
   x:DataType="vm:DemultiplexerViewModel"
   x:Class="IRis.Views.Main.Canvas.CircuitObjects.Components.DemultiplexerView"
   xmlns:core="using:IRis.Views.Main.Canvas.Core"
+  xmlns:corevm="using:IRis.ViewModels.Main.Canvas.Core"
+  xmlns:components="using:IRis.Views.Main.Canvas.CircuitObjects.Components"
   ClipToBounds="False"
 >
   <Grid ClipToBounds="False">
-    <Rectangle Margin="-20,-5,-20,-20" Fill="Transparent" />
+    <Rectangle Margin="-20,-5,-20,-5" Fill="Transparent" />
 
-    <Border
+    <Path
       Width="{Binding Width}"
       Height="{Binding Height}"
-      Background="{DynamicResource ComponentFillBrush}"
-      BorderBrush="{DynamicResource ComponentBorderBrush}"
-      BorderThickness="2"
-      CornerRadius="2"
-    >
-      <Grid>
-        <Grid.RenderTransform>
-          <RotateTransform Angle="{Binding TextRotation}" />
-        </Grid.RenderTransform>
-      </Grid>
-    </Border>
+      Fill="{DynamicResource ComponentFillBrush}"
+      Stroke="{DynamicResource ComponentBorderBrush}"
+      StrokeThickness="2"
+      Stretch="Fill"
+      Data="M 0,20 L 100,0 L 100,100 L 0,80 Z"
+    />
 
     <Grid ClipToBounds="False">
       <Line
@@ -71,43 +68,43 @@
       </ItemsControl.ItemTemplate>
     </ItemsControl>
 
-    <ItemsControl
-      ItemsSource="{Binding Selects}"
-      ClipToBounds="False"
-      HorizontalAlignment="Stretch"
-      VerticalAlignment="Bottom"
-    >
+    <ItemsControl ItemsSource="{Binding Selects}" ClipToBounds="False">
       <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
-          <UniformGrid Rows="1" />
+          <Canvas ClipToBounds="False" />
         </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
+
+      <!-- DISCLAIMER: this section is AI-generated -->
+      <!-- it involves relative.absolute positioning, DO NOT REMOVE -->
+      <ItemsControl.Styles>
+        <Style Selector="ContentPresenter" x:DataType="corevm:TerminalViewModel">
+          <Setter Property="Canvas.Left">
+            <MultiBinding Converter="{x:Static components:DemultiplexerView.CanvasOffset}">
+              <Binding Path="X" />
+              <Binding Path="$parent[UserControl].((vm:DemultiplexerViewModel)DataContext).X" />
+            </MultiBinding>
+          </Setter>
+          <Setter Property="Canvas.Top">
+            <MultiBinding Converter="{x:Static components:DemultiplexerView.CanvasOffset}">
+              <Binding Path="Y" />
+              <Binding Path="$parent[UserControl].((vm:DemultiplexerViewModel)DataContext).Y" />
+            </MultiBinding>
+          </Setter>
+        </Style>
+      </ItemsControl.Styles>
+
       <ItemsControl.ItemTemplate>
-        <DataTemplate>
-          <Grid ClipToBounds="False">
-            <Line
-              StartPoint="0,0"
-              EndPoint="0,10"
-              Stroke="{DynamicResource ComponentBorderBrush}"
-              StrokeThickness="2"
-              HorizontalAlignment="Center"
-              VerticalAlignment="Bottom"
-              Margin="0,0,0,-10"
-            />
-            <core:TerminalView
-              HorizontalAlignment="Center"
-              VerticalAlignment="Bottom"
-              Margin="0,0,0,-20"
-            />
-          </Grid>
+        <DataTemplate x:DataType="corevm:TerminalViewModel">
+          <core:TerminalView />
         </DataTemplate>
       </ItemsControl.ItemTemplate>
     </ItemsControl>
 
     <Rectangle
       Stroke="DodgerBlue"
       StrokeThickness="1"
-      Margin="-20,-5,-20,-20"
+      Margin="-20,-5,-20,-5"
       IsHitTestVisible="False"
       Opacity="{Binding SelectionOpacity}"
     >

src/Views/Main/Canvas/CircuitObjects/Components/DemultiplexerView.axaml.cs

@@ -1,11 +1,35 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
 using Avalonia.Controls;
+using Avalonia.Data.Converters;
 
 namespace IRis.Views.Main.Canvas.CircuitObjects.Components;
 
 public partial class DemultiplexerView : UserControl
 {
+    public static readonly IMultiValueConverter CanvasOffset = new SelectCanvasOffsetConverter();
+
     public DemultiplexerView()
     {
         InitializeComponent();
     }
+
+    // DISCLAIMER: this is AI-generated, binds in the axaml
+    private sealed class SelectCanvasOffsetConverter : IMultiValueConverter
+    {
+        public object? Convert(
+            IList<object?> values,
+            Type targetType,
+            object? parameter,
+            CultureInfo culture
+        )
+        {
+            if (values.Count < 2 || values.Any(v => v is not double))
+                return 0.0;
+
+            return (double)values[0]! - (double)values[1]! - 5;
+        }
+    }
 }

src/Views/Main/Canvas/CircuitObjects/Components/MultiplexerView.axaml.cs

@@ -16,6 +16,7 @@ public MultiplexerView()
         InitializeComponent();
     }
 
+    // DISCLAIMER: this is AI-generated, binds in the axaml
     private sealed class SelectCanvasOffsetConverter : IMultiValueConverter
     {
         public object? Convert(

src/Views/Main/LeftSidebarView.axaml

@@ -321,25 +321,15 @@
         Data="M 0,0 L 100,20 L 100,80 L 0,100 Z"
       />
     </Grid>
-    <Border
-      x:Key="SampleDemux"
-      Width="16"
-      Height="20"
-      Background="{DynamicResource ComponentFillBrush}"
-      BorderBrush="{DynamicResource ComponentBorderBrush}"
-      BorderThickness="2"
-      CornerRadius="2"
-    >
-      <TextBlock
-        Text="D"
-        Foreground="{DynamicResource ComponentBorderBrush}"
-        HorizontalAlignment="Center"
-        VerticalAlignment="Center"
-        FontSize="9"
-        FontWeight="ExtraBold"
-        Margin="1,0,0,0"
+    <Grid x:Key="SampleDemux" Width="16" Height="20">
+      <Path
+        Fill="{DynamicResource ComponentFillBrush}"
+        Stroke="{DynamicResource ComponentBorderBrush}"
+        StrokeThickness="2"
+        Stretch="Fill"
+        Data="M 0,20 L 100,0 L 100,100 L 0,80 Z"
       />
-    </Border>
+    </Grid>
     <Border
       x:Key="SampleDecoder"
       Width="16"