Working WIP implementation

Author: oroztocil

src/Components/Components/src/RenderTree/RenderTreeDiffBuilder.cs

@@ -38,7 +38,7 @@ public static RenderTreeDiff ComputeDiff(
  }
 
  public static void DisposeFrames(RenderBatchBuilder batchBuilder, int componentId, ArrayRange<RenderTreeFrame> frames)
- => DisposeFramesInRange(batchBuilder, componentId, frames.Array, 0, frames.Count);
+ => DisposeFramesInRange(batchBuilder, componentId, frames.Array, 0, frames.Count, 0);
 
  private static void AppendDiffEntriesForRange(
  ref DiffContext diffContext,
@@ -867,7 +867,7 @@ private static void RemoveOldFrame(ref DiffContext diffContext, int oldFrameInde
  case RenderTreeFrameType.Element:
  {
  var endIndexExcl = oldFrameIndex + oldFrame.ElementSubtreeLengthField;
- DisposeFramesInRange(diffContext.BatchBuilder, diffContext.ComponentId, oldTree, oldFrameIndex, endIndexExcl);
+ DisposeFramesInRange(diffContext.BatchBuilder, diffContext.ComponentId, oldTree, oldFrameIndex, endIndexExcl, diffContext.SiblingIndex);
  diffContext.Edits.Append(RenderTreeEdit.RemoveFrame(diffContext.SiblingIndex));
  break;
  }
@@ -1013,7 +1013,7 @@ private static void InitializeNewNamedEvent(ref DiffContext diffContext, int new
  diffContext.BatchBuilder.AddNamedEvent(diffContext.ComponentId, newTreeFrameIndex, ref diffContext.NewTree[newTreeFrameIndex]);
  }
 
- private static void DisposeFramesInRange(RenderBatchBuilder batchBuilder, int componentId, RenderTreeFrame[] frames, int startIndex, int endIndexExcl)
+ private static void DisposeFramesInRange(RenderBatchBuilder batchBuilder, int componentId, RenderTreeFrame[] frames, int startIndex, int endIndexExcl, int siblingIndex)
  {
  for (var i = startIndex; i < endIndexExcl; i++)
  {
@@ -1022,9 +1022,16 @@ private static void DisposeFramesInRange(RenderBatchBuilder batchBuilder, int co
  {
  batchBuilder.ComponentDisposalQueue.Enqueue(frame.ComponentIdField);
  }
- else if (frame.FrameTypeField == RenderTreeFrameType.Attribute && frame.AttributeEventHandlerIdField > 0)
+ else if (frame.FrameTypeField == RenderTreeFrameType.Attribute)
  {
- batchBuilder.DisposedEventHandlerIds.Append(frame.AttributeEventHandlerIdField);
+ if (frame.AttributeEventHandlerIdField > 0)
+ {
+ batchBuilder.DisposedEventHandlerIds.Append(frame.AttributeEventHandlerIdField);
+ }
+ else if (frame.AttributeValueField is bool boolValue && boolValue && frame.AttributeNameField.StartsWith("__internal_", StringComparison.Ordinal))
+ {
+ batchBuilder.EditsBuffer.Append(RenderTreeEdit.RemoveAttribute(siblingIndex, frame.AttributeNameField));
+ }
  }
  else if (frame.FrameTypeField == RenderTreeFrameType.NamedEvent)
  {

src/Components/Samples/BlazorUnitedApp/Pages/Counter.razor

@@ -1,18 +1,60 @@
 @page "/counter"
 @rendermode InteractiveServer
+@inject IJSRuntime jsRuntime
+
+<style>
+ body {
+ height: 3000px;
+ }
+</style>
+
 <PageTitle>Counter</PageTitle>
 
 <h1>Counter</h1>
 
 <p role="status">Current count: @currentCount</p>
+<p>showElements: @showElements</p>
+<p>preventDefault: @preventDefault</p>
+
+@if (showElements)
+{
+ <div @onwheel:preventDefault="preventDefault" style="width: 600px; height: 200px; border: 1px solid black;">
+ Try scrolling here
+ </div>
+
+ <button class="btn btn-primary" @onclick="IncrementCount" @onmousedown:preventDefault="preventDefault">
+ Click me
+ </button>
+}
 
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+<p>
+ <button class="btn btn-secondary" @onclick="ToggleShow">
+ Toggle show
+ </button>
+ <button class="btn btn-secondary" @onclick="TogglePreventDefault">
+ Toggle preventDefault
+ </button>
+</p>
 
 @code {
  private int currentCount = 0;
+ private bool showElements = true;
+ private bool preventDefault = true;
 
  private void IncrementCount()
  {
  currentCount++;
  }
+
+ void ToggleShow()
+ {
+ showElements = !showElements;
+ StateHasChanged();
+ }
+
+ void TogglePreventDefault()
+ {
+ preventDefault = !preventDefault;
+ StateHasChanged();
+ }
 }

src/Components/Web.JS/src/Rendering/Events/EventDelegator.ts

@@ -121,6 +121,11 @@ export class EventDelegator {
  for (const handlerInfo of infosForElement.enumerateHandlers()) {
  this.eventInfoStore.remove(handlerInfo.eventHandlerId);
  }
+
+ for (const eventName of infosForElement.enumeratedEventNamesForEnabledFlags()) {
+ this.eventInfoStore.decrementCountByEventName(eventName);
+ }
+
  delete element[this.eventsCollectionKey];
  }
  }
@@ -136,11 +141,23 @@ export class EventDelegator {
  public setStopPropagation(element: Element, eventName: string, value: boolean): void {
  const infoForElement = this.getEventHandlerInfosForElement(element, true)!;
  infoForElement.stopPropagation(eventName, value);
+
+ if (value) {
+ this.eventInfoStore.addGlobalListener(eventName);
+ } else {
+ this.eventInfoStore.decrementCountByEventName(eventName);
+ }
  }
 
  public setPreventDefault(element: Element, eventName: string, value: boolean): void {
  const infoForElement = this.getEventHandlerInfosForElement(element, true)!;
  infoForElement.preventDefault(eventName, value);
+
+ if (value) {
+ this.eventInfoStore.addGlobalListener(eventName);
+ } else {
+ this.eventInfoStore.decrementCountByEventName(eventName);
+ }
  }
 
  private onGlobalEvent(evt: Event) {
@@ -298,16 +315,19 @@ class EventInfoStore {
 
  // If this event name is an alias, update the global listener for the corresponding browser event
  const eventName = getBrowserEventName(info.eventName);
-
- if (--this.countByEventName[eventName] === 0) {
- delete this.countByEventName[eventName];
- document.removeEventListener(eventName, this.globalListener);
- }
+ this.decrementCountByEventName(eventName);
  }
 
  return info;
  }
 
+ public decrementCountByEventName(eventName: string) {
+ if (--this.countByEventName[eventName] === 0) {
+ delete this.countByEventName[eventName];
+ document.removeEventListener(eventName, this.globalListener);
+ }
+ }
+
  private handleEventNameAliasAdded(aliasEventName, browserEventName) {
  // If an event name alias gets registered later, we need to update the global listener
  // registrations to match. This makes it equivalent to the alias having been registered
@@ -346,6 +366,20 @@ class EventHandlerInfosForElement {
  }
  }
 
+ public *enumeratedEventNamesForEnabledFlags(): IterableIterator<string> {
+ for (const eventName in this.preventDefaultFlags) {
+ if (this.preventDefaultFlags[eventName] === true) {
+ yield eventName;
+ }
+ }
+
+ for (const eventName in this.stopPropagationFlags) {
+ if (this.stopPropagationFlags[eventName] === true) {
+ yield eventName;
+ }
+ }
+ }
+
  public getHandler(eventName: string): EventHandlerInfo | null {
  return Object.prototype.hasOwnProperty.call(this.handlers, eventName) ? this.handlers[eventName] : null;
  }