Cutlery/beestat
1
0
Fork 0
mirror of https://github.com/beestat/app.git synced 2026-01-08 05:00:44 -05:00
Code Actions Packages Releases Activity

Added automatic content centering when opening a floor plan

Browse Source
This commit is contained in:
Jon Ziebell 2022-08-06 09:55:22 -04:00
parent 6b9fd70b6c
commit fbbe95c85d
2 changed files with 73 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/component/card/floor_plan_editor.js
View File

@ -10,7 +10,11 @@ beestat.component.card.floor_plan_editor = function(thermostat_id) {
var change_function = beestat.debounce(function() {
delete self.state_.active_group;
delete self.state_.active_room;
self.rerender();
// Center the content if the floor plan changed.
self.floor_plan_.center_content();
}, 10);
beestat.dispatcher.addEventListener(
@ -27,6 +31,12 @@ beestat.component.card.floor_plan_editor = function(thermostat_id) {
if (this.state_.snapping === undefined) {
this.state_.snapping = true;
}
// The first time this component renders center the content.
this.addEventListener('render', function() {
self.floor_plan_.center_content();
self.removeEventListener('render');
});
};
beestat.extend(beestat.component.card.floor_plan_editor, beestat.component.card);

64
js/component/floor_plan.js
View File

@ -157,7 +157,7 @@ beestat.component.floor_plan.prototype.add_grid_ = function() {
const small_grids_per_large_grid = 10;
const pixels_per_large_grid = pixels_per_small_grid * small_grids_per_large_grid;
const large_grid_repeat = 20;
const large_grid_repeat = 100;
this.grid_pixels_ = pixels_per_large_grid * large_grid_repeat;
const grid_small_pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
@ -705,6 +705,19 @@ beestat.component.floor_plan.prototype.zoom_ = function(scale_delta, e) {
this.dispatchEvent('zoom');
};
/**
* Reset the view box
*/
beestat.component.floor_plan.prototype.reset_view_box_ = function() {
this.view_box_ = {
'x': 0,
'y': 0,
'width': this.width_,
'height': this.height_
};
this.update_view_box_();
};
/**
* Zoom in
*
@ -789,3 +802,52 @@ beestat.component.floor_plan.prototype.get_group_below = function(group) {
return closest_group;
};
/**
* Center the view box on the content. Sets zoom and pan.
*/
beestat.component.floor_plan.prototype.center_content = function() {
window.fp = this;
const floor_plan = beestat.cache.floor_plan[this.floor_plan_id_];
let min_x = Infinity;
let max_x = -Infinity;
let min_y = Infinity;
let max_y = -Infinity;
let has_content = false;
floor_plan.data.groups.forEach(function(group) {
group.rooms.forEach(function(room) {
room.points.forEach(function(point) {
has_content = true;
min_x = Math.min(room.x + point.x, min_x);
max_x = Math.max(room.x + point.x, max_x);
min_y = Math.min(room.y + point.y, min_y);
max_y = Math.max(room.y + point.y, max_y);
});
});
});
this.reset_view_box_();
if (has_content === true) {
const width = (max_x - min_x) + 50;
const height = (max_y - min_y) + 50;
while (
(
this.view_box_.width < width ||
this.view_box_.height < height
) &&
this.can_zoom_out_() === true
) {
this.zoom_out_();
}
const center_x = (max_x + min_x) / 2;
const center_y = (max_y + min_y) / 2;
this.view_box_.x = center_x - (this.view_box_.width / 2);
this.view_box_.y = center_y - (this.view_box_.height / 2);
this.update_view_box_();
}
};