Changeset 111550 in spip-zone


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

debut de sélecteur de format, non fonctionnel…

File:
1 edited

Legend:

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

    r111549 r111550  
    7676         * Mettre à jour les valeurs du formulaire
    7777         */
    78         function form_set (valeurs) {
     78        function form_set (selection) {
    7979                // console.log('-- form_set');
    80                 // console.log(valeurs);
    81 
    82                 self.find('input[name=x1]').attr('value', valeurs.x1);
    83                 self.find('input[name=x2]').attr('value', valeurs.x2);
    84                 self.find('input[name=y1]').attr('value', valeurs.y1);
    85                 self.find('input[name=y2]').attr('value', valeurs.y2);
    86                 self.find('input[name=zoom]').attr('value', valeurs.zoom);
    87 
    88                 self.find('.dimensions').html((valeurs.x2 - valeurs.x1) + ' x ' + (valeurs.y2 - valeurs.y1));
     80                // console.log(s);
     81
     82                // On travaille sur une copie de l'objet passé en paramètre, pour ne pas
     83                // faire d'effets de bord
     84                var s = Object.assign({}, selection);
     85
     86                /* En mode "dimensions forcées", on permet des sélections plus
     87                   grandes que les dimensions voulues. Il faut alors tout
     88                   remettre à la bonne échelle. */
     89                if (dimensions_forcees) {
     90                        var echelle = (s.x2 - s.x1) * min(1, s.zoom) / largeur_forcee;
     91
     92                        s.zoom = s.zoom / echelle;
     93
     94                        s.x1 = round(s.x1 * s.zoom);
     95                        s.y1 = round(s.y1 * s.zoom),
     96
     97                        s.x2 = s.x1 + largeur_forcee;
     98                        s.y2 = s.y1 + hauteur_forcee;
     99                }
     100
     101                self.find('input[name=x1]').attr('value', s.x1);
     102                self.find('input[name=x2]').attr('value', s.x2);
     103                self.find('input[name=y1]').attr('value', s.y1);
     104                self.find('input[name=y2]').attr('value', s.y2);
     105                self.find('input[name=zoom]').attr('value', s.zoom);
     106
     107                self.find('.dimensions').html((s.x2 - s.x1) + ' x ' + (s.y2 - s.y1));
    89108        }
    90109
     
    126145                                        img_set(form_get());
    127146                                });
    128                                 // init_selecteur_format();
     147                                selecteur_format_init();
    129148                                // init_bouton_reinit();
    130149                        },
     
    180199                        slide: function (event, ui) {
    181200
    182                                 var selection = form_get();
    183 
    184                                 selection.zoom = ui.value;
     201                                var selection = imgAreaSelector.getSelection();
     202
     203                                /* Le widget nous donne un objet avec des infos inutiles, on
     204                                 * nettoie un peu… */
     205                                delete selection.width;
     206                                delete selection.height;
     207
     208                                selection.zoom = parseFloat(ui.value);
    185209                                selection = zoom_selection(selection);
     210                                if (dimensions_forcees) {
     211                                        selection = contraindre_selection(selection);
     212                                }
    186213
    187214                                form_set(selection);
     
    189216                        }
    190217                });
     218        }
     219
     220        /**
     221         * Initialisation du sélecteur de format
     222         */
     223        function selecteur_format_init () {
     224
     225                selecteur_format.change(function (e) {
     226
     227                        var selection = form_get(),
     228                                format = e.target.value;
     229
     230                        if (format) {
     231                                dimensions_forcees = true;
     232
     233                                format = format.split(':');
     234                                largeur_forcee = parseInt(format[0], 10);
     235                                hauteur_forcee = parseInt(format[1], 10);
     236
     237                                imgAreaSelector.setOptions({
     238                                        aspectRatio: largeur_forcee + ':' + hauteur_forcee,
     239                                        minWidth: round(largeur_forcee * min(1, selection.zoom)),
     240                                        minHeight: round(hauteur_forcee * min(1, selection.zoom))
     241                                });
     242
     243                                slider.slider('option', 'min', zoom_min_get());
     244                                slider.slider('option', 'value', max(zoom_min_get(), selection.zoom));
     245
     246                                selection = contraindre_selection(selection);
     247
     248                                img_set(selection);
     249                                selector_set(selection);
     250                                form_set(selection);
     251
     252                        } else {
     253                                dimensions_forcees = false;
     254                                largeur_forcee = NaN;
     255                                hauteur_forcee = NaN;
     256
     257                                slider.slider('option', 'min', 0.01);
     258
     259                                imgAreaSelector.setOptions({
     260                                        aspectRatio: '',
     261                                        minWidth: 1,
     262                                        minHeight: 1
     263                                });
     264                        }
     265                })
     266                        .trigger('change');
    191267        }
    192268
     
    300376                return s;
    301377        }
     378
     379        /**
     380         * Retourne la sélection aux dimensions imposées dont le centre est
     381         * identique à la sélection passée en paramètre.
     382         */
     383        function contraindre_selection (s) {
     384
     385                var zoom_min = zoom_min_get();
     386
     387                // Si c'est nécessaire, on commence par zoomer.
     388                if (s.zoom < zoom_min) {
     389                        s.zoom = zoom_min;
     390                        s = zoom_selection(s);
     391                }
     392
     393                // Une fois qu'on est certain d'avoir la place, on calcule une nouvelle
     394                // sélection.
     395                var taille_canevas  = {
     396                                x: round(largeur_image * s.zoom),
     397                                y: round(hauteur_image * s.zoom)
     398                        },
     399                        centre = {
     400                                x: (s.x2 + s.x1) / 2,
     401                                y: (s.y2 + s.y1) / 2
     402                        },
     403                        echelle_x = (s.x2 - s.x1) * min(1, s.zoom) / largeur_forcee,
     404                        echelle_y = (s.y2 - s.y1) * min(1, s.zoom) / hauteur_forcee,
     405                        echelle = max(1, min(echelle_x, echelle_y)),
     406                        largeur_selection = largeur_forcee * echelle,
     407                        hauteur_selection = hauteur_forcee * echelle;
     408
     409                s = $.extend(s, {
     410                        x1: round(max(0, centre.x - (largeur_selection / 2))),
     411                        y1: round(max(0, centre.y - (hauteur_selection / 2))),
     412                });
     413
     414                s.x2 = round(s.x1 + largeur_selection);
     415                s.y2 = round(s.y1 + hauteur_selection);
     416
     417                if (s.x2 > taille_canevas.x) {
     418                        s.x1 = s.x1 - (s.x2 - taille_canevas.x);
     419                        s.x2 = taille_canevas.x;
     420                }
     421                if (s.y2 > taille_canevas.y) {
     422                        s.y1 = s.y1 - (s.y2 - taille_canevas.y);
     423                        s.y2 = taille_canevas.y;
     424                }
     425
     426                return s;
     427        }
     428
     429        function zoom_min_get () {
     430
     431                return Math.max(
     432                        largeur_forcee / largeur_image,
     433                        hauteur_forcee / hauteur_image
     434                );
     435        }
    302436};
Note: See TracChangeset for help on using the changeset viewer.