Arrastrar desde la barra de herramientas puede estar desactivado (dragMode)

Aquí tienes una demostración funcional del número

Pasos para reproducirse:

1. Seleccionar un componente
2. Prueba a arrastrarlo desde la barra de herramientas

Puedes ver que inmediatamente el componente salta hacia la izquierda. Aunque funciona bien si intentas arrastrar el componente solo (y no usar la barra de herramientas).

Esto solo ocurre si Grapesjs se carga desde a con margen y no empieza desde 'x:0'

La razón por la que ocurre es esta:

En ambos casos de arrastrar desde la barra de herramientas o desde el propio componente, se llama al comando 'tlb-move'. 'tlb-move' acepta un argumento de 'evento' y la posición del elemento se calcula usando 'evento.clienteX'.

Cuando arrastras el componente, dado que el componente está dentro del iframe, su clientX es relevante para el documento y todo va bien.

Pero el botón de barra de herramientas no está en el lienzo o en iframe. Por lo tanto, un evento originado desde 'ToolbarButtonView' es relevante para la página, no para el lienzo.

Aquí tienes una descripción visual:

! Screenshot_20191104_023411

La solución ideal sería calcular clientX y clientY de ToolbarIconView en relación con el lienzo antes de pasarlos al comando 'tlb-move'.

Si aceptas ese parche, puedo empezar con uno.