From a6dbd8ebe11e70a6db8f83bbf1fb3e22bfe88975 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 25 Sep 2019 21:33:20 +0200 Subject: [PATCH] feat(tests): add cypress --- cypress.json | 3 + cypress/fixtures/example.json | 5 + cypress/integration/examples/actions.spec.js | 272 + cypress/integration/examples/aliasing.spec.js | 42 + .../integration/examples/assertions.spec.js | 168 + .../integration/examples/connectors.spec.js | 56 + cypress/integration/examples/cookies.spec.js | 78 + .../integration/examples/cypress_api.spec.js | 222 + cypress/integration/examples/files.spec.js | 114 + .../examples/local_storage.spec.js | 52 + cypress/integration/examples/location.spec.js | 32 + cypress/integration/examples/misc.spec.js | 83 + .../integration/examples/navigation.spec.js | 56 + .../examples/network_requests.spec.js | 194 + cypress/integration/examples/querying.spec.js | 87 + .../examples/spies_stubs_clocks.spec.js | 95 + .../integration/examples/traversal.spec.js | 121 + .../integration/examples/utilities.spec.js | 133 + cypress/integration/examples/viewport.spec.js | 59 + cypress/integration/examples/waiting.spec.js | 34 + cypress/integration/examples/window.spec.js | 22 + cypress/integration/flow/basic.spec.js | 8 + cypress/plugins/index.js | 17 + cypress/support/commands.js | 25 + cypress/support/index.js | 20 + examples/advanced.html | 28 + .../advanced}/scripts/ExampleGraph.js | 2 +- .../advanced}/scripts/InputNode.js | 2 +- .../advanced}/scripts/SpecialNode.js | 2 +- .../advanced}/scripts/index.js | 0 examples/basic.html | 28 + examples/basic/scripts/ExampleGraph.js | 68 + examples/basic/scripts/index.js | 9 + examples/build/example.18884536.css | 2 + examples/build/example.18884536.css.map | 1 + examples/build/example.27d5f09e.js | 380 + examples/build/example.27d5f09e.js.map | 1 + examples/build/example.e31bb0bc.css | 163 + examples/build/example.e31bb0bc.css.map | 1 + examples/build/example.e31bb0bc.js | 46850 +++++++++++++++ examples/build/example.e31bb0bc.js.map | 1 + {example => examples/build}/index.html | 10 +- examples/build/index.js | 391 + examples/build/index.js.map | 1 + examples/build/scripts.bcf3243b.css | 163 + examples/build/scripts.bcf3243b.css.map | 1 + examples/build/scripts.bcf3243b.js | 46897 ++++++++++++++++ examples/build/scripts.bcf3243b.js.map | 1 + package-lock.json | 911 + package.json | 6 +- 50 files changed, 97906 insertions(+), 11 deletions(-) create mode 100644 cypress.json create mode 100644 cypress/fixtures/example.json create mode 100644 cypress/integration/examples/actions.spec.js create mode 100644 cypress/integration/examples/aliasing.spec.js create mode 100644 cypress/integration/examples/assertions.spec.js create mode 100644 cypress/integration/examples/connectors.spec.js create mode 100644 cypress/integration/examples/cookies.spec.js create mode 100644 cypress/integration/examples/cypress_api.spec.js create mode 100644 cypress/integration/examples/files.spec.js create mode 100644 cypress/integration/examples/local_storage.spec.js create mode 100644 cypress/integration/examples/location.spec.js create mode 100644 cypress/integration/examples/misc.spec.js create mode 100644 cypress/integration/examples/navigation.spec.js create mode 100644 cypress/integration/examples/network_requests.spec.js create mode 100644 cypress/integration/examples/querying.spec.js create mode 100644 cypress/integration/examples/spies_stubs_clocks.spec.js create mode 100644 cypress/integration/examples/traversal.spec.js create mode 100644 cypress/integration/examples/utilities.spec.js create mode 100644 cypress/integration/examples/viewport.spec.js create mode 100644 cypress/integration/examples/waiting.spec.js create mode 100644 cypress/integration/examples/window.spec.js create mode 100644 cypress/integration/flow/basic.spec.js create mode 100644 cypress/plugins/index.js create mode 100644 cypress/support/commands.js create mode 100644 cypress/support/index.js create mode 100644 examples/advanced.html rename {example => examples/advanced}/scripts/ExampleGraph.js (99%) rename {example => examples/advanced}/scripts/InputNode.js (91%) rename {example => examples/advanced}/scripts/SpecialNode.js (95%) rename {example => examples/advanced}/scripts/index.js (100%) create mode 100644 examples/basic.html create mode 100644 examples/basic/scripts/ExampleGraph.js create mode 100644 examples/basic/scripts/index.js create mode 100644 examples/build/example.18884536.css create mode 100644 examples/build/example.18884536.css.map create mode 100644 examples/build/example.27d5f09e.js create mode 100644 examples/build/example.27d5f09e.js.map create mode 100644 examples/build/example.e31bb0bc.css create mode 100644 examples/build/example.e31bb0bc.css.map create mode 100644 examples/build/example.e31bb0bc.js create mode 100644 examples/build/example.e31bb0bc.js.map rename {example => examples/build}/index.html (75%) create mode 100644 examples/build/index.js create mode 100644 examples/build/index.js.map create mode 100644 examples/build/scripts.bcf3243b.css create mode 100644 examples/build/scripts.bcf3243b.css.map create mode 100644 examples/build/scripts.bcf3243b.js create mode 100644 examples/build/scripts.bcf3243b.js.map diff --git a/cypress.json b/cypress.json new file mode 100644 index 00000000..53a9bb5f --- /dev/null +++ b/cypress.json @@ -0,0 +1,3 @@ +{ + "baseUrl": "http://localhost:1234" +} diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 00000000..da18d935 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} \ No newline at end of file diff --git a/cypress/integration/examples/actions.spec.js b/cypress/integration/examples/actions.spec.js new file mode 100644 index 00000000..20e12cc6 --- /dev/null +++ b/cypress/integration/examples/actions.spec.js @@ -0,0 +1,272 @@ +/// + +context('Actions', () => { + beforeEach(() => { + cy.visit('https://example.cypress.io/commands/actions') + }) + + // https://on.cypress.io/interacting-with-elements + + it('.type() - type into a DOM element', () => { + // https://on.cypress.io/type + cy.get('.action-email') + .type('fake@email.com').should('have.value', 'fake@email.com') + + // .type() with special character sequences + .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') + .type('{del}{selectall}{backspace}') + + // .type() with key modifiers + .type('{alt}{option}') //these are equivalent + .type('{ctrl}{control}') //these are equivalent + .type('{meta}{command}{cmd}') //these are equivalent + .type('{shift}') + + // Delay each keypress by 0.1 sec + .type('slow.typing@email.com', { delay: 100 }) + .should('have.value', 'slow.typing@email.com') + + cy.get('.action-disabled') + // Ignore error checking prior to type + // like whether the input is visible or disabled + .type('disabled error checking', { force: true }) + .should('have.value', 'disabled error checking') + }) + + it('.focus() - focus on a DOM element', () => { + // https://on.cypress.io/focus + cy.get('.action-focus').focus() + .should('have.class', 'focus') + .prev().should('have.attr', 'style', 'color: orange;') + }) + + it('.blur() - blur off a DOM element', () => { + // https://on.cypress.io/blur + cy.get('.action-blur').type('About to blur').blur() + .should('have.class', 'error') + .prev().should('have.attr', 'style', 'color: red;') + }) + + it('.clear() - clears an input or textarea element', () => { + // https://on.cypress.io/clear + cy.get('.action-clear').type('Clear this text') + .should('have.value', 'Clear this text') + .clear() + .should('have.value', '') + }) + + it('.submit() - submit a form', () => { + // https://on.cypress.io/submit + cy.get('.action-form') + .find('[type="text"]').type('HALFOFF') + cy.get('.action-form').submit() + .next().should('contain', 'Your form has been submitted!') + }) + + it('.click() - click on a DOM element', () => { + // https://on.cypress.io/click + cy.get('.action-btn').click() + + // You can click on 9 specific positions of an element: + // ----------------------------------- + // | topLeft top topRight | + // | | + // | | + // | | + // | left center right | + // | | + // | | + // | | + // | bottomLeft bottom bottomRight | + // ----------------------------------- + + // clicking in the center of the element is the default + cy.get('#action-canvas').click() + + cy.get('#action-canvas').click('topLeft') + cy.get('#action-canvas').click('top') + cy.get('#action-canvas').click('topRight') + cy.get('#action-canvas').click('left') + cy.get('#action-canvas').click('right') + cy.get('#action-canvas').click('bottomLeft') + cy.get('#action-canvas').click('bottom') + cy.get('#action-canvas').click('bottomRight') + + // .click() accepts an x and y coordinate + // that controls where the click occurs :) + + cy.get('#action-canvas') + .click(80, 75) // click 80px on x coord and 75px on y coord + .click(170, 75) + .click(80, 165) + .click(100, 185) + .click(125, 190) + .click(150, 185) + .click(170, 165) + + // click multiple elements by passing multiple: true + cy.get('.action-labels>.label').click({ multiple: true }) + + // Ignore error checking prior to clicking + cy.get('.action-opacity>.btn').click({ force: true }) + }) + + it('.dblclick() - double click on a DOM element', () => { + // https://on.cypress.io/dblclick + + // Our app has a listener on 'dblclick' event in our 'scripts.js' + // that hides the div and shows an input on double click + cy.get('.action-div').dblclick().should('not.be.visible') + cy.get('.action-input-hidden').should('be.visible') + }) + + it('.check() - check a checkbox or radio element', () => { + // https://on.cypress.io/check + + // By default, .check() will check all + // matching checkbox or radio elements in succession, one after another + cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]') + .check().should('be.checked') + + cy.get('.action-radios [type="radio"]').not('[disabled]') + .check().should('be.checked') + + // .check() accepts a value argument + cy.get('.action-radios [type="radio"]') + .check('radio1').should('be.checked') + + // .check() accepts an array of values + cy.get('.action-multiple-checkboxes [type="checkbox"]') + .check(['checkbox1', 'checkbox2']).should('be.checked') + + // Ignore error checking prior to checking + cy.get('.action-checkboxes [disabled]') + .check({ force: true }).should('be.checked') + + cy.get('.action-radios [type="radio"]') + .check('radio3', { force: true }).should('be.checked') + }) + + it('.uncheck() - uncheck a checkbox element', () => { + // https://on.cypress.io/uncheck + + // By default, .uncheck() will uncheck all matching + // checkbox elements in succession, one after another + cy.get('.action-check [type="checkbox"]') + .not('[disabled]') + .uncheck().should('not.be.checked') + + // .uncheck() accepts a value argument + cy.get('.action-check [type="checkbox"]') + .check('checkbox1') + .uncheck('checkbox1').should('not.be.checked') + + // .uncheck() accepts an array of values + cy.get('.action-check [type="checkbox"]') + .check(['checkbox1', 'checkbox3']) + .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') + + // Ignore error checking prior to unchecking + cy.get('.action-check [disabled]') + .uncheck({ force: true }).should('not.be.checked') + }) + + it('.select() - select an option in a data.onChange(e.target.value, data)}>\n \n \n \n \n \n \n);\n\nconst InputNode = ({ data, styles }) => (\n \n \n
{data.input}
\n data.onChange(e.target.value, data)} />\n \n \n);\n\nconst onNodeDragStop = node => console.log('drag stop', node);\n\nclass App extends PureComponent {\n constructor() {\n super();\n\n const onChange = (option, d) => {\n this.setState(prevState => (\n {elements: prevState.elements.map(e => {\n if (isEdge(e) || e.id !== '6') {\n return e;\n }\n\n return { ...e, data: { ...e.data, label: `Option ${option} selected.` } };\n })}\n ));\n }\n\n const onChangeInput = (input, d) => {\n this.setState(prevState => (\n {elements: prevState.elements.map(e => {\n if (isEdge(e) || e.id !== '8') {\n return e;\n }\n\n if (e.id === '8') {\n return { ...e, data: { ...e.data, input: input || 'write something' } };\n }\n })}\n ));\n }\n\n this.state = {\n graphLoaded: false,\n elements: [\n { id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },\n { id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },\n { id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },\n { id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },\n { id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },\n { id: '6', type: 'special', data: { onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },\n { id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },\n { id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 300, y: 100 } },\n { source: '1', target: '2', animated: true },\n { source: '1', target: '8', animated: true },\n { source: '2', target: '3' },\n { source: '3', target: '4', type: 'step' },\n { source: '3', target: '5' },\n { source: '5', target: '6', type: 'step', animated: true, style: { stroke: '#FFCC00' } },\n { source: '6', target: '7', style: { stroke: '#FFCC00' }},\n ]\n };\n\n this.onElementClick = this.onElementClick.bind(this);\n this.onConnect = this.onConnect.bind(this);\n }\n\n onLoad(graphInstance) {\n console.log('graph loaded:', graphInstance);\n window.rg = graphInstance;\n\n this.graphInstance = graphInstance;\n this.graphInstance.fitView({ padding: 0.1 });\n this.setState({\n graphLoaded: true\n });\n }\n\n onFitView() {\n this.graphInstance.fitView();\n }\n\n onAdd() {\n this.setState(prevState => ({\n ...prevState,\n elements: prevState.elements.concat({\n id: (prevState.elements.length + 1).toString(),\n data: { label: 'Added node' },\n position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }\n })\n }));\n }\n\n onElementClick(element) {\n console.log('click', element);\n console.log('outgoers', getOutgoers(element, this.state.elements));\n }\n\n onZoomIn() {\n this.graphInstance.zoomIn();\n }\n\n onZoomOut() {\n this.graphInstance.zoomOut();\n }\n\n onElementsRemove(elementsToRemove) {\n this.setState(prevState => ({\n elements: removeElements(prevState.elements, elementsToRemove)\n }));\n }\n\n onConnect(params) {\n console.log('connect', params);\n this.setState(prevState => ({\n elements: prevState.elements.concat(params)\n }));\n }\n\n render() {\n return (\n this.onElementsRemove(elements)}\n onConnect={this.onConnect}\n onNodeDragStop={onNodeDragStop}\n style={{ width: '100%', height: '100%' }}\n onLoad={graphInstance => this.onLoad(graphInstance)}\n nodeTypes={{\n special: SpecialNode,\n text: InputNode\n }}\n connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}\n connectionLineType=\"bezier\"\n >\n {\n if (n.type === 'input') return 'blue';\n if (n.type === 'output') return 'green';\n if (n.type === 'default') return 'red';\n\n return '#FFCC00';\n }}\n />\n this.onAdd()}\n style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}\n >\n add\n \n {this.state.graphLoaded && (\n
\n this.onFitView()}\n >\n fit\n \n this.onZoomIn()}\n >\n zoom in\n \n this.onZoomOut()}\n >\n zoom out\n \n
\n )}\n \n );\n }\n}\n\nexport default App;\n","import React from 'react';\nimport { render } from 'react-dom';\nimport { unstable_trace as trace } from \"scheduler/tracing\";\n\nimport SimpleGraph from './SimpleGraph';\n\ntrace('initial render', performance.now(), () =>\n render(, document.getElementById('root'))\n);\n"]} \ No newline at end of file diff --git a/examples/build/example.e31bb0bc.css b/examples/build/example.e31bb0bc.css new file mode 100644 index 00000000..62ef51a3 --- /dev/null +++ b/examples/build/example.e31bb0bc.css @@ -0,0 +1,163 @@ +.react-graph { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +} + +.react-graph__renderer { + width: 100%; + height: 100%; + position: absolute; +} + +.react-graph__zoompane { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +.react-graph__selectionpane { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; +} + +.react-graph__selection { + position: absolute; + top: 0; + left: 0; + background: rgba(0, 89, 220, 0.08); + border: 1px dotted rgba(0, 89, 220, 0.8); +} + +.react-graph__edges { + position: absolute; + top: 0; + left: 0; + pointer-events: none; + z-index: 2; +} + +.react-graph__edge { + fill: none; + stroke: #bbb; + stroke-width: 2; + pointer-events: all; +} + +.react-graph__edge.selected { + stroke: #555; + } + +.react-graph__edge.animated { + stroke-dasharray: 5; + -webkit-animation: dashdraw 0.5s linear infinite; + animation: dashdraw 0.5s linear infinite; + } + +.react-graph__edge.connection { + stroke: '#ddd'; + pointer-events: none; + } + +@-webkit-keyframes dashdraw { + from {stroke-dashoffset: 10} +} + +@keyframes dashdraw { + from {stroke-dashoffset: 10} +} + +.react-graph__nodes { + width: 100%; + height: 100%; + position: absolute; + z-index: 3; + pointer-events: none; + transform-origin: 0 0; +} + +.react-graph__node { + position: absolute; + color: #222; + font-family: sans-serif; + font-size: 12px; + text-align: center; + cursor: -webkit-grab; + cursor: grab; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: all; + transform-origin: 0 0; +} + +.react-graph__node:hover > * { + box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08); + } + +.react-graph__node.selected > * { + box-shadow: 0 0 0 2px #555; + } + +.react-graph__handle { + position: absolute; + width: 10px; + height: 8px; + background: rgba(255, 255, 255, 0.4); + cursor: crosshair; +} + +.react-graph__handle.bottom { + top: auto; + left: 50%; + bottom: 0; + transform: translate(-50%, 0); + } + +.react-graph__handle.top { + left: 50%; + top: 0; + transform: translate(-50%, 0); + } + +.react-graph__handle.left { + top: 50%; + left: 0; + transform: translate(0, -50%); + + } + +.react-graph__handle.right { + right: 0; + top: 50%; + transform: translate(0, -50%); + } + +.react-graph__nodesselection { + z-index: 3; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + transform-origin: left top; + pointer-events: none; +} + +.react-graph__nodesselection-rect { + position: absolute; + background: rgba(0, 89, 220, 0.08); + border: 1px dotted rgba(0, 89, 220, 0.8); + pointer-events: all; + } + +/*# sourceMappingURL=/example.e31bb0bc.css.map */ \ No newline at end of file diff --git a/examples/build/example.e31bb0bc.css.map b/examples/build/example.e31bb0bc.css.map new file mode 100644 index 00000000..56b3d503 --- /dev/null +++ b/examples/build/example.e31bb0bc.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,oBAAoB;EACpB,UAAU;AACZ;;AAEA;EACE,UAAU;EACV,YAAY;EACZ,eAAe;EACf,mBAAmB;AAerB;;AAbE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;AAEA;IACE,cAAc;IACd,oBAAoB;EACtB;;AAGF;EACE,MAAM,qBAAqB;AAC7B;;AAFA;EACE,MAAM,qBAAqB;AAC7B;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACV,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,uBAAuB;EACvB,eAAe;EACf,kBAAkB;EAClB,oBAAY;EAAZ,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;AASvB;;AAPE;IACE,6CAA6C;EAC/C;;AAEA;IACE,0BAA0B;EAC5B;;AAGF;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,oCAAoC;EACpC,iBAAiB;AA2BnB;;AAzBE;IACE,SAAS;IACT,SAAS;IACT,SAAS;IACT,6BAA6B;EAC/B;;AAEA;IACE,SAAS;IACT,MAAM;IACN,6BAA6B;EAC/B;;AAEA;IACE,QAAQ;IACR,OAAO;IACP,6BAA6B;;EAE/B;;AAEA;IACE,QAAQ;IACR,QAAQ;IACR,6BAA6B;EAC/B;;AAGF;EACE,UAAU;EACV,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,MAAM;EACN,OAAO;EACP,0BAA0B;EAC1B,oBAAoB;AAQtB;;AANE;IACE,kBAAkB;IAClB,kCAAkC;IAClC,wCAAwC;IACxC,mBAAmB;EACrB","file":"example.e31bb0bc.css","sourceRoot":"..","sourcesContent":[".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #bbb;\n stroke-width: 2;\n pointer-events: all;\n\n &.selected {\n stroke: #555;\n }\n\n &.animated {\n stroke-dasharray: 5;\n animation: dashdraw 0.5s linear infinite;\n }\n\n &.connection {\n stroke: '#ddd';\n pointer-events: none;\n }\n}\n\n@keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 3;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: grab;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n\n &:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n &.selected > * {\n box-shadow: 0 0 0 2px #555;\n }\n}\n\n.react-graph__handle {\n position: absolute;\n width: 10px;\n height: 8px;\n background: rgba(255, 255, 255, 0.4);\n cursor: crosshair;\n\n &.bottom {\n top: auto;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 0);\n }\n\n &.top {\n left: 50%;\n top: 0;\n transform: translate(-50%, 0);\n }\n\n &.left {\n top: 50%;\n left: 0;\n transform: translate(0, -50%);\n\n }\n\n &.right {\n right: 0;\n top: 50%;\n transform: translate(0, -50%);\n }\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n\n &-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n pointer-events: all;\n }\n}"]} \ No newline at end of file diff --git a/examples/build/example.e31bb0bc.js b/examples/build/example.e31bb0bc.js new file mode 100644 index 00000000..95da066c --- /dev/null +++ b/examples/build/example.e31bb0bc.js @@ -0,0 +1,46850 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + // + \ No newline at end of file diff --git a/examples/build/index.js b/examples/build/index.js new file mode 100644 index 00000000..d90923fb --- /dev/null +++ b/examples/build/index.js @@ -0,0 +1,391 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + //