Whiteboard demo.

Author: queerviolet

app/main.jsx

@@ -10,6 +10,7 @@ import firebase from 'APP/fire'
 
 // -- // Demo components // -- //
 import Scratchpad from 'APP/demos/scratchpad'
+import Whiteboard from 'APP/demos/whiteboard'
 
 // Get the auth API from Firebase.
 const auth = firebase.auth()
@@ -57,6 +58,7 @@ render(
     <Route path="/" component={App}>
       <IndexRedirect to="scratchpad/welcome"/>
       <Route path="scratchpad/:title" component={Scratchpad}/>
+      <Route path="whiteboard/:title" component={Whiteboard}/>
     </Route>
     <Route path='*' component={NotFound}/>
   </Router>,

demos/whiteboard/Canvas.jsx

@@ -0,0 +1,72 @@
+'use strict'
+import React from 'react'
+import {connect} from 'react-redux'
+
+import {penDown, moveTo, penUp} from './reducers'
+
+// A single mark on the whiteboard.
+export const Stroke = ({stroke}) => <path style={stroke.style} d={stroke.data} />
+
+export const Canvas = ({
+  // Props from state
+  strokes,
+  currentStroke,
+
+  // Actions
+  penDown,
+  moveTo,
+  penUp,
+
+  // These event handlers map x and y appropriately,
+  // which turns out to be irritating.
+  onTouchStart=withLocalCoordinates(penDown),
+  onTouchMove=withLocalCoordinates(moveTo),
+  onTouchEnd=withLocalCoordinates(penUp),
+
+  // Root SVG element style
+  style={
+    width: '100%',
+    height: '100%',
+    minWidth: '1440px',
+    minHeight: '1080px',
+  }
+}) =>
+  <svg
+    style={style}
+    onTouchStart={onTouchStart}
+    onTouchMove={onTouchMove}
+    onTouchEnd={onTouchEnd}
+    onMouseDown={onTouchStart}
+    onMouseMove={onTouchMove}
+    onMouseUp={onTouchEnd}>
+    {
+      strokes.map((stroke, idx) => <Stroke key={idx} stroke={stroke}/>)
+    }
+    {currentStroke && <Stroke stroke={currentStroke}/>}
+  </svg>
+
+function closest(Type, event) {
+  let e = event.target
+  while (e.parentElement) {
+    if (e instanceof Type) return e
+    e = e.parentElement
+  }
+  return null
+}
+
+function withLocalCoordinates(actionCreator) {
+  return evt => {
+    // Get the bounding rectangle of the svg element in screen coordinates
+    const rect = closest(window.SVGSVGElement, evt).getBoundingClientRect()
+        , x = evt.pageX - rect.left
+        , y = evt.pageY - rect.top
+
+    // Call the action creator with the right coordinates.
+    return actionCreator(x, y)
+  }
+}
+
+export default connect(
+  ({strokes, currentStroke}) => ({strokes, currentStroke}),
+  {penDown, moveTo, penUp},
+)(Canvas)

demos/whiteboard/Whiteboard.jsx

@@ -0,0 +1,124 @@
+import React from 'react'
+
+import {createStore, applyMiddleware} from 'redux'
+import {composeWithDevTools} from 'redux-devtools-extension'
+import {Provider} from 'react-redux'
+
+import createLogger from 'redux-logger'
+import thunkMiddleware from 'redux-thunk'
+
+import Canvas from './Canvas'
+import reducer from './reducers'
+
+export default class extends React.Component {
+  componentDidMount() {
+    this.mountStoreAtRef(this.props.fireRef)
+  }
+
+  componentWillReceiveProps(incoming, outgoing) {
+    this.mountStoreAtRef(incoming.fireRef)
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe && this.unsubscribe()
+  }
+
+  mountStoreAtRef(ref) {
+    if (this.state && this.state.store) {
+      // If we already have a store, let's destroy it.
+
+      // First, unsubscribe our firebase listener.
+      this.unsubscribe && this.unsubscribe()
+      this.unsubscribe = null
+
+      // Then, do this annoying thing.
+      //
+      // If we don't do this, React does what React does, determines that
+      // our render tree still has a <Provider>, and it should just send
+      // that Provider new props. Unfortunately, <Provider> doesn't support
+      // changing store on the fly. 😡
+      //
+      // So, here's a hack. We set the store to null. This forces a re-render
+      // during which we return null, unmounting our Provider and everything
+      // under it. Then, in the next tick, we actually mount a new <Provider>
+      // with our new store.
+      //
+      // The lag is imperceptible.
+      this.setState({store: null})
+      return process.nextTick(() => this.mountStoreAtRef(ref))
+    }
+
+    const store = createStore(
+      reducer,
+      composeWithDevTools(
+        applyMiddleware(
+          createLogger({collapsed: true}),
+          thunkMiddleware,
+          // We're defining our own middleware! Inline! Oh god! This middleware is going to
+          // sync our actions to Firebase.
+          //
+          // The signature for Redux middleware is:
+          //
+          //   (store: Redux Store) -> (next: Next Dispatch Function) -> New Dispatch Function
+          //
+          // Or, as I like to remember it, store => next => action. Notice that ultimately,
+          // the middleware returns a new dispatch function. That's how you should think of
+          // Redux middleware—it gets the old dispatch function (perhaps the store's base dispatch,
+          // which calls the reducer and updates the state, or the dispatch function returned
+          // by the middleware next in the applyMiddleware chain)—and returns a new dispatch
+          // function. (So function. Wow. 🐶)
+          //
+          // This lets us manipulate the behavior of redux at various points.
+          store => next => {
+            // Whenever an action is pushed into Firebase, dispatch it
+            // to the reducer (or the next middleware).
+            const listener = ref.on('child_added', snapshot => next(snapshot.val()))
+            this.unsubscribe = () => ref.off('child_added', listener)
+
+            // Our new dispatch function is super simple—it pushes actions to Firebase,
+            // unless they have a truthy doNotSync property.
+            //
+            // "But what if our connection to Firebase is down?" Firebase handles this.
+            // It will still call your local listeners, then eventually sync the data
+            // with the server.
+            return action => {
+              if (action.doNotSync) { return next(action) }
+              return ref.push(action)
+            }
+          }
+        )
+      )
+    )
+    this.setState({store})
+  }
+
+  clear = () => {
+    // Blow away the journal
+    this.props.fireRef.set(null)
+    // Reload the store
+    this.mountStoreAtRef(this.props.fireRef)
+  }
+
+  render() {
+    const {store} = this.state || {}
+        , {children} = this.props
+    if (!store) return null
+    // So, this is unexpected.
+    //
+    // We're used to seeing <Provider> at the top of an App. But there's no rule
+    // that has to be the case. In a Firebase app, it makes more sense for the app's
+    // "shell" state to be managed with Firebase (and React Router). The shell
+    // figures out what fireRef to give us based on where the user is in the app,
+    // then we create a <Provider> pointing at a store whose actions are synced to
+    // that Firebase ref.
+    //
+    // If our fireRef changes, we'll throw this store state away and create a new one.
+    // That's fine!
+    return <Provider store={store}>
+      <div>
+        <button onClick={this.clear}>clear</button>
+        <Canvas/>
+      </div>
+    </Provider>
+  }
+}

demos/whiteboard/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {Route} from 'react-router'
+import firebase from 'APP/fire'
+const db = firebase.database()
+
+import Whiteboard from './Whiteboard'
+
+// This component is a little piece of glue between React router
+// and our whiteboard component. It takes in props.params.title, and
+// shows the whiteboard along with that title.
+export default ({params: {title}}) =>
+  <div>
+    <h1>{title}</h1>
+    {/* Here, we're passing in a Firebase reference to
+        /whiteboards/$whiteboardTitle. This is where the whiteboard is
+        stored in Firebase. Each whiteboard is an array of actions that
+        users have dispatched into the whiteboard. */}
+    <Whiteboard fireRef={db.ref('whiteboards').child(title)}/>
+  </div>

demos/whiteboard/reducers/index.jsx

@@ -0,0 +1,81 @@
+import {combineReducers} from 'redux'
+import {List} from 'immutable'
+
+// -- // -- // Actions // -- // -- //
+export const PEN_DOWN = 'PEN_DOWN'
+export const penDown = (x, y) => ({
+  type: PEN_DOWN,
+  pos: [x, y]
+})
+
+export const MOVE_TO = 'MOVE_TO'
+export const moveTo = (x, y) => (dispatch, state) => dispatch({
+  type: MOVE_TO,
+  pos: [x, y],
+  doNotSync: !state().currentStroke,  // Don't journal move events unless
+                                      // we're drawing a stroke.
+})
+
+export const PEN_UP = 'PEN_UP'
+export const penUp = (x, y) => ({
+  type: PEN_UP,
+  pos: [x, y]
+})
+
+// -- // -- // State // -- // -- //
+const initial = {
+  // All the strokes on the whiteboard.
+  // We're using an immutable list here, which is easier
+  // to work with in the reducer.
+  strokes: List(),
+
+  // The stroke we are currently drawing.
+  // Null if we're not drawing, which is how we start off.
+  currentStroke: null,
+}
+
+// -- // -- // Helpers // -- // -- //
+// Convert an array of points into an SVG path data string
+function svgPathData(points) {
+  return 'M ' + points
+          .map(([x, y]) => `${x},${y}`)
+          .join(' L ')
+}
+
+// -- // -- // Reducer // -- // -- //
+export default (state=initial, action) => {
+  let points
+  switch (action.type) {
+  case PEN_DOWN:
+    points = List().push(action.pos)
+    return {...state,
+      currentStroke: {
+        points,
+        style: {
+          fill: 'none',
+          stroke: '#000000',
+          strokeWidth: '5px'
+        },
+        data: svgPathData(points)
+      }
+    }
+
+  case MOVE_TO:
+    if (!state.currentStroke) return state
+    points = state.currentStroke.points.push(action.pos)
+    return {...state,
+      currentStroke: {...state.currentStroke,
+        points,
+        data: svgPathData(points)
+      }
+    }
+
+  case PEN_UP:
+    if (!state.currentStroke) return state
+    return {...state,
+      strokes: state.strokes.push(state.currentStroke),
+      currentStroke: null
+    }
+  }
+  return state
+}

demos/whiteboard/reducers/strokes.js

@@ -54,6 +54,7 @@
     "finalhandler": "^1.0.0",
     "firebase": "^3.9.0",
     "homedir": "^0.6.0",
+    "immutable": "^3.8.1",
     "passport": "^0.3.2",
     "passport-facebook": "^2.1.1",
     "passport-github2": "^0.1.10",