Add config flag to make Canvas not draggable

[rnvarma]

Hi @MrBlenny ! First off, this library is great and I appreciate the way it was design for extensibility and simplicity.

One thing is that, for my use case, I want to be able to prevent the canvas from being dragged with the mouse. Instead, users will scroll around in the canvas in my app. However, in the Canvas.wrapper.tsx file, the Draggable item is disabled only in the following case (Canvas.wrapper.tsx:91):

disabled={config.readonly}

However, I don't want to disable the entire application and make it readonly. I only want to make that specific draggable component disabled.

Would it be possible to add a flag to the config, such as canvasDragDisabled, defaulted to false, which can be set to true so that the above line could be changed to:

disabled={config.readonly || config.canvasDragDisabled}

Let me know what you think! It would be great to get this config option rather than needing to fork the repo and maintain a fork of this.

Thanks! Rohan

[eprice122]

@rnvarma I think I may have found a solution to what you were looking for since I had the same problem.

Check out the properties for zoom:

export interface IZoomConfig {
    transformEnabled?: boolean;
    minScale?: number;
    maxScale?: number;
    pan?: {
        disabled?: boolean;
        touchPadEnabled?: boolean;
    };
    wheel?: {
        disabled?: boolean;
        step?: number;
        wheelEnabled?: boolean;
        touchPadEnabled?: boolean;
    };
    zoomIn?: {
        disabled?: boolean;
        step?: number;
    };
    zoomOut?: {
        disabled?: boolean;
        step?: number;
    };
}

Disabling the panning seems to stop canvas transform

<FlowChartWithState 
  initialValue={chartSimple}
  config={{
    zoom: {
      pan: {disabled: true}
    }
  }}
/>

First time posting so I hope I'm doing this right!

[MrBlenny]

Yep, hopefully the above works. Closing for now.