Resetowanie się właściwości Top i Left komponentu po wyjściu myszką z <div>

0

Cześć,
mam prosty component Window napisany w blazor, którego celem jest utworzenie div-a o zadanych stylach css (głównie rozmiar i położenie). Po kliknięciu w tego div-a myszką można go przesunąć (zmienić właściwość Top i Left).
Gdy utworzę jeden taki komponent to jest wszystko ok (mogę go przesuwać bez problemów).
Gdy utworzę drugi komponent wewnątrz tego pierwszego to również jest jeszcze ok.
Gdy utworzyłem trzeci komponent w tym drugim to mogę przesunąć utworzonego div-a, ale jak przesunę myszką i wyjdę poza obszar tego div-a to div wraca na swoje pierwotne położenie (resetuje się właściwość Top i Left). Taki problem jest tylko z tym trzecim div-em (pozostałe działają prawidłowo - nie resetują się).
Gdy w tym trzecim componencie dodałem jeszcze komentarze (dwa akapity) to drugi component również zaczął zachowywać się analogicznie tj. po przesunięciu w inne miejsce i wyjściu myszą poza obszar tego div-a element wraca na swoje pierwotne położenie...
Problem dotyczy chyba tylko położenia - Top i Left, bo np. właściwość border nie jest przywracana (gdy zaimplementowałem np. zwiększenie borderu o 2 po kliknięciu w div-a to po resecie Top i Left obramowanie zostanie pogrubione).
Czy orientuje się ktoś co może być tego przyczyną?
Poniżej mój kod:

Component Window:


<div 
	@onmouseup=@(() => OnMouseUp())
	@onmousemove=@(e => OnMouseMove(e))
	@onmousedown=@(e => OnMouseDown(e))
	@onclick=@(() => OnClick())
	@onmouseleave=@(() => OnMouseOut())
	
	@onclick:stopPropagation=true
	@onmousemove:stopPropagation=true
	@onmousedown:stopPropagation=true
	@onmouseup:stopPropagation=true

	style="position: absolute;
			border: solid @(border_size)px;
			width: @(Width)px;
			height: @(Height)px; 
			top: @(Top)px; 
			left: @(Left)px; 
			background-color: @(BackgroundColor);">
		
	@ChildContent

</div>




@code {

	bool IsFocused = false;

	void OnClick()
		{
		}

	public void OnMouseMove(MouseEventArgs e)
		{
		if(IsFocused)
			{
			Top += (int)e.MovementY;
			Left += (int)e.MovementX;
			}
		}

	public void OnMouseOut()
		{
		IsFocused = false;
		Align();
		}

	public void OnMouseDown(MouseEventArgs e)
		{
		IsFocused = true;
		}

	public void OnMouseUp()
		{
		IsFocused = false;
		Align();
		}

	void Align()
		{
		if(Top % 10 != 0)
			{
			Top += 5;
			Top /= 10;
			Top *= 10;
			}

		if(Left % 10 != 0)
			{
			Left += 5;
			Left /= 10;
			Left *= 10;
			}
		}

	[Parameter]
	public RenderFragment? ChildContent { get; set; }

	[Parameter]
	public int Width { get; set; } = 1000;

	[Parameter]
	public int Height { get; set; } = 1000;

	[Parameter]
	public int Top { get; set; } = 100;

	[Parameter]
	public int Left { get; set; } = 100;

	[Parameter]
	public string BackgroundColor { get; set; } = "teal";

	public int border_size = 3;
}

Strona główna:

@page "/"

<h1>Hello, world!</h1>

<Window>
	<Window Width="700"
			Height="500"
			Top="40"
			Left="50"
			BackgroundColor="pink">

		<Window Width="300"
				Height="200"
				Top="40"
				Left="50"
				BackgroundColor="yellow">

			<p>Dodanie tego okna powoduje, że jak przesuwam okno różowe i wyjdę myszką poza obszar różowego okna to okno różowe wraca na swoje pierwotne miejsce (właściwości top i left się resetują)...</p>
			<p>Dodanie powyższego tekstu sprawiło, że to okno (żółte) również zachowuje się w analogiczny sposób tj. można je przesuwać, ale jak wyjdziemy myszką poza obszar tego okna to wraca ono na swoje pierwotne miejsce...</p>

		</Window>
	</Window>
</Window>

0

A wywala jakiś exception?
Chyba chcesz wyjść poza granice wszechświata.

0

Nie, błędu (exception-u) nie ma.

1

To chyba dlatego, że jak przesuwasz myszą to zmieniasz parametry Top i Left (one przechowują stan obiektu). A jak wyjdziesz myszą to drzewo komponentów się renderuje i przyjmują się Top i Left z definicji w Index.razor.

Dodaj lokalne zmienne w kmponencie, które przechowają stan nawet po pzrebydowaniu komponentów (u mnie localTop i localLeft). Użyj ich do pozycjonowania.
style w komponencie

style="position: absolute;
			border: solid @(border_size)px;
			width: @(Width)px;
			height: @(Height)px;
			top: @(localTop)px;
			left: @(localLeft)px;
			background-color: @(BackgroundColor);">

W code {}

int localTop = 0;
	int localLeft = 0;

	protected override void OnParametersSet()
	{
		base.OnParametersSet();
		if (localLeft == 0)
		{
			localLeft = Left;
		}
		if (localTop == 0)
		{
			localTop = Top;
		}
		
	}
	bool IsFocused = false;

	void OnClick()
	{
	}

	public void OnMouseMove(MouseEventArgs e)
	{
		if (IsFocused)
		{
			localTop += (int)e.MovementY;
			localLeft += (int)e.MovementX;
		}
	}
0

@jacek.placek dzięki - działa!! :-)

1 użytkowników online, w tym zalogowanych: 0, gości: 1