Making a furniture layout tool, need some advice [closed]

Question

I am making a web application that will mostly take place client side and have the data processed and stored on the server side (PHP/MySQL). The app lets you add different pieces of furniture to a room. These pieces of furniture are going to represented mostly by simple shapes (rectangle, square, etc...) except for a couple unique ones like a "L" shape and a "U" shape (no curve, all straight edges). I need to be able to calculate the square footage of any of these pieces depending on what dimensions the user puts in. What is the best way to store the "formulas" with each piece?

The other part is I plan to have a drag and drop type interface where the user can place the furniture in a room. I've been looking into using the <canvas> element but then I came across Raphael. This seems like the better way to go since it supports more browsers. The main things I will need from this interface is:

• Ability to control each side (any straight edge in the shape) and change the color of it.
• Save the positions of each shape so that I can reconstruct the layout any time.

The syntax for Raphael looks fairly simple, what would be the best way to store the SVG for each shape I make so that when the user clicks "Add" the shape is already calculated and can be added?

So basically, is Raphael a good choice for this type of interface/needs? And, how would I store information such as the shapes that I make, as well as each layout (combination of shapes, dimensions, and position of each shape) in a database so I can load any saved layout?

Answer 1

I believe you are in the right direction, keep with SVG and Raphael or you can use one of this libraries:

• jsPlumb: http://code.google.com/p/jsplumb/ - provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML for stone-age browsers. The latest version - 1.3.3 - can be used with jQuery, MooTools and YUI3. Full transparent support for dragging is included and the API is super simple.
• JointJS: www(dot)jointjs(dot)com/ - is a JavaScript library for creating diagrams. The diagrams can be fully interactive. Joint library is suitable for both implementing a diagramming tool as well as simply for publishing your diagrams. Features:
  connecting vector objects with various types of arrows; interacting with connections and objects; custom handlers for various events; bent lines smoothing; ready-to-use elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, LDM); hierarchical diagrams; serialization (to/from JSON format, SVG export only in browsers that support it); extensible; customizable;
• Cajal: http://dotsunited.github.com/cajal/ - cajal provides object oriented functionality to draw and animate shapes on the canvas element. You can easily reuse animations or complex shape-objects in other projects, as every shape can be assigned to as many canvas elements on your site as you like.

About the formulas, I would store the last dimensions and points in JS object format, I believe the formulas could be stored created in objects and using the strategy pattern you pass the correct one to be applied.