drag.on("init") ? about d3-drag HOT 7 CLOSED

And the init event would be dispatched in here?

from d3-drag.

Another use case (with d3-zoom but it's exactly the same idea), is to help the initialization of the target's zoom factor, and initial draw, in https://observablehq.com/@fil/synchronized-projections

from d3-drag.

test here https://observablehq.com/d/4b48ecd05076e511

from d3-drag.

And another test to verify that we can bind all listeners (start drag end) on init.
https://observablehq.com/d/1999aec3a613880e

from d3-drag.

In this notebook, we implement initialization behavior (setting the __zoom property) by wrapping the zoom behavior in a function:

https://observablehq.com/@d3/versor-zooming

The awkward part is that when wrapping you must re-expose zoom.on so that callers can register event listeners.

While an init event would make this easier, I’m not sure we want to head in this direction. It feels more like inheritance than composition: we’re dependent on the behavior to expose all the events we need to implement our higher-level behavior. For example, what if you want to remove the styles when the element is no longer draggable, would we need a destroy event? (And should the events be called bind and unbind?) And would the drag behavior then need a drag.remove function instead of using selection.on to remove the drag listeners?

This discussion reminded me of an idea I’ve had for a while but apparently never wrote down: adopting native events. #73 That would also make it easier to build higher-level behaviors because you wouldn’t have the awkward aspect of re-exposing zoom.on (or drag.on): listeners are applied to elements rather than behaviors. So instead of:

  const zoom = d3.zoom()
      .scaleExtent(scaleExtent.map(x => x * scale))
      .on("start", zoomstarted)
      .on("zoom", zoomed);

  …

  return Object.assign(selection => selection
      .property("__zoom", d3.zoomIdentity.scale(projection.scale()))
      .call(zoom), {
    on(type, ...options) {
      return options.length
          ? (zoom.on(type, ...options), this)
          : zoom.on(type);
    }
  });

You might write:

  const zoom = d3.zoom()
      .scaleExtent(scaleExtent.map(x => x * scale));

  …

  return selection => selection
      .property("__zoom", d3.zoomIdentity.scale(projection.scale()))
      .on("zoomstart", zoomstarted)
      .on("zoom", zoomed)
      .call(zoom);

from d3-drag.

The awkward part is that when wrapping you must re-expose zoom.on

yes I had to read that code 10 times to get a sense of how it was constructed :) But this is indeed what I want to facilitate with this "init" event proposal. Maybe trough another technical approach though. https://observablehq.com/compare/[email protected]@319 works well (though I don't like having to set up the cursor at two very different places).

from d3-drag.

Another way of doing some "initial" work with the current code base is by diverting .touchable() :

  const touchable = zoom.touchable();

  zoom
    .touchable(function() {
      d3.select(this)
          .property("__zoom", d3.zoomIdentity.scale(projection.scale()))
          .style("cursor", "grab");
      return touchable.apply(this, arguments);
    })
    .on("start.cursor zoom.cursor end.cursor", function() {
      d3.select(this).style("cursor", d3.event.type === "end" ? "grab" : "grabbing");
    });

from d3-drag.