Add support for dragging components inside scaled Div?

[myleschuahiock]

I was having exactly the same problem as this issue here:
#139

I was able to solve it by doing what STRML said by dividing (or multiplying) the deltaX and deltaY with the scale value and adding it as an offset.

    onDrag = (e, data) => {
        const { deltaX, deltaY } = data;

        const id = this.props.id;
        const top = this.props.top;
        const left = this.props.left;
        const widget = {
            id,
            top: top+(deltaY/0.5), //for Zoom Scale(0.5)
            left: left+(deltaX/0.5)
        };  

        this.props.onWidgetChange(id, widget);
    }

While this works, it creates a 'ghosting effect', in which the component is dragged without the scale values applied, before magically being set in place with the proper offset when one lets go of the mouse.

I found another alternative, although it's something one should never do, which is to modify a small snippet of the react-draggable.js.

    function createDraggableData(draggable /*: Draggable*/, coreData /*: DraggableData*/) /*: DraggableData*/ {
      return {
        node: coreData.node,
        x: draggable.state.x + coreData.deltaX/0.5, //<-ZoomScale prop here
        y: draggable.state.y + coreData.deltaY/0.5, //<-ZoomScale prop here
        deltaX: coreData.deltaX,
        deltaY: coreData.deltaY,
        lastX: draggable.state.x,
        lastY: draggable.state.y
      };
    }

Of course, this would introduce breaking changes to the app whenever the module is updated (LOL). But this removes (from my experience) the need for tracking the deltas as STRML said and it also removes the 'ghosting effect' since it directly alters the DraggableData itself.

I was wondering if someone can add support by making a ZoomScale available as component prop. 😄

[houshuang]

Have the same problem with SVG and viewBox.

[onyxcool]

Hi guys,

would you be kind to share the solution here? It's still unclear how to support dynamically changeable scale value.

Thank you

[STRML]

Fixed in #352