diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5dc4bc05..d829a8ee 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -109,6 +109,15 @@ jobs: - name: Run browser tests run: yarn test:browser + - name: Install Playwright Chromium + run: yarn playwright install --with-deps chromium + + # Replays the golden scenarios with real Chromium input and fails if a + # trace differs from its jsdom golden file. The github-actions reporter + # puts each failure in a check annotation. + - name: Browser cross-check of golden traces + run: yarn golden:browser --reporter=default --reporter=github-actions + coverage: runs-on: ubuntu-latest permissions: diff --git a/README.md b/README.md index 1b92174f..f60b7d74 100644 --- a/README.md +++ b/README.md @@ -255,6 +255,9 @@ whichever instance drags first (or, more simply, set it consistently everywhere) ## Contributing +Interaction behavior is pinned by [golden traces](test/golden/README.md). +Explain golden diffs in your PR before regenerating them. + - Fork the project - Run `yarn dev` to start the development server - Make changes and add tests diff --git a/package.json b/package.json index eaad3aea..3fa52cf4 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,11 @@ "test": "vitest run --reporter=verbose", "test:watch": "vitest", "test:coverage": "vitest run --coverage", + "golden:update": "GOLDEN_UPDATE=1 vitest run test/golden/scenarios --reporter=verbose", + "golden:typecheck": "tsc --noEmit -p test/golden", + "golden:browser": "vitest run --config vitest.golden-browser.config.js", + "golden:legacy": "vitest run --config vitest.golden-legacy.config.js", + "golden:legacy:update": "GOLDEN_UPDATE=1 vitest run --config vitest.golden-legacy.config.js", "test:ui": "vitest --ui", "test:browser": "yarn build && vitest run --config vitest.browser.config.js", "test:all": "yarn test && yarn test:browser", @@ -74,6 +79,7 @@ "eslint-plugin-react": "^7.37.5", "globals": "^16.5.0", "jsdom": "^27.4.0", + "playwright": "1.62.1", "pre-commit": "^1.2.2", "process": "^0.11.10", "puppeteer": "^25.11.0", @@ -107,4 +113,4 @@ "react": ">= 16.3.0", "react-dom": ">= 16.3.0" } -} \ No newline at end of file +} diff --git a/test/golden/README.md b/test/golden/README.md new file mode 100644 index 00000000..cd4002af --- /dev/null +++ b/test/golden/README.md @@ -0,0 +1,137 @@ +# Golden interaction traces + +These tests pin react-draggable 4.7.2 behavior, including known bugs, before +refactors change the event pipeline. They import `lib/` source and use local React. + +```text +scenario → DOM input → React commit → callbacks + DOM + listeners + ↓ + __golden__/.golden.json +``` + +## Run and regenerate + +| Command | Purpose | +| --- | --- | +| `corepack yarn test` | Run existing tests and the golden suite | +| `corepack yarn test test/golden` | Compare only golden tests and serializer checks | +| `corepack yarn golden:update` | Explicitly regenerate interaction traces | +| `corepack yarn golden:typecheck` | Check the TypeScript test tooling | +| `corepack yarn golden:browser` | Run the separate Playwright cross-check | +| `corepack yarn golden:legacy` | Compare the optional React 18 traces | +| `corepack yarn golden:legacy:update` | Regenerate the optional React 18 traces | + +Golden diffs in a PR must be explained. Describe the changed inputs, callbacks, +or rendered output, and whether the behavior change is intended. Review the diff +before committing regenerated files. A missing golden fails an ordinary test run; +only `GOLDEN_UPDATE=1` permits writes. + +## What a trace records + +| Row | Recorded values | +| --- | --- | +| Input | Event type, target, coordinates, buttons, touch lists, initial cancellation | +| Callback | Ordered `onMouseDown`, `onStart`, `onDrag`, `onStop`; event type, return value, all six data coordinates and node ID | +| Listener | Native add/remove operations, capture/passive options, target | +| Dispatched | Whether the event was cancelled, including touch scrolling prevention | +| Snapshot | Transform style, CSS translate, SVG transform attribute, class set, node connectivity, selection class/style/nonce, selection ranges, attached library listeners | +| Action/error | Rerender, node swap, selection, unmount, or reported event error | + +Each trace step occupies one line of valid JSON. Object keys are sorted. +`undefined` becomes `{"$type":"undefined"}`; nonfinite numbers and negative zero +use `{"$number":"NaN"}`, `"Infinity"`, `"-Infinity"`, or `"-0"`. Finite coordinates +are rounded to six decimal places. Timestamps and unstable node identities are omitted. + +The recorder tracks listener identity and capture mode, so a duplicate add does +not invent a second attachment. It records failed removals too. Framework event +delegation is excluded; document move/stop listeners and native node touchstart +bindings are included. Cleanup after the final snapshot removes even deliberately +leaked listeners from known-bug cases, keeping scenarios independent. + +## Event cadence and geometry + +`harness.ts` dispatches one event per `act()` by default, then snapshots after React +commits. This reaches `Draggable.onDrag`, including bounds, slack, and the user +callback. The older helpers can dispatch a whole gesture before the start state +commits, leaving that path untested. + +The `batched` cadence deliberately puts the entire gesture in one `act()`. Its +event snapshots show the DOM before commit, followed by a `commit` snapshot. +`afterBatch` inputs run in separate acts after that commit. This pins the latent +stuck-dragging behavior without confusing it with ordinary event delivery. + +Geometry fixtures specify parent/node size, offsets, rectangles, scroll, +padding, borders, and margins. The harness stubs layout reads and the relevant +computed styles. Defaults are a 300×200 parent at (0,0), a 40×30 node, and zero +insets/scroll. `useOffsetParent` supplies a separate parent through the public prop. +The existing synchronous animation-frame setup is retained; `flush-frame` is an +explicit timeline marker, not a deferred-frame race test. + +`scenarios/cases.ts` owns the matrix. Shared cases exercise both components; +position, axis, and bounds cases exercise the wrapper. Cadence mirrors focus on +state and lifecycle boundaries. React 19 without `nodeRef` records today's start +error because that runtime no longer has `findDOMNode`. + +The optional `vitest.golden-legacy.config.js` project exercises the actual React 18 +`findDOMNode` path for both components. Set `REACT18_MODULE_ROOT` to a separate +`node_modules` containing matching React 18 and ReactDOM 18 packages and their +dependencies. The config checks their versions and resolution before running: + +```sh +REACT18_MODULE_ROOT=/path/to/react18/node_modules corepack yarn golden:legacy +``` + +This keeps the two React runtimes isolated. The normal suite pins React 19, and +`golden:update` regenerates its traces. Use `golden:legacy:update` with the same +environment variable to regenerate the two legacy traces. A separate cached +React 18.3.1 installation was used to generate and verify them offline. + +## Known bugs + +Keep a passing trace of the observed bug and add a top-level `knownBug` string: + +```json +{"knownBug":"R7: release coordinates bypass bounds clamping in onStop."} +``` + +| ID | Pinned behavior | +| --- | --- | +| R1-stuck | A batched gesture retains dragging state and accepts a later move | +| R2 | A vetoed stop over the node runs twice | +| R3 | Returning false from a touch drag fails to stop it | +| R4 | A second start repeats the start callback and resets the origin | +| R5 | Idle sibling unmount clears the active selection hack and text selection | +| R6 | Stop data includes release movement that the transform never renders | +| R7 | Stop data bypasses bounds | +| R9 | Replacing the child leaves touchstart attached to the detached node | +| R10 | Hybrid mouse/touch stop reports NaN and removes the wrong listeners | +| R11 | Pointer-only input has no start handler | + +When fixing a bug later, update its trace and explain or remove the `knownBug` +annotation in the same PR. This suite makes no library behavior changes. + +## Browser cross-check + +The separate project serves source and local React through Vite. Playwright sends +real mouse input through the same selected scenarios, using native CSS layout +rather than jsdom stubs. The existing Puppeteer/UMD/CDN suite remains separate. + +`playwright` is a devDependency and CI runs this check after the browser tests. +Run `yarn playwright install chromium` once, or set `PLAYWRIGHT_MODULE_PATH` to +another Playwright package directory. `PLAYWRIGHT_EXECUTABLE_PATH` optionally selects an +installed Chromium executable. The runner never installs packages or browsers. +For example: + +```sh +PLAYWRIGHT_MODULE_PATH=/path/to/node_modules/playwright corepack yarn golden:browser +``` + +The comparison retains callback data and DOM/body/listener snapshots. It omits +selection range counts because native clicks create selection in the browser, +and normalizes whitespace around transform commas. The checked-in traces keep +their exact jsdom strings. Each input runs in its own browser task; snapshots +wait for React and animation-frame cleanup. Page requests to other origins fail. + +This project was collected and its source fixture compiled during authoring. +Chromium could not launch in the macOS sandbox (MachPort permission denied), so +browser parity remains unverified. Launch failures fail the suite rather than skip it. diff --git a/test/golden/__golden__/core-cancel-match.golden.json b/test/golden/__golden__/core-cancel-match.golden.json new file mode 100644 index 00000000..66751082 --- /dev/null +++ b/test/golden/__golden__/core-cancel-match.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-cancel-match", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"cancel","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-cancel-miss.golden.json b/test/golden/__golden__/core-cancel-miss.golden.json new file mode 100644 index 00000000..2d7cf43d --- /dev/null +++ b/test/golden/__golden__/core-cancel-miss.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-cancel-miss", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-cancel-nested-match.golden.json b/test/golden/__golden__/core-cancel-nested-match.golden.json new file mode 100644 index 00000000..d32511ec --- /dev/null +++ b/test/golden/__golden__/core-cancel-nested-match.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-cancel-nested-match", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"nested","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-cancel-wins-over-handle.golden.json b/test/golden/__golden__/core-cancel-wins-over-handle.golden.json new file mode 100644 index 00000000..1080dcbc --- /dev/null +++ b/test/golden/__golden__/core-cancel-wins-over-handle.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-cancel-wins-over-handle", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"nested","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-disabled-rerender-mid-drag-keeps-active-listeners.golden.json b/test/golden/__golden__/core-disabled-rerender-mid-drag-keeps-active-listeners.golden.json new file mode 100644 index 00000000..19b81864 --- /dev/null +++ b/test/golden/__golden__/core-disabled-rerender-mid-drag-keeps-active-listeners.golden.json @@ -0,0 +1,35 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-disabled-rerender-mid-drag-keeps-active-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","props":{"disabled":true},"type":"rerender"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"rerender","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-grid-negative-half-ties.golden.json b/test/golden/__golden__/core-grid-negative-half-ties.golden.json new file mode 100644 index 00000000..bbfd8123 --- /dev/null +++ b/test/golden/__golden__/core-grid-negative-half-ties.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-grid-negative-half-ties", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":5,"clientY":5,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":5,"y":5}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":4,"clientY":4,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":4,"y":4}, + {"component":"DraggableCore","data":{"deltaX":-10,"deltaY":-10,"lastX":10,"lastY":10,"nodeId":"node","x":0,"y":0},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-5,"clientY":-5,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-5,"y":-5}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-6,"clientY":-6,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":-6,"y":-6}, + {"component":"DraggableCore","data":{"deltaX":-10,"deltaY":-10,"lastX":0,"lastY":0,"nodeId":"node","x":-10,"y":-10},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-grid-relative-to-nonzero-origin.golden.json b/test/golden/__golden__/core-grid-relative-to-nonzero-origin.golden.json new file mode 100644 index 00000000..e4be17c9 --- /dev/null +++ b/test/golden/__golden__/core-grid-relative-to-nonzero-origin.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-grid-relative-to-nonzero-origin", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":13,"clientY":7,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":13,"y":7}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":13,"lastY":7,"nodeId":"node","x":13,"y":7},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":18,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":18}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":15,"lastX":13,"lastY":7,"nodeId":"node","x":23,"y":22},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":29,"clientY":29,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":29,"y":29}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":0,"lastX":23,"lastY":22,"nodeId":"node","x":33,"y":22},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":33,"clientY":40,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":33,"y":40}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":15,"lastX":33,"lastY":22,"nodeId":"node","x":33,"y":37},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-grid-suppresses-subthreshold-and-snaps-stop.golden.json b/test/golden/__golden__/core-grid-suppresses-subthreshold-and-snaps-stop.golden.json new file mode 100644 index 00000000..16e64bff --- /dev/null +++ b/test/golden/__golden__/core-grid-suppresses-subthreshold-and-snaps-stop.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-grid-suppresses-subthreshold-and-snaps-stop", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":14,"clientY":19,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":14,"y":19}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":16,"clientY":21,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":16,"y":21}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":20,"lastX":10,"lastY":10,"nodeId":"node","x":20,"y":30},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":24,"clientY":36,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":24,"y":36}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":29,"clientY":48,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":29,"y":48}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":20,"lastX":20,"lastY":30,"nodeId":"node","x":30,"y":50},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-handle-match.golden.json b/test/golden/__golden__/core-handle-match.golden.json new file mode 100644 index 00000000..ce35890f --- /dev/null +++ b/test/golden/__golden__/core-handle-match.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-handle-match", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"handle","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-handle-miss.golden.json b/test/golden/__golden__/core-handle-miss.golden.json new file mode 100644 index 00000000..7bccd15e --- /dev/null +++ b/test/golden/__golden__/core-handle-miss.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-handle-miss", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-handle-nested-match.golden.json b/test/golden/__golden__/core-handle-nested-match.golden.json new file mode 100644 index 00000000..da5348d6 --- /dev/null +++ b/test/golden/__golden__/core-handle-nested-match.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-handle-nested-match", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"nested","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-hybrid-touchend-during-mouse-leaks-listeners.golden.json b/test/golden/__golden__/core-hybrid-touchend-during-mouse-leaks-listeners.golden.json new file mode 100644 index 00000000..3dec08d0 --- /dev/null +++ b/test/golden/__golden__/core-hybrid-touchend-during-mouse-leaks-listeners.golden.json @@ -0,0 +1,41 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R10: touchend stops a mouse drag with NaN data and removes the touch listener pair.", + "name": "core-hybrid-touchend-during-mouse-leaks-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":15}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":5,"lastX":10,"lastY":10,"nodeId":"node","x":20,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":3,"target":"node","x":20,"y":15}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":{"$number":"NaN"},"deltaY":{"$number":"NaN"},"lastX":20,"lastY":15,"nodeId":"node","x":{"$number":"NaN"},"y":{"$number":"NaN"}},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":45,"clientY":30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":45,"y":30}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":45,"lastY":30,"nodeId":"node","x":45,"y":30},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":45,"clientY":30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":45,"y":30}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-idle-unmount-removes-active-selection-hack.golden.json b/test/golden/__golden__/core-idle-unmount-removes-active-selection-hack.golden.json new file mode 100644 index 00000000..871e3c95 --- /dev/null +++ b/test/golden/__golden__/core-idle-unmount-removes-active-selection-hack.golden.json @@ -0,0 +1,46 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R5: unmounting an idle sibling removes the active body class and page selection.", + "name": "core-idle-unmount-removes-active-selection-hack", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"idle","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":[],"connected":true,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"idle","type":"touchstart"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":[],"connected":true,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"idle","type":"touchstart"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"select"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":[],"connected":true,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"select","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"idle","type":"touchstart"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"kind":"action","type":"unmount-idle"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"idle","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount-idle","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-basic-batched.golden.json b/test/golden/__golden__/core-mouse-basic-batched.golden.json new file mode 100644 index 00000000..04b73f70 --- /dev/null +++ b/test/golden/__golden__/core-mouse-basic-batched.golden.json @@ -0,0 +1,38 @@ +{ + "cadence": "batched", + "component": "DraggableCore", + "name": "core-mouse-basic-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-basic.golden.json b/test/golden/__golden__/core-mouse-basic.golden.json new file mode 100644 index 00000000..525552a1 --- /dev/null +++ b/test/golden/__golden__/core-mouse-basic.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-basic", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-button-1-allowed.golden.json b/test/golden/__golden__/core-mouse-button-1-allowed.golden.json new file mode 100644 index 00000000..6ba9705e --- /dev/null +++ b/test/golden/__golden__/core-mouse-button-1-allowed.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-button-1-allowed", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":1,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":1,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-button-1-rejected.golden.json b/test/golden/__golden__/core-mouse-button-1-rejected.golden.json new file mode 100644 index 00000000..fca59f8a --- /dev/null +++ b/test/golden/__golden__/core-mouse-button-1-rejected.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-button-1-rejected", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":1,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":1,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-button-2-allowed.golden.json b/test/golden/__golden__/core-mouse-button-2-allowed.golden.json new file mode 100644 index 00000000..17728f2d --- /dev/null +++ b/test/golden/__golden__/core-mouse-button-2-allowed.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-button-2-allowed", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":2,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":2,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-button-2-rejected.golden.json b/test/golden/__golden__/core-mouse-button-2-rejected.golden.json new file mode 100644 index 00000000..a0e545f2 --- /dev/null +++ b/test/golden/__golden__/core-mouse-button-2-rejected.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-button-2-rejected", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":2,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":2,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-control-left-allowed.golden.json b/test/golden/__golden__/core-mouse-control-left-allowed.golden.json new file mode 100644 index 00000000..1d316edd --- /dev/null +++ b/test/golden/__golden__/core-mouse-control-left-allowed.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-control-left-allowed", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":true,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":true,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-control-left-rejected.golden.json b/test/golden/__golden__/core-mouse-control-left-rejected.golden.json new file mode 100644 index 00000000..cabc0dd1 --- /dev/null +++ b/test/golden/__golden__/core-mouse-control-left-rejected.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-control-left-rejected", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":true,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":true,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-disabled-still-calls-onMouseDown.golden.json b/test/golden/__golden__/core-mouse-disabled-still-calls-onMouseDown.golden.json new file mode 100644 index 00000000..60b9db33 --- /dev/null +++ b/test/golden/__golden__/core-mouse-disabled-still-calls-onMouseDown.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-disabled-still-calls-onMouseDown", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-onDrag-false-synthesizes-stop-at-zero-batched.golden.json b/test/golden/__golden__/core-mouse-onDrag-false-synthesizes-stop-at-zero-batched.golden.json new file mode 100644 index 00000000..c0a8e6a1 --- /dev/null +++ b/test/golden/__golden__/core-mouse-onDrag-false-synthesizes-stop-at-zero-batched.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "batched", + "component": "DraggableCore", + "name": "core-mouse-onDrag-false-synthesizes-stop-at-zero-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":false}, + {"component":"DraggableCore","data":{"deltaX":-10,"deltaY":-10,"lastX":10,"lastY":10,"nodeId":"node","x":0,"y":0},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-onDrag-false-synthesizes-stop-at-zero.golden.json b/test/golden/__golden__/core-mouse-onDrag-false-synthesizes-stop-at-zero.golden.json new file mode 100644 index 00000000..3f2eaebb --- /dev/null +++ b/test/golden/__golden__/core-mouse-onDrag-false-synthesizes-stop-at-zero.golden.json @@ -0,0 +1,36 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-onDrag-false-synthesizes-stop-at-zero", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":false}, + {"component":"DraggableCore","data":{"deltaX":-10,"deltaY":-10,"lastX":10,"lastY":10,"nodeId":"node","x":0,"y":0},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-onStart-false-batched.golden.json b/test/golden/__golden__/core-mouse-onStart-false-batched.golden.json new file mode 100644 index 00000000..2b95fb4a --- /dev/null +++ b/test/golden/__golden__/core-mouse-onStart-false-batched.golden.json @@ -0,0 +1,31 @@ +{ + "cadence": "batched", + "component": "DraggableCore", + "name": "core-mouse-onStart-false-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-onStart-false.golden.json b/test/golden/__golden__/core-mouse-onStart-false.golden.json new file mode 100644 index 00000000..ca104405 --- /dev/null +++ b/test/golden/__golden__/core-mouse-onStart-false.golden.json @@ -0,0 +1,30 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-onStart-false", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-onStop-false-on-document-retains-listeners.golden.json b/test/golden/__golden__/core-mouse-onStop-false-on-document-retains-listeners.golden.json new file mode 100644 index 00000000..fb9175bf --- /dev/null +++ b/test/golden/__golden__/core-mouse-onStop-false-on-document-retains-listeners.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-onStop-false-on-document-retains-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-onStop-false-on-node-runs-twice-batched.golden.json b/test/golden/__golden__/core-mouse-onStop-false-on-node-runs-twice-batched.golden.json new file mode 100644 index 00000000..cf1dfaa8 --- /dev/null +++ b/test/golden/__golden__/core-mouse-onStop-false-on-node-runs-twice-batched.golden.json @@ -0,0 +1,42 @@ +{ + "cadence": "batched", + "component": "DraggableCore", + "knownBug": "R2: document capture and React mouseup both invoke the vetoed stop.", + "name": "core-mouse-onStop-false-on-node-runs-twice-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-onStop-false-on-node-runs-twice.golden.json b/test/golden/__golden__/core-mouse-onStop-false-on-node-runs-twice.golden.json new file mode 100644 index 00000000..8aa80b65 --- /dev/null +++ b/test/golden/__golden__/core-mouse-onStop-false-on-node-runs-twice.golden.json @@ -0,0 +1,41 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R2: document capture and React mouseup both invoke the vetoed stop.", + "name": "core-mouse-onStop-false-on-node-runs-twice", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-repeated-drags.golden.json b/test/golden/__golden__/core-mouse-repeated-drags.golden.json new file mode 100644 index 00000000..dbd10a87 --- /dev/null +++ b/test/golden/__golden__/core-mouse-repeated-drags.golden.json @@ -0,0 +1,54 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-repeated-drags", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":20,"y":15}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":15,"nodeId":"node","x":20,"y":15},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":5,"clientY":5,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":5,"y":5}, + {"component":"DraggableCore","data":{"deltaX":-15,"deltaY":-10,"lastX":20,"lastY":15,"nodeId":"node","x":5,"y":5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":5,"clientY":5,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":5,"y":5}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":5,"lastY":5,"nodeId":"node","x":5,"y":5},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-second-start-resets-origin.golden.json b/test/golden/__golden__/core-mouse-second-start-resets-origin.golden.json new file mode 100644 index 00000000..182c09e2 --- /dev/null +++ b/test/golden/__golden__/core-mouse-second-start-resets-origin.golden.json @@ -0,0 +1,45 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R4: mousedown during an active drag repeats onStart and resets last.", + "name": "core-mouse-second-start-resets-origin", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":15}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":5,"lastX":10,"lastY":10,"nodeId":"node","x":20,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":25,"clientY":20,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":25,"y":20}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":5,"deltaY":5,"lastX":20,"lastY":15,"nodeId":"node","x":25,"y":20},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":35,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":40,"y":35}, + {"component":"DraggableCore","data":{"deltaX":15,"deltaY":15,"lastX":25,"lastY":20,"nodeId":"node","x":40,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":35,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":40,"y":35}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":40,"lastY":35,"nodeId":"node","x":40,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-unmount-during-onDrag.golden.json b/test/golden/__golden__/core-mouse-unmount-during-onDrag.golden.json new file mode 100644 index 00000000..8df12523 --- /dev/null +++ b/test/golden/__golden__/core-mouse-unmount-during-onDrag.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-unmount-during-onDrag", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"kind":"error","message":"Failed to execute 'initUIEvent' on 'MouseEvent': parameter 4 is not of type 'Window'."}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-unmount-during-onStart.golden.json b/test/golden/__golden__/core-mouse-unmount-during-onStart.golden.json new file mode 100644 index 00000000..28f38b88 --- /dev/null +++ b/test/golden/__golden__/core-mouse-unmount-during-onStart.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-unmount-during-onStart", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-unmount-during-onStop.golden.json b/test/golden/__golden__/core-mouse-unmount-during-onStop.golden.json new file mode 100644 index 00000000..4cc5d8e9 --- /dev/null +++ b/test/golden/__golden__/core-mouse-unmount-during-onStop.golden.json @@ -0,0 +1,34 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-unmount-during-onStop", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-unmount-mid-drag-cleans-listeners-batched.golden.json b/test/golden/__golden__/core-mouse-unmount-mid-drag-cleans-listeners-batched.golden.json new file mode 100644 index 00000000..21ca95dd --- /dev/null +++ b/test/golden/__golden__/core-mouse-unmount-mid-drag-cleans-listeners-batched.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "batched", + "component": "DraggableCore", + "name": "core-mouse-unmount-mid-drag-cleans-listeners-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"unmount"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-mouse-unmount-mid-drag-cleans-listeners.golden.json b/test/golden/__golden__/core-mouse-unmount-mid-drag-cleans-listeners.golden.json new file mode 100644 index 00000000..f513b940 --- /dev/null +++ b/test/golden/__golden__/core-mouse-unmount-mid-drag-cleans-listeners.golden.json @@ -0,0 +1,36 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-mouse-unmount-mid-drag-cleans-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"unmount"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-node-swap-loses-touchstart-but-keeps-mouse.golden.json b/test/golden/__golden__/core-node-swap-loses-touchstart-but-keeps-mouse.golden.json new file mode 100644 index 00000000..8cf30f91 --- /dev/null +++ b/test/golden/__golden__/core-node-swap-loses-touchstart-but-keeps-mouse.golden.json @@ -0,0 +1,49 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R9: touchstart stays bound to the detached node after ref retargeting.", + "name": "core-node-swap-loses-touchstart-but-keeps-mouse", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"swap-node"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":true,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"swap-node","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":true,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":true,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":true,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"swapped","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":true,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"swapped","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":true,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"swapped","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":true,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"swapped","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":true,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"swapped","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""},{"classes":["seed"],"connected":false,"id":"swapped","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-offsetParent-body-ignores-parent-rect.golden.json b/test/golden/__golden__/core-offsetParent-body-ignores-parent-rect.golden.json new file mode 100644 index 00000000..dd88e819 --- /dev/null +++ b/test/golden/__golden__/core-offsetParent-body-ignores-parent-rect.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-offsetParent-body-ignores-parent-rect", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-offsetParent-parent-rect-and-scroll.golden.json b/test/golden/__golden__/core-offsetParent-parent-rect-and-scroll.golden.json new file mode 100644 index 00000000..88467fe9 --- /dev/null +++ b/test/golden/__golden__/core-offsetParent-parent-rect-and-scroll.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-offsetParent-parent-rect-and-scroll", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":110,"clientY":80,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":110,"y":80}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":23,"lastY":27,"nodeId":"node","x":23,"y":27},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":140,"y":100}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":23,"lastY":27,"nodeId":"node","x":53,"y":47},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":140,"y":100}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":53,"lastY":47,"nodeId":"node","x":53,"y":47},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-offsetParent-prop-overrides-node-parent.golden.json b/test/golden/__golden__/core-offsetParent-prop-overrides-node-parent.golden.json new file mode 100644 index 00000000..a03cc6e0 --- /dev/null +++ b/test/golden/__golden__/core-offsetParent-prop-overrides-node-parent.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-offsetParent-prop-overrides-node-parent", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":110,"clientY":80,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":110,"y":80}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":79,"lastY":66,"nodeId":"node","x":79,"y":66},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":140,"y":100}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":79,"lastY":66,"nodeId":"node","x":109,"y":86},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":140,"y":100}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":109,"lastY":86,"nodeId":"node","x":109,"y":86},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-onMouseDown-false-does-not-veto-start.golden.json b/test/golden/__golden__/core-onMouseDown-false-does-not-veto-start.golden.json new file mode 100644 index 00000000..23af56d8 --- /dev/null +++ b/test/golden/__golden__/core-onMouseDown-false-does-not-veto-start.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-onMouseDown-false-does-not-veto-start", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":false}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-pointerdown-is-ignored.golden.json b/test/golden/__golden__/core-pointerdown-is-ignored.golden.json new file mode 100644 index 00000000..32ccdf55 --- /dev/null +++ b/test/golden/__golden__/core-pointerdown-is-ignored.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R11: pointerdown alone has no registered start handler.", + "name": "core-pointerdown-is-ignored", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"pointerdown","x":10,"y":10}, + {"defaultPrevented":false,"kind":"dispatched","type":"pointerdown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"pointerdown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-scale-0.5.golden.json b/test/golden/__golden__/core-scale-0.5.golden.json new file mode 100644 index 00000000..12462d11 --- /dev/null +++ b/test/golden/__golden__/core-scale-0.5.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-scale-0.5", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":20,"nodeId":"node","x":20,"y":20},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":50,"deltaY":30,"lastX":20,"lastY":20,"nodeId":"node","x":70,"y":50},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":60,"deltaY":40,"lastX":70,"lastY":50,"nodeId":"node","x":130,"y":90},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":130,"lastY":90,"nodeId":"node","x":130,"y":90},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-scale-2.golden.json b/test/golden/__golden__/core-scale-2.golden.json new file mode 100644 index 00000000..8a1a9624 --- /dev/null +++ b/test/golden/__golden__/core-scale-2.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-scale-2", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":5,"lastY":5,"nodeId":"node","x":5,"y":5},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":12.5,"deltaY":7.5,"lastX":5,"lastY":5,"nodeId":"node","x":17.5,"y":12.5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":15,"deltaY":10,"lastX":17.5,"lastY":12.5,"nodeId":"node","x":32.5,"y":22.5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":32.5,"lastY":22.5,"nodeId":"node","x":32.5,"y":22.5},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-strict-mode-mount-drag-cleanup.golden.json b/test/golden/__golden__/core-strict-mode-mount-drag-cleanup.golden.json new file mode 100644 index 00000000..f675b9e0 --- /dev/null +++ b/test/golden/__golden__/core-strict-mode-mount-drag-cleanup.golden.json @@ -0,0 +1,43 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-strict-mode-mount-drag-cleanup", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-svg-drag.golden.json b/test/golden/__golden__/core-svg-drag.golden.json new file mode 100644 index 00000000..52351558 --- /dev/null +++ b/test/golden/__golden__/core-svg-drag.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-svg-drag", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-allowMobileScroll-keeps-default.golden.json b/test/golden/__golden__/core-touch-allowMobileScroll-keeps-default.golden.json new file mode 100644 index 00000000..b677efc3 --- /dev/null +++ b/test/golden/__golden__/core-touch-allowMobileScroll-keeps-default.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-allowMobileScroll-keeps-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-cancel-does-not-prevent-default.golden.json b/test/golden/__golden__/core-touch-cancel-does-not-prevent-default.golden.json new file mode 100644 index 00000000..045d08f6 --- /dev/null +++ b/test/golden/__golden__/core-touch-cancel-does-not-prevent-default.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-cancel-does-not-prevent-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"cancel","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-changedTouches-fallback.golden.json b/test/golden/__golden__/core-touch-changedTouches-fallback.golden.json new file mode 100644 index 00000000..92a810dd --- /dev/null +++ b/test/golden/__golden__/core-touch-changedTouches-fallback.golden.json @@ -0,0 +1,34 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-changedTouches-fallback", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":0,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[],"touches":[],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":0,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":0,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-disabled-does-not-prevent-default.golden.json b/test/golden/__golden__/core-touch-disabled-does-not-prevent-default.golden.json new file mode 100644 index 00000000..3f4423e4 --- /dev/null +++ b/test/golden/__golden__/core-touch-disabled-does-not-prevent-default.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-disabled-does-not-prevent-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-handle-miss-does-not-prevent-default.golden.json b/test/golden/__golden__/core-touch-handle-miss-does-not-prevent-default.golden.json new file mode 100644 index 00000000..a774e0ff --- /dev/null +++ b/test/golden/__golden__/core-touch-handle-miss-does-not-prevent-default.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-handle-miss-does-not-prevent-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-onDrag-false-remains-active-batched.golden.json b/test/golden/__golden__/core-touch-onDrag-false-remains-active-batched.golden.json new file mode 100644 index 00000000..cdb4cebb --- /dev/null +++ b/test/golden/__golden__/core-touch-onDrag-false-remains-active-batched.golden.json @@ -0,0 +1,40 @@ +{ + "cadence": "batched", + "component": "DraggableCore", + "knownBug": "R3: mouseup cancellation cannot resolve the active touch identifier.", + "name": "core-touch-onDrag-false-remains-active-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"touches":[{"identifier":7,"target":"node","x":65,"y":45}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":55,"deltaY":35,"lastX":10,"lastY":10,"nodeId":"node","x":65,"y":45},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":55,"deltaY":35,"lastX":10,"lastY":10,"nodeId":"node","x":65,"y":45},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-onDrag-false-remains-active.golden.json b/test/golden/__golden__/core-touch-onDrag-false-remains-active.golden.json new file mode 100644 index 00000000..fa501a08 --- /dev/null +++ b/test/golden/__golden__/core-touch-onDrag-false-remains-active.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R3: mouseup cancellation cannot resolve the active touch identifier.", + "name": "core-touch-onDrag-false-remains-active", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"touches":[{"identifier":7,"target":"node","x":65,"y":45}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":55,"deltaY":35,"lastX":10,"lastY":10,"nodeId":"node","x":65,"y":45},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":55,"deltaY":35,"lastX":10,"lastY":10,"nodeId":"node","x":65,"y":45},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-onStart-false-still-prevents-default.golden.json b/test/golden/__golden__/core-touch-onStart-false-still-prevents-default.golden.json new file mode 100644 index 00000000..769e53ca --- /dev/null +++ b/test/golden/__golden__/core-touch-onStart-false-still-prevents-default.golden.json @@ -0,0 +1,28 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-onStart-false-still-prevents-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":false}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-onStop-false-on-node-runs-twice.golden.json b/test/golden/__golden__/core-touch-onStop-false-on-node-runs-twice.golden.json new file mode 100644 index 00000000..fe6d529e --- /dev/null +++ b/test/golden/__golden__/core-touch-onStop-false-on-node-runs-twice.golden.json @@ -0,0 +1,38 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R2: document capture and React touchend both invoke the vetoed stop.", + "name": "core-touch-onStop-false-on-node-runs-twice", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"touchend","kind":"callback","name":"onStop","returned":false}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"touchend","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"touches":[{"identifier":7,"target":"node","x":65,"y":45}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-second-start-restarts-first-finger.golden.json b/test/golden/__golden__/core-touch-second-start-restarts-first-finger.golden.json new file mode 100644 index 00000000..4fefa204 --- /dev/null +++ b/test/golden/__golden__/core-touch-second-start-restarts-first-finger.golden.json @@ -0,0 +1,47 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "knownBug": "R4: a second start repeats onStart and retains targetTouches[0].", + "name": "core-touch-second-start-restarts-first-finger", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":1,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":1,"target":"node","x":10,"y":10}],"touches":[{"identifier":1,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":1,"target":"node","x":20,"y":15}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":1,"target":"node","x":20,"y":15}],"touches":[{"identifier":1,"target":"node","x":20,"y":15}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":5,"lastX":10,"lastY":10,"nodeId":"node","x":20,"y":15},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":2,"target":"node","x":80,"y":60}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":1,"target":"node","x":20,"y":15},{"identifier":2,"target":"node","x":80,"y":60}],"touches":[{"identifier":1,"target":"node","x":20,"y":15},{"identifier":2,"target":"node","x":80,"y":60}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":15,"nodeId":"node","x":20,"y":15},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":2,"target":"node","x":90,"y":70}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":1,"target":"node","x":30,"y":20},{"identifier":2,"target":"node","x":90,"y":70}],"touches":[{"identifier":1,"target":"node","x":30,"y":20},{"identifier":2,"target":"node","x":90,"y":70}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":5,"lastX":20,"lastY":15,"nodeId":"node","x":30,"y":20},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":1,"target":"node","x":30,"y":20}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":2,"target":"node","x":90,"y":70}],"touches":[{"identifier":2,"target":"node","x":90,"y":70}],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":30,"lastY":20,"nodeId":"node","x":30,"y":20},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-single-finger-batched.golden.json b/test/golden/__golden__/core-touch-single-finger-batched.golden.json new file mode 100644 index 00000000..728173b9 --- /dev/null +++ b/test/golden/__golden__/core-touch-single-finger-batched.golden.json @@ -0,0 +1,35 @@ +{ + "cadence": "batched", + "component": "DraggableCore", + "name": "core-touch-single-finger-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-single-finger.golden.json b/test/golden/__golden__/core-touch-single-finger.golden.json new file mode 100644 index 00000000..5ee0a4be --- /dev/null +++ b/test/golden/__golden__/core-touch-single-finger.golden.json @@ -0,0 +1,34 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-single-finger", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-unmount-mid-drag-cleans-listeners.golden.json b/test/golden/__golden__/core-touch-unmount-mid-drag-cleans-listeners.golden.json new file mode 100644 index 00000000..58465a69 --- /dev/null +++ b/test/golden/__golden__/core-touch-unmount-mid-drag-cleans-listeners.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-unmount-mid-drag-cleans-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"unmount"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"touches":[{"identifier":7,"target":"node","x":65,"y":45}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-touch-unrelated-finger-ignored.golden.json b/test/golden/__golden__/core-touch-unrelated-finger-ignored.golden.json new file mode 100644 index 00000000..dbf3a552 --- /dev/null +++ b/test/golden/__golden__/core-touch-unrelated-finger-ignored.golden.json @@ -0,0 +1,40 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-touch-unrelated-finger-ignored", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":9,"target":"node","x":80,"y":60}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":9,"target":"node","x":80,"y":60}],"touches":[{"identifier":7,"target":"node","x":10,"y":10},{"identifier":9,"target":"node","x":80,"y":60}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":9,"target":"node","x":80,"y":60}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":9,"target":"node","x":80,"y":60}],"touches":[{"identifier":9,"target":"node","x":80,"y":60}],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-user-select-hack-disabled-preserves-selection.golden.json b/test/golden/__golden__/core-user-select-hack-disabled-preserves-selection.golden.json new file mode 100644 index 00000000..76bebf81 --- /dev/null +++ b/test/golden/__golden__/core-user-select-hack-disabled-preserves-selection.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-user-select-hack-disabled-preserves-selection", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"select"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"select","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":1} + ] +} diff --git a/test/golden/__golden__/core-user-select-nonce-created-once.golden.json b/test/golden/__golden__/core-user-select-nonce-created-once.golden.json new file mode 100644 index 00000000..4ddacafb --- /dev/null +++ b/test/golden/__golden__/core-user-select-nonce-created-once.golden.json @@ -0,0 +1,56 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-user-select-nonce-created-once", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":20,"lastX":35,"lastY":25,"nodeId":"node","x":65,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":45,"nodeId":"node","x":65,"y":45},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","props":{"nonce":"golden-second"},"type":"rerender"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"rerender","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":15}, + {"component":"DraggableCore","data":{"deltaX":10,"deltaY":5,"lastX":10,"lastY":10,"nodeId":"node","x":20,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":20,"y":15}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":15,"nodeId":"node","x":20,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-user-select-stop-clears-selection.golden.json b/test/golden/__golden__/core-user-select-stop-clears-selection.golden.json new file mode 100644 index 00000000..ecb985ed --- /dev/null +++ b/test/golden/__golden__/core-user-select-stop-clears-selection.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-user-select-stop-clears-selection", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"select"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"select","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":25,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":35,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":25,"nodeId":"node","x":35,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/core-without-nodeRef-react19-start-error.golden.json b/test/golden/__golden__/core-without-nodeRef-react19-start-error.golden.json new file mode 100644 index 00000000..4279b9dd --- /dev/null +++ b/test/golden/__golden__/core-without-nodeRef-react19-start-error.golden.json @@ -0,0 +1,24 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "core-without-nodeRef-react19-start-error", + "schemaVersion": 1, + "steps": [ + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"kind":"error","message":" not mounted on DragStart!"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-R1-stuck-later-buttonless-move-batched.golden.json b/test/golden/__golden__/draggable-R1-stuck-later-buttonless-move-batched.golden.json new file mode 100644 index 00000000..27a5439b --- /dev/null +++ b/test/golden/__golden__/draggable-R1-stuck-later-buttonless-move-batched.golden.json @@ -0,0 +1,35 @@ +{ + "cadence": "batched", + "component": "Draggable", + "knownBug": "R1-stuck: batched start/move/stop leaves dragging active and accepts a later buttonless move.", + "name": "draggable-R1-stuck-later-buttonless-move-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":0,"clientY":0,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":0,"y":0}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":100,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":100,"y":100}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":100,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":100,"y":100}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"afterBatch":true,"button":0,"clientX":150,"clientY":150,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":150,"y":150}, + {"component":"Draggable","data":{"deltaX":150,"deltaY":150,"lastX":0,"lastY":0,"nodeId":"node","x":150,"y":150},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(150px,150px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(150px,150px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-axis-both.golden.json b/test/golden/__golden__/draggable-axis-both.golden.json new file mode 100644 index 00000000..e38dcef9 --- /dev/null +++ b/test/golden/__golden__/draggable-axis-both.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-axis-both", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-axis-none-batched.golden.json b/test/golden/__golden__/draggable-axis-none-batched.golden.json new file mode 100644 index 00000000..605432ad --- /dev/null +++ b/test/golden/__golden__/draggable-axis-none-batched.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-axis-none-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-axis-none-uses-defaultPosition.golden.json b/test/golden/__golden__/draggable-axis-none-uses-defaultPosition.golden.json new file mode 100644 index 00000000..301650fc --- /dev/null +++ b/test/golden/__golden__/draggable-axis-none-uses-defaultPosition.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-axis-none-uses-defaultPosition", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":-10,"nodeId":"node","x":20,"y":-10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":20,"lastY":-10,"nodeId":"node","x":45,"y":5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":45,"lastY":5,"nodeId":"node","x":75,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":75,"lastY":25,"nodeId":"node","x":75,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-axis-none.golden.json b/test/golden/__golden__/draggable-axis-none.golden.json new file mode 100644 index 00000000..c2ea0f03 --- /dev/null +++ b/test/golden/__golden__/draggable-axis-none.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-axis-none", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-axis-switch-reveals-accumulated-hidden-coordinate.golden.json b/test/golden/__golden__/draggable-axis-switch-reveals-accumulated-hidden-coordinate.golden.json new file mode 100644 index 00000000..2c3ae0d4 --- /dev/null +++ b/test/golden/__golden__/draggable-axis-switch-reveals-accumulated-hidden-coordinate.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-axis-switch-reveals-accumulated-hidden-coordinate", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","props":{"axis":"y"},"type":"rerender"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"rerender","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":55,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":55,"y":45}, + {"component":"Draggable","data":{"deltaX":20,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":45,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":55,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":55,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":45,"lastY":35,"nodeId":"node","x":45,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-axis-x.golden.json b/test/golden/__golden__/draggable-axis-x.golden.json new file mode 100644 index 00000000..4dab4167 --- /dev/null +++ b/test/golden/__golden__/draggable-axis-x.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-axis-x", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-axis-y.golden.json b/test/golden/__golden__/draggable-axis-y.golden.json new file mode 100644 index 00000000..87a4fa8a --- /dev/null +++ b/test/golden/__golden__/draggable-axis-y.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-axis-y", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-false-permits-negative-movement.golden.json b/test/golden/__golden__/draggable-bounds-false-permits-negative-movement.golden.json new file mode 100644 index 00000000..33509183 --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-false-permits-negative-movement.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-false-permits-negative-movement", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-90,"clientY":-60,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-90,"y":-60}, + {"component":"Draggable","data":{"deltaX":-100,"deltaY":-70,"lastX":0,"lastY":0,"nodeId":"node","x":-100,"y":-70},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-100px,-70px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-90,"clientY":-60,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":-90,"y":-60}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":-100,"lastY":-70,"nodeId":"node","x":-100,"y":-70},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(-100px,-70px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(-100px,-70px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-grid-scale-order-batched.golden.json b/test/golden/__golden__/draggable-bounds-grid-scale-order-batched.golden.json new file mode 100644 index 00000000..2984a1f0 --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-grid-scale-order-batched.golden.json @@ -0,0 +1,36 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-bounds-grid-scale-order-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":160,"clientY":190,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":160,"y":190}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":120,"clientY":130,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":120,"y":130}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":50,"clientY":40,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":50,"y":40}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":50,"clientY":40,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":50,"y":40}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-grid-scale-order.golden.json b/test/golden/__golden__/draggable-bounds-grid-scale-order.golden.json new file mode 100644 index 00000000..529f0b08 --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-grid-scale-order.golden.json @@ -0,0 +1,41 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-grid-scale-order", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":160,"clientY":190,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":160,"y":190}, + {"component":"Draggable","data":{"deltaX":35,"deltaY":45,"lastX":0,"lastY":0,"nodeId":"node","x":35,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(35px,45px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":120,"clientY":130,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":120,"y":130}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":35,"lastY":45,"nodeId":"node","x":35,"y":45},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(35px,45px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":50,"clientY":40,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":50,"y":40}, + {"component":"Draggable","data":{"deltaX":-15,"deltaY":-30,"lastX":35,"lastY":45,"nodeId":"node","x":20,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":50,"clientY":40,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":50,"y":40}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":15,"nodeId":"node","x":20,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(20px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-object-limits-all-sides.golden.json b/test/golden/__golden__/draggable-bounds-object-limits-all-sides.golden.json new file mode 100644 index 00000000..bd9c0aaa --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-object-limits-all-sides.golden.json @@ -0,0 +1,41 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-object-limits-all-sides", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":100,"clientY":90,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":100,"y":90}, + {"component":"Draggable","data":{"deltaX":60,"deltaY":50,"lastX":0,"lastY":0,"nodeId":"node","x":60,"y":50},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(60px,50px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-80,"clientY":-70,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-80,"y":-70}, + {"component":"Draggable","data":{"deltaX":-80,"deltaY":-65,"lastX":60,"lastY":50,"nodeId":"node","x":-20,"y":-15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-20px,-15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":15}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":-20,"lastY":-15,"nodeId":"node","x":10,"y":5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":20,"y":15}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":5,"nodeId":"node","x":10,"y":5},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-object-negative-box.golden.json b/test/golden/__golden__/draggable-bounds-object-negative-box.golden.json new file mode 100644 index 00000000..f1514d9f --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-object-negative-box.golden.json @@ -0,0 +1,41 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-object-negative-box", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-40,"clientY":-30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-40,"y":-30}, + {"component":"Draggable","data":{"deltaX":-50,"deltaY":-40,"lastX":0,"lastY":0,"nodeId":"node","x":-50,"y":-40},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-50px,-40px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-140,"clientY":-110,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-140,"y":-110}, + {"component":"Draggable","data":{"deltaX":-50,"deltaY":-40,"lastX":-50,"lastY":-40,"nodeId":"node","x":-100,"y":-80},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-100px,-80px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-70,"clientY":-50,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-70,"y":-50}, + {"component":"Draggable","data":{"deltaX":20,"deltaY":20,"lastX":-100,"lastY":-80,"nodeId":"node","x":-80,"y":-60},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-80px,-60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-70,"clientY":-50,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":-70,"y":-50}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":-80,"lastY":-60,"nodeId":"node","x":-80,"y":-60},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(-80px,-60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(-80px,-60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-object-one-sided.golden.json b/test/golden/__golden__/draggable-bounds-object-one-sided.golden.json new file mode 100644 index 00000000..2f5f9a8a --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-object-one-sided.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-object-one-sided", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":100,"clientY":-70,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":100,"y":-70}, + {"component":"Draggable","data":{"deltaX":40,"deltaY":-80,"lastX":0,"lastY":0,"nodeId":"node","x":40,"y":-80},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(40px,-80px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-40,"clientY":-100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-40,"y":-100}, + {"component":"Draggable","data":{"deltaX":-90,"deltaY":-30,"lastX":40,"lastY":-80,"nodeId":"node","x":-50,"y":-110},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-50px,-110px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-40,"clientY":-100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":-40,"y":-100}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":-50,"lastY":-110,"nodeId":"node","x":-50,"y":-110},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(-50px,-110px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(-50px,-110px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-object-slack-requires-pointer-return-batched.golden.json b/test/golden/__golden__/draggable-bounds-object-slack-requires-pointer-return-batched.golden.json new file mode 100644 index 00000000..ca7ef80c --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-object-slack-requires-pointer-return-batched.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-bounds-object-slack-requires-pointer-return-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":110,"clientY":90,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":110,"y":90}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":90,"clientY":70,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":90,"y":70}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":40,"y":30}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":40,"y":30}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-object-slack-requires-pointer-return.golden.json b/test/golden/__golden__/draggable-bounds-object-slack-requires-pointer-return.golden.json new file mode 100644 index 00000000..57648c3d --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-object-slack-requires-pointer-return.golden.json @@ -0,0 +1,45 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-object-slack-requires-pointer-return", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":110,"clientY":90,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":110,"y":90}, + {"component":"Draggable","data":{"deltaX":60,"deltaY":40,"lastX":0,"lastY":0,"nodeId":"node","x":60,"y":40},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(60px,40px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":90,"clientY":70,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":90,"y":70}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":60,"lastY":40,"nodeId":"node","x":60,"y":40},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(60px,40px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":-5,"deltaY":-5,"lastX":60,"lastY":40,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":40,"y":30}, + {"component":"Draggable","data":{"deltaX":-25,"deltaY":-15,"lastX":55,"lastY":35,"nodeId":"node","x":30,"y":20},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":40,"y":30}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":30,"lastY":20,"nodeId":"node","x":30,"y":20},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-parent-padding-border-margin-scroll.golden.json b/test/golden/__golden__/draggable-bounds-parent-padding-border-margin-scroll.golden.json new file mode 100644 index 00000000..3a5d321f --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-parent-padding-border-margin-scroll.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-parent-padding-border-margin-scroll", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":110,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":140,"y":110}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":600,"clientY":500,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":600,"y":500}, + {"component":"Draggable","data":{"deltaX":201,"deltaY":123,"lastX":0,"lastY":0,"nodeId":"node","x":201,"y":123},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(201px,123px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-100,"clientY":-100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-100,"y":-100}, + {"component":"Draggable","data":{"deltaX":-206,"deltaY":-142,"lastX":201,"lastY":123,"nodeId":"node","x":-5,"y":-19},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-5px,-19px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-100,"clientY":-100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":-100,"y":-100}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":-5,"lastY":-19,"nodeId":"node","x":-5,"y":-19},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(-5px,-19px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(-5px,-19px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-parent.golden.json b/test/golden/__golden__/draggable-bounds-parent.golden.json new file mode 100644 index 00000000..8491c7de --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-parent.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-parent", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":410,"clientY":310,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":410,"y":310}, + {"component":"Draggable","data":{"deltaX":260,"deltaY":170,"lastX":0,"lastY":0,"nodeId":"node","x":260,"y":170},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(260px,170px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-100,"clientY":-80,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-100,"y":-80}, + {"component":"Draggable","data":{"deltaX":-260,"deltaY":-170,"lastX":260,"lastY":170,"nodeId":"node","x":0,"y":0},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-100,"clientY":-80,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":-100,"y":-80}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-selector-missing-errors-on-move.golden.json b/test/golden/__golden__/draggable-bounds-selector-missing-errors-on-move.golden.json new file mode 100644 index 00000000..ff981694 --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-selector-missing-errors-on-move.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-selector-missing-errors-on-move", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"kind":"error","message":"Bounds selector \"#missing-bounds\" could not find an element."}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"kind":"error","message":"Bounds selector \"#missing-bounds\" could not find an element."}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":55,"deltaY":35,"lastX":0,"lastY":0,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-selector-negative-offset-and-margins.golden.json b/test/golden/__golden__/draggable-bounds-selector-negative-offset-and-margins.golden.json new file mode 100644 index 00000000..3bee7627 --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-selector-negative-offset-and-margins.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-selector-negative-offset-and-margins", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-40,"clientY":-30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-40,"y":-30}, + {"component":"Draggable","data":{"deltaX":43,"deltaY":20,"lastX":0,"lastY":0,"nodeId":"node","x":43,"y":20},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(43px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":300,"clientY":250,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":300,"y":250}, + {"component":"Draggable","data":{"deltaX":79,"deltaY":77,"lastX":43,"lastY":20,"nodeId":"node","x":122,"y":97},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(122px,97px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":300,"clientY":250,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":300,"y":250}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":122,"lastY":97,"nodeId":"node","x":122,"y":97},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(122px,97px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(122px,97px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-bounds-selector.golden.json b/test/golden/__golden__/draggable-bounds-selector.golden.json new file mode 100644 index 00000000..32825aac --- /dev/null +++ b/test/golden/__golden__/draggable-bounds-selector.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-bounds-selector", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":410,"clientY":310,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":410,"y":310}, + {"component":"Draggable","data":{"deltaX":260,"deltaY":170,"lastX":0,"lastY":0,"nodeId":"node","x":260,"y":170},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(260px,170px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":410,"clientY":310,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":410,"y":310}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":260,"lastY":170,"nodeId":"node","x":260,"y":170},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(260px,170px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(260px,170px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-cancel-match.golden.json b/test/golden/__golden__/draggable-cancel-match.golden.json new file mode 100644 index 00000000..afcb21b0 --- /dev/null +++ b/test/golden/__golden__/draggable-cancel-match.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-cancel-match", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"cancel","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-cancel-miss.golden.json b/test/golden/__golden__/draggable-cancel-miss.golden.json new file mode 100644 index 00000000..3132e451 --- /dev/null +++ b/test/golden/__golden__/draggable-cancel-miss.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-cancel-miss", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-cancel-nested-match.golden.json b/test/golden/__golden__/draggable-cancel-nested-match.golden.json new file mode 100644 index 00000000..2e436450 --- /dev/null +++ b/test/golden/__golden__/draggable-cancel-nested-match.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-cancel-nested-match", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"nested","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-cancel-wins-over-handle.golden.json b/test/golden/__golden__/draggable-cancel-wins-over-handle.golden.json new file mode 100644 index 00000000..3311679d --- /dev/null +++ b/test/golden/__golden__/draggable-cancel-wins-over-handle.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-cancel-wins-over-handle", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"nested","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-controlled-position-rerender-during-drag.golden.json b/test/golden/__golden__/draggable-controlled-position-rerender-during-drag.golden.json new file mode 100644 index 00000000..bbe23a1c --- /dev/null +++ b/test/golden/__golden__/draggable-controlled-position-rerender-during-drag.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-controlled-position-rerender-during-drag", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":5,"lastY":5,"nodeId":"node","x":5,"y":5},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":5,"lastY":5,"nodeId":"node","x":30,"y":20},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","props":{"position":{"x":80,"y":60}},"type":"rerender"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(80px,60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"rerender","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":55,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":55,"y":45}, + {"component":"Draggable","data":{"deltaX":20,"deltaY":20,"lastX":80,"lastY":60,"nodeId":"node","x":100,"y":80},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(100px,80px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":55,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":55,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":100,"lastY":80,"nodeId":"node","x":100,"y":80},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(80px,60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(80px,60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-controlled-position-rerender-idle.golden.json b/test/golden/__golden__/draggable-controlled-position-rerender-idle.golden.json new file mode 100644 index 00000000..6bfd9cda --- /dev/null +++ b/test/golden/__golden__/draggable-controlled-position-rerender-idle.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-controlled-position-rerender-idle", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","props":{"position":{"x":-15,"y":25}},"type":"rerender"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(-15px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"rerender","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":-15,"lastY":25,"nodeId":"node","x":-15,"y":25},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-15px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":-15,"lastY":25,"nodeId":"node","x":10,"y":40},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,40px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":10,"lastY":40,"nodeId":"node","x":40,"y":60},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(40px,60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":40,"lastY":60,"nodeId":"node","x":40,"y":60},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(-15px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(-15px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-controlled-position-reverts-after-drag-batched.golden.json b/test/golden/__golden__/draggable-controlled-position-reverts-after-drag-batched.golden.json new file mode 100644 index 00000000..2ffda260 --- /dev/null +++ b/test/golden/__golden__/draggable-controlled-position-reverts-after-drag-batched.golden.json @@ -0,0 +1,30 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-controlled-position-reverts-after-drag-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":5,"lastY":5,"nodeId":"node","x":5,"y":5},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-controlled-position-reverts-after-drag.golden.json b/test/golden/__golden__/draggable-controlled-position-reverts-after-drag.golden.json new file mode 100644 index 00000000..21253630 --- /dev/null +++ b/test/golden/__golden__/draggable-controlled-position-reverts-after-drag.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-controlled-position-reverts-after-drag", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":5,"lastY":5,"nodeId":"node","x":5,"y":5},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":5,"lastY":5,"nodeId":"node","x":30,"y":20},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":30,"lastY":20,"nodeId":"node","x":30,"y":20},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(5px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-custom-class-names-preserve-child-class.golden.json b/test/golden/__golden__/draggable-custom-class-names-preserve-child-class.golden.json new file mode 100644 index 00000000..4409dfb7 --- /dev/null +++ b/test/golden/__golden__/draggable-custom-class-names-preserve-child-class.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-custom-class-names-preserve-child-class", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["golden-base","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["golden-active","golden-base","golden-used","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["golden-active","golden-base","golden-used","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["golden-active","golden-base","golden-used","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["golden-base","golden-used","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["golden-base","golden-used","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-defaultPosition-rerender-does-not-reset-state.golden.json b/test/golden/__golden__/draggable-defaultPosition-rerender-does-not-reset-state.golden.json new file mode 100644 index 00000000..95f60dec --- /dev/null +++ b/test/golden/__golden__/draggable-defaultPosition-rerender-does-not-reset-state.golden.json @@ -0,0 +1,60 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-defaultPosition-rerender-does-not-reset-state", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":-10,"nodeId":"node","x":20,"y":-10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":20,"lastY":-10,"nodeId":"node","x":45,"y":5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(45px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":45,"lastY":5,"nodeId":"node","x":75,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(75px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":75,"lastY":25,"nodeId":"node","x":75,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(75px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","props":{"defaultPosition":{"x":90,"y":80}},"type":"rerender"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(75px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"rerender","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":75,"lastY":25,"nodeId":"node","x":75,"y":25},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(75px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":75,"lastY":25,"nodeId":"node","x":100,"y":40},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(100px,40px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":100,"lastY":40,"nodeId":"node","x":130,"y":60},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(130px,60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":130,"lastY":60,"nodeId":"node","x":130,"y":60},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(130px,60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(130px,60px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-defaultPosition-retained-after-drag-batched.golden.json b/test/golden/__golden__/draggable-defaultPosition-retained-after-drag-batched.golden.json new file mode 100644 index 00000000..043dbcb5 --- /dev/null +++ b/test/golden/__golden__/draggable-defaultPosition-retained-after-drag-batched.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-defaultPosition-retained-after-drag-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":-10,"nodeId":"node","x":20,"y":-10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-defaultPosition-retained-after-drag.golden.json b/test/golden/__golden__/draggable-defaultPosition-retained-after-drag.golden.json new file mode 100644 index 00000000..9f2bd33b --- /dev/null +++ b/test/golden/__golden__/draggable-defaultPosition-retained-after-drag.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-defaultPosition-retained-after-drag", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":-10,"nodeId":"node","x":20,"y":-10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":20,"lastY":-10,"nodeId":"node","x":45,"y":5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(45px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":45,"lastY":5,"nodeId":"node","x":75,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(75px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":75,"lastY":25,"nodeId":"node","x":75,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(75px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(75px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-disabled-rerender-mid-drag-keeps-active-listeners.golden.json b/test/golden/__golden__/draggable-disabled-rerender-mid-drag-keeps-active-listeners.golden.json new file mode 100644 index 00000000..2b4d10ea --- /dev/null +++ b/test/golden/__golden__/draggable-disabled-rerender-mid-drag-keeps-active-listeners.golden.json @@ -0,0 +1,35 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-disabled-rerender-mid-drag-keeps-active-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","props":{"disabled":true},"type":"rerender"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"rerender","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-grid-negative-half-ties.golden.json b/test/golden/__golden__/draggable-grid-negative-half-ties.golden.json new file mode 100644 index 00000000..a7c6a341 --- /dev/null +++ b/test/golden/__golden__/draggable-grid-negative-half-ties.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-grid-negative-half-ties", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":5,"clientY":5,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":5,"y":5}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":4,"clientY":4,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":4,"y":4}, + {"component":"Draggable","data":{"deltaX":-10,"deltaY":-10,"lastX":0,"lastY":0,"nodeId":"node","x":-10,"y":-10},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-10px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-5,"clientY":-5,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":-5,"y":-5}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(-10px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":-6,"clientY":-6,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":-6,"y":-6}, + {"component":"Draggable","data":{"deltaX":-10,"deltaY":-10,"lastX":-10,"lastY":-10,"nodeId":"node","x":-20,"y":-20},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(-10px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(-10px,-10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-grid-relative-to-nonzero-origin.golden.json b/test/golden/__golden__/draggable-grid-relative-to-nonzero-origin.golden.json new file mode 100644 index 00000000..a773b5fc --- /dev/null +++ b/test/golden/__golden__/draggable-grid-relative-to-nonzero-origin.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-grid-relative-to-nonzero-origin", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":13,"clientY":7,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":13,"y":7}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":18,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":18}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":10,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":29,"clientY":29,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":29,"y":29}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":0,"lastX":10,"lastY":15,"nodeId":"node","x":20,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":33,"clientY":40,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":33,"y":40}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":15,"lastX":20,"lastY":15,"nodeId":"node","x":20,"y":30},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(20px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-grid-suppresses-subthreshold-and-snaps-stop.golden.json b/test/golden/__golden__/draggable-grid-suppresses-subthreshold-and-snaps-stop.golden.json new file mode 100644 index 00000000..8f16ba74 --- /dev/null +++ b/test/golden/__golden__/draggable-grid-suppresses-subthreshold-and-snaps-stop.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-grid-suppresses-subthreshold-and-snaps-stop", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":14,"clientY":19,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":14,"y":19}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":16,"clientY":21,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":16,"y":21}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":20,"lastX":0,"lastY":0,"nodeId":"node","x":10,"y":20},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":24,"clientY":36,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":24,"y":36}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":29,"clientY":48,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":29,"y":48}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":20,"lastX":10,"lastY":20,"nodeId":"node","x":20,"y":40},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(10px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-handle-match.golden.json b/test/golden/__golden__/draggable-handle-match.golden.json new file mode 100644 index 00000000..ae970361 --- /dev/null +++ b/test/golden/__golden__/draggable-handle-match.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-handle-match", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"handle","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-handle-miss.golden.json b/test/golden/__golden__/draggable-handle-miss.golden.json new file mode 100644 index 00000000..f72e0b35 --- /dev/null +++ b/test/golden/__golden__/draggable-handle-miss.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-handle-miss", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-handle-nested-match.golden.json b/test/golden/__golden__/draggable-handle-nested-match.golden.json new file mode 100644 index 00000000..a03d5beb --- /dev/null +++ b/test/golden/__golden__/draggable-handle-nested-match.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-handle-nested-match", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"nested","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-hybrid-touchend-during-mouse-leaks-listeners.golden.json b/test/golden/__golden__/draggable-hybrid-touchend-during-mouse-leaks-listeners.golden.json new file mode 100644 index 00000000..46928e76 --- /dev/null +++ b/test/golden/__golden__/draggable-hybrid-touchend-during-mouse-leaks-listeners.golden.json @@ -0,0 +1,40 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R10: touchend stops a mouse drag with NaN data and removes the touch listener pair.", + "name": "draggable-hybrid-touchend-during-mouse-leaks-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":15}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":5,"lastX":0,"lastY":0,"nodeId":"node","x":10,"y":5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":3,"target":"node","x":20,"y":15}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":{"$number":"NaN"},"deltaY":{"$number":"NaN"},"lastX":10,"lastY":5,"nodeId":"node","x":{"$number":"NaN"},"y":{"$number":"NaN"}},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":45,"clientY":30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":45,"y":30}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":45,"clientY":30,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":45,"y":30}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-idle-unmount-removes-active-selection-hack.golden.json b/test/golden/__golden__/draggable-idle-unmount-removes-active-selection-hack.golden.json new file mode 100644 index 00000000..6487212a --- /dev/null +++ b/test/golden/__golden__/draggable-idle-unmount-removes-active-selection-hack.golden.json @@ -0,0 +1,46 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R5: unmounting an idle sibling removes the active body class and page selection.", + "name": "draggable-idle-unmount-removes-active-selection-hack", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"idle","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":[],"connected":true,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"idle","type":"touchstart"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":[],"connected":true,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"idle","type":"touchstart"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"select"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":[],"connected":true,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"select","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"idle","type":"touchstart"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"kind":"action","type":"unmount-idle"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"idle","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount-idle","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""},{"classes":[],"connected":false,"id":"idle","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-basic-batched.golden.json b/test/golden/__golden__/draggable-mouse-basic-batched.golden.json new file mode 100644 index 00000000..7b24ea02 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-basic-batched.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-mouse-basic-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-basic.golden.json b/test/golden/__golden__/draggable-mouse-basic.golden.json new file mode 100644 index 00000000..a00ed4cc --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-basic.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-basic", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-button-1-allowed.golden.json b/test/golden/__golden__/draggable-mouse-button-1-allowed.golden.json new file mode 100644 index 00000000..8fb6cdc3 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-button-1-allowed.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-button-1-allowed", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":1,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":1,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-button-1-rejected.golden.json b/test/golden/__golden__/draggable-mouse-button-1-rejected.golden.json new file mode 100644 index 00000000..9d106563 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-button-1-rejected.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-button-1-rejected", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":1,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":1,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-button-2-allowed.golden.json b/test/golden/__golden__/draggable-mouse-button-2-allowed.golden.json new file mode 100644 index 00000000..57e747ae --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-button-2-allowed.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-button-2-allowed", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":2,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":2,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-button-2-rejected.golden.json b/test/golden/__golden__/draggable-mouse-button-2-rejected.golden.json new file mode 100644 index 00000000..eb483b89 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-button-2-rejected.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-button-2-rejected", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":2,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":2,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-control-left-allowed.golden.json b/test/golden/__golden__/draggable-mouse-control-left-allowed.golden.json new file mode 100644 index 00000000..40466c27 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-control-left-allowed.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-control-left-allowed", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":true,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":true,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-control-left-rejected.golden.json b/test/golden/__golden__/draggable-mouse-control-left-rejected.golden.json new file mode 100644 index 00000000..3bd0070a --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-control-left-rejected.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-control-left-rejected", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":true,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":true,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-disabled-still-calls-onMouseDown.golden.json b/test/golden/__golden__/draggable-mouse-disabled-still-calls-onMouseDown.golden.json new file mode 100644 index 00000000..7fab971b --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-disabled-still-calls-onMouseDown.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-disabled-still-calls-onMouseDown", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-onDrag-false-synthesizes-stop-at-zero-batched.golden.json b/test/golden/__golden__/draggable-mouse-onDrag-false-synthesizes-stop-at-zero-batched.golden.json new file mode 100644 index 00000000..7a681281 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-onDrag-false-synthesizes-stop-at-zero-batched.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-mouse-onDrag-false-synthesizes-stop-at-zero-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-onDrag-false-synthesizes-stop-at-zero.golden.json b/test/golden/__golden__/draggable-mouse-onDrag-false-synthesizes-stop-at-zero.golden.json new file mode 100644 index 00000000..7eca6309 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-onDrag-false-synthesizes-stop-at-zero.golden.json @@ -0,0 +1,36 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-onDrag-false-synthesizes-stop-at-zero", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":false}, + {"component":"Draggable","data":{"deltaX":-10,"deltaY":-10,"lastX":0,"lastY":0,"nodeId":"node","x":-10,"y":-10},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-onStart-false-batched.golden.json b/test/golden/__golden__/draggable-mouse-onStart-false-batched.golden.json new file mode 100644 index 00000000..fa4b55b8 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-onStart-false-batched.golden.json @@ -0,0 +1,31 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-mouse-onStart-false-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-onStart-false.golden.json b/test/golden/__golden__/draggable-mouse-onStart-false.golden.json new file mode 100644 index 00000000..78445460 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-onStart-false.golden.json @@ -0,0 +1,30 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-onStart-false", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-onStop-false-on-document-retains-listeners.golden.json b/test/golden/__golden__/draggable-mouse-onStop-false-on-document-retains-listeners.golden.json new file mode 100644 index 00000000..b908134e --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-onStop-false-on-document-retains-listeners.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-onStop-false-on-document-retains-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-onStop-false-on-node-runs-twice-batched.golden.json b/test/golden/__golden__/draggable-mouse-onStop-false-on-node-runs-twice-batched.golden.json new file mode 100644 index 00000000..8344dca6 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-onStop-false-on-node-runs-twice-batched.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "batched", + "component": "Draggable", + "knownBug": "R2: document capture and React mouseup both invoke the vetoed stop.", + "name": "draggable-mouse-onStop-false-on-node-runs-twice-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-onStop-false-on-node-runs-twice.golden.json b/test/golden/__golden__/draggable-mouse-onStop-false-on-node-runs-twice.golden.json new file mode 100644 index 00000000..9bdfdde9 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-onStop-false-on-node-runs-twice.golden.json @@ -0,0 +1,41 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R2: document capture and React mouseup both invoke the vetoed stop.", + "name": "draggable-mouse-onStop-false-on-node-runs-twice", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-repeated-drags.golden.json b/test/golden/__golden__/draggable-mouse-repeated-drags.golden.json new file mode 100644 index 00000000..9768148f --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-repeated-drags.golden.json @@ -0,0 +1,54 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-repeated-drags", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":20,"y":15}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":5,"clientY":5,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":5,"y":5}, + {"component":"Draggable","data":{"deltaX":-15,"deltaY":-10,"lastX":55,"lastY":35,"nodeId":"node","x":40,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(40px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":5,"clientY":5,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":5,"y":5}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":40,"lastY":25,"nodeId":"node","x":40,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(40px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(40px,25px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-second-start-resets-origin.golden.json b/test/golden/__golden__/draggable-mouse-second-start-resets-origin.golden.json new file mode 100644 index 00000000..2b9e14e3 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-second-start-resets-origin.golden.json @@ -0,0 +1,45 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R4: mousedown during an active drag repeats onStart and resets last.", + "name": "draggable-mouse-second-start-resets-origin", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":15}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":5,"lastX":0,"lastY":0,"nodeId":"node","x":10,"y":5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":25,"clientY":20,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":25,"y":20}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":5,"deltaY":5,"lastX":10,"lastY":5,"nodeId":"node","x":15,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":35,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":40,"y":35}, + {"component":"Draggable","data":{"deltaX":15,"deltaY":15,"lastX":10,"lastY":5,"nodeId":"node","x":25,"y":20},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":35,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":40,"y":35}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":20,"nodeId":"node","x":25,"y":20},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-unmount-during-onDrag.golden.json b/test/golden/__golden__/draggable-mouse-unmount-during-onDrag.golden.json new file mode 100644 index 00000000..498738c3 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-unmount-during-onDrag.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-unmount-during-onDrag", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"kind":"error","message":"Failed to execute 'initUIEvent' on 'MouseEvent': parameter 4 is not of type 'Window'."}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-unmount-during-onStart.golden.json b/test/golden/__golden__/draggable-mouse-unmount-during-onStart.golden.json new file mode 100644 index 00000000..1a3cf8d5 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-unmount-during-onStart.golden.json @@ -0,0 +1,29 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-unmount-during-onStart", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-unmount-during-onStop.golden.json b/test/golden/__golden__/draggable-mouse-unmount-during-onStop.golden.json new file mode 100644 index 00000000..decddb4e --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-unmount-during-onStop.golden.json @@ -0,0 +1,34 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-unmount-during-onStop", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-unmount-mid-drag-cleans-listeners-batched.golden.json b/test/golden/__golden__/draggable-mouse-unmount-mid-drag-cleans-listeners-batched.golden.json new file mode 100644 index 00000000..8149e926 --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-unmount-mid-drag-cleans-listeners-batched.golden.json @@ -0,0 +1,36 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-mouse-unmount-mid-drag-cleans-listeners-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"unmount"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouse-unmount-mid-drag-cleans-listeners.golden.json b/test/golden/__golden__/draggable-mouse-unmount-mid-drag-cleans-listeners.golden.json new file mode 100644 index 00000000..3f4e8d8b --- /dev/null +++ b/test/golden/__golden__/draggable-mouse-unmount-mid-drag-cleans-listeners.golden.json @@ -0,0 +1,36 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-mouse-unmount-mid-drag-cleans-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"unmount"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouseup-reports-position-without-rendering-it.golden.json b/test/golden/__golden__/draggable-mouseup-reports-position-without-rendering-it.golden.json new file mode 100644 index 00000000..c8732218 --- /dev/null +++ b/test/golden/__golden__/draggable-mouseup-reports-position-without-rendering-it.golden.json @@ -0,0 +1,34 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R6: uncontrolled onStop includes the release delta while the transform retains the last move.", + "name": "draggable-mouseup-reports-position-without-rendering-it", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":0,"clientY":0,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":0,"y":0}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":50,"clientY":0,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":50,"y":0}, + {"component":"Draggable","data":{"deltaX":50,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":50,"y":0},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":80,"clientY":0,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":80,"y":0}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":0,"lastX":50,"lastY":0,"nodeId":"node","x":80,"y":0},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-mouseup-stop-data-ignores-bounds.golden.json b/test/golden/__golden__/draggable-mouseup-stop-data-ignores-bounds.golden.json new file mode 100644 index 00000000..8457ad15 --- /dev/null +++ b/test/golden/__golden__/draggable-mouseup-stop-data-ignores-bounds.golden.json @@ -0,0 +1,34 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R7: release coordinates bypass bounds clamping in onStop.", + "name": "draggable-mouseup-stop-data-ignores-bounds", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":0,"clientY":0,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":0,"y":0}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":50,"clientY":0,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":50,"y":0}, + {"component":"Draggable","data":{"deltaX":50,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":50,"y":0},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":200,"clientY":0,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":200,"y":0}, + {"component":"Draggable","data":{"deltaX":150,"deltaY":0,"lastX":50,"lastY":0,"nodeId":"node","x":200,"y":0},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-node-swap-loses-touchstart-but-keeps-mouse.golden.json b/test/golden/__golden__/draggable-node-swap-loses-touchstart-but-keeps-mouse.golden.json new file mode 100644 index 00000000..810aec3d --- /dev/null +++ b/test/golden/__golden__/draggable-node-swap-loses-touchstart-but-keeps-mouse.golden.json @@ -0,0 +1,49 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R9: touchstart stays bound to the detached node after ref retargeting.", + "name": "draggable-node-swap-loses-touchstart-but-keeps-mouse", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"swap-node"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","seed"],"connected":true,"id":"swapped","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"swap-node","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","seed"],"connected":true,"id":"swapped","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","seed"],"connected":true,"id":"swapped","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","seed"],"connected":true,"id":"swapped","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"swapped","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"swapped","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"swapped","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"swapped","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"swapped","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"swapped","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"swapped","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"swapped","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"swapped","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""},{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"swapped","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-offsetParent-body-ignores-parent-rect.golden.json b/test/golden/__golden__/draggable-offsetParent-body-ignores-parent-rect.golden.json new file mode 100644 index 00000000..7df7b873 --- /dev/null +++ b/test/golden/__golden__/draggable-offsetParent-body-ignores-parent-rect.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-offsetParent-body-ignores-parent-rect", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-offsetParent-parent-rect-and-scroll.golden.json b/test/golden/__golden__/draggable-offsetParent-parent-rect-and-scroll.golden.json new file mode 100644 index 00000000..631bbd57 --- /dev/null +++ b/test/golden/__golden__/draggable-offsetParent-parent-rect-and-scroll.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-offsetParent-parent-rect-and-scroll", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":110,"clientY":80,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":110,"y":80}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":140,"y":100}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":0,"lastY":0,"nodeId":"node","x":30,"y":20},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":140,"y":100}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":30,"lastY":20,"nodeId":"node","x":30,"y":20},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-offsetParent-prop-overrides-node-parent.golden.json b/test/golden/__golden__/draggable-offsetParent-prop-overrides-node-parent.golden.json new file mode 100644 index 00000000..58808bf3 --- /dev/null +++ b/test/golden/__golden__/draggable-offsetParent-prop-overrides-node-parent.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-offsetParent-prop-overrides-node-parent", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":110,"clientY":80,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":110,"y":80}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":140,"y":100}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":0,"lastY":0,"nodeId":"node","x":30,"y":20},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":140,"clientY":100,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":140,"y":100}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":30,"lastY":20,"nodeId":"node","x":30,"y":20},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(30px,20px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-onMouseDown-false-does-not-veto-start.golden.json b/test/golden/__golden__/draggable-onMouseDown-false-does-not-veto-start.golden.json new file mode 100644 index 00000000..6d754700 --- /dev/null +++ b/test/golden/__golden__/draggable-onMouseDown-false-does-not-veto-start.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-onMouseDown-false-does-not-veto-start", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":false}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-pointerdown-is-ignored.golden.json b/test/golden/__golden__/draggable-pointerdown-is-ignored.golden.json new file mode 100644 index 00000000..445288ba --- /dev/null +++ b/test/golden/__golden__/draggable-pointerdown-is-ignored.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R11: pointerdown alone has no registered start handler.", + "name": "draggable-pointerdown-is-ignored", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"pointerdown","x":10,"y":10}, + {"defaultPrevented":false,"kind":"dispatched","type":"pointerdown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"pointerdown","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-positionOffset-percent-batched.golden.json b/test/golden/__golden__/draggable-positionOffset-percent-batched.golden.json new file mode 100644 index 00000000..5b3a27e4 --- /dev/null +++ b/test/golden/__golden__/draggable-positionOffset-percent-batched.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-positionOffset-percent-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-positionOffset-percent.golden.json b/test/golden/__golden__/draggable-positionOffset-percent.golden.json new file mode 100644 index 00000000..8255691d --- /dev/null +++ b/test/golden/__golden__/draggable-positionOffset-percent.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-positionOffset-percent", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(50%, -25%)translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(50%, -25%)translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-positionOffset-pixels.golden.json b/test/golden/__golden__/draggable-positionOffset-pixels.golden.json new file mode 100644 index 00000000..155e385f --- /dev/null +++ b/test/golden/__golden__/draggable-positionOffset-pixels.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-positionOffset-pixels", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(3px, -4px)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(3px, -4px)translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(3px, -4px)translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(3px, -4px)translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(3px, -4px)translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(3px, -4px)translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-scale-0.5.golden.json b/test/golden/__golden__/draggable-scale-0.5.golden.json new file mode 100644 index 00000000..572610a3 --- /dev/null +++ b/test/golden/__golden__/draggable-scale-0.5.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-scale-0.5", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":50,"deltaY":30,"lastX":0,"lastY":0,"nodeId":"node","x":50,"y":30},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(50px,30px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":60,"deltaY":40,"lastX":50,"lastY":30,"nodeId":"node","x":110,"y":70},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(110px,70px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":110,"lastY":70,"nodeId":"node","x":110,"y":70},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(110px,70px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(110px,70px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-scale-2.golden.json b/test/golden/__golden__/draggable-scale-2.golden.json new file mode 100644 index 00000000..4f9ee3c4 --- /dev/null +++ b/test/golden/__golden__/draggable-scale-2.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-scale-2", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":12.5,"deltaY":7.5,"lastX":0,"lastY":0,"nodeId":"node","x":12.5,"y":7.5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(12.5px,7.5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":15,"deltaY":10,"lastX":12.5,"lastY":7.5,"nodeId":"node","x":27.5,"y":17.5},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(27.5px,17.5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":27.5,"lastY":17.5,"nodeId":"node","x":27.5,"y":17.5},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(27.5px,17.5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(27.5px,17.5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-strict-mode-mount-drag-cleanup.golden.json b/test/golden/__golden__/draggable-strict-mode-mount-drag-cleanup.golden.json new file mode 100644 index 00000000..4fdd92f6 --- /dev/null +++ b/test/golden/__golden__/draggable-strict-mode-mount-drag-cleanup.golden.json @@ -0,0 +1,43 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-strict-mode-mount-drag-cleanup", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-svg-drag.golden.json b/test/golden/__golden__/draggable-svg-drag.golden.json new file mode 100644 index 00000000..2f5565c7 --- /dev/null +++ b/test/golden/__golden__/draggable-svg-drag.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-svg-drag", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(0,0)","translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(0,0)","translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(25,15)","translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(55,35)","translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(55,35)","translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":"translate(55,35)","translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-svg-positionOffset-percent.golden.json b/test/golden/__golden__/draggable-svg-positionOffset-percent.golden.json new file mode 100644 index 00000000..a24f820f --- /dev/null +++ b/test/golden/__golden__/draggable-svg-positionOffset-percent.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-svg-positionOffset-percent", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(50%, -25%)translate(7,-3)","translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":7,"lastY":-3,"nodeId":"node","x":7,"y":-3},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(50%, -25%)translate(7,-3)","translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":7,"lastY":-3,"nodeId":"node","x":32,"y":12},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(50%, -25%)translate(32,12)","translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":32,"lastY":12,"nodeId":"node","x":62,"y":32},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(50%, -25%)translate(62,32)","translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":62,"lastY":32,"nodeId":"node","x":62,"y":32},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":"translate(50%, -25%)translate(62,32)","translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":"translate(50%, -25%)translate(62,32)","translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-allowMobileScroll-keeps-default.golden.json b/test/golden/__golden__/draggable-touch-allowMobileScroll-keeps-default.golden.json new file mode 100644 index 00000000..076b38cb --- /dev/null +++ b/test/golden/__golden__/draggable-touch-allowMobileScroll-keeps-default.golden.json @@ -0,0 +1,33 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-allowMobileScroll-keeps-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-cancel-does-not-prevent-default.golden.json b/test/golden/__golden__/draggable-touch-cancel-does-not-prevent-default.golden.json new file mode 100644 index 00000000..06cf43bc --- /dev/null +++ b/test/golden/__golden__/draggable-touch-cancel-does-not-prevent-default.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-cancel-does-not-prevent-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"cancel","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-changedTouches-fallback.golden.json b/test/golden/__golden__/draggable-touch-changedTouches-fallback.golden.json new file mode 100644 index 00000000..5fbbe6ad --- /dev/null +++ b/test/golden/__golden__/draggable-touch-changedTouches-fallback.golden.json @@ -0,0 +1,34 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-changedTouches-fallback", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":0,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[],"touches":[],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":0,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":0,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-disabled-does-not-prevent-default.golden.json b/test/golden/__golden__/draggable-touch-disabled-does-not-prevent-default.golden.json new file mode 100644 index 00000000..6d639576 --- /dev/null +++ b/test/golden/__golden__/draggable-touch-disabled-does-not-prevent-default.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-disabled-does-not-prevent-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-handle-miss-does-not-prevent-default.golden.json b/test/golden/__golden__/draggable-touch-handle-miss-does-not-prevent-default.golden.json new file mode 100644 index 00000000..557d7ad3 --- /dev/null +++ b/test/golden/__golden__/draggable-touch-handle-miss-does-not-prevent-default.golden.json @@ -0,0 +1,26 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-handle-miss-does-not-prevent-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-onDrag-false-remains-active-batched.golden.json b/test/golden/__golden__/draggable-touch-onDrag-false-remains-active-batched.golden.json new file mode 100644 index 00000000..5e120abb --- /dev/null +++ b/test/golden/__golden__/draggable-touch-onDrag-false-remains-active-batched.golden.json @@ -0,0 +1,35 @@ +{ + "cadence": "batched", + "component": "Draggable", + "knownBug": "R3: mouseup cancellation cannot resolve the active touch identifier.", + "name": "draggable-touch-onDrag-false-remains-active-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"touches":[{"identifier":7,"target":"node","x":65,"y":45}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-onDrag-false-remains-active.golden.json b/test/golden/__golden__/draggable-touch-onDrag-false-remains-active.golden.json new file mode 100644 index 00000000..e349f89f --- /dev/null +++ b/test/golden/__golden__/draggable-touch-onDrag-false-remains-active.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R3: mouseup cancellation cannot resolve the active touch identifier.", + "name": "draggable-touch-onDrag-false-remains-active", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"touches":[{"identifier":7,"target":"node","x":65,"y":45}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":55,"deltaY":35,"lastX":0,"lastY":0,"nodeId":"node","x":55,"y":35},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":55,"deltaY":35,"lastX":0,"lastY":0,"nodeId":"node","x":55,"y":35},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-onStart-false-still-prevents-default.golden.json b/test/golden/__golden__/draggable-touch-onStart-false-still-prevents-default.golden.json new file mode 100644 index 00000000..08ebd2e5 --- /dev/null +++ b/test/golden/__golden__/draggable-touch-onStart-false-still-prevents-default.golden.json @@ -0,0 +1,28 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-onStart-false-still-prevents-default", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":false}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-onStop-false-on-node-runs-twice.golden.json b/test/golden/__golden__/draggable-touch-onStop-false-on-node-runs-twice.golden.json new file mode 100644 index 00000000..c84bdc91 --- /dev/null +++ b/test/golden/__golden__/draggable-touch-onStop-false-on-node-runs-twice.golden.json @@ -0,0 +1,38 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R2: document capture and React touchend both invoke the vetoed stop.", + "name": "draggable-touch-onStop-false-on-node-runs-twice", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"touchend","kind":"callback","name":"onStop","returned":false}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"touchend","kind":"callback","name":"onStop","returned":false}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"touches":[{"identifier":7,"target":"node","x":65,"y":45}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-second-start-restarts-first-finger.golden.json b/test/golden/__golden__/draggable-touch-second-start-restarts-first-finger.golden.json new file mode 100644 index 00000000..1798cd2f --- /dev/null +++ b/test/golden/__golden__/draggable-touch-second-start-restarts-first-finger.golden.json @@ -0,0 +1,47 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R4: a second start repeats onStart and retains targetTouches[0].", + "name": "draggable-touch-second-start-restarts-first-finger", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":1,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":1,"target":"node","x":10,"y":10}],"touches":[{"identifier":1,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":1,"target":"node","x":20,"y":15}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":1,"target":"node","x":20,"y":15}],"touches":[{"identifier":1,"target":"node","x":20,"y":15}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":5,"lastX":0,"lastY":0,"nodeId":"node","x":10,"y":5},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":2,"target":"node","x":80,"y":60}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":1,"target":"node","x":20,"y":15},{"identifier":2,"target":"node","x":80,"y":60}],"touches":[{"identifier":1,"target":"node","x":20,"y":15},{"identifier":2,"target":"node","x":80,"y":60}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":5,"nodeId":"node","x":10,"y":5},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(10px,5px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":2,"target":"node","x":90,"y":70}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":1,"target":"node","x":30,"y":20},{"identifier":2,"target":"node","x":90,"y":70}],"touches":[{"identifier":1,"target":"node","x":30,"y":20},{"identifier":2,"target":"node","x":90,"y":70}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":5,"lastX":10,"lastY":5,"nodeId":"node","x":20,"y":10},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":1,"target":"node","x":30,"y":20}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":2,"target":"node","x":90,"y":70}],"touches":[{"identifier":2,"target":"node","x":90,"y":70}],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":20,"lastY":10,"nodeId":"node","x":20,"y":10},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(20px,10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(20px,10px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-single-finger-batched.golden.json b/test/golden/__golden__/draggable-touch-single-finger-batched.golden.json new file mode 100644 index 00000000..7653b79c --- /dev/null +++ b/test/golden/__golden__/draggable-touch-single-finger-batched.golden.json @@ -0,0 +1,31 @@ +{ + "cadence": "batched", + "component": "Draggable", + "name": "draggable-touch-single-finger-batched", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"commit","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-single-finger.golden.json b/test/golden/__golden__/draggable-touch-single-finger.golden.json new file mode 100644 index 00000000..ee0ae544 --- /dev/null +++ b/test/golden/__golden__/draggable-touch-single-finger.golden.json @@ -0,0 +1,34 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-single-finger", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-unmount-mid-drag-cleans-listeners.golden.json b/test/golden/__golden__/draggable-touch-unmount-mid-drag-cleans-listeners.golden.json new file mode 100644 index 00000000..cb10ccf9 --- /dev/null +++ b/test/golden/__golden__/draggable-touch-unmount-mid-drag-cleans-listeners.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-unmount-mid-drag-cleans-listeners", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"unmount"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"touches":[{"identifier":7,"target":"node","x":65,"y":45}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":65,"y":45}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touch-unrelated-finger-ignored.golden.json b/test/golden/__golden__/draggable-touch-unrelated-finger-ignored.golden.json new file mode 100644 index 00000000..437f37a3 --- /dev/null +++ b/test/golden/__golden__/draggable-touch-unrelated-finger-ignored.golden.json @@ -0,0 +1,40 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-touch-unrelated-finger-ignored", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":10,"y":10}],"touches":[{"identifier":7,"target":"node","x":10,"y":10}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":9,"target":"node","x":80,"y":60}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":9,"target":"node","x":80,"y":60}],"touches":[{"identifier":7,"target":"node","x":10,"y":10},{"identifier":9,"target":"node","x":80,"y":60}],"type":"touchmove"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":9,"target":"node","x":80,"y":60}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":9,"target":"node","x":80,"y":60}],"touches":[{"identifier":9,"target":"node","x":80,"y":60}],"type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"touches":[{"identifier":7,"target":"node","x":35,"y":25}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":35,"y":25}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-touchend-reports-changedTouches-without-rendering-it.golden.json b/test/golden/__golden__/draggable-touchend-reports-changedTouches-without-rendering-it.golden.json new file mode 100644 index 00000000..cff06350 --- /dev/null +++ b/test/golden/__golden__/draggable-touchend-reports-changedTouches-without-rendering-it.golden.json @@ -0,0 +1,35 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "knownBug": "R6: touchend changedTouches delta reaches onStop without updating rendered position.", + "name": "draggable-touchend-reports-changedTouches-without-rendering-it", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":0,"y":0}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"node","targetTouches":[{"identifier":7,"target":"node","x":0,"y":0}],"touches":[{"identifier":7,"target":"node","x":0,"y":0}],"type":"touchstart"}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"touchstart","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"eventType":"touchstart","kind":"preventDefault"}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"touchstart","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":true,"kind":"dispatched","type":"touchstart"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchstart","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":50,"y":0}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[{"identifier":7,"target":"node","x":50,"y":0}],"touches":[{"identifier":7,"target":"node","x":50,"y":0}],"type":"touchmove"}, + {"component":"Draggable","data":{"deltaX":50,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":50,"y":0},"eventType":"touchmove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchmove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchmove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchend"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"touchmove"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":{"$type":"undefined"},"changedTouches":[{"identifier":7,"target":"node","x":80,"y":0}],"clientX":{"$type":"undefined"},"clientY":{"$type":"undefined"},"ctrlKey":{"$type":"undefined"},"defaultPrevented":false,"kind":"input","target":"document","targetTouches":[],"touches":[],"type":"touchend"}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":0,"lastX":50,"lastY":0,"nodeId":"node","x":80,"y":0},"eventType":"touchend","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"defaultPrevented":false,"kind":"dispatched","type":"touchend"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"touchend","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(50px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-user-select-hack-disabled-preserves-selection.golden.json b/test/golden/__golden__/draggable-user-select-hack-disabled-preserves-selection.golden.json new file mode 100644 index 00000000..e268dd14 --- /dev/null +++ b/test/golden/__golden__/draggable-user-select-hack-disabled-preserves-selection.golden.json @@ -0,0 +1,39 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-user-select-hack-disabled-preserves-selection", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"select"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"select","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":1} + ] +} diff --git a/test/golden/__golden__/draggable-user-select-nonce-created-once.golden.json b/test/golden/__golden__/draggable-user-select-nonce-created-once.golden.json new file mode 100644 index 00000000..c2064dc0 --- /dev/null +++ b/test/golden/__golden__/draggable-user-select-nonce-created-once.golden.json @@ -0,0 +1,56 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-user-select-nonce-created-once", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":20,"lastX":25,"lastY":15,"nodeId":"node","x":55,"y":35},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","props":{"nonce":"golden-second"},"type":"rerender"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"rerender","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":55,"lastY":35,"nodeId":"node","x":55,"y":35},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(55px,35px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":20,"y":15}, + {"component":"Draggable","data":{"deltaX":10,"deltaY":5,"lastX":55,"lastY":35,"nodeId":"node","x":65,"y":40},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(65px,40px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":20,"clientY":15,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":20,"y":15}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":65,"lastY":40,"nodeId":"node","x":65,"y":40},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(65px,40px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":"golden-first"},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(65px,40px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-user-select-stop-clears-selection.golden.json b/test/golden/__golden__/draggable-user-select-stop-clears-selection.golden.json new file mode 100644 index 00000000..62ed6d49 --- /dev/null +++ b/test/golden/__golden__/draggable-user-select-stop-clears-selection.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-user-select-stop-clears-selection", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"select"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"select","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":25,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":25,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":1}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":35,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":25,"lastY":15,"nodeId":"node","x":25,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"kind":"action","type":"flush-frame"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"flush-frame","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(25px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/draggable-without-nodeRef-react19-start-error.golden.json b/test/golden/__golden__/draggable-without-nodeRef-react19-start-error.golden.json new file mode 100644 index 00000000..24c12e37 --- /dev/null +++ b/test/golden/__golden__/draggable-without-nodeRef-react19-start-error.golden.json @@ -0,0 +1,24 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "draggable-without-nodeRef-react19-start-error", + "schemaVersion": 1, + "steps": [ + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"kind":"error","message":" not mounted on DragStart!"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[],"selection":0}, + {"button":0,"clientX":35,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":35,"y":25}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[],"selection":0}, + {"button":0,"clientX":65,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":65,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[],"selection":0}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":false,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/legacy-core-findDOMNode.golden.json b/test/golden/__golden__/legacy-core-findDOMNode.golden.json new file mode 100644 index 00000000..cb22de8b --- /dev/null +++ b/test/golden/__golden__/legacy-core-findDOMNode.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "DraggableCore", + "name": "legacy-core-findDOMNode", + "reactVersion": "18.3.1", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"DraggableCore","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":10,"lastY":10,"nodeId":"node","x":10,"y":10},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":40,"y":25}, + {"component":"DraggableCore","data":{"deltaX":30,"deltaY":15,"lastX":10,"lastY":10,"nodeId":"node","x":40,"y":25},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":40,"y":25}, + {"component":"DraggableCore","data":{"deltaX":0,"deltaY":0,"lastX":40,"lastY":25,"nodeId":"node","x":40,"y":25},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":70,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":70,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":true,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["seed"],"connected":false,"id":"node","styleTransform":"","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/__golden__/legacy-draggable-findDOMNode.golden.json b/test/golden/__golden__/legacy-draggable-findDOMNode.golden.json new file mode 100644 index 00000000..c2893b3f --- /dev/null +++ b/test/golden/__golden__/legacy-draggable-findDOMNode.golden.json @@ -0,0 +1,37 @@ +{ + "cadence": "per-event", + "component": "Draggable", + "name": "legacy-draggable-findDOMNode", + "reactVersion": "18.3.1", + "schemaVersion": 1, + "steps": [ + {"capture":true,"kind":"listener","operation":"add","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":false,"styleElNonce":null},"dom":[{"classes":["react-draggable","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mount","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":10,"clientY":10,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"node","type":"mousedown","x":10,"y":10}, + {"component":"Draggable","data":{"$type":"undefined"},"eventType":"mousedown","kind":"callback","name":"onMouseDown","returned":{"$type":"undefined"}}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":0,"lastY":0,"nodeId":"node","x":0,"y":0},"eventType":"mousedown","kind":"callback","name":"onStart","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"add","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousedown"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(0px,0px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousedown","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":40,"y":25}, + {"component":"Draggable","data":{"deltaX":30,"deltaY":15,"lastX":0,"lastY":0,"nodeId":"node","x":30,"y":15},"eventType":"mousemove","kind":"callback","name":"onDrag","returned":{"$type":"undefined"}}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":true,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","react-draggable-dragging","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mousemove"},{"capture":true,"passive":{"$type":"undefined"},"target":"document","type":"mouseup"},{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":40,"clientY":25,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mouseup","x":40,"y":25}, + {"component":"Draggable","data":{"deltaX":0,"deltaY":0,"lastX":30,"lastY":15,"nodeId":"node","x":30,"y":15},"eventType":"mouseup","kind":"callback","name":"onStop","returned":{"$type":"undefined"}}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"defaultPrevented":false,"kind":"dispatched","type":"mouseup"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mouseup","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"button":0,"clientX":70,"clientY":45,"ctrlKey":false,"defaultPrevented":false,"kind":"input","target":"document","type":"mousemove","x":70,"y":45}, + {"defaultPrevented":false,"kind":"dispatched","type":"mousemove"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":true,"id":"node","styleTransform":"translate(30px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"mousemove","listeners":[{"capture":true,"passive":false,"target":"node","type":"touchstart"}],"selection":0}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mousemove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchmove"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"mouseup"}, + {"capture":true,"kind":"listener","operation":"remove","passive":{"$type":"undefined"},"target":"document","type":"touchend"}, + {"capture":true,"kind":"listener","operation":"remove","passive":false,"target":"node","type":"touchstart"}, + {"body":{"hasSelectionClass":false,"styleElExists":true,"styleElNonce":null},"dom":[{"classes":["react-draggable","react-draggable-dragged","seed"],"connected":false,"id":"node","styleTransform":"translate(30px,15px)","svgTransformAttr":null,"translate":""}],"kind":"snapshot","label":"unmount","listeners":[],"selection":0} + ] +} diff --git a/test/golden/browser/crosscheck.test.js b/test/golden/browser/crosscheck.test.js new file mode 100644 index 00000000..035bef9e --- /dev/null +++ b/test/golden/browser/crosscheck.test.js @@ -0,0 +1,136 @@ +import {afterAll, beforeAll, describe, expect, test} from 'vitest'; +import {createServer} from 'vite'; +import {mkdtemp, readFile, rm} from 'node:fs/promises'; +import {tmpdir} from 'node:os'; +import path from 'node:path'; +import {fileURLToPath} from 'node:url'; +import {scenarios, browserScenarioNames} from '../scenarios/cases'; +import {observableTrace} from '../recorder'; +import {loadPlaywright} from './playwright'; + +const projectRoot = fileURLToPath(new URL('../../../', import.meta.url)); +const buttonNames = ['left', 'middle', 'right']; +let server; +let browser; +let baseURL; + +// Browser mouse input creates a native text selection even on a plain div. +// jsdom dispatch has no default click action. All other observable fields stay. +const normalizeTransform = value => typeof value === 'string' ? + value.replace(/\s*,\s*/g, ',') : value; + +function comparableTrace(trace) { + return observableTrace(trace).map(step => { + if (step.kind !== 'snapshot') return step; + const {selection: _selection, ...snapshot} = step; + return { + ...snapshot, + dom: snapshot.dom.map(node => ({ + ...node, + styleTransform: normalizeTransform(node.styleTransform), + translate: normalizeTransform(node.translate), + svgTransformAttr: normalizeTransform(node.svgTransformAttr), + })), + }; + }); +} + +let cacheDir; + +beforeAll(async () => { + cacheDir = await mkdtemp(path.join(tmpdir(), 'react-draggable-golden-vite-')); + server = await createServer({ + configFile: false, + root: projectRoot, + cacheDir, + logLevel: 'error', + server: {host: '127.0.0.1', port: 0, hmr: false}, + optimizeDeps: {include: ['react', 'react-dom', 'react-dom/client']}, + }); + await server.listen(); + baseURL = server.resolvedUrls.local[0]; + const {chromium} = loadPlaywright(); + browser = await chromium.launch({ + headless: true, + ...(process.env.PLAYWRIGHT_EXECUTABLE_PATH ? { + executablePath: process.env.PLAYWRIGHT_EXECUTABLE_PATH, + } : {}), + }); +}); + +afterAll(async () => { + try { + await browser?.close(); + } finally { + try { + await server?.close(); + } finally { + if (cacheDir) await rm(cacheDir, {recursive: true, force: true}); + } + } +}); + +async function driveMouse(page, events) { + let pointer = {x: 0, y: 0}; + let controlDown = false; + for (const input of events) { + if (!['mousedown', 'mousemove', 'mouseup'].includes(input.type)) { + throw new Error(`Real mouse cross-check cannot execute ${input.type}.`); + } + const nextControl = Boolean(input.ctrlKey); + if (nextControl !== controlDown) { + await page.keyboard[nextControl ? 'down' : 'up']('Control'); + controlDown = nextControl; + } + await page.evaluate(event => window.goldenBrowser.prepareInput(event), input); + const x = input.x ?? 0; + const y = input.y ?? 0; + if (input.type === 'mousemove') { + await page.mouse.move(x, y); + } else { + // Repositioning during a live drag would inject an extra mousemove. + if (pointer.x !== x || pointer.y !== y) { + if (input.type !== 'mousedown') { + throw new Error('Cross-check mouseup must use the preceding move coordinates.'); + } + await page.mouse.move(x, y); + } + const button = buttonNames[input.button ?? 0]; + if (!button) throw new Error(`Unsupported mouse button ${input.button}.`); + await page.mouse[input.type === 'mousedown' ? 'down' : 'up']({button}); + } + pointer = {x, y}; + // Each command is its own browser task; wait for React and scheduled cleanup. + await page.evaluate(label => window.goldenBrowser.snapshot(label), input.type); + } +} + +describe('real mouse input agrees with checked-in jsdom goldens', () => { + test.each(browserScenarioNames)('%s', async name => { + const scenario = scenarios.find(item => item.name === name); + expect(scenario, `Missing selected scenario ${name}`).toBeDefined(); + expect(scenario.cadence).toBe('per-event'); + const goldenPath = path.join(projectRoot, 'test/golden/__golden__', `${name}.golden.json`); + const golden = JSON.parse(await readFile(goldenPath, 'utf8')); + expect(golden.name).toBe(name); + const context = await browser.newContext({viewport: {width: 1200, height: 900}}); + const page = await context.newPage(); + const errors = []; + page.on('pageerror', error => errors.push(error.message)); + await page.route('**/*', route => { + const url = new URL(route.request().url()); + return url.origin === new URL(baseURL).origin ? route.continue() : route.abort(); + }); + try { + await page.goto(`${baseURL}test/golden/browser/index.html`); + await page.waitForFunction(() => Boolean(window.goldenBrowser)); + await page.evaluate(scenarioName => window.goldenBrowser.mount(scenarioName), name); + await driveMouse(page, scenario.events); + const actual = await page.evaluate(() => window.goldenBrowser.unmount()); + expect(errors).toEqual([]); + expect(comparableTrace(actual)).toEqual(comparableTrace(golden.steps)); + } finally { + await context.close(); + } + }); +}); diff --git a/test/golden/browser/fixture.jsx b/test/golden/browser/fixture.jsx new file mode 100644 index 00000000..aca13246 --- /dev/null +++ b/test/golden/browser/fixture.jsx @@ -0,0 +1,79 @@ +import React from 'react'; +import {createRoot} from 'react-dom/client'; +import {flushSync} from 'react-dom'; +import Draggable from '../../../lib/Draggable'; +import DraggableCore from '../../../lib/DraggableCore'; +import {createRecorder, observableTrace} from '../recorder'; +import {stableValue} from '../serialize'; +import {scenarios} from '../scenarios/cases'; + +let mounted; +const settle = () => new Promise(resolve => requestAnimationFrame(() => resolve())); + +async function mount(name) { + if (mounted) throw new Error('The browser fixture already has a mounted scenario.'); + const scenario = scenarios.find(item => item.name === name); + if (!scenario) throw new Error(`Unknown golden scenario: ${name}`); + if (scenario.cadence !== 'per-event') throw new Error('Real input requires per-event cadence.'); + if (scenario.geometry || scenario.svg || scenario.useOffsetParent || scenario.strict || + scenario.unmountOn || scenario.nodeRef === false) { + throw new Error('This browser cross-check requires the default HTML geometry and lifecycle.'); + } + const nodeRef = React.createRef(); + const recorder = createRecorder(document); + window.__trace = recorder.trace; + const root = createRoot(document.getElementById('root')); + const Component = scenario.component === 'DraggableCore' ? DraggableCore : Draggable; + const callbacks = recorder.callbacks(scenario.component, scenario.returns); + + // Native CSS layout is the independent oracle. Do not import installLayout. + flushSync(() => root.render( +
+ +
+ drag + cancel +
+ +
+ )); + await settle(); + mounted = {root, recorder, node: nodeRef.current}; + recorder.snapshot('mount', [mounted.node]); +} + +function prepareInput(input) { + const target = input.target ?? (input.type === 'mousedown' ? 'node' : 'document'); + const node = document.getElementById('node'); + for (const id of ['handle', 'nested', 'cancel']) { + const child = document.getElementById(id); + child.style.pointerEvents = 'none'; + child.style.position = 'absolute'; + child.style.inset = '0'; + } + if (target !== 'document' && target !== 'node') { + document.getElementById(target).style.pointerEvents = 'auto'; + } + const hit = document.elementFromPoint(input.x, input.y); + if (input.type === 'mousedown' && hit?.id !== target) { + throw new Error(`Expected real pointer target ${target}, got ${hit?.id || hit?.tagName}; ` + + `point (${input.x}, ${input.y}), node bounds ${JSON.stringify(node.getBoundingClientRect())}`); + } +} + +async function snapshot(label) { + await settle(); + mounted.recorder.snapshot(label, [mounted.node]); +} + +async function unmount() { + flushSync(() => mounted.root.unmount()); + await settle(); + mounted.recorder.snapshot('unmount', [mounted.node]); + const result = stableValue(observableTrace(mounted.recorder.trace)); + mounted.recorder.restore(); + mounted = undefined; + return result; +} + +window.goldenBrowser = {mount, prepareInput, snapshot, unmount}; diff --git a/test/golden/browser/index.html b/test/golden/browser/index.html new file mode 100644 index 00000000..b7f689ba --- /dev/null +++ b/test/golden/browser/index.html @@ -0,0 +1,17 @@ + + + + + React Draggable golden cross-check + + + +
+ + + diff --git a/test/golden/browser/playwright.js b/test/golden/browser/playwright.js new file mode 100644 index 00000000..ed03c96b --- /dev/null +++ b/test/golden/browser/playwright.js @@ -0,0 +1,17 @@ +import { createRequire } from 'node:module'; + +const require = createRequire(import.meta.url); + +export function loadPlaywright() { + const modulePath = process.env.PLAYWRIGHT_MODULE_PATH || 'playwright'; + try { + return require(modulePath); + } catch (error) { + throw new Error( + 'Playwright is unavailable. Use the local dependency or set ' + + 'PLAYWRIGHT_MODULE_PATH to an existing offline playwright package. ' + + 'This runner never downloads dependencies or browsers.', + { cause: error }, + ); + } +} diff --git a/test/golden/expectGolden.ts b/test/golden/expectGolden.ts new file mode 100644 index 00000000..14194806 --- /dev/null +++ b/test/golden/expectGolden.ts @@ -0,0 +1,22 @@ +import {readFileSync, writeFileSync, mkdirSync} from 'node:fs'; +import {fileURLToPath} from 'node:url'; +import {dirname, join} from 'node:path'; +import {expect} from 'vitest'; +import {serialize, stableValue} from './serialize'; + +export function expectGolden(name: string, trace: Parameters[0]) { + if (!/^[a-zA-Z0-9][a-zA-Z0-9.-]*$/.test(name)) throw new Error(`Invalid golden name: ${name}`); + const directory = join(dirname(fileURLToPath(import.meta.url)), '__golden__'); + const path = join(directory, `${name}.golden.json`); + const actual = serialize(trace); + if (process.env.GOLDEN_UPDATE === '1') { + mkdirSync(directory, {recursive: true}); + writeFileSync(path, actual); + return; + } + let expected: string; + try { expected = readFileSync(path, 'utf8'); } + catch { throw new Error(`Missing golden ${name}. Run corepack yarn golden:update and review the new trace.`); } + expect(stableValue(trace), `${name}: observable behavior changed. Explain the golden diff before regenerating.`) + .toEqual(JSON.parse(expected)); +} diff --git a/test/golden/harness.ts b/test/golden/harness.ts new file mode 100644 index 00000000..22a9f725 --- /dev/null +++ b/test/golden/harness.ts @@ -0,0 +1,121 @@ +import {act} from 'react'; +import type {createRecorder} from './recorder'; + +export type TouchPoint = {identifier: number, x: number, y: number, target?: string}; +export type Input = { + type: string, target?: string, x?: number, y?: number, button?: number, ctrlKey?: boolean, + touches?: TouchPoint[], targetTouches?: TouchPoint[], changedTouches?: TouchPoint[], + afterBatch?: boolean, props?: Record +}; +type Box = { + rect?: {left: number, top: number}, size?: [number, number], offset?: [number, number], + scroll?: [number, number], padding?: number | number[], border?: number | number[], + margin?: number | number[] +}; +export type Geometry = { + parent?: Box, node?: Box, custom?: Box, offsetParent?: 'parent' | 'body' | 'custom' +}; +const sides = ['Top', 'Right', 'Bottom', 'Left']; +const edges = (value: number | number[] = 0): number[] => + typeof value === 'number' ? [value, value, value, value] : value; + +/** No jsdom layout assumptions: every coordinate read comes from this fixture. */ +export function installLayout(nodes: {parent: HTMLElement, node: Element, custom: HTMLElement}, + geometry: Geometry = {}) { + const styles = new Map>(); + function box(node: Element, value: Box, defaultSize: [number, number]) { + const [width, height] = value.size ?? defaultSize; + const {left, top} = value.rect ?? {left: 0, top: 0}; + const [offsetLeft, offsetTop] = value.offset ?? [0, 0]; + const [scrollLeft, scrollTop] = value.scroll ?? [0, 0]; + const css: Record = {}; + for (const property of ['padding', 'border', 'margin'] as const) { + edges(value[property]).forEach((edge, i) => { + css[`${property}${sides[i]}${property === 'border' ? 'Width' : ''}`] = `${edge}px`; + }); + } + styles.set(node, css); + const properties = {clientWidth: width, clientHeight: height, offsetLeft, offsetTop, scrollLeft, scrollTop}; + for (const [key, val] of Object.entries(properties)) { + Object.defineProperty(node, key, {configurable: true, value: val, writable: true}); + } + Object.defineProperty(node, 'getBoundingClientRect', {configurable: true, value: () => ({ + x: left, y: top, left, top, right: left + width, bottom: top + height, width, height, + toJSON: () => ({left, top, width, height}) + })}); + } + box(nodes.parent, geometry.parent ?? {}, [300, 200]); + box(nodes.node, geometry.node ?? {}, [40, 30]); + box(nodes.custom, geometry.custom ?? {}, [500, 400]); + const offsetParent = geometry.offsetParent === 'body' ? document.body : + geometry.offsetParent === 'custom' ? nodes.custom : nodes.parent; + Object.defineProperty(nodes.node, 'offsetParent', {configurable: true, value: offsetParent}); + const original = window.getComputedStyle; + window.getComputedStyle = function(node, pseudo) { + const computed = original.call(this, node, pseudo); + const css = styles.get(node); + if (!css) return computed; + return new Proxy(computed, {get(target, key) { + if (typeof key === 'string' && key in css) return css[key]; + const value = Reflect.get(target, key, target); + return typeof value === 'function' ? value.bind(target) : value; + }}); + }; + return () => { window.getComputedStyle = original; }; +} + +export function pointerDriver(recorder: ReturnType, + resolve: (target: string) => EventTarget, nodes: () => Element[]) { + function dispatch(input: Input) { + const target = input.target ?? (/down$|start$/.test(input.type) ? 'node' : 'document'); + const point = (p: TouchPoint) => ({ + identifier: p.identifier, clientX: p.x, clientY: p.y, target: resolve(p.target ?? 'node') + }); + const isTouch = input.type.startsWith('touch'); + let event: Event; + if (isTouch) { + event = new Event(input.type, {bubbles: true, cancelable: true}); + const changed = input.changedTouches ?? [{identifier: 1, x: input.x ?? 0, y: input.y ?? 0}]; + const touches = input.touches ?? (input.type === 'touchend' ? [] : changed); + Object.defineProperties(event, { + touches: {value: touches.map(point)}, + targetTouches: {value: (input.targetTouches ?? touches).map(point)}, + changedTouches: {value: changed.map(point)} + }); + } else { + const Constructor = input.type.startsWith('pointer') ? PointerEvent : MouseEvent; + event = new Constructor(input.type, { + bubbles: true, cancelable: true, clientX: input.x ?? 0, clientY: input.y ?? 0, + button: input.button ?? 0, ctrlKey: input.ctrlKey ?? false + }); + } + recorder.trace.push({kind: 'input', ...input, target, + clientX: (event as MouseEvent).clientX, clientY: (event as MouseEvent).clientY, + button: (event as MouseEvent).button, ctrlKey: (event as MouseEvent).ctrlKey, + defaultPrevented: event.defaultPrevented}); + const prevent = event.preventDefault; + event.preventDefault = function() { + recorder.trace.push({kind: 'preventDefault', eventType: event.type}); + prevent.call(event); + }; + resolve(target).dispatchEvent(event); + recorder.trace.push({kind: 'dispatched', type: input.type, defaultPrevented: event.defaultPrevented}); + } + function run(inputs: Input[], cadence: string, action: (input: Input) => boolean) { + const step = (input: Input) => { if (!action(input)) dispatch(input); }; + if (cadence === 'batched') { + act(() => { + for (const input of inputs.filter(event => !event.afterBatch)) { + step(input); + recorder.snapshot(input.type, nodes()); + } + }); + recorder.snapshot('commit', nodes()); + } + for (const input of inputs.filter(event => cadence !== 'batched' || event.afterBatch)) { + act(() => step(input)); + recorder.snapshot(input.type, nodes()); + } + } + return {dispatch, run}; +} diff --git a/test/golden/legacy/legacy.golden.test.jsx b/test/golden/legacy/legacy.golden.test.jsx new file mode 100644 index 00000000..80ed486c --- /dev/null +++ b/test/golden/legacy/legacy.golden.test.jsx @@ -0,0 +1,77 @@ +import React, {act} from 'react'; +import ReactDOM from 'react-dom'; +import {createRoot} from 'react-dom/client'; +import {afterEach, beforeEach, describe, expect, test, vi} from 'vitest'; +import Draggable from '../../../lib/Draggable'; +import DraggableCore from '../../../lib/DraggableCore'; +import {createRecorder} from '../recorder'; +import {expectGolden} from '../expectGolden'; +import {pointerDriver} from '../harness'; + +beforeEach(() => { + vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true); + vi.stubGlobal('requestAnimationFrame', callback => { callback(); return 0; }); + document.body.className = ''; + document.getElementById('react-draggable-style-el')?.remove(); + window.getSelection().removeAllRanges(); +}); +afterEach(() => vi.unstubAllGlobals()); + +function runLegacy(Component, component, name) { + const parent = document.createElement('div'); + parent.id = 'parent'; + parent.style.cssText = 'position:relative;width:300px;height:200px'; + document.body.appendChild(parent); + const recorder = createRecorder(document); + const root = createRoot(parent); + let node; + let mounted = true; + try { + // Omitting nodeRef exercises the real React 18 findDOMNode implementation. + act(() => root.render( + +
+ + )); + node = parent.firstElementChild; + recorder.snapshot('mount', [node]); + const events = [ + {type: 'mousedown', target: 'node', x: 10, y: 10}, + {type: 'mousemove', target: 'document', x: 40, y: 25}, + {type: 'mouseup', target: 'document', x: 40, y: 25}, + {type: 'mousemove', target: 'document', x: 70, y: 45}, + ]; + pointerDriver(recorder, target => target === 'node' ? node : document, () => [node]) + .run(events, 'per-event', () => false); + act(() => root.unmount()); + mounted = false; + recorder.snapshot('unmount', [node]); + return { + schemaVersion: 1, reactVersion: React.version, name, component, + cadence: 'per-event', steps: recorder.trace, + }; + } finally { + if (mounted) act(() => root.unmount()); + recorder.restore(); + parent.remove(); + document.body.className = ''; + document.getElementById('react-draggable-style-el')?.remove(); + window.getSelection().removeAllRanges(); + } +} + +describe('React 18 legacy findDOMNode source traces', () => { + test.each([ + ['legacy-core-findDOMNode', 'DraggableCore', DraggableCore], + ['legacy-draggable-findDOMNode', 'Draggable', Draggable], + ])('%s', (name, component, Component) => { + // Any matching React 18 runs the findDOMNode path; the config checks the pair. + expect(React.version.split('.')[0]).toBe('18'); + expect(ReactDOM.version).toBe(React.version); + const trace = runLegacy(Component, component, name); + // Regeneration must still demonstrate a successful legacy drag lifecycle. + expect(trace.steps.filter(step => step.kind === 'callback').map(step => step.name)) + .toEqual(['onMouseDown', 'onStart', 'onDrag', 'onStop']); + expectGolden(name, trace); + }); +}); diff --git a/test/golden/recorder.ts b/test/golden/recorder.ts new file mode 100644 index 00000000..7b9da787 --- /dev/null +++ b/test/golden/recorder.ts @@ -0,0 +1,97 @@ +import type {DraggableData} from '../../lib/utils/types'; + +export type TraceStep = Record; +type CallbackName = 'onMouseDown' | 'onStart' | 'onDrag' | 'onStop'; +type ReturnValues = Partial>; +type Listener = { + target: EventTarget, type: string, callback: EventListenerOrEventListenerObject | null, + capture: boolean, passive: boolean | undefined +}; + +const documentEvents = new Set(['mousemove', 'mouseup', 'touchmove', 'touchend']); +const targetId = (target: EventTarget, doc: Document): string => + target === doc ? 'document' : (target as Element).id; + +/** Track actual listener identities, including duplicate adds and failed removes. */ +export function createRecorder(doc: Document = document) { + const trace: TraceStep[] = []; + const attached: Listener[] = []; + const prototype = doc.defaultView!.EventTarget.prototype; + const add = prototype.addEventListener; + const remove = prototype.removeEventListener; + const relevant = (target: EventTarget, type: string) => + (target === doc && documentEvents.has(type)) || + (type === 'touchstart' && ['node', 'idle', 'swapped'].includes((target as Element).id)); + + function observe(target: EventTarget, type: string, callback: Listener['callback'], + options: boolean | AddEventListenerOptions | undefined, operation: 'add' | 'remove') { + if (!relevant(target, type)) return; + const capture = typeof options === 'boolean' ? options : Boolean(options?.capture); + const passive = typeof options === 'object' ? options.passive : undefined; + const index = attached.findIndex(entry => entry.target === target && entry.type === type && + entry.callback === callback && entry.capture === capture); + if (operation === 'add' && index === -1) attached.push({target, type, callback, capture, passive}); + if (operation === 'remove' && index !== -1) attached.splice(index, 1); + trace.push({kind: 'listener', operation, target: targetId(target, doc), type, capture, passive}); + } + + prototype.addEventListener = function(type, callback, options) { + observe(this, type, callback, options, 'add'); + return add.call(this, type, callback, options); + }; + prototype.removeEventListener = function(type, callback, options) { + observe(this, type, callback, options, 'remove'); + return remove.call(this, type, callback, options); + }; + + function callbacks(component: string, returns: ReturnValues = {}, + effect?: (name: CallbackName, event: Event, data?: DraggableData) => void) { + return Object.fromEntries((['onMouseDown', 'onStart', 'onDrag', 'onStop'] as const).map(name => [ + name, (event: Event, data?: DraggableData) => { + const returned = returns[name]; + const serialized = data && { + nodeId: data.node.id, x: data.x, y: data.y, + deltaX: data.deltaX, deltaY: data.deltaY, lastX: data.lastX, lastY: data.lastY + }; + trace.push({kind: 'callback', name, component, eventType: event.type, data: serialized, returned}); + effect?.(name, event, data); + return returned; + } + ])); + } + + function snapshot(label: string, nodes: Element[]) { + const style = doc.getElementById('react-draggable-style-el'); + trace.push({ + kind: 'snapshot', label, + dom: nodes.map(node => ({ + id: node.id, connected: node.isConnected, + styleTransform: (node as HTMLElement).style.transform, + translate: (node as HTMLElement).style.translate, + svgTransformAttr: node.getAttribute('transform'), + classes: [...node.classList].sort() + })), + body: { + hasSelectionClass: doc.body.classList.contains('react-draggable-transparent-selection'), + styleElExists: Boolean(style), styleElNonce: style?.getAttribute('nonce') ?? null + }, + selection: doc.defaultView!.getSelection()?.rangeCount ?? null, + listeners: attached.map(({target, type, capture, passive}) => ({ + target: targetId(target, doc), type, capture, passive + })).sort((a, b) => JSON.stringify(a).localeCompare(JSON.stringify(b))) + }); + } + + function restore() { + // A known-bug trace may deliberately leave listeners on a detached old node. + for (const entry of attached) remove.call(entry.target, entry.type, entry.callback, entry.capture); + prototype.addEventListener = add; + prototype.removeEventListener = remove; + } + return {trace, callbacks, snapshot, restore}; +} + +/** Browser differential: ignore dispatch mechanics, retain all shared outputs. */ +export function observableTrace(trace: TraceStep[]): TraceStep[] { + return trace.filter(step => step.kind === 'callback' || step.kind === 'snapshot'); +} diff --git a/test/golden/scenarios/cases.ts b/test/golden/scenarios/cases.ts new file mode 100644 index 00000000..cfaef7ac --- /dev/null +++ b/test/golden/scenarios/cases.ts @@ -0,0 +1,336 @@ +import type {Geometry, Input} from '../harness'; + +export type Scenario = { + name: string, + component: 'Draggable' | 'DraggableCore', + cadence: 'per-event' | 'batched', + props: Record, + events: Input[], + returns?: Partial>, + knownBug?: string, + strict?: boolean, + nodeRef?: boolean, + svg?: boolean, + geometry?: Geometry, + useOffsetParent?: boolean, + unmountOn?: 'onStart' | 'onDrag' | 'onStop' +}; + +type Case = Omit & { + props?: Scenario['props'] +}; + +const down = (x = 10, y = 10, target = 'node'): Input => + ({type: 'mousedown', x, y, target}); +const move = (x: number, y: number): Input => ({type: 'mousemove', x, y}); +const up = (x: number, y: number, target = 'document'): Input => + ({type: 'mouseup', x, y, target}); +const mouse = (target = 'node'): Input[] => [ + down(10, 10, target), move(35, 25), move(65, 45), up(65, 45) +]; +const point = (identifier: number, x: number, y: number) => + ({identifier, x, y, target: 'node'}); +const touch = (type: string, points: ReturnType[], + changed = points, target = type === 'touchstart' ? 'node' : 'document'): Input => ({ + type, target, touches: points, targetTouches: points, changedTouches: changed +}); +const touchDrag = (): Input[] => [ + touch('touchstart', [point(7, 10, 10)]), + touch('touchmove', [point(7, 35, 25)]), + touch('touchend', [], [point(7, 35, 25)]) +]; + +// Public callback/DOM/listener contracts shared by both component layers. +// Each refusal sends later movement too, so a wrongly accepted start is visible. +const shared: Case[] = [ + {name: 'mouse-basic', events: mouse()}, + {name: 'mouse-repeated-drags', events: [ + ...mouse(), down(20, 15), move(5, 5), up(5, 5) + ]}, + {name: 'mouse-disabled-still-calls-onMouseDown', props: {disabled: true}, events: mouse()}, + {name: 'touch-disabled-does-not-prevent-default', props: {disabled: true}, events: touchDrag()}, + {name: 'handle-match', props: {handle: '.handle'}, events: mouse('handle')}, + {name: 'handle-miss', props: {handle: '.handle'}, events: mouse()}, + {name: 'handle-nested-match', props: {handle: '.handle'}, events: mouse('nested')}, + {name: 'cancel-match', props: {cancel: '.cancel'}, events: mouse('cancel')}, + {name: 'cancel-miss', props: {cancel: '.cancel'}, events: mouse()}, + {name: 'cancel-nested-match', props: {cancel: '.handle'}, events: mouse('nested')}, + {name: 'cancel-wins-over-handle', props: {handle: '.handle', cancel: '#nested'}, events: mouse('nested')}, + {name: 'touch-handle-miss-does-not-prevent-default', props: {handle: '.handle'}, events: touchDrag()}, + {name: 'touch-cancel-does-not-prevent-default', props: {cancel: '.cancel'}, events: [ + {...touch('touchstart', [point(7, 10, 10)]), target: 'cancel'}, + touch('touchmove', [point(7, 35, 25)]), + touch('touchend', [], [point(7, 35, 25)]) + ]}, + ...([1, 2] as const).flatMap(button => [ + {name: `mouse-button-${button}-rejected`, events: [ + {...down(), button}, move(35, 25), {...up(35, 25), button} + ]}, + {name: `mouse-button-${button}-allowed`, props: {allowAnyClick: true}, events: [ + {...down(), button}, move(35, 25), {...up(35, 25), button} + ]} + ]), + {name: 'mouse-control-left-rejected', events: [ + {...down(), ctrlKey: true}, move(35, 25), {...up(35, 25), ctrlKey: true} + ]}, + {name: 'mouse-control-left-allowed', props: {allowAnyClick: true}, events: [ + {...down(), ctrlKey: true}, move(35, 25), {...up(35, 25), ctrlKey: true} + ]}, + {name: 'onMouseDown-false-does-not-veto-start', returns: {onMouseDown: false}, events: mouse()}, + {name: 'mouse-onStart-false', returns: {onStart: false}, events: mouse()}, + {name: 'touch-onStart-false-still-prevents-default', returns: {onStart: false}, events: touchDrag()}, + {name: 'mouse-onDrag-false-synthesizes-stop-at-zero', returns: {onDrag: false}, events: mouse()}, + {name: 'touch-onDrag-false-remains-active', returns: {onDrag: false}, + knownBug: 'R3: mouseup cancellation cannot resolve the active touch identifier.', events: [ + touch('touchstart', [point(7, 10, 10)]), + touch('touchmove', [point(7, 35, 25)]), + touch('touchmove', [point(7, 65, 45)]), + touch('touchend', [], [point(7, 65, 45)]) + ]}, + {name: 'mouse-onStop-false-on-node-runs-twice', returns: {onStop: false}, + knownBug: 'R2: document capture and React mouseup both invoke the vetoed stop.', events: [ + down(), move(35, 25), up(35, 25, 'node'), move(65, 45), up(65, 45) + ]}, + {name: 'mouse-onStop-false-on-document-retains-listeners', returns: {onStop: false}, events: [ + down(), move(35, 25), up(35, 25), move(65, 45), up(65, 45) + ]}, + {name: 'touch-onStop-false-on-node-runs-twice', returns: {onStop: false}, + knownBug: 'R2: document capture and React touchend both invoke the vetoed stop.', events: [ + touch('touchstart', [point(7, 10, 10)]), + touch('touchmove', [point(7, 35, 25)]), + touch('touchend', [], [point(7, 35, 25)], 'node'), + touch('touchmove', [point(7, 65, 45)]) + ]}, + {name: 'touch-single-finger', events: touchDrag()}, + {name: 'touch-changedTouches-fallback', events: [ + touch('touchstart', [], [point(0, 10, 10)]), + touch('touchmove', [], [point(0, 35, 25)]), + touch('touchend', [], [point(0, 35, 25)]) + ]}, + {name: 'touch-unrelated-finger-ignored', events: [ + touch('touchstart', [point(7, 10, 10)]), + {type: 'touchmove', touches: [point(7, 10, 10), point(9, 80, 60)], + targetTouches: [point(9, 80, 60)], changedTouches: [point(9, 80, 60)]}, + touch('touchend', [point(9, 80, 60)], [point(9, 80, 60)]), + touch('touchmove', [point(7, 35, 25)]), + touch('touchend', [], [point(7, 35, 25)]) + ]}, + {name: 'touch-second-start-restarts-first-finger', + knownBug: 'R4: a second start repeats onStart and retains targetTouches[0].', events: [ + touch('touchstart', [point(1, 10, 10)]), + touch('touchmove', [point(1, 20, 15)]), + touch('touchstart', [point(1, 20, 15), point(2, 80, 60)], [point(2, 80, 60)]), + touch('touchmove', [point(1, 30, 20), point(2, 90, 70)], [point(2, 90, 70)]), + touch('touchend', [point(2, 90, 70)], [point(1, 30, 20)]) + ]}, + {name: 'mouse-second-start-resets-origin', + knownBug: 'R4: mousedown during an active drag repeats onStart and resets last.', events: [ + down(), move(20, 15), down(25, 20), move(40, 35), up(40, 35) + ]}, + {name: 'hybrid-touchend-during-mouse-leaks-listeners', + knownBug: 'R10: touchend stops a mouse drag with NaN data and removes the touch listener pair.', events: [ + down(), move(20, 15), touch('touchend', [], [point(3, 20, 15)], 'node'), + move(45, 30), up(45, 30) + ]}, + {name: 'grid-suppresses-subthreshold-and-snaps-stop', props: {grid: [10, 20]}, events: [ + down(), move(14, 19), move(16, 21), move(24, 36), up(29, 48) + ]}, + {name: 'grid-negative-half-ties', props: {grid: [10, 10]}, events: [ + down(), move(5, 5), move(4, 4), move(-5, -5), up(-6, -6) + ]}, + {name: 'grid-relative-to-nonzero-origin', props: {grid: [10, 15]}, events: [ + down(13, 7), move(20, 18), move(29, 29), up(33, 40) + ]}, + ...([0.5, 2] as const).map(scale => ({ + name: `scale-${scale}`, props: {scale}, events: mouse() + })), + {name: 'offsetParent-body-ignores-parent-rect', geometry: { + offsetParent: 'body', parent: {rect: {left: 100, top: 70}, scroll: [13, 17]} + }, events: mouse()}, + {name: 'offsetParent-parent-rect-and-scroll', geometry: { + parent: {rect: {left: 100, top: 70}, scroll: [13, 17]} + }, events: [down(110, 80), move(140, 100), up(140, 100)]}, + {name: 'offsetParent-prop-overrides-node-parent', useOffsetParent: true, geometry: { + offsetParent: 'parent', parent: {rect: {left: 100, top: 70}}, + custom: {rect: {left: 40, top: 25}, scroll: [9, 11]} + }, events: [down(110, 80), move(140, 100), up(140, 100)]}, + {name: 'user-select-hack-disabled-preserves-selection', props: {enableUserSelectHack: false}, events: [ + {type: 'select'}, ...mouse() + ]}, + {name: 'user-select-stop-clears-selection', events: [ + down(), {type: 'select'}, move(35, 25), up(35, 25), {type: 'flush-frame'} + ]}, + {name: 'user-select-nonce-created-once', props: {nonce: 'golden-first'}, events: [ + ...mouse(), {type: 'rerender', props: {nonce: 'golden-second'}}, + down(), move(20, 15), up(20, 15) + ]}, + {name: 'touch-allowMobileScroll-keeps-default', props: {allowMobileScroll: true}, events: touchDrag()}, + {name: 'mouse-unmount-mid-drag-cleans-listeners', events: [ + down(), move(35, 25), {type: 'unmount'}, move(65, 45), up(65, 45), {type: 'flush-frame'} + ]}, + {name: 'touch-unmount-mid-drag-cleans-listeners', events: [ + touch('touchstart', [point(7, 10, 10)]), + touch('touchmove', [point(7, 35, 25)]), {type: 'unmount'}, + touch('touchmove', [point(7, 65, 45)]), touch('touchend', [], [point(7, 65, 45)]), + {type: 'flush-frame'} + ]}, + ...(['onStart', 'onDrag', 'onStop'] as const).map(unmountOn => ({ + name: `mouse-unmount-during-${unmountOn}`, unmountOn, events: mouse() + })), + {name: 'idle-unmount-removes-active-selection-hack', + knownBug: 'R5: unmounting an idle sibling removes the active body class and page selection.', events: [ + down(), {type: 'select'}, {type: 'unmount-idle'}, {type: 'flush-frame'}, + move(35, 25), up(35, 25) + ]}, + {name: 'node-swap-loses-touchstart-but-keeps-mouse', + knownBug: 'R9: touchstart stays bound to the detached node after ref retargeting.', events: [ + {type: 'swap-node'}, ...touchDrag(), ...mouse() + ]}, + {name: 'strict-mode-mount-drag-cleanup', strict: true, events: mouse()}, + {name: 'without-nodeRef-react19-start-error', nodeRef: false, events: mouse()}, + {name: 'svg-drag', svg: true, events: mouse()}, + {name: 'pointerdown-is-ignored', + knownBug: 'R11: pointerdown alone has no registered start handler.', events: [ + {type: 'pointerdown', x: 10, y: 10}, move(35, 25), up(35, 25) + ]}, + {name: 'disabled-rerender-mid-drag-keeps-active-listeners', events: [ + down(), {type: 'rerender', props: {disabled: true}}, move(35, 25), up(35, 25) + ]} +]; + +// Rendering, controlled state and bounds are owned by the Draggable wrapper. +const draggable: Case[] = [ + {name: 'defaultPosition-retained-after-drag', props: {defaultPosition: {x: 20, y: -10}}, events: mouse()}, + {name: 'defaultPosition-rerender-does-not-reset-state', props: {defaultPosition: {x: 20, y: -10}}, events: [ + ...mouse(), {type: 'rerender', props: {defaultPosition: {x: 90, y: 80}}}, ...mouse() + ]}, + {name: 'controlled-position-reverts-after-drag', props: {position: {x: 5, y: 5}}, events: [ + down(), move(35, 25), up(35, 25) + ]}, + {name: 'controlled-position-rerender-during-drag', props: {position: {x: 5, y: 5}}, events: [ + down(), move(35, 25), {type: 'rerender', props: {position: {x: 80, y: 60}}}, + move(55, 45), up(55, 45) + ]}, + {name: 'controlled-position-rerender-idle', props: {position: {x: 5, y: 5}}, events: [ + {type: 'rerender', props: {position: {x: -15, y: 25}}}, ...mouse() + ]}, + {name: 'positionOffset-pixels', props: {positionOffset: {x: 3, y: -4}}, events: mouse()}, + {name: 'positionOffset-percent', props: {positionOffset: {x: '50%', y: '-25%'}}, events: mouse()}, + ...(['x', 'y', 'both', 'none'] as const).map(axis => ({ + name: `axis-${axis}`, props: {axis}, events: mouse() + })), + {name: 'axis-switch-reveals-accumulated-hidden-coordinate', props: {axis: 'x'}, events: [ + down(), move(35, 25), {type: 'rerender', props: {axis: 'y'}}, + move(55, 45), up(55, 45) + ]}, + {name: 'axis-none-uses-defaultPosition', props: {axis: 'none', defaultPosition: {x: 20, y: -10}}, events: mouse()}, + {name: 'bounds-false-permits-negative-movement', props: {bounds: false}, events: [ + down(), move(-90, -60), up(-90, -60) + ]}, + {name: 'bounds-object-limits-all-sides', props: {bounds: {left: -20, top: -15, right: 60, bottom: 50}}, events: [ + down(), move(100, 90), move(-80, -70), move(20, 15), up(20, 15) + ]}, + {name: 'bounds-object-slack-requires-pointer-return', props: {bounds: {left: 0, top: 0, right: 60, bottom: 40}}, events: [ + down(), move(110, 90), move(90, 70), move(65, 45), move(40, 30), up(40, 30) + ]}, + {name: 'bounds-object-negative-box', props: {bounds: {left: -100, top: -80, right: -20, bottom: -10}}, events: [ + down(), move(-40, -30), move(-140, -110), move(-70, -50), up(-70, -50) + ]}, + {name: 'bounds-object-one-sided', props: {bounds: {right: 40}}, events: [ + down(), move(100, -70), move(-40, -100), up(-40, -100) + ]}, + {name: 'bounds-parent', props: {bounds: 'parent'}, events: [ + down(), move(410, 310), move(-100, -80), up(-100, -80) + ]}, + {name: 'bounds-selector', props: {bounds: '#parent'}, events: [ + down(), move(410, 310), up(410, 310) + ]}, + {name: 'bounds-selector-missing-errors-on-move', props: {bounds: '#missing-bounds'}, events: mouse()}, + {name: 'bounds-parent-padding-border-margin-scroll', props: {bounds: 'parent'}, geometry: { + parent: {rect: {left: 100, top: 70}, size: [300, 200], padding: [7, 11, 13, 17], border: [2, 3, 4, 5], scroll: [19, 23]}, + node: {size: [40, 30], offset: [31, 29], margin: [3, 5, 7, 9], padding: [2, 4, 6, 8], border: [1, 2, 3, 4]} + }, events: [down(140, 110), move(600, 500), move(-100, -100), up(-100, -100)]}, + {name: 'bounds-selector-negative-offset-and-margins', props: {bounds: '#parent'}, geometry: { + parent: {size: [180, 140], padding: [4, 8, 12, 16]}, + node: {size: [55, 45], offset: [-20, -15], margin: [1, 3, 5, 7], border: 2} + }, events: [down(), move(-40, -30), move(300, 250), up(300, 250)]}, + {name: 'bounds-grid-scale-order', props: {bounds: {left: -10, top: -20, right: 35, bottom: 45}, grid: [20, 30], scale: 2}, events: [ + down(), move(160, 190), move(120, 130), move(50, 40), up(50, 40) + ]}, + {name: 'mouseup-reports-position-without-rendering-it', + knownBug: 'R6: uncontrolled onStop includes the release delta while the transform retains the last move.', events: [ + down(0, 0), move(50, 0), up(80, 0) + ]}, + {name: 'touchend-reports-changedTouches-without-rendering-it', + knownBug: 'R6: touchend changedTouches delta reaches onStop without updating rendered position.', events: [ + touch('touchstart', [point(7, 0, 0)]), + touch('touchmove', [point(7, 50, 0)]), touch('touchend', [], [point(7, 80, 0)]) + ]}, + {name: 'mouseup-stop-data-ignores-bounds', props: {bounds: {right: 60}}, + knownBug: 'R7: release coordinates bypass bounds clamping in onStop.', events: [ + down(0, 0), move(50, 0), up(200, 0) + ]}, + {name: 'custom-class-names-preserve-child-class', props: { + defaultClassName: 'golden-base', defaultClassNameDragging: 'golden-active', defaultClassNameDragged: 'golden-used' + }, events: mouse()}, + {name: 'svg-positionOffset-percent', svg: true, props: { + positionOffset: {x: '50%', y: '-25%'}, defaultPosition: {x: 7, y: -3} + }, events: mouse()} +]; + +const componentPrefix = (component: Scenario['component']) => + component === 'DraggableCore' ? 'core' : 'draggable'; +const make = (component: Scenario['component'], spec: Case, + cadence: Scenario['cadence'] = 'per-event'): Scenario => ({ + ...spec, name: `${componentPrefix(component)}-${spec.name}${cadence === 'batched' ? '-batched' : ''}`, + component, cadence, props: spec.props ?? {} +}); + +// Cadence mirrors focus on state/lifecycle boundaries. Repeating every selector +// and button filter in one act would add no separate branch contract. +const batchedShared = new Set([ + 'mouse-basic', 'touch-single-finger', 'mouse-onStart-false', + 'mouse-onDrag-false-synthesizes-stop-at-zero', 'touch-onDrag-false-remains-active', + 'mouse-onStop-false-on-node-runs-twice', 'mouse-unmount-mid-drag-cleans-listeners' +]); +const batchedDraggable = new Set([ + 'defaultPosition-retained-after-drag', 'controlled-position-reverts-after-drag', + 'positionOffset-percent', 'axis-none', 'bounds-object-slack-requires-pointer-return', + 'bounds-grid-scale-order' +]); + +export const scenarios: Scenario[] = [ + ...(['DraggableCore', 'Draggable'] as const).flatMap(component => + shared.map(spec => make(component, spec))), + ...draggable.map(spec => make('Draggable', spec)), + ...(['DraggableCore', 'Draggable'] as const).flatMap(component => + shared.filter(spec => batchedShared.has(spec.name)).map(spec => make(component, spec, 'batched'))), + ...draggable.filter(spec => batchedDraggable.has(spec.name)).map(spec => make('Draggable', spec, 'batched')), + make('Draggable', { + name: 'R1-stuck-later-buttonless-move', + knownBug: 'R1-stuck: batched start/move/stop leaves dragging active and accepts a later buttonless move.', + events: [down(0, 0), move(100, 100), up(100, 100), + {...move(150, 150), afterBatch: true}] + }, 'batched') +]; + +// These starts lie inside the rendered 40x30 HTML child. The browser uses real +// mouse input and real geometry for an independent check of the jsdom fixture. +export const browserScenarioNames = [ + 'core-mouse-basic', + 'draggable-mouse-basic', + 'core-mouse-disabled-still-calls-onMouseDown', + 'core-handle-match', + 'core-handle-miss', + 'core-cancel-match', + 'core-handle-nested-match', + 'core-scale-0.5', + 'core-scale-2', + 'draggable-scale-2', + 'draggable-axis-x', + 'draggable-axis-y', + 'draggable-axis-none', + 'draggable-controlled-position-reverts-after-drag', + 'draggable-bounds-selector', + 'draggable-bounds-object-slack-requires-pointer-return' +]; diff --git a/test/golden/scenarios/interactions.golden.test.jsx b/test/golden/scenarios/interactions.golden.test.jsx new file mode 100644 index 00000000..dcf2eb9c --- /dev/null +++ b/test/golden/scenarios/interactions.golden.test.jsx @@ -0,0 +1,12 @@ +import {describe, it} from 'vitest'; +import {scenarios} from './cases'; +import {runScenario} from './runScenario'; +import {expectGolden} from '../expectGolden'; + +describe('golden interaction traces (current behavior, including bugs)', () => { + for (const scenario of scenarios) { + it(scenario.name, () => { + expectGolden(scenario.name, runScenario(scenario)); + }); + } +}); diff --git a/test/golden/scenarios/runScenario.jsx b/test/golden/scenarios/runScenario.jsx new file mode 100644 index 00000000..41a1110c --- /dev/null +++ b/test/golden/scenarios/runScenario.jsx @@ -0,0 +1,136 @@ +import React from 'react'; +import {act, render, cleanup} from '@testing-library/react'; +import {flushSync} from 'react-dom'; +import Draggable, {DraggableCore} from '../../../lib/Draggable'; +import {createRecorder} from '../recorder'; +import {installLayout, pointerDriver} from '../harness'; + +/** Exercise the public component boundary. Lifecycle actions share the input timeline. */ +export function runScenario(scenario) { + document.body.className = ''; + document.getElementById('react-draggable-style-el')?.remove(); + window.getSelection().removeAllRanges(); + const recorder = createRecorder(document); + const nodeRef = React.createRef(); + const idleRef = React.createRef(); + const parentRef = React.createRef(); + const customRef = React.createRef(); + const observedNodes = []; + let restoreLayout; + let props = {...scenario.props}; + let swapped = false; + let showIdle = scenario.events.some(event => event.type === 'unmount-idle'); + let mounted = true; + let view; + const onError = event => { + recorder.trace.push({kind: 'error', message: event.error?.message ?? event.message}); + event.preventDefault(); + }; + window.addEventListener('error', onError); + + function unmount() { + if (!mounted) return; + view?.unmount(); + mounted = false; + } + const callbacks = recorder.callbacks(scenario.component, scenario.returns, name => { + if (scenario.unmountOn === name) flushSync(unmount); + }); + + function tree() { + const Component = scenario.component === 'DraggableCore' ? DraggableCore : Draggable; + const attach = node => { + nodeRef.current = node; + if (!node || observedNodes.includes(node)) return; + observedNodes.push(node); + }; + const child = scenario.svg ? + : + React.createElement(swapped ? 'span' : 'div', { + id: swapped ? 'swapped' : 'node', className: 'seed', ref: attach, + style: {width: 40, height: 30} + }, drag, + cancel); + const offsetParent = scenario.useOffsetParent ? customRef.current : props.offsetParent; + const draggable = {child}; + return +
+
+ {scenario.svg ? {draggable} : draggable} + {showIdle && +
{ + idleRef.current = node; + if (node && !observedNodes.includes(node)) observedNodes.push(node); + }} /> + } +
+ ; + } + function renderTree() { + const element = scenario.strict ? {tree()} : tree(); + if (view) view.rerender(element); + else view = render(element); + if (nodeRef.current) { + restoreLayout?.(); + restoreLayout = installLayout({node: nodeRef.current, parent: parentRef.current, custom: customRef.current}, scenario.geometry); + } + } + + function action(input) { + if (['unmount', 'unmount-idle', 'swap-node', 'rerender', 'select', 'flush-frame'].includes(input.type)) { + recorder.trace.push({kind: 'action', ...input}); + } + switch (input.type) { + case 'flush-frame': return true; // test/setup.js runs requestAnimationFrame synchronously. + case 'unmount': unmount(); return true; + case 'unmount-idle': showIdle = false; renderTree(); return true; + case 'swap-node': swapped = true; renderTree(); return true; + case 'rerender': props = {...props, ...input.props}; renderTree(); return true; + case 'select': { + const range = document.createRange(); + range.selectNodeContents(document.getElementById('handle')); + window.getSelection().addRange(range); + return true; + } + default: return false; + } + } + + try { + renderTree(); + // The supplied offsetParent is available after refs attach, before input. + if (scenario.useOffsetParent) renderTree(); + recorder.snapshot('mount', observedNodes); + const driver = pointerDriver(recorder, target => { + if (target === 'document') return document; + if (target === 'node') return nodeRef.current ?? observedNodes[observedNodes.length - 1]; + const element = document.getElementById(target); + if (!element) throw new Error(`Missing input target: ${target}`); + return element; + }, () => observedNodes); + driver.run(scenario.events, scenario.cadence, action); + if (mounted) { + act(unmount); + recorder.snapshot('unmount', observedNodes); + } + return { + schemaVersion: 1, name: scenario.name, component: scenario.component, + cadence: scenario.cadence, ...(scenario.knownBug ? {knownBug: scenario.knownBug} : {}), + steps: recorder.trace + }; + } finally { + try { + act(unmount); + cleanup(); + } finally { + restoreLayout?.(); + recorder.restore(); + window.removeEventListener('error', onError); + document.body.className = ''; + document.getElementById('react-draggable-style-el')?.remove(); + window.getSelection().removeAllRanges(); + } + } +} diff --git a/test/golden/serialize.test.ts b/test/golden/serialize.test.ts new file mode 100644 index 00000000..9ce23d1b --- /dev/null +++ b/test/golden/serialize.test.ts @@ -0,0 +1,31 @@ +import {expect, it} from 'vitest'; +import {serialize} from './serialize'; + +it('keeps undefined and nonfinite coordinates in valid JSON, one complete step per line', () => { + const text = serialize({name: 'encoding', steps: [ + {undefined, nan: NaN, positive: Infinity, negative: -Infinity, zero: -0}, + {array: [undefined, NaN], fractional: 1.12345678} + ]}); + const expected = [ + {undefined: {$type: 'undefined'}, nan: {$number: 'NaN'}, positive: {$number: 'Infinity'}, + negative: {$number: '-Infinity'}, zero: {$number: '-0'}}, + {array: [{$type: 'undefined'}, {$number: 'NaN'}], fractional: 1.123457} + ]; + expect(JSON.parse(text)).toEqual({name: 'encoding', steps: expected}); + const lines = text.split('\n').filter(line => line.startsWith(' {')); + expect(lines).toHaveLength(2); + expect(lines.map(line => JSON.parse(line.replace(/,$/, '')))).toEqual(expected); +}); + +it('never encodes an ordinary object the same as a sentinel', () => { + const pairs: Array<[unknown, unknown]> = [ + [undefined, {$type: 'undefined'}], + [NaN, {$number: 'NaN'}], + [new Array(1), [{$hole: true}]], + [new Array(1), [null]], + [{$type: 'undefined'}, {$escaped: {$type: 'undefined'}}] + ]; + for (const [sentinel, lookalike] of pairs) { + expect(serialize({name: 'x', steps: [sentinel]})).not.toBe(serialize({name: 'x', steps: [lookalike]})); + } +}); diff --git a/test/golden/serialize.ts b/test/golden/serialize.ts new file mode 100644 index 00000000..f37d54b0 --- /dev/null +++ b/test/golden/serialize.ts @@ -0,0 +1,34 @@ +/** + * JSON stays valid while preserving values JSON.stringify normally loses: + * undefined, NaN, +/-Infinity, -0 and array holes. Finite numbers round to 6 + * decimals so float noise from layout math does not churn traces. Ordinary + * objects with a "$" key are wrapped in {$escaped}, so none collides with a sentinel. + */ +export function stableValue(value: unknown): unknown { + if (value === undefined) return {$type: 'undefined'}; + if (typeof value === 'number') { + if (Number.isNaN(value)) return {$number: 'NaN'}; + if (!Number.isFinite(value)) return {$number: String(value)}; + if (Object.is(value, -0)) return {$number: '-0'}; + return Math.round(value * 1e6) / 1e6; + } + if (Array.isArray(value)) { + return Array.from(value, (entry, i) => (i in value ? stableValue(entry) : {$hole: true})); + } + if (value !== null && typeof value === 'object') { + const keys = Object.keys(value).sort(); + const encoded = Object.fromEntries(keys.map(key => [ + key, stableValue((value as Record)[key]) + ])); + // Sentinels are objects with a "$" key, so an ordinary object that has one is + // wrapped. That keeps undefined and {$type: 'undefined'} distinct. + return keys.some(key => key.startsWith('$')) ? {$escaped: encoded} : encoded; + } + return value; +} + +export function serialize(trace: {steps: unknown[], [key: string]: unknown}): string { + const {steps, ...metadata} = trace; + const header = JSON.stringify(stableValue(metadata), null, 2).slice(0, -2); + return `${header},\n "steps": [\n${steps.map(step => ` ${JSON.stringify(stableValue(step))}`).join(',\n')}\n ]\n}\n`; +} diff --git a/test/golden/tsconfig.json b/test/golden/tsconfig.json new file mode 100644 index 00000000..5385bc88 --- /dev/null +++ b/test/golden/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "../../tsconfig.json", + "include": ["*.ts", "scenarios/cases.ts"], + "exclude": ["browser"] +} diff --git a/vitest.config.js b/vitest.config.js index 4c88a85e..c348cdcf 100644 --- a/vitest.config.js +++ b/vitest.config.js @@ -10,7 +10,7 @@ export default defineConfig({ globals: true, setupFiles: ['./test/setup.js'], include: ['test/**/*.test.{js,jsx,ts,tsx}'], - exclude: ['test/browser/**'], + exclude: ['test/browser/**', 'test/golden/browser/**', 'test/golden/legacy/**'], // Suppress error stack traces from expected test failures onConsoleLog: () => false, coverage: { diff --git a/vitest.golden-browser.config.js b/vitest.golden-browser.config.js new file mode 100644 index 00000000..08cd1542 --- /dev/null +++ b/vitest.golden-browser.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vitest/config'; + +// A separate Node runner controls Playwright. The page imports lib/ through Vite. +export default defineConfig({ + test: { + environment: 'node', + include: ['test/golden/browser/**/*.test.js'], + fileParallelism: false, + maxWorkers: 1, + testTimeout: 15000, + hookTimeout: 30000, + }, +}); diff --git a/vitest.golden-legacy.config.js b/vitest.golden-legacy.config.js new file mode 100644 index 00000000..69950fd6 --- /dev/null +++ b/vitest.golden-legacy.config.js @@ -0,0 +1,46 @@ +import {defineConfig} from 'vitest/config'; +import {readFileSync} from 'node:fs'; +import {createRequire} from 'node:module'; +import path from 'node:path'; + +// A separate project keeps the main React 19 suite on its installed runtime. +const requestedRoot = process.env.REACT18_MODULE_ROOT; +if (!requestedRoot) { + throw new Error('Set REACT18_MODULE_ROOT to an existing node_modules directory containing matching react@18 and react-dom@18. This optional project never installs dependencies.'); +} +const runtime = path.resolve(requestedRoot); +const packageVersion = name => JSON.parse(readFileSync(path.join(runtime, name, 'package.json'), 'utf8')).version; +let reactVersion; +let domVersion; +let domReactVersion; +try { + reactVersion = packageVersion('react'); + domVersion = packageVersion('react-dom'); + // ReactDOM uses native require internally, so its adjacent React must match too. + domReactVersion = createRequire(path.join(runtime, 'react-dom/package.json'))('react').version; +} catch (cause) { + throw new Error('REACT18_MODULE_ROOT must contain an existing React 18 / ReactDOM 18 runtime with its dependencies.', {cause}); +} +if (!reactVersion.startsWith('18.') || domVersion !== reactVersion || domReactVersion !== reactVersion) { + throw new Error(`REACT18_MODULE_ROOT requires matching React 18 packages; found react=${reactVersion}, react-dom=${domVersion}, ReactDOM dependency=${domReactVersion}.`); +} + +export default defineConfig({ + resolve: { + alias: [ + {find: /^react$/, replacement: path.join(runtime, 'react/index.js')}, + {find: /^react\/jsx-runtime$/, replacement: path.join(runtime, 'react/jsx-runtime.js')}, + {find: /^react\/jsx-dev-runtime$/, replacement: path.join(runtime, 'react/jsx-dev-runtime.js')}, + {find: /^react-dom$/, replacement: path.join(runtime, 'react-dom/index.js')}, + {find: /^react-dom\/client$/, replacement: path.join(runtime, 'react-dom/client.js')}, + {find: /^react-dom\/test-utils$/, replacement: path.join(runtime, 'react-dom/test-utils.js')}, + ], + }, + test: { + environment: 'jsdom', + include: ['test/golden/legacy/**/*.test.jsx'], + fileParallelism: false, + maxWorkers: 1, + server: {deps: {inline: [/react/, /react-dom/]}}, + }, +}); diff --git a/yarn.lock b/yarn.lock index 9dfda1d5..6b63215c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4154,6 +4154,16 @@ __metadata: languageName: node linkType: hard +"fsevents@npm:2.3.2": + version: 2.3.2 + resolution: "fsevents@npm:2.3.2" + dependencies: + node-gyp: "npm:latest" + checksum: 10c0/be78a3efa3e181cda3cf7a4637cb527bcebb0bd0ea0440105a3bb45b86f9245b307dc10a2507e8f4498a7d4ec349d1910f4d73e4d4495b16103106e07eee735b + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": version: 2.3.3 resolution: "fsevents@npm:2.3.3" @@ -4164,6 +4174,15 @@ __metadata: languageName: node linkType: hard +"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin": + version: 2.3.2 + resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin::version=2.3.2&hash=df0bf1" + dependencies: + node-gyp: "npm:latest" + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin::version=2.3.3&hash=df0bf1" @@ -6109,6 +6128,30 @@ __metadata: languageName: node linkType: hard +"playwright-core@npm:1.62.1": + version: 1.62.1 + resolution: "playwright-core@npm:1.62.1" + bin: + playwright-core: cli.js + checksum: 10c0/a37d0f03bb73364cfd0eba704c4b3359b609c4779ae2649a88d8e2b3a29c7357dfcc58bdcf0cb68ddffdef7687abf78902c8356e89f189682c7e19be38e108f0 + languageName: node + linkType: hard + +"playwright@npm:1.62.1": + version: 1.62.1 + resolution: "playwright@npm:1.62.1" + dependencies: + fsevents: "npm:2.3.2" + playwright-core: "npm:1.62.1" + dependenciesMeta: + fsevents: + optional: true + bin: + playwright: cli.js + checksum: 10c0/4d3522cd46325f50c46f8874d31f70d036f6983228a9f8b9d68fc249e4c17464edcd97cc4adfbb24e712d1829c1386d3bc24e17f58a1ced94e7c423300c21845 + languageName: node + linkType: hard + "possible-typed-array-names@npm:^1.0.0, possible-typed-array-names@npm:^1.1.0": version: 1.1.0 resolution: "possible-typed-array-names@npm:1.1.0" @@ -6351,6 +6394,7 @@ __metadata: eslint-plugin-react: "npm:^7.37.5" globals: "npm:^16.5.0" jsdom: "npm:^27.4.0" + playwright: "npm:1.62.1" pre-commit: "npm:^1.2.2" process: "npm:^0.11.10" prop-types: "npm:^15.8.1"