Developer notes

There are events to notify the UI to act upon. These events convey the selection of various entities in the floorplan. As far as the 3D scene is concerned the following event are important. But one needs to instantiate the blueprint instance to address any events.

var opts = 
	{
	floorplannerElement:'floorplanner-canvas',
	threeElement: '#viewer',
	threeCanvasElement: 'three-canvas',
	textureDir:"models/textures/",
        widget: false
	}
var blueprint3d = new BP3DJS.BlueprintJS(opts); 

Then events can be added to the member instance three.

var three = blueprint3d.three;
three.addEventListener(BP3DJS.EVENT_ITEM_SELECTED, function(o){//o.item: item reference to furniture in the room});
three.addEventListener(BP3DJS.EVENT_ITEM_UNSELECTED, function(o){//o.item that was unselected reference to the furniture in the room});	
three.addEventListener(BP3DJS.EVENT_WALL_CLICKED, (o)=>{//o.item is a wall that has been selected;});
three.addEventListener(BP3DJS.EVENT_FLOOR_CLICKED, (o)=>{//o.item is a floor that has been selected;});
three.addEventListener(BP3DJS.EVENT_FPS_EXIT, ()=>{//fps mode exit and automatically enters 3d design mode});

Events to handle Corners, Walls, Rooms

Corners

The foundations of a room plan.

---

The corners are the building blocks of a floorplan. The corners define the walls, rooms, floors, ceilings for their location in space. This is from the fact that when a corner is moved in x,y axis or its elevation is changed for the z-axis it will directly impact

• the area of a room,
• shape of a room,
• the shape of the ceiling.

Events

The corners will emit the following events to the floorplan, which will in-turn emit globally. To know the events emitted by a corner, see the list below

BP3DJS.EVENT_DELETED; //Emitted when a corner is removed 
BP3DJS.EVENT_MOVED;  //Emitted when a corner is moved in space
BP3DJS.EVENT_CORNER_ATTRIBUTES_CHANGED;   //Emitted when attributes of a corner changes (i.e, x, y, elevation)
BP3DJS.EVENT_CORNER_2D_HOVER, BP3DJS.EVENT_CORNER_2D_CLICKED, BP3DJS.EVENT_CORNER_2D_DOUBLE_CLICKED  // Mouse events for 2d

Walls

Walls are created by connecting two corners.

---

The walls are constructed by connected two corners. A wall can have a starting and ending point that are corners. So strictly speaking they can have only two corners in a single wall. Walls show three types of lengths in the 2D interface,

• i: value - This is the interior length of the wall that is inside the room
• e: value - This is the exterior length of the wall that lies on the other side of the room. This is applicable for walls that are the exteriors of a space
• m: value - This is the actual length of a wall from a starting corner to ending corner. The interior and exteriors are calculated using the wall thickness as offsets

Events

The walls will emit the following events to the floorplan, which will in-turn emit globally. To know the events emitted by a wall, see the list below

BP3DJS.EVENT_DELETED; //Emitted when a wall is removed 
BP3DJS.EVENT_WALL_2D_HOVER, BP3DJS.EVENT_ROOM_2D_CLICKED, BP3DJS.EVENT_ROOM_2D_DOUBLE_CLICKED;// Mouse events for 2d

Rooms

Rooms are created by connecting multiple corners that is an enclosed space

---

The rooms are constructed by connecting with a minimum of three corners. A room can have a name, and area as its attributes. The rooms are automatically managed based on the corners if are connected to each other forming a closed cycle polygon.

Events

The rooms will emit the following events to the floorplan, which will in-turn emit globally. To know the events emitted by a room, see the list below

BP3DJS.EVENT_CHANGED; //Emitted when the floor texture is changed
BP3DJS.EVENT_ROOM_2D_HOVER, BP3DJS.EVENT_ROOM_2D_CLICKED, BP3DJS.EVENT_ROOM_2D_DOUBLE_CLICKED;// Mouse events for 2d

Floorplan

A global object to listen for monitoring corners, walls, and rooms

---

The below example will show how to listen for events so the UI of the app can synchronize with the blueprint-js framework

    function echoEvents(o)
    {	
    	console.log(o.type, o.item);
    }	
    
    var model_floorplan = blueprint3d.model.floorplan;
    model_floorplan.addEventListener(BP3DJS.EVENT_NOTHING_CLICKED, echoEvents);    
    model_floorplan.addEventListener(BP3DJS.EVENT_CORNER_2D_DOUBLE_CLICKED, echoEvents);
    model_floorplan.addEventListener(BP3DJS.EVENT_WALL_2D_DOUBLE_CLICKED, echoEvents);
    model_floorplan.addEventListener(BP3DJS.EVENT_ROOM_2D_DOUBLE_CLICKED, echoEvents);
    
    model_floorplan.addEventListener(BP3DJS.EVENT_CORNER_2D_CLICKED, echoEvents);
    model_floorplan.addEventListener(BP3DJS.EVENT_WALL_2D_CLICKED, echoEvents);
    model_floorplan.addEventListener(BP3DJS.EVENT_ROOM_2D_CLICKED, echoEvents);
    
    model_floorplan.addEventListener(BP3DJS.EVENT_CORNER_2D_HOVER, echoEvents);
    model_floorplan.addEventListener(BP3DJS.EVENT_WALL_2D_HOVER, echoEvents);
    model_floorplan.addEventListener(BP3DJS.EVENT_ROOM_2D_HOVER, echoEvents);
    
    model_floorplan.addEventListener(BP3DJS.EVENT_CORNER_ATTRIBUTES_CHANGED, echoEvents);
    model_floorplan.addEventListener(BP3DJS.EVENT_WALL_ATTRIBUTES_CHANGED, echoEvents);
    model_floorplan.addEventListener(BP3DJS.EVENT_ROOM_ATTRIBUTES_CHANGED, echoEvents);
    
    BP3DJS.Configuration.setValue(BP3DJS.configSystemUI, false);

The event object will have the following properties

• type: The name of the event triggered
• item: The scope of the item that triggered (i.e, the corner, wall, or room)
• info: An object with properties or keys "from" and "to" implying the previous value and current value

The below code will enable/disable the system UI that are the basic html prompts used for the framework to handle some basic inputs. This is disabled by default.

BP3DJS.Configuration.setValue(BP3DJS.configSystemUI, false); // This will disable the framework to stop handling the inputs. The user manages the app GUI to handle inputs. 
BP3DJS.Configuration.setValue(BP3DJS.configSystemUI, true); // The framework will allow handling inputs using basic javascript prompts and dialogs.