<commit_before>import Ember from 'ember';
import d3lper from 'mapp/utils/d3lper';
import {isChrome} from 'mapp/utils/browser-check';
import zoom2 from 'mapp/utils/d3-zoom2';

let zoom;

export default Ember.Mixin.create({

  zoomInit(d3g) {

    // DRAG & ZOOM
    zoom = zoom2()
      .scaleExtent([1, 12])
      .band(0.5)
      .on("zoom", (scale, translate) => {
        
        this.zoomAndDrag(scale, translate);

      })
      .scale(this.get('graphLayout.zoom'));
    
    let updateTxTy = () => {
      zoom.translate([
        this.get('relTx'),
        this.get('relTy')
      ]);
    }
    this.addObserver('relTx', 'relTy', updateTxTy);
    updateTxTy();

    d3g.call(zoom);

  },

  relTx: Ember.computed('graphLayout.tx', {
    get() {
      return this.get('graphLayout.tx')*this.getSize().w;
    },
    set(k, v) {
      this.set('graphLayout.tx', v/this.getSize().w);
      return v;
    }
  }),

  relTy: Ember.computed('graphLayout.ty', {
    get() {
      return this.get('graphLayout.ty')*this.getSize().h;
    },
    set(k, v) {
      this.set('graphLayout.ty', v/this.getSize().h);
      return v;
    }
  }),

  zoomAndDrag(scale, translate) {
    
    let mapG = this.d3l().select("g.map"),
        projector = this.get('projector'),
        t = projector.initialTranslate,
        ds = projector.scale() / projector.resolution,
        rs = scale/ds,
        tx = projector.translate()[0]*rs - t[0] * scale,
        ty = projector.translate()[1]*rs - t[1] * scale;

    mapG
      .attr({
        "kis:kis:tx": translate[0],
        "kis:kis:ty": translate[1],
        s: scale
      })
      .transition().duration(400).ease("cubic-out")
      .attr({
        "transform": `${d3lper.translate({tx: translate[0] - tx, ty: translate[1] - ty})} scale(${rs})`
      })
      .each("end", () => {
        
        mapG.attr("transform", null)
          .selectAll("g.layers .shape")
          .attr("transform", null);
        
        this.get('graphLayout').beginPropertyChanges();
        
        this.setProperties({
          "graphLayout.zoom": parseFloat(mapG.attr("s")),<commit_msg>ajout interrupt dans les transitions du zoom<commit_after>import Ember from 'ember';
import d3lper from 'mapp/utils/d3lper';
import {isChrome} from 'mapp/utils/browser-check';
import zoom2 from 'mapp/utils/d3-zoom2';

let zoom;

export default Ember.Mixin.create({

  zoomInit(d3g) {

    // DRAG & ZOOM
    zoom = zoom2()
      .scaleExtent([1, 12])
      .band(0.5)
      .on("zoom", (scale, translate) => {
        
        this.zoomAndDrag(scale, translate);

      })
      .scale(this.get('graphLayout.zoom'));
    
    let updateTxTy = () => {
      zoom.translate([
        this.get('relTx'),
        this.get('relTy')
      ]);
    }
    this.addObserver('relTx', 'relTy', updateTxTy);
    updateTxTy();

    d3g.call(zoom);

  },

  relTx: Ember.computed('graphLayout.tx', {
    get() {
      return this.get('graphLayout.tx')*this.getSize().w;
    },
    set(k, v) {
      this.set('graphLayout.tx', v/this.getSize().w);
      return v;
    }
  }),

  relTy: Ember.computed('graphLayout.ty', {
    get() {
      return this.get('graphLayout.ty')*this.getSize().h;
    },
    set(k, v) {
      this.set('graphLayout.ty', v/this.getSize().h);
      return v;
    }
  }),

  zoomAndDrag(scale, translate) {
    
    let mapG = this.d3l().select("g.map"),
        projector = this.get('projector'),
        t = projector.initialTranslate,
        ds = projector.scale() / projector.resolution,
        rs = scale/ds,
        tx = projector.translate()[0]*rs - t[0] * scale,
        ty = projector.translate()[1]*rs - t[1] * scale;

    mapG
      .attr({
        "kis:kis:tx": translate[0],
        "kis:kis:ty": translate[1],
        s: scale
      })
      .interrupt().transition().duration(400).ease("cubic-out")
      .attr({
        "transform": `${d3lper.translate({tx: translate[0] - tx, ty: translate[1] - ty})} scale(${rs})`
      })
      .each("end", () => {
        
        console.log("end");
        mapG.attr("transform", null)
          .selectAll("g.layers .shape")
          .attr("transform", null);
        
        this.get('graphLayout').beginPropertyChanges();
        
        this.setProperties({
          "graphLayout.zoom": parseFloat(mapG.attr("s")),
{'fraction_non_alphanumeric': 0.18466898954703834, 'fraction_numerical': 0.01207897793263647, 'mean_word_length': 2.2473604826546003, 'pattern_counts': {'":': 8, '<': 3, '<?xml version=': 0, '>': 9, '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': '806968', 'n_tokens_mistral': 1524, 'n_tokens_neox': 1487, 'n_words': 242}