diff --git a/netbox_floorplan/static/netbox_floorplan/floorplan/edit.js b/netbox_floorplan/static/netbox_floorplan/floorplan/edit.js index f21ee27..c21c6e5 100644 --- a/netbox_floorplan/static/netbox_floorplan/floorplan/edit.js +++ b/netbox_floorplan/static/netbox_floorplan/floorplan/edit.js @@ -275,7 +275,7 @@ function add_text() { } window.add_text = add_text; -function add_floorplan_object(top, left, width, height, unit, 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, image) { var object_width; var object_height; if ( !width || !height || !unit ){ @@ -300,44 +300,89 @@ function add_floorplan_object(top, left, width, height, unit, fill, rotation, ob console.log(object_height) } document.getElementById(`object_${object_type}_${object_id}`).remove(); - var rect = new fabric.Rect({ - top: top, - name: "rectangle", - left: left, - width: object_width, - height: object_height, - fill: fill, - opacity: 0.8, - lockRotation: false, - originX: "center", - originY: "center", - cornerSize: 15, - hasRotatingPoint: true, - perPixelTargetFind: true, - minScaleLimit: 1, - maxWidth: canvasWidth, - maxHeight: canvasHeight, - centeredRotation: true, - custom_meta: { - "object_type": object_type, - "object_id": object_id, - "object_name": object_name, - "object_url": "/dcim/" + object_type + "s/" + object_id + "/", - }, - }); + /* if we have an image, we display the text below, otherwise we display the text within */ + var rect, text_offset = 0; + if (!image) { + rect = new fabric.Rect({ + top: top, + name: "rectangle", + left: left, + width: object_width, + height: object_height, + fill: fill, + opacity: 0.8, + lockRotation: false, + originX: "center", + originY: "center", + cornerSize: 15, + hasRotatingPoint: true, + perPixelTargetFind: true, + minScaleLimit: 1, + maxWidth: canvasWidth, + maxHeight: canvasHeight, + centeredRotation: true, + custom_meta: { + "object_type": object_type, + "object_id": object_id, + "object_name": object_name, + "object_url": "/dcim/" + object_type + "s/" + object_id + "/", + }, + }); + } else { + object_height = object_width; + text_offset = object_height/2 + 4; + rect = new fabric.Image(null, { + top: top, + name: "rectangle", + left: left, + width: object_width, + height: object_height, + opacity: 1, + lockRotation: false, + originX: "center", + originY: "center", + cornerSize: 15, + hasRotatingPoint: true, + perPixelTargetFind: true, + minScaleLimit: 1, + maxWidth: canvasWidth, + maxHeight: canvasHeight, + centeredRotation: true, + shadow: new fabric.Shadow({ + color: "red", + blur: 15, + }), + custom_meta: { + "object_type": object_type, + "object_id": object_id, + "object_name": object_name, + "object_url": "/dcim/" + object_type + "s/" + object_id + "/", + }, + }); + rect.setSrc("/media/" + image, function(img){ + img.scaleX = object_width / img.width; + img.scaleY = object_height / img.height; + canvas.renderAll(); + }); + } - var text = new fabric.IText(object_name, { + var text = new fabric.Textbox(object_name, { fontFamily: "Courier New", fontSize: 16, + splitByGrapheme: text_offset? null : true, fill: "#FFFF", + width: object_width, textAlign: "center", originX: "center", originY: "center", left: left, - top: top, + top: top + text_offset, excludeFromExport: false, includeDefaultValues: true, centeredRotation: true, + stroke: "#000", + strokeWidth: 2, + paintFirst: 'stroke', custom_meta: { "text_type": "name", } @@ -352,10 +397,14 @@ function add_floorplan_object(top, left, width, height, unit, fill, rotation, ob originX: "center", originY: "center", left: left, - top: top + 16, + top: top + text_offset + 16, excludeFromExport: false, includeDefaultValues: true, centeredRotation: true, + shadow: text_offset? new fabric.Shadow({ + color: '#FFF', + blur: 1 + }) : null, custom_meta: { "text_type": "status", } diff --git a/netbox_floorplan/tables.py b/netbox_floorplan/tables.py index 3f22a29..14790e4 100644 --- a/netbox_floorplan/tables.py +++ b/netbox_floorplan/tables.py @@ -54,7 +54,7 @@ class FloorplanDeviceTable(NetBoxTable): name = tables.LinkColumn() actions = tables.TemplateColumn(template_code=""" - Add Device + Add Device """)