Added chain compositor

VikrantKS · Nov 7, 2017 · 63311e5 · 63311e5
1 parent 5ff6477
commit 63311e5
Show file tree

Hide file tree

Showing 18 changed files with 132 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@
 - **[Pointer](https://popmotion.io/api/pointer):** Full support for mouse and multitouch inputs.
 
 ### Popmotion is:
-- **Tiny:** At 9kb **max**, it's 75% smaller than GreenSock TweenMax. Everything is also importable individually.
+- **Tiny:** At 9kb **max**, it's 75% smaller than GreenSock TweenMax. Everything is also importable individually to crush those bytes!
 - **Reactive:** Super-simple Rx-inspired API for subscribing to streams of animation events.
 - **Composable:** All actions can be **delayed**, **staggered** **merged**, **crossfaded** and **chained**.
 - **Cross-platform:** Runs on **IE9+**, plus **Node**-based environments like Arduino.
@@ -28,7 +28,6 @@
 - **Supported:** Full ecosystem of awesome plugins.
 
 ## Beta TODOs
-- Learn docs
 - Support color
 - Introduce remaining compositors
 - Figure out stagger interface
@@ -40,20 +39,9 @@
 ## Examples
 TODO
 
-## Official plugins
+## Plugins
 - [Draggable](/api/draggable)
-
-## Installation
-
-```bash
-npm install --save popmotion
-```
-
-In your javascript module:
-
-```javascript
-import { tween } from 'popmotion';
-```
+- [Spinnable](/api/spinnable)
 
 ### [Get Started](https://popmotion.io/learn/get-started)
 ### [Full API documentation](https://popmotion.io/api)
diff --git a/docs/api/compositors/chain.md b/docs/api/compositors/chain.md
@@ -0,0 +1,29 @@
+---
+title: Chain
+description: Chain a sequence of actions, move to the next when the current one completes.
+category: compositors
+---
+
+# Chain
+
+Chain a sequence of actions, move to the next when the current one completes.
+
+## Import
+
+```javascript
+import { chain } from 'popmotion';
+// or stand-alone:
+import chain from 'popmotion/compositors/chain';
+```
+
+## Usage
+
+```javascript
+chain(
+  tween({ to: 300 }),
+  spring({ from: 300, to: 0 })
+).start({
+  update: (v) => console.log(v),
+  complete: () => console.log('All actions complete')
+})
+```
diff --git a/docs/api/compositors/composite.md b/docs/api/compositors/composite.md
@@ -6,6 +6,8 @@ category: compositors
 
 # Composite
 
+Control a named map of actions, and output to the same structure.
+
 ## Import
 
 ```javascript

diff --git a/docs/api/compositors/parallel.md b/docs/api/compositors/parallel.md
@@ -6,6 +6,8 @@ category: compositors
 
 # Parallel
 
+Control an n-dimensional array of actions in parallel, and output as an array.
+
 ## Import
 
 ```javascript

diff --git a/docs/api/plugins/draggable.md b/docs/api/plugins/draggable.md
@@ -43,6 +43,8 @@ draggable(node, {
 });
 ```
 
+`draggable` returns an object with a `stop` method.
+
 ## React
 
 ```javascript

diff --git a/docs/api/plugins/spinnable.md b/docs/api/plugins/spinnable.md
@@ -44,6 +44,8 @@ spinnable(node, {
 });
 ```
 
+`spinnable` returns an object with a `stop` method.
+
 ## React
 
 ```javascript

diff --git a/packages/popmotion-draggable/package.json b/packages/popmotion-draggable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "popmotion-draggable",
-  "version": "1.0.1",
+  "version": "8.0.6",
   "description": "Make DOM nodes draggable with Popmotion",
   "author": "Matt Perry <sirhound@popmotion.io>",
   "homepage": "http://popmotion.io",
@@ -48,6 +48,6 @@
     "babel-register": "^6.3.13"
   },
   "peerDependencies": {
-    "popmotion": "^7.7.0"
+    "popmotion": "^8.0.6"
   }
 }
diff --git a/packages/popmotion-draggable/src/index.js b/packages/popmotion-draggable/src/index.js
@@ -14,23 +14,24 @@ export default function draggable(node, {
 
   if (x) {
     values.x = value(initialX);
-    values.x.subscribe((v) => nodeRenderer.set('x', v));
+    values.x.subscribe((v) => nodeStyler.set('x', v));
   }
 
   if (y) {
     values.y = value(initialY);
-    values.y.subscribe((v) => nodeRenderer.set('y', v));
+    values.y.subscribe((v) => nodeStyler.set('y', v));
   }
 
   let trackPointer;
 
-  function startTracking(e) {
+  function startTracking() {
     trackPointer = pointerDelta({
       x: x ? values.x.get() : 0,
       y: y ? values.y.get() : 0
     }).start((v) => {
-      if (x) values.x.update(v);
-      if (y) values.y.update(v);
+      if (x) values.x.update(v.x);
+      if (y) values.y.update(v.y);
+      if (onDrag) onDrag(values);
     });
 
     if (onDragStart) onDragStart(values);
@@ -46,5 +47,7 @@ export default function draggable(node, {
   document.addEventListener('mouseup', stopTracking);
   document.addEventListener('touchend', stopTracking);
 
-  return nodeXY;
+  return {
+    stop: () => trackPointer && trackPointer.stop()
+  };
 }
diff --git a/packages/popmotion-draggable/src/react.js b/packages/popmotion-draggable/src/react.js
@@ -4,6 +4,7 @@ import draggable from './';
 export default class Draggable extends React.Component {
   constructor(props) {
     super(props);
+
     this.setRef = (ref) => {
       if (ref) {
         const { children, className, ...props } = this.props;
@@ -13,7 +14,7 @@ export default class Draggable extends React.Component {
   }
 
   componentWillUnmount() {
-    this.drag.stop();
+    if (this.drag) this.drag.stop();
   }
 
   render() {

diff --git a/packages/popmotion-spinnable/package.json b/packages/popmotion-spinnable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "popmotion-spinnable",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Make DOM nodes spinnable with Popmotion",
   "author": "Matt Perry <sirhound@popmotion.io>",
   "homepage": "http://popmotion.io",
@@ -48,6 +48,6 @@
     "babel-register": "^6.3.13"
   },
   "peerDependencies": {
-    "popmotion": "^7.7.0"
+    "popmotion": "^8.0.6"
   }
 }
diff --git a/packages/popmotion-spinnable/src/index.js b/packages/popmotion-spinnable/src/index.js
@@ -1,5 +1,5 @@
 import {
-  pointerDelta,
+  pointer,
   calc,
   value,
   styler,
@@ -14,9 +14,10 @@ export default function spinnable(node, {
   friction = 0.4,
   transformSpin,
   onSpin
-}) {
+} = {}) {
   const nodeStyler = styler(node);
   const nodeRotation = value(initialRotation);
+  let active;
 
   nodeRotation.subscribe((v) => {
     const current = transformSpin ? transformSpin(v) : v;
@@ -26,8 +27,9 @@ export default function spinnable(node, {
 
   function startTracking(e) {
     e.preventDefault();
+    if (active) active.stop();
 
-    pointerDelta()
+    active = pointer()
       .pipe(
         (v) => {
           const nodePos = node.getBoundingClientRect();
@@ -45,7 +47,8 @@ export default function spinnable(node, {
   }
 
   function stopTracking() {
-    physics({
+    if (active) active.stop();
+    active = physics({
       from: nodeRotation.get(),
       velocity: nodeRotation.getVelocity(),
       friction
@@ -57,5 +60,7 @@ export default function spinnable(node, {
   document.addEventListener('mouseup', stopTracking);
   document.addEventListener('touchend', stopTracking);
 
-  return nodeRotation;
+  return {
+    stop: () => active && active.stop()
+  };
 }
diff --git a/packages/popmotion/CHANGELOG.md b/packages/popmotion/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 Popmotion adheres to [Semantic Versioning](http://semver.org/).
 
+## [8.0.7@beta] 2017-11-07
+
+### Added
+- `chain` compositor.
+
 ## [8.0.4@beta] 2017-10-30
 
 ### Added

diff --git a/packages/popmotion/src/action/index.ts b/packages/popmotion/src/action/index.ts
@@ -13,13 +13,15 @@ export class Action extends Chainable<Action> {
     const observer = createObserver(observerCandidate, observerProps);
     const api = init(observer);
 
-    const subscription: ColdSubscription = {
+    const defaultSubscription: ColdSubscription = {
       stop: () => undefined
     };
 
-    return api
-      ? { ...subscription, ...api }
-      : subscription;
+    const subscription = api
+      ? { ...defaultSubscription, ...api }
+      : defaultSubscription;
+
+    return subscription;
   }
 }
 

diff --git a/packages/popmotion/src/index.ts b/packages/popmotion/src/index.ts
@@ -24,10 +24,11 @@ import touch from './input/touch';
 export { pointerDelta, pointer, mouse, touch };
 
 // Compositors
+import chain from './compositors/chain';
 import composite from './compositors/composite';
 import parallel from './compositors/parallel';
 
-export { composite, parallel };
+export { chain, composite, parallel };
 
 // Includes
 import * as calc from './calc';

diff --git a/packages/popmotion/src/observer/types.ts b/packages/popmotion/src/observer/types.ts
@@ -13,6 +13,7 @@ export interface PartialObserver {
   update?: Update;
   complete?: Complete;
   error?: Error;
+  registerActiveSubscription?: Function;
 }
 
 export type ObserverProps = PartialObserver & {

diff --git a/playground/index.js b/playground/index.js
@@ -8,7 +8,8 @@ import { PhysicsVelocity, PhysicsAcceleration, PhysicsFriction, PhysicsSpring, P
 import { TweenBasic, TweenLoop, TweenYoyo, TweenFlip, TweenWithVelocity } from './tween';
 import { Spring, SpringVelocity, SpringHeavier, SpringStiffer, SpringStifferDamping } from './spring';
 import { Drag, DragWithDeltaPointer } from './pointer';
-
+//import { DraggableDOM, DraggableReact } from './plugins/draggable';
+//import { SpinnableDOM, SpinnableReact } from './plugins/spinnable';
 
 storiesOf('decay', module)
 .add('default decay', () => <Decay />)
@@ -47,3 +48,12 @@ storiesOf('tween', module)
 storiesOf('pointer', module)
 .add('drag', () => <Drag />)
 .add('drag with delta pointer', () => <DragWithDeltaPointer />);
+
+// Commented as there's currently a "Recursion in resolving" error with plugins calling popmotion
+// storiesOf('Plugin: Draggable', module)
+// .add('draggable', () => <DraggableDOM />)
+// .add('draggable React', () => <DraggableReact />);
+
+// storiesOf('Plugin: Spinnable', module)
+// .add('spinnable', () => <SpinnableDOM />)
+// .add('spinnable React', () => <SpinnableReact />);
diff --git a/playground/plugins/draggable.js b/playground/plugins/draggable.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box } from '../inc';
+import draggable from '../../packages/popmotion-draggable/lib';
+import Draggable from '../../packages/popmotion-draggable/lib/react';
+
+export class DraggableDOM extends React.Component {
+  setRef = (dom) => {
+    if (!dom) dom;
+    this.box = draggable(dom);
+  };
+
+  render() {
+    return <Box innerRef={this.setRef} />;
+  }
+}
+
+export const DraggableReact = () => (
+  <Draggable>
+    <Box />
+  </Draggable>
+);
diff --git a/playground/plugins/spinnable.js b/playground/plugins/spinnable.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box } from '../inc';
+import spinnable from '../../packages/popmotion-spinnable/lib';
+import Spinnable from '../../packages/popmotion-spinnable/lib/react';
+
+export class SpinnableDOM extends React.Component {
+  setRef = (dom) => {
+    if (!dom) dom;
+    this.box = spinnable(dom);
+  };
+
+  render() {
+    return <Box innerRef={this.setRef} />;
+  }
+}
+
+export const SpinnableReact = () => (
+  <Spinnable>
+    <Box />
+  </Spinnable>
+);