[feature][datazoom] 增加DataZoom的MarqueeStyle支持框选区域

Runtime/Component/DataZoom/DataZoom.cs

@@ -90,6 +90,7 @@ namespace XCharts.Runtime
         [SerializeField] private LabelStyle m_LabelStyle = new LabelStyle();
         [SerializeField] private LineStyle m_LineStyle = new LineStyle(LineStyle.Type.Solid);
         [SerializeField] private AreaStyle m_AreaStyle = new AreaStyle();
+        [SerializeField][Since("v3.5.0")] private MarqueeStyle m_MarqueeStyle = new MarqueeStyle();
 
         public DataZoomContext context = new DataZoomContext();
 
@@ -141,7 +142,8 @@ namespace XCharts.Runtime
             set { if (PropertyUtil.SetStruct(ref m_SupportInside, value)) SetVerticesDirty(); }
         }
         /// <summary>
-        /// 是否支持坐标系内滚动
+        /// Whether inside scrolling is supported.
+        /// |是否支持坐标系内滚动
         /// </summary>
         public bool supportInsideScroll
         {
@@ -149,7 +151,8 @@ namespace XCharts.Runtime
             set { if (PropertyUtil.SetStruct(ref m_SupportInsideScroll, value)) SetVerticesDirty(); }
         }
         /// <summary>
-        /// 是否支持坐标系内拖拽
+        /// Whether insde drag is supported.
+        /// |是否支持坐标系内拖拽
         /// </summary>
         public bool supportInsideDrag
         {
@@ -363,6 +366,14 @@ namespace XCharts.Runtime
             get { return m_AreaStyle; }
             set { if (PropertyUtil.SetClass(ref m_AreaStyle, value)) SetComponentDirty(); }
         }
+        /// <summary>
+        /// 选取框样式。
+        /// </summary>
+        public MarqueeStyle marqueeStyle
+        {
+            get { return m_MarqueeStyle; }
+            set { if (PropertyUtil.SetClass(ref m_MarqueeStyle, value)) SetAllDirty(); }
+        }
 
         class AxisIndexValueInfo
         {
@@ -414,6 +425,7 @@ namespace XCharts.Runtime
                 show = true,
                 opacity = 0.3f
             };
+            m_MarqueeStyle = new MarqueeStyle();
         }
 
         /// <summary>
@@ -515,6 +527,17 @@ namespace XCharts.Runtime
             }
         }
 
+        public bool IsInMarqueeArea(SerieData serieData)
+        {
+            return IsInMarqueeArea(serieData.context.position);
+        }
+
+        public bool IsInMarqueeArea(Vector2 pos)
+        {
+            if (!supportSelect) return false;
+            return context.marqueeRect.Contains(pos);
+        }
+
         public bool IsContainsAxis(Axis axis)
         {
             if (axis == null)

Runtime/Component/DataZoom/DataZoomContext.cs

@@ -22,5 +22,10 @@ namespace XCharts.Runtime
         /// </summary>
         public double endValue { get; set; }
         public bool invert { get; set; }
+
+        public bool isMarqueeDrag { get; set; }
+        public Vector3 marqueeStartPos { get; set; }
+        public Vector3 marqueeEndPos { get; set; }
+        public Rect marqueeRect { get; set; }
     }
 }

Runtime/Component/DataZoom/DataZoomHandler.cs

@@ -72,9 +72,11 @@ namespace XCharts.Runtime
             {
                 case Orient.Horizonal:
                     DrawHorizonalDataZoomSlider(vh, dataZoom);
+                    DrawMarquee(vh, dataZoom);
                     break;
                 case Orient.Vertical:
                     DrawVerticalDataZoomSlider(vh, dataZoom);
+                    DrawMarquee(vh, dataZoom);
                     break;
             }
         }
@@ -87,14 +89,14 @@ namespace XCharts.Runtime
             if (Input.touchCount > 1)
                 return;
 
-            Vector2 pos;
-            if (!chart.ScreenPointToChartPoint(eventData.position, out pos))
-                return;
-
             var dataZoom = component;
             if (!dataZoom.enable)
                 return;
 
+            Vector2 pos;
+            if (!chart.ScreenPointToChartPoint(eventData.position, out pos))
+                return;
+
             var grid = chart.GetGridOfDataZoom(dataZoom);
             if (dataZoom.supportInside && dataZoom.supportInsideDrag)
             {
@@ -103,6 +105,23 @@ namespace XCharts.Runtime
                     dataZoom.context.isCoordinateDrag = true;
                 }
             }
+            if (dataZoom.supportSelect)
+            {
+                dataZoom.context.isMarqueeDrag = true;
+                dataZoom.context.marqueeStartPos = pos;
+                dataZoom.context.marqueeEndPos = pos;
+
+                if (dataZoom.marqueeStyle.realRect)
+                    dataZoom.context.marqueeRect = new Rect(pos.x, pos.y, 0, 0);
+                else
+                    dataZoom.context.marqueeRect = new Rect(pos.x, grid.context.y, 0, grid.context.height);
+
+                if (dataZoom.marqueeStyle.onStart != null)
+                {
+                    dataZoom.marqueeStyle.onStart(dataZoom);
+                }
+                return;
+            }
             if (dataZoom.supportSlider)
             {
                 if (!dataZoom.zoomLock)
@@ -136,18 +155,40 @@ namespace XCharts.Runtime
 
             var dataZoom = component;
             var grid = chart.GetGridOfDataZoom(dataZoom);
-            switch (dataZoom.orient)
+            if (dataZoom.supportSelect)
             {
-                case Orient.Horizonal:
-                    var deltaPercent = eventData.delta.x / grid.context.width * 100;
-                    OnDragInside(dataZoom, deltaPercent);
-                    OnDragSlider(dataZoom, deltaPercent);
-                    break;
-                case Orient.Vertical:
-                    deltaPercent = eventData.delta.y / grid.context.height * 100;
-                    OnDragInside(dataZoom, deltaPercent);
-                    OnDragSlider(dataZoom, deltaPercent);
-                    break;
+                Vector2 pos;
+                if (!chart.ScreenPointToChartPoint(eventData.position, out pos))
+                    return;
+
+                dataZoom.context.marqueeEndPos = pos;
+                var oldRect = dataZoom.context.marqueeRect;
+                var rectWidth = pos.x - dataZoom.context.marqueeStartPos.x;
+                if (dataZoom.marqueeStyle.realRect)
+                    dataZoom.context.marqueeRect = Rect.MinMaxRect(dataZoom.context.marqueeStartPos.x, pos.y, pos.x, dataZoom.context.marqueeStartPos.y);
+                else
+                    dataZoom.context.marqueeRect = new Rect(oldRect.x, oldRect.y, rectWidth, oldRect.height);
+
+                dataZoom.SetVerticesDirty();
+                if (dataZoom.marqueeStyle.onGoing != null)
+                    dataZoom.marqueeStyle.onGoing(dataZoom);
+                return;
+            }
+            else
+            {
+                switch (dataZoom.orient)
+                {
+                    case Orient.Horizonal:
+                        var deltaPercent = eventData.delta.x / grid.context.width * 100;
+                        OnDragInside(dataZoom, deltaPercent);
+                        OnDragSlider(dataZoom, deltaPercent);
+                        break;
+                    case Orient.Vertical:
+                        deltaPercent = eventData.delta.y / grid.context.height * 100;
+                        OnDragInside(dataZoom, deltaPercent);
+                        OnDragSlider(dataZoom, deltaPercent);
+                        break;
+                }
             }
         }
 
@@ -157,6 +198,23 @@ namespace XCharts.Runtime
                 return;
 
             var dataZoom = component;
+
+            if (dataZoom.supportSelect)
+            {
+                dataZoom.context.isMarqueeDrag = false;
+                if (dataZoom.marqueeStyle.apply)
+                {
+                    var grid = chart.GetGridOfDataZoom(dataZoom);
+                    var start = (dataZoom.context.marqueeRect.x - grid.context.x) / grid.context.width * 100;
+                    var end = (dataZoom.context.marqueeRect.x - grid.context.x + dataZoom.context.marqueeRect.width) / grid.context.width * 100;
+                    UpdateDataZoomRange(dataZoom, start, end);
+                }
+                if (dataZoom.marqueeStyle.onEnd != null)
+                {
+                    dataZoom.marqueeStyle.onEnd(dataZoom);
+                }
+                return;
+            }
             if (dataZoom.context.isDrag || dataZoom.context.isStartDrag || dataZoom.context.isEndDrag ||
                 dataZoom.context.isCoordinateDrag)
             {
@@ -208,6 +266,7 @@ namespace XCharts.Runtime
                 UpdateDataZoomRange(dataZoom, start, end);
             }
         }
+
         public override void OnScroll(PointerEventData eventData)
         {
             if (chart == null)
@@ -215,14 +274,14 @@ namespace XCharts.Runtime
             if (Input.touchCount > 1)
                 return;
 
-            Vector2 pos;
-            if (!chart.ScreenPointToChartPoint(eventData.position, out pos))
-                return;
-
             var dataZoom = component;
             if (!dataZoom.enable || dataZoom.zoomLock)
                 return;
 
+            Vector2 pos;
+            if (!chart.ScreenPointToChartPoint(eventData.position, out pos))
+                return;
+
             var grid = chart.GetGridOfDataZoom(dataZoom);
             if ((dataZoom.supportInside && dataZoom.supportInsideScroll && grid.Contains(pos)) ||
                 dataZoom.IsInZoom(pos))
@@ -614,5 +673,13 @@ namespace XCharts.Runtime
                     break;
             }
         }
+
+        private void DrawMarquee(VertexHelper vh, DataZoom dataZoom)
+        {
+            if (!dataZoom.enable || !dataZoom.supportSelect)
+                return;
+            var areaColor = dataZoom.marqueeStyle.areaStyle.GetColor(chart.theme.dataZoom.dataAreaColor);
+            UGL.DrawRectangle(vh, dataZoom.context.marqueeRect, areaColor);
+        }
     }
 }