deno.land / x / billboardjs@3.6.0 / ChartInternal / interactions / zoom.ts
نووسراو ببینە
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {drag as d3Drag} from "d3-drag";import {zoomIdentity as d3ZoomIdentity, zoom as d3Zoom, ZoomTransform as d3ZoomTransform} from "d3-zoom";import {$COMMON, $ZOOM} from "../../config/classes";import {callFn, diffDomain, getPointer, isFunction} from "../../module/util";
export default { /** * Initialize zoom. * @private */ initZoom(): void { const $$ = this;
$$.scale.zoom = null;
$$.generateZoom(); $$.initZoomBehaviour(); },
/** * Bind zoom event * @param {boolean} bind Weather bind or unbound * @private */ bindZoomEvent(bind = true): void { const $$ = this; const {config} = $$; const zoomEnabled = config.zoom_enabled;
if (zoomEnabled && bind) { // Do not bind zoom event when subchart is shown !config.subchart_show && $$.bindZoomOnEventRect(); } else if (bind === false) { $$.api.unzoom(); $$.unbindZoomEvent(); } },
/** * Generate zoom * @private */ generateZoom(): void { const $$ = this; const {config, org, scale} = $$;
const zoom = d3Zoom().duration(0) .on("start", $$.onZoomStart.bind($$)) .on("zoom", $$.onZoom.bind($$)) .on("end", $$.onZoomEnd.bind($$));
// get zoom extent // @ts-ignore zoom.orgScaleExtent = (): [number, number] => { const extent = config.zoom_extent || [1, 10];
return [extent[0], Math.max($$.getMaxDataCount() / extent[1], extent[1])]; };
// @ts-ignore zoom.updateScaleExtent = function() { const ratio = diffDomain($$.scale.x.orgDomain()) / diffDomain($$.getZoomDomain()); const extent = this.orgScaleExtent();
this.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
return this; };
/** * Update scale according zoom transform value * @param {object} transform transform object * @param {boolean} correctTransform if the d3 transform should be updated after rescaling * @private */ // @ts-ignore zoom.updateTransformScale = (transform: d3ZoomTransform, correctTransform: boolean): void => { const isRotated = config.axis_rotated;
// in case of resize, update range of orgXScale org.xScale?.range(scale.x.range());
// rescale from the original scale const newScale = transform[ isRotated ? "rescaleY" : "rescaleX" ](org.xScale || scale.x);
const domain = $$.trimXDomain(newScale.domain()); const rescale = config.zoom_rescale;
newScale.domain(domain, org.xDomain);
// prevent chart from panning off the edge and feeling "stuck" // https://github.com/naver/billboard.js/issues/2588 if (correctTransform) { const t = newScale(scale.x.domain()[0]); const tX = isRotated ? transform.x : t; const tY = isRotated ? t : transform.y;
$$.$el.eventRect.property("__zoom", d3ZoomIdentity.translate(tX, tY).scale(transform.k)); }
if (!$$.state.xTickOffset) { $$.state.xTickOffset = $$.axis.x.tickOffset(); }
scale.zoom = $$.getCustomizedScale(newScale); $$.axis.x.scale(scale.zoom);
if (rescale) { // copy current initial x scale in case of rescale option is used !org.xScale && (org.xScale = scale.x.copy()); scale.x.domain(domain); } };
/** * Get zoom domain * @returns {Array} zoom domain * @private */ // @ts-ignore zoom.getDomain = (): number|Date[] => { const domain = scale[scale.zoom ? "zoom" : "subX"].domain(); const isCategorized = $$.axis.isCategorized();
if (isCategorized) { domain[1] -= 2; }
return domain; }; $$.zoom = zoom; },
/** * 'start' event listener * @param {object} event Event object * @private */ onZoomStart(event): void { const $$ = this; const {sourceEvent} = event;
if (sourceEvent) { $$.zoom.startEvent = sourceEvent; $$.state.zooming = true; callFn($$.config.zoom_onzoomstart, $$.api, event); } },
/** * 'zoom' event listener * @param {object} event Event object * @private */ onZoom(event): void { const $$ = this; const {config, scale, state, org} = $$; const {sourceEvent} = event; const isUnZoom = event?.transform === d3ZoomIdentity;
if ( !config.zoom_enabled || $$.filterTargetsToShow($$.data.targets).length === 0 || (!scale.zoom && sourceEvent?.type.indexOf("touch") > -1 && sourceEvent?.touches.length === 1) ) { return; }
if (event.sourceEvent) { state.zooming = true; }
const isMousemove = sourceEvent?.type === "mousemove"; const isZoomOut = sourceEvent?.wheelDelta < 0; const {transform} = event;
if (!isMousemove && isZoomOut && scale.x.domain().every((v, i) => v !== org.xDomain[i])) { scale.x.domain(org.xDomain); }
$$.zoom.updateTransformScale(transform, config.zoom_type === "wheel" && sourceEvent);
// do zoom transiton when: // - zoom type 'drag' // - when .unzoom() is called (event.transform === d3ZoomIdentity) const doTransition = config.transition_duration > 0 && !config.subchart_show && ( state.dragging || isUnZoom || !event.sourceEvent );
$$.redraw({ withTransition: doTransition, withY: config.zoom_rescale, withSubchart: false, withEventRect: false, withDimension: false });
$$.state.cancelClick = isMousemove;
// do not call event cb when is .unzoom() is called !isUnZoom && callFn(config.zoom_onzoom, $$.api, $$.zoom.getDomain()); },
/** * 'end' event listener * @param {object} event Event object * @private */ onZoomEnd(event): void { const $$ = this; const {config, state} = $$; let {startEvent} = $$.zoom; let e = event?.sourceEvent; const isUnZoom = event?.transform === d3ZoomIdentity;
if (startEvent?.type.indexOf("touch") > -1) { startEvent = startEvent.changedTouches[0]; e = e?.changedTouches?.[0]; }
// if click, do nothing. otherwise, click interaction will be canceled. if (config.zoom_type === "drag" && ( e && startEvent.clientX === e.clientX && startEvent.clientY === e.clientY )) { return; }
$$.redrawEventRect(); $$.updateZoom();
state.zooming = false;
// do not call event cb when is .unzoom() is called !isUnZoom && (e || state.dragging) && callFn(config.zoom_onzoomend, $$.api, $$.zoom.getDomain()); },
/** * Update zoom * @param {boolean} force Force unzoom * @private */ updateZoom(force: boolean): void { const $$ = this; const {subX, x, zoom} = $$.scale;
if (zoom) { const zoomDomain = zoom.domain(); const xDomain = subX.domain(); const delta = 0.015; // arbitrary value
const isfullyShown = (zoomDomain[0] <= xDomain[0] || (zoomDomain[0] - delta) <= xDomain[0]) && (xDomain[1] <= zoomDomain[1] || xDomain[1] <= (zoomDomain[1] - delta));
// check if the zoomed chart is fully shown, then reset scale when zoom is out as initial if (force || isfullyShown) { $$.axis.x.scale(subX); x.domain(subX.orgDomain()); $$.scale.zoom = null; } } },
/** * Attach zoom event on <rect> * @private */ bindZoomOnEventRect(): void { const $$ = this; const {config, $el: {eventRect}} = $$; const behaviour = config.zoom_type === "drag" ? $$.zoomBehaviour : $$.zoom;
// Since Chrome 89, wheel zoom not works properly // Applying the workaround: https://github.com/d3/d3-zoom/issues/231#issuecomment-802305692 $$.$el.svg.on("wheel", () => {});
eventRect .call(behaviour) .on("dblclick.zoom", null); },
/** * Initialize the drag behaviour used for zooming. * @private */ initZoomBehaviour(): void { const $$ = this; const {config, state} = $$; const isRotated = config.axis_rotated; let start = 0; let end = 0; let zoomRect;
const prop = { axis: isRotated ? "y" : "x", attr: isRotated ? "height" : "width", index: isRotated ? 1 : 0 };
$$.zoomBehaviour = d3Drag() .clickDistance(4) .on("start", function(event) { state.event = event; $$.setDragStatus(true); $$.unselectRect();
if (!zoomRect) { zoomRect = $$.$el.main.append("rect") .attr("clip-path", state.clip.path) .attr("class", $ZOOM.zoomBrush) .attr("width", isRotated ? state.width : 0) .attr("height", isRotated ? 0 : state.height); }
start = getPointer(event, this)[prop.index]; end = start;
zoomRect .attr(prop.axis, start) .attr(prop.attr, 0);
$$.onZoomStart(event); }) .on("drag", function(event) { end = getPointer(event, this)[prop.index];
zoomRect .attr(prop.axis, Math.min(start, end)) .attr(prop.attr, Math.abs(end - start)); }) .on("end", event => { const scale = $$.scale.zoom || $$.scale.x;
state.event = event;
zoomRect .attr(prop.axis, 0) .attr(prop.attr, 0);
if (start > end) { [start, end] = [end, start]; }
if (start < 0) { end += Math.abs(start); start = 0; }
if (start !== end) { $$.api.zoom([start, end].map(v => scale.invert(v))); }
$$.setDragStatus(false); }); },
setZoomResetButton(): void { const $$ = this; const {config, $el} = $$; const resetButton = config.zoom_resetButton;
if (resetButton && config.zoom_type === "drag") { if (!$el.zoomResetBtn) { $el.zoomResetBtn = $$.$el.chart.append("div") .classed($COMMON.button, true) .append("span") .on("click", function() { isFunction(resetButton.onclick) && resetButton.onclick.bind($$.api)(this); $$.api.unzoom(); }) .classed($ZOOM.buttonZoomReset, true) .text(resetButton.text || "Reset Zoom"); } else { $el.zoomResetBtn.style("display", null); } } }};
billboardjs
Version Info
a year ago
