Planos de planta dinámicos en la aplicación web

Estoy desarrollando un sistema de administración de restaurantes basado en la web para varios lugares diferentes y necesito implementar planos de planta dinámicos para la administración de mesas. Las tablas deben poder hacer clic y editarse, los diferentes planos de planta deben almacenarse, ¿no está seguro de si almacenarlos en la base de datos o como imágenes?

Actualmente estoy atascado después de mirar varias opciones:

  • Canvas-subóptimo
  • Svg: manipular el archivo svg con JS parece más adecuado, no estoy seguro de qué biblioteca usar.
  • Interfaz de usuario de Jquery: usar Bootstrap y los dos no funcionan bien juntos

¿Qué me recomendarías para mi caso específico? ¿Qué biblioteca JS usar con Svg?

No creo que necesite una biblioteca separada para manipular SVG con JavaScript. SVG es un subconjunto de XML, entonces, ¿no deberían ser suficientes las herramientas habituales de manipulación de DOM?
Bueno, vi varias otras preguntas discutiendo el uso de algo como D3.js o Raphaël.js. No tengo experiencia con la manipulación de Svg, por lo que agradecería cualquier consejo sobre las mejores prácticas.

Respuestas (1)

Essential Diagram for JavaScript admite la manipulación de nodos basados ​​en SVG y la serialización.

Ejemplo

Diagrama JS con nodos SVG

Todo el producto está disponible de forma gratuita a través de la licencia comunitaria si califica (menos de 1 millón de dólares en ingresos).

Nota: Trabajo para Syncfusion.

No puedo encontrar la versión completa de este ejemplo. Por favor, proporcione si puede.
@ІгорЖовтанюк ¿Visitaste jsplayground.syncfusion.com/uj0uyfqc ? Puedes obtener la fuente completa de la muestra desde allí. La biblioteca en sí debe descargarse de syncfusion.com/products/javascript/ejdiagram.