@paperbits/core/workshops/cropper/cropper.html

Paperbits core components.

<div class="editor resizable-content flex flex-column crpr">
    <div class="flex-item flex-item-grow crpr">
        <div class="fit">
            <img class="cropbox" data-bind="attr: { src: mediaItem.downloadUrl }, cropper: cropperInstance" />
        </div>
    </div>

    <div class="flex-item">
        <div class="btn-group">
            <button class="btn btn-default" data-bind="click: setMoveMode">
                <i aria-hidden="true" class="paperbits-icon paperbits-zoom-99"></i>
            </button>
            <button class="btn btn-default" data-bind="click: setCropMode">
                <i aria-hidden="true" class="paperbits-icon paperbits-crop"></i>
            </button>
            <button class="btn btn-default" data-bind="click: zoomIn">
                <i aria-hidden="true" class="paperbits-icon paperbits-zoom-in"></i>
            </button>
            <button class="btn btn-default" data-bind="click: zoomOut">
                <i aria-hidden="true" class="paperbits-icon paperbits-zoom-out"></i>
            </button>
            <button class="btn btn-default" data-bind="click: rotateLeft">
                <i aria-hidden="true" class="paperbits-icon paperbits-rotate-left-2"></i>
            </button>
            <button class="btn btn-default" data-bind="click: rotateRight">
                <i aria-hidden="true" class="paperbits-icon paperbits-rotate-right-2"></i>
            </button>
            <button class="btn btn-default" data-bind="click: flipHorizontally">
                <i aria-hidden="true" class="paperbits-icon paperbits-enlarge-horizontal"></i>
            </button>
            <button class="btn btn-default" data-bind="click: flipVertically">
                <i aria-hidden="true" class="paperbits-icon paperbits-enlarge-vertical"></i>
            </button>

            <button class="btn btn-default" data-bind="click: crop">
                <i aria-hidden="true" class="paperbits-icon paperbits-check-2"></i>
            </button>

            <button class="btn btn-default" data-bind="click: clear">
                <i aria-hidden="true" class="paperbits-icon paperbits-simple-remove"></i>
            </button>
        </div>
    </div>
</div>