Improved moving elements in visual composer

src/base/src/AXOpen.VisualComposer/VisualComposerContainer.razor

@@ -2,7 +2,6 @@
 @using Microsoft.AspNetCore.Components.Forms;
 @using KristofferStrube.Blazor.SVGEditor
 
-
 <link href="_content/BlazorColorPicker/colorpicker.css" rel="stylesheet" />
 <link href="_content/Blazor.ContextMenu/blazorContextMenu.min.css" rel="stylesheet" />
 <link href="_content/AXOpen.KristofferStrube.Blazor.SVGEditor/kristofferStrubeBlazorSVGEditor.css" rel="stylesheet" />
@@ -82,24 +81,30 @@
                 }
                 else
                 {
-                    <ZoomableContainer Parent="this" Disable="!AllowZoomingAndPanning">
-                        <div id="@_backgroundId" style="width: 100%; height: @((BackgroundHeight / BackgroundWidth) * ElementSize.Width)px;">
-                            <svg width="100%" height="100%" viewBox="0 0 @(BackgroundWidth) @(BackgroundHeight)">@(new MarkupString(BackgroundSVGInput))</svg>
-                        </div>
-
-                        <CascadingValue Value="@this" Name="Parent" IsFixed="true">
-                            @foreach (VisualComposerItemData child in _children)
-                            {
-                                <VisualComposerItem InDesign="@InDesignMode" Origin="@child" />
-                            }
-                            @if (ImgSrc != null && ImgSrc != "")
-                            {
-                                <div style="position: absolute; left: 0; top: 0; width: 100%; z-index: -1;">
-                                    <img src="@ImgSrc" style="width: 100%; height: 100%;" />
+                    <div onpointermove="event.preventDefault()"
+                         onpointerleave="event.preventDefault()">
+                        <div @onpointermove="Move"
+                             @onpointerleave="Leave">
+                            <ZoomableContainer Parent="this" Disable="!AllowZoomingAndPanning">
+                                <div id="@_backgroundId" style="width: 100%; height: @((BackgroundHeight / BackgroundWidth) * ElementSize.Width)px;">
+                                    <svg width="100%" height="100%" viewBox="0 0 @(BackgroundWidth) @(BackgroundHeight)">@(new MarkupString(BackgroundSVGInput))</svg>
                                 </div>
-                            }
-                        </CascadingValue>
-                    </ZoomableContainer>
+
+                                <CascadingValue Value="@this" Name="Parent" IsFixed="true">
+                                    @foreach (VisualComposerItemData child in _children)
+                                    {
+                                        <VisualComposerItem InDesign="@InDesignMode" Origin="@child" />
+                                    }
+                                    @if (ImgSrc != null && ImgSrc != "")
+                                    {
+                                        <div style="position: absolute; left: 0; top: 0; width: 100%; z-index: -1;">
+                                            <img src="@ImgSrc" style="width: 100%; height: 100%;" />
+                                        </div>
+                                    }
+                                </CascadingValue>
+                            </ZoomableContainer>
+                        </div>
+                    </div>
                 }
 
                 <CascadingValue Value="@this" Name="Parent" IsFixed="true">

src/base/src/AXOpen.VisualComposer/VisualComposerContainer.razor.cs

@@ -563,5 +563,23 @@ public void Dispose()
         {
             _fileWriterBuffer.Dispose();
         }
+
+        private void Move(PointerEventArgs eventArgs)
+        {
+            foreach (var child in _children)
+            {
+                if(child.MoveEvent != null)
+                    child.MoveEvent.Invoke(this, eventArgs);
+            }
+        }
+
+        private void Leave(PointerEventArgs eventArgs)
+        {
+            foreach (var child in _children)
+            {
+                if(child.LeaveEvent != null)
+                    child.LeaveEvent.Invoke(this, eventArgs);
+            }
+        }
     }
 }

src/base/src/AXOpen.VisualComposer/VisualComposerItem.razor

@@ -2,15 +2,11 @@
     <Authorized>
         @if (InDesign)
         {
-            <div onpointermove="event.preventDefault()"
-                 onpointerdown="event.preventDefault()"
+            <div onpointerdown="event.preventDefault()"
                  onpointerup="event.preventDefault()"
-                 onpointerleave="event.preventDefault()"
                  onwheel="event.preventDefault()">
-                <div @onpointermove="MoveAsync"
-                     @onpointerdown="Down"
+                <div @onpointerdown="Down"
                      @onpointerup="Up"
-                     @onpointerleave="Out"
                      @onwheel="Wheel"
                      style="position: absolute; left: @(Origin.Left.ToString().Replace(',', '.'))%; top: @(Origin.Top.ToString().Replace(',', '.'))%; transform: scale(@(Origin.Scale)); translate: @(Origin.Transform.X)% @(Origin.Transform.Y)%; width: @(Origin.Width != -1 ? Origin.Width + "rem" : "max-content"); height: @(Origin.Height != -1 ? Origin.Height + "rem" : "max-content"); z-index: @Origin.ZIndex;">
                     <div class="@(Origin.Background ? "card border border-3 p-2 rounded-3" : null)" style="@(Origin.Background ? "background-color: " + @Origin.BackgroundColor + "; border-color: " + @Origin.BackgroundColor + " !important;" : null)">

src/base/src/AXOpen.VisualComposer/VisualComposerItem.razor.cs

@@ -27,6 +27,12 @@ public partial class VisualComposerItem
         private double _startX = 0;
         private double _startY = 0;
 
+        protected override void OnAfterRender(bool firstRender)
+        {
+            Origin!.MoveEvent = new EventHandler((sender, e) => MoveAsync((PointerEventArgs)e));
+            Origin!.LeaveEvent = new EventHandler((sender, e) => Leave((PointerEventArgs)e));
+        }
+
         private async Task MoveAsync(PointerEventArgs eventArgs)
         {
             if (_isDragging)
@@ -58,7 +64,7 @@ private void Up(PointerEventArgs eventArgs)
             _isDragging = false;
         }
 
-        private void Out(PointerEventArgs eventArgs)
+        private void Leave(PointerEventArgs eventArgs)
         {
             Parent._zoomableContainer.CanDragging = true;
             _isDragging = false;

src/base/src/AXOpen.VisualComposer/VisualComposerItemData.cs

@@ -14,6 +14,11 @@ public class VisualComposerItemData
         public EventCallback EventCallbackStateHasChanged { get; set; }
         public EventCallback EventCallbackSave { get; set; }
 
+
+        public EventHandler MoveEvent { get; set; }
+        public EventHandler LeaveEvent { get; set; }
+
+
         private ITwinElement? _twinElement;
         public ITwinElement? TwinElement
         {

src/base/src/AXOpen.VisualComposer/ZoomableContainer.razor

@@ -1,13 +1,13 @@
 <div onpointermove="event.preventDefault()"
      onpointerdown="event.preventDefault()"
      onpointerup="event.preventDefault()"
-     onpointerout="event.preventDefault()"
+     onpointerleave="event.preventDefault()"
      onwheel="event.preventDefault()"
      class="m-0 p-0">
     <div @onpointermove="MoveAsync"
          @onpointerdown="Down"
          @onpointerup="Up"
-         @onpointerout="Out"
+         @onpointerleave="Leave"
          @onwheel="WheelAsync"
          style="overflow: hidden; background-color: @(Parent.BackgroundColor);">
         <div style="position: relative; transform: scale(@(Parent!.Scale)) translate(@(Parent!.TranslateX.ToString().Replace(',', '.'))%, @(Parent!.TranslateY.ToString().Replace(',', '.'))%);">

src/base/src/AXOpen.VisualComposer/ZoomableContainer.razor.cs

@@ -77,7 +77,7 @@ private void Up(PointerEventArgs eventArgs)
             _isDragging = false;
         }
 
-        private void Out(PointerEventArgs eventArgs)
+        private void Leave(PointerEventArgs eventArgs)
         {
             _isDragging = false;
         }