TypeScript vega-event-selector.selector函数代码示例

 it('builds them for default invocation', () => {
   model.component.selection = {four: selCmpts['four']};
   const signals = assembleUnitSelectionSignals(model, []);
   expect(signals).toEqual(
     expect.arrayContaining([
       {
         name: 'four_translate_anchor',
         value: {},
         on: [
           {
             events: parseSelector('@four_brush:mousedown', 'scope'),
             update: '{x: x(unit), y: y(unit), extent_x: slice(four_x), extent_y: slice(four_y)}'
           }
         ]
       },
       {
         name: 'four_translate_delta',
         value: {},
         on: [
           {
             events: parseSelector('[@four_brush:mousedown, window:mouseup] > window:mousemove!', 'scope'),
             update: '{x: four_translate_anchor.x - x(unit), y: four_translate_anchor.y - y(unit)}'
           }
         ]
       }
     ])
   );
 });

 it('builds them for custom events', () => {
   const {model, selCmpts} = getModel();
   model.component.selection = {five: selCmpts['five']};
   const signals = assembleUnitSelectionSignals(model, []);
   expect(signals).toEqual(
     expect.arrayContaining([
       {
         name: 'five_zoom_anchor',
         on: [
           {
             events: parseSelector('@five_brush:wheel, @five_brush:pinch', 'scope'),
             update: '{x: x(unit), y: y(unit)}'
           }
         ]
       },
       {
         name: 'five_zoom_delta',
         on: [
           {
             events: parseSelector('@five_brush:wheel, @five_brush:pinch', 'scope'),
             force: true,
             update: 'pow(1.001, event.deltaY * pow(16, event.deltaMode))'
           }
         ]
       }
     ])
   );
 });

 it('appends clear transform', () => {
   const intervalOneSg = interval.signals(model, selCmpts['one']);
   const oneSg = clear.signals(model, selCmpts['one'], intervalOneSg);
   expect(oneSg).toEqual(
     expect.arrayContaining([
       {
         name: 'one_Horsepower',
         on: [
           {
             events: parseSelector('dblclick', 'scope'),
             update: 'null'
           }
         ]
       },
       {
         name: 'one_Miles_per_Gallon',
         on: [
           {
             events: parseSelector('dblclick', 'scope'),
             update: 'null'
           }
         ]
       }
     ])
   );
 });

  it('supports inline default overrides', () => {
    const component = parseUnitSelection(model, {
      one: {
        type: 'single',
        on: 'dblclick',
        fields: ['Cylinders']
      },
      two: {
        type: 'multi',
        on: 'mouseover',
        toggle: 'event.ctrlKey',
        encodings: ['color']
      },
      three: {
        type: 'interval',
        on: '[mousedown[!event.shiftKey], mouseup] > mousemove',
        encodings: ['y'],
        translate: false,
        zoom: 'wheel[event.altKey]'
      }
    });

    expect(keys(component)).toEqual(['one', 'two', 'three']);

    expect(component.one.name).toBe('one');
    expect(component.one.type).toBe('single');
    expect(component['one'].project.items).toEqual(
      expect.arrayContaining([{field: 'Cylinders', type: 'E', signals: {data: 'one_Cylinders'}}])
    );
    expect(component['one'].events).toEqual(parseSelector('dblclick', 'scope'));

    expect(component.two.name).toBe('two');
    expect(component.two.type).toBe('multi');
    expect(component.two.toggle).toBe('event.ctrlKey');
    expect(component['two'].project.items).toEqual(
      expect.arrayContaining([
        {field: 'Origin', channel: 'color', type: 'E', signals: {data: 'two_Origin', visual: 'two_color'}}
      ])
    );
    expect(component['two'].events).toEqual(parseSelector('mouseover', 'scope'));

    expect(component.three.name).toBe('three');
    expect(component.three.type).toBe('interval');
    expect(component.three.translate).toEqual(false);
    expect(component.three.zoom).toBe('wheel[event.altKey]');
    expect(component['three'].project.items).toEqual(
      expect.arrayContaining([
        {
          field: 'Miles_per_Gallon',
          channel: 'y',
          type: 'R',
          signals: {data: 'three_Miles_per_Gallon', visual: 'three_y'}
        }
      ])
    );
    expect(component['three'].events).toEqual(
      parseSelector('[mousedown[!event.shiftKey], mouseup] > mousemove', 'scope')
    );
  });

export function parseUnitSelection(model: UnitModel, selDefs: Dict<SelectionDef>) {
  const selCmpts: Dict<SelectionComponent<any /* this has to be "any" so typing won't fail in test files*/>> = {};
  const selectionConfig = model.config.selection;

  if (selDefs) {
    selDefs = duplicate(selDefs); // duplicate to avoid side effects to original spec
  }

  for (let name in selDefs) {
    if (!selDefs.hasOwnProperty(name)) {
      continue;
    }

    const selDef = selDefs[name];
    const {fields, encodings, ...cfg} = selectionConfig[selDef.type]; // Project transform applies its defaults.

    // Set default values from config if a property hasn't been specified,
    // or if it is true. E.g., "translate": true should use the default
    // event handlers for translate. However, true may be a valid value for
    // 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] = {...cfg[key], ...selDef[key]};
      }

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

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

    forEachTransform(selCmpt, txCompiler => {
      if (txCompiler.parse) {
        txCompiler.parse(model, selDef, selCmpt);
      }
    });
  }

  return selCmpts;
}

  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})`) : '') +
              '}'
          }
        ]
      },
      {
        name: name + DELTA,
        value: {},
        on: [
          {
            events: events,
            update: `{x: ${anchor}.x - x(unit), y: ${anchor}.y - y(unit)}`
          }
        ]
      }
    );

    if (x !== undefined) {
      onDelta(model, selCmpt, x, 'width', signals);
    }

    if (y !== undefined) {
      onDelta(model, selCmpt, y, 'height', signals);
    }

    return signals;
  }