How to use vega-event-selector - 10 common examples

To help you get started, we’ve selected a few vega-event-selector examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vega / vega / packages / vega-parser / src / parsers / update.js View on Github external
export default function(spec, scope, target) {
  var events = spec.events,
      update = spec.update,
      encode = spec.encode,
      sources = [],
      entry = {target: target};

  if (!events) {
    error('Signal update missing events specification.');
  }

  // interpret as an event selector string
  if (isString(events)) {
    events = selector(events, scope.isSubscope() ? Scope : View);
  }

  // separate event streams from signal updates
  events = array(events)
    .filter(s => s.signal || s.scale ? (sources.push(s), 0) : 1);

  // merge internal operator listeners
  if (sources.length > 1) {
    sources = [mergeSources(sources)];
  }

  // merge event streams, include as source
  if (events.length) {
    sources.push(events.length > 1 ? {merge: events} : events[0]);
  }
github vega / vega-lite / build / src / compile / selection / selection.js View on Github external
// a property (e.g., "nearest": true).
        for (const key in cfg) {
            // A selection should contain either `encodings` or `fields`, only use
            // default values for these two values if neither of them is specified.
            if ((key === 'encodings' && selDef.fields) || (key === 'fields' && selDef.encodings)) {
                continue;
            }
            if (key === 'mark') {
                selDef[key] = Object.assign({}, cfg[key], selDef[key]);
            }
            if (selDef[key] === undefined || selDef[key] === true) {
                selDef[key] = cfg[key] || selDef[key];
            }
        }
        name = varName(name);
        const selCmpt = (selCmpts[name] = Object.assign({}, selDef, { name: name, events: isString(selDef.on) ? parseSelector(selDef.on, 'scope') : selDef.on }));
        forEachTransform(selCmpt, txCompiler => {
            if (txCompiler.parse) {
                txCompiler.parse(model, selDef, selCmpt);
            }
        });
    }
    return selCmpts;
}
export function assembleUnitSelectionSignals(model, signals) {
github vega / vega-lite / src / compile / selection / parse.ts View on Github external
}

      if (key === 'mark') {
        selDef[key] = {...cfg[key], ...selDef[key]};
      }

      if (selDef[key] === undefined || selDef[key] === true) {
        selDef[key] = cfg[key] ?? selDef[key];
      }
    }

    const safeName = varName(name);
    const selCmpt = (selCmpts[safeName] = {
      ...selDef,
      name: safeName,
      events: isString(selDef.on) ? parseSelector(selDef.on, 'scope') : duplicate(selDef.on)
    } as any);

    forEachTransform(selCmpt, txCompiler => {
      if (txCompiler.has(selCmpt) && txCompiler.parse) {
        txCompiler.parse(model, selCmpt, selDef, selDefs[name]);
      }
    });
  }

  return selCmpts;
}
github vega / vega-lite / build / src / compile / selection / transforms / zoom.js View on Github external
signals: (model, selCmpt, signals) => {
        const name = selCmpt.name;
        const hasScales = scalesCompiler.has(selCmpt);
        const delta = name + DELTA;
        const { x, y } = selCmpt.project.has;
        const sx = stringValue(model.scaleName(X));
        const sy = stringValue(model.scaleName(Y));
        let events = parseSelector(selCmpt.zoom, 'scope');
        if (!hasScales) {
            events = events.map(e => ((e.markname = name + INTERVAL_BRUSH), e));
        }
        signals.push({
            name: name + ANCHOR,
            on: [
                {
                    events: events,
                    update: !hasScales
                        ? `{x: x(unit), y: y(unit)}`
                        : '{' +
                            [sx ? `x: invert(${sx}, x(unit))` : '', sy ? `y: invert(${sy}, y(unit))` : '']
                                .filter(expr => !!expr)
                                .join(', ') +
                            '}'
                }
github vega / vega-lite / src / compile / selection / assemble.ts View on Github external
export function assembleFacetSignals(model: FacetModel, signals: Signal[]) {
  if (model.component.selection && keys(model.component.selection).length) {
    const name = stringValue(model.getName('cell'));
    signals.unshift({
      name: 'facet',
      value: {},
      on: [
        {
          events: parseSelector('mousemove', 'scope'),
          update: `isTuple(facet) ? facet : group(${name}).datum`
        }
      ]
    });
  }

  return cleanupEmptyOnArray(signals);
}
github vega / vega-lite / src / compile / selection / transforms / clear.ts View on Github external
parse: (model, selDef, selCmpt) => {
    if (selDef.clear) {
      selCmpt.clear = parseSelector(selDef.clear, 'scope');
    }
  },
github vega / vega-lite / src / compile / selection / transforms / translate.ts View on Github external
signals: (model, selCmpt, signals) => {
    const name = selCmpt.name;
    const hasScales = scalesCompiler.has(selCmpt);
    const anchor = name + ANCHOR;
    const {x, y} = selCmpt.project.hasChannel;
    let events = parseSelector(selCmpt.translate, 'scope');

    if (!hasScales) {
      events = events.map(e => ((e.between[0].markname = name + INTERVAL_BRUSH), e));
    }

    signals.push(
      {
        name: anchor,
        value: {},
        on: [
          {
            events: events.map(e => e.between[0]),
            update:
              '{x: x(unit), y: y(unit)' +
              (x !== undefined ? ', extent_x: ' + (hasScales ? domain(model, X) : `slice(${x.signals.visual})`) : '') +
              (y !== undefined ? ', extent_y: ' + (hasScales ? domain(model, Y) : `slice(${y.signals.visual})`) : '') +
github vega / vega-lite / build / src / compile / selection / transforms / translate.js View on Github external
signals: (model, selCmpt, signals) => {
        const name = selCmpt.name;
        const hasScales = scalesCompiler.has(selCmpt);
        const anchor = name + ANCHOR;
        const { x, y } = selCmpt.project.has;
        let events = parseSelector(selCmpt.translate, 'scope');
        if (!hasScales) {
            events = events.map(e => ((e.between[0].markname = name + INTERVAL_BRUSH), e));
        }
        signals.push({
            name: anchor,
            value: {},
            on: [
                {
                    events: events.map(e => e.between[0]),
                    update: '{x: x(unit), y: y(unit)' +
                        (x !== undefined ? ', extent_x: ' + (hasScales ? domain(model, X) : `slice(${x.signals.visual})`) : '') +
                        (y !== undefined ? ', extent_y: ' + (hasScales ? domain(model, Y) : `slice(${y.signals.visual})`) : '') +
                        '}'
                }
            ]
        }, {
github vega / vega-lite / build / src / compile / selection / selection.js View on Github external
export function assembleFacetSignals(model, signals) {
    if (model.component.selection && keys(model.component.selection).length) {
        const name = stringValue(model.getName('cell'));
        signals.unshift({
            name: 'facet',
            value: {},
            on: [
                {
                    events: parseSelector('mousemove', 'scope'),
                    update: `isTuple(facet) ? facet : group(${name}).datum`
                }
            ]
        });
    }
    return signals;
}
export function assembleTopLevelSignals(model, signals) {
github vega / vega-lite / src / compile / selection / transforms / zoom.ts View on Github external
signals: (model, selCmpt, signals) => {
    const name = selCmpt.name;
    const hasScales = scalesCompiler.has(selCmpt);
    const delta = name + DELTA;
    const {x, y} = selCmpt.project.hasChannel;
    const sx = stringValue(model.scaleName(X));
    const sy = stringValue(model.scaleName(Y));
    let events = parseSelector(selCmpt.zoom, 'scope');

    if (!hasScales) {
      events = events.map(e => ((e.markname = name + INTERVAL_BRUSH), e));
    }

    signals.push(
      {
        name: name + ANCHOR,
        on: [
          {
            events: events,
            update: !hasScales
              ? `{x: x(unit), y: y(unit)}`
              : '{' +
                [sx ? `x: invert(${sx}, x(unit))` : '', sy ? `y: invert(${sy}, y(unit))` : '']
                  .filter(expr => !!expr)

vega-event-selector

A CSS-inspired language to select, sequence, and compose DOM events.

BSD-3-Clause
Latest version published 1 year ago

Package Health Score

84 / 100
Full package analysis

Popular vega-event-selector functions