<commit_before>Ext.namespace('Kwc.Abstract.Image');
Kwc.Abstract.Image.CropImage = Ext.extend(Ext.BoxComponent, {
    minWidth: 50,
    minHeight: 50,
    preserveRatio: false,
    image: null,

    autoEl: {
        tag: 'div',
        children: [{
            tag: 'div',
            cls: 'kwc-crop-image-wrapper'
        }]
    },

    initComponent: function() {
        Kwc.Abstract.Image.CropImage.superclass.initComponent.call(this);
    },

    getCropData: function() {
        var parent = this.getBox();
        if (!this.image) {
            return;
        }
        var imageBox = this.image.getBox();
        var result = {
            x: (imageBox.x - parent.x),
            y: (imageBox.y - parent.y),
            width: imageBox.width,
            height: imageBox.height
        };
        return result;
    },

    updateCropRegion: function () {
        var result = this.getCropData();
        this.image.getEl().setStyle({
            'background-position': (-result.x)+'px '+(-result.y)+'px'
        });
    },

    onRender: function(ct, position) {
        Kwc.Abstract.Image.CropImage.superclass.onRender.call(this, ct, position);
        this.el.setStyle({
            'background': 'url('+this.src+') no-repeat left top'
        });

        var wrapEl = this.el.down('.kwc-crop-image-wrapper');
        wrapEl.setSize(this.width, this.height);

        this.image = new Ext.BoxComponent({
            opacity: 1.0,
            autoEl: {
                tag: 'div',
                src: this.src
            },
            renderTo: this.el,
            constrainTo: this.el,
            src: Ext.BLANK_IMAGE_URL,
            x: this.cropX +7,//to be correct placed.
            y: this.cropY, //no problems in y-direction
            height: this.height,
            width: this.width,
            style:{
                background: 'url('+this.src+') no-repeat left top'
            }
        });
        this.updateCropRegion();

        var resizer = new Ext.Resizable(this.image.getEl(), {
            handles: 'all',
            pinned: true,
            preserveRatio: this.preserveRatio,
            maxWidth: this.width,
            maxHeight: this.height,
            width: this.cropWidth,
            height: this.cropHeight,
            minWidth: this.minWidth,
            minHeight: this.minHeight
        });
        resizer.getEl().addClass('kwc-crop-image-resizable');
        resizer.on("resize", function() {
            this.updateCropRegion();
            var res = this.getCropData();
            this.fireEvent('changeCrop', this, res);
            this.fireEvent('resizeCrop', this, res);
        }, this);

        var dragDrop = new Ext.dd.DD(this.image.getEl(), '');
        dragDrop.startDrag = (function (x, y) {
            dragDrop.constrainTo(this.el);
            this.image.getEl().setStyle({
                'background': 'transparent'
            });
        }).createDelegate(this);
        dragDrop.endDrag = (function (e) {
            this.updateCropRegion();
            this.image.getEl().setStyle({
                'background-image': 'url('+this.src+')',
                'background-repeat': 'no-repeat'
            });
            this.fireEvent('changeCrop', this, this.getCropData());
            this.fireEvent('moveCrop', this, this.getCropData());
        }).createDelegate(this);
    }
});

Ext.reg('kwc.image.cropimage', Kwc.Abstract.Image.CropImage);<commit_msg>Move var-definitions to top for documentation purposes<commit_after>Ext.namespace('Kwc.Abstract.Image');
Kwc.Abstract.Image.CropImage = Ext.extend(Ext.BoxComponent, {
    src: null,//image path
    preserveRatio: false,
    width: null,//width of image
    height: null,//height of image
    //values of initial selected region
    cropWidth: null,
    cropHeight: null,
    cropX: null,
    cropY: null,

    minWidth: 50,//min width of crop region
    minHeight: 50,//min height of crop region
    _image: null,

    autoEl: {
        tag: 'div',
        children: [{
            tag: 'div',
            cls: 'kwc-crop-image-wrapper'
        }]
    },

    initComponent: function() {
        Kwc.Abstract.Image.CropImage.superclass.initComponent.call(this);
    },

    getCropData: function() {
        var parent = this.getBox();
        if (!this._image) {
            return;
        }
        var imageBox = this._image.getBox();
        var result = {
            x: (imageBox.x - parent.x),
            y: (imageBox.y - parent.y),
            width: imageBox.width,
            height: imageBox.height
        };
        return result;
    },

    updateCropRegion: function () {
        var result = this.getCropData();
        this._image.getEl().setStyle({
            'background-position': (-result.x)+'px '+(-result.y)+'px'
        });
    },

    onRender: function(ct, position) {
        Kwc.Abstract.Image.CropImage.superclass.onRender.call(this, ct, position);
        this.el.setStyle({
            'background': 'url('+this.src+') no-repeat left top'
        });

        var wrapEl = this.el.down('.kwc-crop-image-wrapper');
        wrapEl.setSize(this.width, this.height);

        this._image = new Ext.BoxComponent({
            opacity: 1.0,
            autoEl: {
                tag: 'div',
                src: this.src
            },
            renderTo: this.el,
            constrainTo: this.el,
            src: Ext.BLANK_IMAGE_URL,
            x: this.cropX +7,//to be correct placed.
            y: this.cropY, //no problems in y-direction
            height: this.height,
            width: this.width,
            style:{
                background: 'url('+this.src+') no-repeat left top'
            }
        });
        this.updateCropRegion();

        var resizer = new Ext.Resizable(this._image.getEl(), {
            handles: 'all',
            pinned: true,
            preserveRatio: this.preserveRatio,
            maxWidth: this.width,
            maxHeight: this.height,
            width: this.cropWidth,
            height: this.cropHeight,
            minWidth: this.minWidth,
            minHeight: this.minHeight
        });
        resizer.getEl().addClass('kwc-crop-image-resizable');
        resizer.on("resize", function() {
            this.updateCropRegion();
            var res = this.getCropData();
            this.fireEvent('changeCrop', this, res);
            this.fireEvent('resizeCrop', this, res);
        }, this);

        var dragDrop = new Ext.dd.DD(this._image.getEl(), '');
        dragDrop.startDrag = (function (x, y) {
            dragDrop.constrainTo(this.el);
            this._image.getEl().setStyle({
                'background': 'transparent'
            });
        }).createDelegate(this);
        dragDrop.endDrag = (function (e) {
            this.updateCropRegion();
            this._image.getEl().setStyle({
                'background-image': 'url('+this.src+')',
                'background-repeat': 'no-repeat'
            });
            this.fireEvent('changeCrop', this, this.getCropData());
            this.fireEvent('moveCrop', this, this.getCropData());
        }).createDelegate(this);
    }
});

Ext.reg('kwc.image.cropimage', Kwc.Abstract.Image.CropImage);
{'fraction_non_alphanumeric': 0.1407766990291262, 'fraction_numerical': 0.001941747572815534, 'mean_word_length': 1.7345468335229428, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3079257', 'n_tokens_mistral': 2165, 'n_tokens_neox': 2127, 'n_words': 395}