Start the Marker type

smashwilson · smashwilson · commit deb790af9da1 · 2018-06-05T11:37:22.000-04:00
diff --git a/lib/atom/marker.js b/lib/atom/marker.js
@@ -0,0 +1,155 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Disposable} from 'event-kit';
+import {Range, Point} from 'atom';
+
+import {autobind} from '../helpers';
+import {RefHolderPropType} from '../prop-types';
+import RefHolder from '../models/ref-holder';
+
+const MarkablePropType = PropTypes.shape({
+  markBufferRange: PropTypes.func.isRequired,
+  markScreenRange: PropTypes.func.isRequired,
+  markBufferPosition: PropTypes.func.isRequired,
+  markScreenPosition: PropTypes.func.isRequired,
+});
+
+const RangePropType = PropTypes.oneOfType([
+  PropTypes.array,
+  PropTypes.instanceOf(Range),
+]);
+
+const PointPropType = PropTypes.oneOfType([
+  PropTypes.array,
+  PropTypes.instanceOf(Point),
+]);
+
+const markerProps = {
+  maintainHistory: PropTypes.bool,
+  reversed: PropTypes.bool,
+  invalidate: PropTypes.oneOf(['never', 'surround', 'overlap', 'inside', 'touch']),
+};
+
+class WrappedMarker extends React.Component {
+  static propTypes = {
+    ...markerProps,
+    bufferRange: RangePropType,
+    bufferPosition: PointPropType,
+    screenRange: RangePropType,
+    screenPosition: PointPropType,
+    markableHolder: RefHolderPropType,
+    children: PropTypes.element,
+    handleID: PropTypes.func,
+  }
+
+  static defaultProps = {
+    handleID: () => {},
+  }
+
+  constructor(props) {
+    super(props);
+
+    autobind(this, 'createMarker');
+
+    this.sub = new Disposable();
+    this.marker = null;
+  }
+
+  componentDidMount() {
+    this.observeMarkable();
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.markableHolder !== prevProps.markableHolder) {
+      this.observeMarkable();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.marker) {
+      this.marker.destroy();
+    }
+    this.sub.dispose();
+  }
+
+  observeMarkable() {
+    this.sub.dispose();
+    this.sub = this.props.markableHolder.observe(this.createMarker);
+  }
+
+  createMarker() {
+    if (this.marker) {
+      this.marker.destroy();
+    }
+
+    const options = Object.keys(markerProps).reduce((opts, propName) => {
+      if (this.props[propName] !== undefined) {
+        opts[propName] = this.props[propName];
+      }
+      return opts;
+    }, {});
+
+    this.marker = this.props.markableHolder.map(markable => {
+      if (this.props.bufferRange) {
+        return markable.markBufferRange(this.props.bufferRange, options);
+      }
+
+      if (this.props.screenRange) {
+        return markable.markScreenRange(this.props.screenRange, options);
+      }
+
+      if (this.props.bufferPosition) {
+        return markable.markBufferPosition(this.props.bufferPosition, options);
+      }
+
+      if (this.props.screenPosition) {
+        return markable.markScreenPosition(this.props.screenPosition, options);
+      }
+
+      throw new Error('Expected one of bufferRange, screenRange, bufferPosition, or screenPosition to be set');
+    }).getOr(null);
+
+    if (this.marker) {
+      this.props.handleID(this.marker.id);
+    }
+  }
+}
+
+export default class Marker extends React.Component {
+  static propTypes = {
+    editor: MarkablePropType,
+    layer: MarkablePropType,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      markableHolder: RefHolder.on(props.layer || props.editor),
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const markable = props.layer || props.editor;
+
+    if (state.markableHolder.map(m => m === markable).getOr(markable === undefined)) {
+      return {};
+    }
+
+    return {
+      markableHolder: RefHolder.on(markable),
+    };
+  }
+
+  render() {
+    if (!this.state.markableHolder.isEmpty()) {
+      return <WrappedMarker markableHolder={this.state.markableHolder} {...this.props} />;
+    }
+
+    return <WrappedMarker {...this.props} />;
+  }
+}
diff --git a/test/atom/marker.test.js b/test/atom/marker.test.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import {mount} from 'enzyme';
+
+import Marker from '../../lib/atom/marker';
+import AtomTextEditor from '../../lib/atom/atom-text-editor';
+
+describe('Marker', function() {
+  let atomEnv, editor, markerID;
+
+  beforeEach(async function() {
+    atomEnv = global.buildAtomEnvironment();
+    editor = await atomEnv.workspace.open(__filename);
+  });
+
+  function setMarkerID(id) {
+    markerID = id;
+  }
+
+  it('adds its marker on mount with default properties', function() {
+    mount(
+      <Marker editor={editor} bufferRange={[[0, 0], [10, 0]]} handleID={setMarkerID} />,
+    );
+
+    const marker = editor.getMarker(markerID);
+    assert.isTrue(marker.getBufferRange().isEqual([[0, 0], [10, 0]]));
+    assert.strictEqual(marker.bufferMarker.invalidate, 'overlap');
+    assert.isFalse(marker.isReversed());
+    assert.isFalse(marker.bufferMarker.layer.maintainHistory);
+  });
+
+  it('configures its marker');
+
+  it('prefers marking a MarkerLayer to a TextEditor');
+
+  it('removes its layer on unmount');
+
+  it('marks an editor from a parent node');
+
+  it('marks a marker layer from a parent node');
+});
