feat add drag step

dist/zrender.js

@@ -812,6 +812,8 @@
             }
             if (draggingTarget) {
                 this._draggingTarget = draggingTarget;
+                this.targetX = draggingTarget.x;
+                this.downX = e.offsetX;
                 draggingTarget.dragging = true;
                 this._x = e.offsetX;
                 this._y = e.offsetY;
@@ -827,7 +829,20 @@
                 var dy = y - this._y;
                 this._x = x;
                 this._y = y;
-                draggingTarget.drift(dx, dy, e);
+                var draggableXStep = draggingTarget.draggableXStep, draggableXStepValve = draggingTarget.draggableXStepValve;
+                if (draggableXStep && draggableXStep !== 0) {
+                    var diffX = x - this.downX;
+                    var step = draggableXStep;
+                    var value = draggableXStepValve;
+                    var rem = diffX % step;
+                    var finaldX = diffX - rem + (rem < step - value ? 0 : step);
+                    draggingTarget.attr({
+                        x: this.targetX + finaldX
+                    });
+                }
+                else {
+                    draggingTarget.drift(dx, dy, e);
+                }
                 this.handler.dispatchToElement(new Param(draggingTarget, e), 'drag', e.event);
                 var dropTarget = this.handler.findHover(x, y, draggingTarget).target;
                 var lastDropTarget = this._dropTarget;
@@ -853,6 +868,8 @@
             }
             this._draggingTarget = null;
             this._dropTarget = null;
+            this.downX = null;
+            this.targetX = null;
         };
         return Draggable;
     }());
@@ -14648,6 +14665,10 @@
     }
     function bindStyle(svgEl, style, el) {
         var opacity = style.opacity == null ? 1 : style.opacity;
+        if (el instanceof ZRImage) {
+            svgEl.style.opacity = opacity + '';
+            return;
+        }
         if (pathHasFill(style)) {
             var fill = style.fill;
             fill = fill === 'transparent' ? NONE : fill;
@@ -14849,6 +14870,7 @@
             attr(svgEl, 'height', dh + '');
             attr(svgEl, 'x', x + '');
             attr(svgEl, 'y', y + '');
+            bindStyle(svgEl, style, el);
             setTransform(svgEl, el.transform);
         }
     };

src/Element.ts

@@ -233,6 +233,10 @@ export interface ElementProps extends Partial<ElementEventHandlerProps> {
     ignore?: boolean
     isGroup?: boolean
     draggable?: boolean | 'horizontal' | 'vertical'
+    // drag step
+    draggableXStep?: number
+    // Drag offset
+    draggableXStepValve?:number
 
     silent?: boolean
 
@@ -296,7 +300,6 @@ interface Element<Props extends ElementProps = ElementProps> extends Transformab
 }
 
 class Element<Props extends ElementProps = ElementProps> {
-
     id: number = guid()
     /**
      * Element type
@@ -328,6 +331,15 @@ class Element<Props extends ElementProps = ElementProps> {
      */
     draggable: boolean | 'horizontal' | 'vertical'
 
+    /**
+    * drag step
+    */
+    draggableXStep?: number
+    /**
+     * Drag offset
+     */
+    draggableXStepValve?:number
+
     /**
      * Whether is it dragging.
      */

src/mixin/Draggable.ts

@@ -24,6 +24,12 @@ export default class Draggable {
     _x: number
     _y: number
 
+    // current target X
+    targetX:number
+
+    // current mousedown X
+    downX:number
+
     constructor(handler: Handler) {
         this.handler = handler;
 
@@ -50,6 +56,8 @@ export default class Draggable {
         }
         if (draggingTarget) {
             this._draggingTarget = draggingTarget;
+            this.targetX = draggingTarget.x
+            this.downX = e.offsetX
             draggingTarget.dragging = true;
             this._x = e.offsetX;
             this._y = e.offsetY;
@@ -71,8 +79,19 @@ export default class Draggable {
             const dy = y - this._y;
             this._x = x;
             this._y = y;
-
-            draggingTarget.drift(dx, dy, e);
+            const { draggableXStep,draggableXStepValve } = draggingTarget
+            if ( draggableXStep && draggableXStep!==0 ){
+                let diffX = x - this.downX
+                const step = draggableXStep
+                const value = draggableXStepValve
+                const rem = diffX % step
+                const finaldX =  diffX - rem + (rem < step - value ?0:step)
+                draggingTarget.attr({
+                    x:this.targetX+finaldX
+                })
+            }else{
+                draggingTarget.drift(dx, dy, e);
+            }
             this.handler.dispatchToElement(
                 new Param(draggingTarget, e), 'drag', e.event
             );
@@ -113,6 +132,8 @@ export default class Draggable {
 
         this._draggingTarget = null;
         this._dropTarget = null;
+        this.downX = null
+        this.targetX = null
     }
 
 }

test/drag_step.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>drag_step</title>
+    <script src="../dist/zrender.js"></script>
+
+</head>
+<body>
+    <div id="main" style="width:1000px;height:500px;"></div>
+    <script type="text/javascript">
+        const layer = zrender.init(document.querySelector('#main'))
+        var bar = new zrender.Rect({
+            draggable:'horizontal',
+            draggableXStep:30,
+            draggableXStepValve:15,
+            shape:{
+                x:0,
+                y:0,
+                width:60,
+                height:30
+            },
+            style:{
+                fill:'red'
+            }
+        })
+        layer.add(bar)
+    </script>
+</body>
+</html>