protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
_canvas2DContext = await CanvasReference.CreateCanvas2DAsync();
_canvasBoundingClientRect = await JsRuntime.InvokeAsync <BoundingClientRect>("TodoIncJsInteropHelper.getBoundingClientRect", _canvasWrapperElement);
}
}
/// <summary>
/// This is a component life cycle event that's trigerred after the component is rendered
/// We use it to load additional javascript to get the bounding client rectangle for our component so that we can
/// calculate the offsets correctly while doing drag and drop operation for clock arms
/// </summary>
/// <param name="firstRender">True if the component is rendering for the first time; false otherwise</param>
/// <returns>An async task</returns>
protected override async Task OnAfterRenderAsync(bool firstRender)
{
//Import the js file
//Please note that the path of the js file specified here is generated at runtime by the project that will use this component library
IJSObjectReference jsModule = await JS.InvokeAsync <IJSObjectReference>("import", $"./_content/{Assembly.GetExecutingAssembly().GetName().Name}/TimePicker.razor.js");
//Let's now call our js function and store the bounding rectangle dimensions
_clockDimensions = await jsModule.InvokeAsync <BoundingClientRect>("GetBoundingClientRect", TimePickerRef);
//Call the base OnAfterRenderAsync
await base.OnAfterRenderAsync(firstRender);
}
public static bool IsEqualTo(this BoundingClientRect sourceRect, BoundingClientRect targetRect)
{
if (sourceRect is null || targetRect is null)
{
return(false);
}
return(sourceRect.Top == targetRect.Top &&
sourceRect.Left == targetRect.Left &&
sourceRect.Width == targetRect.Width &&
sourceRect.Height == targetRect.Height &&
sourceRect.WindowHeight == targetRect.WindowHeight &&
sourceRect.WindowWidth == targetRect.WindowWidth &&
sourceRect.ScrollX == targetRect.ScrollX &&
sourceRect.ScrollY == targetRect.ScrollY);
}
public void Detect_Boundaries()
{
var client = new BoundingClientRect();
client.Top = -10;
client.Left = -10;
client.Height = 100;
client.Width = 100;
client.ScrollX = 100;
client.ScrollY = 100;
client.WindowHeight = 1000;
client.WindowWidth = 1000;
client.IsOutsideBottom.Should().BeFalse();
client.IsOutsideTop.Should().BeTrue();
client.IsOutsideLeft.Should().BeTrue();
client.IsOutsideRight.Should().BeFalse();
}
public void CanvasSizeChanged(BoundingClientRect rect)
{
this.Box = rect;
}
