Changeset 111553 in spip-zone


Ignore:
Timestamp:
Sep 11, 2018, 8:10:44 AM (7 months ago)
Author:
bystrano@…
Message:

On "purifie" au maximum les fonctions pour les rendre facilement testables

on en profite pour renommer un peu des variables pour alléger

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/massicot/trunk/javascripts/formulaireMassicoterImage.js

    r111552 r111553  
    1313                conteneur = self.parent().find('.image-massicot'),
    1414                img = conteneur.find('img'),
    15                 largeur_image = parseInt(img.attr('width'), 10),
    16                 hauteur_image = parseInt(img.attr('height'), 10),
     15                dimensions_image = {
     16                        x: parseInt(img.attr('width'), 10),
     17                        y: parseInt(img.attr('height'), 10)
     18                },
    1719                // options
    1820                dimensions_forcees = options.forcer_dimensions instanceof Object,
    19                 largeur_forcee = dimensions_forcees ? parseInt(options.forcer_dimensions.largeur, 10) : NaN,
    20                 hauteur_forcee = dimensions_forcees ? parseInt(options.forcer_dimensions.hauteur, 10) : NaN,
     21                contrainte_selection = {
     22                        x: dimensions_forcees ? parseInt(options.forcer_dimensions.largeur, 10) : NaN,
     23                        y: dimensions_forcees ? parseInt(options.forcer_dimensions.hauteur, 10) : NaN
     24                },
    2125                // On garde en mémoire la sélection telle qu'elle a été saisie via le
    2226                // widget de sélection, en ignorant l'effet d'éventuels zooms à venir.
     
    2832                slider,
    2933                selecteur_format = self.find('select[name=format]'),
     34                // Raccourcis
    3035                round = Math.round,
    3136                max = Math.max,
    3237                min = Math.min,
     38                // La suite de tests
    3339                tests = [];
    3440
     
    5157
    5258                var valeurs_form = form_get();
    53                 // console.log('-- form init');
    54                 // console.log(valeurs_form);
    5559
    5660                if (isNaN(valeurs_form.x1)) {
     
    6973         */
    7074        function form_get () {
    71                 // console.log('form_get');
    7275
    7376                return {
     
    8487         */
    8588        function form_set (selection) {
    86                 // console.log('-- form_set');
    87                 // console.log(s);
    8889
    8990                // On travaille sur une copie de l'objet passé en paramètre, pour ne pas
     
    9596                   remettre à la bonne échelle. */
    9697                if (dimensions_forcees) {
    97                         s = etendre_selection(s, { x: largeur_forcee, y: hauteur_forcee });
     98                        s = etendre_selection(s, contrainte_selection);
    9899                }
    99100
     
    166167        function GUI_init () {
    167168
    168                 var selection = form_get();
     169                var s_init = form_get();
    169170
    170171                imgAreaSelector = conteneur.imgAreaSelect({
     
    172173                        handles: true,
    173174                        show: true,
    174                         x1: selection.x1,
    175                         x2: selection.x2,
    176                         y1: selection.y1,
    177                         y2: selection.y2,
     175                        x1: s_init.x1,
     176                        x2: s_init.x2,
     177                        y1: s_init.y1,
     178                        y2: s_init.y2,
    178179                        /* On fait toutes les initialisations des autres widgets dans ce
    179180                         * callback, pour être certain de pouvoir utiliser
     
    184185
    185186                                        imgAreaSelector.setOptions({
    186                                                 aspectRatio: largeur_forcee + ':' + hauteur_forcee,
    187                                                 minWidth: round(largeur_forcee * selection.zoom),
    188                                                 minHeight: round(hauteur_forcee * selection.zoom)
     187                                                aspectRatio: contrainte_selection.x + ':' + contrainte_selection.y,
     188                                                minWidth: round(contrainte_selection.x * s_init.zoom),
     189                                                minHeight: round(contrainte_selection.y * s_init.zoom)
    189190                                        });
    190191
     
    192193                                }
    193194
    194                                 slider_init(selection, function () {
     195                                slider_init(s_init, function () {
    195196                                        /* Après avoir un initialisé le slider, la mise en page ne
    196197                                           bougera plus. On peut alors initialiser la sélection */
    197                                         derniere_selection_widget = form_get();
    198                                         img_set(form_get());
     198                                        var s = GUI_get_selection();
     199                                        derniere_selection_widget = s;
     200                                        img_set(s);
    199201                                });
     202
    200203                                selecteur_format_init();
    201                                 // init_bouton_reinit();
    202204                        },
    203205                        onSelectChange: function (img, s) {
     
    231233
    232234        /**
     235         * Retourne la sélection courante
     236         */
     237        function GUI_get_selection () {
     238
     239                var s = imgAreaSelector.getSelection();
     240
     241                delete s.width;
     242                delete s.height;
     243
     244                s = $.extend(form_get(), s);
     245
     246                if (slider && slider.slider instanceof Function) {
     247                        s.zoom = slider.slider('option', 'value');
     248                }
     249
     250                return s;
     251        }
     252
     253        /**
    233254         * Mettre à jour le widget de sélection
    234255         */
    235         function selector_set (selection) {
    236 
    237                 imgAreaSelector.setSelection(
    238                         selection.x1,
    239                         selection.y1,
    240                         selection.x2,
    241                         selection.y2
    242                 );
     256        function selector_set (s) {
     257
     258                imgAreaSelector.setSelection(s.x1, s.y1, s.x2, s.y2);
    243259                imgAreaSelector.update();
    244260        }
     
    259275                        slide: function (event, ui) {
    260276
    261                                 var selection = imgAreaSelector.getSelection();
     277                                var s = imgAreaSelector.getSelection();
    262278
    263279                                /* Le widget nous donne un objet avec des infos inutiles, on
    264280                                 * nettoie un peu… */
    265                                 delete selection.width;
    266                                 delete selection.height;
    267 
    268                                 selection.zoom = parseFloat(ui.value);
    269                                 selection = zoom_selection(selection);
     281                                delete s.width;
     282                                delete s.height;
     283
     284                                s.zoom = parseFloat(ui.value);
     285
     286                                s = zoom_selection(s, derniere_selection_widget, dimensions_image);
     287
    270288                                if (dimensions_forcees) {
    271                                         selection = contraindre_selection(selection);
     289                                        s = contraindre_selection(s, contrainte_selection, derniere_selection_widget, dimensions_image);
    272290
    273291                                        imgAreaSelector.setOptions({
    274                                                 aspectRatio: largeur_forcee + ':' + hauteur_forcee,
    275                                                 minWidth: round(largeur_forcee * min(1, selection.zoom)),
    276                                                 minHeight: round(hauteur_forcee * min(1, selection.zoom))
     292                                                aspectRatio: contrainte_selection.x + ':' + contrainte_selection.y,
     293                                                minWidth: round(contrainte_selection.x * min(1, s.zoom)),
     294                                                minHeight: round(contrainte_selection.y * min(1, s.zoom))
    277295                                        });
    278296                                }
    279297
    280                                 form_set(selection);
    281                                 img_set(selection);
     298                                form_set(s);
     299                                img_set(s);
    282300                        }
    283301                });
     
    291309                selecteur_format.change(function (e) {
    292310
    293                         var selection = form_get(),
    294                                 format = e.target.value;
     311                        var s = GUI_get_selection(),
     312                                format = e.target.value,
     313                                zoom_min;
    295314
    296315                        if (format) {
     
    298317
    299318                                format = format.split(':');
    300                                 largeur_forcee = parseInt(format[0], 10);
    301                                 hauteur_forcee = parseInt(format[1], 10);
     319                                contrainte_selection.x = parseInt(format[0], 10);
     320                                contrainte_selection.y = parseInt(format[1], 10);
    302321
    303322                                imgAreaSelector.setOptions({
    304                                         aspectRatio: largeur_forcee + ':' + hauteur_forcee,
    305                                         minWidth: round(largeur_forcee * min(1, selection.zoom)),
    306                                         minHeight: round(hauteur_forcee * min(1, selection.zoom))
     323                                        aspectRatio: contrainte_selection.x + ':' + contrainte_selection.y,
     324                                        minWidth: round(contrainte_selection.x * min(1, s.zoom)),
     325                                        minHeight: round(contrainte_selection.y * min(1, s.zoom))
    307326                                });
    308327
    309                                 slider.slider('option', 'min', zoom_min_get());
    310                                 slider.slider('option', 'value', max(zoom_min_get(), selection.zoom));
    311 
    312                                 selection = contraindre_selection(selection);
    313 
    314                                 img_set(selection);
    315                                 selector_set(selection);
    316                                 form_set(selection);
     328                                zoom_min = zoom_min_get(contrainte_selection, dimensions_image);
     329
     330                                slider.slider('option', 'min', zoom_min);
     331                                slider.slider('option', 'value', max(zoom_min, s.zoom));
     332
     333                                s = contraindre_selection(s, contrainte_selection, derniere_selection_widget, dimensions_image);
     334
     335                                img_set(s);
     336                                selector_set(s);
     337                                form_set(s);
    317338
    318339                        } else {
    319340                                dimensions_forcees = false;
    320                                 largeur_forcee = NaN;
    321                                 hauteur_forcee = NaN;
     341                                contrainte_selection.x = NaN;
     342                                contrainte_selection.y = NaN;
    322343
    323344                                slider.slider('option', 'min', 0.01);
     
    334355
    335356        /**
    336          * Zoomer l'image et met à jour la sélection
    337          */
    338         function img_set (selection) {
     357         * Zoome l'image et met à jour la sélection
     358         */
     359        function img_set (s) {
    339360
    340361                conteneur
    341                         .css('width', selection.zoom * largeur_image + 'px')
    342                         .css('height', selection.zoom * hauteur_image + 'px')
    343                         .css('margin-left', '-' + (max((selection.zoom*largeur_image - 780),0) / 2) + 'px' );
     362                        .css('width', s.zoom * dimensions_image.x + 'px')
     363                        .css('height', s.zoom * dimensions_image.y + 'px')
     364                        .css('margin-left', '-' + (max((s.zoom*dimensions_image.x - 780),0) / 2) + 'px' );
    344365
    345366                img
    346                         .css('width', min(1, selection.zoom) * largeur_image + 'px')
    347                         .css('padding-top', (max(1, selection.zoom) - 1) / 2 * hauteur_image);
    348 
    349                 selector_set(selection);
     367                        .css('width', min(1, s.zoom) * dimensions_image.x + 'px')
     368                        .css('padding-top', (max(1, s.zoom) - 1) / 2 * dimensions_image.y);
     369
     370                selector_set(s);
    350371        }
    351372
     
    360381         * Retourne la sélection avec des coordonnées mises à jour.
    361382         */
    362         function zoom_selection (selection) {
    363 
    364                 var last = derniere_selection_widget,
     383        function zoom_selection (selection, last_selection, image) {
     384
     385                var last = Object.assign({}, last_selection),
    365386                        zoom = selection.zoom,
    366387                        s = { zoom: zoom },
    367388                        // La taille des marges autour de l'image
    368389                        marge_last = {
    369                                 x: (max(1, last.zoom) - 1) / 2 * largeur_image,
    370                                 y: (max(1, last.zoom) - 1) / 2 * hauteur_image,
     390                                x: (max(1, last.zoom) - 1) / 2 * image.x,
     391                                y: (max(1, last.zoom) - 1) / 2 * image.y,
    371392                        },
    372393                        marge = {
    373                                 x: (max(1, zoom) - 1) / 2 * largeur_image,
    374                                 y: (max(1, zoom) - 1) / 2 * hauteur_image,
     394                                x: (max(1, zoom) - 1) / 2 * image.x,
     395                                y: (max(1, zoom) - 1) / 2 * image.y,
    375396                        },
    376397                        // L'écart entre la sélection est le bord de l'image
     
    378399                                x1: marge_last.x - last.x1,
    379400                                y1: marge_last.y - last.y1,
    380                                 x2: last.x2 - (largeur_image + marge_last.x),
    381                                 y2: last.y2 - (hauteur_image + marge_last.y)
     401                                x2: last.x2 - (image.x + marge_last.x),
     402                                y2: last.y2 - (image.y + marge_last.y)
    382403                        };
    383404
     
    407428                                )),
    408429                                x2: round(min(
    409                                         largeur_image * zoom,
     430                                        image.x * zoom,
    410431                                        last.x2 / last.zoom * zoom
    411432                                )),
    412433                                y2: round(min(
    413                                         hauteur_image * zoom,
     434                                        image.y * zoom,
    414435                                        last.y2 / last.zoom * zoom
    415436                                )),
     
    430451                                )),
    431452                                x2: round(min(
    432                                         largeur_image * zoom,
    433                                         marge.x + ((largeur_image + ecart_last.x2) / min(1, last.zoom))
     453                                        image.x * zoom,
     454                                        marge.x + ((image.x + ecart_last.x2) / min(1, last.zoom))
    434455                                )),
    435456                                y2: round(min(
    436                                         hauteur_image * zoom,
    437                                         marge.y + ((hauteur_image + ecart_last.y2) / min(1, last.zoom))
     457                                        image.y * zoom,
     458                                        marge.y + ((image.y + ecart_last.y2) / min(1, last.zoom))
    438459                                ))
    439460                        });
     
    447468         * identique à la sélection passée en paramètre.
    448469         */
    449         function contraindre_selection (s) {
    450 
    451                 var zoom_min = zoom_min_get();
     470        function contraindre_selection (s, contrainte, last_selection, image) {
     471
     472                var zoom_min = zoom_min_get(contrainte, image);
    452473
    453474                // Si c'est nécessaire, on commence par zoomer.
    454475                if (s.zoom < zoom_min) {
    455476                        s.zoom = zoom_min;
    456                         s = zoom_selection(s);
     477                        s = zoom_selection(s, last_selection, image);
    457478                }
    458479
     
    460481                // sélection.
    461482                var taille_canevas  = {
    462                                 x: round(largeur_image * s.zoom),
    463                                 y: round(hauteur_image * s.zoom)
     483                                x: round(image.x * s.zoom),
     484                                y: round(image.y * s.zoom)
    464485                        },
    465486                        centre = {
     
    467488                                y: (s.y2 + s.y1) / 2
    468489                        },
    469                         echelle_x = (s.x2 - s.x1) * min(1, s.zoom) / largeur_forcee,
    470                         echelle_y = (s.y2 - s.y1) * min(1, s.zoom) / hauteur_forcee,
     490                        echelle_x = (s.x2 - s.x1) * min(1, s.zoom) / contrainte.x,
     491                        echelle_y = (s.y2 - s.y1) * min(1, s.zoom) / contrainte.y,
    471492                        echelle = max(1, min(echelle_x, echelle_y)),
    472                         largeur_selection = largeur_forcee * echelle,
    473                         hauteur_selection = hauteur_forcee * echelle;
     493                        largeur_selection = contrainte.x * echelle,
     494                        hauteur_selection = contrainte.y * echelle;
    474495
    475496                s = $.extend(s, {
     
    493514        }
    494515
    495         function zoom_min_get () {
     516        function zoom_min_get (contrainte, image) {
    496517
    497518                return Math.max(
    498                         largeur_forcee / largeur_image,
    499                         hauteur_forcee / hauteur_image
     519                        contrainte.x / image.x,
     520                        contrainte.y / image.y
    500521                );
    501522        }
     
    515536        };
    516537
     538        /* eslint-disable no-console */
    517539        function make_test (msg, test_func) {
    518540                return function () {
     
    553575                };
    554576        }
     577        /* eslint-enable no-console */
    555578
    556579        return self;
Note: See TracChangeset for help on using the changeset viewer.