<commit_before>// public-admin/scripts/directives/nwRects.js

app.directive('mrImageDrawer', function(){
    return {
        restrict: 'A',
        scope: {
            optionDelete: '=?mrAllowDelete',
            rects: '=mrModel',
            unit: '=mrUnit'
        },
        template: '<div ng-repeat="rect in rects" class="mr-face" ng-init="areaId = rect.id || $index" style="' +
            'top:    {{ rect.y1 + unit }};' +
            'left:   {{ rect.x1 + unit }};' +
            'width:  {{ (rect.x2 - rect.x1) + unit}};' +
            'height: {{ (rect.y2 - rect.y1) + unit}};' +
            '"' +
            "ng-click=\"this.toggleDisplayOptions(areaId)\""+
            "ng-class=\"{active: this.displayArea == areaId || this.selectedArea == areaId}\""+
            "ng-mouseover=\"this.displayInformations(areaId)\""+
            "ng-mouseout=\"this.hideInformations(areaId)\""+
        '>
            <div class="mr-face-delete" ng-show="this.selectedArea == areaId && optionDelete && displayOptions" ng-click="this.delete($index)"></div>
            <div class="mr-face-extra" ng-show="this.displayArea == areaId || this.selectedArea == areaId">
                <h2 ng-show=\"rect.title\">{{rect.title}}</h2>
                <p ng-show=\"rect.caption\">{{rect.caption}}</p>
            </div>
        </div>',
        link: function(scope, element) {

            scope.$on('mrImageDisplayArea', function(e, data) {
                scope.displayArea = data;
            });

            scope.$on('mrImageHideArea', function(e, data) {
                scope.displayArea = null;
            });

            scope.displayInformations = function(areaID) {
                scope.displayArea = areaID;
            }

            scope.hideInformations = function() {
                scope.displayArea = null;
            }

            scope.toggleDisplayOptions = function(areaID) {

                if(scope.selectedArea != areaID) {
                    scope.selectedArea   = areaID;
                    scope.displayOptions = true;
                } else {
                    scope.selectedArea   = null;
                    scope.displayOptions = false;
                }
            }

            scope.delete = function(index) {
                scope.$emit('mrImageDeleteEvent', scope.rects[index]);
                scope.rects.splice(index, 1);
            }

        },
    };
});<commit_msg>Adding 'smart' positionning of title and deleteOption<commit_after>// public-admin/scripts/directives/nwRects.js

app.directive('mrImageDrawer', function(){
    return {
        restrict: 'A',
        scope: {
            optionDelete: '=?mrAllowDelete',
            rects: '=mrModel',
            unit: '=mrUnit'
        },
        template: '<div ng-repeat="rect in rects" class="mr-face" ng-init="areaId = rect.id || $index" style="' +
            'top:    {{ rect.y1 + unit }};' +
            'left:   {{ rect.x1 + unit }};' +
            'width:  {{ (rect.x2 - rect.x1) + unit}};' +
            'height: {{ (rect.y2 - rect.y1) + unit}};' +
            '"' +
            "ng-click=\"this.toggleDisplayOptions(areaId)\""+
            "ng-class=\"{active: this.displayArea == areaId || this.selectedArea == areaId}\""+
            "ng-mouseover=\"this.displayInformations(areaId)\""+
            "ng-mouseout=\"this.hideInformations(areaId)\""+
        '>
            <div class="mr-face-delete" ng-show="this.selectedArea == areaId && optionDelete && displayOptions" ng-click="this.delete($index)" ng-style="setDeleteAlignment(rect)"></div>
            <div class="mr-face-extra" ng-show="this.displayArea == areaId || this.selectedArea == areaId" ng-style="setTitleAlignment(rect)">
                <h2 ng-show=\"rect.title\">{{rect.title}}</h2>
                <p ng-show=\"rect.caption\">{{rect.caption}}</p>
            </div>
        </div>',
        link: function(scope, element) {

            scope.setDeleteAlignment = function(rect) {
                if(rect.x2 > 95) {
                    return { left: '-25px' };
                }
            }

            scope.setTitleAlignment = function(rect) {
                if(rect.y2 > 95) {
                    return { top: '-35px' };
                }
            }


            scope.$on('mrImageDisplayArea', function(e, data) {
                scope.displayArea = data;
            });

            scope.$on('mrImageHideArea', function(e, data) {
                scope.displayArea = null;
            });

            scope.displayInformations = function(areaID) {
                scope.displayArea = areaID;
            }

            scope.hideInformations = function() {
                scope.displayArea = null;
            }

            scope.toggleDisplayOptions = function(areaID) {

                if(scope.selectedArea != areaID) {
                    scope.selectedArea   = areaID;
                    scope.displayOptions = true;
                } else {
                    scope.selectedArea   = null;
                    scope.displayOptions = false;
                }
            }

            scope.delete = function(index) {
                scope.$emit('mrImageDeleteEvent', scope.rects[index]);
                scope.rects.splice(index, 1);
            }

        },
    };
});
{'fraction_non_alphanumeric': 0.15442846328538987, 'fraction_numerical': 0.005299015897047691, 'mean_word_length': 1.578048780487805, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 25, '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': '5185188', 'n_tokens_mistral': 1548, 'n_tokens_neox': 1472, 'n_words': 232}