openmct/platform/features/layout/res/templates/layout.html

<div style="width: 100%; height: 100%;"
     ng-controller="LayoutController as controller">

    <div class='frame child-frame panel abs'
         ng-repeat="childObject in composition"
         ng-style="controller.getFrameStyle(childObject.getId())">

        <div class="frame child-frame holder contents abs">
            <mct-representation key="'frame'"
                                mct-object="childObject">
            </mct-representation>
        </div>

        <!-- Drag handles -->
        <span ng-show="domainObject.hasCapability('editor')">
            <span style="position: absolute; left: 12px; right: 12px; top: 12px; bottom: 12px; cursor: move;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>

            <span style="position: absolute; left: 0px; width: 12px; top: 12px; bottom: 12px; cursor: w-resize;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,0])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>
            <span style="position: absolute; right: 0px; width: 12px; top: 12px; bottom: 12px; cursor: e-resize;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [1,0])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>

            <span style="position: absolute; left: 12px; right: 12px; top: 0px; height: 12px; cursor: n-resize;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [0,1], [0,-1])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>
            <span style="position: absolute; left: 12px; right: 12px; bottom: 0px; height: 12px; cursor: s-resize;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [0,1])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>

            <span style="position: absolute; left: 0px; width: 12px; top: 0px; height: 12px; cursor: nw-resize;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [-1,-1])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>
            <span style="position: absolute; right: 0px; width: 12px; top: 0px; height: 12px; cursor: ne-resize;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [0,1], [1,-1])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>
            <span style="position: absolute; left: 0px; width: 12px; bottom: 0px; height: 12px; cursor: sw-resize;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,1])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>
            <span style="position: absolute; right: 0px; width: 12px; bottom: 0px; height: 12px; cursor: se-resize;"
                  mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [1,1])"
                  mct-drag="controller.continueDrag(delta)"
                  mct-drag-up="controller.endDrag()">
            </span>
        </span>

    </div>

</div>