@if (!isViewMode()) {
    <div cdkDrag #container class="map-element-container"
         (cdkDragEnded)="onDragEnd($event)"
         (cdkDragMoved)="onDragMove($event)"
         cdkDragBoundary=".map-canvas">
        @if (this.item()?.background) {
            <div cdkDragHandle
                 class="text-center"
                 ngResizable
                 #background
                 (rzStart)="onResizeStart(background)"
                 (rzResizing)="onResizing(backgroundImage)"
                 (rzStop)="onResizeStop({ width: $event.size.width, height: $event.size.height }, type)"
                 [rzAspectRatio]="aspectRatioEnabled()"
                 [rzHandles]="'se'">
                <img #backgroundImage
                     [src]="'/map_module/img/backgrounds/' + this.item()?.background" class="invalid-image-src"
                     [style.width.px]="width"
                     [alt]="invalidBackgroundMessage"
                     [style.height.px]="height"
                />
            </div>
        }

    </div>
    @if (!isViewMode()) {
        <p-contextMenu [target]="container" [model]="contextMenuItems"
                       appendTo="body"></p-contextMenu>
    }
}