Merge pull request #54 from cruse1977/0.5.0

0.5.0
netbox-community · Oct 10, 2024 · 2ef6887 · 2ef6887
2 parents c7eafe6 + fc1f971
commit 2ef6887
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 19 deletions.
diff --git a/netbox_floorplan/static/netbox_floorplan/floorplan/edit.js b/netbox_floorplan/static/netbox_floorplan/floorplan/edit.js
@@ -453,9 +453,16 @@ window.center_pan_on_slected_object = center_pan_on_slected_object;
 
 function update_background() {
     var assigned_image = document.getElementById("id_assigned_image").value;
-    if (assigned_image == "") { assigned_image = null; }
+    if (assigned_image == "") { 
+        assigned_image = null; 
+        canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas));
+    }
     var floor_json = canvas.toJSON(["id", "text", "_controlsVisibility", "custom_meta", "lockMovementY", "lockMovementX", "evented", "selectable"]);
 
+
+
+
+
     $.ajax({
         type: "PATCH",
         url: `/api/plugins/floorplan/floorplans/${obj_pk}/`,
@@ -481,15 +488,45 @@ function update_background() {
                 }
 
                 var img = fabric.Image.fromURL(img_url, function(img) {
-                    let scaleRatio = Math.max(canvas.width / img.width, canvas.height / img.height);
-                    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
-                        scaleX: scaleRatio,
-                        scaleY: scaleRatio,
-                        left: canvas.width / 2,
-                        top: canvas.height / 2,
-                        originX: 'middle',
-                        originY: 'middle'
+
+
+                    var left = 0;
+                    var top = 0;
+                    var width = 0;
+                    var height = 0;
+                    canvas.getObjects().forEach(function (object) {
+                        if (object.custom_meta) {
+                            if (object.custom_meta.object_type == "floorplan_boundry") {
+                                left = object.left;
+                                top = object.top;
+                                width = object.width;
+                                height = object.height;
+                            }
+                        }
                     });
+                    // if we have a floorplan boundary, position the image in there 
+                    if (height != 0 && width != 0) {
+                        let scaleRatioX = Math.max(width / img.width)
+                        let scaleRatioY = Math.max(height / img.height);
+                        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
+                            scaleX: scaleRatioX,
+                            scaleY: scaleRatioY,
+                            left: left,
+                            top: top
+                        });     
+                    }
+                    else
+                    {
+                        let scaleRatio = Math.max(canvas.width / img.width, canvas.height / img.height);
+                        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
+                            scaleX: scaleRatio,
+                            scaleY: scaleRatio,
+                            left: canvas.width / 2,
+                            top: canvas.height / 2,
+                            originX: 'middle',
+                            originY: 'middle'
+                        });
+                    }
                 });
 
             } else {
@@ -571,6 +608,7 @@ function update_dimensions() {
             centeredRotation: true,
         });
 
+
         var text = new fabric.IText(`${obj_name}`, {
             fontFamily: "Courier New",
             fontSize: 16,

diff --git a/netbox_floorplan/static/netbox_floorplan/floorplan/utils.js b/netbox_floorplan/static/netbox_floorplan/floorplan/utils.js
@@ -161,16 +161,45 @@ function init_floor_plan(floorplan_id, canvas, mode) {
                         img_url = floorplan.assigned_image.file;
                     }
 
+
                     var img = fabric.Image.fromURL(img_url, function(img) {
-                        let scaleRatio = Math.max(canvas.width / img.width, canvas.height / img.height);
-                        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
-                            scaleX: scaleRatio,
-                            scaleY: scaleRatio,
-                            left: canvas.width / 2,
-                            top: canvas.height / 2,
-                            originX: 'middle',
-                            originY: 'middle'
+                        var left = 0;
+                        var top = 0;
+                        var width = 0;
+                        var height = 0;
+                        canvas.getObjects().forEach(function (object) {
+                            if (object.custom_meta) {
+                                if (object.custom_meta.object_type == "floorplan_boundry") {
+                                    left = object.left;
+                                    top = object.top;
+                                    width = object.width;
+                                    height = object.height;
+                                }
+                            }
                         });
+                        // if we have a floorplan boundary, position the image in there 
+                        if (height != 0 && width != 0) {
+                            let scaleRatioX = Math.max(width / img.width)
+                            let scaleRatioY = Math.max(height / img.height);
+                            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
+                                scaleX: scaleRatioX,
+                                scaleY: scaleRatioY,
+                                left: left,
+                                top: top
+                            });     
+                        }
+                         else
+                        {
+                            let scaleRatio = Math.max(canvas.width / img.width, canvas.height / img.height);
+                            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
+                                scaleX: scaleRatio,
+                                scaleY: scaleRatio,
+                                left: canvas.width / 2,
+                                top: canvas.height / 2,
+                                originX: 'middle',
+                                originY: 'middle'
+                            });
+                        }
                     });
 
 

diff --git a/netbox_floorplan/static/netbox_floorplan/vendors/htmx.min.js b/netbox_floorplan/static/netbox_floorplan/vendors/htmx.min.js
diff --git a/netbox_floorplan/templates/netbox_floorplan/floorplan_edit.html b/netbox_floorplan/templates/netbox_floorplan/floorplan_edit.html
@@ -8,7 +8,7 @@
 {{ block.super }}
 <script src="{% static 'netbox_floorplan/vendors/fabric-js-6.0.2.js' %}"></script>
 <script src="{% static 'netbox_floorplan/vendors/jquery-3.7.1.js' %}"></script>
-
+<script src="{% static 'netbox_floorplan/vendors/htmx.min.js' %}"></script>
 
 {% endblock head %}
 
@@ -251,5 +251,5 @@ <h5 class="modal-title" id="control_unit_modal_label">Set Floorplan Background I
 </div>
 
 <script type="module" src="{% static 'netbox_floorplan/floorplan/edit.js' %}"></script>
-<script src="https://unpkg.com/[email protected]" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
+
 {% endblock content %}