How to use config method in Appium Xcuitest Driver

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 */9'use strict';10const {HostComponent} = require('shared/ReactWorkTags');11let EventPluginHub;12let EventPluginUtils;13let ResponderEventPlugin;14const touch = function(nodeHandle, i) {15  return {target: nodeHandle, identifier: i};16};17function injectComponentTree(ComponentTree) {18  EventPluginUtils.setComponentTree(19    ComponentTree.getFiberCurrentPropsFromNode,20    ComponentTree.getInstanceFromNode,21    ComponentTree.getNodeFromInstance,22  );23}24/**25 * @param {NodeHandle} nodeHandle @see NodeHandle. Handle of target.26 * @param {Array<Touch>} touches All active touches.27 * @param {Array<Touch>} changedTouches Only the touches that have changed.28 * @return {TouchEvent} Model of a touch event that is compliant with responder29 * system plugin.30 */31const touchEvent = function(nodeHandle, touches, changedTouches) {32  return {33    target: nodeHandle,34    changedTouches: changedTouches,35    touches: touches,36  };37};38const subsequence = function(arr, indices) {39  const ret = [];40  for (let i = 0; i < indices.length; i++) {41    const index = indices[i];42    ret.push(arr[index]);43  }44  return ret;45};46const antiSubsequence = function(arr, indices) {47  const ret = [];48  for (let i = 0; i < arr.length; i++) {49    if (indices.indexOf(i) === -1) {50      ret.push(arr[i]);51    }52  }53  return ret;54};55/**56 * Helper for creating touch test config data.57 * @param allTouchHandles58 */59const _touchConfig = function(60  topType,61  targetNodeHandle,62  allTouchHandles,63  changedIndices,64  eventTarget,65) {66  const allTouchObjects = allTouchHandles.map(touch);67  const changedTouchObjects = subsequence(allTouchObjects, changedIndices);68  const activeTouchObjects =69    topType === 'topTouchStart'70      ? allTouchObjects71      : topType === 'topTouchMove'72        ? allTouchObjects73        : topType === 'topTouchEnd'74          ? antiSubsequence(allTouchObjects, changedIndices)75          : topType === 'topTouchCancel'76            ? antiSubsequence(allTouchObjects, changedIndices)77            : null;78  return {79    nativeEvent: touchEvent(80      targetNodeHandle,81      activeTouchObjects,82      changedTouchObjects,83    ),84    topLevelType: topType,85    targetInst: getInstanceFromNode(targetNodeHandle),86  };87};88/**89 * Creates test data for touch events using environment agnostic "node90 * handles".91 *92 * @param {NodeHandle} nodeHandle Environment agnostic handle to DOM node.93 * @param {Array<NodeHandle>} allTouchHandles Encoding of all "touches" in the94 * form of a mapping from integer (touch `identifier`) to touch target. This is95 * encoded in array form. Because of this, it is possible for two separate96 * touches (meaning two separate indices) to have the same touch target ID -97 * this corresponds to real world cases where two separate unique touches have98 * the same target. These touches don't just represent all active touches,99 * rather it also includes any touches that are not active, but are in the100 * process of being removed.101 * @param {Array<NodeHandle>} changedIndices Indices of `allTouchHandles` that102 * have changed.103 * @return {object} Config data used by test cases for extracting responder104 * events.105 */106const startConfig = function(nodeHandle, allTouchHandles, changedIndices) {107  return _touchConfig(108    'topTouchStart',109    nodeHandle,110    allTouchHandles,111    changedIndices,112    nodeHandle,113  );114};115/**116 * @see `startConfig`117 */118const moveConfig = function(nodeHandle, allTouchHandles, changedIndices) {119  return _touchConfig(120    'topTouchMove',121    nodeHandle,122    allTouchHandles,123    changedIndices,124    nodeHandle,125  );126};127/**128 * @see `startConfig`129 */130const endConfig = function(nodeHandle, allTouchHandles, changedIndices) {131  return _touchConfig(132    'topTouchEnd',133    nodeHandle,134    allTouchHandles,135    changedIndices,136    nodeHandle,137  );138};139/**140 * Test config for events that aren't negotiation related, but rather result of141 * a negotiation.142 *143 * Returns object of the form:144 *145 *     {146 *       responderReject: {147 *         // Whatever "readableIDToID" was passed in.148 *         grandParent: {order: NA, assertEvent: null, returnVal: blah},149 *         ...150 *         child: {order: NA, assertEvent: null, returnVal: blah},151 *       }152 *       responderGrant: {153 *         grandParent: {order: NA, assertEvent: null, returnVal: blah},154 *         ...155 *         child: {order: NA, assertEvent: null, returnVal: blah}156 *       }157 *       ...158 *     }159 *160 * After this is created, a test case would configure specific event orderings161 * and optional assertions. Anything left with an `order` of `NA` will be162 * required to never be invoked (the test runner will make sure it throws if163 * ever invoked).164 *165 */166const NA = -1;167const oneEventLoopTestConfig = function(readableIDToID) {168  const ret = {169    // Negotiation170    scrollShouldSetResponder: {bubbled: {}, captured: {}},171    startShouldSetResponder: {bubbled: {}, captured: {}},172    moveShouldSetResponder: {bubbled: {}, captured: {}},173    responderTerminationRequest: {},174    // Non-negotiation175    responderReject: {}, // These do not bubble capture.176    responderGrant: {},177    responderStart: {},178    responderMove: {},179    responderTerminate: {},180    responderEnd: {},181    responderRelease: {},182  };183  for (const eventName in ret) {184    for (const readableNodeName in readableIDToID) {185      if (ret[eventName].bubbled) {186        // Two phase187        ret[eventName].bubbled[readableNodeName] = {188          order: NA,189          assertEvent: null,190          returnVal: undefined,191        };192        ret[eventName].captured[readableNodeName] = {193          order: NA,194          assertEvent: null,195          returnVal: undefined,196        };197      } else {198        ret[eventName][readableNodeName] = {199          order: NA,200          assertEvent: null,201          returnVal: undefined,202        };203      }204    }205  }206  return ret;207};208/**209 * @param {object} eventTestConfig210 * @param {object} readableIDToID211 */212const registerTestHandlers = function(eventTestConfig, readableIDToID) {213  const runs = {dispatchCount: 0};214  const neverFire = function(readableID, registrationName) {215    runs.dispatchCount++;216    expect('').toBe(217      'Event type: ' +218        registrationName +219        '\nShould never occur on:' +220        readableID +221        '\nFor event test config:\n' +222        JSON.stringify(eventTestConfig) +223        '\n',224    );225  };226  const registerOneEventType = function(registrationName, eventTypeTestConfig) {227    for (const readableID in eventTypeTestConfig) {228      const nodeConfig = eventTypeTestConfig[readableID];229      const id = readableIDToID[readableID];230      const handler =231        nodeConfig.order === NA232          ? neverFire.bind(null, readableID, registrationName)233          : // We partially apply readableID and nodeConfig, as they change in the234            // parent closure across iterations.235            function(rID, config, e) {236              expect(237                rID +238                  '->' +239                  registrationName +240                  ' index:' +241                  runs.dispatchCount++,242              ).toBe(rID + '->' + registrationName + ' index:' + config.order);243              if (config.assertEvent) {244                config.assertEvent(e);245              }246              return config.returnVal;247            }.bind(null, readableID, nodeConfig);248      putListener(getInstanceFromNode(id), registrationName, handler);249    }250  };251  for (const eventName in eventTestConfig) {252    const oneEventTypeTestConfig = eventTestConfig[eventName];253    const hasTwoPhase = !!oneEventTypeTestConfig.bubbled;254    if (hasTwoPhase) {255      registerOneEventType(256        ResponderEventPlugin.eventTypes[eventName].phasedRegistrationNames257          .bubbled,258        oneEventTypeTestConfig.bubbled,259      );260      registerOneEventType(261        ResponderEventPlugin.eventTypes[eventName].phasedRegistrationNames262          .captured,263        oneEventTypeTestConfig.captured,264      );265    } else {266      registerOneEventType(267        ResponderEventPlugin.eventTypes[eventName].registrationName,268        oneEventTypeTestConfig,269      );270    }271  }272  return runs;273};274const run = function(config, hierarchyConfig, nativeEventConfig) {275  let max = NA;276  const searchForMax = function(nodeConfig) {277    for (const readableID in nodeConfig) {278      const order = nodeConfig[readableID].order;279      max = order > max ? order : max;280    }281  };282  for (const eventName in config) {283    const eventConfig = config[eventName];284    if (eventConfig.bubbled) {285      searchForMax(eventConfig.bubbled);286      searchForMax(eventConfig.captured);287    } else {288      searchForMax(eventConfig);289    }290  }291  // Register the handlers292  const runData = registerTestHandlers(config, hierarchyConfig);293  // Trigger the event294  const extractedEvents = ResponderEventPlugin.extractEvents(295    nativeEventConfig.topLevelType,296    nativeEventConfig.targetInst,297    nativeEventConfig.nativeEvent,298    nativeEventConfig.target,299  );300  // At this point the negotiation events have been dispatched as part of the301  // extraction process, but not the side effectful events. Below, we dispatch302  // side effectful events.303  EventPluginHub.runEventsInBatch(extractedEvents);304  // Ensure that every event that declared an `order`, was actually dispatched.305  expect('number of events dispatched:' + runData.dispatchCount).toBe(306    'number of events dispatched:' + (max + 1),307  ); // +1 for extra ++308};309const GRANDPARENT_HOST_NODE = {};310const PARENT_HOST_NODE = {};311const CHILD_HOST_NODE = {};312const CHILD_HOST_NODE2 = {};313// These intentionally look like Fibers. ReactTreeTraversal depends on their field names.314// TODO: we could test this with regular DOM nodes (and real fibers) instead.315const GRANDPARENT_INST = {316  return: null,317  tag: HostComponent,318  stateNode: GRANDPARENT_HOST_NODE,319  memoizedProps: {},320};321const PARENT_INST = {322  return: GRANDPARENT_INST,323  tag: HostComponent,324  stateNode: PARENT_HOST_NODE,325  memoizedProps: {},326};327const CHILD_INST = {328  return: PARENT_INST,329  tag: HostComponent,330  stateNode: CHILD_HOST_NODE,331  memoizedProps: {},332};333const CHILD_INST2 = {334  return: PARENT_INST,335  tag: HostComponent,336  stateNode: CHILD_HOST_NODE2,337  memoizedProps: {},338};339GRANDPARENT_HOST_NODE.testInstance = GRANDPARENT_INST;340PARENT_HOST_NODE.testInstance = PARENT_INST;341CHILD_HOST_NODE.testInstance = CHILD_INST;342CHILD_HOST_NODE2.testInstance = CHILD_INST2;343const three = {344  grandParent: GRANDPARENT_HOST_NODE,345  parent: PARENT_HOST_NODE,346  child: CHILD_HOST_NODE,347};348const siblings = {349  parent: PARENT_HOST_NODE,350  childOne: CHILD_HOST_NODE,351  childTwo: CHILD_HOST_NODE2,352};353function getInstanceFromNode(node) {354  return node.testInstance;355}356function getNodeFromInstance(inst) {357  return inst.stateNode;358}359function getFiberCurrentPropsFromNode(node) {360  return node.testInstance.memoizedProps;361}362function putListener(instance, registrationName, handler) {363  instance.memoizedProps[registrationName] = handler;364}365function deleteAllListeners(instance) {366  instance.memoizedProps = {};367}368describe('ResponderEventPlugin', () => {369  beforeEach(() => {370    jest.resetModules();371    const ReactDOMUnstableNativeDependencies = require('react-dom/unstable-native-dependencies');372    EventPluginHub = require('events/EventPluginHub');373    EventPluginUtils = require('events/EventPluginUtils');374    ResponderEventPlugin =375      ReactDOMUnstableNativeDependencies.ResponderEventPlugin;376    deleteAllListeners(GRANDPARENT_INST);377    deleteAllListeners(PARENT_INST);378    deleteAllListeners(CHILD_INST);379    deleteAllListeners(CHILD_INST2);380    injectComponentTree({381      getInstanceFromNode,382      getNodeFromInstance,383      getFiberCurrentPropsFromNode,384    });385  });386  it('should do nothing when no one wants to respond', () => {387    let config = oneEventLoopTestConfig(three);388    config.startShouldSetResponder.captured.grandParent = {389      order: 0,390      returnVal: false,391    };392    config.startShouldSetResponder.captured.parent = {393      order: 1,394      returnVal: false,395    };396    config.startShouldSetResponder.captured.child = {397      order: 2,398      returnVal: false,399    };400    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: false};401    config.startShouldSetResponder.bubbled.parent = {402      order: 4,403      returnVal: false,404    };405    config.startShouldSetResponder.bubbled.grandParent = {406      order: 5,407      returnVal: false,408    };409    run(config, three, startConfig(three.child, [three.child], [0]));410    expect(ResponderEventPlugin._getResponder()).toBe(null);411    // Now no handlers should be called on `touchEnd`.412    config = oneEventLoopTestConfig(three);413    run(config, three, endConfig(three.child, [three.child], [0]));414    expect(ResponderEventPlugin._getResponder()).toBe(null);415  });416  /**417   * Simple Start Granting418   * --------------------419   */420  it('should grant responder grandParent while capturing', () => {421    let config = oneEventLoopTestConfig(three);422    config.startShouldSetResponder.captured.grandParent = {423      order: 0,424      returnVal: true,425    };426    config.responderGrant.grandParent = {order: 1};427    config.responderStart.grandParent = {order: 2};428    run(config, three, startConfig(three.child, [three.child], [0]));429    expect(ResponderEventPlugin._getResponder()).toBe(430      getInstanceFromNode(three.grandParent),431    );432    config = oneEventLoopTestConfig(three);433    config.responderEnd.grandParent = {order: 0};434    config.responderRelease.grandParent = {order: 1};435    run(config, three, endConfig(three.child, [three.child], [0]));436    expect(ResponderEventPlugin._getResponder()).toBe(null);437  });438  it('should grant responder parent while capturing', () => {439    let config = oneEventLoopTestConfig(three);440    config.startShouldSetResponder.captured.grandParent = {441      order: 0,442      returnVal: false,443    };444    config.startShouldSetResponder.captured.parent = {445      order: 1,446      returnVal: true,447    };448    config.responderGrant.parent = {order: 2};449    config.responderStart.parent = {order: 3};450    run(config, three, startConfig(three.child, [three.child], [0]));451    expect(ResponderEventPlugin._getResponder()).toBe(452      getInstanceFromNode(three.parent),453    );454    config = oneEventLoopTestConfig(three);455    config.responderEnd.parent = {order: 0};456    config.responderRelease.parent = {order: 1};457    run(config, three, endConfig(three.child, [three.child], [0]));458    expect(ResponderEventPlugin._getResponder()).toBe(null);459  });460  it('should grant responder child while capturing', () => {461    let config = oneEventLoopTestConfig(three);462    config.startShouldSetResponder.captured.grandParent = {463      order: 0,464      returnVal: false,465    };466    config.startShouldSetResponder.captured.parent = {467      order: 1,468      returnVal: false,469    };470    config.startShouldSetResponder.captured.child = {order: 2, returnVal: true};471    config.responderGrant.child = {order: 3};472    config.responderStart.child = {order: 4};473    run(config, three, startConfig(three.child, [three.child], [0]));474    expect(ResponderEventPlugin._getResponder()).toBe(475      getInstanceFromNode(three.child),476    );477    config = oneEventLoopTestConfig(three);478    config.responderEnd.child = {order: 0};479    config.responderRelease.child = {order: 1};480    run(config, three, endConfig(three.child, [three.child], [0]));481    expect(ResponderEventPlugin._getResponder()).toBe(null);482  });483  it('should grant responder child while bubbling', () => {484    let config = oneEventLoopTestConfig(three);485    config.startShouldSetResponder.captured.grandParent = {486      order: 0,487      returnVal: false,488    };489    config.startShouldSetResponder.captured.parent = {490      order: 1,491      returnVal: false,492    };493    config.startShouldSetResponder.captured.child = {494      order: 2,495      returnVal: false,496    };497    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};498    config.responderGrant.child = {order: 4};499    config.responderStart.child = {order: 5};500    run(config, three, startConfig(three.child, [three.child], [0]));501    expect(ResponderEventPlugin._getResponder()).toBe(502      getInstanceFromNode(three.child),503    );504    config = oneEventLoopTestConfig(three);505    config.responderEnd.child = {order: 0};506    config.responderRelease.child = {order: 1};507    run(config, three, endConfig(three.child, [three.child], [0]));508    expect(ResponderEventPlugin._getResponder()).toBe(null);509  });510  it('should grant responder parent while bubbling', () => {511    let config = oneEventLoopTestConfig(three);512    config.startShouldSetResponder.captured.grandParent = {513      order: 0,514      returnVal: false,515    };516    config.startShouldSetResponder.captured.parent = {517      order: 1,518      returnVal: false,519    };520    config.startShouldSetResponder.captured.child = {521      order: 2,522      returnVal: false,523    };524    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: false};525    config.startShouldSetResponder.bubbled.parent = {order: 4, returnVal: true};526    config.responderGrant.parent = {order: 5};527    config.responderStart.parent = {order: 6};528    run(config, three, startConfig(three.child, [three.child], [0]));529    expect(ResponderEventPlugin._getResponder()).toBe(530      getInstanceFromNode(three.parent),531    );532    config = oneEventLoopTestConfig(three);533    config.responderEnd.parent = {order: 0};534    config.responderRelease.parent = {order: 1};535    run(config, three, endConfig(three.child, [three.child], [0]));536    expect(ResponderEventPlugin._getResponder()).toBe(null);537  });538  it('should grant responder grandParent while bubbling', () => {539    let config = oneEventLoopTestConfig(three);540    config.startShouldSetResponder.captured.grandParent = {541      order: 0,542      returnVal: false,543    };544    config.startShouldSetResponder.captured.parent = {545      order: 1,546      returnVal: false,547    };548    config.startShouldSetResponder.captured.child = {549      order: 2,550      returnVal: false,551    };552    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: false};553    config.startShouldSetResponder.bubbled.parent = {554      order: 4,555      returnVal: false,556    };557    config.startShouldSetResponder.bubbled.grandParent = {558      order: 5,559      returnVal: true,560    };561    config.responderGrant.grandParent = {order: 6};562    config.responderStart.grandParent = {order: 7};563    run(config, three, startConfig(three.child, [three.child], [0]));564    expect(ResponderEventPlugin._getResponder()).toBe(565      getInstanceFromNode(three.grandParent),566    );567    config = oneEventLoopTestConfig(three);568    config.responderEnd.grandParent = {order: 0};569    config.responderRelease.grandParent = {order: 1};570    run(config, three, endConfig(three.child, [three.child], [0]));571    expect(ResponderEventPlugin._getResponder()).toBe(null);572  });573  /**574   * Simple Move Granting575   * --------------------576   */577  it('should grant responder grandParent while capturing move', () => {578    let config = oneEventLoopTestConfig(three);579    config.startShouldSetResponder.captured.grandParent = {order: 0};580    config.startShouldSetResponder.captured.parent = {order: 1};581    config.startShouldSetResponder.captured.child = {order: 2};582    config.startShouldSetResponder.bubbled.child = {order: 3};583    config.startShouldSetResponder.bubbled.parent = {order: 4};584    config.startShouldSetResponder.bubbled.grandParent = {order: 5};585    run(config, three, startConfig(three.child, [three.child], [0]));586    config = oneEventLoopTestConfig(three);587    config.moveShouldSetResponder.captured.grandParent = {588      order: 0,589      returnVal: true,590    };591    config.responderGrant.grandParent = {order: 1};592    config.responderMove.grandParent = {order: 2};593    run(config, three, moveConfig(three.child, [three.child], [0]));594    expect(ResponderEventPlugin._getResponder()).toBe(595      getInstanceFromNode(three.grandParent),596    );597    config = oneEventLoopTestConfig(three);598    config.responderEnd.grandParent = {order: 0};599    config.responderRelease.grandParent = {order: 1};600    run(config, three, endConfig(three.child, [three.child], [0]));601    expect(ResponderEventPlugin._getResponder()).toBe(null);602  });603  it('should grant responder parent while capturing move', () => {604    let config = oneEventLoopTestConfig(three);605    config.startShouldSetResponder.captured.grandParent = {order: 0};606    config.startShouldSetResponder.captured.parent = {order: 1};607    config.startShouldSetResponder.captured.child = {order: 2};608    config.startShouldSetResponder.bubbled.child = {order: 3};609    config.startShouldSetResponder.bubbled.parent = {order: 4};610    config.startShouldSetResponder.bubbled.grandParent = {order: 5};611    run(config, three, startConfig(three.child, [three.child], [0]));612    config = oneEventLoopTestConfig(three);613    config.moveShouldSetResponder.captured.grandParent = {614      order: 0,615      returnVal: false,616    };617    config.moveShouldSetResponder.captured.parent = {order: 1, returnVal: true};618    config.responderGrant.parent = {order: 2};619    config.responderMove.parent = {order: 3};620    run(config, three, moveConfig(three.child, [three.child], [0]));621    expect(ResponderEventPlugin._getResponder()).toBe(622      getInstanceFromNode(three.parent),623    );624    config = oneEventLoopTestConfig(three);625    config.responderEnd.parent = {order: 0};626    config.responderRelease.parent = {order: 1};627    run(config, three, endConfig(three.child, [three.child], [0]));628    expect(ResponderEventPlugin._getResponder()).toBe(null);629  });630  it('should grant responder child while capturing move', () => {631    let config = oneEventLoopTestConfig(three);632    config.startShouldSetResponder.captured.grandParent = {order: 0};633    config.startShouldSetResponder.captured.parent = {order: 1};634    config.startShouldSetResponder.captured.child = {order: 2};635    config.startShouldSetResponder.bubbled.child = {order: 3};636    config.startShouldSetResponder.bubbled.parent = {order: 4};637    config.startShouldSetResponder.bubbled.grandParent = {order: 5};638    run(config, three, startConfig(three.child, [three.child], [0]));639    config = oneEventLoopTestConfig(three);640    config.moveShouldSetResponder.captured.grandParent = {641      order: 0,642      returnVal: false,643    };644    config.moveShouldSetResponder.captured.parent = {645      order: 1,646      returnVal: false,647    };648    config.moveShouldSetResponder.captured.child = {order: 2, returnVal: true};649    config.responderGrant.child = {order: 3};650    config.responderMove.child = {order: 4};651    run(config, three, moveConfig(three.child, [three.child], [0]));652    expect(ResponderEventPlugin._getResponder()).toBe(653      getInstanceFromNode(three.child),654    );655    config = oneEventLoopTestConfig(three);656    config.responderEnd.child = {order: 0};657    config.responderRelease.child = {order: 1};658    run(config, three, endConfig(three.child, [three.child], [0]));659    expect(ResponderEventPlugin._getResponder()).toBe(null);660  });661  it('should grant responder child while bubbling move', () => {662    let config = oneEventLoopTestConfig(three);663    config.startShouldSetResponder.captured.grandParent = {order: 0};664    config.startShouldSetResponder.captured.parent = {order: 1};665    config.startShouldSetResponder.captured.child = {order: 2};666    config.startShouldSetResponder.bubbled.child = {order: 3};667    config.startShouldSetResponder.bubbled.parent = {order: 4};668    config.startShouldSetResponder.bubbled.grandParent = {order: 5};669    run(config, three, startConfig(three.child, [three.child], [0]));670    config = oneEventLoopTestConfig(three);671    config.moveShouldSetResponder.captured.grandParent = {672      order: 0,673      returnVal: false,674    };675    config.moveShouldSetResponder.captured.parent = {676      order: 1,677      returnVal: false,678    };679    config.moveShouldSetResponder.captured.child = {order: 2, returnVal: false};680    config.moveShouldSetResponder.bubbled.child = {order: 3, returnVal: true};681    config.responderGrant.child = {order: 4};682    config.responderMove.child = {order: 5};683    run(config, three, moveConfig(three.child, [three.child], [0]));684    expect(ResponderEventPlugin._getResponder()).toBe(685      getInstanceFromNode(three.child),686    );687    config = oneEventLoopTestConfig(three);688    config.responderEnd.child = {order: 0};689    config.responderRelease.child = {order: 1};690    run(config, three, endConfig(three.child, [three.child], [0]));691    expect(ResponderEventPlugin._getResponder()).toBe(null);692  });693  it('should grant responder parent while bubbling move', () => {694    let config = oneEventLoopTestConfig(three);695    config.startShouldSetResponder.captured.grandParent = {order: 0};696    config.startShouldSetResponder.captured.parent = {order: 1};697    config.startShouldSetResponder.captured.child = {order: 2};698    config.startShouldSetResponder.bubbled.child = {order: 3};699    config.startShouldSetResponder.bubbled.parent = {order: 4};700    config.startShouldSetResponder.bubbled.grandParent = {order: 5};701    run(config, three, startConfig(three.child, [three.child], [0]));702    config = oneEventLoopTestConfig(three);703    config.moveShouldSetResponder.captured.grandParent = {704      order: 0,705      returnVal: false,706    };707    config.moveShouldSetResponder.captured.parent = {708      order: 1,709      returnVal: false,710    };711    config.moveShouldSetResponder.captured.child = {order: 2, returnVal: false};712    config.moveShouldSetResponder.bubbled.child = {order: 3, returnVal: false};713    config.moveShouldSetResponder.bubbled.parent = {order: 4, returnVal: true};714    config.responderGrant.parent = {order: 5};715    config.responderMove.parent = {order: 6};716    run(config, three, moveConfig(three.child, [three.child], [0]));717    expect(ResponderEventPlugin._getResponder()).toBe(718      getInstanceFromNode(three.parent),719    );720    config = oneEventLoopTestConfig(three);721    config.responderEnd.parent = {order: 0};722    config.responderRelease.parent = {order: 1};723    run(config, three, endConfig(three.child, [three.child], [0]));724    expect(ResponderEventPlugin._getResponder()).toBe(null);725  });726  it('should grant responder grandParent while bubbling move', () => {727    let config = oneEventLoopTestConfig(three);728    config.startShouldSetResponder.captured.grandParent = {order: 0};729    config.startShouldSetResponder.captured.parent = {order: 1};730    config.startShouldSetResponder.captured.child = {order: 2};731    config.startShouldSetResponder.bubbled.child = {order: 3};732    config.startShouldSetResponder.bubbled.parent = {order: 4};733    config.startShouldSetResponder.bubbled.grandParent = {order: 5};734    run(config, three, startConfig(three.child, [three.child], [0]));735    config = oneEventLoopTestConfig(three);736    config.moveShouldSetResponder.captured.grandParent = {737      order: 0,738      returnVal: false,739    };740    config.moveShouldSetResponder.captured.parent = {741      order: 1,742      returnVal: false,743    };744    config.moveShouldSetResponder.captured.child = {order: 2, returnVal: false};745    config.moveShouldSetResponder.bubbled.child = {order: 3, returnVal: false};746    config.moveShouldSetResponder.bubbled.parent = {order: 4, returnVal: false};747    config.moveShouldSetResponder.bubbled.grandParent = {748      order: 5,749      returnVal: true,750    };751    config.responderGrant.grandParent = {order: 6};752    config.responderMove.grandParent = {order: 7};753    run(config, three, moveConfig(three.child, [three.child], [0]));754    expect(ResponderEventPlugin._getResponder()).toBe(755      getInstanceFromNode(three.grandParent),756    );757    config = oneEventLoopTestConfig(three);758    config.responderEnd.grandParent = {order: 0};759    config.responderRelease.grandParent = {order: 1};760    run(config, three, endConfig(three.child, [three.child], [0]));761    expect(ResponderEventPlugin._getResponder()).toBe(null);762  });763  /**764   * Common ancestor tests765   * ---------------------766   */767  it('should bubble negotiation to first common ancestor of responder', () => {768    let config = oneEventLoopTestConfig(three);769    config.startShouldSetResponder.captured.grandParent = {770      order: 0,771      returnVal: false,772    };773    config.startShouldSetResponder.captured.parent = {774      order: 1,775      returnVal: true,776    };777    config.responderGrant.parent = {order: 2};778    config.responderStart.parent = {order: 3};779    run(config, three, startConfig(three.child, [three.child], [0]));780    expect(ResponderEventPlugin._getResponder()).toBe(781      getInstanceFromNode(three.parent),782    );783    // While `parent` is still responder, we create new handlers that verify784    // the ordering of propagation, restarting the count at `0`.785    config = oneEventLoopTestConfig(three);786    config.startShouldSetResponder.captured.grandParent = {787      order: 0,788      returnVal: false,789    };790    config.startShouldSetResponder.bubbled.grandParent = {791      order: 1,792      returnVal: false,793    };794    config.responderStart.parent = {order: 2};795    run(config, three, startConfig(three.child, [three.child], [0]));796    expect(ResponderEventPlugin._getResponder()).toBe(797      getInstanceFromNode(three.parent),798    );799    config = oneEventLoopTestConfig(three);800    config.responderEnd.parent = {order: 0};801    config.responderRelease.parent = {order: 1};802    run(config, three, endConfig(three.child, [three.child], [0]));803    expect(ResponderEventPlugin._getResponder()).toBe(null);804  });805  it('should bubble negotiation to first common ancestor of responder then transfer', () => {806    let config = oneEventLoopTestConfig(three);807    config.startShouldSetResponder.captured.grandParent = {808      order: 0,809      returnVal: false,810    };811    config.startShouldSetResponder.captured.parent = {812      order: 1,813      returnVal: true,814    };815    config.responderGrant.parent = {order: 2};816    config.responderStart.parent = {order: 3};817    run(config, three, startConfig(three.child, [three.child], [0]));818    expect(ResponderEventPlugin._getResponder()).toBe(819      getInstanceFromNode(three.parent),820    );821    config = oneEventLoopTestConfig(three);822    // Parent is responder, and responder is transferred by a second touch start823    config.startShouldSetResponder.captured.grandParent = {824      order: 0,825      returnVal: true,826    };827    config.responderGrant.grandParent = {order: 1};828    config.responderTerminationRequest.parent = {order: 2, returnVal: true};829    config.responderTerminate.parent = {order: 3};830    config.responderStart.grandParent = {order: 4};831    run(832      config,833      three,834      startConfig(three.child, [three.child, three.child], [1]),835    );836    expect(ResponderEventPlugin._getResponder()).toBe(837      getInstanceFromNode(three.grandParent),838    );839    config = oneEventLoopTestConfig(three);840    config.responderEnd.grandParent = {order: 0};841    // one remains\ /one ended \842    run(config, three, endConfig(three.child, [three.child, three.child], [1]));843    expect(ResponderEventPlugin._getResponder()).toBe(844      getInstanceFromNode(three.grandParent),845    );846    config = oneEventLoopTestConfig(three);847    config.responderEnd.grandParent = {order: 0};848    config.responderRelease.grandParent = {order: 1};849    run(config, three, endConfig(three.child, [three.child], [0]));850    expect(ResponderEventPlugin._getResponder()).toBe(null);851  });852  /**853   * If nothing is responder, then the negotiation should propagate directly to854   * the deepest target in the second touch.855   */856  it('should negotiate with deepest target on second touch if nothing is responder', () => {857    // Initially nothing wants to become the responder858    let config = oneEventLoopTestConfig(three);859    config.startShouldSetResponder.captured.grandParent = {860      order: 0,861      returnVal: false,862    };863    config.startShouldSetResponder.captured.parent = {864      order: 1,865      returnVal: false,866    };867    config.startShouldSetResponder.bubbled.parent = {868      order: 2,869      returnVal: false,870    };871    config.startShouldSetResponder.bubbled.grandParent = {872      order: 3,873      returnVal: false,874    };875    run(config, three, startConfig(three.parent, [three.parent], [0]));876    expect(ResponderEventPlugin._getResponder()).toBe(null);877    config = oneEventLoopTestConfig(three);878    // Now child wants to become responder. Negotiation should bubble as deep879    // as the target is because we don't find first common ancestor (with880    // current responder) because there is no current responder.881    // (Even if this is the second active touch).882    config.startShouldSetResponder.captured.grandParent = {883      order: 0,884      returnVal: false,885    };886    config.startShouldSetResponder.captured.parent = {887      order: 1,888      returnVal: false,889    };890    config.startShouldSetResponder.captured.child = {891      order: 2,892      returnVal: false,893    };894    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};895    config.responderGrant.child = {order: 4};896    config.responderStart.child = {order: 5};897    //                                     /  Two active touches  \  /one of them new\898    run(899      config,900      three,901      startConfig(three.child, [three.parent, three.child], [1]),902    );903    expect(ResponderEventPlugin._getResponder()).toBe(904      getInstanceFromNode(three.child),905    );906    // Now we remove the original first touch, keeping the second touch that907    // started within the current responder (child). Nothing changes because908    // there's still touches that started inside of the current responder.909    config = oneEventLoopTestConfig(three);910    config.responderEnd.child = {order: 0};911    //                                      / one ended\  /one remains \912    run(913      config,914      three,915      endConfig(three.child, [three.parent, three.child], [0]),916    );917    expect(ResponderEventPlugin._getResponder()).toBe(918      getInstanceFromNode(three.child),919    );920    // Okay, now let's add back that first touch (nothing should change) and921    // then we'll try peeling back the touches in the opposite order to make922    // sure that first removing the second touch instantly causes responder to923    // be released.924    config = oneEventLoopTestConfig(three);925    config.startShouldSetResponder.captured.grandParent = {926      order: 0,927      returnVal: false,928    };929    config.startShouldSetResponder.captured.parent = {930      order: 1,931      returnVal: false,932    };933    config.startShouldSetResponder.bubbled.parent = {934      order: 2,935      returnVal: false,936    };937    config.startShouldSetResponder.bubbled.grandParent = {938      order: 3,939      returnVal: false,940    };941    // Interesting: child still gets moves even though touch target is parent!942    // Current responder gets a `responderStart` for any touch while responder.943    config.responderStart.child = {order: 4};944    //                                           /  Two active touches  \  /one of them new\945    run(946      config,947      three,948      startConfig(three.parent, [three.child, three.parent], [1]),949    );950    expect(ResponderEventPlugin._getResponder()).toBe(951      getInstanceFromNode(three.child),952    );953    // Now, move that new touch that had no effect, and did not start within954    // the current responder.955    config = oneEventLoopTestConfig(three);956    config.moveShouldSetResponder.captured.grandParent = {957      order: 0,958      returnVal: false,959    };960    config.moveShouldSetResponder.captured.parent = {961      order: 1,962      returnVal: false,963    };964    config.moveShouldSetResponder.bubbled.parent = {order: 2, returnVal: false};965    config.moveShouldSetResponder.bubbled.grandParent = {966      order: 3,967      returnVal: false,968    };969    // Interesting: child still gets moves even though touch target is parent!970    // Current responder gets a `responderMove` for any touch while responder.971    config.responderMove.child = {order: 4};972    //                                     /  Two active touches  \  /one of them moved\973    run(974      config,975      three,976      moveConfig(three.parent, [three.child, three.parent], [1]),977    );978    expect(ResponderEventPlugin._getResponder()).toBe(979      getInstanceFromNode(three.child),980    );981    config = oneEventLoopTestConfig(three);982    config.responderEnd.child = {order: 0};983    config.responderRelease.child = {order: 1};984    //                                        /child end \ /parent remain\985    run(986      config,987      three,988      endConfig(three.child, [three.child, three.parent], [0]),989    );990    expect(ResponderEventPlugin._getResponder()).toBe(null);991  });992  /**993   * If nothing is responder, then the negotiation should propagate directly to994   * the deepest target in the second touch.995   */996  it('should negotiate until first common ancestor when there are siblings', () => {997    // Initially nothing wants to become the responder998    let config = oneEventLoopTestConfig(siblings);999    config.startShouldSetResponder.captured.parent = {1000      order: 0,1001      returnVal: false,1002    };1003    config.startShouldSetResponder.captured.childOne = {1004      order: 1,1005      returnVal: false,1006    };1007    config.startShouldSetResponder.bubbled.childOne = {1008      order: 2,1009      returnVal: true,1010    };1011    config.responderGrant.childOne = {order: 3};1012    config.responderStart.childOne = {order: 4};1013    run(1014      config,1015      siblings,1016      startConfig(siblings.childOne, [siblings.childOne], [0]),1017    );1018    expect(ResponderEventPlugin._getResponder()).toBe(1019      getInstanceFromNode(siblings.childOne),1020    );1021    // If the touch target is the sibling item, the negotiation should only1022    // propagate to first common ancestor of current responder and sibling (so1023    // the parent).1024    config = oneEventLoopTestConfig(siblings);1025    config.startShouldSetResponder.captured.parent = {1026      order: 0,1027      returnVal: false,1028    };1029    config.startShouldSetResponder.bubbled.parent = {1030      order: 1,1031      returnVal: false,1032    };1033    config.responderStart.childOne = {order: 2};1034    const touchConfig = startConfig(1035      siblings.childTwo,1036      [siblings.childOne, siblings.childTwo],1037      [1],1038    );1039    run(config, siblings, touchConfig);1040    expect(ResponderEventPlugin._getResponder()).toBe(1041      getInstanceFromNode(siblings.childOne),1042    );1043    // move childOne1044    config = oneEventLoopTestConfig(siblings);1045    config.moveShouldSetResponder.captured.parent = {1046      order: 0,1047      returnVal: false,1048    };1049    config.moveShouldSetResponder.bubbled.parent = {order: 1, returnVal: false};1050    config.responderMove.childOne = {order: 2};1051    run(1052      config,1053      siblings,1054      moveConfig(1055        siblings.childOne,1056        [siblings.childOne, siblings.childTwo],1057        [0],1058      ),1059    );1060    expect(ResponderEventPlugin._getResponder()).toBe(1061      getInstanceFromNode(siblings.childOne),1062    );1063    // move childTwo: Only negotiates to `parent`.1064    config = oneEventLoopTestConfig(siblings);1065    config.moveShouldSetResponder.captured.parent = {1066      order: 0,1067      returnVal: false,1068    };1069    config.moveShouldSetResponder.bubbled.parent = {order: 1, returnVal: false};1070    config.responderMove.childOne = {order: 2};1071    run(1072      config,1073      siblings,1074      moveConfig(1075        siblings.childTwo,1076        [siblings.childOne, siblings.childTwo],1077        [1],1078      ),1079    );1080    expect(ResponderEventPlugin._getResponder()).toBe(1081      getInstanceFromNode(siblings.childOne),1082    );1083  });1084  it('should notify of being rejected. responderStart/Move happens on current responder', () => {1085    // Initially nothing wants to become the responder1086    let config = oneEventLoopTestConfig(three);1087    config.startShouldSetResponder.captured.grandParent = {1088      order: 0,1089      returnVal: false,1090    };1091    config.startShouldSetResponder.captured.parent = {1092      order: 1,1093      returnVal: false,1094    };1095    config.startShouldSetResponder.captured.child = {1096      order: 2,1097      returnVal: false,1098    };1099    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};1100    config.responderGrant.child = {order: 4};1101    config.responderStart.child = {order: 5};1102    run(config, three, startConfig(three.child, [three.child], [0]));1103    expect(ResponderEventPlugin._getResponder()).toBe(1104      getInstanceFromNode(three.child),1105    );1106    // Suppose parent wants to become responder on move, and is rejected1107    config = oneEventLoopTestConfig(three);1108    config.moveShouldSetResponder.captured.grandParent = {1109      order: 0,1110      returnVal: false,1111    };1112    config.moveShouldSetResponder.captured.parent = {1113      order: 1,1114      returnVal: false,1115    };1116    config.moveShouldSetResponder.bubbled.parent = {order: 2, returnVal: true};1117    config.responderGrant.parent = {order: 3};1118    config.responderTerminationRequest.child = {order: 4, returnVal: false};1119    config.responderReject.parent = {order: 5};1120    // The start/move should occur on the original responder if new one is rejected1121    config.responderMove.child = {order: 6};1122    let touchConfig = moveConfig(three.child, [three.child], [0]);1123    run(config, three, touchConfig);1124    expect(ResponderEventPlugin._getResponder()).toBe(1125      getInstanceFromNode(three.child),1126    );1127    config = oneEventLoopTestConfig(three);1128    config.startShouldSetResponder.captured.grandParent = {1129      order: 0,1130      returnVal: false,1131    };1132    config.startShouldSetResponder.captured.parent = {1133      order: 1,1134      returnVal: false,1135    };1136    config.startShouldSetResponder.bubbled.parent = {order: 2, returnVal: true};1137    config.responderGrant.parent = {order: 3};1138    config.responderTerminationRequest.child = {order: 4, returnVal: false};1139    config.responderReject.parent = {order: 5};1140    // The start/move should occur on the original responder if new one is rejected1141    config.responderStart.child = {order: 6};1142    touchConfig = startConfig(three.child, [three.child, three.child], [1]);1143    run(config, three, touchConfig);1144    expect(ResponderEventPlugin._getResponder()).toBe(1145      getInstanceFromNode(three.child),1146    );1147  });1148  it('should negotiate scroll', () => {1149    // Initially nothing wants to become the responder1150    let config = oneEventLoopTestConfig(three);1151    config.startShouldSetResponder.captured.grandParent = {1152      order: 0,1153      returnVal: false,1154    };1155    config.startShouldSetResponder.captured.parent = {1156      order: 1,1157      returnVal: false,1158    };1159    config.startShouldSetResponder.captured.child = {1160      order: 2,1161      returnVal: false,1162    };1163    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};1164    config.responderGrant.child = {order: 4};1165    config.responderStart.child = {order: 5};1166    run(config, three, startConfig(three.child, [three.child], [0]));1167    expect(ResponderEventPlugin._getResponder()).toBe(1168      getInstanceFromNode(three.child),1169    );1170    // If the touch target is the sibling item, the negotiation should only1171    // propagate to first common ancestor of current responder and sibling (so1172    // the parent).1173    config = oneEventLoopTestConfig(three);1174    config.scrollShouldSetResponder.captured.grandParent = {1175      order: 0,1176      returnVal: false,1177    };1178    config.scrollShouldSetResponder.captured.parent = {1179      order: 1,1180      returnVal: false,1181    };1182    config.scrollShouldSetResponder.bubbled.parent = {1183      order: 2,1184      returnVal: true,1185    };1186    config.responderGrant.parent = {order: 3};1187    config.responderTerminationRequest.child = {order: 4, returnVal: false};1188    config.responderReject.parent = {order: 5};1189    run(config, three, {1190      topLevelType: 'topScroll',1191      targetInst: getInstanceFromNode(three.parent),1192      nativeEvent: {},1193    });1194    expect(ResponderEventPlugin._getResponder()).toBe(1195      getInstanceFromNode(three.child),1196    );1197    // Now lets let the scroll take control this time.1198    config = oneEventLoopTestConfig(three);1199    config.scrollShouldSetResponder.captured.grandParent = {1200      order: 0,1201      returnVal: false,1202    };1203    config.scrollShouldSetResponder.captured.parent = {1204      order: 1,1205      returnVal: false,1206    };1207    config.scrollShouldSetResponder.bubbled.parent = {1208      order: 2,1209      returnVal: true,1210    };1211    config.responderGrant.parent = {order: 3};1212    config.responderTerminationRequest.child = {order: 4, returnVal: true};1213    config.responderTerminate.child = {order: 5};1214    run(config, three, {1215      topLevelType: 'topScroll',1216      targetInst: getInstanceFromNode(three.parent),1217      nativeEvent: {},1218    });1219    expect(ResponderEventPlugin._getResponder()).toBe(1220      getInstanceFromNode(three.parent),1221    );1222  });1223  it('should cancel correctly', () => {1224    // Initially our child becomes responder1225    let config = oneEventLoopTestConfig(three);1226    config.startShouldSetResponder.captured.grandParent = {1227      order: 0,1228      returnVal: false,1229    };1230    config.startShouldSetResponder.captured.parent = {1231      order: 1,1232      returnVal: false,1233    };1234    config.startShouldSetResponder.captured.child = {1235      order: 2,1236      returnVal: false,1237    };1238    config.startShouldSetResponder.bubbled.child = {order: 3, returnVal: true};1239    config.responderGrant.child = {order: 4};1240    config.responderStart.child = {order: 5};1241    run(config, three, startConfig(three.child, [three.child], [0]));1242    expect(ResponderEventPlugin._getResponder()).toBe(1243      getInstanceFromNode(three.child),1244    );1245    config = oneEventLoopTestConfig(three);1246    config.responderEnd.child = {order: 0};1247    config.responderTerminate.child = {order: 1};1248    const nativeEvent = _touchConfig(1249      'topTouchCancel',1250      three.child,1251      [three.child],1252      [0],1253    );1254    run(config, three, nativeEvent);1255    expect(ResponderEventPlugin._getResponder()).toBe(null);1256  });1257  it('should determine the first common ancestor correctly', () => {1258    // This test was moved here from the ReactTreeTraversal test since only the1259    // ResponderEventPlugin uses `getLowestCommonAncestor`1260    const React = require('react');1261    const ReactTestUtils = require('react-dom/test-utils');1262    const ReactTreeTraversal = require('shared/ReactTreeTraversal');1263    const ReactDOMComponentTree = require('../../react-dom/src/client/ReactDOMComponentTree');1264    class ChildComponent extends React.Component {1265      render() {1266        return (1267          <div ref="DIV" id={this.props.id + '__DIV'}>1268            <div ref="DIV_1" id={this.props.id + '__DIV_1'} />1269            <div ref="DIV_2" id={this.props.id + '__DIV_2'} />1270          </div>1271        );1272      }1273    }1274    class ParentComponent extends React.Component {1275      render() {1276        return (1277          <div ref="P" id="P">1278            <div ref="P_P1" id="P_P1">1279              <ChildComponent ref="P_P1_C1" id="P_P1_C1" />1280              <ChildComponent ref="P_P1_C2" id="P_P1_C2" />1281            </div>1282            <div ref="P_OneOff" id="P_OneOff" />1283          </div>1284        );1285      }1286    }1287    const parent = ReactTestUtils.renderIntoDocument(<ParentComponent />);1288    const ancestors = [1289      // Common ancestor with self is self.1290      {1291        one: parent.refs.P_P1_C1.refs.DIV_1,1292        two: parent.refs.P_P1_C1.refs.DIV_1,1293        com: parent.refs.P_P1_C1.refs.DIV_1,1294      },1295      // Common ancestor with self is self - even if topmost DOM.1296      {one: parent.refs.P, two: parent.refs.P, com: parent.refs.P},1297      // Siblings1298      {1299        one: parent.refs.P_P1_C1.refs.DIV_1,1300        two: parent.refs.P_P1_C1.refs.DIV_2,1301        com: parent.refs.P_P1_C1.refs.DIV,1302      },1303      // Common ancestor with parent is the parent.1304      {1305        one: parent.refs.P_P1_C1.refs.DIV_1,1306        two: parent.refs.P_P1_C1.refs.DIV,1307        com: parent.refs.P_P1_C1.refs.DIV,1308      },1309      // Common ancestor with grandparent is the grandparent.1310      {1311        one: parent.refs.P_P1_C1.refs.DIV_1,1312        two: parent.refs.P_P1,1313        com: parent.refs.P_P1,1314      },1315      // Grandparent across subcomponent boundaries.1316      {1317        one: parent.refs.P_P1_C1.refs.DIV_1,1318        two: parent.refs.P_P1_C2.refs.DIV_1,1319        com: parent.refs.P_P1,1320      },1321      // Something deep with something one-off.1322      {1323        one: parent.refs.P_P1_C1.refs.DIV_1,1324        two: parent.refs.P_OneOff,1325        com: parent.refs.P,1326      },1327    ];1328    let i;1329    for (i = 0; i < ancestors.length; i++) {1330      const plan = ancestors[i];1331      const firstCommon = ReactTreeTraversal.getLowestCommonAncestor(1332        ReactDOMComponentTree.getInstanceFromNode(plan.one),1333        ReactDOMComponentTree.getInstanceFromNode(plan.two),1334      );1335      expect(firstCommon).toBe(1336        ReactDOMComponentTree.getInstanceFromNode(plan.com),1337      );1338    }1339  });...

1//Author: Monie Corleone2//Purpose: To draw line chart in canvas element3//The MIT License (MIT)4//Copyright (c) <2015> <Monie Corleone>5; (function ($, window, document, undefined) {6    var pluginName = "SimpleChart";7    var defaults = {8        ChartType: "Line", //Area, Scattered, Bar, Hybrid, Pie, Stacked, Stacked Hybrid9        xPadding: 60,10        yPadding: 50,11        topmargin: 25,12        rightmargin: 20,13        data: null,14        toolwidth: 300,15        toolheight: 300,16        axiscolor: "#333",17        font: "italic 10pt sans-serif",18        headerfontsize: "14px",19        axisfontsize: "12px",20        piefontsize: "13px",21        pielabelcolor: "#fff",22        pielabelpercentcolor: "#000",23        textAlign: "center",24        textcolor: "#E6E6E6",25        showlegends: true,26        showpielables: false,27        legendposition: 'bottom',28        legendsize: '100',29        xaxislabel: null,30        yaxislabel: null,31        title: null,32        LegendTitle: "Legend",33        pieborderColor: "#fff",34        pieborderWidth: 235    };36    function Plugin(element, options) {37        this.element = element;38        this.options = $.extend({}, defaults, options);39        this.init();40    }41    Plugin.prototype = {42        init: function () {43            var that = this,44           config = that.options;45            var graph = $(that.element).addClass("SimpleChart").addClass(config.ChartType).append("<canvas class='SimpleChartcanvas'></canvas>").find('canvas').css({46                float: (config.legendposition == 'right' || config.legendposition == 'left') ? 'left' : '',47                'margin-top': config.topmargin,48                'margin-right': config.rightmargin49            });50            var ctx = graph[0].getContext("2d");51            graph[0].width = $(that.element).width() - (config.showlegends ? ((config.legendposition == 'right' || config.legendposition == 'left') ? parseInt(config.legendsize) + parseInt(config.xPadding) : 0) : 0) - config.rightmargin;52            graph[0].height = $(that.element).height() - (config.showlegends ? ((config.legendposition == 'bottom' || config.legendposition == 'top') ? config.legendsize : 0) : 0) - config.topmargin;53            var c = graph[0].getContext('2d');54            switch (config.ChartType) {55                case "Line":56                    that.drawAxis(c, graph);57                    that.drawLineAreaScatteredHybridCharts(c, graph);58                    break;59                case "Area":60                    that.drawAxis(c, graph);61                    that.drawLineAreaScatteredHybridCharts(c, graph);62                    break;63                case "Scattered":64                    that.drawAxis(c, graph);65                    that.drawLineAreaScatteredHybridCharts(c, graph);66                    break;67                case "Hybrid":68                    that.drawAxis(c, graph);69                    that.drawLineAreaScatteredHybridCharts(c, graph);70                    that.drawBar(c, graph);71                    that.drawHybrid(c, graph);72                    break;73                case "Bar":74                    that.drawAxis(c, graph);75                    that.drawBar(c, graph);76                    break;77                case "Pie":78                    that.drawPie(c, graph);79                    break;80                case "Stacked":81                    that.drawAxis(c, graph);82                    that.drawStacked(c, graph);83                    break;84                case "StackedHybrid":85                    that.drawAxis(c, graph);86                    that.drawStacked(c, graph);87                    that.drawLineAreaScatteredHybridCharts(c, graph);88                    break;89            }90            //show legend91            if (config.showlegends) {92                that.drawLegends(graph);93            }94        },95        reload: function () {96            $(this.element).empty();97            this.init();98        },99        destroy: function () {100            $(this.element).empty();101        },102        FindYMax: function () {103            config = this.options;104            var max = 0;105            for (var i = 0; i < config.data.length; i++) {106                for (var j = 0; j < config.data[i].values.length; j++) {107                    if (config.data[i].values[j].Y > max) {108                        max = config.data[i].values[j].Y;109                    }110                }111            }112            max += 10 - max % 10;113            return max;114        },115        pixelX: function (val, i) {116            config = this.options;117            var graph = $(this.element).find('.SimpleChartcanvas');118            return ((graph.width() - config.xPadding) / config.data[i].values.length) * val + (config.xPadding * 1.5);119        },120        pixelY: function (val) {121            config = this.options;122            var graph = $(this.element).find('.SimpleChartcanvas');123            return graph.height() - (((graph.height() - config.yPadding) / this.FindYMax()) * val) - config.yPadding;124        },125        getRandomColor: function () {126            var letters = '0123456789ABCDEF'.split('');127            var color = '#';128            for (var i = 0; i < 6; i++) {129                color += letters[Math.floor(Math.random() * 16)];130            }131            return color;132        },133        drawAxis: function (c, graph) {134            var that = this, xelementarray = new Array(),135            config = this.options;136            c.lineWidth = 2;137            c.strokeStyle = config.axiscolor;138            c.font = config.font;139            c.textAlign = config.textAlign;140            c.beginPath();141            c.moveTo(config.xPadding, 0);142            c.lineTo(config.xPadding, graph.height() - config.yPadding);143            c.lineTo(graph.width(), graph.height() - config.yPadding);144            c.stroke();145            c.fillStyle = config.textcolor;146            for (var i = 0; i < config.data.length; i++) {147                for (var j = 0; j < config.data[i].values.length; j++) {148                    if (xelementarray.indexOf(config.data[i].values[j].X) < 0) {149                        xelementarray.push(config.data[i].values[j].X);150                        c.fillText(config.data[i].values[j].X, that.pixelX(j, i), graph.height() - config.yPadding + 20);151                    }152                }153            }154            c.save();155            var fontArgs = c.font.split(' ');156            c.font = config.axisfontsize + ' ' + fontArgs[fontArgs.length - 1];157            if (config.xaxislabel) {158                c.fillText(config.xaxislabel, graph.width() / 2, graph.height());159            }160            if (config.yaxislabel) {161                c.save();162                c.translate(0, graph.height() / 2);163                c.rotate(-Math.PI / 2);164                c.fillText(config.yaxislabel, 0, 15);165                c.restore();166            }167            if (config.title) {168                $("<div class='simple-chart-Header' />").appendTo($(that.element)).html(config.title).css({169                    left: graph.width() / 2 - ($(that.element).find('.simple-chart-Header').width() / 2),170                    top: 5171                });172            }173            c.restore();174            c.textAlign = "right"175            c.textBaseline = "middle";176            var maxY = that.FindYMax();177            var incrementvalue = "";178            for (var i = 0 ; i < Math.ceil(maxY).toString().length - 1; i++) {179                incrementvalue += "0";180            }181            incrementvalue = "1" + incrementvalue;182            incrementvalue = Math.ceil(maxY / parseInt(incrementvalue)) * Math.pow(10, (Math.ceil(maxY / 10).toString().length - 1));183            for (var i = 0; i < that.FindYMax() ; i += parseInt(incrementvalue)) {184                c.fillStyle = config.textcolor;185                c.fillText(i, config.xPadding - 10, that.pixelY(i));186                c.fillStyle = config.axiscolor;187                c.beginPath();188                c.arc(config.xPadding, that.pixelY(i), 6, 0, Math.PI * 2, true);189                c.fill();190            }191        },192        drawPie: function (c, graph) {193            var that = this,194           config = this.options;195            c.clearRect(0, 0, graph.width(), graph.height());196            var totalVal = 0, lastend = 0;197            for (var j = 0; j < config.data[0].values.length; j++) {198                totalVal += (typeof config.data[0].values[j].Y == 'number') ? config.data[0].values[j].Y : 0;199            }200            for (var i = 0; i < config.data[0].values.length; i++) {201                c.fillStyle = config.data[0].linecolor == "Random" ? config.data[0].values[i].color = randomcolor = that.getRandomColor() : config.data[0].linecolor;202                c.beginPath();203                var centerx = graph.width() / 2.2;204                var centery = graph.height() / 2.2;205                c.moveTo(centerx, centery);206                c.arc(centerx, centery, (config.legendposition == 'right' || config.legendposition == 'left') ? centerx : centery, lastend, lastend +207                  (Math.PI * 2 * (config.data[0].values[i].Y / totalVal)), false);208                c.lineTo(centerx, centery);209                c.fill();210                c.fillStyle = config.pielabelcolor;211                c.lineWidth = config.pieborderWidth;212                c.strokeStyle = config.pieborderColor;213                c.stroke();214                if (config.showpielables) {215                    c.save();216                    c.translate(centerx, centery);217                    c.rotate(lastend - 0.20 +218                      (Math.PI * 2 * (config.data[0].values[i].Y / totalVal)));219                    var dx = Math.floor(centerx * 0.5) + 40;220                    var dy = Math.floor(centery * 0.05);221                    c.textAlign = "right";222                    var fontArgs = c.font.split(' ');223                    c.font = config.piefontsize + ' ' + fontArgs[fontArgs.length - 1];224                    c.fillText(config.data[0].values[i].X, dx, dy);225                    c.restore();226                    c.save();227                    c.fillStyle = config.pielabelpercentcolor;228                    c.translate(centerx, centery);229                    c.rotate(lastend - 0.15 +230                      (Math.PI * 2 * (config.data[0].values[i].Y / totalVal)));231                    var dx = Math.floor(centerx * 0.5) + 90;232                    var dy = Math.floor(centery * 0.05);233                    c.textAlign = "right";234                    var fontArgs = c.font.split(' ');235                    c.font = config.piefontsize + ' ' + fontArgs[fontArgs.length - 1];236                    c.fillText(Math.round((config.data[0].values[i].Y / totalVal) * 100) + "%", dx, dy);237                    c.restore();238                }239                lastend += Math.PI * 2 * (config.data[0].values[i].Y / totalVal);240            }241            var canvasOffset = $(graph).offset();242            var offsetX = canvasOffset.left;243            var offsetY = canvasOffset.top;244        },245        drawBar: function (c, graph) {246            var that = this,247            config = this.options;248            for (var i = 0; i < config.data[0].values.length; i++) {249                var randomcolor;250                c.strokeStyle = config.data[0].linecolor == "Random" ? config.data[0].values[i].color = randomcolor = that.getRandomColor() : config.data[0].linecolor;251                c.fillStyle = config.data[0].linecolor == "Random" ? randomcolor : config.data[0].linecolor;252                c.beginPath();253                c.rect(that.pixelX(i, 0) - config.yPadding / 4, that.pixelY(config.data[0].values[i].Y), config.yPadding / 2, graph.height() - that.pixelY(config.data[0].values[i].Y) - config.xPadding + 8);254                c.closePath();255                c.stroke();256                c.fill();257                c.textAlign = "left";258                c.fillStyle = "#000";259                c.fillText(config.data[0].values[i].Y, that.pixelX(i, 0) - config.yPadding / 4, that.pixelY(config.data[0].values[i].Y) + 7, 200);260            }261        },262        drawStacked: function (c, graph) {263            var that = this,264            config = this.options;265            for (var i = 0; i < config.data.length; i++) {266                for (var j = 0; j < config.data[i].values.length; j++) {267                    var randomcolor;268                    c.strokeStyle = config.data[i].linecolor == "Random" ? config.data[i].values[j].color = randomcolor = that.getRandomColor() : config.data[i].linecolor;269                    c.fillStyle = config.data[i].linecolor == "Random" ? randomcolor : config.data[i].linecolor;270                    c.beginPath();271                    c.rect(that.pixelX(j, 0) - config.yPadding / 4, that.pixelY(config.data[i].values[j].Y), config.yPadding / 2, graph.height() - that.pixelY(config.data[i].values[j].Y) - config.xPadding + 8);272                    c.closePath();273                    c.stroke();274                    c.fill();275                    c.textAlign = "left";276                    c.fillStyle = "#000";277                    c.fillText(config.data[i].values[j].Y, that.pixelX(j, 0) - config.yPadding / 4, that.pixelY(config.data[i].values[j].Y) + 7, 200);278                }279            }280        },281        drawHybrid: function (c, graph) {282            var that = this,283            config = this.options;284            var randomcolor;285            c.strokeStyle = config.data[0].linecolor == "Random" ? randomcolor = that.getRandomColor() : config.data[0].linecolor;286            c.beginPath();287            c.moveTo(that.pixelX(0, 0), that.pixelY(config.data[0].values[0].Y));288            for (var j = 1; j < config.data[0].values.length; j++) {289                c.lineTo(that.pixelX(j, 0), that.pixelY(config.data[0].values[j].Y));290            }291            c.stroke();292            c.fillStyle = config.data[0].linecolor == "Random" ? randomcolor : config.data[0].linecolor;293            for (var j = 0; j < config.data[0].values.length; j++) {294                c.beginPath();295                c.arc(that.pixelX(j, 0), that.pixelY(config.data[0].values[j].Y), 4, 0, Math.PI * 2, true);296                c.fill();297            }298        },299        drawLineAreaScatteredHybridCharts: function (c, graph) {300            var that = this,301            config = this.options;302            var tipCanvas = $(that.element).append("<canvas id='tip'></canvas><div class='down-triangle'></div>").find("#tip").attr('width', config.toolwidth).attr('height', config.toolheight);303            var tipCtx = tipCanvas[0].getContext("2d");304            var highlighter = $(that.element).append("<canvas id='highlighter'></canvas>").find('#highlighter').attr('width', "18").attr('height', "18");305            var higlightctx = highlighter[0].getContext("2d");306            var tipbaloontip = $(that.element).find('.down-triangle');307            var canvasOffset = $(graph).offset();308            var offsetX = canvasOffset.left;309            var offsetY = canvasOffset.top;310            $(graph[0]).on("mousemove", function (e) {311                drawToolTiponHover(e);312            });313            for (var i = 0; i < config.data.length; i++) {314                c.strokeStyle = config.data[i].linecolor == "Random" ? config.data[i].Randomlinecolor = that.getRandomColor() : config.data[i].linecolor;315                c.beginPath();316                c.moveTo(that.pixelX(0, i), that.pixelY(config.data[i].values[0].Y));317                if (config.ChartType !== "Scattered" && config.ChartType !== "Hybrid") {318                    for (var j = 1; j < config.data[i].values.length; j++) {319                        c.lineTo(that.pixelX(j, i), that.pixelY(config.data[i].values[j].Y));320                    }321                    c.stroke();322                }323                c.fillStyle = config.data[i].linecolor == "Random" ? config.data[i].Randomlinecolor : config.data[i].linecolor;324                if (config.ChartType == "Area") {325                    c.lineTo(that.pixelX(config.data[i].values.length - 1, i), that.pixelY(0));326                    c.lineTo(that.pixelX(0, 0), that.pixelY(0));327                    c.stroke();328                    c.fill();329                }330                if (config.ChartType == "Line" || config.ChartType == "Scattered" || config.ChartType == "StackedHybrid") {331                    for (var j = 0; j < config.data[i].values.length; j++) {332                        c.beginPath();333                        c.arc(that.pixelX(j, i), that.pixelY(config.data[i].values[j].Y), 4, 0, Math.PI * 2, true);334                        c.fill();335                    }336                }337            }338            var linepoints = [];339            for (var i = 0; i < config.data.length; i++) {340                for (var j = 0; j < config.data[i].values.length; j++) {341                    linepoints.push({342                        x: that.pixelX(j, i),343                        y: that.pixelY(config.data[i].values[j].Y),344                        r: 4,345                        rXr: 16,346                        tip: config.data[i].values[j].Y,347                        color: config.data[i].linecolor == "Random" ? config.data[i].Randomlinecolor : config.data[i].linecolor348                    });349                }350            }351            function drawToolTiponHover(e) {352                mouseX = parseInt(e.pageX - offsetX);353                mouseY = parseInt(e.pageY - offsetY);354                var hit = false;355                for (var i = 0; i < linepoints.length; i++) {356                    var dot = linepoints[i];357                    var dx = mouseX - dot.x;358                    var dy = mouseY - dot.y;359                    if (dx * dx + dy * dy < dot.rXr) {360                        tipCanvas[0].style.left = (dot.x - (tipCanvas[0].width / 2)) - 3 + "px";361                        tipCanvas[0].style.top = (dot.y - 21 - tipCanvas[0].height) + config.topmargin + "px";362                        tipCtx.clearRect(0, 0, tipCanvas[0].width, tipCanvas[0].height);363                        tipCtx.fillText(dot.tip, 5, 15);364                        tipbaloontip[0].style.left = (dot.x) - 7 + "px";365                        tipbaloontip[0].style.top = (dot.y + config.topmargin) - 19 + "px";366                        if (config.ChartType == "Line" || config.ChartType == "Scattered" || config.ChartType == "Hybrid" || config.ChartType == "StackedHybrid") {367                            highlighter[0].style.left = (dot.x) - 9 + "px";368                            highlighter[0].style.top = (dot.y + config.topmargin) - 9 + "px";369                        }370                        higlightctx.clearRect(0, 0, highlighter.width(), highlighter.height());371                        higlightctx.strokeStyle = dot.color;372                        higlightctx.beginPath();373                        higlightctx.arc(9, 9, 7, 0, 2 * Math.PI);374                        higlightctx.lineWidth = 2;375                        higlightctx.stroke();376                        hit = true;377                    }378                }379                if (!hit) {380                    tipCanvas[0].style.left = "-400px";381                    highlighter[0].style.left = "-400px";382                    tipbaloontip[0].style.left = "-400px";383                }384            }385        },386        drawLegends: function (graph) {387            var that = this,388            config = this.options;389            if (config.ChartType == "Line" || config.ChartType == "Area" || config.ChartType == "Scattered" || config.ChartType == "Stacked" || config.ChartType == "StackedHybrid") {390                var _legends = $("<div class='simple-chart-legends' />", { id: "legendsdiv" }).css({391                    width: (config.legendposition == 'right' || config.legendposition == 'left') ? (config.legendsize - 5) : graph.width(),392                    height: (config.legendposition == 'top' || config.legendposition == 'bottom') ? (config.legendsize - 5) : graph.height(),393                    float: (config.legendposition == 'right' || config.legendposition == 'left') ? 'left' : ''394                }).appendTo($(that.element));395                var _ul = $(_legends).append("<span>" + config.LegendTitle + "</span>").append("<ul />").find("ul")396                for (var i = 0; i < config.data.length; i++) {397                    $("<li />", { class: "legendsli" }).append("<span />").find('span').addClass("legendindicator").append('<span class="line" style="background: ' + (config.data[i].linecolor == "Random" ? config.data[i].Randomlinecolor : config.data[i].linecolor) + '"></span><span class="circle" style="background: ' + (config.data[i].linecolor == "Random" ? config.data[i].Randomlinecolor : config.data[i].linecolor) + '"></span>').parent().append("<span>" + config.data[i].title + "</span>").appendTo(_ul);398                }399                if (config.legendposition == 'top' || config.legendposition == 'left') {400                    $(_legends).insertBefore($(that.element).find('.SimpleChartcanvas'));401                }402                if (config.legendposition == 'right' || config.legendposition == 'left') {403                    $(_legends).addClass('vertical')404                }405                else {406                    $(_legends).addClass('horizontal');407                }408            }409            if (config.ChartType == "Bar" || config.ChartType == "Hybrid" || config.ChartType == "Pie") {410                var _legends = $("<div class='simple-chart-legends' />", { id: "legendsdiv" }).css({411                    width: (config.legendposition == 'right' || config.legendposition == 'left') ? (config.legendsize - 5) : graph.width(),412                    height: (config.legendposition == 'top' || config.legendposition == 'bottom') ? (config.legendsize - 5) : graph.height(),413                    float: (config.legendposition == 'right' || config.legendposition == 'left') ? 'left' : ''414                }).appendTo($(that.element));415                var _ul = $(_legends).append("<span>" + config.LegendTitle + "</span>").append("<ul />").find("ul")416                for (var i = 0; i < config.data[0].values.length; i++) {417                    $("<li />", { class: "legendsli" }).append("<span />").find('span').addClass("legendindicator").append('<span class="line" style="background: ' + (config.data[0].linecolor == "Random" ? config.data[0].values[i].color : config.data[0].linecolor) + '"></span><span class="circle" style="background: ' + (config.data[0].linecolor == "Random" ? config.data[0].values[i].color : config.data[0].linecolor) + '"></span>').parent().append("<span>" + config.data[0].values[i].X + "</span><span class='legendvalue'>" + (config.ChartType == 'Pie' ? config.data[0].values[i].Y : '') + "</span>").appendTo(_ul);418                }419                if (config.legendposition == 'top' || config.legendposition == 'left') {420                    $(_legends).insertBefore($(that.element).find('.SimpleChartcanvas'));421                }422                if (config.legendposition == 'right' || config.legendposition == 'left') {423                    $(_legends).addClass('vertical')424                }425                else {426                    $(_legends).addClass('horizontal');427                }428            }429        }430    }431    $.fn[pluginName] = function (options) {432        if (typeof options === "string") {433            var args = Array.prototype.slice.call(arguments, 1);434            this.each(function () {435                var plugin = $.data(this, 'plugin_' + pluginName);436                if (plugin[options]) {437                    plugin[options].apply(plugin, args);438                } else {439                    plugin['options'][options] = args[0];440                }441            });442        } else {443            return this.each(function () {444                if (!$.data(this, 'plugin_' + pluginName)) {445                    $.data(this, 'plugin_' + pluginName, new Plugin(this, options));446                }447            });448        }449    }...