Docs and a small demo for util/DraggableManager

Signed-off-by: Joe Farro <joef@uber.com>

src/components/App/index.js

@@ -20,8 +20,8 @@ import { ConnectedRouter } from 'react-router-redux';
 
 import 'semantic-ui-css/semantic.min.css';
 
-import Page from './Page';
 import NotFound from './NotFound';
+import Page from './Page';
 import { ConnectedDependencyGraphPage } from '../DependencyGraph';
 import { ConnectedSearchTracePage } from '../SearchTracePage';
 import { ConnectedTracePage } from '../TracePage';

src/utils/DraggableManager/docs/DividerDemo.css

@@ -0,0 +1,44 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.DividerDemo--realm {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.DividerDemo--divider {
+  background: #888;
+  border-bottom: none;
+  border-top: none;
+  border: 1px solid #a9dccc;
+  bottom: 0;
+  cursor: col-resize;
+  position: absolute;
+  top: 0;
+  width: 4px;
+}
+
+.DividerDemo--divider::before {
+  bottom: 0;
+  content: " ";
+  left: -2px;
+  position: absolute;
+  right: -2px;
+  top: 0;
+}

src/utils/DraggableManager/docs/DividerDemo.js

@@ -0,0 +1,84 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+
+import type { DraggableBounds, DraggingUpdate } from '../../DraggableManager';
+import DraggableManager from '../../DraggableManager';
+
+import './DividerDemo.css';
+
+type DividerDemoProps = {
+  position: number,
+  updateState: ({}) => void,
+};
+
+export default class DividerDemo extends React.PureComponent<DividerDemoProps> {
+  props: DividerDemoProps;
+
+  _dragManager: DraggableManager;
+
+  _realmElm: ?Element;
+
+  constructor(props: DividerDemoProps) {
+    super(props);
+
+    this._realmElm = null;
+
+    this._dragManager = new DraggableManager({
+      getBounds: this._getDraggingBounds,
+      onDragEnd: this._handleDragEvent,
+      onDragMove: this._handleDragEvent,
+      onDragStart: this._handleDragEvent,
+    });
+  }
+
+  _setRealm = (elm: ?Element) => {
+    this._realmElm = elm;
+  };
+
+  _getDraggingBounds = (): DraggableBounds => {
+    if (!this._realmElm) {
+      throw new Error('invalid state');
+    }
+    const { left: clientXLeft, width } = this._realmElm.getBoundingClientRect();
+    return {
+      clientXLeft,
+      width,
+      maxValue: 0.98,
+      minValue: 0.02,
+    };
+  };
+
+  _handleDragEvent = ({ value }: DraggingUpdate) => {
+    this.props.updateState({ dividerPosition: value });
+  };
+
+  render() {
+    const { position } = this.props;
+    const style = { left: `${position * 100}%` };
+    return (
+      <div className="DividerDemo--realm" ref={this._setRealm}>
+        <div
+          aria-hidden
+          className="DividerDemo--divider"
+          onMouseDown={this._dragManager.handleMouseDown}
+          style={style}
+        />
+      </div>
+    );
+  }
+}

src/utils/DraggableManager/docs/DraggableManagerDemo.css

@@ -0,0 +1,31 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.DraggableManagerDemo {
+  margin: 5em;
+}
+
+.DraggableManagerDemo--scenario {
+  margin-top: 2em;
+}
+
+.DraggableManagerDemo--realm {
+  background: #d1f1e7;
+  border: 1px solid #888;
+  height: 100px;
+  position: relative;
+  width: 800px;
+}

src/utils/DraggableManager/docs/DraggableManagerDemo.js

@@ -0,0 +1,84 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+
+import DividerDemo from './DividerDemo';
+import RegionDemo from './RegionDemo';
+
+import './DraggableManagerDemo.css';
+
+type DraggableManagerDemoProps = {};
+
+type DraggableManagerDemoState = {
+  dividerPosition: number,
+  regionCursor: ?number,
+  regionDragging: ?[number, number],
+};
+
+export default class DraggableManagerDemo extends React.PureComponent<
+  DraggableManagerDemoProps,
+  DraggableManagerDemoState
+> {
+  props: DraggableManagerDemoProps;
+  state: DraggableManagerDemoState;
+
+  constructor(props: DraggableManagerDemoProps) {
+    super(props);
+    this.state = {
+      dividerPosition: 0.25,
+      regionCursor: null,
+      regionDragging: null,
+    };
+  }
+
+  _udpateState = (nextState: {}) => {
+    this.setState(nextState);
+  };
+
+  render() {
+    const { dividerPosition, regionCursor, regionDragging } = this.state;
+    return (
+      <div className="DraggableManagerDemo">
+        <h1>DraggableManager demo</h1>
+        <section className="DraggableManagerDemo--scenario">
+          <h2>Dragging a Divider</h2>
+          <p>Click and drag the gray divider in the colored area, below.</p>
+          <p>
+            Value: {dividerPosition.toFixed(3)}
+          </p>
+          <div className="DraggableManagerDemo--realm">
+            <DividerDemo position={dividerPosition} updateState={this._udpateState} />
+          </div>
+        </section>
+        <section className="DraggableManagerDemo--scenario">
+          <h2>Dragging a Sub-Region</h2>
+          <p>Click and drag horizontally somewhere in the colored area, below.</p>
+          <p>
+            Value: {regionDragging && regionDragging.map(n => n.toFixed(3)).join(', ')}
+          </p>
+          <div className="DraggableManagerDemo--realm">
+            <RegionDemo
+              regionCursor={regionCursor}
+              regionDragging={regionDragging}
+              updateState={this._udpateState}
+            />
+          </div>
+        </section>
+      </div>
+    );
+  }
+}