Merge pull request #12 from tbotnz/dev

Dev
tbotnz · Sep 26, 2023 · d17ad21 · d17ad21
2 parents 28571ff + 58096fa
commit d17ad21
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,6 @@
 .vscode/settings.json
 .idea
 *.pyc
-venv
+venv
+build/**
+netbox_floorplan.egg-info/**
diff --git a/netbox_floorplan/static/netbox_floorplan/floorplan/edit.js b/netbox_floorplan/static/netbox_floorplan/floorplan/edit.js
@@ -114,6 +114,9 @@ function add_wall() {
         maxHeight: canvasHeight,
         centeredRotation: true,
         angle: 90,
+        custom_meta: {
+            "object_type": "wall",
+        },
     });
 
     var group = new fabric.Group([wall]);
@@ -153,8 +156,10 @@ function add_area() {
         maxHeight: canvasHeight,
         centeredRotation: true,
         angle: 90,
+        custom_meta: {
+            "object_type": "area",
+        },
     });
-
     var group = new fabric.Group([wall]);
 
     group.setControlsVisibility({
@@ -172,6 +177,58 @@ function add_area() {
 }
 window.add_area = add_area;
 
+/*
+*  lock_floorplan_object: Toggle function to enable/disable movement and resize of objects
+*  Uses object.custom_meta.object_type to determine which controls to enable/disable
+*  for walls/area, mtr, mt, mb, ml, mr and movement/rotation are all enabled/disabled.
+*  for racks, only mtr and movement/roatation are enabled/disabled.
+*/
+function lock_floorplan_object() {
+    var object = canvas.getActiveObject();
+    if (object) {
+        if (object.lockMovementX) {
+            object.set({
+                'lockMovementX': false,
+                'lockMovementY': false,
+                'lockRotation': false
+            });
+            object.setControlsVisibility({
+                mtr: true,
+            });
+            if ( object._objects[0].custom_meta.object_type === "wall" ||
+            object._objects[0].custom_meta.object_type === "area" ) {
+                object.setControlsVisibility({
+                    mt: true,
+                    mb: true,
+                    ml: true,
+                    mr: true,
+                });
+            };
+        } else {
+            object.set({
+                'lockMovementX': true,
+                'lockMovementY': true,
+                'lockRotation': true
+            });
+            object.setControlsVisibility({
+                mtr: false,
+            });
+            if ( object._objects[0].custom_meta.object_type === "wall" ||
+                object._objects[0].custom_meta.object_type === "area" ) {
+                object.setControlsVisibility({
+                    mt: false,
+                    mb: false,
+                    ml: false,
+                    mr: false,
+                });
+            };
+        };
+    };
+    canvas.renderAll();
+    return;
+}
+window.lock_floorplan_object = lock_floorplan_object;
+
 function bring_forward() {
     var object = canvas.getActiveObject();
     if (object) {
@@ -209,14 +266,37 @@ function add_text() {
 }
 window.add_text = add_text;
 
-function add_floorplan_object(top, left, width, height, fill, rotation, object_id, object_name, object_type, status) {
+function add_floorplan_object(top, left, width, height, unit, fill, rotation, object_id, object_name, object_type, status) {
+    var object_width;
+    var object_height;
+    if ( !width || !height || !unit ){
+        object_width = 60;
+        object_height = 91;
+    } else {
+        var conversion_scale = 100;
+        console.log("width: " + width)
+        console.log("unit: " + unit)
+        console.log("height: " + height)
+        if (unit == "in") {
+            var new_width = (width * 0.0254) * conversion_scale;
+            var new_height = (height * 0.0254) * conversion_scale;
+        } else {
+            var new_width = (width / 1000) * conversion_scale;
+            var new_height = (height / 1000) * conversion_scale;
+        }
+
+        object_width = parseFloat(new_width.toFixed(2));
+        console.log(object_width)
+        object_height = parseFloat(new_height.toFixed(2));
+        console.log(object_height)
+    }
     document.getElementById(`object_${object_type}_${object_id}`).remove();
     var rect = new fabric.Rect({
         top: top,
         name: "rectangle",
         left: left,
-        width: width,
-        height: height,
+        width: object_width,
+        height: object_height,
         fill: fill,
         opacity: 0.8,
         lockRotation: false,
@@ -296,6 +376,7 @@ function add_floorplan_object(top, left, width, height, fill, rotation, object_i
 
     canvas.add(group);
     canvas.centerObject(group);
+    //canvas.bringToFront(group);
 }
 window.add_floorplan_object = add_floorplan_object;
 

diff --git a/netbox_floorplan/tables.py b/netbox_floorplan/tables.py
@@ -20,7 +20,7 @@ class FloorplanRackTable(NetBoxTable):
     name = tables.LinkColumn()
 
     actions = tables.TemplateColumn(template_code="""
-    <a type="button" class="btn btn-sm btn-outline-info" onclick="add_floorplan_object(300, 500, 60, 91, '#ea8fe', 30, '{{ record.id }}', '{{ record.name }}', 'rack', '{{ record.status }}')">Add Rack
+    <a type="button" class="btn btn-sm btn-outline-info" onclick="add_floorplan_object(300, 500, '{{ record.outer_width }}', '{{ record.outer_depth}}', '{{ record.outer_unit }}', '#ea8fe', 30, '{{ record.id }}', '{{ record.name }}', 'rack', '{{ record.status }}')">Add Rack
     </a>
     """)
 
@@ -38,7 +38,7 @@ class FloorplanDeviceTable(NetBoxTable):
     name = tables.LinkColumn()
 
     actions = tables.TemplateColumn(template_code="""
-    <a type="button" class="btn btn-sm btn-outline-info" onclick="add_floorplan_object(30, 50, 60, 91, '#ea8fe', 30, '{{ record.id }}', '{{ record.name }}', 'device', '{{ record.status }}')">Add Device
+    <a type="button" class="btn btn-sm btn-outline-info" onclick="add_floorplan_object(30, 50, 60, 91, '{{ record.outer_unit }}', '#ea8fe', 30, '{{ record.id }}', '{{ record.name }}', 'device', '{{ record.status }}')">Add Device
     </a>
     """)
 

diff --git a/netbox_floorplan/templates/netbox_floorplan/floorplan_edit.html b/netbox_floorplan/templates/netbox_floorplan/floorplan_edit.html
@@ -106,6 +106,8 @@ <h5 class="card-header">Controls</h5>
                                         <a class="btn btn-sm btn-outline-success" onclick="add_text()">
                                             Add label
                                         </a>
+                                        <a class="btn btn-sm btn-outline-info tools disabled" onclick="lock_floorplan_object()" id="lock_button">Lock/Unlock Object
+                                        </a>
                                         <a class="btn btn-sm btn-outline-danger tools disabled"
                                             onclick="delete_floorplan_object()" id="remove_button">
                                             Delete